00:06
神経質やせ男です。今回は、【pywebview】でTodoリストを作ってみた話その①です。 少し実用的なプログラムとしてTodoリストを作ってみました。
選んだ理由は単純で、一番シンプルに作れそうだったからです。 実際に作ってみると思っていたよりも難易度は高くなく、【pywebview】の仕組みを理解するにはちょうどいい題材でした。
まず完成形の動きとしては、テキストボックスにタスクを入力して追加ボタンを押すと、Todoが一覧に追加されるというものです。
今回のプログラムはファイルが4つあります。 HTML、CSS、JavaScript、そしてPythonです。
HTMLは画面の骨組み、見出し、入力欄、追加ボタン、Todoを表示するリストを用意しています。CSSは見た目の調整です。
完成したタスクに打ち消し線を引いたり、ボタンや入力欄を使いやすくしています。
JavaScriptは操作担当です。 ボタンが押されたら入力された文字を取得して、Python側の処理を呼び出します。
ここが【pywebview】のポイントで、JavaScriptからPythonの関数を直接呼べます。
そしてPython側では、JavaScriptから受け取ったタスク文字列を処理して、結果をJavaScriptに返します。
今回はシンプルに受け取った文字の前にチェックマークを付けて返しています。
JavaScriptは、Pythonの処理が終わるまで待ってから、画面にTodoを追加します。
この待つという処理のために、JavaScriptでは非同期処理、つまりasyncとawaitを使っています。
PythonとJavaScriptが同時に勝手に動くと連携が取れなくなるので、処理の順番をきちんと制御しています。
ここが最初は分かりづらいのですが、【pywebview】でアプリを作る上ではとても重要な考え方です。
今回は、Todoリストがどう動いているか、全体の流れをつかむところまでにします。
次回は、この中身をもう少し細かく分けて処理の流れを整理していこうと思います。
それではまた次回。
次回は、【pywebview】Todo処理の流れを理解、その2についてお話しする予定です。
ご静聴ありがとうございました。
