SidewaysDataのウィジェットを自分のウェブサイトに直接埋め込んで、リーチを拡大しましょう。訪問者が普段訪れている場所でイベントやリアルタイム結果を表示できます — わずか1行のコードで。

なぜウィジェットを使うのか？

• 1行のコード - スクリプトタグをウェブサイトに貼り付けるだけ
• 常に最新 - イベントと結果はSidewaysDataから自動で同期されます
• メンテナンス不要 - アップデートや改善はすべて当社が対応します
• プロフェッショナルな外観 - どのデバイスでも動作する洗練されたレスポンシブデザイン
• 無料 - SidewaysDataに含まれており追加費用はかかりません

利用可能なウィジェット

イベント検索ウィジェット

フィルタ可能なイベント一覧を表示します。訪問者は年、登録状況、イベントの種類などで閲覧できます。イベントページやホームページに最適です。

イベント検索ウィジェットの詳細

ライブ結果ウィジェット

イベント中のリアルタイムのレース結果を表示します。観客向けのライブチャットが含まれ、イベントのタイミングに応じて自動的に「ライブ結果」と「最終結果」を切り替えます。

ライブ結果ウィジェットの詳細

開始方法

1. 主催者IDまたはイベントIDを見つけます（IDの取得を参照）
2. 必要なウィジェットを選びます
3. 埋め込みコードをコピーしてウェブサイトに貼り付けます
4. オプションの設定属性でカスタマイズします

要件

ウィジェットはJavaScriptをサポートする任意のウェブサイトで動作します。これにはWordPress、Squarespace、Wix、カスタムHTMLサイト、ほとんどのウェブサイトビルダーが含まれます。ページにカスタムHTMLやスクリプトタグを追加できる機能が必要です。

ウィジェットを設定するには、オーガナイザーIDと、必要に応じて特定のイベントIDが必要です。以下はそれらの見つけ方です。

Finding Your Organizer ID

オーガナイザーIDは、SidewaysDataのオーガナイザーページを表示しているときのURLに表示されます。

1. Go to sidewaysdata.com
2. Navigate to your organizer page
3. Look at the URL—it will be in the format: sidewaysdata.com/organizer/YOUR_ORGANIZER_ID

For example, if your URL is sidewaysdata.com/organizer/example-motorsports, your organizer ID is example-motorsports.

Finding Event IDs

イベントIDは、イベントのURLやオーガナイザーダッシュボードに表示されます。

From the Event URL

1. Navigate to any of your events on SidewaysData
2. Look at the URL—it will contain the event ID after /events/

For example: sidewaysdata.com/events/12345 means the event ID is 12345.

From Your Dashboard

1. Log in to SidewaysData
2. Go to your イベントページ
3. The event ID is displayed in the event list or visible in links

Using Browser Developer Tools

IDを見つけるのに問題がある場合：

1. Right-click on your organizer or event page
2. Select "Inspect" or "Inspect Element"
3. Look for data attributes or URLs containing the ID

Need Help?

IDが見つからない場合は、SidewaysDataのサポート に連絡してください。こちらで見つけるお手伝いをします。

Find Events ウィジェットは、ウェブサイト上にフィルタ可能なイベント一覧を表示します。訪問者は今後のイベントを閲覧し、さまざまな条件で絞り込み、SidewaysData で登録や詳細表示に進むことができます。

表示内容

• イベントカード（名前、日付、場所、登録状況）
• 年、イベント種別、登録状況、ボランティア募集のフィルタードロップダウン
• SidewaysData のイベントページへの直接リンク
• あらゆる画面サイズに対応するレスポンシブレイアウト

基本の埋め込みコード

イベントを表示したい場所に次の script タグを追加してください:

<script
  src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
  data-organizer-ids="your-organizer-id">
</script>

your-organizer-id を実際のオーガナイザー ID に置き換えてください（参照: ID の取得方法）。

デフォルトの動作

追加の設定がない場合、ウィジェットは次のように動作します:

• 指定したオーガナイザーのすべてのイベントを表示する
• 年、イベント種別、登録状況、ボランティア向けのフィルタードロップダウンを表示する
• イベントを日付で並べ替える（古い順）
• すべての登録状況のイベントを含める

仕組み

ウィジェットは、SidewaysData からコンテンツを読み込むレスポンシブな iframe を作成します。iframe はコンテンツに合わせて自動的に高さを調整するため、ウィジェット内でスクロールする必要はありません。イベントはあなたの SidewaysData アカウントと同期され、行った変更は自動的に反映されます。

次のステップ

• ウィジェットを設定する（オプション属性付き）
• さまざまなユースケースについては よくある例 を参照してください

