0
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

Chromeのカスタムデバイスを管理するツール"Vibranium"をリリースしました

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を使います。

↓ こんな感じ
スクリーンショット 2018-09-12 0.28.02.png

  • 新しい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を作るのは楽しい、でもテストは難しかった
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
0
Help us understand the problem. What are the problem?