BIM・IFCブログに戻る
上海からのコンテナを待つ買い手に届くのは、たいてい PDF と船会社のリンクです。サプライヤーやフォワーダーなら、同じ情報を自社サイトで、地球儀の上に自社の色で見せられます。Tracking Globe はコードひとつ、地図 API キーなしで動き、多くのサイトに合います。すべてではありません。このガイドでその違いを説明します。
この記事のポイント
- WordPress と Shopify は script タグが使えます。SharePoint Online は、サイト所有者がドメインを許可すれば iframe が使えます。
- タオバオと Tmall ではライブウィジェットを動かす方法を確認できなかったため、可能な手段は画像です。
- 自社データ、または常にそれと分かるシミュレーションを描画します。運送会社には接続しません。
- 約 30 KB を 2 段階で読み込み、Cookie も第三者への通信もありません。
実際のウィジェットでのシミュレーション貨物。シミュレーションには常に見えるラベルが付きます。
プラットフォームごとの導入方法
| プラットフォーム | 導入方法 | 注意点 | テスト内容 |
|---|
| 任意の HTML サイト | script タグと要素 | 厳格な Content-Security-Policy にはスクリプトのホストの記載が必要 | デスクトップとスマートフォン、サイズとレイアウトシフトを測定 |
| WordPress | カスタム HTML ブロック、または小さなプラグインのショートコード | unfiltered_html のない権限ではコードが消える。WordPress.com は有料プランが必要 | ブロックのマークアップをブラウザーで、プラグインを PHP でテスト。実環境では未テスト |
| Shopify | カスタム Liquid セクション、またはテーマのセクションファイル | リッチテキスト欄では削除される。独自ポリシーのヘッドレスストアはホストの許可が必要 | 実店舗のセキュリティヘッダーを適用したページ。店舗内では未テスト |
| SharePoint Online | 「埋め込み」Web パーツ、iframe として | サイト所有者によるドメイン許可が必要。ページのスクリプトは動かない | 厳格なポリシー下のサンドボックス iframe。実テナントでは未テスト |
| タオバオ / Tmall | 店舗の画像スペースの画像 | 確認できるライブウィジェットなし。外部リンクは制限あり | 画像書き出しのみ |
4 ステップで追加
- データを選ぶ シミュレーションのデモ、貼り付けた表計算や JSON、または JSON を返す自社 URL。貼り付けたデータはページのソースから読めるので、非公開の貨物はデータ URL か参照番号の照会の背後に置きます。
- ブランドに合わせる 色、ロゴ、フォント、言語、高さ。自社のスタイルシートでも変数を設定でき、ウィジェットをサイトのテーマに合わせられます。
- 訪問者が操作できる範囲を決める ドラッグ、ズーム、地球儀と地図の切替、一覧、検索、凡例、全画面は個別にオフにできます。シミュレーションのラベルはオフにできません。
- プラットフォーム用のコードをコピー 設定ツールが、SharePoint 所有者が許可すべきドメインを含め、各プラットフォームに合った版を書き出します。
実データ、当社サーバーなしで
各訪問者のブラウザーが自社 URL を直接呼び出すため、貨物データは当社を通りません。その URL はクロスオリジン要求を許可する必要があり、非公開データなら独自のアクセス制御も必要です。行には tracking_number、origin、destination、eta、latitude、longitude など、運送会社や表計算でよく使う名前が使えます。{id} を含む照会 URL は 1 件ずつ返すので、顧客には自分の貨物だけが見えます。
ホストページへの負荷
3 KB のローダーが領域を確保するので、表示はずれません。27 KB のエンジンは地図が画面まで 300 px に近づくと読み込まれます。クリック時にすることもできます。デスクトップとエミュレートしたスマートフォンのテストページでは、レイアウトシフトはゼロで、スクロールして近づくまでエンジンは読み込まれませんでした。画面外では描画が止まり、Ctrl か ⌘ を押さない限りホイールはページをスクロールし、視差効果を減らす設定で回転が止まります。世界地図はファイルに内蔵され、訪問者の IP が地図事業者に渡りません。
答えが「いいえ」または「まだ」の場合
WordPress は unfiltered_html 権限[wp]のないユーザーの iframe とスクリプトを削除し、WordPress.com は有料プランでのみ許可[wpcom]します。SharePoint にはサイトごとの許可リスト[sp]があり、テナントのアプリカタログが必要な SPFx Web パーツは作っていません。タオバオについて見つかった最も公式な情報源[taobao]は古い草案なので、頼る前にプラットフォームに確認してください。中国の買い手向けには 2 つのファイルを現地のサーバーでホストしてください。中国からの本サイトの読み込みは測定していません。
Web サイトに貨物追跡マップを埋め込む方法：WordPress、Shopify、SharePoint、タオバオ
