前にWebViewの話を書いて、native_webviewというライブラリを自作した話を書いた。
すでにプロダクションで利用していて色々やったけど、最近だとBasic認証がかかっててもアクセスできるようにしたり、callHandlerを読み込み中でも実行できるようにしたりした。

inappwebviewや前のnative_webviewはすべての読み込みが完了するまで、callHandlerが実行できない。
すべての読み込みというのは、画像なども含むので、大きい画像やレスポンスを返さない通信が残っていると長時間JSを実行できない問題があった。
なので、callHandlerをはやいタイミングでも実行できるように変更した。

あとFlutter 1.20でAndroidでもhybrid compositionを使えるようになったので、それに対応してAndroid+WebViewでのキーボードまわりの問題を全解決や！と思ってたけど、今のFlutter 1.20でflutter driveを動かすとすべてのテストがこけてしまうのでマージはやめておいた。公式のwebview_flutterでも1.22リリースまで待つらしいので、native_webviewも待つことになると思う。

[webview_flutter] Add new entrypoint that uses hybrid composition on Android by bparrishMines · Pull Request #2883 · flutter/plugins · GitHub
Use PlatformViewLink by hisaichi5518 · Pull Request #79 · hisaichi5518/native_webview · GitHub

hybrid compositionにしたらflutter driveが動かなくなってしまった…
— ひさいち (@hisaichi5518) 2020年9月19日

Flutter 1.22.0-10.0.pre.266だとなおってたからstableになるの待つしかなさそうやな
— ひさいち (@hisaichi5518) 2020年9月19日

hybrid compositionを使うとAndroid 8とかでfpsがガクッと下がる問題がある。ただ自分が使う用途ではWebViewを小さくして表示してスクロールすることはないのであんまり関係なさそうだなと感じている。ちなみにAndroid 10では解決できるAPIがありそれを利用しているので問題は起きないとのこと。たしかにAndroid 8では再現したがAndroid 10では再現しなかった。

Bad hybrid composition performance on Android · Issue #62303 · flutter/flutter · GitHub

あとはe2eがintegration_testに名前が変わっていたので追従した。

e2eからintegration_test に名前変わってた https://t.co/V3YBMDm4Iz
— ひさいち (@hisaichi5518) 2020年9月19日

これ https://t.co/lPcn1imc2t
— ひさいち (@hisaichi5518) 2020年9月19日

今後は、Android WebViewでPDFが表示できないのでダウンロードするとか何らかの方法で対応する予定

2020-07-25

finickyを使い始めた

こういうツイートをした。

会社用のGoogleアカウントと家用のGoogleアカウントがあって、会社SlackからGCPのURLをクリックしたら家用のアカウントで開いてしまうみたいなのを1000万回はしてるんだけど、未だにどうすればいいのかわからない
— ひさいち (@hisaichi5518) 2020年7月25日

家用アカウントで会社のGCPにアクセスするとエラーになるので、毎回右上のアカウント切り替えで切り替えてるんだけど、めんどくさいな〜という話。

色々と教えてもらった。みなさん、ありがとうございます！

そのなかで、まさにこれがほしかったという感じのを教えてもらった。

使ったことないんですが、こういう感じでブラウザアプリを選択するプロキシーアプリがあるみたいなので、こういうの使うといいのか...? と思ったりしましたhttps://t.co/vOIZmcBuQq https://t.co/ClXcp4y0Y0
— mactkg (@mactkg) 2020年7月25日

リンクをクリックした時にURLなどで開くブラウザを変えたり、URLを書き換えたりできるアプリたち。

finickyが、JSで設定できるのでUIでポチポチやらなくてよさそうなので使うことにした。
UIポチポチが苦手なんです

Consoleがあるのでテストしやすい。
ドキュメントもあるので書きやすい
Configuration · johnste/finicky Wiki · GitHub

ただ設定ファイルを書き換えたあとにリロードされるときとされないときがあったり、実際にSlackからテストするとConsoleが消えたりとそういうのは不便だった。

実際の設定ファイルはこれ

module.exports = {
  defaultBrowser: "Google Chrome",
  rewrite: [
    {
      match: ({url}) => url.host.includes(".google.com") && (url.search.includes("project=stailer") || url.search.includes("project=tabely")),
      url: ({url}) => {
          return {
              ...url,
              search: url.search + "&authuser=1"
          }
      }
    },
  ],
  handlers: [
  ]
};

これでSlackにアラートがきたときにGCPのリンクをクリックするだけで会社用アカウントで開くようにできた。
いつもエラー画面を見て「めんどくせ〜」と思っていたので助かる。

2020-05-04

