本文へスキップ
ガイド2分で読める

ライブ日の入り予報ウィジェットをウェブサイトに追加する方法

ライブ日の入り予報ウィジェットをウェブサイトに追加し、そのデザインをカスタマイズして、訪問者にタイムリーな地域の計画情報をオンラインで提供する方法を学びます。

更新日 2026年7月14日
カスタマイズコントロールの横にライブのパリの日の入り品質スコアを表示するSunset Predictorウィジェットビルダー

要約

Sunset Predictor Widgetsは、ライブの場所に特化した日の入りの品質スコアと日の入り時間をウェブサイトに追加します。場所、サイズ、テーマ、言語、単位、更新頻度を選び、結果をプレビューしてから生成されたスクリプトまたはiframeコードをサイトに貼り付けます。後でウィジェットを編集、一時停止、追跡できます。

訪問者は、今夜が計画する価値があるかどうかを判断するために、別の天気アプリを開く必要はありません。日の入り予報ウィジェットは、すでに訪問者が見ている部屋、目的地、ウェブカメラ、または写真情報の隣に答えを直接提供します。

Sunset Predictor Widgetsは、固定された場所を自動的に更新される予報に変換し、独自の天気統合を構築せずに埋め込むことができます。結果として、旅行出版物、ホテル、観光ウェブサイト、ウェブカメラページ、写真家にとってはコンパクトで有用な機能となります。

日の入り予報ウィジェットが示す内容

すべてのウィジェットは、訪問者が一目で必要な基本情報を提供します:

  • 0から100までの日の入りの品質スコア
  • 明確な評価:壮大、良い、普通、悪い
  • 選択された場所の現地での日の入り時間
  • 場所名または独自の表示ラベル
  • 予報を説明するオプションの文
  • カスタムサイズの天気の詳細オプション

スコアは色分けされたリングで表示され、訪問者は数値を読む前に見通しを理解できます。たとえば、サントリーニのホテルはイアの予報を表示でき、サンフランシスコのウェブカメラオペレーターは「ゴールデンゲートビュー」というラベルを付けることができます。

カスタムサイズでは、選択された天気の状態も表示できます:温度、雲量、降雨確率、湿度、風、視界、気圧、空気質。訪問者がそれを見る順序で表示される値を選ぶことができます。

なぜウェブサイトに日の入りウィジェットを追加するのか?

ウィジェットは、日の入り条件が訪問者の計画に影響を与えるときに最も価値があります。それにより、通常は静的なページに関連する情報を追加します。

訪問者に実用的な理由を提供する

目的地ガイドは日の入りを見る場所を説明できます。ウィジェットは欠けている質問を追加します:今夜はどれくらい期待できますか?訪問者はページを離れて他を探す前に便利な計画の文脈を得ることができます。

予報システムを維持せずに機能を追加する

天気データ、スコアリング、ラベル、時間形式、自動更新はすべてあなたのために処理されます。インストールは独自のインターフェース、エラーハンドリング、継続的な保守を伴うカスタムAPIプロジェクトではなく、短い埋め込みスニペットです。

情報をオーディエンスに合わせる

ホテルは、一つの屋上のための洗練された予報を望むかもしれません。観光ウェブサイトはリスボン、ポルト、マデイラのための別々のウィジェットを必要とするかもしれません。写真家は場所ガイドの横にコンパクトなスコアを好むかもしれません。各ウィジェットは1つの場所に結びついているため、そのコンテキストが明確です。

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

明るい、暗い、または自動テーマを選び、サイズを選び、スコアリングのアクセントカラーを設定します。地理的な名前を「ウェストテラス」「ビーチカメラ」「旧市街展望台」など訪問者が親しみやすいラベルに変更することもできます。

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

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

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

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

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

Sunset Predictor Widgetsビルダーを開き、公開プレビューを試してください。テーマ、サイズ、色、言語、その他の表示設定を変更するたびにプレビューが更新されます。

保存の準備ができたら、サインインまたは無料アカウントを作成してください。ウィジェットダッシュボードからウィジェット作成を選択します。

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

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

3. 予報場所を検索する

少なくとも3文字を入力し、結果から正しい都市を選択します。選択された座標が予報と現地の日の入り時間を決定します。

オプションの表示名を入力することもできます。これは、公開される場所が都市結果よりも具体的または親しみやすい名前を持っている場合に便利です。例:

  • 「ブカレスト、ルーマニア」の代わりに「Our Rooftop View」を使用する
  • 「リオデジャネイロ、ブラジル」の代わりに「コパカバーナビーチ」を使用する
  • 最寄りの自治体の代わりに「ノースショアカメラ」を使用する

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

