【初心者でも簡単】HTMLファイル内でPythonを実行する方法 | 開発途中のPyScriptを使ってみた。

Pythonで「出来ること」は、機械学習/人口知能の他にも「Webアプリ開発」が有名です。

実際に作られたWebアプリとして「Youtube」「Instagram」「Spotify」など有名なものが多くあります。

しかしPythonをWebアプリで利用すためには、基本的に「フレームワーク」を導入する必要があり、かなりめんどくさいです。

当記事ではフレームワークを利用せずに、HTMLファイル内にPythonを書いてWebブラウザ上で実行が出来るPyScriptについて紹介します。

-目次-

PythonをWebブラウザ上で実行する方法

フレームワークとは、アプリ開発をするときに必要な機能をまとめているものです。
フレームワークを導入することで「非同期通信」「ログイン認証」を簡単に使えたりします。

フレームワークを使わずともWebアプリ開発はできますが、かなり複雑で高度な知識が必要です。

PyScriptを使えば、PythonをJavaScriptみたいに使うことができます。

実際使ってみて、読み込みが遅いところが気になりましたが、とても簡単に使えるので面白かったです。

また開発途中なので、読み込みが遅いのはしょうがないのかもしれません。

PyScriptの使い方を紹介します。とても簡単に使うことができるので是非遊んでみてください。

まずはHTMLファイルを準備して、head内に以下の2行を入れてください。

See the Pen pyscript1 by コココット (@cococodog) on CodePen.

これでネット上にある「pyscript.css」と「pyscript.js」が適応されます。

開発途中なので、フォルダの名前が「alpha」になっていますが、完成したらこの名前が変わると思います。

今度はbody内にpy-scriptタグを作り、その中にpythonのコードを書くだけで実行できます。

See the Pen pyscript2 by コココット (@cococodog) on CodePen.

関数もしっかり使うことができるので、ループ処理なども使うことができます。

pyscript.wirte('id名',データ)でidに文字を入れたり、py-script自体にoutputをつけて実行場所を選ぶことができます。

See the Pen pyscript3 by コココット (@cococodog) on CodePen.

ライブラリはhead内にpy-encタグを使って導入します。

インポートするときはpy-script内の初めに書いておきましょう。

See the Pen pyscript4 by コココット (@cococodog) on CodePen.

実際にPyScriptで遊んでみたページ(読み込み速度が遅い可能性有り)を置いておきます。

使ってみた感想は、読み込みが遅いけど、簡単にグラフとかを表示できて面白かったです。

上記のページに飛ぶとわかりますが、読み込み速度が遅く、ページを開くまでに時間がかかります。

体感では標準モジュールを増やせば増やすほど読み込み速度が遅くなっていくので、多機能ページを作ることは難しいと思いました。

実際にPyScriptで何かを作るのはお勧めできないので、フレームワークを使うか、完成版を待ちましょう。