あなたのAPIで動く、ライブウィジェット

気になる変化が、ひと目でわかる。

Glance Widgets は、あらゆるHTTPS APIをホーム画面のリアルタイムな美しいウィジェットに変えます。ドットマトリクス、テキスト、曲線、画像、Liquid Glassを、1つのJSONレスポンスで組み立てられます。

App Storeでダウンロード APIドキュメントを読む

回のAPIリクエスト: 1; 回のAPIリクエスト
通りの表現: 通りの表現
種類のウィジェット素材、 Liquid Glass対応: 6; 種類のウィジェット素材、 Liquid Glass対応
台の中継サーバー、プライバシーを守る: 0; 台の中継サーバー、プライバシーを守る

9:41

GET /api → 200

タイムライン更新

HMAC署名

事例

どんな用途にも、どんなスタイルにも。

下のウィジェットはすべて、データからリアルタイムに描かれています。APIが返す内容が、そのままウィジェットになります。選んで、その裏側のデータを見てみましょう。

リリース監視

デプロイ後のリクエストマトリクス、レプリカの状態、P95。

大 · ambient

裏側のデータ · JSON

{
  "protocol": 1,
  "pixels": [
    [
      { "empty": true }
    ]
  ],
  "data": {
    "icon": {
      "frame": {
        "left": 0.07,
        "top": 0.065,
        "width": 0.07,
        "height": 0.07
      },
      "zIndex": 2,
      "content": {
        "icon": "ph_rocket",
        "iconCodePoint": 58366,
        "iconFont": "phosphorBold"
      },
      "style": { "color": "#8EC8FB" }
    },
    "service": {
      "frame": { "left": 0.16, "top": 0.06, "width": 0.8, "height": 0.08 },
      "zIndex": 2,
      "content": { "text": "Checkout · v4.12.0" },
      "style": {
        "color": "#FFFFFF",
        "fontWeight": "600",
        "horizontalAlignment": "left",
        "verticalAlignment": "center",
        "fontSizeRatio": 0.05
      }
    },
    "state": {
      "frame": { "left": 0.07, "top": 0.15, "width": 0.86, "height": 0.07 },
      "zIndex": 2,
      "content": { "text": "Deployed 14:20 · watching" },
      "style": {
        "color": "#8EA3C4",
        "fontWeight": "500",
        "horizontalAlignment": "left",
        "verticalAlignment": "top",
        "fontSizeRatio": 0.038
      }
    },
    "requests": {
      "frame": { "left": 0.07, "top": 0.27, "width": 0.86, "height": 0.38 },
      "zIndex": 1,
      "content": {
        "default": { "color": "#FFFFFF", "opacity": 0.06, "cornerRadius": 0.3 },
        "layout": { "gapMode": "near", "cellAspectRatio": 0.9 },
        "pixels": [
          [null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null],
          [null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null],
          [
            null,
            null,
            null,
            null,
            null,
            null,
            { "color": "#8EC8FB", "opacity": 0.9500000000000001 },
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            { "color": "#8EC8FB", "opacity": 0.9500000000000001 },
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null
          ],
          [
            null,
            null,
            null,
            null,
            null,
            { "color": "#8EC8FB", "opacity": 0.9 },
            { "color": "#8EC8FB", "opacity": 0.9 },
            { "color": "#8EC8FB", "opacity": 0.9 },
            { "color": "#8EC8FB", "opacity": 0.9 },
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            { "color": "#8EC8FB", "opacity": 0.9 },
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null
          ],
          "… 6 more"
        ]
      }
    },
    "rule": {
      "frame": { "left": 0.07, "top": 0.7, "width": 0.86, "height": 0.02 },
      "zIndex": 1,
      "content": { "direction": "horizontal" },
      "style": {
        "color": "#FFFFFF",
        "opacity": 0.16,
        "strokeWidth": 1,
        "pattern": "dotted"
      }
    },
    "replicasLabel": {
      "frame": { "left": 0.07, "top": 0.75, "width": 0.28, "height": 0.06 },
      "zIndex": 2,
      "content": { "text": "Replicas" },
      "style": {
        "color": "#8EA3C4",
        "fontWeight": "500",
        "horizontalAlignment": "left",
        "verticalAlignment": "top",
        "fontSizeRatio": 0.034
      }
    },
    "errorsLabel": {
      "frame": { "left": 0.37, "top": 0.75, "width": 0.28, "height": 0.06 },
      "zIndex": 2,
      "content": { "text": "Error rate" },
      "style": {
        "color": "#8EA3C4",
        "fontWeight": "500",
        "horizontalAlignment": "left",
        "verticalAlignment": "top",
        "fontSizeRatio": 0.034
      }
    },
    "p95Label": {
      "frame": { "left": 0.67, "top": 0.75, "width": 0.28, "height": 0.06 },
      "zIndex": 2,
      "content": { "text": "P95" },
      "style": {
        "color": "#8EA3C4",
        "fontWeight": "500",
        "horizontalAlignment": "left",
        "verticalAlignment": "top",
        "fontSizeRatio": 0.034
      }
    },
    "replicas": {
      "frame": { "left": 0.07, "top": 0.82, "width": 0.28, "height": 0.12 },
      "zIndex": 2,
      "content": { "text": "6/6" },
      "style": {
        "color": "#7EDDB5",
        "fontWeight": "700",
        "horizontalAlignment": "left",
        "verticalAlignment": "top",
        "fontSizeRatio": 0.075
      }
    },
    "errors": {
      "frame": { "left": 0.37, "top": 0.82, "width": 0.28, "height": 0.12 },
      "zIndex": 2,
      "content": { "text": "0.02%" },
      "style": {
        "color": "#FFFFFF",
        "fontWeight": "700",
        "horizontalAlignment": "left",
        "verticalAlignment": "top",
        "fontSizeRatio": 0.075
      }
    },
    "p95": {
      "frame": { "left": 0.67, "top": 0.82, "width": 0.28, "height": 0.12 },
      "zIndex": 2,
      "content": { "text": "183 ms" },
      "style": {
        "color": "#FFFFFF",
        "fontWeight": "700",
        "horizontalAlignment": "left",
        "verticalAlignment": "top",
        "fontSizeRatio": 0.075
      }
    }
  },
  "layers": [
    { "id": "remote:icon", "type": "icon", "dataPath": "data.icon" },
    { "id": "remote:service", "type": "text", "dataPath": "data.service" },
    { "id": "remote:state", "type": "text", "dataPath": "data.state" },
    {
      "id": "remote:requests",
      "type": "matrix",
      "dataPath": "data.requests"
    },
    { "id": "remote:rule", "type": "line", "dataPath": "data.rule" },
    {
      "id": "remote:replicasLabel",
      "type": "text",
      "dataPath": "data.replicasLabel"
    },
    {
      "id": "remote:errorsLabel",
      "type": "text",
      "dataPath": "data.errorsLabel"
    },
    { "id": "remote:p95Label", "type": "text", "dataPath": "data.p95Label" },
    { "id": "remote:replicas", "type": "text", "dataPath": "data.replicas" },
    { "id": "remote:errors", "type": "text", "dataPath": "data.errors" },
    { "id": "remote:p95", "type": "text", "dataPath": "data.p95" }
  ]
}

