💻

[Flutter入門(1)] MacでデモアプリをビルドしてiPhone実機で動かすまで

2020/05/25に公開

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 がないよ〜😣ってなりました)

https://twitter.com/ttskch/status/1263726014372298752

また、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で 設定 > 一般 > プロファイルとデバイス管理 を開いて、開発元を信頼する操作を実施して、改めてアプリを開きましょう。今度は正常に動作するはずです。

GitHubで編集を提案

Discussion