パルカワ2

最近はFlutterをやっています

FlutterでWebViewをがんばる

Flutter + WebView

最近FlutterのWebViewを触るようなことをやっている。 WebViewのプラグインにはいくつか実装があるが、大きく分けるとするとPlatformViewを使わないか使うかによって分けれる。

PlatformView を使わないか使うか

PlatformViewを使わないとネイティブのViewをFlutterWidgetの上に被せて表示する実装になるので、FlutterのWidget(SnackBarなど)をWebViewの上にかぶせるなどができない。また大きさの変更もContainerなどのWidgetを利用して変更できない。launchするときにrectを指定すれば大きさの変更はできる。さらに1画面に1個のWebViewしか利用できない。このように制限はあるが、PlatformViewを経由しないため、それなりに動く。（キーボードが出てきてもViewの大きさが変わらない問題(仕様?)はある）

PlatformViewを使うとFlutterのWidgetとして扱えるので、WebViewの上にSnackBarを出したりWebViewの大きさをContainerに囲んで変更したり複数のWebViewを表示したり制限なく使える。しかし、後述するがAndroidのキーボードまわりでバグにぶちあたる。

PlatformView を使う

今回の要件的には上記のような制限を受けたくないので、PlatformViewを利用する選択をした。 PlatformViewを利用するプラグインは探せばたぶん無限にあるけど、この2択っぽい。

webview_flutterに関しては、公式のプラグインで安心感がある。利用者も多く大体の問題はイシューになっている。ただあまり実装は進んでおらず、onPageStartedなどのコールバックもほとんど実装されていないようだった。（プルリクはあるが… #1389, #1788）

flutter_inappbrowser のほうはCookieManagerやコールバックもある。ただ、リリースはされてないが2.0.0でAPIが大きく変わりそう。また、大きな実装だなという印象で、InAppWebView.javaの実装を見るとJSがめっちゃ書かれていて、それって我々に必要なのか？みたいな気持ちになる。

今回は、公式のwebview_flutterで確認することにする。

webview_flutterを使ってぶちあたった壁

webview_flutterを利用する選択をしたはいいが、触っていたところAndroidのキーボードまわりで結構バグっていることに気づいた。全部イシューになっているけど、WebView起因というよりはPlatformViewが原因なのが多い気がしていて、シュッとは直せなさそうだと思った。 自分が遭遇しただけでも以下がある。

webview_flutter Keyboard persists after tapping outside text field · Issue #36478 · flutter/flutter · GitHub

TextFieldをタップしてキーボードを表示したあとTextField以外をタップしてもキーボードが出っぱなし。

WebView’s text selection dialog is not responding to touch events · Issue #24585 · flutter/flutter · GitHub

TextFieldをタップしてもコピーなどの項目が表示されない。 Flutter 1.9以降で動かないようになったらしく、なおしてるところとのこと。 https://github.com/flutter/flutter/issues/24585#issuecomment-513950478

WebView’s text selection handles are not showing on Android · Issue #24584 · flutter/flutter · GitHub

TextFieldだけではなくウェブページのテキストをコピペしようと長押ししても動かない。 そもそもLongTapが無効化されている。 https://github.com/flutter/plugins/blob/f31d16a6ca0c4bd6849cff925a00b6823973696b/packages/webview_flutter/lib/src/webview_android.dart#L31

webview_flutter Keyboard suggestions can be lost · Issue #37989 · flutter/flutter · GitHub

日本語を打つと強制的に確定されてしまい、サジェストが出ずキーボードが英字に変わってしまう。 Chromiumが原因かも？と言っている。ネイティブアプリでWebViewを使ってみてもならないので違うような気もするけどよくわからず。

サイズ変更が原因らしいので、サイズを変更しなければ起きない。 FlutterがつくるAndroidアプリは、キーボードを出すとViewの大きさを変える設定になっているので、それをやめればよい。AndroidManifest.xmlのandroid:windowSoftInputMode="adjustSize"をandroid:windowSoftInputMode="adjustPan"に変える。

ただ、この設定をするとFlutterで作った画面すべてに影響し（つまりWebViewを利用していない画面でキーボードが出てもViewのサイズは変更されない）、Viewの大きさが変わらないとキーボードを出した状態で一番下までスクロールできなくなるため、あまり現実的な手段ではないと思う。

この問題は、flutter_inappbrowserだと実装が違いそうなので、動かして確認したところそもそも文字がなにも入力できなかったので確認できなかった………。

webview_flutter Soft keyboard not appearing on Q · Issue #38375 · flutter/flutter · GitHub

Android Qでキーボードが出なかった。beta channelだとなおっているのを確認した。

Text input on Q platform views results in log spam · Issue #40716 · flutter/flutter · GitHub

#38375をなおした影響でAndroid Qでログが出まくる。 Q未満は出ないので、Q未満でデバッグすることにした。

autofillが効かない？

動かないか確認できていないけど、ログが出てる。

W/cr_AwAutofillManager( 2953): WebView autofill is disabled because WebView isn't created with activity context.

ただPlatformViewは、VirtualDisplayを使うことで実現していてそのためには android.app.Presentation を使う必要があるっぽくActivityのContextを利用するのは無理なのではと自己完結した。

まとめ

FlutterでWebViewを使いたいが、Androidのキーボードまわりで困っている。数カ月後にはなおってるかもしれないし、なおってないかもしれない。 せっかくFlutterを利用するのであれば、ネイティブでAndroid/iOSを書きたくないという思いがあるが、ネイティブで書くのがよいという決断をするかもしれない。

ちなみにiOSでは結構まともに動いていて「AndroidとFlutterは同じ会社が作ってるのでは…？」と思うなどした（大変そう）

ノンデザイナーズ・デザインブックを読んだ

ノンデザイナーズ・デザインブック [第4版]

ノンデザイナーズ・デザインブック [第4版]

なんとなく認識しているようなことを言語化されていてよかった。

Android Studio 3.5にあげた

CIではテストが通るんだけど、手元では通らなくなってしまったので困っていた。

2019-09-25 15:29:48:978 (KOIN)::[e] Error while resolving instance for class 'com.google.gson.Gson' - error: org.koin.error.BeanInstanceCreationException: Can't create definition for 'Single [name='Gson',class='com.google.gson.Gson']' due to error :
2019-09-25 15:29:48:978 (KOIN)::[i] [Close] Closing Koin context
		com.google.protobuf.Internal and com.google.protobuf.Internal$ProtobufList disagree on InnerClasses attribute
		java.lang.Class.getDeclaringClass0(Native Method)
		java.lang.Class.getDeclaringClass(Class.java:1235) 

org.koin.error.BeanInstanceCreationException: Can't create definition for 'Single [name='Gson',class='com.google.gson.Gson']' due to error :
		com.google.protobuf.Internal and com.google.protobuf.Internal$ProtobufList disagree on InnerClasses attribute
		java.lang.Class.getDeclaringClass0(Native Method)
		java.lang.Class.getDeclaringClass(Class.java:1235)



onPageFinished が実行されないときがある

Android の WebViewClient の onPageFinished が実行されないときがあるので困った。 onPageFinished は 2回実行されることもあるので、なかなかの困ったちゃんである。

onPageFinishedが実行されないときも onPageStarted は実行されるので、onPageStartedのときにすでに document.readyStateが loading 以外なら実行. loading なら監視してStateが変わったら実行という形にした。 onPageFinished が実行されないときは、 readyState が complete になってないようなので、WebViewが悪いというよりサイトが原因なんだろうと思う（しかし、すべてのサイトに修正を加える力は我々にはない………）

Moneytreeで未対応のTHEOを勝手に対応する

Moneytreeは現金とかタンス預金用に手動入力のみの「その他の口座」項目がある。
それは手動でしか入力できないんだけど、チョットプログラム書けば未対応のTHEOも自動で入力できるじゃんと思ったのでやってみた。puppeteer便利すぎ

