第4回：開発環境の構築

第4回の講義では、クロスプラットフォームUIフレームワークの一つであるFlutterの開発環境を行います。

第4回の目標

Flutterのサンプルアプリを自身のPC上で実行できること

Flutterとは？

Flutterは、モバイル・ウェブ・デスクトップ・組み込みデバイス向けの美しいネイティブアプリケーションを単一のコードベースから構築するためのUIツールキットです。

Flutterの構成

FlutterとネイティブアプリのUI開発の違い

これまでの伝統的になGUI（UIボード）を使ったアプリのUI開発と、Flutterのホットリロード機能を使った開発方法の違いを紹介します。これまでの方法では、UIボードとそれに紐づいた動作を設定するのが複雑かつ、UIを更新するために毎回アプリのビルドが必要でした。一方のFlutterに実装されたホットリロード機能を使うことで、UIだけであれば即座に変更部分を反映することができます。また全てUIをコードベースで生成し、UIコンポーネントと動作を容易に紐付けることができます。

伝統的なGUIを使ったUI開発

Flutterを使ったコード＆ホットリロードベースのUI開発

もっと試したい人はこちらへ

環境構築

Flutter環境構築は、Flutterの公式ホームページのセットアップガイドに従って行います。 Flutterは、WindowsとmacOS、Linux、ChromeOSをサポートしています。今回の講義では、VSCodeをIDE(統合開発環境)として開発を行います。

ただしiOS端末（iPhoneやiPad、iPod）にアプリをリリースする場合は、macOSが搭載されたPCが必要になりますので、macOSの方以外はiOS端末にアプリを直接インストールできません。

注意：OSのバージョンやライブラリのバージョンによって、不具合が発生する場合があります。その場合は、GitHub IssuesやStackOverflow等の開発者コミュニティに対処方法が記述されている事がほとんです。Flutterはオープンソースで運用されています。プロジェクトを使うだけでなく、問題が発生した場合は、コミュニティに報告するや解決策を提案するなど、これを機会に是非コミュニティに貢献してみてください。報告するだけ・質問するだけでも大きな貢献です。

インストールページ

macOSへのインストール

Flutterの公式ページを参考に開発環境のセットアップを行なってください。

AppStoreからXcodeをインストール（かなり重たいので注意！）
ターミナルを開きます
- ターミナルはアプリ検索画面に、”Terminal”もしくは”ターミナル”と入力すれば表示されます。
Homebrew(macのパッケージ管理ソフト)をMacにインストールする
- インストール方法は、環境によって異なるので、必ずHomebrewのホームページに行って確認してください。
  - Homebrewのホームページ：https://brew.sh/index_ja
- 2022年11月20日時点では、以下のコマンドをターミナル上で実行することで、インストールできます。/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
Ruby(プログラミング言語)をHomebrew経由でmacにインストールする（2022年11月27日に修正）
- ターミナルを開き brew install ruby コマンドを実行
- Rubyは初期からインストールされていますが、バージョンが古い（v2）ので、最新版のrubyをインストール
cocoapods（iOS用のライブラリ管理ソフト）をインストール
- ターミナルを開き~~sudo gem install cocoapods~~brew install cocoapodsコマンドを実行しインストール（2022年11月27日に修正）
- cocoapodsの公式ドキュメントには、gemを利用してインストールするように書かれているが、うまくインストールできない事例が多い
最新版のFlutter SDKをウェブからダウンロードします。
ターミナルを起動し、ダウンロードしたZIPファイルを解凍します。
- 解凍後にflutterというフォルダが生成されます。これがSDKの本体になります。
```
 unzip ~/Downloads/flutter_macos_2.8.0-stable.zip
```
解凍したフォルダ(flutter)をホームディレクトリに移動します。
```
 mv ~/Downloads/flutter ~
```
Flutter SDKへのパスを追加します。（ホームディレクトリ以外に設置した場合、ここの設定が違う可能性があります。）
```
 echo 'export PATH=$PATH':"`pwd`/flutter/bin" >> ~/.zshrc
 source ~/.zshrc
```
Futter SDKのパスが正しく設定されているか確認します。
- which flutterと入力し、/Users/[ユーザ名]/flutterと表示されることを確認。
- flutter コマンドを実行し、マニュアルが表示されることを確認。
Flutter開発用の統合開発環境（IDE）として、Android Studioをインストールします。
- 最新版のIDEは、Android Studioのウェブサイトからダウンロードできます。環境に合ったバージョンのAndroid Studioをダウンロードしてください。
- Android Studioのウェブサイト：https://developer.android.com/studio?hl=ja
- Android Sutdioの利用方法、および設定については、第5回授業で詳しく行います。

Windowsへのインストール

必ずFlutterの公式ドキュメントを参考に進めてください。

最新版のFlutter SDKをダウンロード、ダウンロードしたZIPファイルを解凍します。解凍後にflutterというフォルダが生成されます。これがSDKの本体になります。
生成されたflutterを任意の場所に移動させます。今回は、ホームディレクトリに設置します。（今回は、Cドライブ直下にsrcという名前のフォルダを作成し、その中に解凍したFlutter SDKを設置します。）
システム環境設定を開き、環境変数のウィンドウを開きます。
Pathを選択し、¥src¥flutter¥binを追加し、OKボタンを押します。（src以外の場所に設置した場合、ここの設定が違う可能性があります。）
Flutter開発用の統合開発環境（IDE）として、Android Studioをインストールします。
- 最新版のIDEは、Android Studioのウェブサイトからダウンロードできます。環境に合ったバージョンのAndroid Studioをダウンロードしてください。
- Android Studioのウェブサイト：https://developer.android.com/studio?hl=ja
- Android Sutdioの利用方法、および設定については、第5回授業で詳しく行います。

SDKのインストール状態の確認

設定が完了しているかを確認するためには、ターミナルまたはパワーシェル上でflutter doctorを入力し、設定状態を確認します。以下のような表示が出れば設定は完了しています。OSの種類のよって表示される内容は異なります。設定が正しい場合

設定に何かミスがある場合は、以下のスクリーンショットのように警告が発生します。今回の場合は、Cocoapods（iOSのライブラリ管理ソフト）がインストールできていないので、該当するソフトウェアを正しくインストールすることで解決します。 (具体的には、ターミナル上でsudo gem install cocoapodsでcocoapodsライブラリをインストールすることで解決します。) 設定が正しく無い場合

flutterコマンド自体が認識されない場合は、flutter SDKへのPATH（パス）が通っていない可能性があります。前回の授業資料、及びFlutter公式のインストールページを参照してください。

NOTE: Android sdkmanager not found.と表示される。

サンプルアプリの作成

Flutterのコマンド（flutter create [プロジェクト名]）を利用してFlutterのプロジェクトを作成します。

コマンドの代わりに統合開発環境（IDE）上で同様の操作もできますが、動作確認だけであれば不要なので、一旦コマンドのみで動作確認を行います。

[プロジェクト名]を任意の名前に変更します。今回はmy_appを作成します。
```
 flutter create my_app
```
cdコマンドでプロジェクトに移動します。
```
 cd my_app
```
flutter runコマンドを使って、プロジェクトを実行します。
```
 flutter run
```
以下のような画面が表示できれば成功です。（表示される画面は選択したプラットフォームによって異なります。）

Date: October 11, 2021

Tags: