WordPressでPythonコードを実行してみた。PyScript

以下の時計とブロック崩しは、今開いているこのページ内で完結してPyScriptで動作しています。

執筆時点の環境は、Wordpress6.4でテーマはcocoonです。

追加のJavascripもCSSも配置せずに動いています！

function.phpに1行だけ追加してます。（後ほど説明いたします。）

from js import document, window, Date from pyodide.ffi import create_proxy def update_clock(): now = Date.new() hours = now.getHours() minutes = now.getMinutes() seconds = now.getSeconds() time_str = f"{hours:02}:{minutes:02}:{seconds:02}" document.getElementById("clock").innerHTML = time_str # 再度実行 window.setTimeout(update_clock_proxy, 1000) update_clock_proxy = create_proxy(update_clock) update_clock_proxy()

↓はブロック崩しです。キャンバスの下にあるGame Startボタンを押すと始まり、操作はキーボードの左右キーです。

from js import document, window from pyodide.ffi import create_proxy canvas = document.getElementById("gameCanvas") context = canvas.getContext("2d") # Ball properties ballRadius = 10 x = canvas.width / 2 y = canvas.height - 30 dx = 1.5 dy = -1.5 # Paddle properties paddleHeight = 10 paddleWidth = 75 paddleX = (canvas.width - paddleWidth) / 2 paddleDx = 5 rightPressed = False leftPressed = False # Brick properties brickRowCount = 3 brickColumnCount = 5 brickWidth = 75 brickHeight = 20 brickPadding = 10 brickOffsetTop = 30 brickOffsetLeft = 30 bricks = [[{"x": 0, "y": 0, "status": 1} for _ in range(brickRowCount)] for _ in range(brickColumnCount)] # Key press event handlers def keyDownHandler(event): global rightPressed, leftPressed if event.key == "Right" or event.key == "ArrowRight": rightPressed = True elif event.key == "Left" or event.key == "ArrowLeft": leftPressed = True def keyUpHandler(event): global rightPressed, leftPressed if event.key == "Right" or event.key == "ArrowRight": rightPressed = False elif event.key == "Left" or event.key == "ArrowLeft": leftPressed = False # Draw functions def drawBall(): context.beginPath() context.arc(x, y, ballRadius, 0, 2 * 3.14159) context.fillStyle = "#0095DD" context.fill() context.closePath() def drawPaddle(): context.beginPath() context.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight) context.fillStyle = "#0095DD" context.fill() context.closePath() def drawBricks(): for c in range(brickColumnCount): for r in range(brickRowCount): if bricks[c][r]["status"] == 1: brickX = (c * (brickWidth + brickPadding)) + brickOffsetLeft brickY = (r * (brickHeight + brickPadding)) + brickOffsetTop bricks[c][r]["x"] = brickX bricks[c][r]["y"] = brickY context.beginPath() context.rect(brickX, brickY, brickWidth, brickHeight) context.fillStyle = "#0095DD" context.fill() context.closePath() def collisionDetection(): global dy for c in range(brickColumnCount): for r in range(brickRowCount): b = bricks[c][r] if b["status"] == 1: if x > b["x"] and x < b["x"] + brickWidth and y > b["y"] and y < b["y"] + brickHeight: dy = -dy b["status"] = 0 # Game loop def draw(event=None): global x, y, dx, dy, paddleX context.clearRect(0, 0, canvas.width, canvas.height) drawBricks() drawBall() drawPaddle() collisionDetection() if x + dx > canvas.width - ballRadius or x + dx < ballRadius: dx = -dx if y + dy < ballRadius: dy = -dy elif y + dy > canvas.height - ballRadius: if x > paddleX and x < paddleX + paddleWidth: dy = -dy else: document.location.reload() x += dx y += dy if rightPressed and paddleX < canvas.width - paddleWidth: paddleX += paddleDx elif leftPressed and paddleX > 0: paddleX -= paddleDx window.requestAnimationFrame(create_proxy(draw)) # Event listeners document.addEventListener("keydown", create_proxy(keyDownHandler)) document.addEventListener("keyup", create_proxy(keyUpHandler)) # Start game on button click def startGame(event): document.getElementById("startButton").style.display = "none" draw() document.getElementById("startButton").addEventListener("click", create_proxy(startGame))

後ほど記事内にもソースコードを貼り付けますが、GitHubにもアップロードしました。

時計