Find Events ウィジェットを script タグの data 属性でカスタマイズします。どの属性も任意ですが、表示するイベントを指定する属性は少なくとも1つ必要です。

Specifying Events

表示するイベントを指定するには、次の属性のうち少なくとも1つを含める必要があります:

data-organizer-ids

特定のオーガナイザーのすべてのイベントを表示します。複数のオーガナイザーを指定する場合はカンマ区切りで記述してください。

<script
  src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
  data-organizer-ids="example-motorsports">
</script>

複数のオーガナイザー:

<script
  src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
  data-organizer-ids="org-one,org-two,org-three">
</script>

data-event-ids

特定のイベントIDのみを表示します。複数のイベントを指定する場合はカンマ区切りで記述してください。

<script
  src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
  data-event-ids="12345,67890">
</script>

Filtering Options

data-event-status

登録状況でイベントをフィルタリングします。値: open, closed, or any.

data-event-status="open"

data-default-reg-status

登録状況ドロップダウンのデフォルト値を設定します。これはフィルターオプションを事前に選択した状態にしますが、訪問者が変更することも可能です。

data-default-reg-status="open"

data-limit-organizer-event-types

true に設定すると、ドロップダウンに表示するイベントタイプをオーガナイザーが実際に使用しているものだけに制限し、全ての利用可能なイベントタイプを表示しないようにします。

data-limit-organizer-event-types="true"

data-hide-volunteers-dropdown

true に設定すると、ボランティア募集のフィルタードロップダウンを非表示にします。

data-hide-volunteers-dropdown="true"

Display Options

data-is-results-mode

true に設定すると、今後のイベントではなく結果が利用可能なイベントを表示します。「過去の結果」ページに便利です。

data-is-results-mode="true"

data-newest-first

true に設定すると、既定の古い順ではなく新しい順でイベントを並べ替えます。

data-newest-first="true"

Advanced Options

data-origin

デフォルトの sidewaysdata.com の代わりにカスタムドメインを使用します。SidewaysData にカスタムドメインを設定している場合にのみ必要です。

data-origin="https://events.yourdomain.com"

Complete Example

複数の設定オプションを使用した例:

<script
  src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
  data-organizer-ids="example-motorsports"
  data-event-status="open"
  data-limit-organizer-event-types="true"
  data-hide-volunteers-dropdown="true"
  data-newest-first="true">
</script>

これは "example-motorsports" のオープン登録イベントを表示し、フィルターには関連するイベントタイプのみを表示し、ボランティアのドロップダウンを非表示にし、新しいイベントを先に並べます。

Find Events ウィジェットの一般的な設定（さまざまなユースケースに対応）。

Show All Your Events

組織のすべてのイベントを、すべてのフィルターオプションを有効にして表示します:

<script
  src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
  data-organizer-ids="your-organizer-id">
</script>

Show Only Open Registration

現在登録を受け付けているイベントのみを表示します:

<script
  src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
  data-organizer-ids="your-organizer-id"
  data-event-status="open">
</script>

Show Events with Results

タイミング結果のあるイベントを表示する「過去の結果」ページを作成します:

<script
  src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
  data-organizer-ids="your-organizer-id"
  data-is-results-mode="true"
  data-newest-first="true">
</script>

Show Specific Events

選手権シリーズなど、特定のイベントのみを表示します:

<script
  src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
  data-event-ids="12345,12346,12347,12348">
</script>

Show Events from Multiple Organizers

地域ページやシリーズページで、複数の組織のイベントを表示します:

<script
  src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
  data-organizer-ids="org-one,org-two,org-three">
</script>

Simplified View (Minimal Filters)

使用頻度の低いフィルターを非表示にして、よりシンプルなインターフェースでイベントを表示します:

<script
  src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
  data-organizer-ids="your-organizer-id"
  data-limit-organizer-event-types="true"
  data-hide-volunteers-dropdown="true">
</script>

Homepage Widget (Open Events, Newest First)

ウェブサイトのホームページ用によく使われる設定:

<script
  src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
  data-organizer-ids="your-organizer-id"
  data-event-status="open"
  data-newest-first="true"
  data-limit-organizer-event-types="true"
  data-hide-volunteers-dropdown="true">
</script>

Default to Open Registration Filter

すべてのイベントを表示しつつ、登録フィルターをデフォルトで「open」に設定します:

<script
  src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
  data-organizer-ids="your-organizer-id"
  data-default-reg-status="open">
</script>

This differs from data-event-status="open" because visitors can still change the filter to see closed events.

The Live Results ウィジェットは、あなたのウェブサイトにリアルタイムのレース結果を表示します。観客はイベント中に経過を追い、終了後に最終結果を確認できます — すべてサイトを離れることなく行えます。

