HTMLに直接Pythonを書ける【PyScript】の使い方
pyscriptとは？
pyscriptを使えば、 HTML内に、Pythonを直接書き、実行させることができます。
javascriptの要領で、HTML内にPythonコードを書いていけるという画期的なものです。
PyScriptの使い方
HTMLのheadタグ内に以下の2行 を書くだけで、準備OKです。
bodyタグ内に、 <py-script></py-script>を記述し、 この中にpythonコードを記述していきます。
とても簡単です！
<head>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<py-script> print('Now you can!') </py-script>
</body>
以下のように<py-script>内に、 src="test.py"と書いて、 pythonファイルを読み込むこともできます。
<body>
<py-script src="test.py"></py-script>
</body>
ただし、<py-script src="test.py"> と書いた場合、ローカルサーバー上でしか動いてくれませんでした。
ローカルサーバーを立ち上げるには、 XAMPP がおススメです。
PyScriptのデモページ
デモページが用意されていて、使用例がたくさん載せられています。
PyScriptの注意点
ホームページに以下の注意が書かれています。
Please be advised that PyScript is very alpha and under heavy development. There are many known issues, from usability to loading times, and you should expect things to change often. We encourage people to play and explore with PyScript, but at this time we do not recommend using it for production.
PyScriptは、現時点アルファ版であり、開発中であること。 読み込み時間が長かったりと、多くの改善点がある。 現時点では、PyScriptを本番環境で使用することはお勧めしない。
まとめ
以上、PyScriptについて簡単に説明しました。 早く実際の環境で使えるようになってほしいですね。
- pyscriptを使えば、 HTML内に、Pythonを直接書き、実行させることができる。
-
以下の2行をHTMLのhead内に書くだけ。
<head> <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" /> <script defer src="https://pyscript.net/alpha/pyscript.js"></script> </head> -
HTML内に書いたり、pythonファイルを読み込める。
<body> <py-script> print('Now you can!') </py-script> <py-script src="test.py"></py-script> </body>
こんな記事も読まれています。
-
【HTML】【CSS】【javascript】電卓の作り方
電卓のソースコードを２つ紹介します。javascriptはわずか数行で書けます。
-
【JacvaScript】【CSS】たった4行のJavaScriptでできるハンバーガーメニューの作り方
たった4行のJavaScriptで作るハンバーガーメニューの作り方について紹介します。✖をつくるには、transform-originがポイントです。
- リンク
-
波紋エフェクトを表現するjqueryのripples-min.jsの使い方
jqueryのripples-min.jsを使うと簡単に水面の波紋を表現できます。波紋の広がりの速度、波紋の大きさ、波紋のブレの値を変えていろいろ表現させると面白いです。
-
【Javascript】querySelectorAllで要素を取得し、クリックしたら、クラスを追加したり、削除したりする方法。
JavascriptのquerySelectorAllで要素を取得し、クリックしたら、クラスを追加したり、削除したりする方法について解説します。querySelectorと同じように書いてしまうとエラーがでます。forEachを使うとすべてに適用できます。
- リンク
-
要素の高さを取得する方法。getBoundingClientRectとは？window.innerHeightとは？window.pageYOffsetとは？
要素の高さを取得する方法について解説します。getBoundingClientRect、window.innerHeight、window.pageYOffsetについて理解し、要素がいつ画面に現れるかを把握できるようにしましょう。
-
Javascriptを使ったページネーションの実装
トップページの記事が増えてきたので、何とかページネーションで最新の記事だけを表示できないかと思っていたら、いい記事を発見しました。カスタマイズして実装することができました。
- リンク
-
【Javascript】マウスの指す(X, Y)座標とドラッグ & ドロップを理解する
マウスの指す(X, Y)座標とドラッグ & ドロップについて解説します。mousedown, mouseover, mousemove, mouseupを使います。
-
【javascript】連想配列をテーブルできれいに表示する方法
javascript（Object.entries）を使って、連想配列の中身をテーブルできれいに表示する方法について紹介します。
- リンク