サービス稼働率今日の注文CIビルド家庭の電力空気の質潮汐ウィンドウ今年の進捗習慣の継続サーバー負荷月間目標リリース監視ピクセルアート旅行のToDo今日の売上サービス稼働率今日の注文CIビルド家庭の電力空気の質潮汐ウィンドウ今年の進捗習慣の継続サーバー負荷月間目標リリース監視ピクセルアート旅行のToDo今日の売上

しくみ

JSONを1つ返すだけ。あとはおまかせ。

検証からデータのバインド、ネイティブ描画まで Glance Widgets が担当し、システムの更新スケジュールに合わせて最新に保ちます。

01 · リクエストHTTPS

リクエスト

ウィジェットが、ファミリー、キャンバスサイズ、アスペクト比とともにHTTPSエンドポイントを呼び出します。描くべき領域に合わせて描けます。

GET https://api.acme.dev/widget
  ?gw_protocol=1
  &gw_platform=ios
  &gw_family=small
  &gw_canvas_width_pt=158.00
  &gw_canvas_height_pt=158.00
  &gw_aspect_ratio=1.0000
  &gw_context=app_preview

02 · レスポンス200 · application/json

レスポンス

ドットマトリクスに、テキスト、曲線、画像、アイコン、線、図形を必要なだけ重ねて返します。

