Flutter 1.2.x 環境をmacOS上に構築する

# なぜこの文章を書いているか？

今までWebアプリばかり作っていたのですが、そろそろスマホアプリも作ってみたいと考え、[React Native](https://facebook.github.io/react-native/)(もしくは[EXPO](https://expo.io/))や[NativeScript Vue](https://nativescript-vue.org/)などつまみ食いしていたのですが、どうもしっくりこない。どうせなら今まで触ったことの無い言語でこれからも使えそうなモノ([Dart](https://www.dartlang.org/))を勉強しながらできるのが良いなと[Flutter](https://flutter.dev/)にたどり着きました。
基本的には[本家サイト](https://flutter.dev/docs/get-started/install)の通りにやっていけば良いのですが、折角なのでメモとして残しておこうと思います。
手順は自分がローカルで行った順番なので、本家サイトとは多少順番が前後します。

# 環境（2019/03/30現在）

* macOS Mojave (10.14.4)
* Xcode 10.2
* Andoroid Studio 3.3.2
* Flutter 1.2.1

# Xcodeをインストールする

Xcodeがインストール済みならスキップしてください

1. 「App Store」アプリを起動し、左うえの検索窓に"xcode"と入力しエンターキーを入れ検索
1. 検索結果一覧の中の「Xcode」を「入手」＞「インストール」でインストールを実行（しばらくかかります）
1. 「Xcode」を起動し、「License Agreement」の内容を確認した上で「Agree」をクリック、パスワードを要求されるので入力し「OK」をクリック、諸々のインストールがさらに始まります
1. 「メニュー」＞「Xcode」＞「Open Developer Tool」＞「Simulator」でシミュレーターが起動する事を確認します

# Homebrewをインストール

## インストール
ターミナルを開き（方法は色々ありますが割愛）、以下を実行

```bash
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
```

* `Press RETURN to continue or any other key to abort`と表示されたら「ENTER」キーを押します
* パスワードを聞かれるのでパスワードを入力し「ENTER」キーを押します
* インストールが終わったら以下を実行し正しくインストールされているか確認します

## インストールを確認

以下を実行し、`Your system is ready to brew.`と出ていればOKです。出なかった場合は画面の指示に従って修正してください

```bash
$ brew doctor
```


# Android Studioをインストールする

## anyenv, jEnvをインストール

```bash
$ brew install anyenv
$ anyenv install --init
$ echo 'eval "$(anyenv init -)"' >> ~/.bash_profile
$ exec $SHELL -l
$ anyenv install jenv
$ exec $SHELL -l
```

## homebrewでversionsをtapする

```bash
$ brew tap caskroom/versions
```

## JDK1.8(java8)をインストールする

```bash
$ brew search java
（前略）
java8
（後略）
$ brew cask install java8
```

## JDK1.8をjEnvにaddする

```bash
$ jenv add $(/usr/libexec/java_home -v 1.8)
oracle64-1.8.0.202 added
1.8.0.202 added
1.8 added
$ jenv versions
* system (set by /Users/user/.anyenv/envs/jenv/version)
  1.8
  1.8.202
  oracle64-1.8.0.202
$ jenv global 1.8
$ java -version
java version "1.8.0_202"
Java(TM) SE Runtime Environment (build 1.8.0_202-b08)
Java HomeSpot(TM) 64-Bit Server VM (build 25.202-b08, mixed mode)
```

## Homebrewを使ってAndroid Studioをインストール

```bash
$ brew cask install android-studio
```

* アプリケーションフォルダの中の「Android Studio」を起動
* "Welcome"画面で「Next」ボタンをクリック
* "Install Type"画面で「Stuandard」を選択し「Next」ボタンをクリック
* "Select UI Theme"画面では好きな方を選択し「Next」ボタンをクリック
* "Verify Settings"画面で内容を確認し「Finish」ボタンをクリック
* ダウンロードが始まりますのでしばらく待ちます
* 途中"Intel HAXM"のインストール時に「機能拡張がブロックされました」と出るので「"セキュリティ"環境設定を開く」ボタンをクリックし「開発元"Intel Corporation Apps"のシステムソフトウェアの読み込みがブロックされました。」と書かれている横の「許可」ボタンをクリックします。

## .bash_profileに`ANDROID_HOME`を設定

```bash
$ echo 'ANDROID_HOME=$HOME/Library/Android/sdk' >> ~/.bash_profile
$ exec $SHELL -l
```

# Flutterをインストールする

## ダウンロード

1. まずは[本家サイト](https://flutter.dev/docs/get-started/install)で`macOS`を選びます
1. zipファイルをダウンロードします（2019/03/30現在 flutter_macos_v1.2.1-stable.zip）。ダウンロード先は`~/Downloads/`とします

## インストール
ターミナルを開き、以下を実行

```bash
$ mkdir ~/development
$ cd ~/development
$ unzip ~/Downloads/flutter_macos_v1.2.1-stable.zip
```

もしくは、Safariでダウンロードしてzipファイルが展開済みであれば以下

```bash
$ mkdir ~/development
$ mv ~/Downloads/flutter ~/development/.
```

## .bash_profileにPATHを追加

```bash
$ echo 'PATH=$PATH:~/development/flutter/bin' >> ~/.bash_profile
$ exec $SHELL -l
```

## `flutter doctor`を実行

```bash
$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.2.1, on Mac OS X 10.14.4 18E226, locale ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    ✗ Android licenses not accepted.  To resolve this, run: flutter doctor
      --android-licenses
[✗] iOS toolchain - develop for iOS devices
    ✗ Xcode installation is incomplete; a full installation is necessary for iOS
      development.
      Download at: https://developer.apple.com/xcode/download/
      Or install Xcode via the App Store.
      Once installed, run:
        sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
    ✗ libimobiledevice and ideviceinstaller are not installed. To install with
      Brew, run:
        brew update
        brew install --HEAD usbmuxd
        brew link usbmuxd
        brew install --HEAD libimobiledevice
        brew install ideviceinstaller
    ✗ ios-deploy not installed. To install:
        brew install ios-deploy
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS platform side's plugin code that
        responds to your plugin usage on the Dart side.
        Without resolving iOS dependencies with CocoaPods, plugins will not work
        on iOS.
        For more info, see https://flutter.io/platform-plugins
      To install:
        brew install cocoapods
        pod setup
[!] Android Studio (version 3.3)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] Connected device
    ! No devices available

! Doctor found issues in 4 categories.
```

## 問題の修正

いくつか問題があるので続いて一つずつ修正していきます

### Android Studioのライセンスを読み、了解（"y"を入力して"ENTER"）します

```bash
$ flutter doctor --android-licenses
```

### xcodeのインストールを完了します

```bash
$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
```

### `libimobiledevice`, `ideviceinstaller`, `ios-deploy`, `CocoaPods`をインストールします

```bash
$ brew update
$ brew install --HEAD usbmuxd
$ brew link usbmuxd
$ brew install --HEAD libimobiledevice
$ brew install ideviceinstaller
$ brew install ios-deploy
$ brew install cocoapods
$ pod setup
```

### Android Studioに`Flutter`と`Dart`のプラグインをインストールします

* Android Studioが起動していなければ起動します
* Welcome画面の右下の歯車アイコンの「Configure」から「Plugins」を選びクリックします
* 下段の「Browse repositories...」をクリックします
* 左うえの検索窓に`flutter`と入力し一覧から`Flutter`を選択します
* 右側に「Install」ボタンがあるのでクリックします
* `Third-party Plugins Privacy Note`を読んで「Accept」ボタンをクリックします
* `Plugin Dependencies Detected`と出て「Dart」プラグインのインストールを薦められるので「Yes」をクリックします
* 先ほどの「Install」ボタンが「Restart Android Studio」となっているのでクリック
* Pluginsウィンドウで「OK」をクリック
* `IDE and Plugin Updates`のモーダルウィンドウは「Restart」をクリックし再起動します

### iOSシミュレータを起動するか、iPhoneなどの実機をUSB接続します

### この状態でもう一度`flutter doctor`を実行します

```bash
$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.2.1, on Mac OS X 10.14.4 18E226, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[✓] iOS toolchain - develop for iOS devices (Xcode 10.2)
[✓] Android Studio (version 3.3)
[✓] Connected device (1 available)

• No issues found!
```

オールグリーンになりました :100: 

# テストアプリを実行してみる

## プロジェクトを作成する

1. Android StudioにFlutterプラグインを入れる事でWelcome画面に追加された「Start a new Flutter Project」というメニューをクリックします
1. "Flutter Application"を選択し（デフォルトで選択されているはずです）「Next」ボタンをクリックします
1. "Project name"など必要な内容を編集して「Next」ボタンをクリックします
1. "Company domain"は自分で持っているドメイン名を入力します。デフォルトでは"example.com"となっています
1. 「Finish」ボタンをクリックします

## iOSシミュレーターを起動する

1. 上段右側のアイコンが並んでいる中に「main.dart」があり、先ほどの手順でiOSシミュレーターを起動していれば、その左に「iPhone XR」等と表示があるのを確認します
1. なければ、その「main.dart」と書かれているプルダウンの左のプルダウンメニューから「Open iOS Simulator」を選択しiOSシミュレーターを起動します

## サンプルアプリの実行
1. iOSシミュレーターが起動できたら、アイコンの列にある実行ボタン（緑色の▶）をクリックし実行します
1. iOSシミュレーターに自動的にFlutterアプリがインストールされ、自動起動し「Flutter Demo Home Page」とタイトルに書かれた画面が表示されます
1. アプリの右下の丸にプラスマークのアイコンをタップ（クリック）すると、中央の数字がカウントアップされます

## Dartを少しだけいじってみる（Hot reloadの実演）

1. iOSシミュレーターとAndroid Studioが並び、どちらかで一方を隠さないように調整します
1. iOSシミュレーターが見えている状態で"main.dart"ファイルの23行目あたりを'Flutter Demo Home Page'から'ホームページ'に書き換え、"main.dart"を保存します
1. 保存した次の瞬間iOSシミュレーター上のアプリのタイトルが「ホームページ」に書き換わるのが確認出来ます

# 終わりに

ひとまずこれでFlutterの開発環境が一通り揃いました。実機でテストするにはもう一手間必要なのですが、今回はまずmacOS上に開発環境を構築する事だけに絞ってみました。この環境を使って色々とアプリを作成していくつもりです :laughing: 

# 参考サイト
* [Flutter公式 : https://flutter.dev/](https://flutter.dev/)
* [Dart言語公式 : https://www.dartlang.org/](https://www.dartlang.org/)
* [Homebrew公式 : https://brew.sh/index_ja](https://brew.sh/index_ja)
* [anyenv公式 : https://anyenv.github.io/](https://anyenv.github.io/)
* [jEnv公式 : http://www.jenv.be/](http://www.jenv.be/)
* [Android Studio公式 : https://developer.android.com/studio/?hl=ja](https://developer.android.com/studio/?hl=ja)
* [Xcode公式 : https://developer.apple.com/jp/xcode/](https://developer.apple.com/jp/xcode/)