流れ

  • THEOにログイン
  • THEOで表示されてる額を取得
  • Moneytreeにログイン
  • つくっておいた口座に額を追記

これをなんらかの方法で定期実行すればよい

実装

こういう感じ

import * as puppeteer from 'puppeteer';
import {Page} from "puppeteer";

class Theo {
    public static get username(): string { return ""; }
    public static get password(): string { return ""; }
}

class Moneytree {
    public static get username(): string { return ""; }
    public static get password(): string { return ""; }
}


class LoadTheoMarketPrice {
    async execute(page: Page): Promise<string> {
        await page.goto('https://app.theo.blue/account/login');

        await page.type("input[name=email]", Theo.username);
        await page.type("input[name=password]", Theo.password);
        await page.tap("#app > section > section > form > div > button");
        await page.waitForNavigation();

        return await page.$eval("span.number-value", (span) => span.textContent.trim());
    }
}

class SaveTheoMarketPrice {
    async execute(page: Page, price: string) {
        await page.goto('https://app.getmoneytree.com/login');

        await page.type("input[name=email]", Moneytree.username);
        await page.type("input[name=password]", Moneytree.password);
        await page.tap("#app > div > div > div.onboardingPageBody > form > div > button");
        await page.waitForNavigation();

        // 口座残高を表示
        await page.goto("https://app.getmoneytree.com/app/vault");
        await page.waitFor(3000);

        // THEOの項目を表示/人によって違うよ
        await page.tap("div > ul > li:nth-child(4) > div.row.institution-header > a");
        await page.tap("#mt-webapp > section > mt-webapp-layout > div > div.content.ng-scope > mt-accounts > div > mt-accounts-personal > div > mt-link-vault > div > mt-two-column-layout > div > div.column.left.sidebar > div:nth-child(2) > left-column-body > mt-credentials > div > ul > li:nth-child(4) > div:nth-child(2) > ul > li.ng-scope > div > mt-credential > div > mt-credential-template > div > div.credential-accounts > div.credential-body > mt-list-secondary > div > ul > li:nth-child(2)");
        await page.waitFor(3000);

        // 編集ダイアログを表示
        await page.tap("#mt-webapp > section > mt-webapp-layout > div > div.content.ng-scope > mt-accounts > div > mt-accounts-personal > div > mt-link-vault > div > mt-two-column-layout > div > div.column.center.content > mt-awesome-layout > div > div > div:nth-child(1) > awesome-body > div > right-column-body > div:nth-child(2) > div.ng-scope > mt-manual-account-balances > div > div.current-account-balance-header > span:nth-child(2) > a");

        // 保存されてる内容を消す
        await page.$eval("#mt-webapp > section > mt-webapp-layout > div > div.content.ng-scope > mt-accounts > div > mt-accounts-personal > div > mt-link-vault > div > mt-two-column-layout > div > div.column.center.content > mt-awesome-layout > div > div > div:nth-child(1) > awesome-body > div > right-column-body > div:nth-child(2) > div.ng-scope > mt-manual-account-balances > div > div.current-account-balance-header > span:nth-child(2) > mt-manual-account-balances-action > div > div:nth-child(5) > mt-amount-input > div > div.pull-right > input",
            value => (value as HTMLInputElement).value = "");

        // priceを入力
        await page.type("#mt-webapp > section > mt-webapp-layout > div > div.content.ng-scope > mt-accounts > div > mt-accounts-personal > div > mt-link-vault > div > mt-two-column-layout > div > div.column.center.content > mt-awesome-layout > div > div > div:nth-child(1) > awesome-body > div > right-column-body > div:nth-child(2) > div.ng-scope > mt-manual-account-balances > div > div.current-account-balance-header > span:nth-child(2) > mt-manual-account-balances-action > div > div:nth-child(5) > mt-amount-input > div > div.pull-right > input",
            price);

        // + にする
        await page.tap("#mt-webapp > section > mt-webapp-layout > div > div.content.ng-scope > mt-accounts > div > mt-accounts-personal > div > mt-link-vault > div > mt-two-column-layout > div > div.column.center.content > mt-awesome-layout > div > div > div:nth-child(1) > awesome-body > div > right-column-body > div:nth-child(2) > div.ng-scope > mt-manual-account-balances > div > div.current-account-balance-header > span:nth-child(2) > mt-manual-account-balances-action > div > div:nth-child(5) > mt-amount-input > div > div.pull-left.ng-scope > div > i");

        // 更新する
        await page.tap("#mt-webapp > section > mt-webapp-layout > div > div.content.ng-scope > mt-accounts > div > mt-accounts-personal > div > mt-link-vault > div > mt-two-column-layout > div > div.column.center.content > mt-awesome-layout > div > div > div:nth-child(1) > awesome-body > div > right-column-body > div:nth-child(2) > div.ng-scope > mt-manual-account-balances > div > div.current-account-balance-header > span:nth-child(2) > mt-manual-account-balances-action > div > div:nth-child(7) > a");
        await page.waitFor(3000);
    }
}

