ライブサンセット予報ウィジェットをウェブサイトに追加する方法

訪問者は、今夜が計画に値するかどうかを判断するために別の天気アプリを開かなければならないべきではありません。サンセット予報ウィジェットは、部屋、目的地、ウェブカメラ、または既に閲覧している写真情報の隣に、答えを直接表示します。

サンセットプレディクターウィジェットは、固定された場所を自動的に更新される予報に変換し、独自の天気インテグレーションを構築せずに埋め込むことができます。この結果、旅行出版社、ホテル、レストラン、観光ウェブサイト、ウェブカメラページ、写真家にとってコンパクトで役立つ機能になります。個人ウェブサイトは無料プランを使用できます。ビジネスウェブサイトには有料プランが必要です。ホテルは無料の30日間無料試用版から始めることができます。

さらに読む前に見てみましょう:

• ウィジェットビルダーを開く と、ライブプレビューでテーマ、サイズ、レイアウトを変更します — アカウントは不要です。
• ウィジェットショーケースですべてのサイズとテーマを並べて閲覧する。
• リアルなウェブサイトの中でウィジェットを見る: トラベルブログ、ホテルのホームページ、レストランのテラス、ライブウェブカメラページ。

サンセット予報ウィジェットが表示する内容

各ウィジェットは訪問者に瞬時に必要な基本情報を提供します:

• 0から100のサンセット品質スコア
• 明確な評価: エピック、良い、公正、または悪い
• 選択した場所の現地のサンセット時間
• 場所名または独自の表示ラベル
• 予報を説明するオプションの文章
• カスタムサイズでのオプションの天気詳細

スコアは色分けされたリングで表示され、カードの背景は評価に従うので、訪問者は数字を読む前に見通しを理解できます。たとえば、サントリーニのホテルがイアの予報を表示できる一方、サンフランシスコのウェブカメラ運用者が同じタイプのウィジェットを「ゴールデンゲートビュー」とラベル付けすることができます。

カスタムサイズでは、選択した天気条件（温度、雲の覆い、降水確率、湿度、風、視界、気圧、空気の質）も表示できます。表示する値を選び、訪問者が見る順序を決定します。

それぞれのウィジェットは、最寄りの都市のサンセットプレディクターの予報ページ（近くに都市がない場合はサンセットプレディクターホームページ）へのリンクがあり、興味のある訪問者は、ページを離れることなく新しいタブで完全な見通しを開くことができます。

サンセットウィジェットと通常の天気ウィジェットの比較

通常の天気ウィジェットは、温度、降水量、風を表示します。それは訪問者にサンセットが見る価値があるかどうかを教えません: それは異なる高さでの雲の覆い、湿度、視界、そして空気中の質がサンセット時間にどのように組み合わさるかに依存します。サンセットウィジェットは、それらの条件を1つのスコアと評価に変え、訪問者が予報表を読むことなく答えを得ることができます。訪問者も一般的な天気が必要な場合は、カスタムサイズがスコアの下に天気グリッドを追加します。

3つのサイズ、3つのテーマ

オプションを比較する最速の方法はウィジェットショーケースで、9つの組み合わせすべてを各評価帯のサンプルスコアで表示します。

サイズ	表示する内容	一般的な配置
コンパクト	1列: スコア、評価、サンセット時間、場所	ヘッダーまたはフッターストリップ、狭いサイドバー、ビデオプレーヤーの隣
標準	スコアリング、評価、サンセット時間、場所、オプションの説明	サイドバー、予約ボックス、記事の列
カスタム	標準に加えて、設定可能な天気グリッド	コンテンツの列、写真ガイド、条件ページ

それぞれのサイズはライト、ダーク、またはオートテーマで動作します。オートは訪問者のシステム設定に従い、すでにライトとダークモードを切り替えているウェブサイトに適しています。

なぜウェブサイトにサンセットウィジェットを追加するのか？