{
  "protocol": 1,
  "default": { "color": "#8EC8FB", "opacity": 0.07 },
  "pixels": [[null, null, …], …],
  "batch": [{ "pixel": { "color": "#5F9CF0" },
              "coordinates": [[12, 0], …] }],
  "data": { "api": { "latency": {
    "frame": { "left": 0.09, "top": 0.19, … },
    "content": { "text": "170 ms" }, …
  } } },
  "layers": [{ "id": "remote:latency", "type": "text",
               "dataPath": "data.api.latency" }]
}

03 · 画面表示ライブ

レンダリング

アプリがフレームを検証・正規化し、WidgetKitがホーム画面やスタンバイなどに描画します。

機能

小さなキャンバスに、どんなアイデアも。

必要なところは力強く、大切なところは繊細に。柔軟なドットグリッドとフラットなレイヤー構造で、ステータスランプからダッシュボードまで表現できます。

小さなドットで、自由に描こう。

どんな内容も、ドットで描けます。ドットごとに色、不透明度、角丸、回転、ハローを指定でき、くっきりしたLEDボードからやわらかなピクセルアートまで表現できます。

cornerRadiusrotationhaloopacity

7種類のレイヤー

テキスト、曲線、画像、アイコン、線、図形、ローカルマトリクス。フラットで、重なり順を持ち、相対フレームで配置します。

matrix

text

curve

image

icon

line

shape

もっと選べる質感

Liquid Glass、透明ガラス、単色、グラデーション、アンビエントライト、画像。ホーム画面になじむウィジェットに。

Liquid Glass

Glass

Solid

Gradient

Ambient

Image

データバインディング

data.orders.total のようなパスで、任意のレイヤーをレスポンス内のオブジェクトに割り当て。位置・内容・スタイルはそこから読み取ります。テンプレートも、デバッグが必要な式もありません。

"dataPath": "data.orders.total"112

あなたが描き、ウィジェットは映すだけ。

Glance Widgets のコンテンツ構文を覚える必要はありません。好きな言語やグラフライブラリ、ヘッドレスブラウザで、自分のサーバー上でリアルタイムの画面を画像にして返すだけ。アプリでマテリアルを「画像」にすれば、Glance Widgets はあなたのコンテンツを映す窓になります。学習コストは最小、自由度は最大です。

学習不要言語もツールも自由URL または Base64

サーバー画像について

システムによる更新

ウィジェットはWidgetKitのタイムラインで再取得します。ホスティングもプッシュも不要です。

プライバシーを設計の中心に

リクエストはデバイスからあなたのサーバーへ直接届き、HMAC署名も追加できます。データを中継・プロキシ・閲覧することは一切ありません。

すべてのサイズ、スタンバイにも。

小・中・大の各ファミリーに、ポイント単位の正確なキャンバスサイズが伝えられます。

変えたら、すぐ見える。

ビジュアルエディタでローカルレイヤーをドラッグ、リサイズ、スタイル設定。ホーム画面と同じサイズでプレビューできます。

開発者向け

描画は、サーバーに任せても。

JSONを返せるなら、ウィジェットは作れます。言語もスタックもホスティングも自由。cronジョブでも、サーバーレス関数でも、本番APIでも。

キャンバス情報をクエリに含む、シンプルなHTTPS GET
制限が明確な、厳密でドキュメント化されたプロトコル
プロトコル不要：サーバーで描いた画像をそのまま返すことも
HMAC-SHA256によるリクエスト署名（任意）
アプリと同じ描画をするブラウザプレイグラウンド

