Flutterでモバイルアプリケーション(Android/iOS)の開発環境を構築する

Flutterでモバイルアプリケーション(Android/iOS)の開発環境を構築する
目次

gizmodoの記事 で、Google Fuchsia の話が触れられていました。今回は Fuchsia 上で動作するようになるかもしれない Flutter の環境構築をしてみます。

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.zip

unzipされていく過程を眺めていると、 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のコードっぽいですね。

androidios のディレクトリ配下は、各プラットフォームのアプリのディレクトリ構造になっていました。

ネイティブコードでも拡張できるんでしょね、おそらく。

.
├── 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

暫く待つと(数分待ちました。。)エミュレータが起動し、アプリが立ち上がります。

demo

これで開発環境は構築できました!

まとめ

今回はFlutterの環境構築までを行いました。 最初はコマンドラインでやっていたのですが、IDEにプラグインをインストールした方が開発が捗るのでオススメします。 Dartのコードはまだ書けていませんが、Javascriptでオブジェクト指向プログラミングをやったことがあれば、ついていけそうな気はします。 次は Write Your First Flutter App で簡単なデモアプリを作ってみようと思います!

参考にさせていただいたサイト