ウィジェットは、サンセット条件が訪問者が計画することに影響を与えるときに最も価値があります。目的地ガイドは、サンセットを見る場所を説明できます。ウィジェットは、今夜が有望かどうかを示し、訪問者がページを離れて他の情報を探す必要がありません。

予報システムを維持することなく機能を追加する

天気データ、スコアリング、ラベル、時間形式、および自動のリフレッシュはすべてあなたのために処理されます。インストールは短い埋め込みスニペットであり、独自のAPIプロジェクトや独自のインターフェース、エラーハンドリング、および継続的なメンテナンスを必要としません。

独自のインターフェースを構築したい場合は、同じ予測がサンセットプレディクターAPIを通じて利用可能です。

既存のデザインにウィジェットを合わせる

テーマ、サイズ、アクセントカラー、幅、訪問者に優しいラベル（例："西のテラス"）は、ウィジェットがページに合わせるようにします。ウィジェットはサイトのスタイルシートから独立しています。リンクやパディング、フォントの独自のCSSルールがそれを歪めることはなく、そのスタイルがページに漏れることはありません。

国際的な訪問者に対応する

ウィジェットは14の言語をサポートしています: 英語、フランス語、ドイツ語、スペイン語、ロシア語、ポルトガル語、日本語、ルーマニア語、ウクライナ語、アラビア語、ヘブライ語、簡体字中国語、ヒンディー語、イタリア語。アラビア語とヘブライ語のウィジェットは右から左に自動的にレンダリングされます。メートル法または帝国単位、12時間または24時間の時計を選ぶことができます。

初めてのウィジェットを作成する方法

ログインする前にビルダーとライブプレビューを試すことができます。ウィジェットを保存して埋め込みコードを受け取るときにのみアカウントが必要です。

1. ウィジェットビルダーを開く

サンセットプレディクタービジェットビルダーを開き、公開プレビューで試してみましょう。テーマ、サイズ、レイアウト、カラー、言語、およびその他の表示設定を変更すると、プレビューが更新されます。プレビュースコアスライダーをドラッグして各評価帯がどのように見えるかを確認し、スロットの幅（240ピクセル、320ピクセル、400ピクセル、またはフル）を切り替えて狭い配置と広い配置をテストします。

ヒント: リスボン用のビルダープリセットの例のように、アドレスに座標を追加することで独自の都市が選択された状態でビルダーを開くことができます。

準備ができたら、サインインするか無料アカウントを作成します。ウィジェットダッシュボードからウィジェットを作成を選択します。無料プランは、個人の非商業ウェブサイト上に1つのウィジェットをカバーします。ビジネスウェブサイトの場合、有料プランを選択してください。

2. 自分のダッシュボード用にウィジェットの名前を付ける

「リスボンホテルホームページ」や「ブライトンウェブカメラ」のような短い内部名を入力します。訪問者は選択された場所ラベルを見るので、この管理名ではなく、後でチームがウィジェットを認識しやすいものを使用します。

3. 予報の場所を検索する

少なくとも3文字を入力し、結果から正しい都市を選択します。選択された座標が予報とローカルサンセット時間を決定します。

オプションで表示名を入力することもできます。これは公共の場所が都市の結果より具体的またはよく知られている名前を持つ場合に便利です。例：

• 「ブカレスト、ルーマニア」の代わりに「我々のルーフトップビュー」を使用する
• 「リオデジャネイロ、ブラジル」の代わりに「コパカバーナビーチ」を使用する
• 最寄りの自治体の代わりに「北岸カメラ」を使用する

慎重に選択してください：ウィジェットの予報場所は作成後に変更することはできません。後で別の場所が必要な場合は新しいウィジェットを作成します。表示名はまだ編集することができます。

4. ウィジェットが配置される場所を選ぶ

ビルダーはどこに行きますか？ として尋ね、4つのワンクリックプリセットを提供します。それぞれのプリセットはサイズ、幅、および説明を一緒に設定し、その後すべて微調整することができます。