APIを見る SDKを見る

server.ts

import express from 'express'

const app = express()

app.get('/widget', async (req, res) => {
  // The widget tells you exactly how much space it has.
  const family = req.query.gw_family          // small | medium | large
  const orders = await db.orders.today()

  res.json({
    protocol: 1,
    default: { color: '#8EC8FB', opacity: 0.08, cornerRadius: 0.5 },
    pixels: Array.from({ length: 8 }, () => Array(20).fill(null)),
    data: {
      // Where the layer sits, what it shows, how it looks.
      total: {
        frame: { left: 0.08, top: 0.3, width: 0.84, height: 0.4 },
        content: { text: orders.count },
        style: { fontSizeRatio: 0.24, fontWeight: '700', horizontalAlignment: 'left' },
      },
    },
    // Declare a layer and point it at its object.
    layers: [{ id: 'remote:total', type: 'text', dataPath: 'data.total' }],
  })
})

app.listen(3000)

{ }主要言語のSDKには、ピクセルテンプレート、ドットフォント、チャートが付属。2次元配列ではなく、描きたいものを記述できます。

プライバシー

あなたのデータは、あなたの手に。

主要な機能はすべてデバイス上で動作します。署名付きリクエストはあなたのサーバーへ直接届き、Glance Widgets が表示内容を中継・プロキシ・保存することはありません。

Pro

どのプランも、Proの全機能。

どのプランでもProの全機能を利用できます。今後追加される新しいプラットフォームや機能も、追加料金なしでご利用いただけます。

早期割引価格で提供中価格改定の予定

Glance Widgets を入手

7日間無料トライアル

無料

Pro の全機能をお試し

Glance Widgets を入手

3か月プラン

￥1,100

3か月ごと · 月あたり約￥367

Glance Widgets を入手

3か月より36%お得

年間プラン

￥2,800

1年ごと · 月あたり約￥233

Glance Widgets を入手

買い切りプラン

￥7,200

1回のお支払い

Glance Widgets を入手

すべてのプランに含まれるもの

API連動ウィジェットを無制限に作成
7種類すべてのレイヤー
Liquid Glass、ガラス、グラデーション、アンビエント、画像の各マテリアル
独自のシークレットによる署名付きリクエスト
小・中・大サイズとスタンバイ
暗号化バックアップ
今後の新プラットフォーム・新機能も追加料金なし

表示価格は日本での参考価格です。実際の価格は App 内の購入画面でご確認ください。国や地域によって、為替レートや物価などの影響で価格が異なる場合があります。

すべてのサブスクリプションプランに7日間の無料トライアルが付いています。終了後は選択したプランで自動更新されます。解約は Apple アカウントの設定から行えます。

無料でも使えます。

基本機能は無料で使えます。ホーム画面にもっと多くの情報を置きたくなったら、Pro をどうぞ。

無料版でも、Pro のすべての機能を編集・プレビューできます。

機能	無料版	Pro
作成できるウィジェット数	5個	無制限
ホーム画面に置ける数	1個	無制限
ウィジェットあたりのレイヤー数	8枚	無料版の上限なし
カードスタイル	基本のみ	すべて
スタンバイ		対応
バックアップと移行		対応

これから

大切なことを、もっと多くの画面へ。

Dynamic Island

近日公開

いつも視線が向かう場所に、リアルタイムの状態を。

Apple Watch

近日公開

あなたのフレームを、手首の上に。

iPadOSとmacOS

近日公開

より大きなキャンバス、同じプロトコル。

Webエディタ

近日公開

ウィジェットをブラウザでデザイン、プレビュー。

デバイス間同期

近日公開

オンラインアカウントと iCloud で、あなたのウィジェットをすべてのデバイスに。

コミュニティテンプレート

近日公開

見つけて、作って、シェアしよう。

マクロとショートカット

近日公開

