アクトインディ開発者ブログ

子供とお出かけ情報「いこーよ」を運営する、アクトインディ株式会社の開発者ブログです

VSCodeでFlutter、最初の一歩

morishita Android tool iOS

Web エンジニアの morishitaです。

Web アプリは Android も iOS を１つのソースで動かせるのに、 それぞれ作らないといけないなんてネイティブアプリ開発は大変だなぁといつも横目でちら見しております1。

プッシュ通知やオフラインキャッシュなどアプリ開発の強い動機になっていた機能が Webアプリでも実装可能になってきており、AndroidではPWAアプリをホームスクリーンに追加すると 単なるショートカットではなくネイティブアプリ同様に扱われるようになってきています2。

それでも、端末の機能をほぼ制限なく使え、カメラやセンサやNFCなどを利用した3ネットとリアルのよりリアル寄りのアプリケーションを開発できるネイティブアプリの自由さはいいなぁと思うことがあります。

Webアプリのようにネイティブアプリを開発できる、AndroidもiOSもワンコードですと謳う開発環境やフレームワークはこれまでもありましたが、スマホの2大プラットフォーマーの1つGoogleを中心に開発が進められているものが出てきました。それがFlutterです。

真打ち登場かもしれません。ということで、ちょっと触ってみました。

Flutterとは

Google が公開しているスマホ向けネイティブアプリの開発プラットフォームと言うかフレームワークで OSS として開発されています。

flutter.io

次の特徴を謳っています。

  • Fast development
    • ホットリロードでコードの変更がすぐに反映され、試しながら実装できる
    • カスタマイズ可能なUI部品
    • 1つのコードベースでAndroid、iOS のクロスプラットフォーム開発できる
  • Expressive and Flexible UI
    • マテリアルデザインとクパティーノ (iOS-flavor)のUIパーツ
    • 各プラットフォームに配慮したリッチな動きやスムーズなスクロール
  • Native Performance
    • iOSとAndroidの両方で完全なネイティブパフォーマンスを提供

また、実装言語にはDartを採用ししています。 サードパーティのパッケージを Flutter Packagesで探して利用することもできます。

このエントリではVSCodeでFlutterによるアプリ開発するためのセットアップからサンプルアプリの動作確認までやってみます。

セットアップ

以降はMac OS 上でのセットアップの流れです。

Android Studio と Xcode のインストール

あれ？VSCode で Flutter じゃないの？ と思われるかもしれないですが、 最終的には Android ／iOS 向けにビルドする必要があり、それぞれビルドするためのツールチェインが必要になります。そのためにインストールします。

まずはAndroidから。Android Studio をインストールしましょう。 Android に詳しい人は SDK だけでもいいかもしれないですが、そういう人はすでに Android Studio もインストールしているでしょう。多分。 詳しくない人は Android Studio をインストールしてしまうのが手っ取り早いし簡単です。

Android Studio のインストール  |  Android デベロッパー  |  Android Developers

つづいて、iOS。 Xcode は App Store からインストールしましょう。

Xcode

Xcode

  • Apple
  • 開発ツール
  • 無料

Flutter SDK のインストール

お待ちかね、Flutterのインストールです。
インストールと言っても次のページから ZIP ファイルをダウンロードして展開するだけです。

flutter.io

展開したら、flutter というディレクトリができます。それを任意の場所に配置します。 私は ~/Libraryの下に置いています。

置き場所を決めたら次の様に flutter/bin にパスを通します。

export PATH=$HOME/Library/flutter/bin:$PATH

Flutter Doctorの実行

これで、flutter コマンドが使えるようになっているはずです。

ターミナルを開いて環境チェックコマンド flutter doctorを実行しましょう。

私の環境では次の様な結果が出力されました。

