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

Lynxエンジン上で実際のアプリを動かすためのプロダクションフレームワーク

Lynxは TikTokが作ったクロスプラットフォームUIレンダリングエンジンだ。Reactに似た方法でコードを書けば、ネイティブレンダリングでAndroid/iOS画面を描画する。ただしLynx自体は「レンダリングエンジン」に過ぎない。

実際のアプリを運用するには、ビルドパイプライン、JS↔ネイティブ通信、ページナビゲーション、ストレージ/メディアアクセスなどのインフラが追加で必要だ。Sparklingがこのインフラレイヤーを担当する。

CLIワンライナーでアプリ生成

npm create sparkling-app@latest my-appの一行でAndroid/iOSネイティブシェルを含む完全なプロジェクトが生成される。

npx sparkling buildでLynxバンドルをビルドし、npx sparkling run:androidrun:iosでビルド→インストール→実行を一気に行う。npx sparkling devでホットリロード開発サーバーを起動できる。デフォルトポートは5969 — 電話のキーパッドでLYNXを押した数字だそうだ。

npx sparkling doctorでNode.js、JDK、Android SDK、Xcode、CocoaPodsなどの開発環境を自動診断してくれる。

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

最も興味深い部分だ。TypeScriptの.d.tsファイルに関数宣言を書くだけで、CLIがKotlin/Swiftネイティブコードとts実装を自動生成する。

生成された抽象クラスを継承してネイティブのビジネスロジックだけ実装すれば、JSから直接呼び出し可能。型が両側で保証されるのでランタイムエラーが減る。

ビルトインでNavigation(ルーター)、Storage(キーバリューストア)、Media(カメラ/アルバム/ファイル)が提供される。

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

hybrid://lynxview_page?bundle=main.lynx.bundle&title=Home形式の統合URLスキームで、Lynxページとネイティブページとネイティブ画面を同一にルーティングする。

各ページが独立したバンドルエントリポイントを持つマルチページ構造で、大規模アプリに適している。

既存アプリへの段階的導入(Brownfield)

新規アプリだけでなく、既存Android/iOSアプリにSparklingコンテナを埋め込んで段階的に導入できる。

AndroidはMavenアーティファクト追加後HybridKit.init()Sparkling.build(context).navigate()でコンテナを開く。iOSはCocoaPodsで追加後SPKRouter.create(withURL:)でコントローラーをプッシュするかSPKContainerViewでビューを埋め込む。

現在のステータス

パブリックベータ段階。Apache 2.0ライセンス。Node.js ^22 || ^24、pnpm v10環境で動作する。AndroidはJDK 11以上 + android-34 SDK、iOSはXcode 16+が必要。

動作フロー

1

`npm create sparkling-app@latest`でAndroid/iOSネイティブシェル含むプロジェクト生成

2

TypeScript `.d.ts`に関数宣言 → Sparkling Method CLIがKotlin/Swiftコードを自動生成

3

生成された抽象クラスを継承 → ネイティブロジック実装 → JSから型安全に呼び出し

4

`hybrid://` URLスキームでLynxページとネイティブ画面を統合ルーティング

5

`npx sparkling build` → `run:android/ios`でビルド→インストール→実行を一気に実行

ユースケース

Lynxベースのクロスプラットフォームアプリのプロダクションインフラ構築 既存ネイティブアプリにLynxページを段階的に追加(Brownfield) TypeScript宣言ベースの型安全なネイティブブリッジ実装

参考資料