FlutterをiPadだけで開発したい！

# 前提
遊びや旅行等の予定でPCは持っていきたくない、けど暇を持て余したときに開発したくなるかも…そんなことがきっとあるかもしれません（？）

そんなとき、GithubのCodespacesを使用すればブラウザだけで開発・動作確認ができるようです。一連の流れをブラウザだけでできないか試してみました。

以前作成したflutter公式が公開しているアニメーションのチュートリアルを題材に実行してみたいと思います。

https://github.com/y5347M/animations_tutorial

# 動作環境
- iPad Pro 11 インチ (第 2 世代)
- Google Chromeアプリ

# 試してみたこと
順を追って記載します。

## githubのCodespacesを開く
githubのリポジトリのCodeボタンの下にあるCodespacesタブを開きます。そこに＋ボタンがあるので押すと、ブラウザにvscodeのような画面が立ち上がります。
<img width="800" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2433961/b9b7b7a7-bd12-e57d-12ed-f363051bc460.png">

<img width="800" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2433961/12850e86-19f5-07e9-4b9b-eedf82abc56a.png">

## ターミナルを開く
左のハンバーガーメニューにあります。ターミナルを新しく表示することができます。
<img width="800" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2433961/f46d53a5-dd20-7784-bd00-534adaf994d1.png">

## 拡張機能をあらかじめ入れる
プロジェクトのルートディレクトリの直下に`.devcontainer`ディレクトリを作成します。そこに`devcontainer.json`ファイルを作成し、以下のように記載します。
```json:devcontainer.json
{
	"customizations": {
        "vscode": {
            "extensions": [
                "Dart-Code.dart-code",
                "Dart-Code.flutter"
            ]
        }
    }
}
```

再度Codespacesを開き直します。
左下のCodespacesボタンを押し、その後中央上に表示されるメニューの`Rebuild Container`を押します。
<img width="500" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2433961/9577d1cd-d9fb-5ab9-e7ad-c2943f540c19.png">
<img width="800" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2433961/1b405463-6ff7-1c5a-82c0-e817e8b51488.png">

すると、あらかじめ拡張機能がインストールされています。Japanese Language Packもなぜかインストールされていましたが、理由は検証・調査してないです。
<img width="300" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2433961/0bf69870-c979-b394-d83f-906a0c749788.png">

## flutterを実行する
残念ながら`flutter run`だけでは以下のようなエラーが表示されます。
```console:ターミナル
root@codespaces-73d63d:/workspaces/animations_tutorial# flutter run
Launching lib/main.dart on Linux in debug mode...
CMake Error: CMake was unable to find a build program corresponding to "Ninja".  CMAKE_MAKE_PROGRAM is not set.  You probably need to select a different build tool.
CMake Error: CMAKE_CXX_COMPILER not set, after EnableLanguage
Building Linux application...                                           
the Dart compiler exited unexpectedly.
Exception: Unable to generate build files
```

以下のサイトを参考にしました。

https://medium.com/flutter-community/github-codespaces-code-on-the-go-with-flutter-a6b550b3342b

まずは`devcontainer.json`ファイルを以下のように記載します。
```json:devconainer.json
{
    // 追記から
    "image": "ghcr.io/cirruslabs/flutter:3.10.0-1.3.pre",
    "forwardPorts": [3000],
    // 追記ここまで
	"customizations": {
        "vscode": {
            "extensions": [
                "Dart-Code.dart-code",
                "Dart-Code.flutter"
            ]
        }
    }
}
```

使用するイメージは[こちら](https://github.com/cirruslabs/docker-images-flutter)です。

https://github.com/cirruslabs/docker-images-flutter

ターミナルで次のコマンドを入力します。
```console:ターミナル
flutter run --release -d web-server --web-hostname=0.0.0.0 --web-port=3000
```

するとポートタブにポート：3000でflutterアプリが動作されていることが表示されます。ブラウザマークを押すとブラウザでflutterアプリが表示されます。
<img width="400" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2433961/400b59bd-1949-db7d-b675-b42641a1b020.png">

<img width="400" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2433961/5cb69788-208d-8491-d4cb-74b83a20483d.png">

## 内容を変更してみる
`lib/main.dart`ファイルを編集し、flutterロゴの背景をピンク色にしてみました。（正直なんでもよいです。）
```dart:lib/main.dart
child: Container(
          decoration: const BoxDecoration(color: Colors.pink), // この行を追加
          margin: const EdgeInsets.symmetric(vertical: 10),
          height: _sizeTween.evaluate(animation),
          width: _sizeTween.evaluate(animation),
          child: const FlutterLogo(),
        ),
```

再度、コマンドを入力して実行してみます。反映まで少し時間がかかるので、待ちます。
<img width="400" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2433961/3659d25e-1880-56c3-9271-883494432214.png">

ロゴの背景がピンク色になりました。

## コミットしてみる
`git add .`からの`git commit -m "${コメント}"`でコミットしてみました。
一つ前のコミットは私ですが、最新は謎の`Cirrus CI`という人になっていました…（利用したdocker imageリポジトリ所有者だと思われます。）
怖いので、この後このコミットを取り消しました。
```console:ターミナル
root@codespaces-663b73:/workspaces/animations_tutorial# git log
commit c94c09e787437bf9a0c2c548244c50fd8cb78843 (HEAD -> main, origin/main, origin/HEAD)
Author: Cirrus CI <support@cirruslabs.org>
Date:   Sun May 7 07:02:04 2023 +0000

    fix: color

commit 330118f07b24bbe4f33b673acf7d1effd49535b8
Author: y5347M <81342785+y5347M@users.noreply.github.com>
Date:   Sun May 7 06:42:03 2023 +0000

    fix: change size
```

ただgithubのcontributor上は私だけなので問題なさそうでしょうか。実際に企業でCodespacesを利用する場合は調査してから利用する方が賢明なようです。
<img width="600" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2433961/7d2b56bc-a77e-c0ba-d4ad-ffa35bf0771d.png">

# さいごに
ちょっと外出先で暇を潰したい、という場合にとても有効なようです。また開発環境を統一したいなど、いろいろなシーンでも利用できそうです。
ただやはりローカルで開発するほうが修正と動作確認は早そうですし、Android/iPhone等のエミュレーターを使うならPCですね。今後に期待です。