pyScriptClock/HowToRunPyScriptClockOnWordpress at main · KidaiRinboku/pyScriptClock

Contribute to KidaiRinboku/pyScriptClock development by creating an account on GitHub.

ブロック崩し

PyScript-BlockKUZUSHI/PyScriptBlockKZUSHI at main · KidaiRinboku/PyScript-BlockKUZUSHI

Contribute to KidaiRinboku/PyScript-BlockKUZUSHI development by creating an account on GitHub.

また、Wordpressで動かすpyScriptに特化したGPTモデルを作成しました。

ChatGPT - PyScriptWithWordpressGPT

WordpressのHTMLブロックで動くPySCriptを作成します。

WordPressで記事本文のダブルクォートが置換されないように設定
次に実際にブログ記事でpyScriptを動かします
1. pyScriptを動かすJavascriptとCSSをロードする
2. pyScriptのソースコードを書いてアプリを動かす
WordPressで動くPyScript専用のGPTモデルを作りました

WordPressで記事本文のダブルクォートが置換されないように設定

この設定をしたら、すぐにでもブログ記事はpyScriptを動かして自由に面白いものを作れるキャンバスになります！

WordPressには自動で特定の文字や記号を置換する動きがあり、ソースコードのエラー原因となる可能性がありますので、ブログ本文に対して置換機能が動かないようにします。

プログラムで文字列を指定する際に使用するダブルクォートですが、wordpressの設定によってはプログラムに適さないダブルクォートに自動で変換されてしまいます。(勾玉みたいな形のやつです)

記事内にPyScriptを書いて動かしたい場合は、自動で置換されるとエラーが発生してしまい動きません。

設定方法です。(念のため実施前にはfunction.phpの内容をバックアップしておきましょう)

WordPressの管理画面に行きます
外観->テーマファイルエディタに移動します
右側のテーマファイル->テーマのための関数(function.php)に移動します
下記の内容を追記して保存します

//本文に対して自動置換を停止する
remove_filter('the_content', 'wptexturize');

次に実際にブログ記事でpyScriptを動かします

本文にも載せますが、GitHubにもソースコードをアップしました。今回は時計を使用して開設致しします。ブロック崩しのコードもアップしてありますので、よろしければご活用ください。

時計

pyScriptClock/HowToRunPyScriptClockOnWordpress at main · KidaiRinboku/pyScriptClock

Contribute to KidaiRinboku/pyScriptClock development by creating an account on GitHub.

ブロック崩し

PyScript-BlockKUZUSHI/PyScriptBlockKZUSHI at main · KidaiRinboku/PyScript-BlockKUZUSHI

Contribute to KidaiRinboku/PyScript-BlockKUZUSHI development by creating an account on GitHub.

pyScriptを動かすJavascriptとCSSをロードする

まずは、HTMLブロックを一つ追加して下記のコードをコピペしてください。

pyScriptのページから必要なJavascriptとCSSを取得しています。

<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css">

上記の取得はページを開くたびに動くので、サイドバーウィジェットなどにpyScriptのアプリケーションを設置したい場合は、自分でダウンロードしてブログ用サーバにアップロードしてしまう方がいいでしょう。

pyScriptのソースコードを書いてアプリを動かす

今回は時計アプリを動かします。

from js import document, window, Date from pyodide.ffi import create_proxy def update_clock2(): now = Date.new() hours = now.getHours() minutes = now.getMinutes() seconds = now.getSeconds() time_str = f"{hours:02}:{minutes:02}:{seconds:02}" document.getElementById("clock2").innerHTML = time_str # 再度実行 window.setTimeout(create_proxy(update_clock2), 1000) update_clock2()

HTMLブロックを追加した以下のコードをコピペしてください。

<div id="clock" style="font-size: 48px; text-align: center; margin-top: 20px;"></div>

<py-script>
from js import document, window, Date
from pyodide.ffi import create_proxy

def update_clock():
    now = Date.new()
    hours = now.getHours()
    minutes = now.getMinutes()
    seconds = now.getSeconds()
    time_str = f"{hours:02}:{minutes:02}:{seconds:02}"
    document.getElementById("clock").innerHTML = time_str

    # 再度実行
    window.setTimeout(update_clock_proxy, 1000)

update_clock_proxy = create_proxy(update_clock)
update_clock_proxy()
</py-script>

ブロック崩しを置きたい場合は下記のソースコードをご活用ください