ScriptWidget：JavaScript と JSX で iOS／macOS のネイティブウィジェットを作る

ウィジェットは、Apple のプラットフォームの中でいまも Swift を書くことを前提としている数少ない領域です。WidgetKit の拡張は Swift のターゲットで、SwiftUI でレイアウトされ、その周辺のツール——プレビュー、タイムライン、App Intents——もすべてその前提の上に成り立っています。ScriptWidget は逆に賭けます。ウィジェットを JavaScript の JSX ツリーとして記述すると、アプリがそのツリーをネイティブの SwiftUI ビューとして描画します。ホーム画面に置かれるのは本物のウィジェットで、WebView でもスクリーンショットでもありません。

Everett（everettjf）によるオープンソースプロジェクトで、MIT ライセンスです。単なるランタイムではありません。Mac 用の開発環境、権限を伴うパッケージ形式、コミュニティギャラリー、AI 支援の生成ループが、同じエンジンの上に載っています。公式サイトはアプリを使うための App Store 版を案内していますが、リポジトリはプラットフォームそのもので、この記事はそのリポジトリについて書いたものです。

何ができるのか

中心となる考え方は 1 回の呼び出しに収まります。vstack、hstack、text、image、gauge といった見慣れた要素でツリーを組み、$render に渡すと、ScriptWidget が各要素を対応する SwiftUI ビューに割り当てます。スタイルは SwiftUI のモディファイアのように読める属性で指定します——フォント、色、フレーム、アラインメント。JavaScript と歩調を合わせるべき Swift ファイルはなく、レイアウトを変えたときに再生成するものもありません。

バージョン管理されたランタイム API が、ウィジェットに通常必要なものを網羅します。ストレージ、ファイル、ネットワーク、デバイス状態、位置情報、ヘルスケア、システム情報、そしてデータソースです。インタラクティブな要素も静的表示の先まで対応します——リンク、ボタン、トグル、App Intents、Live Activity、コントロールウィジェット——つまりウィジェットを描くのと同じ言語で、タップしたときの動作も書けます。

ランタイムの周囲には、ライブラリではなくプラットフォームたらしめている部品が並びます。テンプレートギャラリーは動く出発点を与え、コミュニティギャラリーは検証済みのウィジェットと AI Skill をワンクリックで導入でき、データソースプラグインの仕組みはサードパーティ API を宣言的なコネクタに変え、Mac 上のリクエストラボで試せます。パッケージはバージョン管理され、従来のスクリプトも見捨てられずに動き続けます。

インストール方法

ただ ScriptWidget を使いたいだけなら、公式の App Store ページから入手してください。ソースからのビルドが必要なのは、ランタイム、Studio、ギャラリーなどプラットフォーム自体を扱う場合だけで、その場合は Xcode が必要です。現在の開発ブランチは Xcode 27、ScriptWidget Studio は macOS 26、iOS ウィジェットは iOS 16 以降を要求します。Homebrew の formula はありません。

git clone https://github.com/everettjf/ScriptWidget.git
cd ScriptWidget

# iOS app + widget + share extension
open iOS/ScriptWidget.xcodeproj

# macOS app + widget
open macOS/ScriptWidgetMac.xcodeproj

スクリプトの保存が機能する前に、2 つ有効にする必要があります。iCloud.ScriptWidget コンテナと group.everettjf.scriptwidget アプリグループです。その後ビルドして実行し、Shared/ScriptWidgetRuntime/Resource/Script.bundle/ にある同梱のサンプルスクリプトを読んでみてください。api、component、template のフォルダに分かれていて、自分で何か書く前にランタイムが何を提供するかを知る良い地図になります。

使い方

ScriptWidget Studio は、ビルドとプレビューを繰り返す作業に対する Mac 側の答えで、作成作業の大半はここで行われます。ウィンドウは左がファイルツリー、中央が CodeMirror 6 のエディタ、右がプレビューです。エディタにはスキーマ補完、診断、フォーマットがあり、下にランタイムコンソールと実行時間の情報があり、1 つのウィジェットファミリーでも全ファミリーでもライブプレビューできます。設定パネルから widget.json——ファミリー、権限、ネットワークドメイン、プラグイン、プレビュー用パラメータ——を編集できるので、マニフェストを手書きする必要はありません。

初回起動のガイドは、すぐ自分のプロジェクトに進むつもりでも一度走らせる価値があります。完全なチュートリアル用ウィジェットを作り、それを編集してデスクトップに追加するまでをおよそ 5 分で案内してくれます。そこからの流れは短いものです——main.jsx を書き、プレビューし、調整する。

$render(
  <vstack frame="max">
    <text font="title">Hello, ScriptWidget! 👋</text>
  </vstack>
);

ランタイムは API をドル記号付きのグローバルとして公開しているので、読んでから使うまでの距離が短い。とくに見る価値があるのはストレージで、ウィジェットが更新をまたいで状態をどう保つかがわかります。

$storage.setString("greeting", "Hello ScriptWidget");
const greeting = $storage.getString("greeting");

$render(
  <vstack frame="max" background="#0f172a">
    <text font="caption" color="#94a3b8">Storage</text>
    <text font="title3" color="#e2e8f0">{greeting}</text>
  </vstack>
);

スクリーンショット

