MaemaemaeMaemaemae

WebF Go - WebスタックでFlutterネイティブアプリを構築

WebF Go - WebスタックでFlutterネイティブアプリを構築

WebF Goとは

WebF GoはWebFエンジンをプリビルドしたネイティブアプリ。URLからWebアプリを読み込み、カスタムFlutterアプリを構築せずに実機でテストできるツールです。

開発背景

従来のクロスプラットフォーム開発では以下の課題がありました:

  • フレームワーク特有のAPI: 新しい構文や設計パターンの学習が必要
  • WebViewの制約: パフォーマンスとプラットフォーム間の差異
  • 書き直しコスト: 既存のWebコードベースを再実装

WebFはこれらの課題を解決し、既存のWebスタック(React/Vue/Svelte + Vite + Tailwind)をそのままモバイル・デスクトップで実行可能にします。

WebFの基本アーキテクチャ

コア技術スタック

WebFは2つの主要レイヤーで構成されています:

【JavaScript実行層】
- QuickJS: ES6+対応の軽量JavaScriptエンジン
- W3C/WHATWG DOM実装
- CSSOM(CSS Object Model)実装

【レンダリング層】
- Flutterベースのレイアウトエンジン
- ハードウェアアクセラレーション
- システムWebViewに依存しない独自実装

動作の仕組み

WebFはブラウザではなく、アプリケーションランタイム。Web技術でネイティブアプリを構築するための最適化された実行環境です。

Web開発
  ↓
React/Vue/Svelteコード
  ↓
Vite/Webpack
  ↓
WebF Runtime
  ↓
Flutter Rendering
  ↓
iOS/Android/Desktop

主な特徴

1. ネイティブ級のパフォーマンス

起動時間:

  • コールドスタート: 100ms未満
  • WebViewオーバーヘッドなし
  • Flutterのレンダリングパイプラインと直接統合

レンダリング:

  • 60fps/120fpsのスムーズなアニメーション
  • 専用スレッドでJavaScript実行
  • UIスレッドをブロックしない設計

2. 既存のWebスタックをそのまま利用

# 通常のWeb開発フロー
npx create-react-app my-app
# または
npm create vite@latest my-app -- --template vue

# WebF Goで即座に確認可能
npm run dev -- --host

対応フレームワーク:

  • React
  • Vue
  • Svelte
  • Solid
  • Tailwind CSS
  • その他npmエコシステム

3. W3C/WHATWG準拠

標準的なWeb技術を実装:

  • HTML/CSS/DOM
  • JavaScript ES6+
  • 標準ブラウザAPI

これにより、AIコーディングツール(Claude、ChatGPT、GitHub Copilot)との相性も良好です。

WebF Goの使い方

インストール

iOS:

  • App Storeから「WebF Go」をダウンロード

Android:

  • Google Play Storeから「WebF Go」をダウンロード

基本的な開発フロー

# 1. Webプロジェクトの作成
npm create vite@latest my-webf-app -- --template react

# 2. プロジェクトディレクトリに移動
cd my-webf-app

# 3. 依存関係のインストール
npm install

# 4. 開発サーバーを起動(ネットワークURLで)
npm run dev -- --host

WebF Goアプリでの表示:

1. WebF Goアプリを起動
2. 表示されたNetwork URLをスキャン
   例: http://192.168.1.100:5173
3. アプリが即座にロード
4. ホットリロード対応で変更が即反映

Flutterプロジェクトへの組み込み

# WebFパッケージの追加
flutter pub add webf

// 基本的な使用例
import 'package:webf/webf.dart';

class MyWebFApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: WebF(
        bundle: WebFBundle.fromUrl('https://myapp.com/'),
      ),
    );
  }
}

最新アップデート(2025年)

JavaScript Runtime (v0.21.1)

QuickJSアップグレード (2025-04-26版):

  • WeakRef & FinalizationRegistry
  • モジュールでのトップレベルawait
  • Promise.withResolvers
  • Array.prototypeの新メソッド(with, toReversed, toSpliced, toSorted)

ルーティング機能 (v0.21.x - 0.23.x)

ハイブリッドルーター対応:

// Flutter側
WebFSubView(
  route: '/products/123',
)

// JavaScript側
// ルーティングがネイティブナビゲーションバーと同期

go_routerパッケージとの統合:

  • Flutterナビゲーションとの完全な同期
  • ライフサイクルイベント(didPush/didPushNext)

パフォーマンス改善 (v0.23.4)

CSS性能の大幅向上:

再計算時間: 209ms → 32ms (84.7%削減)
処理時間:   203ms → 25ms (87.8%削減)
処理呼び出し: 462回 → 292回 (37%削減)

最適化手法:

  • id/class/属性インデックスによる対象絞り込み
  • セレクタのメモ化
  • 祖先関係の高速パス

メモリ管理:

  • ネイティブオブジェクトのバッチ解放
  • HTTPキャッシュのSHA-256ハッシュ化
  • QuickJSバイトコードキャッシュ

