Stetho で Android アプリデザイナとの連携が捗った話

弊社で 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 製ライブラリ
* [本家サイト](http://facebook.github.io/stetho/)
* できること
 * **画面の要素の確認** ← これを使います
 * ネットワーク通信の確認
 * DB や SharedPreferencec（端末キャッシュ）の値の確認

便利ですね。
デザイン関係ないところでも重宝してます。

# レクチャー内容
## 前提
* Chrome Web ブラウザがインストールされている
* Android 端末（シミュレータでも可）が `USB デバッグ許可` になっている
* アプリに `Stetho` が組み込まれている

## Chrome Developer Tools 起動手順
* Android 端末と PC を USB ケーブルで繋いでアプリを起動
* Chrome を起動
* [chrome://inspect/#devices](chrome://inspect/#devices) を表示する
 ![スクリーンショット 2016-03-01 23.10.28（2）.png](https://qiita-image-store.s3.amazonaws.com/0/9695/e5d6dfeb-7123-8497-54cc-f524cb282a8b.png)
* inspect をクリックすると、↓のように `Developer Tools` が起動すれば OK
![スクリーンショット 2016-03-01 23.14.55（2）.png](https://qiita-image-store.s3.amazonaws.com/0/9695/9f990c1e-1491-b53d-99e2-8fd0dbc10625.png)


## 現在のレイアウト設定値 （ padding など）を読み取る
* `Developer Tools` の `Elements` タブを開く
* xml を展開していくと、実機（この例では Genymotion ）の該当する View が網掛けになるので、値を調べたい View を見つけ出す
![スクリーンショット 2016-03-01 22.20.42（2）.png](https://qiita-image-store.s3.amazonaws.com/0/9695/8a017602-8a91-802f-2699-6c55310b29f5.png)
* 見つけ出したら、 `Developer Tools` の右ペインを見る
 * `padding-bottom`, `margin-top` など、知りたい値をチェック（**※単位は px なので注意！！**）
 * 右ペイン下のボックスで見てもいいですね。

## 文言などの変更
* `Developer Tools` の xml ツリー上で、該当要素の変更したい属性をダブルクリックする
 * 文字変更の場合は、`text="○○○○○"` の所
 * 文字サイズなら、`android:textSize="○○○○"` の所
 * …（想像しやすいので略）
* 変更したい値に変える
![スクリーンショット 2016-03-01 23.33.53（2）.png](https://qiita-image-store.s3.amazonaws.com/0/9695/e0af2ec9-ac61-e9f4-f34a-a59c4420a09b.png)
* 実機のアプリ上の値がちゃんと変わっている！
![スクリーンショット 2016-03-01 23.35.00（2）.png](https://qiita-image-store.s3.amazonaws.com/0/9695/685bedbf-2276-f0ab-2f9b-55560bc7f6cf.png)

※画面遷移すると、元の値に戻ってしまいます。。。

でも、**文言（など）を変更したあとの画面レイアウトが、デザイナ側だけですぐ確認できるので良いですね！**

## 実際のレイアウト xml ファイルを探すヒントを見つける
* `Developer Tools` の xml で、特定したい要素の id 属性の値のうち、`id/xxxx_xxxx` をコピー
* ![スクリーンショット 2016-03-01 23.52.25（2）.png](https://qiita-image-store.s3.amazonaws.com/0/9695/143937b8-289b-cdfd-f7f4-6d308eb70153.png)　**←@ を含まないようにすること！**
* Android Studio を開いて、`Shift + cmd + F` で検索ボックスを開いて検索実行
* <img width="406" alt="スクリーンショット 2016-03-01 23.52.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/9695/efb11bcd-b249-1fbc-45c7-ad2c2c33309b.png">
* Android Studio の下に検索結果が表示される。 **→　activity_login.xml だとわかる**
 <img width="608" alt="スクリーンショット 2016-03-01 23.52.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/9695/13b22a5d-e8ba-92fa-4ce9-bf033cea9e8c.png">
* ダブルクリックすると、該当ファイルが開く
<img width="467" alt="スクリーンショット 2016-03-01 23.59.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/9695/92eac608-362f-9514-183c-6d3a90b52e98.png">

これで、あとは好きなように要素の値を編集して、実行して貰えれば OK です。
さっきと違って、Android Studio で修正すると、**画面遷移しても変更した値は保持されます**（当然ですが）

### 補足
`Developer Tools` では `android.support.v7.widget.appcompatbutton` なのに、実際の xml ファイル上は `Button` なのは、**AppComapt のライブラリ側で自動で書き換えているから**です。

ソース：[主催者挨拶 + 基調講演: 「Support Libraryノススメ」「Support Library Internal」 by Yuichi Araki at DroidKaigi 2016 ](https://www.youtube.com/watch?v=PJSB4xCc3Dg)  の 29:00 あたり
資料：[サポートライブラリ DroidKaigi 2016](http://yaraki.github.io/slides/droidkaigi2016/)

# まとめ
* Web デザインやったことがある Android アプリデザイナなら、Chrome Developer Tool はなじみがあるので取っつきやすい
* デザイナだけで Stetho & Chrome を使って簡単な修正と確認ができた
* 開発とデザイナで何往復もやり取りしなくて済むので、**効率UP↑↑**
* なんと、デザイナの `「このように修正して欲しいです」`で**パッチファイルが送られて来た！！！**
* **Stetho は開発者だけじゃなくて、デザイナにも便利だ！**