$ flutter doctor

  ╔════════════════════════════════════════════════════════════════════════════╗
  ║                 Welcome to Flutter! - https://flutter.io                   ║
  ║                                                                            ║
  ║ The Flutter tool anonymously reports feature usage statistics and crash    ║
  ║ reports to Google in order to help Google contribute improvements to       ║
  ║ Flutter over time.                                                         ║
  ║                                                                            ║
  ║ Read about data we send with crash reports:                                ║
  ║ https://github.com/flutter/flutter/wiki/Flutter-CLI-crash-reporting        ║
  ║                                                                            ║
  ║ See Google's privacy policy:                                               ║
  ║ https://www.google.com/intl/en/policies/privacy/                           ║
  ║                                                                            ║
  ║ Use "flutter config --no-analytics" to disable analytics and crash         ║
  ║ reporting.                                                                 ║
  ╚════════════════════════════════════════════════════════════════════════════╝

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v0.7.3, on Mac OS X 10.12.6 16G1510, locale ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK 28.0.1)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
[!] iOS toolchain - develop for iOS devices (Xcode 9.2)
    ✗ 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.1)
[!] IntelliJ IDEA Ultimate Edition (version 2018.2.1)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.27.2)
[!] Connected devices
    ! No devices available

! Doctor found issues in 5 categories.

PC 内の必要なモジュールがチェックされます。 [!]がついた項目が問題のある項目です。

これらを解消していきます。

Android 環境と iOS 環境の準備

上記の問題箇所に対処して、Android 環境と iOS 環境を整えます。

Android 環境

flutter doctorの結果の次の部分ですが、これは何やらライセンスに同意していないと注意されています。

[!] Android toolchain - develop for Android devices (Android SDK 28.0.1)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses

指示に従って、flutter doctor --android-licensesを実行して同意すれば解決です。

次の項目ですが、IntelliJ についてはプラグインが足りないと言っているので、Flutter pluginとDart pluginをインストールします。

[✓] Android Studio (version 3.1)
[!] IntelliJ IDEA Ultimate Edition (version 2018.2.1)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.

上記では Android Studio には問題ないですが、予めこれらのプラグインをインストールしていたためです。
インストールしていなけれは IntelliJ と同様のメッセージが出るので、それに従います。

iOS 環境

iOS toolchain についても解決方法が示されています。 それぞれ解決するための brewのパッケージインストールコマンドが示されているので、順に実行します。 上記のflutter doctorの結果の場合、次のコマンドを実行します。

$ brew install --HEAD libimobiledevice
$ brew install ideviceinstaller
$ brew install ios-deploy
$ brew install cocoapods
$ pod setup

brew install --HEAD libimobiledeviceが python2 に依存するらしく、python2 が無い環境だと自動的にpython2がインストールされます。 しかし、python2 にはpipが含まれないので、途中でコケます。
その場合、Installation — pip 18.0 documentationを参考にインストールして再実行すれば解決します。

また、cocoapodsのインストールには結構時間がかかるのでご注意を。

Flutter Doctorが解決方法も示してくれるのでそれに従っていけば割とスルッとできると思います。

VSCode と Flutter プラグインのインストールと設定

さて、いよいよ VSCode です。 Flutter Doctorの出力で次のように指摘されています。 特に解決方法が示されていませんが、単に Flutter プラグインがインストールされていないだけです。

[!] VS Code (version 1.27.2)

なので、次のプラグインをインストールしましょう。

marketplace.visualstudio.com

marketplace.visualstudio.com

インストールしたら、コマンドパレットからFlutter: New Projectを実行してみてください。

初めてだと次のようなダイアログが表示されると思います。
もし、プロジェクト名を聞いてきたら、飛ばして次に進んでいいです。

f:id:HeRo:20180920083921p:plain

Flutter SDK の場所がわからないと言っているだけなので、Locate SDKボタンをクリックして設定します4。

設定したらコマンドパレットからFlutter: Run Flutter Doctorを実行します。
次のように結果がターミナルに出力されれれば OK です。

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v0.8.2, on Mac OS X 10.12.6 16G1510, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK 28.0.1)
[✓] iOS toolchain - develop for iOS devices (Xcode 9.2)
[✓] Android Studio (version 3.1)
[✓] IntelliJ IDEA Ultimate Edition (version 2018.2.1)
[✓] VS Code (version 1.27.2)
[!] Connected devices
    ! No devices available

Connected devicesは気にしなくていいです。
Flutterプラグインから接続できる端末がないと行っているだけです。エミュレータを起動すれば解決します。

Flutter Doctorの結果がきれいになったところでセットアップは終了です。

サンプルプロジェクトで動作確認

