弊社で Android アプリデザイナに、Stetho の使い方をレクチャーしました。
その内容をまとめておきます。
要約
デザイナに Stetho が有効なアプリを渡して、Chrome から
- 現在のレイアウト設定値 （ padding など）が読み取れる
- 文言などの変更ができる
- 実際のレイアウト xml ファイルを探すヒントを見つけて、Android Studio 上のレイアウトファイルを特定する
をレクチャーしたら、デザイナとの連携がものすごく捗った！
背景
- デザイナのスキル
- HTML や CSS はよくわかってるデザイナ
- Android の dp, sp, xh, xxh とかは理解してる
- LinearLayout, FrameLayout, などのレイアウトルールは理解していない
- 「今表示されている画面のレイアウト xml ファイルってどれ？？」
- 「その画面って、開発内部的にはなんて言う画面名なの？」 （レイアウト xml のファイル名を探したいが、名前の察しもつかない）
- Android Studio でプロジェクトを git から clone して開いて、実機での実行（だけ）はできる。
- Sketch は使ってない
開発終盤のデザインレビューあるある
「ここの文言だけ変えたい」
↓ 変えました つ apk
「はみ出すので、やっぱりこの文言に…」
↓ 変えました つ apk
「うーん、フォントサイズがー」
↓ 変えました つ apk
「目立たせたいので、太字に！」
（以下略）つ apk,apk,apk,apk
『あのー、文言だけって言わなかったっけ？？』
Stetho とは？
- Chrome Developer Tools を使って、Android 開発をすごく楽にしてくれる Facebook 製ライブラリ
- 本家サイト
- できること
- 画面の要素の確認 ← これを使います
- ネットワーク通信の確認
- DB や SharedPreferencec（端末キャッシュ）の値の確認
便利ですね。
デザイン関係ないところでも重宝してます。
レクチャー内容
前提
- Chrome Web ブラウザがインストールされている
- Android 端末（シミュレータでも可）が
USB デバッグ許可になっている - アプリに
Stethoが組み込まれている
Chrome Developer Tools 起動手順
- Android 端末と PC を USB ケーブルで繋いでアプリを起動
- Chrome を起動
-
chrome://inspect/#devices を表示する
- inspect をクリックすると、↓のように
Developer Toolsが起動すれば OK
現在のレイアウト設定値 （ padding など）を読み取る
-
Developer ToolsのElementsタブを開く - xml を展開していくと、実機（この例では Genymotion ）の該当する View が網掛けになるので、値を調べたい View を見つけ出す
- 見つけ出したら、
Developer Toolsの右ペインを見る -
padding-bottom,margin-topなど、知りたい値をチェック（※単位は px なので注意！！） - 右ペイン下のボックスで見てもいいですね。
文言などの変更
-
Developer Toolsの xml ツリー上で、該当要素の変更したい属性をダブルクリックする - 文字変更の場合は、
text="○○○○○"の所 - 文字サイズなら、
android:textSize="○○○○"の所 - …（想像しやすいので略）
- 変更したい値に変える
- 実機のアプリ上の値がちゃんと変わっている！
※画面遷移すると、元の値に戻ってしまいます。。。
でも、文言（など）を変更したあとの画面レイアウトが、デザイナ側だけですぐ確認できるので良いですね！
実際のレイアウト xml ファイルを探すヒントを見つける
-
Developer Toolsの xml で、特定したい要素の id 属性の値のうち、id/xxxx_xxxxをコピー -
←@ を含まないようにすること！
- Android Studio を開いて、
Shift + cmd + Fで検索ボックスを開いて検索実行 -
- Android Studio の下に検索結果が表示される。 → activity_login.xml だとわかる
* ダブルクリックすると、該当ファイルが開く
これで、あとは好きなように要素の値を編集して、実行して貰えれば OK です。
さっきと違って、Android Studio で修正すると、画面遷移しても変更した値は保持されます（当然ですが）
補足
Developer Tools では android.support.v7.widget.appcompatbutton なのに、実際の xml ファイル上は Button なのは、AppComapt のライブラリ側で自動で書き換えているからです。
ソース：主催者挨拶 + 基調講演: 「Support Libraryノススメ」「Support Library Internal」 by Yuichi Araki at DroidKaigi 2016 の 29:00 あたり
資料：サポートライブラリ DroidKaigi 2016
まとめ
- Web デザインやったことがある Android アプリデザイナなら、Chrome Developer Tool はなじみがあるので取っつきやすい
- デザイナだけで Stetho & Chrome を使って簡単な修正と確認ができた
- 開発とデザイナで何往復もやり取りしなくて済むので、効率UP↑↑
- なんと、デザイナの
「このように修正して欲しいです」でパッチファイルが送られて来た！！！ - Stetho は開発者だけじゃなくて、デザイナにも便利だ！