00:06
神経質やせ男です。今回は、【pywebview】で作ったTodoリストの解説④、プログラム改善とコード解説編です。
前回は、Python側の終了ボタンの処理を中心に解説しました。 今回は、少し処理が複雑なJavaScript側を見ていきます。
まずは、終了ボタンの処理です。 終了ボタンを押すと、すぐにアプリを閉じるのではなく、本当に終了しますか、という確認を出しています。
ここで使っているのが、Window Confirmです。 アラートはOKだけですが、WindowConfirmは、OKとCancelを選べるのが違いです。
この結果をif文で判定して、OKが押された場合だけ、Python側の終了処理を呼び出します。
JavaScriptとPythonが連携するので、ここでも非同期処理として、asyncとabateを使っています。
また、念のためtryとcatchを入れて、予期しないエラーにも備えています。 次は追加ボタンの改善点です。
以前はPython側でチェックマークを文字として付けていましたが、今回はチェックボックスを使うため、その処理をJavaScript側に移しました。
その結果、Pythonの処理はシンプルになり、JavaScriptのコードが少し複雑になります。
ここで自分が引っかかったのがチェックボックスのこの1行です。
チェックを入れたら何かが切り替わるということはわかるのですが、
class list toggleが最初は理解できませんでした。
調べてみると、チェックが入ったらclassをつける、外れたらclassを外すという動きをしていました。
ではそのclassは何かというと、CSSに書いてあるcompletedというclassです。
このclassには文字に取り消し線を引いて、色をグレーにする設定が書かれています。
つまり、CSSは見た目を整えるだけでなく、プログラムの動きと連動して表現を変える役割を持っているということです。
これは自分にとってかなり大きな気づきでした。
最後にチェックボックスとタスク名の表示順を調整して、画面を整えて完成です。
順番を変えるだけで見た目がガラッと変わるので、試してみると結構面白いです。
プログラムは失敗してもパソコンが壊れるわけではありません。
特にウェブ系は、初心者のうちはどんどん触ってみた方が理解が深まります。
次回は道の駅また小学校で給食器分を食べ歩きについてお話しする予定です。
ご静聴ありがとうございました。