Flutterでモバイルアプリケーション（Android/iOS）の開発環境を構築する
gizmodoの記事 で、Google Fuchsia の話が触れられていました。今回は Fuchsia 上で動作するようになるかもしれない Flutter の環境構築をしてみます。
モチベーション
Web系エンジニアがモバイルをアプリを作ることになった
「君はコード書けるから、アプリのプロトタイプを作ってもらおうかな」 というオーダーを頂戴しました。 そもそも私はWeb系のエンジニアで、近年はサーバサイドを中心に仕事をしていたので、Javascriptは2013年頃からあまり積極的に書いていませんでした。 （スポットで簡易な管理コンソールにようなものは実装していましたが。。）
この「あなたSEなんだから、Fax直せるでしょ？」の某Web広告を彷彿とさせる依頼が契機となり、アプリ開発の門を叩くことになったのです。
React-NativeかFlutterか
先も書いた通り、私は過去Javascriptでの開発経験があるので、React-Nativeを使う選択肢もあります。
一方で、つい最近、gizmodoの記事 で Google の新OSである Fuchsia の話と、 それと付随して Flutter が紹介されていました。
今回実装するのもアプリのプロトタイプのようですし、せっかくだから実験台になってもらおう、となったわけです。
環境構築
Flutterのインストール
- SDKのダウンロード
私のマシンはMac OSXなので Flutter公式のMacOSのセットアップ ページを参考にセットアップを進めます。
セットアップページに行くと、Flutter SDKのarchiveが手に入るので、それをダウンロードします。2018/07での最新バージョンは v0.5.1-beta でした。
ちなみに、HomebrewのFlutterを探すと、 古いバージョン（ v0.3.1 ）がヒットするので Homebrew 経由でのインストールはオススメしません。
- zipの解凍
ダウンロード終了後に任意のフォルダで解凍します。
1cd ~/
2unzip ~/Downloads/flutter_macos_v0.5.1-beta.zipunzipされていく過程を眺めていると、 creating: flutter/packages/fuchsia_remote_debug_protocol/ といった Fuchsia との関連を匂わせるソースも入っていますね。少しだけテンションが上がりました。
- パスを通す
毎度 exportコマンドを実行するのも面倒なので、 ~/.zshrc ファイルに記載をして、source コマンドで再読込させます。
1export FLUTTER="${HOME}/flutter/bin"
2export PATH="${FLUTTER}:$PATH"- 動作確認
flutter コマンドの確認をします。
1flutter --version
2
3> Flutter 0.5.1 • channel beta • https://github.com/flutter/flutter.git
4> Framework • revision c7ea3ca377 (8 weeks ago) • 2018-05-29 21:07:33 +0200
5> Engine • revision 1ed25ca7b7
6> Tools • Dart 2.0.0-dev.58.0.flutter-f981f09760低いバージョンのflutterを使っていると、このタイミングでバージョンアップが促されます。親切設計です。
╔════════════════════════════════════════════════════════════════════════════╗
║ WARNING: your installation of Flutter is 61 days old. ║
║ ║
║ To update to the latest version, run "flutter upgrade". ║
╚════════════════════════════════════════════════════════════════════════════╝Flutterの依存ツールをチェックする
Flutterが依存するツールの状況を確認しましょう。 flutter doctor の実行結果を確認しながら不足しているツールをインストールしていきます。
コマンドサンプルも付随しているので、インストールに手間取ることはありませんでした。 インストールするモジュールの容量が大きくて時間がかかります。
flutter doctor
> Doctor summary (to see all details, run flutter doctor -v):
> [✓] Flutter (Channel beta, v0.5.1, on Mac OS X 10.13.2 17C88, locale ja-JP)
> [!] Android toolchain - develop for Android devices (Android SDK 26.0.2)
> ! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses
> [!] iOS toolchain - develop for iOS devices (Xcode 9.2)
> ✗ Missing Xcode dependency: Python module "six".
> Install via 'pip install six' or 'sudo easy_install six'.
> ✗ libimobiledevice and ideviceinstaller are not installed. To install, run:
> 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.0)
> ✗ Flutter plugin not installed; this adds Flutter specific functionality.
> ✗ Dart plugin not installed; this adds Dart specific functionality.
> [!] IntelliJ IDEA Ultimate Edition (version 2017.3)
> ✗ Flutter plugin not installed; this adds Flutter specific functionality.
> ✗ Dart plugin not installed; this adds Dart specific functionality.
> [!] VS Code (version 1.25.0)
> [!] Connected devices
> ! No devices availableプロジェクトの初期化
flutter のプロジェクトの初期化を行います。今回は sample という名前のプロジェクトにします。
1flutter create sampleこんな感じでプロジェクトツリーが生成されました。 lib/main.dart がメインとなるdartのコードっぽいですね。
android や ios のディレクトリ配下は、各プラットフォームのアプリのディレクトリ構造になっていました。
ネイティブコードでも拡張できるんでしょね、おそらく。
.
├── README.md
├── android
│ ├── app
│ ├── build.gradle
│ ├── gradle
│ ├── gradle.properties
│ ├── gradlew
│ ├── gradlew.bat
│ ├── local.properties
│ └── settings.gradle
├── build
│ ├── android-profile
│ ├── app
│ ├── app.dill
│ └── frontend_server.d
├── ios
│ ├── Flutter
│ ├── Runner
│ ├── Runner.xcodeproj
│ └── Runner.xcworkspace
├── lib
│ └── main.dart
├── pubspec.lock
├── pubspec.yaml
├── sample.iml
├── sample_android.iml
└── test
└── widget_test.dartサンプルアプリケーションの起動
作成したプロジェクトをVisual Studio Codeで開きます。
lib/main.dart ファイルを開いて、 デバッグを選択（F5 キー）を押すと、エミュレータを選択できます。
とりあえず、iOS Simulator にします。
暫く待つと（数分待ちました。。）エミュレータが起動し、アプリが立ち上がります。
これで開発環境は構築できました！
まとめ
今回はFlutterの環境構築までを行いました。 最初はコマンドラインでやっていたのですが、IDEにプラグインをインストールした方が開発が捗るのでオススメします。 Dartのコードはまだ書けていませんが、Javascriptでオブジェクト指向プログラミングをやったことがあれば、ついていけそうな気はします。 次は Write Your First Flutter App で簡単なデモアプリを作ってみようと思います！