enableFlutterDriverExtension() を使用するとキーボードがでなくなる

api.flutter.dev

native_webviewのテストのために example/lib/main.dart で enableFlutterDriverExtension() を有効にしていたのだけど、example アプリをビルドしてみるとキーボードが出なかった。普通にアプリに組み込むとキーボードは出るのでなんで？と思って原因を探してみたらenableFlutterDriverExtension()がないときはキーボードが出た。

native_webviewの場合は、exampleアプリのコードには依存していないので、flutter drive用に別のmain.dartを作って解決

The keyboard is not displayed in the example application. by hisaichi5518 · Pull Request #45 · hisaichi5518/native_webview · GitHub

2020-05-03

FlutterでWebViewをがんばるその2

github.com

FlutterでWebViewを扱うために webview_flutter を使って、flutter_inappwebviewを使ってきたが、結局native_webviewというライブラリを自分で作り始めた。

webview_flutterもflutter_inappwebviewもどちらとも良い面があるので採用してきたのだけど、不満もあった。

webview_flutterの不満は、必要な機能が足りていないこと。足りないのであれば自分でforkしてプルリクすればいいのだけど、結構放置されているプルリクが多くリリースまでに間に合いそうにないなと感じた。また機能が少ない分実装はシンプルなのだけど、Objective-CとJavaで実装されていて、自分でforkしてそれを継続的にメンテナンスしていくのは大変だなという印象だった。

flutter_inappwebviewの不満は、現状メンテンスが行われていないこと。また色んな機能があるため僕自身が使っていない部分が多く、自分でforkしてメンテナンスしていくのは大変そうで嫌だった。またCIでテストが実行されていないからか、結構バグってるなという印象だった（数ヶ月前はイシューを書けば反応があったので良かったんだけど、今は反応がなくなってしまった…）あとflutter_inappwebviewをforkして出されたプルリクをマージしてるリポジトリもあるのだけど、テストがなかったり動かなくなるようなプルリクもマージしていてちょっとやだなあという印象だったので使わなかった。

native_webviewの利点

僕が気づいているwebivew_flutterやinappwebviewにあるバグはなるべく直して、テストがありCIでもテストを動かしている。

Fix HTTPCookie.secure by xtyxtyx · Pull Request #311 · pichillilorenzo/flutter_inappwebview · GitHub

これはそのまま対応してある

NPE when window.prompt · Issue #261 · pichillilorenzo/flutter_inappwebview · GitHub

これはwindow.promptだけ起きることではないようで、使ってないページでも再現することがあった。つまり、時々ページを開くとアプリがクラッシュすることがある。

これの原因はAndroid WebViewを作るときにActivity contextを使っているから起きている。Presentation contextを使うと起きなくなるがPresentation contextを使うと以下の問題が起きる。

webview_flutter crash with HTML dropdown · Issue #34248 · flutter/flutter · GitHub

inappwebviewと違い、webview_flutterはAndroid WebViewをつくるときにPresentation contextを使っているのだが、Presentation contextを使っているとDropdownをタップするとアプリがクラッシュする。 inappwebviewのようにActivity contextを渡していると起きないのだが、すでに書いたようにページを開くと時々アプリがクラッシュすることがある。

これをどうにかするには、flutter/engine側の修正（Fix AlertDialogs built by platform views by amirh · Pull Request #17511 · flutter/engine · GitHub）がリリースされるのを待つか自分でContextをラップするしかない。native_webviewはContextをラップしたので現在のFlutter stableでも再現しない。

TypeError: Promise._immediateFn is not a function. · Issue #288 · pichillilorenzo/flutter_inappwebview · GitHub

これは、inappwebviewが自動でJavaScriptを実行しているゆえの問題でnative_webviewはJSを自動で読み込むことをほぼしないのでこういうことは起きない。またテストもCIで動かしているので起きたとしても多分わかる。

iOSの実機で一瞬画面が暗くなる

背景色が指定されていないのが原因

Androidの実機で一瞬画面が暗くなることがある

コメントによるとPlatformViewで使っているVirtualDisplayのバグっぽい。どうしようもないので、native_webviewではライブラリ側で対処するようにした。

google_maps_flutter I am getting black screen before loading maps · Issue #39797 · flutter/flutter · GitHub

Android V2 embedding対応

inappwebviewはAndroid V2 embeddingを使うとクラッシュする。native_webviewはAndroid V2 embedding対応している

Causes the app to crash on Android Emulator · Issue #327 · pichillilorenzo/flutter_inappwebview · GitHub

逆にいうとnative_webviewはV1にあえて対応してないので、V1を使ってるアプリはV2に移行しましょう。