プリセット	サイズ	幅	説明
サイドバー	標準	固定300ピクセル	オフ
コンテンツ列	カスタム	列を満たす（最大800ピクセル）	オン
ヘッダーやフッターストリップ	コンパクト	ストリップを満たす	オフ
予約ボックス	標準	ボックスを満たす	オン

カスタムサイズのないプランでは、コンテンツ列プリセットは説明付き標準サイズを使用します。

幅では、固定（220–480ピクセル）またはオプションの最大幅でコンテナを満たすを選択し、ウィジェットをそのスペースの始めまたは中心に揃えます。ウィジェットは実際に受け取った幅に適応し、画面サイズではなく：

• 260ピクセル以下では、狭いレイアウトに切り替わり、リングが小さくなります。
• 幅が480ピクセル以上では、説明と天気の詳細がスコアの下に代わりに隣接して移動します。

固定幅ウィジェットは、そのコンテナが狭いときでも縮小するため、スマートフォンではみ出ることはありません。

5. 外観と情報を選ぶ

ベストな設定はウィジェットが表示される場所に依存します：

設定	オプション	実用的なガイダンス
テーマ	ライト、ダーク、オート	ホストウェブサイトがすでに訪問者のシステムテーマに従う場合はオートを使用します。
サイズ	コンパクト、標準、カスタム	コンパクトはストリップや狭いスペースに適しています; 標準は詳細とスペースのバランスを取ります; カスタムは天気のグリッドを追加します。
アクセントカラー	プリセットまたはカスタムカラー	スコアリング周りに十分なコントラストを保ちながらブランドカラーに合わせます。
説明	オンまたはオフ	なぜ予報がそのスコアを受け取ったのかについての短い説明を追加します。コンパクトサイズでは利用できません。
言語	14のサポート言語	ウィジェットが表示されるページの言語に合わせます。
単位	メートル法または帝国法	訪問者が予想するフォーマットを選択します。
時間	12時間または24時間	ウェブサイト上で使用されている慣例に合わせます。
リフレッシュ	15から120分	利用可能な頻度はアカウントプランに依存します。
ブランド	「Powered by Sunset Predictor」のフッターを表示または非表示	非表示はPro、Business、およびEnterpriseで利用可能です。

カスタムサイズの場合、オーディエンスにとって重要な天気の詳細を選択して並べ替えます。たとえば、写真家は雲、視界、降水確率を優先するかもしれません。ホテルは温度、雲、風を好むかもしれません。

6. ウィジェットを作成し埋め込みコードをコピーする

ウィジェットを作成を選択します。次の画面では保存されたプレビューと3つのインストールタブ：スクリプトタグ、iFrame、およびWordPressが表示されます。

埋め込みオプション	最適な用途	知っておくべきこと
スクリプトタグ	ほとんどのウェブサイトやカスタムレイアウト	非同期にロードされ、CSSから独立してページにウィジェットを直接レンダリングします。
iFrame	サードパーティスクリプトをブロックするウェブサイトビルダーやCMSプラットフォーム	ウィジェットを独自のドキュメントに保持します。含まれるリスナーがフレームの高さを自動的に調整します。
WordPress	任意のWordPressサイト、ブロックエディターまたはクラシックエディター	iframeコードとステップバイステップのWordPressの指示。プラグインは不要です。

スクリプトタグオプションは、あなたのユニークなウィジェットIDが自動的に挿入された次のように表示されます：

<script src="https://sunset-predictor.com/api/widget/embed.js?v=3"
        data-widget-id="wgt_your_widget_id"
        async></script>
<a href="https://sunset-predictor.com/location/your-city/?ref=widget_seo">Sunset forecast for Your City</a>

スクリプトはその後にウィジェットを直接挿入するので、別のコンテナ要素は必要ありません。その下の小さなテキストリンクは、あなたの場所の予報ページへのシンプルな帰属リンクです。スクリプトがブロックされているときでも読み取ることができます。エンタープライズプランはそれを削除できます。

