Flutter学習1日目 -公式を読む 1. インストール編-

**※自分の学習記録のメモとしてこの記事を書いています。**

新しい技術を学ぶにはとにかく公式ドキュメントを読めと言われます。
今回もFlutterに関して知識0ですがとりあえず公式を読むところから始めます。

公式を読んだ後は良さげなロードマップを引いてくださっている方がいたので、これに従ってUdacityのFlutterコースやっていこうと思います:point_down:
[Flutterの効率良い学び方](https://medium.com/flutter-jp/flutter-learning-c5640c5f05b9)

## インストール
[Install](https://flutter.dev/docs/get-started/install)ページからmacOSを選択。
![screencapture-flutter-dev-docs-get-started-install-2020-07-30-05_16_38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62182/11ecce58-99f2-27b1-1b3f-648abc27f924.png)

## Flutter SDKを入手
### 1. Git Hubからclone
公式の場合はdevelopフォルダになっていますが、私の場合はworksというフォルダで展開します。

```bash
cd ~/works
git clone https://github.com/flutter/flutter.git
```
実行すると展開するまでに少し時間がかかります。

### 2. flutterツールをパスに追加する
後で永続的にパスの更新をするので先に永続的にパスを更新するのでもいいかも。

```bash
export PATH="$PATH:`pwd`/flutter/bin"
```
※実行しても特に反応は返ってきません。

公式だと4の手順で、「オプションで、開発バイナリを事前にダウンロードします。」とありますがオプションなので一旦スルーします。
これでFlutterコマンドを実行する準備が整いました。

## flutter doctorを実行
```bash
flutter doctor
```
を実行してセットアップに必要なインストールする必要のあるソフトウェアやタスクがあるか確認します。
![スクリーンショット 2020-07-30 5.41.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62182/9c0bd5ad-9a91-0c72-4e0d-65531555ecfb.png)

私の場合はこんなエラーが出ました。

``` bash
[✗] Xcode - develop for iOS and macOS
    ✗ 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
        sudo xcodebuild -runFirstLaunch
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin
        code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To install:
        sudo gem install cocoapods
```
エラー内容
- Xcodeのインストールが不完全
- CocoaPodsがインストールされていない

この2点を解消します。

### Xcodeのインストールが不完全
私の場合はもう既にXCodeはインストール、アップデートもしてありました。
念の為App Storeを開きますがやはりアップデート済みのようです。

![スクリーンショット 2020-07-30 5.53.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62182/48006b29-f058-1690-56b0-53a14dcd02e7.png)

なのでインストールは飛ばして下記コマンドを実行します。

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

調べてみたら上がパスを通すコマンド、下が追加コンポーネントをインストールするコマンドでした。
※iOS開発経験が無いのでよくわかってない:older_woman:


### CocoaPodsがインストールされていない
言われた手順通り、

```
sudo gem install cocoapods
```

を実行します。
![スクリーンショット 2020-07-30 5.57.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62182/c8ad24b0-8984-8cb1-eeb1-ad2c5ce2c5c2.png)

色々インストールされたみたいです。

### エラーが解消されたか確認

もう一度flutter doctorを実行してエラーが解消されたか確認します。

```bash
flutter doctor
```

![スクリーンショット 2020-07-30 6.10.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62182/f73204e8-0552-dcf2-068b-3804210d7507.png)

warningはまだあるもののエラーは解消されたみたいです。

## パスを更新
[公式](https://flutter.dev/docs/get-started/install/macos#update-your-path)の記述通りコマンドを実行したところ、ウィンドウを閉じるとパスがちゃんと通りませんでしたのでこちらはオリジナルになります。

```
open $HOME/.bash_profile
```
でファイルを開き、

```
export PATH=[Flutterのgitリポジトリのクローンを作成したパス]/flutter/bin:$PATH
```
を追加して保存。
私の場合は~/worksにクローンしたので、`export PATH=~/works/flutter/bin:$PATH`になります。

```
source $HOME/.bash_profile
```
を実行して現在のウィンドウを更新、またはターミナルを一旦閉じて再起動します。

```
echo $PATH
```

でfulutter/binが含まれていることを確認します。
また、

```
which flutter
```

を実行してflutterコマンドが実行できることも確認します。
![スクリーンショット 2020-07-30 6.29.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62182/35701a0e-b8ae-7aec-05c0-5ce0d9bca701.png)

## プラットフォームのセットアップ

### Xcodeをインストールする
先程`flutter doctor`で出てきたエラーを解消したので、Xcodeの準備は整っています。

### iOSシミュレーターを設定する

```bash
open -a Simulator
```

を実行してシミュレーターを起動します。
![スクリーンショット 2020-07-30 6.42.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62182/e7714176-f7bb-eef2-bc0f-cbbdbae655c0.png)

## シンプルなFlutterアプリを作成して実行する
環境構築が終わったのでFlutterアプリを作ってテストします。

### 1. コマンドを実行して新しいFlutterアプリを作成

```bash

flutter create my_app
```

またしばらく待ちます。
![スクリーンショット 2020-07-30 6.51.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62182/b5fb29bd-7082-6e8f-ee59-a056d983486a.png)

### 2. ディレクトリを移動

```bash
cd my_app
```

### 3.flutter runを実行

```
flutter run
```

![スクリーンショット 2020-07-30 6.55.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62182/810fdb0d-0b93-7393-43d1-fcc12175d3e8.png)

シミュレーターの画面が変わりました。
![スクリーンショット 2020-07-30 6.56.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62182/5d12ea74-f6e6-2a16-fa49-00c73be155fe.png)

## iOSデバイスに展開する

Flutterアプリを物理iOSデバイスにデプロイするには、サードパーティのCocoaPods依存関係マネージャーとApple Developerアカウントが必要だそうです。Xcodeで物理デバイスの導入を設定する必要もあります。


### 1. CocoaPodsのインストールとセットアップ

先程`flutter doctor`でCocoa Podsはインストールしたので、セットアップをします。

```
pod setup
```

![スクリーンショット 2020-07-30 7.05.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62182/068da888-744e-54e7-0355-0627a82a682d.png)

### 2. プロジェクトをプロビジョニングするためにXcodeの署名フローに従う

a. 先程作成したmy_appディレクトリで`open ios/Runner.xcworkspace`を実行してXcodeを開きます。

b. Signing & CapabilitiesのタブからAdd Acountをクリック

![スクリーンショット 2020-07-30 7.27.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62182/05d88b45-5ec7-9143-7c33-d92d48b64548.png)

c. Apple IDでサインインします（[Apple Developer Program](https://developer.apple.com/register/agree/?path=%2Fdownload%2F)に登録している必要があります）

d. 確認に使うApple製品をPCとケーブルで物理的に接続します（今回はiPad Pro）

e. 初めて接続をするデバイスの場合は「このコンピュータを信頼しますか？」というダイアログが表示されるので「信頼」をクリックします

f. XcodeでiPadが選択できるようになりました（runボタンの隣付近にあります）

![スクリーンショット 2020-07-30 7.43.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62182/66f1b6be-1e7a-8b23-2248-16a102789bac.png)

g. デバイスを選択して、runボタンを押します

h. Could not launch “my_app”というエラーがXCode側で表示されるので、iPadの設定画面から「一般」＞「デバイス管理」を選択

![IMG_0012.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62182/be4cad9b-fa15-5b4e-4618-be5c0512b58d.png)

i. 「"Apple Development:xxxx"を信頼」をクリックするとダイアログが表示されるので「信頼」をクリック
![IMG_0013.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62182/e579394d-6d57-c7da-82fe-22fae75f735d.png)

j. ホーム画面にFlutterのアイコンが表示されているのでクリック
<img width="1194" alt="IMG_C0DAA770F3CE-1.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62182/dfa2eae7-7dd5-85f5-5a09-0167511b20a4.jpeg">

k. 無事アプリがiPadで表示されました🎉
![IMG_0014.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62182/b4fa5456-4004-9ff7-300a-8446e521d255.png)

## Android Studioをインストールする
1. [Android Studio](https://developer.android.com/studio)をインストールします（私は既にインストール済みでした）
2. Android Studioを起動してAndroid Studioセットアップウィザードを実行します。（これも実行済みでしたが長らくアップデートされてなかったのでアップデートしました）

## Androidデバイスをセットアップする
1. Androidデバイスの設定から「デバイス情報」を選択、一番下の「ビルド番号」を7回クリック（私の場合はpixel3aです。デバイスによって設定方法は異なるので[公式](https://flutter.dev/docs/get-started/install/macos#update-your-path)を御覧ください。）
![Screenshot_20200730-083254.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62182/a7c48d32-0da9-7b52-e545-c091a5201981.png)

2. 設定＞「システム」に「開発者向けオプション」のボタンが出現します
![Screenshot_20200730-083409.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62182/b30db3d9-67e9-9a21-5ba9-a99d82d217e4.png)

3. 「開発者向けオプション」の中に「USBデバッグ」の項目があるのでONにして許可します
![Screenshot_20200730-083427.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62182/b92c36fa-dfb5-49c9-20bd-2d5c22210880.png)

4. デバイスをPCとケーブルで物理的に接続すると許可を求めるダイアログが現れるので許可します
![Screenshot_20200730-083521.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62182/975a4899-549a-1481-1c50-8d6e3a4cef45.png)

5. PCで`flutter devices`コマンドを実行してAndroidデバイスが認識されていることを確認します
![スクリーンショット 2020-07-30 8.36.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62182/68eb593f-e85c-61d6-88f3-9ac4d9ef7826.png)

## Androidエミュレーターをセットアップする

1. PCで[VMアクセラレーション](hhttps://developer.android.com/studio/run/emulator-acceleration)を有効にするためにAndroidStudioを起動します

2. 先程の"my_app"を開いてツールバーからTools＞AVD Managerを選択し、Create Your Deviceをクリックします
![スクリーンショット 2020-07-30 9.08.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62182/da8dafbf-6c12-7708-02d7-8a5a865f9eb2.png)
![スクリーンショット 2020-07-30 9.09.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62182/cec34f31-1385-b9ad-2ad3-67df2c6a746b.png)

3. デバイスを選択してNextをクリックします
![スクリーンショット 2020-07-30 9.25.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62182/0b0b876b-b98f-5539-1c37-06d8386a371c.png)

4. DownloadからSystem Imageをダウンロードし、Nextをクリックします（ダウンロード時に承認を求められるのでAcceptします）
![スクリーンショット 2020-07-30 9.10.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62182/64b5c955-8eb0-51cb-67cf-9c887c20af30.png)
![スクリーンショット 2020-07-30 9.10.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62182/a40dff13-a39b-c8e7-e176-cabfed2a87d3.png)
![スクリーンショット 2020-07-30 9.11.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62182/1ee0e36c-f66d-c594-5f7c-a08f8104fffd.png)

5. Emulated PerformanceでHardware - GLES 2.0を選択します
![スクリーンショット 2020-07-30 9.34.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62182/7f4d071e-16bb-01a7-02ea-be9420644ace.png)

6. Finishをクリックして設定を終了

7. Android Virtual Device Managerでrunボタンをクリックするとエミュレーターが起動するようになりました

![スクリーンショット 2020-07-30 9.37.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62182/6c100dd0-ca9f-0365-e3eb-e9f4faaf6498.png)
![スクリーンショット 2020-07-30 9.37.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62182/8007e3ce-625e-741c-cbda-e659d05f5b9b.png)

# 感想

多分スマホアプリ開発経験済みの人は実機確認の手順やったことあるんだろうなあと思いながら初めてやってみて面白かったです🐶

次回は[ウェブ設定](https://flutter.dev/docs/get-started/web)やっていきます！