Sparkling - TikTokのクロスプラットフォームインフラ

 (github.com/tiktok)
4 ポイント 投稿者 GN⁺ 2026-03-16 | 1件のコメント | WhatsAppで共有
  • TikTokが自社アプリで Lynxエンジンをプロダクション規模で運用 するために構築したインフラレイヤーをオープンソースとして公開。アプリのスキャフォールディングからビルド、ネイティブブリッジ、ナビゲーションまで統合して提供
  • React Nativeに Expo が必要であるのと同様に、Lynxエンジン上で実際のアプリを運用するためのプロダクション向けインフラフレームワーク
  • 単一のCLIコマンドで、Android/iOSの ネイティブシェルを含む完全なLynxアプリプロジェクト を即座に生成し、ビルド→インストール→実行を一括で実行
  • TypeScript宣言だけを書けばKotlin/Swiftコードを自動生成する Sparkling Method により、型安全なJS↔ネイティブブリッジを実装
  • hybrid:// 形式の 統合URLスキームナビゲーション により、Lynxページとネイティブ画面の間のルーティングを単一の体系で処理

Sparklingの位置づけ: Lynxとの関係

  • Lynx はTikTokが公開したクロスプラットフォームUIレンダリングエンジンで、Reactに似た形でコードを書くと ネイティブレンダリング によりAndroid/iOSの画面を描画するフレームワーク
  • Lynx自体は「レンダリングエンジン」であるため、実際のアプリ運用には ビルドパイプライン、ネイティブ↔JS通信、ページナビゲーション、ストレージ/メディアアクセス などのインフラが追加で必要
  • Sparklingがこの インフラレイヤー の役割を担い、Lynxエンジンの上に載るアプリフレームワーク
  • React Nativeだけではアプリを作りにくく Expo が必要であるのと同様に、Lynxだけでは大規模アプリ運用が難しく、Sparklingがそのギャップを埋める関係
  • 現在は パブリックベータ 段階で、API拡充とドキュメント改善が進行中

アプリのスキャフォールディングとビルドCLI

  • npm create sparkling-app@latest my-app の1行で、Android/iOSネイティブシェルを含む 完全なプロジェクトを生成
  • npx sparkling build でLynxバンドルをビルドし、npx sparkling run:android / run:ios で ビルド→インストール→実行を一括で 実施
  • npx sparkling dev で ホットリロード対応の開発サーバー を起動（デフォルトポートは5969、携帯電話のキーパッドでLYNXを押した数字）
  • npx sparkling doctor でNode.js、JDK、Android SDK、Xcode、CocoaPodsなど 開発環境を自動診断
  • npx sparkling autolink でSparkling MethodモジュールのGradle/Podfile 依存関係を自動登録 し、ネイティブレジストリコードを生成
  • npx sparkling copy-assets でコンパイル済みバンドルをAndroid/iOSの リソースディレクトリへコピー

Sparkling Method — 型安全なJS↔ネイティブブリッジ

  • TypeScriptの .d.ts ファイルに 関数宣言だけを記述 すると、CLI（sparkling-method-cli codegen）がKotlin/SwiftネイティブコードとTS実装を 自動生成
  • 生成された抽象クラスを継承して ネイティブのビジネスロジックだけを実装 すれば、JSからすぐに呼び出し可能
  • 組み込みMethodとして Navigation（ルーター）、Storage（キー・バリューストア）、Media（カメラ/アルバム/ファイル） を提供
  • パッケージ名は sparkling-<module> 形式、メソッド名は <module>.<action>（例: router.open）という規約
  • npmで配布後、npm install + npx sparkling autolink だけで利用側の統合が完了

スキームベースの統合ナビゲーション

  • hybrid://lynxview_page?bundle=main.lynx.bundle&title=Home 形式の 統合URLスキーム により、Lynxページとネイティブ画面を同じようにルーティング
  • 各ページが独立したバンドルエントリポイントを持つ マルチページ構成 で、大規模アプリに適した設計
  • navigate() 関数では事前定義キーに加えて カスタムパラメータ もスキームURLに渡せる

既存アプリへの段階的統合（Brownfield）

  • 新規アプリだけでなく、既存のAndroid/iOSアプリにSparklingコンテナを埋め込む ことで段階的な導入が可能
  • Android: Mavenアーティファクト（com.tiktok.sparkling:sparkling:2.0.0）を追加後、HybridKit.init() を初期化 → Sparkling.build(context).navigate() で コンテナを開く
  • iOS: CocoaPods（pod 'Sparkling', '2.0.0'）を追加後、SPKRouter.create(withURL:) で コントローラをpush または SPKContainerView で ビューを埋め込み
  • ビルドした .lynx.bundle ファイルをネイティブアプリのアセットにコピーし、bundle= パラメータで該当バンドルを指定

プロジェクト構成

  • packages/sparkling-sdk: コア Sparkling SDK
  • packages/sparkling-method: Sparkling Method SDK（JS↔ネイティブブリッジ）
  • packages/methods: 組み込みSparkling methodsパッケージ（Navigation、Storage、Media）
  • packages/sparkling-app-cli: Sparklingアプリの ビルドおよび実行CLI
  • packages/create-sparkling-app: アプリスキャフォールディングCLI
  • packages/sparkling-method-cli: Sparkling Methodの コード生成ツール群
  • packages/sparkling-types: GlobalProps型 定義を単一パッケージに統合
  • packages/playground: ローカル開発用Playgroundアプリ

技術スタックと環境

  • Node.js ^22 || ^24、pnpm v10.26.0環境
  • Android: JDK 11以上、android-34 SDKが必要
  • iOS: Xcode 16+、Ruby ≥2.7 <3.4、CocoaPodsが必要
  • TypeScript、Swift、Kotlin、JavaScriptなどのマルチ言語構成
  • Apache 2.0ライセンス

関連記事

1件のコメント

 
freedomzero 2026-03-16

Lynx - Web技術ベースのネイティブアプリ開発ツール - GeekNews
Lynx - 웹 기술 기반 네이티브 앱 개발 도구

一緒に見るとよい記事に出てこないですね。