トップ   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS

プログラムの実行方法 の履歴の現在との差分(No.1)


  • 追加された行はこの色です。
  • 削除された行はこの色です。
#author("2024-05-30T18:44:18+09:00","","")
#author("2024-06-10T14:40:51+09:00;2024-05-31T15:44:14+09:00","","")
* プログラムの実行方法 [#vd961b40]
** エミュレータでの実行 [#n17384aa]

** エミュレータの準備 [#ufb62812]
作成したアプリをエミュレータで実行させてみます.~
アプリ開発の際に,すべてのバージョンのAndroid OSが動いている端末を持ってきて動作確認するのは不可能に近いです.なので,エミュレータという,実際の端末がなくてもPC上で仮想的に動かす仕組みを使います.~
以下はエミュレータを使用した画面表示・操作の確認です.かなり負荷がかかるので,ACアダプタをさした状態で実行された方がよいです.~

アプリ開発の際に,すべてのバージョンのAndroid OSが動いている端末を持ってきて動作確認するのは不可能に近いです.なので,エミュレータといって,実際の端末がなくてもPC上で仮想的に動かす仕組みを使います.~
以下はエミュレータを使用した画面表示・操作の確認です.Android Studio準備時エミュレータ環境をインストールしなかった学生は,以下の記述は読み飛ばしてください.~
図1の画面では,中央の上部に「Pixel 3a API 34」と書かれています.このアプリは,「Pixel 3a+Android 14.0」という端末上で動くことを想定して作られていることになります.~

#BR

Android Studioのメニューバーの下に,いろいろアイコンが表示されている箇所があります.その中で,マウスをあわせると「Device Manager」と表示されるアイコンがあります(図1).タブレットの絵の右下にAndroidくん(緑色の物体)がいるアイコンです.

#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/vd01.png, ,100%)
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/run01_1.png, ,50%)
CENTER:図1
#BR

このアイコンを押すと,右側にエミュレータの準備をする画面(図2)が出てきます。
「Pixel 3a API 34」という記述の少し横に,右向きの△があります.ここで実行させることができます.このボタンを押すと,図2のようにウィンドウの右側でエミュレータの起動が始まります.

#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/vd02.png, ,50%)
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/run02_1.png, ,50%)
CENTER:図2
#BR

最初は真っ白なので,新しく1つ仮想デバイスを作成します.~
上方の「Create device」を押すと,もろもろ設定して
しばらく待つと,スマホ風のウィンドウが表示されます.~
このスマホ画面内に,図3のような([[プログラムの編集]]のときに書いた)文字が表示されていれば成功です.~

- どの端末で
- どのAndroid OSのバージョンで

動かすかを指定することができます.色々試したい人,いずれ自分の端末で動かしてみたい人は新規に作成してもらっても構いませんが,大量にファイルをダウンロードする必要があるので注意してください.~
今回は,わかりやすいように全員一律で同じものを作成して使用します.

#BR

「Create device」で,図3のようなウィンドウが開きます.今回は,

- Category: Phone
- Name: Nexus4

を選択して,Nextを押してください.

#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/vd02_2.png, ,60%)
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/run03_1.png, ,50%)
CENTER:図3
#BR

System Imageの画面(図4)では,API Level 32を選びます.ここのレベルと作成アプリのレベルとを合わせないと,実行時にうまくいきません.~
図4のように,Nextボタンが押せない状態になっていて,API 32の文字の横に「Download」というリンクが表示されている場合には,そのリンクをクリックしてダウンロードします.~

#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/vd02_3.png, ,60%)
CENTER:図4
#BR

ダウンロードが始まると,図5のような画面になります.すごく時間がかかりますが,根気よく待ちましょう.

#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/vd02_4.png, ,70%)
CENTER:図5
#BR

ダウンロードとインストールが終わると,図6のように「Done」と表示されて,Finishが押せる状態になります.

#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/vd02_5.png, ,70%)
CENTER:図6
#BR

図4の画面に戻ってきました.今度はNextが押せるようになっているはずです(図7).

#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/vd02_6.png, ,60%)
CENTER:図7
#BR

図8の画面は特にいじる必要はありません.この状態でFinishを押します.

#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/vd02_7.png, ,60%)
CENTER:図8
#BR