native_webview のだめなところ

これはあえてそうしているのだけど、新しめのバージョンでしか動かない。

例えばAndroid 7以上でしか動かない。ぼくが作ってるアプリの要件がAndroid 7以上で、それ未満に対応する意味がないからというのとAndroidはOSのバージョンによってChromeに同梱されたWebViewが使われたり、Android WebView Systemが使われたりと実行環境が変わるので、なるべくそういう違いを少なくしたかった。(Android 10でまた変わったのだけど……)

また自分に必要な機能しかいれていないので、inappwebviewと比べるとまだまだ機能は少ない。JSに依存しないで実現できるものは、対応していく予定

まとめ

webview_flutter, flutter_inappwebviewと使ってきたが、結局自分で作り始めた。webview_flutterやinappwebviewのイシューを見ていると大変だな………という感じなのですが、まあがんばります。

2020-04-08

自分の作業環境 2020

おうち大好きマンなので、3年前くらいに今の家に引っ越してから作業環境を整えている。自宅で働くことが増えて整えてきてよかったと思っているので、現状を書き出しておく。10年後とかに見たら面白いのではないか。2030年……41歳………

ぬいぐるみ

hobby.dengeki.com

これのクッキーモンスターを抱きしめながら働くとかなりいいんですが、いま転売品しか買えないので別のぬいぐるみを買いましょう。

Mac

つよいMacだとビルドが早くてよい。

  機種名: MacBook Pro
  機種ID: MacBookPro14,3
  プロセッサ名:   Quad-Core Intel Core i7
  プロセッサ速度:    3.1 GHz
  プロセッサの個数: 1
  コアの総数:  4
  二次キャッシュ（コア単位）:  256 KB
  三次キャッシュ:    8 MB
  ハイパー・スレッディング・テクノロジ:   有効
  メモリ:    16 GB

買ってからすでに2年経っている+会社のiMacはメモリがもっと多いので新しくしたい。

【日本正規代理店品】Twelve South BookArc アルミニウム for MacBook v2 クラムシェルモード用 MacBookスタンド (シルバー)

メディア: Personal Computers

クラムシェルモードで使っているので立てて置くやつがある。

机・椅子

イタリア製 fantoni/ファントーニパソコンデスク GT 幅140 奥行71 高さ72cm テレワーク在宅の通販 | デスク | ガラージ【 Garage 】

机は、でかくて重いのがよい。軽い机は揺れたりするし、狭いと雑にものを置けない。また奥行きがあると書類を片すときとかご飯を食べるときなど、ディスプレイを使わないときは奥に寄せておけるので便利。

買った当時は立つと疲れるし疲れることはしない主義だったので昇降デスクは買わなかったけど、今は30もすぎたし健康に気を使う必要が出てきて買ってもよかったかもと思ってる。

オカムラデスクチェアオフィスチェアバロンハイバック可動肘座メッシュミディアムブルー CP85CW-FEH4

メディア: オフィス用品

中古の美品を4万くらいで買った。追加で新品のヘッドレストも買った。ヘッドレストはなくてもいいけど、あると疲れたときに首をおけて楽なので買ってよかったと思ってる。ヘッドレストだけ新品で買ったのは、中古で売ってなかったから。

バロンチェアを選んだのは、前の会社で使ってよかったからで色々と座り比べたりとかはしてない。

ディスプレイ・ディスプレイアーム

EIZO FlexScan 27.0インチディスプレイモニター (4K UHD/IPSパネル/ノングレア/ブラック/USB Type-C搭載/5年間保証&無輝点保証) EV2785-BK

発売日: 2018/01/30
メディア: Personal Computers

EIZOは高いなという印象なのだけど、サポートは丁寧だし保証も5年と長いし安心感がある。前はDellのディスプレイを3年ほど使っていたのだけど、電源がつくまでが遅くて待つ時間が嫌だったけどEIZOにしてからあんまり感じない。あと会社で使ってるiMacと比べて目の疲れも少ないように感じる。 Type-C1本あれば充電もモニターに写すのも同時にできるんだけど、ディスプレイの電源を切ると充電されなくなるのがつらい。後述するディスプレイアームを使えばディスプレイのコードは見えないところにまとめられるので、僕はType-Cを使わずDisplayPortを使っている。

27インチを買った理由は、32インチが大きくて逆に使いにくいなと思ったからで、好き嫌いあると思う。僕は色んなリポジトリを触るので、IDEをたくさん立ち上げることが多く切り替えがめんどうだとは思っている。

Macbook Proは閉じてクラムシェルモードで使っているので、ディスプレイは使ってない。

エルゴトロン LX デスクマウントモニターアームアルミニウム 45-241-026

