『Flutter』とは、Googleが開発したモバイルアプリケーションのSDKです。1つのコードでAndroidとiOSのどちらでもアプリを作成できます。今回は、Flutterの概要やインストール方法、テストアプリの作成方法、学習におすすめの方法についてお伝えします。け】そもそもFlutterとは?まずは「Flutterとは何か?」について、入門者向けにご紹介します。『Flutter』とは、Googleが開発した、モバイルアプリケーションのSDKです。kitの略であり、あるシステムで使えるソフトウェアを作るために必要なサンプルプログラムや技術文書がまとめられたもののことです。Flutterでは、1つのコードでAndroidとiOSのどちらでもアプリを作成できます。1.0」が発表されています。Web」のテクニカルプレビューリリースを発表しました。Flutterはマルチプラットフォームフレームワークへの歩みを着々と進めています。ここではまず、Flutterのメリット・デメリットを見ていきましょう。Flutterのメリットとは?入門する前にチェック!メリット1:ホットリロードを含む柔軟なUIFlutterでは『ホットリロード』が採用され、プログラム内容を修正すると、すぐに画面へ反映されます。コンパイルする手間がかからず開発しやすい仕様となっています。メリット2:わかりやすい開発言語で構築Flutterで使用されているのは『Dart』と呼ばれる言語。DartはJavaScriptの代替言語として登場したこともあり、書式がJavaScriptに似ています。ES2015以降のJavaScriptに触れていればすぐに馴染めるため、学習コストは少ないといえるでしょう。Time)両方のコンパイラをサポートしています。開発時には、アプリケーション実行時にコンパイルして機械語に変換するJITによってホットリロードを使用でき、リリース後は、ビルド時にコンパイルするAOTによって実行にかかる負荷や時間を抑えます。Flutterのデメリットとは?入門する前にチェック!デメリット1:オープンソースライブラリが少ないFlutterは、まだまだリリースされたばかりの新しいフレームワークです。公開されているオープンソースライブラリは多くありません。アプリケーション開発の自由度は、他のフレームワークに比べると制限されます。デメリット2:日本語で書かれた資料が少ない昨今では、Qiitaでの個人開発者の執筆ドキュメントなどが増えてきています。JavaScriptなどと比べると、日本語で書かれた資料はまだまだ多くありません。細かい動作についての情報や、最新のバグ情報などは探しにくいといえます。通知の機能など、OSによって差がある機能については、個別に対応する必要があります。日本語の資料は多くないので、ある程度英語の資料を調べながら対応する必要があります。いざFlutter入門1インストールの方法それでは、いよいよFlutterのインストールについてみていきましょう。1.FlutterをダウンロードFlutterは、公式サイト(https://flutter.dev/docs/get-started/install)からダウンロードできます。対応OSはWindows、Mac、Linux、ChromeOSです。10を例に見ていきます。他のOSについては、公式ガイドを参照してください。2.システム要件確認Windowsにインストールする場合、最低限のシステム要件は以下の通りです。MB必須ツール:下記2つのツールはFlutterインストールに必須です。10であれば初期状態でインストールされています。2.x版については、コマンドプロンプトとPowerShellにてGitコマンドが実行できることをチェックしておいてください。SDKをインストールするFlutterインストールを完了するには、Flutterの開発ツールであるSDKを入手する必要があります。SDK安定版の最新バージョンを入手できます。「Flutter_windows_v(バージョン番号)-stable.zip」と記載されているボタンをクリックしましょう。https://flutter.dev/docs/get-started/install/windowszipファイルを解凍し、任意のフォルダに配置します。今回は、C:\srcを新たに作成し、その配下に回答したflutterフォルダを配置しました。3-2.環境変数『Path』を更新WindowsのコンソールからFlutterのコマンドを実行したい場合は、『Path』という名前の環境変数を更新する必要があります。システムエンジニアの間で「Pathを通す」と呼ばれる作業です。3-2-1.『システム環境変数の編集』を呼び出すまずは、コントロールパネル『システム環境変数の編集』を開きます。スタートからデスクトップ画面右下の虫眼鏡アイコンをクリックし、「env」と入力するとすぐに表示されますので、クリックしましょう。3-2-2.『環境変数』ダイアログを呼び出す表示された『システムのプロパティ』ダイアログで、『環境変数』をクリックします。表示された『環境変数』ダイアログで、上段の『ユーザー環境変数』にて、変数が『Path』となっている項目をクリックし、続いて『編集』をクリックします。SDK格納パス名]\flutter\bin』と入力します。SDKを『C:\src』配下に格納したため、Pathへの入力内容は『C:\src\flutter\bin』となっています。入力が完了したら『OK』をクリックしましょう。3-2-4.問題なく環境変数を更新できているかチェック『環境変数』ダイアログに戻りますので、『OK』で一旦画面を閉じます。続いて、「3-2-1」と「3-2-2」を再度実施します。再度表示された『環境変数』ダイアログにて、変数『Path』をクリックして、『編集』をクリックし、先ほど「3-2-3」で更新した内容が反映されていたら完了です。『キャンセル』をクリックしてデスクトップ画面に戻りましょう。Studioをインストールすると、DartのエディタやAndroidの仮想環境を利用できるようになります。順番に見ていきましょう。Studioをダウンロードしましょう。agree』にチェックを入れ、『OK』で先に進めます。https://developer.android.com/studio/index.htmlダウンロードしたファイルをダブルクリックするとインストールが始まります。Setup』ダイアログにて『Next』をクリック。続いて表示される画面は、何も操作せずに『Next』をクリック。Studioをどこのフォルダにインストールするか設定します。原則として、そのままにしておくことを推奨します。パスはメモ帳などにコピー&ペーストして、記録しておきましょう。メモ帳への記録が終わったら『Next』をクリックします。続いての画面は、スタートメニューに登録する名前の画面です。そのまま『Install』をクリックで問題ありません。インストールが始まります。Completed」と表示されます。表示され次第、『Next』をクリックします。インストールの完了画面が表示されます。Studio』のチェックボックスをクリックしてチェックを外します。チェックが外れていることを確認できたら、『Finish』をクリックします。Studioを起動すると始まります。SDKインストール早速、インストールの手順について見ていきましょう。Studio』をクリックし、起動する。SDKインストール下記セットアップウィザードの画面が表示されるので、『Next』をクリックする。Type』画面が表示されるので、『Standard』のラジオボタンをクリックし、『Next』をクリックする。Theme』画面が表示される。後でも変更できるので、好きな方を選んで『Next』をクリック。Folder』のパスは、コピー&ペーストなどでメモ帳に記録しておくこと。メモ帳に記録したら『Finish』をクリック。SDKのダウンロードとインストールが開始されます。インストールが完了次第、『Finish』をクリック。続いて、ダウンロードしたプログラムが一覧で表示されますので、『Finish』をクリックします。Studioのコマンドを実行するには、『Path』という名前の環境変数の更新が再度必要です。5-2-1.『システム環境変数の編集』を呼び出すデスクトップ画面右下の虫眼鏡アイコンをクリックし、「env」と入力します。すると『システム環境変数の編集』という項目が出てきますので、クリックしましょう。5-2-2.『環境変数』ダイアログを呼び出す表示された『システムのプロパティ』ダイアログで、『環境変数』をクリック。5-2-3.環境変数『Path』を更新する表示された『環境変数』ダイアログで、上段の『ユーザー環境変数』にて、変数が『Path』となっている項目をクリックし、続いて『編集』をクリック。Studioインストールのパスを入力します。5-2-4.問題なく環境変数を更新できているかチェック『環境変数』ダイアログに戻りますので、『OK』で一旦画面を閉じます。続いて、「5-2-1」と「5-2-2」を再度実施します。再度表示された『環境変数』ダイアログにて、変数『Path』をクリックして、『編集』をクリックし、先ほど「5-2-3」で更新した内容が反映されていたらOKです。SDKのパスを登録します。『環境変数』ダイアログで、下段の『システム環境変数』の『新規』をクリック。SDKのパスを登録し、『OK』をクリックします。続いて、「5-2-1」と「5-2-2」を再度実施します。再度表示された『環境変数』ダイアログにて、項目『システム環境変数』に、「5-4」で追加した『ANDROID_HOME』が存在すればOKです。6.Flutterをインストールするここからは、Flutterをインストールする作業に入ります。doctor』を実行すると、Flutterインストールにあたって現在のシステム状態を調査してもらえます。6-1-1.コマンドプロンプトの立ち上げWindowsキーを押しながら『R』キーを押すと、『ファイル名を指定して実行』ダイアログが立ち上がります。『cmd』と入力し、『OK』をクリック。doctor』と入力し、『enter』キーを押す。categories.このような形で結果が出力されます。今回の実行では、上記のような結果となりました。doctorの実行によって問題と判断された箇所です。6-1-3.問題への対処それでは、問題と判断された内容について、上から順番にみていきましょう。toolchain』は、プログラムソースをAndroid版へコンパイルする際に必要となるツールです。toolchainを利用するためには、ライセンスのacceptが必要になります。–android-licenses』コマンドの実行が必要です。–android-licenses」とコマンドをうち、『Enter』キーを押して実行してみましょう。(y/N)』と聞かれますが、全て『y』キーを押して『Enter』キーを押し、進めていけば問題ありません。toolchainのライセンスacceptは完了です。doctorを実行してみましょう。toolchainの[!]が消えています。Studioの[!]については、あとでFlutterとDartのプラグインをインストールするため、一旦無視して問題ありません。deviceの[!]については、単に開発用の機器が何も接続されていないというだけのエラーなので、こちらも無視で問題ありません。6-2.FutterとDartのプラグインをインストール先ほど問題となっていた、FlutterとDartのプラグインをインストールしていきます。Studio』をクリックして起動します。Studio』をクリック。Activity』をクリックして『Next』をクリックしましょう。project』ダイアログでは、変更は必要ありません。『Finish』をクリックしてすすみましょう。すると、プロジェクト画面が立ち上がります。メニューバーの『File』をクリックし、項目の中から『Settings...』をクリックしましょう。表示された『Settings』ダイアログの中で、『Plugins』をクリック。画面右上部で『Marketplace』が選択されていることを確認し、検索バーに『Flutter』と文字を打ちます。検索が自動で開始され、Flutterの文字を含むプラグインが表示されますので、『Flutter』の『Install』をクリックしましょう。Note』ダイアログが立ち上がります。内容を確認し、問題なければ『Accept』をクリック。Detected』ダイアログが立ち上がります。Dartのプラグインを同時にインストールしてよいかどうか、という内容のため、『Yes』をクリックしましょう。『Settings』ダイアログに表示が戻ります。Updates』が立ち上がります。『Restart』をクリックすると、エディタが再起動します。World」と画面表示されるまでの動作をみていきましょう。Project...』をクリックしましょう。Studio』をクリックして起動し、先ほど作成したプロジェクト『MyApplication』を開きます。Project』ダイアログが立ち上がります。Application』をクリックして、『Next』をクリックします。application』画面が表示されます。SDK』をクリックします。SDK』ダイアログが立ち上がります。SDKをインストールするため、『C:\』をクリックし、『OK』をクリックします。SDKのインストールが開始され、画面下部に作業状況が表示されます。そのままインストール完了まで待機します。Path』のグレーアウトが解除されます。『Next』をクリックし、次へ進みましょう。続いての画面は何も変更は必要ないので、『Finish』をクリック。Flutterの新しいプロジェクトが立ち上がります。2.仮想Androidデバイスの作成FlutterにはAndroidエミュレータ機能がついています。そのため、Androidの実機がなくても、ある程度のプログラムデバッグを実施できます。CPU仮想化機能の有効化Androidエミュレータを動かすには、CPU仮想化機能の有効化が必要です。CPU仮想化機能の有効化は、パソコンのBIOSメニューから設定します。パソコンの種類ごとに細かい操作が違うため、ご自身のパソコンのマニュアルをご参照ください。2-2.仮想Androidデバイスを作成それでは、ここから仮想のAndroidデバイスを作成していきます。Manager』ダイアログが立ち上がります。Device』をクリック。Hardware』画面が表示されます。ここでは、仮想Androidデバイスの機種を選択します。10』をクリックし、『Next』をクリック。Image』画面が表示されます。ここでは、Androidのバージョンを選択します。10.0』の『Download』をクリックしました。Installer』画面が表示され、Androidのインストールが進行します。Androidのインストールが終了すると、画面下部に『Done』と表示されます。『Finish』をクリック。10.0』をクリックし、『Next』をクリック。Device(AVD)』画面が表示されます。ここでは何も操作は必要ないので、『Finish』をクリックします。Devices』の画面が表示されます。ここから『HAXM』のインストールにうつります。Managerの略で、読み方は「ハクサム」もしくは「ハクセム」です。Androidエミュレータのハイパーバイザーとして稼働し、Androidエミュレータの動作を高速化します。haxm』をクリック。『HAXM』ダイアログが立ち上がります。メモリは最初から推奨値が設定されているため、今回は何もせず『Next』をクリックします。HAXMのインストールが始まります。そのままインストール完了まで待機します。HAXMのインストールが完了すると、画面に『Done』の文字列が表示されます。『Finish』をクリックして次に進みます。すると、デスクトップに次のような形で、仮想Androidデバイスが表示されます。World」と表示させてみましょう。World」と書き換えましょう。times.:」の両端にあるシングルクォートは消さないように注意してください。World」と表示されました。ここまで実際にやっていただいた方はわかるかもしれませんが、仮想Androidデバイスを稼働させると、当然ですがパソコンの動作は重くなります。実際に開発をする際には、Androidデバイスの実機を接続して開発した方がスムーズでしょう。最後に、Flutter入門者が取り組みやすい学習方法についてみていきましょう。Udacityの講座(Googleによる英語の基本講座。無料)UdacityはGoogleが開講している基本講座。Flutterの基本講座も存在します。費用は無料なのが嬉しいポイント。英文ですが、英語が問題なく読めるなら、ぜひチャレンジしてみましょう。Udacityのアカウントを作成すれば、すぐに学習を開始できます。効率的なツールの使い方、効果的な開発手法を学べます。Webサイト(レイアウトや複雑なアプリの作り方など。)Flutterについて詳細に説明がなされているWebサイトはいくつかあります。Flutterは新しいフレームワークであるため、他のフレームワークに比べると、日本語で詳細に言及されたサイトは少ないのが実情です。英文の資料ではあるものの、Flutter公式のcodelabを参照するのが、現状では一番の近道といえるでしょう。本(日本語あり)Flutterについての書籍は、日本語のものも含めていくつか出版されています。中には入門レベルの書籍もあり、とりあえず始めてみたい!という方におすすめです。どんな書籍でも説明が不十分な部分が存在するのは事実。記載されている内容がわからずに先に進めなくなってしまうこともあるため、他の学習方法と組み合わせるのがベストでしょう。オンライン学習(Udemyなど)使い方を含めて確実に学習していくなら、オンライン学習が効果的です。UdemyではQ&Aフォーラムが用意されているので、講座の内容について不明点が出てきても質問できます。さまざまな講座が開講されており、日本語のプログラムも、少数ですが存在します。worldの文字列を出力するまでを実施してみました。Flutterは開発環境の構築に多少の手間がかかります。ひとたび開発を始めれば、ウィジェットを並べていくだけでアプリを完成させることもできる魅力的なフレームワークです。その簡単さから、初心者でも開発に参加しやすいフレームワークといえるでしょう。Flutterについての無料の学習サイトや、日本語の入門書はいくつか存在します。新しいフレームワークではあるものの、誰でも学習を始めやすい環境は整っています。Flutter入門したい!という方は、この記事を参考に、ぜひトライしてみてください。初心者向けの人工知能と機械学習のコース。利用規約お問い合わせ。