FlutterのInAppWebviewにて非同期に処理するJavaScriptから返り値を取る。
最近は毎日家に帰るとちょっとだけプログラミングをして寝る生活を続けている。複雑な問題なんかに出くわすと頭を悩ましてしまうけど、それを見事解決できるとすごい脳汁が沸くよね。
プログラミングの楽しさってそういう複雑なパズルを解く楽しみと通づるところがあると思う。プロジェクトを進めていくといろんなissueが出てくるのだけど、それを1つ1つネットを調べたりしながら問題解決方法を明らかにしていき、そして自分なりの解決方法を導き出すのが楽しい。元々僕は数独とかああいうパズル系の遊びも好きであるし、実際に動くシステムを作れる遊びとしては個人開発はなかなかに楽しさレベルが高いな。
世の中には競技プログラミングといって、渡された課題に対して制限時間内でいかに美しいアルゴリズムで解決するかを競い合うゲームなんかもあったりするのだけど、そういう世界も一度は体験してみたいなと思うよな。優れたエンジニアの感覚としては、なにか世の中に問題があったのならばどんな風に解決したら想像するのがものすごく楽しいらしい。僕はそこまで達観はできそうにないけども、難しいissueが解けた時はすっごく気持ちよくてクセになる。
昨日は今開発してる「ScrapDiary」にて、現在そのページが存在してるかScrapboxのAPIにアクセスして存在確認をするような処理を作ろうと思っていたのだけど、うまくAPIを非同期で叩く方法が見つからなくて苦しんでいた。ちなみにScrapDiaryについてはオープンソースにしてるのでここから開発中のソースコードを覗くことができる。
通常であればDartからAPIを叩こうと思えばhttpライブラリなんかを使って開けば簡単にアクセスできるのだけど、Scrapboxではプライベートモードがある。プライベートモードではhttpライブラリでAPIにアクセスするのもログインした時のハッシュキーか何かが必要となるらしく、それを取得したりしてアプリ内に保存するのも煩わしいのでいったんログインしているInAppWebviewのセッションを利用して、evaluateJavascript関数を経由してJavaScriptのfetchでAPIにアクセスした。
今回作成した処理としては以下のようになる
最初、evaluateJavascriptで処理するJavaScriptの返り値というのはそのまま受け取ることができるのかと思っていたのだけど、どうやらwindow.flutter_inappwebview.callHandlerを使わないと受け取れないらしいので、それで対応しようとしていた。
しかし、JavaScriptでAPIにアクセスするということで非同期処理を使わねばならず、そこからDartに受け渡す処理も非同期で渡さねばならぬということで詰まった。addJavaScriptHandlerのcallbackで値は受け取ることができるのだけど、そこから非同期を処理してreturnに渡すにはどうすりゃいいの？ ということが分かってなかった。
簡単に答えを言うならばDartのCompleterを使えば良いだけだったのだね。今まで使ったことがなかったからなかなか詰まって大変だった。CompleterはDartの非同期処理を手動で行うための機構であり、明示的に非同期処理の完了を同期側に渡すことができる。
基本的にはこんな感じでCompleterは使う。
例外処理は次のようにCompleterでは処理する。
Dartの非同期処理もまだ勉強することも多い。今回はJavaScriptのasync/awaitも重なってJavaScriptの非同期処理とDartの非同期処理を連動させるために詰まってしまい、なかなか苦戦してたから解決できたら脳汁プシャーだよね。
趣味のプログラミングでFlutter開発するのも仕事の勉強にもつながってなかなか良いなと思った。自分のやりたいことを実現するための勉強が仕事にもつながるのは最高やんけ。ScrapDiaryも開発が進んでるよ。ある程度、開発が完了したらストアにも公開する予定なので、期待して待っててほしい。