exports.saveTheoMarketPrice = () => {
    (async () => {
        const browser = await puppeteer.launch();
        const theo = await browser.newPage();
        let price = await new LoadTheoMarketPrice().execute(theo);
        price = price.replace(",", "");

        const moneytree = await browser.newPage();
        await new SaveTheoMarketPrice().execute(moneytree, price);

        await browser.close();
    })();
};

一応書いておくとこのコードによってなにか起きても責任は取りません。

プール行ってる

もともとはジムに行ってたんだけど、時間効率を考えると水泳だな…と思い始めて区のスポーツセンターに通い始めた。

最初は、仕事が終わってダラダラして21時頃に勢いで下の水着（正確には水陸両用パンツ）だけ持っていったら帽子が必要ですってプールサイドで言われて「入り口の注意事項に書いてなかったやん」とは思ったんだけど、どうせならもろもろ揃えるかと思って、2時間分の入場料払って5分でそのまま帰った（スポーツセンターの売店で買えるらしかったけど）

次の日、大きめのスポーツ用品店で度付きのゴーグルとしっかりした水着と帽子を買って二回目。 夜は人が少なくて目立つのが嫌だったので、人間がたくさんいそうな時間帯を狙った。16時くらい。 レーンへの入り方みたいなのもわかってなかったので、最初はプールを眺めて雰囲気を理解した。このとき、変質者と思われないか不安だった。

中学生くらいまではプール教室？に行ってたので泳ぐのは出来たんですけど、まともに泳ぐのは中学生ぶりだし今は泳げるか不安だったのでまずは水中で歩いた。 水の中での歩き方にも色々あると思うんだけど、何も知らないのでそれも雰囲気でやった。

歩くのは余裕すぎるな〜という感じだったので、初心者レーン25mにシュッと入って泳いだら案外泳げて楽しい。 こりゃあいいと思って、25mを何度か往復していたらまあ疲れる。疲れたら歩いて休憩。回復したらまた泳ぐを繰り返した。

そしたら、足と胸あたりの筋肉が悲鳴を上げ始めたのでジャグジーに入って帰宅した。筋肉痛になりたくないので筋膜リリースして終わり。 想像してたより楽しかったので続ける。ジムは解約する予定

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

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

アマニタ・パンセリナ を読んだ

アマニタ・パンセリナ (集英社文庫)

アマニタ・パンセリナ (集英社文庫)

中島らも自身がドラッグに関する情報について、咳止めシロップの項目でこう書いてる。

問題は情報にはなくほとんどいつも中毒者の側にある。
つまり、なるべくして中毒になるような、そういう器質の一群があるのだ。

情報として重要なのは、たとえばこの文章のような「正確な」情報だろう。
こうすればこうなりますよ、という臨床例に近いような情報だ。
かくすより「知らせる」ことの方が大事なのである。