発売日: 2010/03/09
メディア: Personal Computers

人によって座高は違うので、自分に合わせやすいディスプレイアームほしい〜と思って誰か買って〜〜とツイートしたら本当に買ってもらえた。（どういうこと？）

アームの中にコードを入れれるやつだとコードがまとめやすいので机がごちゃつかない。あと家でISUCON予選に参加するときに人に見せやすいという利点がある。

マウス・キーボード

ロジクールワイヤレスマウストラックボール無線 MX ERGO Unifying Bluetooth 8ボタン高速充電式 MXTB1s windows mac iPad OS 対応ブラック国内正規品 2年間無償保証

発売日: 2017/09/22
メディア: Personal Computers

大きさが自分の手に合う。カーソルを動かすために手首を動かす必要がない。斜めになっているので手がかなり楽。前はロジクールのロジクールワイヤレスマウストラックボール無線 SW-M570 Unifying 5ボタントラックボールマウス電池寿命最大18ケ月国内正規品 1年間無償保証を使っていたんだけど、思い切って乗り換えたらめちゃくちゃよかった。会社もこれ。

PFU Happy Hacking Keyboard Professional JP 日本語配列墨 USBキーボード静電容量無接点 Nキーロールオーバーブラック PD-KB420B

発売日: 2008/11/10
メディア: Personal Computers

バード電子 HHKB吸振マット(Professional用) KMG-Pro

メディア: エレクトロニクス

BT買おうかな〜と思いつつも、コードがなくなる以外のメリットが特にないので、今使ってるのが壊れるまではまだいいかなと思ってる。吸振マットは必須ではないけどつけてる。会社にもある。

FILCO Genuine ウッドリストレスト分離型(2分割) Sサイズ〔幅298mm〕北海道産天然木使用オスモカラー仕上げ日本製ブラウン FGWR/S2

メディア: エレクトロニクス

手首が貧弱なのか、ないとめっちゃしんどい。会社にもある。

ヘッドホン・スピーカー

ソニー SONY ワイヤレスノイズキャンセリングヘッドホン WH-1000XM3 B : LDAC/Bluetooth/ハイレゾ最大30時間連続再生密閉型マイク付 2018年モデルブラック

発売日: 2018/10/06
メディア: エレクトロニクス

ボロボロのイヤーパッドが復活｜修理・保護・汗ムレの解消に|mimimamo スーパーストレッチヘッドホンカバー L (黒) ※各機種への対応はメーカーHPのヘッドホン対応表をご確認ください

メディア: エレクトロニクス

換気扇とか洗濯機とかルンバとかってかなりうるさいのであってよかった。あとノイズキャンセリングがあるヘッドホンをつけると一気に静かになるので集中できる。

ただ重いのとこれからの季節は汗でべたつきやすいという問題がある。おじさんゆえにヘッドホンが臭くなるのは避けたいので洗えるカバーであるmimimamoをつけている。ちょっと耳が抑えられる感じがあってしんどいが臭いよりはマシと思って我慢してる。

AirPods Proに置き換えるかも。

ソニー SONY ワイヤレスポータブルスピーカー SRS-HG10 : Bluetooth/Wi-Fi/LDAC/ハイレゾ/専用スマホアプリ対応 2018年モデルグレイッシュブラック SRS-HG10 B

発売日: 2018/05/12
メディア: エレクトロニクス

ヘッドホンつけてて疲れた！！！！ってときに使ってる。大きめのスピーカーを持っていたけど、必要ないなと思ってSonyの小さいのに変えた。ケーブル1本で動くので机の上がさっぱりして便利

ライト

パナソニック LEDシーリングライト調光・調色タイプリモコン付 ~8畳 HH-CD0820AZ 【Amazon.co.jp限定】

発売日: 2018/10/01
メディア: ホーム&キッチン

調光・調色できるのを買った。目に優しい

Nature Remo + Google Home Nest mini

Nature スマートリモコン Nature Remo 家電コントロール Amazon Alexa/Google Home/Siri 対応 GPS連携温度湿度照度人感センサー Remo-1W2

メディア: Tools & Hardware

夜になったら部屋の明かりを自動で暖色にしたりする。音声で操作をやる前は、声を出す方がしんどいと思っていたのだけど、そんなことはなかった。

コーヒーメーカー

以下で書いた。

hisaichi5518.hatenablog.jp

マッサージ

Motomo フォームローラーストレッチローラー筋膜リリースマッサージ腰痛・肩コリ・筋肉痛を改善ヨガポールグリッドトリガーポイントエクササイズ(ブラック)

メディア: その他

