[Flutter入門（1）] MacでデモアプリをビルドしてiPhone実機で動かすまで
Flutter の最初の一歩を日本語でまとめてみます。（ほぼ こちらの公式ドキュメント の日本語訳です）
20〜30分もあれば自分のiPhone上でアプリが動く状態まで行けるので、時間がある人はぜひ試してみてください✨
1. FlutterのSDKをインストール
適当なディレクトリにFlutterのSDKを設置して、そこにパスを通す形で利用します。
ここでは例としてホームディレクトリ直下にインストールすることにします。
$ cd ~
$ git clone https://github.com/flutter/flutter.git -b stable --depth 1
$ echo "export PATH=$PATH:`pwd`/flutter/bin" >> ~/.zshrc
$ source ~/.zshrc
環境依存の開発用バイナリ群を事前ダウンロードしておきます。
$ flutter precache
2. iOS用の環境をインストール
iOS向けのビルドができるように環境を整えます。
Xcodeをインストール して、開発者用にセットアップします。
$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
$ sudo xcodebuild -runFirstLaunch
$ sudo xcodebuild -license # スペースキーでスクロールして、最後に `agree` と打って同意
iOSシミュレータが動くことを確認しましょう。
$ open -a Simulator
3. デモアプリをiOSシミュレータで動かす
デモアプリを作ってシミュレータで動かしてみましょう。
Flutter SDKに含まれる flutter コマンドでデモアプリを生成して起動するだけです。
$ cd ~/works # 適当な作業ディレクトリ
$ flutter create my_app
$ cd my_app
$ flutter run
1分ぐらいでビルドが完了して、シミュレータで my_app が開いて動いたら成功です👍
備忘録：2020/05/24現在、Flutterの公式ドキュメントが陳腐化しているので注意です
2020/05/24現在、公式ドキュメントに以下の記載があります。
2 . Make sure your simulator is using a 64-bit device (iPhone 5s or later) by checking the settings in the simulator’s Hardware > Device menu.
https://flutter.dev/docs/get-started/install/macos#set-up-the-ios-simulator
が、2020/05/20にリリースされたXcode 11.5でシミュレータのUIが変更になっており、シミュレート対象のデバイスの選択は Hardware > Device ではなく File > Open Device で行うようになっています。（最初気づかなくて Hardware > Device がないよ〜😣ってなりました）
また、iPhone SE2より古いモデルはもはやデバイスの一覧にないので、ドキュメントの Make sure your simulator is using a 64-bit device (iPhone 5s or later) という記述はそもそも気にしなくて大丈夫です。
4. デモアプリをiPhone実機で動かす
先ほどのデモアプリをiPhone実機にデプロイしてみましょう。
デバッグビルドを自機にデプロイするだけならApple Developer Programへの登録は不要です✋
まずはcocoapodsで依存ライブラリをインストールする必要があります。
$ gem install cocoapods # グローバルにcocoapodsをインストール
$ cd ~/works/my_app
$ pod setup
完了したら、以下のコマンドでXcodeのワークスペースを開きます。
$ open ios/Runner.xcworkspace
Xcodeが開いたら、MacとiPhoneをケーブルで接続して、Xcodeの画面左上の Runner > iPhone SE (2nd generation) などとなっている iPhone SE (2nd generation) の部分をクリックして、下図のように自分のiPhone実機を選択します。
最後に、アプリへの電子署名の設定を行います。
Xcodeの画面左のツリーの最上部 Runner プロジェクトを選択して、画面の中央ペインのメニューから Siging & Capabilities を選択します。
最初は Team のところが Add Account というボタンになっているので、これをクリックして、自分のApple IDを登録し、これを選択します。
Bundle Identifier には com.ttskch.myApp のように 自社のドメイン名を逆転させた表記.アプリ名 という形式で一意な名前を設定します。
iOSシミュレータを事前に終了させておいた上で、以下のコマンドを実行します。
$ flutter run
すると、Xcodeで設定した内容が適用された状態でビルドが実行され、ケーブルで接続しているiPhoneにアプリがデプロイされます。
途中、Macのログインパスワードの入力を求められるので、入力して 常に許可 をクリックします。（単に 許可 だと何回も入力が必要です）
完了すると、iPhoneに my_app がインストールされている状態になります。
が、初回は下図のようなエラーでアプリを開けないと思います。
iPhoneで 設定 > 一般 > プロファイルとデバイス管理 を開いて、開発元を信頼する操作を実施して、改めてアプリを開きましょう。今度は正常に動作するはずです。
Discussion