ちょっと前のAlexa Live 2020やGoogle Assitatnt Developers Dayでもあったとおり、これまでスマートスピーカー単体で動かすものが多かったVUIの世界にも、スマホアプリとの連携がいろいろ増えつつあります。
そこでちょっとスマホアプリ開発に入門してみよう、ということで「Flutter」を初めてみることにしました。
Flutterとは？
この辺がまとまってるようです。
個人的には、AlexaとGoogleアシスタントの両方でスマホアプリとの連携を試したいので、クロスプラットフォームというところがポイントでした。
インストール
Flutter本体と、Androidアプリの場合はAndroid Studio、iOSアプリの場合はXcodeが必要です。
FlutterとAndroid StudioはHomebrewで入れちゃいます。XcodeはHomebrewが使えるならばインストールされている前提ですね。
$ brew install flutter android-studio
flutter doctorを実行します。これでFluterでの開発に必要なアプリケーションやライブラリ等を追加してくれるみたいです。そこそこ時間がかかります。
$ flutter doctor
うちの環境（macOS Catalina）だと、途中インストールの確認を行うダイアログが表示されて、最終的にはこんな感じになりました。
$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 1.22.4, on Mac OS X 10.15.7 19H2 darwin-x64, locale ja-JP)
[✗] Android toolchain - develop for Android devices
✗ Unable to locate Android SDK.
Install Android Studio from: https://developer.android.com/studio/index.html
On first launch it will assist you in installing the Android SDK components.
(or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions).
If the Android SDK has been installed to a custom location, set ANDROID_SDK_ROOT to that location.
You may also want to add it to your PATH environment variable.
[!] Xcode - develop for iOS and macOS (Xcode 12.2)
✗ Xcode requires additional components to be installed in order to run.
Launch Xcode and install additional required components when prompted or run:
sudo xcodebuild -runFirstLaunch
✗ CocoaPods not installed.
CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on
the Dart side.
Without CocoaPods, plugins will not work on iOS or macOS.
For more info, see https://flutter.dev/platform-plugins
To install:
sudo gem install cocoapods
[!] Android Studio (version 4.1)
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.51.1)
✗ Flutter extension not installed; install from
https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Connected device
! No devices available
! Doctor found issues in 5 categories.
足りないものがあるみたいなので追加していきます。基本的にHomebrewにおまかせできるものはおまかせして、できないものは個別にやります。
cocoaPodsはHomebrewにあるのでそれで。
$ brew install cocoapods
Android-SDKはHomebrewにあるんだけど、brew installするとこんなメッセージが出るのでHomebrewは使いません。
android-sdk has been officially discontinued upstream. It may stop working correctly (or at all) in recent versions of macOS.
ということで、Android Studioを起動します。
Android Studioの設定をインポートするか聞かれます。インポートするものはないので"Do not import settings"で"OK"。
データをGoogleに送信するか聞かれます。どっちでもいいと思うんですが、とりあえず"Don't sent"で。
Android Studioのセットアップウィザードが起動します。"Next"をクリック。
インストールタイプを聞かれるので"Standard"を選択して"Next"。
UIのテーマです。好きな方を選んでください。個人的にはダークが好みなんですが、多分後でも変えれそうな気がするので"Ligth"のままで"Next"をクリック。
確認画面が表示されますので"Finish"をクリック。
インストールが行われます。途中で確認が出たりセキュリティの設定変更などが求められる場合がありますので、適宜設定します。終わったら"Finish"をクリックします。
Android Studioが起動します。最初にプラグインをインストールします。"Confgure"→"Preferences"をクリックします。
"Plugins"をクリックして、"Flutter"プラグインをインストールします。
サードパーティ製プラグインの場合は警告が出るようです。"Accept"をクリックします。
Dartプラグインもセットでインストールされますので "Install" をクリックします。
Android Studioを再起動します。"Rrestart IDE"をクリックします。
Android Studioが起動してきて、"Create New Flutter Project"が見えればOKです。
再度fluter doctorを実行してみます。
$ flutter doctor -v
[✓] Flutter (Channel stable, 1.22.4, on Mac OS X 10.15.7 19H2 darwin-x64, locale ja-JP)
• Flutter version 1.22.4 at /usr/local/Caskroom/flutter/1.22.4/flutter
• Framework revision 1aafb3a8b9 (3 weeks ago), 2020-11-13 09:59:28 -0800
• Engine revision 2c956a31c0
• Dart version 2.10.4
[!] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
• Android SDK at /Users/xxxxxx/Library/Android/sdk
• Platform android-30, build-tools 30.0.2
• Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
✗ Android license status unknown.
Run `flutter doctor --android-licenses` to accept the SDK licenses.
See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.
[✓] Xcode - develop for iOS and macOS (Xcode 12.2)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Xcode 12.2, Build version 12B45b
• CocoaPods version 1.10.0
[!] Android Studio (version 4.1)
• Android Studio at /Applications/Android Studio.app/Contents
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.
• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
[!] VS Code (version 1.51.1)
• VS Code at /Applications/Visual Studio Code.app/Contents
✗ Flutter extension not installed; install from
https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Connected device
! No devices available
! Doctor found issues in 4 categories.
Android StudioでFlutter/Dartプラグインをインストールしたのに認識されていないのは以下が原因のようです。
flutter doctorでAS4.1のplugin認識されてないなと思ったらこれだった。微妙にpathが変わってるからリンクを作ればとりあえず回避できるとのこと。
— m.kosuke (@kosuke_mtm) 2020年11月3日
ln -s ~/Library/Application\ Support/Google/AndroidStudio4.1/plugins ~/Library/Application\ Support/AndroidStudio4.1https://t.co/YbNK8hr7hb
以下によると開発には影響しないようですので気にしないことにします。
ということで、できていないところの残り。
Android SDKのライセンス許諾
$ flutter doctor --android-licenses
うちの環境ではガッツリエラーになりました。
Exception in thread "main" java.lang.NoClassDefFoundError: javax/xml/bind/annotation/XmlSchema
at com.android.repository.api.SchemaModule$SchemaModuleVersion.<init>(SchemaModule.java:156)
at com.android.repository.api.SchemaModule.<init>(SchemaModule.java:75)
at com.android.sdklib.repository.AndroidSdkHandler.<clinit>(AndroidSdkHandler.java:81)
at com.android.sdklib.tool.sdkmanager.SdkManagerCli.main(SdkManagerCli.java:73)
at com.android.sdklib.tool.sdkmanager.SdkManagerCli.main(SdkManagerCli.java:48)
Caused by: java.lang.ClassNotFoundException: javax.xml.bind.annotation.XmlSchema
at java.base/jdk.internal.loader.BuiltinClassLoader.loadClass(BuiltinClassLoader.java:581)
at java.base/jdk.internal.loader.ClassLoaders$AppClassLoader.loadClass(ClassLoaders.java:178)
at java.base/java.lang.ClassLoader.loadClass(ClassLoader.java:522)
... 5 more
どうもJavaのバージョンによるようで、Android SDKはJava8じゃないとダメらしい。うちの環境はこうなってました。
$ java --version openjdk 11.0.8 2020-07-14 LTS OpenJDK Runtime Environment Corretto-11.0.8.10.1 (build 11.0.8+10-LTS) OpenJDK 64-Bit Server VM Corretto-11.0.8.10.1 (build 11.0.8+10-LTS, mixed mode)
いつ入れたのかも覚えてないけど（Amazon Correttoのものだった。多分Skill Flow Builderだと思う）、Javaさっぱりわからん・・・ということで調べてみると、Android Studio自体がJavaの実行環境を持っているとのこと。
たしかに含まれていますね。
$ /Applications/Android\ Studio.app/Contents/jre/jdk/Contents/Home/bin/java -version openjdk version "1.8.0_242-release" OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495) OpenJDK 64-Bit Server VM (build 25.242-b3-6915495, mixed mode)
Android Studio内で実行する分には問題ないらしいし、コマンドラインから使うのかもわからないけど、一旦Androrid StudioのJavaにパスを通すことにします。.bashrcに以下を追記してsource .bashrcしておく。
export PATH=$PATH:/Applications/"Android Studio.app"/Contents/jre/jdk/Contents/Home/bin export JAVA_HOME=/Applications/"Android Studio.app"/Contents/jre/jdk/Contents/Home
再度flutter doctor --android-licenses。色々聞かれるので"y"で答えていく。
$ flutter doctor --android-licenses Warning: File /Users/*****/.android/repositories.cfg could not be loaded. 7 of 7 SDK package licenses not accepted. 100% Computing updates... Review licenses that have not been accepted (y/N)? y 1/7: License android-googletv-license: (snip) Accept? (y/N): y 2/7: License android-sdk-arm-dbt-license: (snip) Accept? (y/N): y 3/7: License android-sdk-license: (snip) Accept? (y/N): y 4/7: License android-sdk-preview-license: (snip) Accept? (y/N): y 5/7: License google-gdk-license: (snip) Accept? (y/N): y 6/7: License intel-android-extra-license: (snip) Accept? (y/N): y 7/7: License mips-android-sysimage-license: (snip) Accept? (y/N): y All SDK package licenses accepted
あとは使うかどうかわからないけど、VS CodeでもFlutterの拡張をインストール。
再度flutter doctorしてみる。
$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 1.22.4, on Mac OS X 10.15.7 19H2 darwin-x64, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 12.2)
[!] Android Studio (version 4.1)
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.
[✓] VS Code (version 1.51.1)
[!] Connected device
! No devices available
! Doctor found issues in 2 categories.
"No devices available"は実機が接続されていない場合に出るようですが、とりあえずシミュレータが使えればいいと思います。
iOSの方は以下でシミュレータが上がってくればOK。
$ open -a Simulator.app
Androidの方は、Android Studioを起動して、とりあえずプロジェクトを作ります。"Create New Flutter Project"をクリック。
"Flutter Application"を選択して"Next"。
Flutterアプリの設定。とりあえず確認なのでデフォルトのままで。"Flutter SDK path"だけは空なので、flutter doctor -vで表示されるFlutterのパスを入力。
$ flutter doctor -v
[✓] Flutter (Channel stable, 1.22.4, on Mac OS X 10.15.7 19H2 darwin-x64, locale ja-JP)
• Flutter version 1.22.4 at /usr/local/Caskroom/flutter/1.22.4/flutter # これ
• Framework revision 1aafb3a8b9 (3 weeks ago), 2020-11-13 09:59:28 -0800
• Engine revision 2c956a31c0
• Dart version 2.10.4
(snip)
パッケージ名もとりあえずそのままで"Next"をクリック。
Android Studioの画面が表示されます。
右上のメニューから"AVD Manager"をクリック。
仮想デバイスの選択画面が表示されます。Pixel3aが予め入っていたので、再生ボタンをクリック。
なんかエラーが出る・・・
一応エミュレータは立ち上がってくるけど。
ぐぐってみるとこのあたりがひっかかったので、参考に。
”File” → "Project Structure"をクリック。
SDKのところが"No SDK"になっているので、ここをインストールしたAndroid SDKに変更して"OK"をクリック。Androidアイコンがついてるものが多分それっぽい。
これでAndroid Studioの上のメニューからiOSシミュレータ/Androidエミュレータがエラーなく起動できるようになりました。
まとめ
先は長いなー。次回はとりあえずかんたんなアプリを作ってみたいと思います。