無能がFlutterを独学し始める話【3/5：必要なファイルをDL・インストールする】3/5-1：Android Studioをインストールする
本記事をご覧いただき、誠に有難うございます。
投稿主の無能と申します。
前回はFlutter SDK（任意フォルダ\flutter\bin）にPathを通しました。
今回はFlutterの開発に必要なツール（ファイル）群をDLして、設定まで進めたいと思います。
今回はFlutterの開発に必要なツール（ファイル）群をDLして、設定まで進めたいと思います。
必要なものは「flutter doctor」で教えてくれる
先ずは前回同様に、コンソールを開き、半角英字小文字で「flutter doctor」と入力しEnterキーを押下します。
「flutter doctor」は公式でも開発環境の構築手順として紹介されている、所謂診断ツールのようなものです。
「flutter doctor」は公式でも開発環境の構築手順として紹介されている、所謂診断ツールのようなものです。
注意点
文字列の羅列だと判りにくいのですが、大体は単語と単語の間には様々な記号で、単語動詞に接続の意味を持たせます。
今回であれば、「flutter」と「doctor」の間には、半角英数のスペース（空白）が入っています。
今回であれば、「flutter」と「doctor」の間には、半角英数のスペース（空白）が入っています。
単純にコンソールに「flutter」と入力・Enterキー押下だけでは、Flutterで使用できるコマンドが表示されるだけになります。
この様に、「起動させるアプリ」と「目的」、そして「目的地」を設定して、初めてアプリは望んでいる動作を実行するようになります。
起動させるアプリだけでは、目的及び目的地が明確に指定されていないので、抽象的な「今できる動作」を行うだけしかしません。
今回は、「flutter」と「doctor」をスペース（空白）で繋いで命令を実行させることで、「Flutterの診断を実施してください」という命令になります。
「flutter doctor」を実行する
今から実行する「flutter doctor」という命令は、「インストールした（Pathを通した）Flutter SDKの診断」という実行命令になります。
差し詰め、スペース（空白）は接続の「の」に該当するような形です。
言い換えるとするなら「flutterのdoctorというコマンドを実行しなさい」という命令文になります。
どのプログラミング言語に於いても、重ねての注意点となりますが「大体は単語と単語の間には様々な記号（スペースも記号に含む）で、単語動詞に接続の意味を持たせる」ということだけ認識していれば、格段にコードを読みやすくなったり、過不足が分かりやすくなったりします。
また、記述されたソースコードも、そのプログラミング言語に於ける慣習のようなものがあり、その慣習に従って記述されているものが殆どで、その慣習があることにより意味が通じる場合があります。
ですので、ご自身が学んでいるプログラミング言語に対して（公式設定の）手順や慣習が存在しているなら、それに従ってください。
慣習に従うことで、自分以外の方に共有しやすくなるという、とても大きなメリット（見返り）があります。
以上の注意点を踏まえて、以降の記事をご覧ください。
flutter（半角英字のスペース）doctor
と入力してEnterキー押下
このメッセージは、現在お使いのPCにあるFlutter SDKのバージョンより、新しいバージョンがあるという通知になります。
必要に応じ最新バージョンを入手してから診断を開始しても問題ありません。
（最新版の入手は「flutter upgrade」でEnter押下）
診断中
因みにですが、Flutterは可能な限り最新版を入手してから診断を行うことを推進します。
理由としては
- 最新版で診断を行う方が過去発生している問題点をクリアしている
- 今後発生するであろう、推奨・非推奨の問題は最新盤の現時点で発生しない
- 過去のバージョンに無い新機能を使うことができる
等々、メリットの方が大きいからです。
※但し使用しているプラグイン等が最新版にマッチしていることが前提となるため、プラグイン等に応じてバージョンを調整する必要がある
プラグイン等のバージョン対応等と相談しながら、極力最新版を入れておくようにしましょう。
すると、診断結果が表示されます。
診断結果の例
※発生している問題に応じて最終行の「isuues in 〇 category（ies）」の〇部分が変化します
診断結果から、現在は3項目が完了している（レ点のチェックがあり緑色になっている）状態で、残りの2項目は1つが赤色で×印、もう一つは黄色で注意項目のようになっています。
先にクリアしている項目を見ておき、その後に現在問題となっている項目を見る、という形で、これら5つの項目をそれぞれ見ていきましょう。
クリアした項目は？
Flutter SDKをインストールする
これは最上段（1つ目）の項目ですが、言わずもがなFlutter SDKをDL・解凍し、移動して「任意フォルダ\flutter\bin」にPathを通しました。
Flutter SDKにPathを通したことで、正常にFlutterが起動し、現在お使いのPCにインストールされているFlutterバージョンが表示されています。
そもそもチェック以前に「Flutterが起動していること」が、既に条件クリアしている証左になっていますね。
そもそもチェック以前に「Flutterが起動していること」が、既に条件クリアしている証左になっていますね。
Google Chromeがインストールされている
これは大半の方がクリアしているかと思いますが「Google Chromeブラウザをインストールしている」ことがクリア条件となります。
無能も普段使いのブラウザはChromeであるため、Flutterのインストール前に条件をクリアしていることになります。
この「Chromeのインストール」が項目になっている理由として考えられるのは、Flutter自体がクロスプラットフォームでWeb開発可能であるため、Web開発に有用な自社製品であるChromeを開発環境の一部として捉えている、というのが挙げられます。
F12キー押下のワンボタンだけで現在の表示ページをデバッグ環境に移行出来たりと、一般ユーザーやChrome開発者含め様々な機能が網羅されているから、と無能は考えます。
接続済みデバイスが存在する
Flutterをインストールしたお使いのPCに、既に実機或いは仮想デバイス（エミュレータ）が接続されている状態になっていることがクリア条件となります。
無能の場合は、実機とエミュがそれぞれ1台ずつ使用PCに繋がっている状態になりますので、この項目もFlutterインストール前にクリアしている状態になっています。
因みに実機の接続状態というのは、USBケーブルで直繋ぎして繋いだ端末のドライバをインストールしただけでは無く、PC側で動作を一部制御出来るようにするためのその他の諸設定が必要になります。
接続済みデバイスについては、後々エミュレータを作成するので、自ずとクリア済みになると思います。
環境に応じて、クリア済みであったり未接続になっていたりと、各々の状況に沿っている状態なので、ここでは無能は条件クリアとして紹介させて頂きます。
ではこの診断結果を踏まえて、公式の公式手順を見ていきましょう。
Android Studioをインストールする
2項目めのところは一旦飛ばして、本記事のメインとなる4項目めのAndroid Studioのインストールを先にクリアしたいと思います。
理由は幾つかありますが、先にAndroid Studioをインストールした方が分かりやすいと考えたためです。
こちらは非常に簡単です。
Flutterをインストールした時よりも簡単で、インストーラーに従っていくだけです。
では実際にAndroid Studioをインストールしていきましょう。
開発環境って何？
開発環境とは、（その目的のプログラミング言語やフレームワークなどに於いての）便利ツールの詰め合わせだと思っていただいて問題ないです。
この開発環境は、統合開発環境（以下IDE：Integrated Development Environmentの頭文字）と呼ばれており、文字通り（目的のプログラミング言語・フレームワークなどの）開発するための様々な便利ツールをまとめ、扱いやすくしたものです。
寧ろIDEが無いと開発出来ない…と言えば語弊があるかも知れませんが、ほぼ開発に必須と同等、の意味合いになると思います。
Android StudioのDL
ではAndroid StudioをDLしましょう。
「Android Studio」と検索するだけで、該当のサイトが見つかります。
Android Studio公式ページ：https://developer.android.com/studio
検索の最上位に表示される
Android Studioの公式サイト
すると利用規約が表示されますので、最下部の同意にチェックを入れます。
チェックが入るとDLボタンがアクティブになるので、ボタンを押下してDLします。
Android Studioの利用規約
最下部の同意のチェックボックスにチェックを入れる
グレーだったボタンがアクティブになるので、そのままDLする
DLが開始される
後はDLが完了するまで待ちます。
サイズは現バージョン（2020.3.1.26）の時点で約915MBとなっています。
大体10～15分程度でDLが完了するかと思います。
インストーラーを起動する
DLが完了したら、インストーラーを起動します。
DLが完了したら、Android Studioのインストーラーを起動する
ここでインストールに関して許可をWindowsから聞かれますので、「はい」を選択してインストーラーの起動を続行します。
Android Studioのインストーラーが起動した
（起動時にWindowsよりインストールの許可の可否を求められるので「はい」を選択）
次の項目では、Android Studio本体と一緒にインストールするコンポーネントを選択します。
無能のPCの画面上では「Android Virtual Device」のみが表示されています。
この「Android Virtual Device」というのは、Android端末をお使いのPCに疑似的に構築して動作させる「仮想デバイス」と呼ばれるものです。
この仮想デバイスは、一般的に「エミュレータ」と呼ばれています。（以下エミュレータまたは略してエミュ）
このエミュレータは必須になると思います。
普段の開発でも、わざわざ実機を繋げなくともエミュを使用することで、ノートPC1台だけでFlutter開発が出来るようになります。
「実機を繋ぐから必要ないな」と思われるかも知れませんが、ご自身が所有している限られた1台の端末だけが使われる前提で、他の見ず知らずの第三者が貴方の作成したアプリを使用するでしょうか？
答えはNoで、様々なユーザーが、様々な端末で使用することを開発者としては望んでいるはずです。
そのため、貴方の所持している1台（または複数台）のAndroid端末で、動作検証、デバッグ、UIの相違をどの様に解決するかなど、実際に想定の端末を使用したまたは実機に近いスペックの端末を使用した、膨大な数の細かな確認が行えるでしょうか？
これも答えはNoになると思います。
そこで、この問題を解決出来るのがエミュレータとなります。
様々な端末や仮想デバイスのスペックなど、ある程度のことは仮想デバイス作成時に設定出来ます。
その作成したエミュレータを基に、上記の検証が幅広く実施できるようになります。
ということで、実機を持っている方でも「Android Virtual Device」にチェックを入れてエミュを作成可能な状態にして次に進みます。
インストールするコンポーネントを選択
（上記では「Android Virtual Device」のみ）
特に必要が無い場合は、デフォルトのままで次に進みます。
変更が必要な場合は、テキストボックスに絶対Path（大元のWindowsが入っているドライブ（ここではC:）から始まる行先を一意に指定したPath）を入力するか、右側の「Browse…」ボタンを押下しインストール先を指定します。
インストール先を選択
特に問題ない場合は、デフォルトのままで「Install」を押下します。
変更する場合は中央のスタートメニューのフォルダを操作します。
またショートカットが必要無い場合は、ウィザード下部の「Do not create shortcuts」にチェックを入れ、「Install」を押下します。
「Install」を押下するとインストールが始まります。
インストールが完了しました。
スタートメニューへのショートカット登録先を選択
（ショートカット不要の場合は下部の「Do not create shortcuts」にチェックを入れる）
Android Studioのインストール中
そのまま次に進みます。
Android Studioのインストールが完了
インストール完了画面になりました。
ここで、ウィザード終了と同時にAndroid Studioを起動する場合は、「Start Android Studio」にチェックが入ったままで「finish」を押下します。
ウィザードを終了して、任意のタイミングでAndroid Studioを起動する場合は、チェックを外して終了してください。
インストール完了画面
Android Studioの起動
インストール完了画面で「Start Android Studio」にチェックを入れているので、ウィザード完了後にそのままAndroid Studioが起動します。
Android Studio起動画面
（バージョンにより異なる）
インストールが終わったAndroid Studioを起動すると、以前にAndroid Studioを起動していた場合のセッティングをインポートする（引き継ぐ）かどうか聞かれます。
今回はインストールが初回で引き継ぐ設定は無いものとして、デフォルトで選択されている「Do not import settings」を選択します。
もし以前にインストールしたことがあり設定を引き継ぐ場合は、上段の「Config or instllation directory」を選択し、対象のファイルをウィザードに指定します。
「Do not import settings」を選択する（デフォルト）
するとGoogleのプライバシーポリシーに従って、第三者情報としてどの様なAndroid Studioの使われ方がされているか等の情報収集の協力についての確認項目が表示されます。
デフォルトではGoogleに送信を行うようになっています。
特に問題がなければそのまま「Send usage statics to Google」を押下します。
もし問題があれば「Don't send」を押下します。
どちらでもAndroid Studioの操作には問題ありません。
（このダイアログのスクショを取り忘れました…ご容赦ください。）
これで「Welcome」の画面が表示されました。
Welcome画面が表示された
「Next」を押下し、次に進みます。
次にAndroid Studioのセットアップについての項目が表示されます。
セットアップについてのウィザード
この項目では、一般的に使われている共通の項目でセットアップする「Standard」と、細部まで自分好みにしたい「Custom」が選べます。
無能はStanderdを選択しますが、お好きな方を選んでください。
次は、UIの選択画面になります。
無能は明るいと目が疲れるので、暗めの「Darcula」を選択します。
UI選択画面
「Darcula」を選択
問題なければ、そのまま「Finish」を押下します。
セッティング項目・追加インストールの確認
追加コンポーネントのDL・インストール
そのまま追加コンポーネントのインストール完了を待ちます。
全て完了すると、インストールした追加コンポーネントの詳細が表示されますので、確認して「Finish」を押下します。
インストールした追加コンポーネントの詳細が表示される
無事にAndroid Studioが起動しました。
Android Studioが起動した
実際に「New Project」を押下して新規プロジェクトの一覧を見ても、Flutterの項目が影も形もありません。
えぇ…折角Android Studioをインストールしたのに…
すると、インストール可能なプラグインが表示されます。
この膨大な中から探すのも面倒なので、検索しましょう。
すると、検索ワード（ここではflutter）に関連したプラグインに絞って表示されます。
となりそうですが、あと一手間を加えるだけです。
Android StudioへFlutterプラグインを追加する
元々Android Studioは、Java言語でAndroidアプリを開発するためのIDEとしてその存在を知らしめてきました。その途上でFlutterというものが開発されたため、IDEの初期機能としては組み込まれていません。ですので、Flutterのプラグインを追加することで、Android StudioというIDEで開発可能になる、という状態になっています。
因みにプラグインとは？という話になりますが、簡単に言えば機能拡張のソフトウェアのことで、所謂コンセントと同じ意味合いです。
和訳では差込口とされていますが、IT用語だと「アプリケーションを拡張する小さなソフトウェア」等と定義されることが多いです。
要は自前のモノだけでは足りないので、後付けで機能を増やすためのコンセントのようなものだと捉えていただければ良いかと思います。
では早速、Flutterプラグインを追加していきましょう。
左側項目の「Plugins」を選択します。
左側「Plugins」を選択
インストール可能なプラグインが表示される
中央上部にある検索バー「Type / to see options」と書かれたところに「flutter」と入力します。
検索バーに「flutter」と入力
そのまま検索の最上位で表示されている「Flutter」を選択しインストールを押下します。
「Flutter」を選択して「Install」を押下
こちらも特に問題が無ければ「Accept」で進みます。
サードパーティ製プラグインの個人情報取り扱いについての注意
問題なければ「Accept」で進む
次に、Flutterプラグインのインストールに際して「Dart」のプラグインが要求されているので、インストールしますか？と問われます。
DartとはFlutter開発で使用されるプログラミング言語のことで、Flutter開発には必須となります。
Android Studioのプラグイン追加の際にFlutterを追加すると、自動でDartもセットで追加インストールする必要がありますので、そのまま「Install」を押下します。
「Dart」プラグインの追加インストールについて確認
必須プラグインとなるためそのまま「Install」押下
そのまま「Restart IDE」を押下してAndroid Studioを再起動します。
追加したプラグインを有効にするため「Restart IDE」でAndroid Studioを再起動する
Flutter・Dartプラグインが有効になり、Flutterの新規プロジェクトが作成可能になった
これでAndroid Studioのインストールが完了しました。
まとめ
本記事では
- Android StudioをDL・インストールして、起動することを確認した
- FlutterとDartのプラグインを追加して、Flutterの新規プロジェクトが作成可能になった
という事を行いました。
次もAndroid Studioでの設定になります。
実際に使用するAndroid仮想端末（エミュレータ）の設定をしていきます。
本記事をご覧頂き、誠に有難うございます。
ではまた。
コメント
コメントを投稿