Zapp!というサービスがリリースしました。WebブラウザだけでFlutterアプリを開発できるサンドボックス環境です。これまでにDartPadという似たサービスがありましたが、一番大きく違うのは 任意のパッケージ が利用できると言うことでしょう。
DartPadも便利だったのですが、Firebase向けのライブラリしか使えませんでした。何となくGoogleの囲い込みを感じてもやっていたんですよね。そんな中、Zapp!は任意の（といってもWebに対応している必要はあるでしょう）Dartパッケージが利用できます。
ということで、簡単なNCMBを使ったデモを作ってみました。こちらのリンクで確認できるはずです。
実際のコードはこちらで確認できます。
使い方
Zapp!の使い方は簡単で、こちらのURLからアクセスすればすぐに開発環境が開きます。
後は開発しながら Ctrl+R を押せば、プレビューに反映されます。恐らく最初の保存時にユニークなURLが発行されるので、後はそれを外部公開すれば誰でもWebアプリケーションが利用できます。
パッケージの追加
パッケージの追加はコマンドではなく、pubspec.yamlの修正になります。例えば ncmb パッケージであれば、下記のように cupertino_icons の下辺りに追加します。バージョンはncmb | Dart Packageにて確認できますが、 any にする手もあるようです。
dependencies:
flutter:
sdk: flutter
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^1.0.2
ncmb: ^2.6.6
追加したら、画面中央上にある Pub Get ボタンを押すと、入力補完にも表示されます。
追加時の注意
NCMBに限らないと思いますが、パッケージが依存しているライブラリがうまく追加されない場合があるようです。NCMBの場合はshared_preferences | Flutter Packageが入ってくれなかったので、別途pubspec.yamlに追加しています。
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.2
ncmb: ^2.6.6
shared_preferences: ^2.0.15
後、WebアプリケーションなのでiOSやAndroid、デスクトップ向けのライブラリはインストールできないでしょう。
Tips
後は書いていて気がついた点です。
- main関数はmain.dartの一番下にありました
- 最初のコードはStateが定義されていないので注意してください
まとめ
Zapp!によって、Flutterのファーストステップがとても楽になるかと思います。少なくとも数GBのファイルをダウンロードしたり、Android StudioやXcodeなどの開発環境を整えることなく開発体験をはじめられます。
ハンズオンなどがとても手軽になりそうで良い感じです。