iframeオプションにはウィジェットをフレームにフィットさせるための<iframe>と短いスクリプトが含まれています：

<iframe id="sunset-widget-wgt_your_widget_id"
        src="https://sunset-predictor.com/widget/wgt_your_widget_id"
        title="Sunset forecast for Your City"
        height="200" frameborder="0" scrolling="no"
        style="display: block; width: 100%; border: none; color-scheme: normal;"></iframe>
<script>
  /* resize listener — included automatically in the copied code */
</script>

生成されたIDを手動で編集するのではなく、コードをコピーするボタンを使用してください。

7. スニペットをウェブサイトに貼り付ける

ウィジェットを表示したい場所にコードを追加します。正確な場所はプラットフォームによって異なります：

• カスタムコーディングされたサイトでは、関連するページテンプレートやコンテンツブロックに配置します。
• WordPressでは、WordPressタブを開きます。ブロックエディターでは、カスタムHTMLブロックを追加します。クラシックエディターでは、テキストタブに切り替えます。サイドバーやフッターには、外観 → ウィジェットに移動し、カスタムHTMLウィジェットを追加します。埋め込まれたHTMLの発行には、管理者または編集者の役割（マルチサイトネットワークではスーパ管理者）が必要です。
• Wix、Squarespace、Webflow、またはElementorなどのページビルダーでは、HTML、埋め込み、またはコードエレメントを使用します。
• スクリプトルールが厳しいCMSでは、iFrameタブを使用します。

ページを公開または更新し、ライブURLを開いてデスクトップおよびモバイルの両方でウィジェットを確認します。配置、言語、時計形式、単位、およびスペーシングがページに合っているか確認してください。

CMSが埋め込みコードをブロックするか、ウィジェットが表示されない場合は、インストールに関してサンセットプレディクターサポートに問い合わせてください 。

ウィジェットがライブになった後に何が起こるのか？

ウィジェットは設定されたリフレッシュ間隔に従って新しい予測データを自動的に要求します。利用可能な間隔はプランに依存します。無料では120分ごと、エンタープライズでは15分ごとです。

ダッシュボードからは以下を行うことができます：

• 埋め込みコードを置き換えることなく、名前、ラベル、外観、幅、言語、単位、時間形式、およびリフレッシュ間隔を編集します。変更は数分以内にライブページに表示されます。
• 合計インプレッション（ウィジェットのレンダリング）とクリック（ウィジェットのリンクをフォローした訪問者）を見ることができます。
• 埋め込みコードを再度コピーします
• ウィジェットを一時停止、再開、または削除します

どのプランがあなたのサイトに適しているか？

無料プランでは1つのブランド付きウィジェットを作成できます。有料プランは商業利用をサポートし、複数のウィジェット、毎月のビュー制限の増加、リフレッシュの高速化、カスタムサイズ、およびオプションのブランド非表示をサポートしています。選定前に現在のプランと価格を比較できます。

プラン	ウィジェット数	月間ビュー数	最速リフレッシュ	カスタムサイズ	ブランド非表示	商業利用
無料	1	2,000	120分	いいえ	いいえ	いいえ
Pro	5	25,000	60分	はい	はい	はい
ビジネス	25	150,000	30分	はい	はい	はい
エンタープライズ	無制限	1,000,000	15分	はい	はい	はい

消費者向けのPlusプランは、無料と同じウィジェット制限を持ちます。配置プリセット、固定またはフル幅、配置は、無料プランを含むすべてのプランで利用可能です。

ウィジェットが月次のビューの許容量に達した場合、それは動作を続けます：追加のビューはカウントを停止し、次の月までサンセットプレディクターブランディングが表示されます。交通スパイクがあなたのページをエラーステートに変えることはありません。

アクティブと一時停止されたウィジェットはどちらも、あなたのプランで許可されたウィジェット数にカウントされます。不要になったウィジェットを削除してスロットを空けてください。

