無能がFlutterを独学し始める話【5/5：実際にFlutterを触ってみる】5/5-2：作成したFlutterプロジェクトをエミュレータで動かす
本記事をご覧いただき、誠に有難うございます。
投稿主の無能と申します。
前回は新規でFlutterプロジェクトを作成しました。
今回は、作成したFlutterプロジェクトをエミュレータで動かしてみたいと思います。
作成したFlutterプロジェクトを開く
前回までで作成したFlutterプロジェクトを開きます。
Android Studioで開くと、作成直後のままになっているのでREADME.mdというファイルが開いていると思います。
Android Studioで作成したFlutterプロジェクトを開く
README.mdが開かれている
実際に作業するのは「main.dart」というdartファイルになります。
main.dartはlibフォルダ内にあるので、ダブルクリックで開きます。
libフォルダ内のmain.dartをダブルクリックで開く
開くと右側にソースコードが表示されました。
main.dartを開くと右側にソースコードが表示される
取り敢えずmain.dartを実行してみます。
実行はAndroid Studioの画面右上の、緑の再生ボタンになります。
Android Studioの右上にある実行ボタン
実行ボタンを押下すると、次のメッセージが表示されました。
実行ボタンを押下するとメッセージが表示された
接続しているデバイスが見つかりませんでした、というメッセージのようです。
前回までで作成したエミュレータを起動します。
作成したエミュレータを起動する
Android Studio右上の<No Device Selected>から、Open Android EmuratorのPixel3aを選択します。
Android Studio右上の<No Device Selected>から、Open Android EmuratorのPixel3aを選択
少し待つとエミュレータが起動します。
エミュレータが起動すると、先程<No Device Selected>だったステータスがAndroid SDK Built for x86(Mobile)へ変化しました。
エミュレータ起動でステータスが更新された
起動したエミュレータは初期状態となっていて、言語も英語だし少々使い辛いと思います。
（勿論英語でも何ら不自由は無い、という方はそのままでも結構です）
ここでmain.dartを実行する前に、エミュレータの方を自分が使っているような感じに整えていきましょう。
エミュレータの設定を変更する
言語を設定する
先ずは言語を日本語にします。
画面下部のドッグ上部にある上向き矢印を、タッチ操作が可能な場合はタップ、マウスの場合はクリック）します。
するとアプリ一覧が表示されます。
画面下部のドッグ上部にある上向き矢印をタップ（クリック）
アプリ一覧が表示される
アプリ一覧から探しても良いのですが、折角検索バーがあるので、今回は検索バーを使いたいと思います。
Search Appsをタップ（クリック）し、Settingsの「se」と入力します。
お使いのPCのキーボードから直接入力が可能です。
するとSettingsが候補に挙がりました。
これをタップ（クリック）します。
画面上部のSearch Appsをタップし「se」と入力するとSettingsが候補に挙がる
設定を起動しました。
設定アプリを起動した
言語を変更するためLanguageを選択します。
操作は人それぞれですが、今回も検索してしまいましょう。
画面上部のアプリタイトルSettings右の虫眼鏡アイコンをタップ（クリック）し「lang」と入力します。
すると候補にLanguagesが表示されるのでタップ（クリック）します。
画面上部のタイトル右側にある虫眼鏡アイコンをタップ（クリック）
「lang」と入力すると候補にLanguagesが表示されるのでタップ（クリック）
Languages & Inputが表示されました。
この画面で言語を変更します。
Languages & Input画面
最上段項目のLanguagesをタップ（クリック）します。
Languagesをタップ（クリック）
Add a Languageをタップ（クリック）します。
Add a Languageをタップ（クリック）
画面上部のAdd a Language右側の虫眼鏡アイコンをタップ（クリック）し、検索バーに「ja」と入力します。
すると候補に日本語が表示されます。
Add a Language右側の虫眼鏡アイコンをタップ（クリック）
検索バーに「ja」と入力すると、候補に日本語が表示される
Add a Languageの上に日本語が追加されて画面が戻った
日本語の順位が2になっているので、1のEnglishと入れ替えます。
日本語の右側のハンバーガーボタン（横線三本のアイコン）をドラッグし、1のEnglishの上に持ってくると入れ替わりますので、その状態で手を離すと順位が入れ替わり、日本語が1となります。
日本語の右側のハンバーガーボタン（横線三本のアイコン）をドラッグ
↓
1のEnglishの上に持ってくると入れ替わるので手を放す
↓
順位が入れ替わり1が日本語となる
再起動後にエミュレータの言語設定が日本語になっています。
言語設定に変更が生じたため自動的にエミュレータが再起動する
再起動後は言語設定が日本語になっている
位置情報を変更する
次に位置情報の設定を変更します。
デフォルトでは位置情報がONになっているので、これをOFFにします。
設定の項目「セキュリティ」をタップ（クリック）します。
設定の項目「セキュリティ」をタップ（クリック）
セキュリティ内の「位置情報」をタップ（クリック）します。
「位置情報」をタップ（クリック）
位置情報のスイッチをタップ（クリック）してOFFにする
スリープ設定
次にスリープの設定をします。
デフォルトでは画面が操作されない状態が1分経つとスリープに移行します。
Android Studioでソースコードを書いてる内にスリープしてしまい、実行するときにいちいち電源ボタンを押して起動させるのも手間ですので、スリープへの移行時間を最長にしてしまいます。
設定からディスプレイを選択します。
ディスプレイを選択
スリープをタップ（クリック）
最長の30分を選択
これでスリープが30分後に設定されました。
スリープが30分後に設定された
ここまでで最低限の設定が出来たので、main.dartを実行したいと思います。
エミュレータを常に一番上にする
エミュレータがいちいち画面に隠れるのが鬱陶しい場合は、エミュレータが一番上のウィンドウになるように設定してしまいましょう。
エミュレータ右側に表示されている縦の設定バーの最下部、三点リード「…」ボタンを押下します。
エミュレータ右側に表示されている縦の設定バーの最下部、三点リード「…」ボタンを押下
歯車アイコンのSettingsを選択
Generalタブの右下にある「Emulator always on top」をオンにします。
Generalタブの右下にある「Emulator always on top」をオン
これでエミュレータが常に一番上になります。
変更したい場合はOFFにするだけです。
これで画像の様な形で、エミュレータとAndroid Studioを同時に見られるようになりました。
Android Studioのmain.dartをいじっても、エミュレータは一番上に表示されています。
エミュレータとAndroid Studioを同時に見られる例
他の項目については割愛しますので、各自お好みで設定してください。
main.dartを実行する
エミュレータの設定が終わったので、実際にmain.dartを実行してみたいと思います。
お気付きかと思いますが、Flutterプロジェクトの新規作成時は既に用意されたデモアプリのソースコードが、デフォルトで記述されています。
そのため、開発環境と接続された端末（エミュレータ）があれば即実行出来る状態になっています。
動かすだけであれば、これまでの入門のようにHello,Worldを記述する必要がありません。
ではmain.dartを実行して、デモアプリをエミュレータで動作させてみましょう。
エミュレータはホームボタンを押下して一番最初の画面（起動直後の画面）に戻しておいてください。
先程のAndroid Studio右上の実行ボタン（緑の再生ボタン）を押下します。
Android Studio右上の実行ボタンを押下
プロジェクトやエミュレータが初回実行の場合は、多少時間が掛かりますので、そのまま待ちます。
処理が開始される
プロジェクトやエミュレータが初回実行の場合は多少時間が掛かる
待つと無事にエミュレータにデモアプリが表示されました。
エミュレータにデモアプリが表示された
デモアプリの挙動は、エミュレータの右下にある青い+ボタンを押す度に、中央の数字に1ずつ加算されるというものです。
エミュレータ右下の青い+ボタンを押す度に、中央の数字に1ずつ加算される
デモアプリのソースコードをいじってみる
デモアプリのソースコードを、少しいじってみましょう。
簡単な所だと、アプリのタイトルバーに表示されているアプリのタイトルでしょうか。
これを変更してみましょう。
アプリのタイトルを変更する
エミュレータの画面上部の青い部分がタイトルバーです。
タイトルバーには「Flutter Demo Home Page」と記載されています。
この文言を変更してみたいと思います。
Android Studioのmain.dartのソースコード上では、27行目が該当するようです。
main.dart27行目
ここに記載されている「Flutter Demo Home Page」の文言を「My First App」に変更してみます。
変更する文字列は自由に決めて貰って構いません。
変更の際の注意点ですが、
- 「'」（シングルクォーテーション）と「'」の間に記述があるFlutter Demo Home Pageの文字列のみ変更する
- 変更する文字列が日本語の場合は、日本語を入力する時以外は全て半角英数入力モードにする
この2点だけ、取り敢えず守りましょう。
1つ目はプログラミング上のルールで、「'」（シングルクォーテーション）で囲まれている文字列が、Stringという文字列を扱う命令になっているからです。
「'」が片側だけだったり、文字列なのに「'」が無いのはエラーになります。
2つ目は、ちょいちょいやりがちのミスを防ぐようにするためです。
1つ目の「'」で囲われたFlutter Demo Home Pageの文字列を、日本語で「最初のアプリ」と変更したとします。
すると変更後に半角/全角キーやCapsキーの押し忘れで、入力モードが半角英数ではなく日本語のまま、という事が多々あります。
ソースコードを記述する時は、基本半角英数入力モードで、日本語入力モードは文字列の記述のみ、という癖をつけておきましょう。
では実際に変更してみます。
Flutter Demo Home Pageの文字列を
削除し
My First Appに変更する
変更を保存するため、Ctrl＋Sキーで上書き保存をします。
上書き保存をすると、Android Studioでは即座にホットリロード（Hot Reload）が実行されます。
ホットリロード後はエミュレータの画面が更新され、変更したMy First Appが表示されています。
Ctrl＋Sキーで上書き保存をすると、Android Studioでは即座にホットリロードが実行される
ホットリロード後は変更したMy First Appが反映されている
従来の開発を例に挙げると、ソースコードを変更→上書き保存→手動で画面またはアプリを更新する必要がありました。
言葉を変えるとソースコードの状態とアプリの進捗にズレが生じていました。
これがホットリロードという機能により、ソースコードの状態とアプリの進捗が（ほぼ）一緒になり、ストレス無く開発が可能になったFlutterの目玉と言うか、長所の一つでもあります。
ここで注意点ですが、文末のセミコロン「;」は削除しないでください。
デモアプリがエミュレータで実行されている最中でも、ソースコードの変更がダイレクトにアプリに変更されているのが分かります。
_counter++の++部分はインクリメント演算子と呼ばれるもので、これが付いている変数を1増加させる、という意味を持っています。
では、ホットリロードという長所も実際に体験したところで、もう一ついじってみましょう。
増えるカウンターを減っていくカウンターにする
先程までは、エミュレータ右下の+ボタンを押す度に1ずつ増えていきましたが、今度は逆に1ずつ減るようにしたいと思います。
変更の対象となるのは、main.dartの60行目です。
この_counter++が対象です。
main.dartの60行目にある_counter++を変更する
これを減らす方にしてしまいます。
_counter++の++を--に変更します。
++を--に変更する
この--はデクリメント演算子といい、++のインクリメント演算子のようにデクリメント演算子が付いている変数を1減らす、という意味を持っています。
このセミコロンはその文がここで終了している、という句点の「。」に似た意味を持つものです。
このセミコロンが無いと、プログラムを処理する側はどこが終わりか分からず次の行も処理してしまい、エラーとなってしまいます。
例えば2行の命令があるとします。
- aは2である。（a=2）
- aに3を掛ける。（a*3）
この1行目の句点「。」が消されてしまうと「aは2であるaに3を掛ける。」となってしまい、人間が見ればまだ何となく分かりそうな文ですが、コンピュータからしてみると意味不明な文となり、エラーが発生します。
この位重要なものなので、文末のセミコロンは削除しないよう注意してください。
では++を--に変更したので、Ctrl＋Sで上書きしてエミュレータ右下の青い+ボタンを押してみます。
無事にエミュレータ右下の青い+ボタンを押すと、押した回数だけ数が減るようになりました。
押した回数だけ数が減るようになった
上手く行かないときはmain.dartを停止し、再度実行する
何故か減らずに増えている…、上手く行かないという場合は、一度実行している実行しているmain.dartを停止し、再度実行してみましょう。
ホットリロードも完全に全て更新されるわけではなく、必要に応じてホットリロードが実行されているので、見た目の変化は更新してくれているんだ、くらいに留めておき、ソースコードを変更したのに変更が反映されない場合は、main.dartの所謂再起動をしてあげましょう。
では、一度実行中のmain.dartを停止します。
Android Studio右上の赤い四角の停止ボタンを押下します。
Android Studio右上の赤い四角の停止ボタンを押下
停止すると、エミュレータで実行されていたデモアプリも停止します。
main.dartを停止するとエミュレータで実行されていたデモアプリも停止する
これでmain.dartの再起動が終わりましたので、エミュレータの画面右下にある青い＋ボタンを押してみましょう。
無事、想定した動きになりました。
main.dartを再起動しエミュレータ画面右下の青い+ボタンを押したら、想定通り押した回数分だけ数が減るようになった
お疲れさまでした。
実際に動いている状態を見ると、何だかワクワクしてきますね。
これでFlutter開発のスタートラインに立つことが出来ました。
まとめ
本記事では
- 作成したFlutterプロジェクトをエミュレータで動かした
- エミュレータを操作し設定を変更した
- main.dartを変更しホットリロードを体験した
という事を行いました。
ここまでで、開発を進めるにあたり最低限の準備が整いました。
これからどのように学習し開発を進めていくかは、一歩一歩を踏み締めながら進む開発者それぞれに委ねられるものになります。
楽しいFlutter開発ライフになることを願っています。
無能は当初の予定通り、Flutterで開発したアプリをリリースすることが目標です。
目標達成に向けて頑張っていきたいと思います。
次はVisual Studio CODE（VSCODE）をインストールし、Flutter環境を整えたいと思います。
本記事もご覧頂き、誠に有難うございます。
ではまた。
コメント
コメントを投稿