Flutter ユーザーの間でポツポツと話題になっている FlutterHub を少し触ってみたので、軽く紹介してみたいと思います。
(2024.05.20更新） FlutterHub はすでにサービスを終了しており、ドメインも不正なサイトに取得されてしまっているようですので、すべて削除しました。「このようなサービスがあった」ことだけこの記事でお伝えできればと思います。（更新ここまで）
まとめ
- FlutterHub の開発元は Google ではなく、非公式のプロダクト
- 10/25 ~ 27 (Central Time) は開発者プレビュー (tech-preview) 期間
- FlutterHub は開発環境だけでなく、学習やビルド、テスト環境などを揃えた、 Flutter ユーザーが集まる場を提供するサービス
- FlutterHub が形になれば Flutter アプリ開発の DX が大きく向上する見込みなので、正式リリースのためにフィードバックが大事
以上を踏まえて、以下、本文です。
本文
FlutterHub はブラウザ上で Flutter アプリのコーディングができるというもので、マシンスペックやOSに関係なく、 Windows でも Mac でも iPad OS でもアプリ開発ができるようになる、ということで注目されているプロダクトです。
コミットログや Twitter を見る限り、開発しているのは Ruben Chevez という方で、Google は開発に関わっていない非公式なプロダクトのようです。
FlutterHub 自体は、開発環境だけでなく__学習、開発、プロジェクトの共有、テスト、ビルドの全ての「ハブ」となる__ことを目指して開発されており、
FlutterHub, as the name states, is a central hub for building, sharing, testing and learning about Web/IOS/Android development using Flutter
実際に FlutterHub には Google が公式で提供している学習コンテンツのまとめページやサンプルプロジェクトのまとめページなどが含まれています。
とはいえ開発者としてはブラウザで動かせるクラウド上のエディタに興味があるかと思いますので、この記事では FlutterHub のエディタに注目して紹介することにします。
エディタの全体像
GitHub などのアカウントを使ってサインアップし、プロジェクトを作成するとこのような開発画面が表示されます。
左からファイルツリー、エディタとターミナル、そして1番右にエミュレーターが表示されています。
FlutterHub はブラウザ上でコーディングからビルド、実行まで全てができるように作られていますので、例えば iPad のようなタブレット端末でも右側に表示されているエミュレーターを使ってアプリ開発ができてしまうのが魅力です。
エミュレーター
エミュレーターは Web, Android, iOS と揃っていますが、この記事を書いている 10/25 時点では
- Web ... 無料で使えるがビルドに失敗するため使えず
- Android ... 月 19.99 ドルの課金が必要。ただしプレビュー期間中はダミークレカ番号で試せる
- iOS ... 未対応
という状態です。
10/24 の時点ではビルドエラーもなく Web, Android ともに実行できていたので、まだプレビュー期間ということもありだいぶ動作が不安定なようです。
触ってみた感じスムーズに動作はするものの、まだマルチタッチができなかったり電源などの物理ボタンがなかったりと単純な操作しかでず、開発物の内容によってはまだまだ不十分でした。これからに期待です。
ファイルツリー
左側のファイルツリーは VSCode や AndroidStudio と同様の見た目で、ファイルもクリックすればすぐに開いてくれるためスムーズに操作できます。
が、現在右クリックは特に何も制御されておらずブラウザデフォルトのメニューが出るのみのため、基本的にファイルの追加や削除は画面上部のボタンで行う作りになっています。
また、ローカルからのファイルアップや GitHub との連携は何もサポートサポートされていないため、画像ファイルなどをプロジェクトに追加する手段が一切ない状況です。またローカルですでに作成済みのファイルなども、1ファイルずつコピペするくらいしか転送する手段がありません。このあたりも「まだまだ開発中」感が出ています。
本格的にアプリ開発をするのであればファイル検索などもほしいところですが、この辺りの機能もこれからのようです。
エディタ
次にエディタですが、タイピング自体はスムーズに行え、ホットリロードもできるようになっているものの、コード補完やオートコレクト、ジャンプ、参照を探すなどといった IDE の便利機能はほぼ用意されていないため、現状はほぼメモ帳状態となっています。
Ctrl + S での保存はできるようで、上の GIF では 1 行ごとに Ctrl + S を打って保存とホットリロードを実行しています。
なお、デバッグ実行やブレークポイントを張って動作を止めたりはできません。
ターミナル
現状、ターミナルでできるのはビルドやアプリのログを見ることのみです。自分でコマンドを打ち込んだり実行したりはできません。
上記の通りブレークポイント張って変数の中身を見たり、ということも今のところできないため、主な用途としては不具合発生時にログをコピーして FlutterHub の issue に貼り付けることくらいでしょうか。
まとめ
というわけで、ざっと触ってみた感じをまとめてみました。
もうお気づきかと思いますが、 10/25 現在 FlutterHub でできることはかなり限られていて、実際の開発で使える日はまだ遠そうです。
しかしながら、 FlutterHub が目指している「 Flutter ユーザーのハブ」が実現し、開発環境も VSCode や AndroidStudio のように使い方ができるようになれば、 Flutter でのアプリ開発のやり方がかなり変わることが予想されますので、これから継続的に機能が追加されていくことに期待、といったところかと思います。
現在はコミュニティの反応を見るフェーズで、開発者はユーザーからのフィードバックを求めているようですので、みなさんも是非触ってみて以下のリポジトリへフィードバックを送ることで、今後の正式リリースの助けになるのではないかと思います。
FlutterHubio/flutterhub - GitHub
開発者プレビューの詳細については FlutterHub ページ右下の (i) ボタンを押すと表示されますので、ぜひ一読してみてください。
日本時間の 10/26 a.m. 03:30 からウェビナーが開催されることや
We will be hosting a Webinars/Q&A Sessions on Friday, October 25th at 1:30 p.m, Central Time (CT)
PRO プランを利用するためのダミークレジットカード番号、
To have FULL access to the FlutterHub platform during the test period, please use the following DUMMY CARD details to upgrade to the PRO account.
その他フィードバックの送り先などが書かれています。
