1行のコードで、あらゆるウェブサイトにリアルタイムの天気カードを配置できます。天気用のバックエンドを構築する必要も、ブラウザにAPIキーを露出させる必要もありません。不動産情報、旅行やイベントのページ、施設案内、ダッシュボードなどに最適です。
従来の課題
ウェブサイトを運営している場合、現地のリアルタイムの天気を表示するには、通常、天気APIに登録し、それをプロキシするサーバーコードを書き、クォータを消費しないようにレスポンスをキャッシュし、クライアント側のコードからキーを隠す必要があります。これはもはや一つのプロジェクトです。あなたが欲しかったのは、ただの天気カードだったはずです。
仕組み
カスタム要素を埋め込むだけで完了です：
<script
src="https://app.weatherintouch.com/embed.js"
data-api-base="https://api.weatherintouch.com"
></script>
<wx-weather-card
lat="50.08"
lon="14.44"
lang="en"
theme="auto"
></wx-weather-card>
カードは Shadow DOM 内にレンダリングされるため、サイトのCSSとスタイルが競合することはありません。現在の天気と、オプションで短い予報を表示します。iframeをご希望ですか？postMessage を介して高さを自動調整するバリアントも用意しています。設定はすべて属性（座標、言語、テーマ、APIキー）で行います。
他との違い
- 共有キャッシュ。 ウィジェットは、メインアプリと同じ予報キャッシュを読み込みます。あなたのサイト上のカードと、訪問者が開いているメインアプリのタブが同じ座標であれば、アップストリームの呼び出しは2回ではなく 1回 で済みます。
- キー漏洩の防止。 バックエンドのバッチエンドポイントがデータを提供します。APIキーはスコープとオリジンが制限されており、プロバイダーの生キーがページに直接埋め込まれることはありません。
- スタイルの干渉なし。 Shadow DOMによる分離により、カードはどのサイトでも同じように表示されます。
- テナントごとのオリジン許可リスト。 カードをレンダリングできるドメインを正確に制御できます。
料金
埋め込みウィジェットは Pro プランの機能です。テナントごとのAPIキーとオリジン許可リストが含まれており、所有する複数のサイトに展開できます。
FAQ
どうやって埋め込みますか？ scriptタグと、座標を指定した <wx-weather-card> 要素を追加します。または、iframeバリアントを使用してください。
カスタム要素とiframeのどちらを使うべきですか？ カスタム要素はより緊密に統合（テーマやレイアウト）できます。iframeは最も独立性が高く、最も簡単に導入できます。
テーマの変更は可能ですか？ はい。theme="auto|light|dark" を指定できるほか、適用可能な場合はカードにアクセントカラーが反映されます。
レート制限はありますか？ バッチエンドポイントはスロットリングされ、キャッシュが優先されます。同一の座標は重複排除されるため、通常の埋め込みであれば制限内に十分に収まります。
Weather InTouchのクレジット表記は必要ですか？ はい。データプロバイダーの利用規約に基づき、カードには小さな帰属（アトリビューション）リンクが表示されます。