はじめに
PyScriptを使用するとブラウザ上でPythonコードを実行できるようになります。本記事はPyScriptを触ってみた備忘録記事になります。
PyScriptとは？
ブラウザでPythonを実行するためのツールです。htmlファイル内のタグの中にPythonのコードを記載する事ができます。
インポート
<head>タグ内に下記を記載します。
<link rel="stylesheet" href="https://pyscript.net/releases/2024.10.1/core.css">
<script type="module" src="https://pyscript.net/releases/2024.10.1/core.js"></script>
ドキュメント には 次のindex.htmlのサンプルが記載されています。
index.html (*ドキュメントより引用)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>🦜 Polyglot - Piratical PyScript</title>
<link rel="stylesheet" href="https://pyscript.net/releases/2024.10.1/core.css">
<script type="module" src="https://pyscript.net/releases/2024.10.1/core.js"></script>
</head>
<body>
<!-- TODO: Fill in our custom application code here... -->
</body>
</html>
簡単なツールを作ってみる
PyScriptを使って文字列を生成するツールを作成してみます。
指定した文字数の文字列を生成させます。下記のスクリプトではテキストボックスに入力された文字数のひらがなをランダムで生成します。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>意味のないひらがな文字列生成ツール</title>
<link rel="stylesheet" href="https://pyscript.net/releases/2024.10.1/core.css">
<script type="module" src="https://pyscript.net/releases/2024.10.1/core.js"></script>
<style>
body { width: 1000px; margin: 0 auto; text-align: center; }
input, button { margin: 10px 0; padding: 5px; }
#result { font-size: 18px; margin-top: 20px; word-wrap: break-word; }
</style>
</head>
<body>
<h1>意味のないひらがな文字列生成ツール</h1>
<input type="number" id="length" min="1" max="100" value="10" placeholder="文字列の長さ">
<button id="generate">生成</button>
<div id="result"></div>
<py-script>
from pyodide.ffi import create_proxy
from js import document
import random
hiragana = "あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん"
# ボタンがクリックされたときに呼び出される関数
def generate_nonsens_text(event):
# 文字数を取得
length = int(document.querySelector("#length").value)
# hiragana から文字数分ランダムに取得した値で文字列を生成
result = ''.join(random.choice(hiragana) for _ in range(length))
# 文字列を画面に表示
document.querySelector("#result").innerText = result
generate_proxy = create_proxy(generate_nonsens_text)
document.querySelector("#generate").addEventListener("click", generate_proxy)
</py-script>
</body>
</html>
ブラウザで動かしてみると、10文字分のランダム文字列を生成できることを確認できました。