図2の画面に戻ってきました.図9のように,一つ選択できるデバイスが表示されているはずです.

#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/vd02_8.png, ,50%)
CENTER:図9
#BR

図9の画面の右端のActionsの箇所を見てください.エミュレータの実行ボタンは,左端の,三角マークのアイコンです.マウスオーバーすると「Launch this AVD in the emulator」の文字が浮かびます.このボタンを押すと,図10のようにウィンドウの右下でエミュレータの起動が始まります.

#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/vd02_9.png, ,50%)
CENTER:図10
#BR

しばらく待つと,図11のようなスマホ風のウィンドウが表示されて,起動待ちをしているような画面が表示されます.~

#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/vd02_10.png, ,50%)
CENTER:図11
#BR

これでエミュレータがちゃんと動作することが確認できたので,実際にプログラムを実行してみます.


** エミュレータでの実行 [#l2144fc8]

起動したエミュレータで,作成したアプリを実行させます.~

#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/vd02_12.png, ,50%)
CENTER:図12
#BR

先ほどまで作成していたプログラムを保存します.次に,図12の上の方にある「Run 'app'」と表示される緑の三角のアイコンを押します.しばらく待ち,右下のスマホ画面内に,図13のような([[プログラムの編集]]のときに書いた)文字が表示されていれば成功です.~

#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/vd02_13.png, ,50%)
CENTER:図13
#BR

実際にエミュレータ上に表示されるまで少し時間がかかることがあります.画面の下の方で,Run tasksの箇所やGradle Build Runningのあたりがチカチカしていればまだ準備中なので,しばらくお待ちください.~

端末画面の上部に操作パネルがありますので,各自でいろいろいじって,動作を確かめてください.~
Ctrlキーを押しながらマウスをクリックすると画面に印が入ります.この状態でドラッグするとピンチイン・ピンチアウトの操作をすることができます.~
図14のように,カメラアイコンをクリックすると,スクショを撮ることが出来ます.このスクショを,次で説明する発表資料やレポートに使用してもらって構いません.
図4だと,スマホ画面のすぐ上のところに「△ 〇 □」がありますが,これらは実際のスマホ画面の操作方法と同じように使えます.

#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/vd02_14.png, ,50%)
CENTER:図14
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/run04_1.png, ,50%)
CENTER:図4
#BR

Ctrlキーを押しながらマウスをクリックすると画面に印が入ります.この状態でドラッグするとピンチイン・ピンチアウトの操作をすることができます.~
カメラアイコンをクリックすると,スクショを撮ることが出来ます.このスクショを,次で説明する発表資料やレポートに使用してもらって構いません.


** 実機での実行 [#cba1102f]

自分が持っているAndroid端末で実際に動かしてみることもできます……が本演習内では取り扱いません.ドライバのインストール,OSのバージョンの確認など,使用環境によって条件が異なることに加え,ちょっと設定に癖のある端末もあったりするためです.~
よほどのマイナー端末でない限り,ウェブで検索するとつなぎ方,動かし方,設定の仕方が見つかるはずなので,実機で試したい方は挑戦してみてください.~

また,作成中のアプリのAPI Levelと,動かしたい端末のAPI Levelとが合っていなかったり,画面サイズが異なっていたりすると,想定した通りに動かないことがありますので,実機で試す際にはこのへんも調整が必要です.

#BR
#BR

これで一通りの使い方解説は終わりです.お疲れ様でした!~
[[画像の表示]]をしてみたり,[[ボタンの追加]]をしてみたい人は,引き続き触ってみてください.~
(ただし,上記のリンク先は古いバージョンに対応した内容となるため,現在のバージョンとはかなり異なる可能性があります)
これで事前準備の解説は終わりです.お疲れ様でした!~

演習時間内では,[[画像の表示]]をしてみたり,[[ボタンの追加]]を試す予定です.
本格的に何かを作成したい人は,1冊参考書を用意して取り組んでみるのがいいです.大学の図書館で「Android アプリ」と検索すると「たった1日で基本が身に付く!Androidアプリ開発超入門」などの本がヒットします.~
「はじめてのAndroidプログラミング 第4版」もおすすめですが,言語はJavaではなくKotlinを使用しています(Javaの経験があれば,まあ大丈夫らしいです).~

#BR
[[一週目の作業]]に戻る