定期的に整体に行ってたんだけど、自分でどうにかできんかな〜と思って買った。整体に行くほうが楽になるんだけど、ないよりマシという感じ

整体とか、意味や効果に対してのエビデンスがあるのかと言われると正直知らないんだけど、やらないよりやったほうが僕はマシになるのでやってる。

買ってないもの

マイク

必要にかられてないので買ってない。 Mac内蔵はさすがによくないかなと思うので、ヘッドホンについてるのを使ってる。音質の確認とかはしてないので、聞き取りにくいとかあるかも。仕事でSlack callを使ってしゃべるのはよくあるので、1,2万のを買うかもしれない。そしたらアームが欲しくなって3,4万…………うーん、まだいいかな！

参考: 全社リモートワークになったので通話のプラクティスを考えた | ishkawa

カメラ

必要にかられてないので買ってない。

まとめ

快適に過ごしていくぞ！

2020-04-04

コーヒーメーカー買った

今まで会社に行く前にコンビニに寄ってコーヒーを買って出社するというのがルーチンになっていたのだけど、新型コロナウイルス感染症の影響で自宅で働くようになってからコンビニまでコーヒーを買いに行くのがめんどくさくなってしまった。

なので、家でコーヒーをいれるようにするか〜と思ったのだけど、寝起きに手で淹れる元気もないのでコーヒーメーカーを買おうと思った。ナイスカットミルという自動で豆を挽くやつは持ってるので、普通のコーヒーメーカーでもいいかなーとも思ったのだけど、昔コーヒーメーカーを持ってる時に豆を挽いてからコーヒーメーカーに移すというのが案外めんどくさいと思っていたのを思い出したので、全自動のコーヒーメーカーを買うかという気持ちになっていたのであった。

豆を挽いてそのままコーヒーを淹れてくれるコーヒーメーカーと考えるとかなり絞られて、掃除しやすそうな象印のコーヒーメーカーを買おうかなあと思っていた。

象印コーヒーメーカー珈琲通 EC-RS40-BA ブラック

メディア: エレクトロニクス

コーヒーメーカー "珈琲通" EC-RS40｜コーヒーメーカー｜商品情報｜象印

ただコーヒーメーカー全般に言えることだけど、コーヒーメーカー自体が大きいのでひとり暮らしの家には置く場所が悩ましく、買うまでには至っていなかった。そのときに教えてもらったのがネスプレッソのコーヒーメーカー

おれも同じかんじでネスプレッソ買ったけどわりと良いよ
— しや (@shiyakeita) 2020年3月13日

ネスプレッソコーヒーメーカーエッセンサミニピュアホワイト D D30WH-CP

発売日: 2019/07/12
メディア: ホーム&キッチン

サイズ感をヨドバシカメラに見に行ってみたところ、案外小さかったのと担当のネスプレッソおばちゃんが色々と一生懸命教えてくれてコーヒー面白いな〜と思えたので買った。
カプセル式で正直なところ味が不安だったんだけど、試飲してみたところ普通にうまかった。コーヒーの種類は29種類くらいあっていろんな味が楽しめるし、29種類くらいなら全部頼んでみて最終的に好きなの選べばいいなとも思う。
今回買ったコーヒーメーカーだと作れる量が少ないのがネックなのだけど、冷めてまずくなるよりはいいかと思っている。

2020-03-16

Cirrus CI使い始めた

cirrus-ci.org

最近OSSでFlutterでWebViewを表示するプラグインを書いていて、Android エミュレータとiOSシミュレータを利用してそれぞれのプラットフォームでテスト(flutter drive)を動かしたいという欲求があった。最初は、iOSの実装だけやっていたので使ったことのあるBitriseを利用して動かしていたのだけど、Androidのテストを動かそうとしたら無料では2種類のワークフローを動かすことはできないっぽいのと1ビルド10分制限が厳しいなという感じだった。

業務で利用しているCircleCIは、iOSをビルドするのにお金を払う必要があり、お金払うかなぁと思っていたところ、FlutterがCirrus CIを使っていたので、僕も使ってみることにした。

2種類以上のワークフローを動かすことができる
- 動かすContainerをMacとLinuxと分けたりすれば、ある程度並列で動かすことも可能
iOSシミュレータ, Android エミュレータを利用したテストが動く
KVMもサポートしているので新しいAndroidエミュレータを使える
- Support KVM · Issue #397 · cirruslabs/cirrus-ci-docs · GitHub
Flutterが公式で利用できる
OSSは無料

シンプルでほしい機能があり制限も緩いので、ほんまに無料でええんか？という感じ

パルカワ2

最近はFlutterをやっています

最近のnative_webview