What It Displays

• ライブイベント中のリアルタイムのタイム結果
• イベントのタイミングに基づく "Live Results" または "Final Results" の表示
• 観客同士が交流できる FastComments による組み込みのライブチャット
• 新しいタイムが記録されると自動で更新

Basic Embed Code

結果を表示したい場所に次の script タグを追加してください:

<script
  src="https://sidewaysdata.com/static/js/sideways-data-live-results-embed.js"
  data-organizer-id="your-organizer-id">
</script>

your-organizer-id を実際の organizer ID に置き換えてください（Getting Your IDs を参照）。

Note: The Live Results ウィジェットは data-organizer-id 属性を必要とします。これがないとウィジェットは読み込まれません。

How It Works

ウィジェットはレスポンシブな iframe を作成し、SidewaysData のライブタイミングシステムに接続します。イベントがアクティブな間:

• タイムが記録されると結果がリアルタイムで更新されます
• タイミングが進行中であることを示すためにウィジェットは "Live Results" を表示します
• ライブチャットにより観客がイベントについて議論できます

イベント終了後:

• 結果は引き続き閲覧可能です
• ウィジェットは "Final Results" 表示に切り替わります
• チャット履歴は保持されます

Use Cases

• Event day - ホームページに埋め込んで観客がライブで追えるようにする
• Dedicated results page - ウェブサイト上に恒久的な結果ページを作成する
• Social media landing page - イベント中に結果ページへのリンクを共有する

Next Steps

• Configure the widget with optional attributes

Live Results ウィジェットの設定は最小限で、必要なのは organizer ID のみです。

必須属性

data-organizer-id

あなたの SidewaysData organizer ID。ウィジェットを動作させるには必須です。

<script
  src="https://sidewaysdata.com/static/js/sideways-data-live-results-embed.js"
  data-organizer-id="example-motorsports">
</script>

organizer ID の確認方法については Getting Your IDs を参照してください。

任意属性

data-origin

sidewaysdata.com のデフォルトの代わりにカスタムドメインを使用します。SidewaysData にカスタムドメインを設定している場合のみ必要です。

<script
  src="https://sidewaysdata.com/static/js/sideways-data-live-results-embed.js"
  data-organizer-id="example-motorsports"
  data-origin="https://events.yourdomain.com">
</script>

完全な例

一般的な Live Results の埋め込み例：

<script
  src="https://sidewaysdata.com/static/js/sideways-data-live-results-embed.js"
  data-organizer-id="example-motorsports">
</script>

エラー処理

data-organizer-id 属性がない場合、ウィジェットはブラウザのコンソールにエラーを出力し、レンダリングされません。必ずこの必須属性を含めてください。

配置のヒント

• ウィジェットを十分な幅のあるコンテナに配置してください（推奨幅は少なくとも320px）
• ウィジェットはコンテンツに合わせて高さを自動調整します
• イベント日に最大の視認性を得るため、ファーストビュー（画面上部）に配置することを検討してください
• 専用の「Live Results」ページのメインコンテンツとしても適しています

SidewaysDataのウィジェットはiframeとして埋め込まれるため、直接のCSSスタイリングが制限されます。ただし、ウィジェットがページレイアウトにどのように収まるかを制御できます。

コンテナのスタイリング

ウィジェットをコンテナ要素でラップして、配置や最大幅を制御します:

<div style="max-width: 1200px; margin: 0 auto;">
  <script
    src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
    data-organizer-ids="your-organizer-id">
  </script>
</div>

幅の制御

ウィジェットは自動的に親コンテナの幅の100%に拡張されます。親要素のスタイルで幅を制御してください:

<div style="width: 100%; max-width: 800px;">
  <script
    src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
    data-organizer-ids="your-organizer-id">
  </script>
</div>

高さの挙動

ウィジェットの高さはコンテンツに応じて自動的に調整されます。iframeは必要な高さをページに伝えるためにpostMessageを使用するため、ウィジェット内にスクロールバーが表示されません。

レスポンシブデザイン

ウィジェットはレスポンシブ対応で、モバイル端末でも問題なく動作するように設計されています。狭い画面にも自動的に適応します。最良の結果を得るために:

• パーセンテージベースまたは柔軟なコンテナ幅を使用する
• モバイルで横スクロールを引き起こす可能性のある固定ピクセル幅は避ける
• 様々な画面サイズでテストする

背景との互換性

ウィジェットは明るい背景で表示することを想定して設計されています。サイトが暗い背景の場合は、ウィジェットを明るい色のコンテナに配置することを検討してください:

