![見出し画像](https://assets.st-note.com/production/uploads/images/131739035/rectangle_large_type_2_9c4eff6f65091e29a0195c427d9166e7.png?width=800)
【Androidアプリ開発】3:プレビュー機能、実機テストとの戦い
本記事の概要
概要
前回『プロジェクトの作成、エミュレーターとの戦い』からの続きです。
今回は「プレビュー機能」「実機テスト」の記事を書くものとする。
特に「実機テスト」ではクロームブックならではの嵌った点も解説。
プレビュー機能
ふと、気になったのがさ、エディタ右上の「 [Code] [Split] [Design] 」の箇所なんだよね。
![](https://assets.st-note.com/img/1708613692264-MQlaii35eA.png)
[Code] から [Split] に切り替えると
![](https://assets.st-note.com/img/1708613720551-kSZ2KtI0Xp.png?width=800)
何とプレビュー画面が出現する。
![](https://assets.st-note.com/img/1708613789367-6t68goMzdM.png)
試しにText の先頭に"Test "を書き足す。
![](https://assets.st-note.com/img/1708613812330-a51Sq7657t.png)
Loading … となるので、待つと。
![](https://assets.st-note.com/img/1708613979942-toOtRIEOXx.png)
Up-to-dateとなり。
![](https://assets.st-note.com/img/1708613999832-UzR4a2JOCd.png?width=800)
プレビューされる。
●インタラクティブモード
シュミレーターが使えなくてもがっかりする事はない。
プレビューでも「インタラクティブモード」を使えばアクション動作確認ならで出来る✨
![](https://assets.st-note.com/img/1708613925349-9gz9hBNLHy.png?width=800)
検証用にカウンターボタンを作成する。
Jetpack Composeを使うとコードが短く書ける。
ただ、Buttonひとつにしろ、いちいちimportとか必要なのでそこは面倒。
特に色を指定しなければ、青いボタンになりますね。
形は真四角というより角丸かな。
ふむ、これがマテリアルデザインというものか🎨
![](https://assets.st-note.com/img/1708614037370-gcBWM7TD1B.png?width=800)
プレビュー名辺りにカーソルを合わせるとアイコンが出てくるのでクリック
![](https://assets.st-note.com/img/1708614067145-00Rym09T18.png)
「インタラクティブモード」起動中なら上方にストップボタンが出ます。
![](https://assets.st-note.com/img/1708614118116-XpjxOomZBl.png)
ボタン押下でカウントアップ
![](https://assets.st-note.com/img/1708614163222-F9DzXKUEzn.png)
10回押してみた。
プレビューでもきちんと動作確認出来る💡
![](https://assets.st-note.com/img/1708614337332-6VYZz6uoR3.png)
「インタラクティブモード」を終了したい場合、ストップボタンで停止する。
![](https://assets.st-note.com/img/1708614306216-ZHDN6hUqEc.png)
なお、プレビューへの配置は@Previewアノテーションをつけたコンポーザブル関数を使う。
プレビューエリアの「GreetingPreview」は関数名がそのまま表示されていた訳です。
この辺りも便利ですね。
![](https://assets.st-note.com/img/1708614374278-motaaNwDy5.png)
TextFieldに入力も出来たぞ💡
超簡単なカウンターアプリなら秒で作れちゃう。
すごいぞ Jetpack Compose 💪
実機テスト
実機テストをしてみましょう。
開発者向けオプション
●開発者向けオプション
実機側(Android端末)の「開発者向けオプション」を有効にする必要があります。
※ 以下の操作は、スマホ機種によって若干異なる場合があります
![](https://assets.st-note.com/img/1708614570204-O970HeFUI6.png?width=800)
設定を開きます
![](https://assets.st-note.com/img/1708614605875-4pXkxUoCbP.png?width=800)
デバイス情報をタップ
![](https://assets.st-note.com/img/1708614635220-EAKXt6wN9K.png?width=800)
ビルド番号を7回タップ
『ロックNo.の再入力
続行するには端末のロックNo.を入力してください』
と出た場合は、ロックNo.を入力する。
![](https://assets.st-note.com/img/1708614714281-vc8C2wDbb6.png?width=800)
「デベロッパーモードになりました」と出る
![](https://assets.st-note.com/img/1708614760853-bTe4b93ptm.png?width=800)
デバイス情報から設定画面に戻り、「システム」をタップ
![](https://assets.st-note.com/img/1708614805167-Ug4qPAFqJW.png?width=800)
「開発者向けオプション」が追加されているのでタップ
![](https://assets.st-note.com/img/1708614851826-6SGcRPnYdJ.png?width=800)
開発者向けオプションがONになっていればOK
![](https://assets.st-note.com/img/1708614880235-Qv2aLQXfQ8.png?width=800)
USBデバッグをONにします。
![](https://assets.st-note.com/img/1708615024526-WJcdkotxw2.png?width=800)
このダイアログが出た場合、各自判断してください
![](https://assets.st-note.com/img/1708615060252-MzUcRvJn1E.png?width=800)
USBデバッグを許可しますか?
このダイアログが出た場合、「OK」ボタン押下
![](https://assets.st-note.com/img/1708615087689-NtWyWM9Aq7.png?width=800)
USBデバッグはONとなる。
クロームブックと実機をUSB接続する
●クロームブックと実機をUSB接続する
次に、クロームブックと実機をUSB接続します。
何かダイアログが出るので、状況にん応じOKボタン押下します。
この時、ただの充電ではなく、ファイル転送許可をする感じにしてください。
ちなみに私の端末では、何故か一瞬でダイアログが消えるので、一瞬の隙を逃さずOKボタン押下しました。
●Android Studio側
![](https://assets.st-note.com/img/1708615130980-KQk5fmV7D8.png?width=800)
しかし困った事に、Android Studio側で認識してくれない。
(WifiはAndroid11以降だし)
![](https://assets.st-note.com/img/1708615193884-M4S8gtFACN.png)
クロームブックは端末を認識しているし、中のファイルにもアクセス出来るのだが …
![](https://assets.st-note.com/img/1708615235407-oALXkssNMz.png)
Virtualタブを
![](https://assets.st-note.com/img/1708615265659-GUYlJX9WWG.png)
Physicalにしても何も出て来なーい
そもそも、ホストOS(ChromeOS)で認識していても、ゲストOS(Linux仮想環境)側で認識しているのかが気になる。
aptコマンドは使えるのでネット接続はOKだが、USBはどうなのだろうか❓
WindowsでいうUSBドライバ的なものが必要なのだろうか。
$ lsusb
![](https://assets.st-note.com/img/1708615317641-8wTYPsj1Ac.png?width=800)
lsusbコマンドとやらを初めて使ってみる。
うーん、よく分からん。
$ lsusb -t
![](https://assets.st-note.com/img/1708615480598-ERekaZSWLx.png?width=800)
tオプションでより詳しく出るらしい。
これを見る限り、多分、端末は認識していない。
$ ls /dev
![](https://assets.st-note.com/img/1708615560595-ZUzihFOsGW.png?width=800)
USB接続が認識されると /dev/sda や /dev/sdb 等出来るらしいが、これもよく分からん。
![](https://assets.st-note.com/img/1708615594479-rFmtM0U9ES.png)
いつの間に、クロームブック側でも認識されなくなったので、USB接続しなおすと、ダイアログが。
繋がっても、ぶちぶち切れるのは厄介だなあ。
で、ダイアログでLinuxの方を選択したら「lsusb -t」の結果に変化は生じたのだが、Android Studio側や「ls /dev」には変化が生じず。
何か、ぐだぐだですね。
Connection Assistant
●Connection Assistant
「Connection Assistant」とやらを試してみる
![](https://assets.st-note.com/img/1708615843721-Nski7gLKJo.png)
(上段メニュー) Tools → Troubleshoot Device Connections
または
![](https://assets.st-note.com/img/1708615982228-wVQM7DwhQh.png)
デバイス選択箇所でTroubleshoot Device Connections
![](https://assets.st-note.com/img/1708616006831-tRfH8PJGz8.png?width=800)
こんな感じ
Android Studio detected 1 device(s).
(Android Studio は 1 台のデバイスを検出しました。)
となっている割には、ビルドのデバイス選択で出てこないわけだが。
取り敢えず「Next」ボタン押下
![](https://assets.st-note.com/img/1708616053131-fXT8Uc9uY4.png?width=800)
うん、それさっきやったから。
![](https://assets.st-note.com/img/1708616389111-nwM0VfJP9K.png?width=800)
「Restart ADB server」ボタン押下
… 、何も変わらない。
![](https://assets.st-note.com/img/1708616424243-GSlrQZjSUY.png)
しかも、先程USBデバッグをONにしたのに、いつの間にOFFになっているし。
調べたら、Android端末のUSBデバッグは何かのきっかけでいつの間にOFFになるとの事。
セキュリティー的なものなのかな❓
もうね、何がなんだか。
引き続き、調査続行。
もはや、藁をもすがる思いです。
… と、その時だった。
上記サイトの情報に救われました。
では、早速試す
![](https://assets.st-note.com/img/1708616587096-uQKYWrfMDo.png?width=800)
クロームブック側の設定の検索欄に「usb」と入力
![](https://assets.st-note.com/img/1708616829216-7sMZqGKLPT.png?width=800)
候補に「LinuxのUSB設定」と出てくるので選択。
![](https://assets.st-note.com/img/1708616908115-viXMszDfMQ.png?width=800)
「USBデバイスを管理する」画面が表示される
![](https://assets.st-note.com/img/1708616960863-ffVq6sk3sh.png?width=800)
ONにします。
なお、この時、スマホ側で「USBデバッグを許可しますか?」的な確認ダイアログが出ます(スクショは撮り忘れた)。
フィンガープリントが表示されていると思うので「OK」ボタン押下。
![](https://assets.st-note.com/img/1708616999269-DzRR5Z3qQg.png?width=800)
「Connection Assistant」にもいい感じで認識されているぞ💡
![](https://assets.st-note.com/img/1708702653439-Zv3hzFjeoG.png?width=800)
ターミナルで「lsusb -t」コマンドで見てみる。
usbの文字が増えている。
![](https://assets.st-note.com/img/1708702680399-INh1hoRPlD.png?width=800)
このKYV45が実機端末。
きちんとビルド欄にも出ています。
![](https://assets.st-note.com/img/1708702706594-eMo2YrBx6U.png?width=800)
ついに実機テストが出来たぞぉー🎉
![](https://assets.st-note.com/img/1708702746555-6BBgRRd7ee.png?width=800)
なお、終了する際には、きちんと停止ボタン(赤い四角ボタン)を押しましょう。
![](https://assets.st-note.com/img/1708702838565-xIYC7F0lgR.png)
インストールもされているぜ。
「実機のビルド」って早いです🚵
今、思ったんだけどエミュレーター要らないかも。
エミュレーターだと遅い(クロームブックのCPU性能による)し、実機の方だとあらゆる種類の検証が出来ます✨
盲点だった箇所
●盲点だった箇所
苦戦しましたが、何とかなりました。
以下、盲点だった箇所です。
![](https://assets.st-note.com/img/1708702879893-k0uaxxUBCu.png)
端末接続時に出るダイアログで「Linuxを選択」をクリックすること。
![](https://assets.st-note.com/img/1708702908193-rCbTIINXPn.png?width=800)
設定の検索欄に「usb」と入力。
候補の「LinuxのUSB設定」を選択。
![](https://assets.st-note.com/img/1708702928302-5Rt7uW5Lz0.png?width=800)
あと、この「USBデバイスを管理する」画面ですが
![](https://assets.st-note.com/img/1708702955533-jLLHRPWpi2.png?width=800)
設定 → 詳細設定 → デベロッパー → Linux開発環境 → USBデバイスを管理する
の遷移でも行けますね。
そう言えば「emulator-5554」って出てた事もありました。
これは接続は成功しているが、「USBデバッグが有効でなかった」場合のエラーのようです。
著書
『 プログラマーにおくるAndroidアプリ開発の入門書 』
2024年6月時点での最新技術をぎっしりと詰め込んであるので、アプリ開発に参画するエンジニアの人は、是非ともご覧になって頂ければと思います📱
この記事が気に入ったらサポートをしてみませんか?