アドバンス

高度な埋め込みテクニック、パフォーマンスのヒント、統合パターン。

ウィジェット属性

<tickadoo-map> ウェブコンポーネントは以下の属性を受け付けます：

属性	型	デフォルト	説明
`map-id`	string	—	マップID（必須）
`locale`	string	`"en"`	UI言語（`en`, `de`, `es`, `fr`, `it`, `pt`, `ja`, `zh`, `cs`）
`theme`	string	`"system"`	カラーテーマ：`light`、`dark`、または `system`
`mobile-list-variant`	string	`"carousel"`	モバイルリストスタイル：`carousel` または `drawer`
`enable-routing`	boolean	`false`	徒歩/自転車/車の交通手段選択付きルート案内を表示
`center`	string	—	初期マップ中心を `"lng,lat"` で指定（例：`"14.42,50.08"`）
`zoom`	number	`10`	初期ズームレベル（1〜20）
`booking-mode`	string	`"calendar"`	予約フロータイプ
`use-category-colors`	boolean	`false`	カテゴリ別のマーカー色を使用

遅延読み込み

マップがすぐに表示されない場合（ファーストビューより下やタブ内など）、読み込みを遅延させてページパフォーマンスを向上させましょう：

Lazy loading

<tickadoo-map map-id="YOUR_MAP_ID" style="height: 500px" loading="lazy">
</tickadoo-map>

loading="lazy" を使用すると、要素がビューポートに入ったときにのみマップが初期化されます。

レスポンシブデザイン

ウィジェットはデフォルトでレスポンシブですが、一般的なレイアウトのパターンは以下の通りです：

フルワイドセクション

Full-width section

<section style="width: 100%; height: 70vh; min-height: 400px">
  <tickadoo-map map-id="YOUR_MAP_ID" style="width: 100%; height: 100%">
  </tickadoo-map>
</section>

サイドバーレイアウト

Sidebar layout

<div style="display: flex; gap: 1rem; height: 600px">
  <div style="flex: 1">
    <!-- Your content -->
  </div>
  <tickadoo-map map-id="YOUR_MAP_ID" style="flex: 1">
  </tickadoo-map>
</div>

コンテンツセキュリティポリシー (CSP)

サイトがコンテンツセキュリティポリシーを使用している場合、以下のドメインを許可する必要があります：

ディレクティブ	ドメイン	用途
`script-src`	`b2b.tickadoo.com`	ウィジェットスクリプト
`script-src`	`calendar-js.tickadoo.com`	予約カレンダースクリプト
`connect-src`	`concierge.tickadoo.com`	API リクエスト
`connect-src`	`calendar-js.tickadoo.com`	予約カレンダーの翻訳
`connect-src`	`pmtiles.tickadoo.com`	マップタイルデータ
`connect-src`	`mapbox.tickadoo.com`	ルーティングサービス
`img-src`	`*.tickadoo.com`	画像とアイコン
`style-src`	`'unsafe-inline'`	ウィジェットスタイル

CSP header example

Content-Security-Policy:
  script-src 'self' b2b.tickadoo.com calendar-js.tickadoo.com;
  connect-src 'self' concierge.tickadoo.com calendar-js.tickadoo.com pmtiles.tickadoo.com mapbox.tickadoo.com;
  img-src 'self' *.tickadoo.com;
  style-src 'self' 'unsafe-inline';

パフォーマンスに関する注意事項

ウィジェットスクリプトは gzip 圧縮後で約 315KB です（マップレンダラーを含む）。ユーザーがパンやズームするとマップタイルをオンデマンドで読み込みます。最適なパフォーマンスのために：

script タグに defer を使用してページレンダリングのブロックを回避
ファーストビューより下にある場合は Web Component に loading="lazy" を使用
ウィジェットはブラウザでのタイルキャッシュを自動的に処理します

シングルページアプリケーション (SPA)

サイトが SPA（React、Vue、Angular など）の場合は、Web Component アプローチを使用してください。<tickadoo-map> 要素はどのフレームワークの DOM レンダリングとも連携します。

React の場合：

React usage

function MapSection({ mapId }: { mapId: string }) {
  return (
    <div style={{ height: "500px" }}>
      <tickadoo-map map-id={mapId} />
    </div>
  );
}

スクリプトは一度だけ読み込まれるようにしてください。例えば index.html 内か、トップレベルコンポーネントの useEffect 経由で読み込みます。

Tip

ファーストクラスの統合のための公式 React パッケージ（@tickadoo/map-react）が利用可能です。アクセスについては support@tickadoo.com までお問い合わせください。Web Component は他のフレームワーク向けに ESM モジュールとしても動作します。