Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What is going on with this article?
@pittanko_pta

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

More than 1 year has passed since last update.

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を作るのは楽しい、でもテストは難しかった
0
Help us understand the problem. What is going on with this article?
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
pittanko_pta
Perfumeと乃木坂・欅坂が好きです。フロントエンドの人。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
0
Help us understand the problem. What is going on with this article?