ウィジェットの指定した領域にアクションを設定。タップで Web ページを開いたり、あらかじめ設定したショートカットを実行したりできます。

価格改定の予定

早期割引価格プラン

Glance Widgets は早期割引価格でスタートし、機能の拡充に合わせて段階的に価格を改定します。

プランに戻る

01
早期割引価格
現在
リリース時の価格。第2段階の開始まで適用
02
第2段階
デバイス間同期、Dynamic Island、Apple Watch、Web エディタなどのリリース後
03
通常価格
iPadOS、macOS、テンプレートライブラリ、マクロとショートカットなどが揃った後

ご購入時の価格を、通常価格の開始から1年後まで据え置き
価格改定は、少なくとも2週間前までにお知らせ
今なら買い切りプランを、より低い早期割引価格で購入できます。

解約やプラン変更をした場合、またはサブスクリプションが途切れた場合、据え置き価格は適用されなくなります。お支払い済みの期間は最後までご利用いただけます。

FAQ

よくあるご質問

リアルタイムのデータを表示するには、JSONを返すHTTPSエンドポイントが必要です。サーバーレス関数でもスクリプトでも構いません。APIなしでも、ビジュアルエディタで静的なテキスト、画像、図形、ドットを組み合わせられます。

ウィジェットはWidgetKitのタイムラインに沿って、約15分ごとに新しいフレームをリクエストします。正確なタイミングはバッテリー、使用状況、システムの更新予算に応じてiOSが決めるため、更新の合間にも意味が伝わるフレームを設計してください。

いいえ。デバイスがあなたのエンドポイントを直接呼び出します。シークレットを設定すれば、すべてのリクエストにHMAC-SHA256署名が付き、サーバー側で検証できます。

ドットマトリクス、テキスト、曲線、画像、アイコン、線、図形は、どれも内容を表現するための要素です。必要なだけ自由に組み合わせ、シンプルなパスでデータにバインドできます。それらを載せるカードにも、Liquid Glass、ガラス、単色、グラデーション、アンビエントライト、画像といったスタイルを選べます。

iPhoneのホーム画面ウィジェット（小・中・大）とスタンバイに対応しています。iPadOS、Apple Watch、Dynamic Islandなどはロードマップにあり、リリース後は追加料金なしでご利用いただけます。

はい。TypeScript、Python、Go、Java、C#、PHP、Ruby、Lua、C++の9言語向けSDKを提供しています。プロトコルに準拠したAPIレスポンスの構築に役立ちます。SDKを使わずに、自分でAPIを実装し、レスポンスデータを組み立てることもできます。

あなたの画面を、あなたらしく。

大切なことを、目の前に。

App Storeでダウンロード APIドキュメントを読む

気になる変化が、ひと目でわかる。

どんな用途にも、どんなスタイルにも。

JSONを1つ返すだけ。あとはおまかせ。

リクエスト

レスポンス

レンダリング

小さなキャンバスに、どんなアイデアも。

小さなドットで、自由に描こう。

7種類のレイヤー

もっと選べる質感

データバインディング

あなたが描き、ウィジェットは映すだけ。

システムによる更新

プライバシーを設計の中心に

すべてのサイズ、スタンバイにも。

変えたら、すぐ見える。

描画は、サーバーに任せても。

あなたのデータは、あなたの手に。

どのプランも、Proの全機能。

7日間無料トライアル

3か月プラン

年間プラン

買い切りプラン

無料でも使えます。

大切なことを、もっと多くの画面へ。

Dynamic Island

Apple Watch

iPadOSとmacOS

Webエディタ

デバイス間同期

コミュニティテンプレート

マクロとショートカット

早期割引価格プラン

早期割引価格

第2段階

通常価格

よくあるご質問

Glance Widgets を使うにはコードを書く必要がありますか？

ウィジェットはどのくらいの頻度で更新されますか？

データはそちらのサーバーを経由しますか？

1つのウィジェットでは何を表示できますか？

対応デバイスは？

SDKはありますか？

あなたの画面を、あなたらしく。