ウィジェットの動作の仕組み
ウィジェットは普通のReactコンポーネントのように見えますが、フレーム上で実行されることはありません。Blotchが自社のサーバーでウィジェットを実行して画像に撮り、その画像をフレームに送ります。この仕組みを知っておくと、ウィジェットを書くときのルールのほとんどに理由があることがわかります。
コードが電子ペーパー（e-ink）に表示されるまで
ページがフレームに表示される少し前に、Blotchがそのページを準備します。
- ページ上の各ウィジェットが、ページ上の枠とまったく同じサイズのブラウザーウィンドウで、それぞれ開かれます。
- ウィジェットがデータを取得し、自身を描画します。
- すべての読み込みが終わると、Blotchがスクリーンショットを撮ります。
- スクリーンショットは白黒に変換され（グレーの濃淡はドットのパターンで表現されます）、フレームに送られます。
フレームは、次の更新までその画像を表示します。標準モードでは、その間フレームはスリープしています。
コードへの影響
ウィジェットは静止画です。タップやスクロールはできず、アニメーションも見えません。タイマー、トランジション、クリックハンドラーは役に立ちません。見せたいものは、すべて最初の描画で描いてください。
読み込み中の状態はありません。Blotchはウィジェットがデータを受け取るまで待ってから画像を撮るので、useFetchフックはデータをそのまま返します。スピナーを描く必要はありません。
エラーは自動で表示されます。APIが停止しているなどの理由でウィジェットが例外をスローすると、フレームはウィジェットの場所にエラーを表示します。独自のエラーバウンダリーは必要ありません。想定しているエラーにわかりやすいメッセージを表示したい場合は、そのエラーを確認して別の内容を描画してください。
リクエストはBlotchを経由します。useFetchは、すべてのリクエストをBlotchのサーバー経由で送ります。そのため、ブラウザーからのリクエストをブロックするAPIでも動作し、レスポンスをキャッシュしてフレーム間で共有できます。一方で、ウィジェットから誰かの家庭内ネットワークにあるサーバーにはアクセスできません。
データは少し早めに取得されます。ページは画面に表示される数分前に準備されるため、見る時点ではデータがその分だけ古くなっています。ほとんど問題になりませんが、深夜0時の前後では影響があります。正しい日付と時刻を表示するをご覧ください。
時計は先に進められています。ウィジェットが正しい時刻を表示できるように、new Date()は準備した時点ではなく、ページが画面に表示される時点を返します。ウィジェットスタジオのプレビューでは、単に現在の時刻になります。
タイムゾーンは明示的に取得します。ウィジェットを描画するブラウザーは、フレームと同じタイムゾーンにはありません。useTimeZoneでフレームのタイムゾーンを取得し、時刻をフォーマットするたびに渡してください。そうしないと、パソコンのタイムゾーンを使うプレビューでは正しく見えても、フレームでは間違った時刻になることがあります。
日付と数値はフレームの言語に従います。toLocaleDateStringなどのフォーマット関数は、言語を指定しない限り、フレームの所有者が選んだ言語を使います。フレームの言語でテキストを表示するをご覧ください。
必要な情報はすべてフックから
Widgetコンポーネントはpropsを受け取りません。どこで実行されているかについての情報は、すべてBlotchライブラリのフックから得られます。
| フック | 得られ るもの |
|---|---|
useInputs | ウィジェットをインストールした人が選んだ設定 |
useAssets | アップロードした画像 |
useLayoutShape | ウィジェットの枠のサイズと形 |
useTimeZone | フレームのタイムゾーン |
usePreferredLanguage | フレームの言語 |
useTheme | フレームがライトテーマかダークテーマか |
useBatteryLevel | フレームのバッテリー残量 |
白黒
画面に表示できるのは、黒と白の2色です。ウィジェットのスタイルはTailwind CSSで指定しますが、使える色はforegroundとbackgroundの2色だけで、フレームがダークテーマのときは入れ替わります。ほかの色のクラスは効果がありません。
濃淡はドットのパターンで表現されます。塗りつぶしたバーのような広い面には向いていますが、細い線や小さな文字はまだらに見えてしまいます。テキス トと線は濃淡をつけずにtext-foregroundで描き、淡い色は背景にだけ使ってください。
Blotchライブラリのコンポーネントはすでにこれらのルールに従っているので、それらを組み合わせて作るのが、きれいに表示するいちばん簡単な方法です。
サイズ
画面全体は960×680ピクセルです。ウィジェットには、小さな正方形から画面全体まで、横長でも縦長でも、画面のどの部分でも割り当てられます。さらに、フレームの所有者がウィジェットの周りに枠線と余白を付けます。ウィジェットは、どのサイズでもきれいに見える必要があります。どのサイズにも合うデザインにするをご覧ください。
隠れたウィジェットは描画されません
ページ上でほかのウィジェットに完全に覆われているウィジェットは、Blotchがまったく描画しません。