さて、セットアップが終わったところで、サンプルを実行してみましょう。

プロジェクトの初期化

再び Flutter: New Project を実行します。 今度はプロジェクト名を聞いてくるので、適当に入力して保存する場所を選択したら、ファイル群が生成されプロジェクトが初期化されます。

この時点で、簡単なアプリのコードが含まれています。

仮想デバイスの準備

VSCodeのステータスバーに No Devices と表示されているのでクリックするとコマンドパレットに選択肢が表示されます。多分、iOS Simulator は最初から選択できるのではと思います。選択するとエミュレータが起動します。

f:id:HeRo:20180920235957p:plain

Android のエミュレータはCreate Newを選択すると自動的に作成されて起動します。

なお、作成するにはエミュレータのシステムイメージが必要です。 SDK マネージャを開いて、Android8.1 の Google play Intel x86 Atom System Imageをインストールすると、作れるようになります。

f:id:HeRo:20180920084025p:plain

Create Newを実行すると次の仮想デバイスが作成されます。

f:id:HeRo:20180920084038p:plain

実行

エミュレータの準備ができたらサンプルアプリを動かしてみましょう。

VSCode のデバッグを開くと Flutter を選択できるようになっています。 選択して、実行するとプロジェクトがビルドされエミュレータで実行されます。

f:id:HeRo:20180920235031p:plain

サンプルアプリは右下の＋ボタンをクリックすると数字がカウントアップするだけのシンプルなものです。

試しに、lib/main.dartを開いてFlutter Demo Home Pageの文字列を書き換えたり、UIの色を変更ししてみると、すぐにエミュレータで実行されているアプリに反映されます。
これが Flutter の特徴のホットリロードですね。素晴らしい。

f:id:HeRo:20180921000823g:plain

以上でサンプルアプリの動作確認も終了です。

おまけ

セットアップしてからこのエントリを書くまでの間に Flutter のバージョンが0.7.2から0.8.3上がってしまいました。 ちょうどいいのでアップデートも試してみました。

FLutter のバージョンアップは flutter upgradeコマンドで可能です。

flutter upgradeの実行の様子はちょっと長いので折りたたみます。 興味ある方は開いて見てください。

で、アップデート後、flutter --versionでバージョンを確認します。

$ flutter --version
Flutter 0.8.2 • channel beta • https://github.com/flutter/flutter.git
Framework • revision 5ab9e70727 (12 days ago) • 2018-09-07 12:33:05 -0700
Engine • revision 58a1894a1c
Tools • Dart 2.1.0-dev.3.1.flutter-760a9690c2

ちゃんと上がっていますね。 アップデート後、VSCodeからアプリを起動してみましたが問題ありません。 アップデートも簡単です。

まとめ

難しいハマりどころはなく、VSCodeでFlutter環境は作れます。アップデートも難しくありませんでした。

結局 Android Studioをインストールするので(しかも私は Intellijも使っていてAndroid Studioにも抵抗ないので) VSCodeを使うのは微妙な気もしないではないですが、選択肢があるのは良いことではないでしょうか。

Flutter自体がまだRelease Preview 2が出たところなので実戦投入には十分な検証が必要だと思うのですが、プロトタイピングしてみる程度なら十分使えそうです。 特にホットリロードは小気味よく、Web開発感覚でアプリ開発できそうです。

最後に

アクトインディではWebでもアプリでも、インフラでもいろいろやりたいエンジニアを募集しています。

  1. 両プラットフォームへの配慮は必要ですし、時には作り分けたりする必要もありますが。↩

  2. プッシュ通知欲しさに開発されたほぼWeb版と変わらない(しかも全面的にUIはwebviewだったりするような)ネイティブアプリはAndroidに於いては減ってくるだろうなぁと個人的に思っています。↩

  3. ブラウザでもだいぶサポートされてきていますが、安定性やパフォーマンス含め広く一般的に使える状況まではもう少し掛かりそうですね。↩

  4. ~/Libraryに SDK を置いている場合、ファイル選択ダイアログでこのディレクトリが表示されなくて選択できないかもしれません。ターミナルを開いてchflags nohidden ~/Libraryを実行すると表示されるようになります。↩