プロジェクトは視覚的にも自己文書化されています。Mac 向けのセットでは、ファイルツリー、JSX エディタ、ライブプレビューが並んだ Studio の姿——この記事のカバー画像の元になったのと同じウィンドウ——に加えて、API の範囲、コンポーネント、テンプレートギャラリーのページが並びます。iOS 向けのセットでは、スマートフォン上のコードエディタ、ホーム画面のウィジェット、small／medium／large のウィジェットを並べたマーケットプレイスのグリッドが見られます。どちらのセットもリポジトリの Resource/ に置かれているので、画像はストアの掲載ページだけでなくソースツリーにも存在します。

仕組み

ランタイムは JavaScriptCore と Babel による変換です。あなたの JSX は、要素オブジェクトのツリーを組み立てる JavaScript にコンパイルされ、ネイティブ側のホストがそのツリーをたどって対応する SwiftUI ビューを生成します。ここに WebView はなく、後からラスタライズされるものでもありません。ホーム画面に載るビューは、本物の SwiftUI プリミティブから WidgetKit が構成したものです。だからこそ、ウィジェットの画像ではなくウィジェットとして振る舞えます——ティントモードに従い、ウィジェットファミリーに適応し、システム自身の描画に参加します。

この違いこそ、このプロジェクトを取り上げる理由です。WebView や静的なビットマップで描く JavaScript 製ウィジェットは、スクリーンショットでは正しく見えても、重要なテスト——ダークモード、ティントモード、より大きなファミリー、アクセシビリティ——ではすべて失敗しかねません。JSX をそのまま SwiftUI に描画すれば、その種の問題を根本から避けられます。同じスクリプトが iPhone、iPad、Mac で変更なしに動くのも、同じ理由からです。

パッケージとギャラリー

ウィジェットは Scripts/<PackageName>/ の下のフォルダで、iCloud とアプリグループを通じて同期されます。新しいプロジェクトは Package 2.0 を使い、widget.json が権威あるマニフェストになります。エントリポイント、対応ファミリー、要求する権限、到達してよいネットワークホスト、使うデータソースプラグインを記述します。これは利便性というよりセキュリティの形です——パッケージが必要なものを宣言し、ランタイムがそれに従わせられます。

コミュニティギャラリーも同じ形式の上に成り立っています。パッケージは検証され、導入はワンクリックで、同じカタログが AI Skill も扱います——生成ループ用の再利用可能な指示セットで、インポート、作成、エクスポート、共有ができます。widget.json より前のパッケージも読める状態を保ち、壊れるのではなくインポートとエクスポートの際に移行します。

AI 支援による作成

AI 機能は、エディタに継ぎ足したチャットウィンドウではありません。OpenAI 互換モデルに対してプロバイダープロファイルを設定し、Studio の中でウィジェットを生成・実行・診断・改良します。そのループにはコンソールとプレビューが組み込まれています。繰り返し使えるようにしているのが Skill です。プロンプトのたびに自分の流儀を説明し直す代わりに、共有の指示セットとしてプロジェクトと一緒に持ち歩けます。

弱点

まず範囲から。これは意図的なものです。watchOS と visionOS は現在のロードマップに入っておらず、README もそれを明言しています。つまりこれは iPhone、iPad、Mac のウィジェットのための道具で、Apple のプラットフォーム全体を覆うものではありません。Studio も Mac アプリなので、ウィジェットの行き先がスマートフォンやタブレットであっても、作成には Mac の前に座る必要があります。

次に要求水準です。現在の開発ブランチは Xcode 27、Studio は macOS 26、ウィジェットは iOS 16 を要求します——古いマシンに向けたものは何もありません。ソースからのビルドは、パッケージマネージャのコマンドではなく Xcode プロジェクトをクローンして動かすことを意味し、プロジェクトはそれを取り繕っていません。

もう 2 点、小さな注意があります。AI 生成の経路は自分で用意した OpenAI 互換プロバイダーを必要とするので、その機能はアプリが提供するものではなく、持ち込むモデルとキー次第です。そしてギャラリーは機能であると同時に信頼の仕組みです。検証済みかどうかにかかわらず、他人のウィジェットを入れることは他人の JavaScript を実行するということで、Package 2.0 がわざわざ権限とホストの許可リストを宣言するのは、まさにそのためです。

ライセンス：何ができるか

ソースコードは MIT ライセンス、© Everett です。実務的な読み方は短く、寛容です。商用利用も改変も再配布も自由で、クローズドソースのアプリに組み込むこともできます。ただし、実質的な部分をコピーするときは著作権表示とライセンス文を残す必要があります。コピーレフトはなく、変更を公開する義務もありません。

例外が 1 つあり、見落としやすいので明記しておきます。MIT が対象とするのはソースコードです。ScriptWidget の名称、ロゴ、スクリーンショット、App Store のマーケティング素材は除外され、作者に留保されます。プラットフォームをフォークして配布することはできますが、それを ScriptWidget と称したり、ブランド画像を流用したりはできません。

ビルドすべきか

App Store の開発者が自分のために作ってくれるはずのないウィジェットをホーム画面に置きたいと思ったことがあり、JavaScript に抵抗がなければ、Apple のプラットフォームでそこへ至る最短の道です。しかも結果が本物のネイティブで、ウィジェットの服を着た WebView ではないことが、この回り道に価値を持たせます。開発者にとって面白いのはランタイムです。宣言的なツリーを SwiftUI に対応づける JavaScriptCore ホストが、権限を考えるパッケージ形式に包まれている——ウィジェットを出荷しないとしても、研究する価値のある形です。制約は正直に、最初から示されています——watchOS と visionOS はなし、Studio は Mac 専用、Xcode の要求水準は高め——なので、判断は主にそのどちら側に自分がいるかで決まります。

# Open the App Store listing:
open https://apps.apple.com/us/app/scriptwidget/id1555600758