【PyScript】PyScriptの始め方とHTML上に文字を出力する方法[Python]

2023年8月11日2023年9月22日

URLをコピーしました！

PyScript

前回、jQueryのAjaxでPythonを実行する際、matplotlib、numpy、pandasが動かない問題を紹介しました。

あわせて読みたい

【jQuery】AjaxでPythonを実行する際、matplotlib、numpy、pandasが動かない問題[JavaScript]-未解決 Ajax 前回、Pythonの数式（関数）を扱うライブラリsympyで、数値の代入や式の展開・因数分解、解の求め方、微分・積分の方法を解説しました。今回はAjaxでPythonを実行…

matplotlib、numpy、pandas（もしかしたら外部ライブラリ全部？）辺りが動かないとなると、Pythonを使う上での制約がかなり大きくなってしまいます。

ということで何か他の方法がないかと思い調べてみたのがJavaScriptのようにHTML上にPythonのコードを書いて実行できる「PyScript」です。

あわせて読みたい

Pyscript.net PyScript is a platform for Python in the browser.

2022年の5月に公開されたばかりで、まだまだ開発が始まったばかりのライブラリですが、とりあえずやりたいことができる可能性があるなら使ってみようかと思って手を出してみたというのが今回からのお話です。

色々調べてみると公開された2022年5月頃に「使ってみたよ」と記事を書いている方も結構いたのですが、正直、それからもだいぶ変わっています。

そのため、これからPyScriptに関する記事を何本か書いていきますが、それらもすぐに参考にならなくなるかもしれませんので、ご注意あれ。

それでは始めていきましょう。

PyScriptの始め方

まずPyScriptの始め方からです。

PyScriptはJavaScriptのようにHTML上で動くライブラリです。

そのためパソコンにインストールするのではなく、HTML上にライブラリの場所を記述し、HTMLにアクセスがあった場合、ライブラリを読み込み使用するという形で使用します。

ここら辺はJavaScriptというよりもjQueryの方が似ているかもしれません。

あわせて読みたい

【jQuery】Ajaxを使ってJavaScriptからPythonを実行する方法[JavaScript] JavaScript 前回、JavaScriptのdocument.write、innerHTML、outerHTML、textContentの違いを解説しました。今回はそろそろやりたかった本命の事。 JavaScriptからPytho…

まずPyScriptのサイトにアクセスします。

あわせて読みたい

Pyscript.net PyScript is a platform for Python in the browser.

「Install」をクリックします。

クリックして出てきたウインドウの中のコードをコピーします。

ちなみにこの記事を書いている2023年2月現在のコードはこんな感じでした。

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

これをHTMLの<head></head>内にペーストします。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
</body>
</html>

これでこのHTMLが実行された時に、PyScriptのライブラリが読み込まれます。

実際にPythonのコードを書くのは<py-script></py-script>内なので、基本の形としてはこんな感じになります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>

<py-script>

</py-script>

</body>
</html>

HTML上への文字の出力

HTML上への出力の方法はいくつかあるので順番に見ていきましょう。

最初は通常のPythonと同じく「print(“文字列”)」です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>

<py-script>
    print("Hello World!")
</py-script>
</body>
</html>

この場合、黒の背景に白で文字列が表示されました。

SafariとChromeで確認しましたが、もしかしたらブラウザによって違うかもしれません。

次は「display(“文字列”)」です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>

<py-script>
    display("Hello World!")
</py-script>
</body>
</html>

ただし「display(“文字列”)」では上から順番に処理され、表示されるため、どこに表示させるかは指定できません。

表示させるタグを指定する場合は「pyscirpt.write(“id”, “文字列”)」か「Element(“id”).write(“文字列”)」を使います。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
    <div id = "test"></div>

<py-script>
    pyscript.write("test", "Hello World!")
</py-script>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
    <div id = "test"></div>

<py-script>
    Element("test").write("Hello World!")
</py-script>
</body>
</html>