TL;DR
- Chrome DevToolのカスタムエミュレートデバイスを管理するCLI
-
/Users/XXXXX/Library/Application Support/Google/Chrome/Default/Preferencesをいじるだけ - Vibraniumっていいます
背景
プライベートでハイブリッドアプリを作成していて
- いろんな端末サイズ (iPhone 6, 6 Plus, X, iPad, Android端末)
- いろんなOSバージョン (iOS 10/11/12, Android 6/7/8)
- いろんなアプリバージョン
のWebViewで見たときに判定ロジックは正しく動くか、レイアウトは崩れていないかなどを
検証したいケースによく遭遇します。
実機で確認するのが一番ですが、どうしても限界があるので、そういうときはChromeのDevToolを使います。
↓ こんな感じ
- 新しいOSや端末がリリースされたときに大量に追加する
- ユーザーからの不具合報告を確認するために一時的に追加する(既存のを書き換えちゃう)
ことが多く、デフォルトのUIだと面倒なので、CUIツールを作成しました。
Herokuが出しているCLI作成ツール oclifを使いました。
できること
- ファイルからカスタムエミュレートデバイスを追加(add)
- Chromeに保存されているカスタムエミュレートデバイスをファイルに保存(export)
一括して編集したり、カスタムデバイスのバックアップを取ることを想定しています。
使い方
- インストール
$ npm install -g @pittankopta/vibranium - カスタムエミュレートデバイスをファイルに保存(vibranium.jsonに保存されます)
$ vibranium export - ファイルからカスタムエミュレートデバイスを追加
$ vibranium add ./vibranium.json
作っているときにハマったこと
Chromeの設定は終了しているときじゃないとうまく反映されない
Chromeが終了するときにメモリ内の設定を改めてディスクに書き込むような挙動があり、
addコマンドで書き換えたファイルが元に戻ってしまいました。addコマンドのときは
Chromeが起動していないことを確認するようにしています。
テストをどう書けば…
AngularJS, Angularをよく触っていることもあって、そのテストはうまく書けるんですが
nodeのコードはどうテストを書いたらいいものか、ちょっとわからず…。
テストが書けるようになったらちゃんとCIにも乗せたいです。
まとめ・感想
- TypeScriptで書けるのでかなりラクにツールを作れた
- これでエミュレートデバイスを散らかしてもすぐ元に戻せる安心感
- CLIを作るのは楽しい、でもテストは難しかった