GitHub Codespacesで実現するブラウザ上でのFlutter開発

GitHub CodespacesとDevcontainerを活用し、環境依存の問題を解消したFlutter開発環境の構築方法を紹介します。 ブラウザ上でFlutterアプリの実装から動作確認、PR作成までを完結する流れや、モバイル端末を使った開発方法について、実例を交えて解説します。場所やデバイスにとらわれない新しいFlutter開発スタイルを提案します。

Transcript

1. GitHub Codespacesで実現する ブラウザ上でのFlutter開発 1 岸本 亮太
2. 岸本 亮太 株式会社サイバーエージェント 2024年12月 中途入社 AI事業本部 所属 GitHub: @ryota-kishimoto
3. 目次 1. GitHub Codespacesについて 2. Dev Container設定とFlutter 3. GitHub CodespacesでのFlutter開発 a. PC b. スマートフォン・タブレット端末 4. まとめ
4. GitHub Codespaces について
5. GitHub Codespacesとは? • GitHubが提供する、ブラウザで利用できるクラウドベースの開発環境 • コンソールが使えるので、LintやFormatはもちろんビルドも可能 • ネットワーク環境必須
6. 120コア時間無料(2コアマシンなら60時間、8コアマシンなら15時間) それ以降は1時間ごとに使用しているマシンの料金がかかる GitHub Codespacesの料金
7. github.devとの違い 任意のリポジトリで「.」キーを押すと、Visual Studio Codeベースエディターで コード閲覧/編集、コミットなどができる機能 違い • コンソールがないので、コマンドが実行できない > LintやFormat、ビルド ができない • 拡張機能は一部のみ対応(ほぼsnippetのみ)
8. GitHub Codespaces を起動してみる 何も設定せずとも起動はできます デフォルト状態なので、Flutterコマンドは実行 できないです。 環境設定をして快適に開発できるようにします！
9. Dev Container設定とFlutter
10. Dev Containerについて コンテナベースで開発環境を構築・共有できる仕組み GitHub Codespacesは環境設定にこの仕組みを使用している GitHub Codespacesでもローカルでも、完全に同じ開発環境を素早く再現可能 チーム間の環境差をなくせる
11. Clineについて Visual Studio CodeやCursor上で動くAIエージェント型の拡張機能 人が開発を行う上で必要な作業を一通り実行することができる Dev Container上で実行すると • コマンド実行の範囲を制限できるため、比較的安全なコマンド実行が可能 • 複数のDev Containerを立ち上げてClineを動かすことが可能
12. Dev Containerの設定方法 Dev Containerの設定は.devcontainer/devcontainer.jsonで行います
13. Dev Containerの設定方法 Dockerfileで環境構築設定を行っている 1. 必須コマンドダウンロード 2. Androidビルド用のパッケージダウンロード 3. asdfをインストール 4. asdf経由でFlutterインストール もしClaude Codeなどのツールを 入れたい場合Dockerfileに記述を追加する
14. Dev Containerの設定方法 GitHub Codespacesで起動するマシンの最低条件を設定可能 この設定の場合8コアCPUマシンが起動される
15. Dev Containerの設定方法 extensionsに記述すると、ビルド時に拡張機 能が自動でインストールされる settingsに記述すると、ユーザー設定に反映 される files.autoSave: onFocusChangeはPC以外 で作業する際に必須なのでここに記述
16. Dev Containerの設定方法 GitHub Actionsと違い、GitHub Codespacesのsecretsはコマンドライン上で表 示することができるので管理に注意
17. GitHub Codespaces での Flutter開発
18. GitHub CodespacesでのFlutter開発 LintやFormat、GitHub Copilotが動く ローカルの開発環境を再現 できている
19. GitHub CodespacesでのFlutter開発 ClineやGitHub Copilot Edits なども使用すること ができます。 Claude CodeなどのCLI上の ツールはインストールすれ ば使用可能です(Dockerfile でセットアップ推奨)
20. GitHub CodespacesでのFlutter開発 色々制約があり、Simulatorや実機と接続しての flutter run は難しそうです... 今回は flutter run -d web-server Flutter Webのビルドを特定のポートで公開することができる実行コマンド を使用します こちらをGitHub Codespaces上で実行するとポートが解放され、ブラウザ上で確 認することができます。
21. GitHub CodespacesでのFlutter開発 Flutter Webのビルドが 5000ポートで起動され接 続できる状態になります。 ポートの設定をprivateか らpublicに変えると誰でも 接続することができるよう になります。
22. WidgetPreview機能 ウィジェットをリアルタイムでプレビュー可能 アプリ全体を起動せず、単一ウィジェットを即座に確認できる機能 storybookのようなもの FlutterWebで起動できそう 実装されればGitHub Codespacesで非常に有用だ と思われる
23. スマートフォン/タブレット端 末での開発
24. タブレット端末とGitHub Codespaces GitHub Codespacesによっ て作業できるようになり、最 低限Webでビルドの確認がで きる キーボードがあればPCの GitHub Codespaces環境と 変わらない
25. スマートフォンとGitHub Codespaces PCとほぼ同じ挙動だが、画面の小ささが非常に厄介 GUIを駆使しての作業が必要 コード記述はしにくいが、AIツールを駆使すれば開発は 可能
26. スマートフォンとGitHub Codespaces UIを非表示にすることで、エディタ欄の視認性をよくすることができる
27. スマートフォンとGitHub Codespaces スマートフォンでもLintやFormatが可能になっています デフォルトだと「Tabキー」が使用できないので、GitHub Copilotの承認はできません。 キーコンフィグを変更すれば承認できます タブレット端末だとキーボードに「Tabキー」があるので承 認できます
28. スマートフォンとGitHub Codespaces ClineやGitHub Copilot Editsを使用することができる(エディタ欄に展開可能) スマートフォンでの主な使用方法になりそうです
29. スマートフォンとGitHub Codespaces PC/スマートフォン/タブレット端末関係なく、GitHub Codespaces上ではファイルをダウンロードすることができ ます Android端末の場合ビルドしたAPKファイルをダウンロード することで実機にインストールすることができます。
30. まとめ • GitHub Codespacesは手軽に使用できて便利。セットアップするだけで多様 なメリットがある • エンジニア以外の人でも環境構築をせずにコード編集が可能 • Dev Container自体がClineなどのAIエージェントと相性が良い。同時に複数 のGitHub Codespacesを起動することもできるので、AIエージェントの動作 を同時進行させるなども可能 • スマートフォンやタブレット端末でも開発が可能になり、外出時などPCを携 帯できない場合にも対応可能。隙間時間で開発できる • WidgetPreviewのstableへの実装が待たれる
31. 参考文献 Codespaces のドキュメント 
 https://docs.github.com/ja/codespaces Codespaces | GitHub 
 https://github.co.jp/features/codespaces いつでもどこでもVS Codeが利用できるGitHub Codespaces https://zenn.dev/yuhei_fujita/articles/github-codespaces-introduction flutter-atlanta-codespace-demo https://github.com/GLStephen/flutter-atlanta-codespace-demo Flutter3.28.0で追加されそうなWidgetPreviewをサキドリ https://zenn.dev/akaboshinit/articles/6082dd655f141c
32. まとめ Configの適用のみでできる部分が大半なのでぜひ試してみてください！ https://github.com/ryota-kishimoto/flutter_codespaces_demo