ウィジェットを利用する実用的な方法

最も強力な配置は、訪問者がすでに決定を下していることへの接続です。以下の各例は、コンテキスト内デモページへのライブモックアップにリンクしています。

ホテルとリゾート

標準ウィジェットをアメニティ、屋上バー、またはローカル体験ページに配置するか、予約フォームの横に予約ボックスプリセットを使用します。表示ラベルとしてプロパティのパブリックフェイシング名を使用し、アクセントカラーをホテルブランドに合わせます。サンプルホテルホームページでウィジェットを確認する、またはホテルがサンセットウィジェットをどのように使用するかを読む 、無料の30日間の試用を含みます。

レストラン、バー、およびテラス

海の景色を望むテラスは、良いサンセットの夕方により多くのテーブルを売ることができます。「テーブルを予約する」ボタンの隣に説明付きの標準ウィジェットを配置し、ゲストが適切な時間帯を選ぶことができるようにします。サンプルレストランテラスページでウィジェットを確認する。

観光および目的地ウェブサイト

バルセロナのサンセットビュー ポイントに関するページには、現在のバルセロナ予報を表示させ、その一方で別のテネリフェのガイドには独自のウィジェットを使用できます。サンプルトラベルブログ投稿内のウィジェットを確認する。

ウェブカメラとサーフウェブサイト

ライブカメラや現在の状況パネルの近くにコンパクトウィジェットを配置します。サンセットスコアはビデオフィードと競合せずに迅速なコンテキストを追加します。サンプルウェブカメラページでコンパクトウィジェットを確認する。

写真ガイド

カスタムサイズを使用して、スコアに沿って雲、降水確率、視界、風を表示します。これにより、読者はロケーションを偵察するか、機材をパックするかを決定するときにより多くのコンテキストを得られます。

イベントと会場ページ

場所の固定された場所でのビューが経験の一部である野外会場では、ウィジェットが訪問者に会場のサンセット見通しを理解するのに役立ちます。スコアの単純な説明が観客にとって利益になる場合は、説明を有効にしておきます。

ロビー画面とスマートホームダッシュボード

ウィジェットのiframe URL（iframeコード内のsrcアドレス）をロビーディスプレイ、受付用タブレット、キオスク、またはHome Assistantのウェブページカードで開きます。ページは計画されたインターバルで自動的に更新され、数日間開いておいても動作します。接続が切断された場合、エラーページの代わりに最後の予報が画面に表示されます。

より良い埋め込みのためのヒント

ウィジェットを広範囲に公開する前に、いくつかの意図的な選択を行います：

1. 関連コンテンツの近くに配置します。ルーフトップの説明の横にある予報は、一般的なフッターに隠れているものより実用的です。
2. 特定の表示ラベルを使用します。「港のテラス」は場所がすでに明らかである場合に広範囲の都市名よりも訪問者に多くのコンテキストを提供します。
3. 情報密度を適切に保ちます。コンパクトは狭いレイアウトに適しており、カスタムは天気の詳細がページの目的の一部である場合に適しています。
4. インラインブロックボックスのように、そのコンテンツに自分をサイズする要素内に「コンテナを満たす」ウィジェットを配置しないでください。代わりに、そこで固定幅をウィジェットに与えます。
5. インプレッションを定期的に確認します。これによって配置がトラフィックを受け取るかどうか、および現在のプランがまだ適合しているかどうかを示します。

結論

サンセット予報ウィジェットは、変化する天気データをシンプルで関連性のあるウェブサイト機能に変えます。意味のある場所を1つ選び、それがどこに行くのかを選び、デザインをオーディエンスに合わせ、生成された埋め込みコードを貼り付け、1つのダッシュボードからウィジェットを管理します。ショーケースでサイズを比較する 、サンプルウェブサイトで見る、そしてそれがサイトのどこに適しているかを決める前に最初のウィジェットを作成する。