4. 外観と情報を選択する

ウィジェットを設定しながらライブプレビューを利用してください。最適な設定は表示される場所に依存します:

設定オプション実用的なガイダンス
テーマ明るい、暗い、自動ホストウェブサイトがすでに訪問者のシステムテーマに従っている場合、自動を使用してください。
サイズコンパクト、標準、カスタムサイドバーに適したコンパクト;標準の詳細とスペースのバランス;カスタムは天気グリッドを追加します。
アクセントカラープリセットまたはカスタムカラーブランドカラーに合わせ、スコアリングの周りに十分なコントラストを保ってください。
説明オンまたはオフなぜ予報がそのスコアを受けたのかを短く説明します。コンパクトサイズにはありません。
言語14のサポート対象言語ウィジェットが表示されるページの言語に合わせてください。
単位メートル法または帝国単位訪問者が期待する形式を選んでください。
時間12時間または24時間ウェブサイトの他の部分で使用されている慣習に合わせてください。
更新15〜120分利用可能な頻度はアカウントプランに依存します。

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

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

ウィジェット作成を選択します。次の画面には保存されたプレビューと2つのインストールオプションが表示されます:スクリプトタグおよびiFrame

埋め込みオプション最適な用途知っておくべきこと
スクリプトタグほとんどのウェブサイトとカスタムレイアウト非同期に読み込み、ページ内で直接ウィジェットをレンダーします。
iFrameCMSプラットフォームまたはサードパーティコンテンツを分離するページウィジェットを独自のドキュメントに保持し、自動高さ調整を含みます。

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

<div id="sunset-widget-wgt_your_widget_id"></div>
<script src="https://sunset-predictor.com/api/widget/embed.js?v=1"
        data-widget-id="wgt_your_widget_id"
        async></script>

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

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

ウィジェットを表示したい場所にコードを追加してください。正確な位置はプラットフォームに依存します:

  • カスタムコーディングされたサイトでは、関連するページテンプレートまたはコンテンツブロックに配置します。
  • WordPressでは、カスタムHTMLブロックを使用します。
  • ページビルダーでは、HTML、埋め込み、またはコード要素を使用します。
  • 厳格なスクリプトルールを持つCMSでは、iFrameオプションを試してください。

ページを公開または更新し、ライブURLを開いて、デスクトップとモバイルの両方でウィジェットを確認します。場所、言語、時計の形式、単位、間隔がページに収まっていることを確認してください。

CMSが埋め込みコードをブロックしたりウィジェットが表示されない場合は、Sunset Predictorサポートにインストールについてのヘルプを依頼してください。

ウィジェットがライブになったらどうなる?

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

ほとんどの設定を変更しても埋め込みコードを置き換える必要はありません。ダッシュボードからウィジェットを開き、その外観や表示オプションを更新し、保存してください。すでに埋め込まれたウィジェットへの変更は数分以内に反映されます。

ダッシュボードでは以下のことができます:

  • 各ウィジェットのトータル表示回数とクリック数を確認
  • 埋め込みコードを再度コピー
  • ウィジェットの一時停止と再開
  • 名称、ラベル、外観、言語、単位、時間形式、更新間隔を編集
  • 不要になったウィジェットを削除

表示回数はウィジェットのレンダーを記録し、クリックは訪问者がSunset Predictorへのリンクをたどったことを記録します。これらのカウントは、ウィジェット自体のための別個の分析セットアップを必要とせずに使用状況を簡単に把握する手段を提供します。

あなたのウェブサイトに適したプランは?

無料プランでは1つのブランド付きウィジェットを作成できます。有料プランでは商業利用に対応し、より多くのウィジェット、高月間表示限、より速い更新、カスタムサイズ、オプションのブランド削除をサポートします。現在のプランと価格を比較してからティアを選択してください。

プランウィジェット数月間表示回数最速の更新カスタムサイズブランド削除商業利用
Free12,000120分なしなしなし
Pro525,00060分はいはいはい
Business25150,00030分はいはいはい
Enterprise無制限1,000,00015分はいはいはい

ウィジェットが月間表示枠に達すると、表示が続行します。その月の新しい表示がカウントされず、Sunset Predictorのブランドが表示されます。これにより、交通量が予想以上に高かったために埋め込まれたページがエラーステートになるのを防ぎます。

アクティブなウィジェットと一時停止したウィジェットの両方がプランで許可されるウィジェット数に対してカウントされます。ウィジェットが不要になり、そのスロットを解放したい場合は削除してください。

