使い方

新規作成

ライブラリ右上の「＋」をタップします。

サイズを選ぶ

小・中・大から選びます。ホーム画面のウィジェットと同じサイズです。選んだら右上の「作成」をタップします。

APIをつなぐ（任意）

プレビュー下のAPIバーにHTTPSのURLを貼り付け、更新ボタンをタップします。実際のデータですぐにプレビューされます。

ヒントこの手順は必須ではありません。空のままでも外観やレイヤーを先に作り、そのまま保存できます。バックエンドが用意できたら、あとから入力してください。

外観を選ぶ

「ウィジェット」パネルで「マテリアル」を開き、Liquid Glass・ガラス・単色・グラデーション・アンビエントライト・画像を左右にスワイプして選び、「このスタイルを適用」をタップします。

レイヤーを追加してデータを結びつける（任意）

「レイヤーを追加」でテキストや曲線などのレイヤーを選びます。「ソース」を「APIデータ」にして、data.ordersのようなデータパスを入力すると、APIの最新の値が表示されます。

ヒントデータパスは空のままでも構いません。レイヤーは追加・編集・保存でき、APIの準備ができてから結びつけられます。

名前を付けて保存

名前を付けて「保存」。ライブラリに表示され、ホーム画面に追加できます。

ホーム画面に追加

ホーム画面の空白を長押しし、「編集」から「ウィジェットを追加」を選びます。

スタイルとサイズを合わせる

「Glance Widgets」を検索し、左右にスワイプして自分のウィジェットと同じスタイルとサイズを選び、「ウィジェットを追加」をタップします。

ヒント追加したいカスタムウィジェットと、スタイルとサイズを一致させてください。Liquid Glassは「Liquid Glass」、ガラスは「ガラス」、単色・グラデーション・アンビエントライト・画像は「基本」を選びます。サイズも同じにします。

表示するウィジェットを選ぶ

ウィジェットを長押しして「ウィジェットを編集」をタップし、「ウィジェット」で表示するウィジェットを選びます。

ヒント一覧には、このウィジェットとサイズ・スタイル分類が一致するものだけが表示されます。見つからないときは、アプリでサイズとマテリアルを確認してください。

アプリで管理

カードを長押しするか「…」をタップ。更新・複製・編集・削除ができ、更新失敗時も再試行できます。

独自の API で内容とスタイルを動かす

設定した API にウィジェットがデータをリクエストします。サーバーが仕様に沿った JSON を返すことで、業務の変化に合わせて内容やスタイルを変えられます。

SDK を使っても、自分で実装しても

SDK は API 開発を簡単にするための任意のツールです。公式 SDK でデータを生成しても、好きな言語やフレームワークで実装しても構いません。どちらも仕様に沿った JSON を返します。

必要なときだけ端末サイズに対応

サイズや位置は通常、相対値で指定され、キャンバスに合わせて自動調整されます。一つの API は特定のウィジェットに対応することが多く、個別のサイズ対応は通常不要です。

ヒント画面サイズが少し異なる複数の端末で同じ内容を表示し、描画に差が見られる場合に、リクエストの gw_canvas_width_pt / gw_canvas_height_pt を使って調整できます。

業務データを data に入れる

レスポンスの data フィールドに、注文数・状態・推移など、動的な内容を動かす業務データを入れます。レイヤーが data.orders などのパスで読み取り、データの変化が表示に反映されます。

サーバーで描いた画像をそのまま表示

内容を生成して画像に描画し、API で動的に指定することで、サーバー側で描画全体を管理する方法もあります。素材を「画像」、ソースを「API」にし、画像のデータパスを指定すると、完成した画像をそのまま表示できます。

ヒントこれは別の実装方法です。Glance Widgets のレイヤーを設定したり、細かな描画構文を覚えたりする必要はありません。API は引き続き JSON を返し、画像 URL または Base64 を data に入れます。

必要に応じてリクエストに署名

送信元を検証したい場合は、エディタで API 署名用の秘密鍵を生成し、サーバーにも設定できます。送信されるのは時刻と署名だけで、鍵自体は送られません。自分で検証しても、SDK の verifySignature を使っても構いません。

アプリ内ですぐプレビュー

エディタやアプリのホーム一覧で、ウィジェットを直接プレビューできます。実際のホーム画面とほぼ同じ見た目なので、内容やスタイルを調整しながら確認できます。

StandBy を知る

ロック中の iPhone を充電しながら横向きに置くと StandBy（スタンバイ）になり、時計やウィジェットを全画面で大きく表示します。ここにウィジェットを置けば、机の上でもひと目で確認できます。

オンになっているか確認

StandBy は iOS 17 以降で使え、初期設定でオンです。表示されない場合は 設定 › スタンバイ でオンになっているか確認してください。あとはロック・充電・横向きの 3 つがそろうと自動で始まります。

ウィジェットを追加

StandBy でウィジェットを長押しし、Face ID でロックを解除すると編集できます。左上の「＋」から Glance Widgets を探し、小サイズを追加して「完了」をタップします。表示するウィジェットの選び方はホーム画面と同じく、長押し ›「ウィジェットを編集」です。

StandBy で見やすく

StandBy ではウィジェットの背景が取り除かれ、内容が大きく表示されます。暗い場所ではナイトモードになり、全体が赤くなります。背景がなくても読みやすい、コントラストの高いデザインが最適です。

ヒントマテリアルが「画像」のウィジェットは専用に最適化されています。StandBy でも画像はそのまま表示され、取り除かれません。