Eelによるhello world appを用意する

[ftnext]

Eelによるhello world appを用意する

[ftnext]

前提条件：Google Chrome（Edge対応もしているが、Chromeがオススメ）

https://github.com/samuelhwilliams/Eel#starting-the-app

• eel.init に、HTMLやCSSを配置するディレクトリを指定
• eel.start でGUIアプリ起動（localhostでBottleが動き、ChromeにHTMLを表示する）

https://github.com/samuelhwilliams/Eel#exposing-functions

• eel.expose でPythonの関数をJavaScriptから使えるようにする
• このトークでは扱わないが、JavaScriptの関数をPythonから呼び出すことも可能

https://github.com/samuelhwilliams/Eel#return-values

• callbackを使う方法と同期的に返り値を得る方法（要読み込み）
• GUIアプリ上の値の書き換えはgetElementByIdで要素を拾い、innerHTMLを書き換える（HTML要素とJavaScriptで書き換えの説明が必要）
• pタグは直接文字列を代入すれば書き換わる https://stackoverflow.com/a/3180755

[ftnext]

https://github.com/samuelhwilliams/Eel#return-values の読み込み

Pythonインタープリターとブラウザウィンドウは別のプロセス
値をどうやり取りするか
→返り値を受け取る方法は2通り

• Callback：eel.js_random()(print_num)　←js_random()の返り値がprint_numに渡る
  • Python→JSという書き方もできる
• 同期的に返す
  • 入力値の内容やウィジェットの状態の取得（少し待てば済むのでコールバックより便利）
  • 2つ目の()に何も渡さないと同期的に受け取ることになる（PythonでもJSでも）eel.js_random()()
  • eel.startの後のみ有効
  • JSではasync function の中で awaitを使って書く　await eel.py_random()()
    • await（待ち）を使っているからsynchronousになる

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/async_function

非同期関数は、 await 式を含むことができます。これは非同期関数の実行を一時停止し、 Promise の解決を待ちます。そして非同期関数の実行を再開し、解決された値を返します。

eel.initの_js_result_timeout引数のデフォルト値10秒：JavaScript側からの返り値が受け取れなかった場合のタイムアウト

[ftnext]

aタグ（リンク）からbuttonに変更
https://developer.mozilla.org/ja/docs/Web/HTML/Element/button

onclick属性はbuttonのリファレンスにはないが、HTML要素全般にclickイベントハンドラを追加できる書き方
https://developer.mozilla.org/ja/docs/Web/Guide/Events/Event_handlers

定められたオブジェクトの特定のイベント (click など) に対して on<...> イベントハンドラをさまざまな方法で指定することができます。

• 要素に on{eventtype} という名前の HTML 属性を使用します。

参考資料：https://developer.mozilla.org/ja/docs/Web/API/Element/click_event

最初にこちらを見た
https://www.w3schools.com/jsref/event_onclick.asp