実践的なユースケース

1. マルチページアプリケーション

// Flutter側: go_routerとの統合
GoRouter(
  routes: [
    GoRoute(
      path: '/home',
      builder: (context, state) => WebFSubView(route: '/home'),
    ),
    GoRoute(
      path: '/products/:id',
      builder: (context, state) => WebFSubView(
        route: '/products/${state.params['id']}',
      ),
    ),
  ],
)

2. Flutterウィジェットとの統合

ネイティブUI要素が必要な部分では、FlutterウィジェットをカスタムHTML要素として公開可能:

# webf codegen で型安全なバインディング生成
webf codegen --input widgets.d.ts --output lib/

3. OTA(Over-The-Air)アップデート

// リモートコンテンツの読み込み
WebFBundle.fromUrl('https://cdn.myapp.com/v1.2.0/index.html')

// アップデート手順:
// 1. 新バージョンをビルド
// 2. CDNにデプロイ
// 3. 次回起動時に自動更新
// 4. App Storeの審査不要

CI/CDとの統合

GitHub Actions例

name: Build and Deploy WebF App

on:
  push:
    branches: [main]

jobs:
  build-flutter:
    runs-on: macos-latest
    steps:
      - uses: actions/checkout@v3
      - uses: subosito/flutter-action@v2
        with:
          flutter-version: '3.x'
      - run: flutter pub get
      - run: flutter build ios --release
      - run: flutter build appbundle --release

  deploy-web-content:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '18'
      - run: npm ci
      - run: npm run build
      - name: Deploy to CDN
        run: aws s3 sync dist/ s3://your-bucket/

ライセンスと商用利用

ライセンス体系

オープンソース(GPL-3.0):

  • ✅ npmパッケージ開発者は任意のライセンス使用可能
  • ⚠️ アプリケーションはGPL-3.0に準拠(ソースコード公開)

商用ライセンス:

  • ✅ クローズドソース商用アプリで使用可能
  • ✅ GPL制約からの解放
  • ✅ エンタープライズサポート
  • ✅ 早期リリースへのアクセス

詳細: OpenWebF Enterprise License

WebF vs Flutter Web vs WebView

比較表

| 特徴          | WebF          | Flutter Web   | WebView       |
|--------------|---------------|---------------|---------------|
| 起動時間      | < 100ms       | 中程度        | 速い          |
| パフォーマンス | ネイティブ級   | ネイティブ級   | 制約あり      |
| SEO対応      | ❌            | 部分的        | ❌            |
| OTA更新      | ✅            | ✅            | ✅            |
| オフライン    | ✅            | ✅            | 部分的        |
| Web技術      | React/Vue等   | ❌            | React/Vue等   |
| コンシステンシー | 高い        | 最高          | プラットフォーム依存 |

使い分けの目安

WebFが適している場合:

  • 既存のWebコードベースを活用したい
  • React/Vueの開発経験を活かしたい
  • 迅速なOTAアップデートが必要
  • AIコーディングツールを活用したい

Flutter Webが適している場合:

  • SEOが重要
  • Web版も必要
  • Dartでの統一開発を重視

WebViewが適している場合:

  • シンプルなコンテンツ表示
  • 最小限のリソース使用

よくある課題と解決策

課題1: npm パッケージの互換性

解決策:

  • 公式の互換性テストに協力
  • 問題があればGitHubでissue報告
  • コミュニティで検証された実績を確認

課題2: デバッグ環境

解決策:

  • Chrome DevToolsでDOM構造とCSSをインスペクト
  • console.inspect() APIでJavaScriptオブジェクトを詳細確認
  • Flutterの標準DevToolsも併用可能

課題3: ネイティブ機能へのアクセス

解決策:

// Dartプラグインシステムでネイティブ機能を公開
// JavaScriptから呼び出し可能

今後の展開

WebFは現在ベータ版。以下の改善が進行中です:

  • Web標準APIの更なる対応
  • npmパッケージとの互換性向上
  • パフォーマンスの継続的な最適化
  • ドキュメントとサンプルの充実

まとめ

WebF Goは、Web開発の知見とツールをそのままネイティブアプリ開発に活用できる画期的なソリューションです。

主な利点:

  • 既存のWebスタック(React/Vue/Svelte)をそのまま使用
  • ネイティブ級のパフォーマンス(100ms未満の起動)
  • 柔軟なOTAアップデート
  • AIコーディングツールとの相性が良い

実践的な用途:

  • クロスプラットフォームアプリ開発
  • Web技術を活用したモバイルアプリ
  • 既存Webアプリのモバイル展開
  • 迅速なプロトタイピング

WebF Goアプリで実際に試しながら学習することで、効率的に習得できます。

参考資料

Flutter 3.13.x以降、Node.js 18.x以上を基準としています。

タグ

WebFFlutterReactVueクロスプラットフォームWeb技術