ChromiumでFlutter Web開発環境構築

Flutter WebアプリケーションをChromiumでデバッグ実行できるように設定します。通常のChromeではデバッグ実行に制限があるため、Chromiumを使用します。

Chromiumのインストール

brew install chromium

macOSのセキュリティ設定

アプリケーション起動エラーの対処

インストール後、Chromiumを起動すると以下のエラーが表示される場合があります：

“Chromium.app”は壊れているため開けません。ゴミ箱に入れる必要があります。

これは拡張属性が原因なので、以下のコマンドで解決できます：

xattr -rc /Applications/Chromium.app

環境変数の設定

.zshrcに以下を追加：

# Chromium設定
export PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
export PUPPETEER_EXECUTABLE_PATH=`which chromium`
export CHROME_EXECUTABLE=/opt/homebrew/bin/chromium

# Google API設定（オプション）
export GOOGLE_API_KEY=YOUR_API_KEY
export GOOGLE_DEFAULT_CLIENT_ID=YOUR_CLIENT_ID
export GOOGLE_DEFAULT_CLIENT_SECRET=YOUR_CLIENT_SECRET

設定を反映：

source ~/.zshrc

VSCode設定

VSCodeでFlutter開発時にChromiumを使用できるようにします。

.vscode/settings.jsonまたは個人設定に追加：

{
  "dart.env": {
    "CHROME_EXECUTABLE": "/opt/homebrew/bin/chromium"
  }
}

この設定により、VSCodeのデバイスリストにChromeが表示されます。

Flutter Webアプリの実行

デバッグ実行

# Chromiumでデバッグ実行
flutter run -d chrome

# ポートを指定して実行
flutter run -d chrome --web-port 3000

VSCodeからの実行

VSCodeでFlutterプロジェクトを開く
実行とデバッグパネルでデバイスとして「Chrome」を選択
F5キーまたは実行ボタンでデバッグ開始

Google APIキー欠落メッセージの解消（オプション）

Chromiumを起動すると「Google APIキーが欠落しています」というメッセージが表示される場合があります。

対処方法1：Chrome flagsの設定

Chromiumでchrome://flags/にアクセスし、以下のフラグを有効化：

enable-experimental-webassembly-stack-switching
enable-webassembly-garbage-collection

対処方法2：APIキーの取得と設定

Google Cloud ConsoleでAPIキーを作成し、環境変数に設定することで解消できます。

トラブルシューティング

Chromiumが見つからない場合

# Chromiumのパスを確認
which chromium

# パスが異なる場合は環境変数を調整
export CHROME_EXECUTABLE=/path/to/chromium

M1/M2 Macの場合

Apple Siliconの場合、パスが異なることがあります：

# M1/M2 Mac
export CHROME_EXECUTABLE=/opt/homebrew/bin/chromium

# Intel Mac
export CHROME_EXECUTABLE=/usr/local/bin/chromium

Flutter doctorでChromeが認識されない場合

# Flutter設定をリセット
flutter config --clear-features

# Chromeのパスを明示的に設定
flutter config --chrome-executable=/opt/homebrew/bin/chromium

開発のベストプラクティス

ホットリロード: Chromiumでもホットリロードが使用可能
DevTools: Flutter DevToolsを使用してパフォーマンス分析が可能
レスポンシブデザイン: Chromiumの開発者ツールでデバイスエミュレーションを活用