ウィジェットの実用的な使用方法

最適な配置は、訪問者がすでに行っている決定に予報を結びつけます。

ホテルとリゾート

設備、屋上バー、または地域体験ページに標準のウィジェットを配置します。プロパティの公開されている名前を表示ラベルとして使用し、アクセントカラーをホテルブランドに合わせます。 屋上テラスの景色の横に埋め込まれた日の入り品質ウィジェットがある海辺のホテルのウェブサイト

観光とデスティネーションウェブサイト

都市または地域ガイドに場所ごとのウィジェットを追加します。バルセロナの夕焼けビューについてのページは現在のバルセロナ予報を表示でき、別のテネリフェガイドは独自のウィジェットを使用できます。 埋め込みの日の入りウィジェット、海岸都市の写真、ビューポイントマップがある観光デスティネーションガイド

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

ライブカメラまたは現在のコンディションパネルの近くにコンパクトなウィジェットを配置します。日の入りスコアは、ビデオフィードと競合することなく速いコンテキストを追加します。 生ビデオの横に日の入り予報ウィジェットがある海岸ウェブカメラとサーフィンコンディションのウェブサイト

写真撮影ガイド

カスタムサイズを使用して雲、降雨確率、視認性、風とスコアを並べます。これにより、読者が場所を探索するか機材を持参するかを決定する際のコンテキストが増えます。 カラフルな海岸の夕焼けの写真ガイドに予報ウィジェットとスカウティング画像が埋め込まれています

イベントと会場ページ

ビューが体験の一部である屋外会場では、ウィジェットが会場の固定された場所のための日の入り見通しを理解するのに役立ちます。スコアの平易な言語による説明がオーディエンスに有益な場合は説明を有効にしてください。 イベント詳細とギャラリー画像の横に日の入りウィジェットが埋め込まれた屋上イベント会場のウェブサイト

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

ウィジェットを広く公開する前に、いくつかの注意深い選択を行いましょう:

  1. 関連するコンテンツの近くに配置します。屋上説明のそばにある予報は、一般的なフッターに隠れている予報よりも役立ちます。
  2. 特定の表示ラベルを使用します。「港のテラス」は、すでに場所が明らかである場合、広い都市名よりも訪問者に多くのコンテキストを与えます。
  3. ページの言語、単位、時計に合わせます。小さな不一致が埋め込まれた機能をウェブサイトの他の部分から切り離された感じにします。
  4. 情報の密度が適切であることを確認します。コンパクトは狭いレイアウトに適しており、カスタムは天気の詳細がページの目的の一部である場合に適しています。
  5. インストール後にモバイル間隔を確認します。ウィジェットはページの一部に過ぎないため、見出し、画像、ボタンの横にどのように配置されているかをテストしてください。
  6. 定期的に表示を確認します。それにより、配置がトラフィックを受けているかどうか、現在のプランがまだ適しているかどうかを確認するのに役立ちます。

結論

日の入り予報ウィジェットは、変化する天気データを単純で関連性のあるウェブサイト機能に変えます。意味のある1つの場所を選び、オーディエンスに合わせてデザインを調整し、生成された埋め込みコードを貼り付け、1つのダッシュボードからウィジェットを管理します。ウィジェットをどこに配置するか決める前に、最初のウィジェットをプレビューして作成することができます。

FAQ

日の入りウィジェットを追加するには開発者である必要がありますか?

いいえ。ビジュアルビルダーでウィジェットを設定し、生成されたスクリプトまたはiframeスニペットをコピーし、HTMLまたは埋め込みブロックに貼り付けるだけです。一部の管理されたプラットフォームではカスタムコードを追加する許可が必要な場合があります。

埋め込んだ後にウィジェットを変更できますか?

はい。表示ラベル、テーマ、サイズ、アクセントカラー、言語、単位、時間形式、説明、天気項目、更新間隔を更新できます。保存された変更は既存の埋め込みに数分以内に表示されます。予報の場所自体は変更できません。

月間ウィジェット表示の制限に達した場合はどうなりますか?

ウィジェットの表示は続行されます。追加の表示はその月のカウントを停止し、Sunset Predictorのブランドが表示されます。月間表示の制限はアカウントプランに依存します。

スクリプトまたはiframeの埋め込みのどちらを使用するべきですか?

スクリプトはほとんどのウェブサイトにとって良いデフォルトです。CMSがサードパーティコンテンツを分離する場合やスクリプト埋め込みを許可しない場合はiframeを使用してください。どちらのオプションも各ウィジェットに自動的に生成されます。