<div style="background: #ffffff; padding: 20px; border-radius: 8px;">
  <script
    src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
    data-organizer-ids="your-organizer-id">
  </script>
</div>

iframeのスタイリング制限

ウィジェットはiframeを使用しているため、その内部のコンテンツ（フォント、色、ボタンのスタイルなど）を直接スタイリングすることはできません。ウィジェットのコンテンツは一貫した専門的な外観を保つためにSidewaysDataの標準スタイルを使用します。

特定のブランディング要件がある場合は、オプションについて話し合うためにSidewaysDataサポートに連絡することを検討してください。

マージンとスペーシングの追加

コンテナに標準的なCSSを適用して、ウィジェットの周りにスペースを追加します:

<div style="margin: 40px 0;">
  <script
    src="https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js"
    data-organizer-ids="your-organizer-id">
  </script>
</div>

SidewaysData ウィジェット使用時によくある問題とその解決策。

Widget Not Appearing

Check the script URL

スクリプトの src 属性が正しい URL を指していることを確認してください:

• Find Events: https://sidewaysdata.com/static/js/sideways-data-find-events-embed.js
• Live Results: https://sidewaysdata.com/static/js/sideways-data-live-results-embed.js

Check required attributes

• Find Events widget には data-organizer-ids または data-event-ids のいずれかが必要です
• Live Results widget には data-organizer-id が必要です

Check for JavaScript errors

ブラウザのデベロッパーコンソールを開き（通常は F12 または 右クリック → Inspect → Console）、エラーメッセージを確認してください。Live Results ウィジェットは data-organizer-id がない場合にエラーを記録します。

Verify your IDs are correct

オーガナイザー ID とイベント ID が SidewaysData に表示されているものと一致しているか再確認してください。詳細は Getting Your IDs を参照してください。

Wrong Events Showing

Check organizer ID spelling

オーガナイザー ID は大文字と小文字が区別されます。SidewaysData の URL に表示されるものと ID が完全に一致していることを確認してください。

Check filter settings

data-event-status="open" を使用していてイベントが表示されない場合、登録がオープンになっているイベントが存在しない可能性があります。このフィルタを外してすべてのイベントを表示してみてください。

Check results mode

data-is-results-mode="true" が設定されていると、ウィジェットは今後のイベントではなく結果のあるイベントを表示します。今後のイベントを表示するにはこの属性を削除してください。

Widget Height Issues

Widget appears cut off

ウィジェットは自動的に高さを調整するはずです。内容が切り取られて表示される場合は次を確認してください:

1. 親要素に overflow: hidden が設定されていないか確認する
2. CSS が iframe の高さを固定していないことを確認する
3. ブラウザで JavaScript が有効になっていることを確認する

Excessive empty space

ウィジェットの下に過剰な空白がある場合、自動の高さ調整で対処されるはずです。それでも解決しない場合は、ウィジェットは読み込まれているが表示するイベントがない可能性があります。

Content Not Updating

Events not showing recent changes

ウィジェットはページ読み込みごとに SidewaysData から新しいコンテンツを読み込みます。変更が反映されない場合は次を試してください:

1. ハードリフレッシュを行う（Ctrl+F5 または Cmd+Shift+R）
2. ブラウザのキャッシュをクリアする
3. 数分待つ — 変更が反映されるまで少し時間がかかる場合があります

Live results not updating

ライブ計測中は結果が自動的に更新されるはずです。更新されない場合は次を確認してください:

1. 該当イベントが SidewaysData 上でアクティブに計測されていることを確認する
2. ページをリロードする
3. インターネット接続を確認する

Website Builder Issues

WordPress

WordPress を使用している場合は次を試してください:

• 「Custom HTML」ブロックまたはウィジェットを使用する
• スクリプトをブロックするプラグインを一時的に無効にする
• テーマがコンテンツから script タグを削除していないか確認する

Squarespace

「Code Block」または「Embed」要素を使用し、スクリプトタグを直接貼り付けてください。

Wix

「HTML iframe」または「Custom Element」機能を使用してスクリプトを追加してください。

Cross-Origin Issues

ウィジェットは SidewaysData のサーバーからコンテンツを読み込みます。クロスオリジンエラーが発生する場合は次を確認してください:

1. スクリプト URL に https://（http:// ではない）を使用していることを確認する
2. data-origin を使用している場合は、ドメインが正しく構成されていることを確認する

Still Having Issues?

これらの解決策を試してもウィジェットが正しく動作しない場合は、contact SidewaysData support に次の情報を添えてお問い合わせください:

• ウィジェットを埋め込んでいるページの URL
• 使用している完全なスクリプトタグ
• ブラウザコンソールのエラーメッセージ（あれば）
• 期待していることと実際に起きていることの説明