1. 神経質やせ男チャンネル
  2. 【pywebview】HTMLとJSを分け..
【pywebview】HTMLとJSを分けて動かす方法
2026-02-02 02:53

【pywebview】HTMLとJSを分けて動かす方法

pywebviewでHTML・JavaScriptを
Pythonファイルから分離して動かす方法を紹介。
ファイル分割の考え方と、
PythonとJavaScriptの連携ポイントを
ラジオ形式で解説しています。

#pywebview
#Python
#JavaScript
#GUIアプリ
#プログラミング
---
stand.fmでは、この放送にいいね・コメント・レター送信ができます。
https://stand.fm/channels/608520b1eeca46c0ab7489cd

感想

まだ感想はありません。最初の1件を書きましょう!

00:06
神経質やせ男です。 今日は、【pywebview】でHTML、CSS、JavaScriptを外出しして動かす話をします。
これまでは、一つのPythonファイルの中に、HTMLやJavaScriptを全部書いて動かしてきました。 ただ、このやり方だと規模が大きくなった時に、
エラーやバグを探すのが大変になります。 そこで今回は、Python、HTML、JavaScriptをそれぞれ別ファイルに分けて管理する方法を試してみました。
ファイルを分割するメリットは、とにかく見通しが良くなることです。 注意点としては、HTML、JavaScript、Pythonの間で変数名や関数名を統一すること。
ここがずれると、どこでエラーが起きているのかわかりにくくなります。
【pywebview】で外部ファイルを使う場合、CreateWindowで表示するHTMLファイル名を直接指定します。 今回は、index.htmlを指定して起動しました。
Python側では、APIクラスを使って、sayHelloというメソッドを用意します。 中身は、Hello from Pythonという文字列を返すだけです。
次にHTMLです。 HTMLでは、ボタンを押すと、callPythonという関数を呼び出すようにします。 このcallPythonの処理は、JavaScriptファイルに書いてあります。
JavaScript側を見ると、pywebview API sayHelloという記述があります。これで、JavaScriptからPythonのsayHello関数が呼び出されます。
Pythonから返ってきた文字列は、HTMLの中にあるIDが、resultの部分に表示されます。
ボタンを押す前は、説明文が表示されていて、ボタンを押すと、Hello from Pythonに文字が置き換わるという流れです。
実際に動かしてみると、ボタン操作をきっかけに、PythonとJavaScriptが連携しているのがよくわかります。 この方法で、無事にファイルを分割して、pywebviewアプリを動かすことができました。
PythonもJavaScriptもオブジェクト主項の言語なので、さらに規模が大きくなれば、ファイルを増やして整理していくこともできます。
そのあたりは、もう少し発展してからまたまとめようと思います。 今回はここまでです。
次回は、pywebview to-doリストを作って理解する1についてお話しする予定です。
ご静聴ありがとうございました。
02:53

コメント

スクロール