Skip to main content

高度な埋め込み (ベータ版)

ベータ版:

高度な埋め込みはベータ版で、ArcGIS Online を使用した場合のみ使用できます。 ベータ機能で問題が発生した場合は、Esri Community にフィードバックをお送りください。

可能性は低いものの、ArcGIS StoryMaps の内部コンポーネントへの変更がカスタム コードに影響を与えたり、破損する可能性があります。 カスタマイズは、基本的な機能やスタイルのオーバーライドに限定してください。

Web 開発者は高度な埋め込みを使って ArcGIS StoryMaps のアイテムを Web サイトに統合し、Web ドメイン上のカスタム リンクで共有できます (https://www.my-organization.gov/annual-report など)。 また、ArcGIS StoryMaps のアイテムの外観を変更したり、HTML、CSS、JavaScript を使ってカスタム機能を追加することも可能です。

高度な埋め込みは、ArcGIS StoryMaps のアイテムの内容をホスト Web ページの一部として扱うことを可能にする <script> タグを用いて実現されます。 これにより、コンテンツのスタイル設定をより細かく制御でき、<iframe> で標準の埋め込みを使う際に表示される追加のスクロール バーを排除できます。 ArcGIS StoryMaps のアプリケーション コードは Esri のサーバー上でホスティングされ、最新のセキュリティーおよびパフォーマンス向上を実現するため、自動的に更新されます。

高度な埋め込みでは、以下のことを行えます:

  • ArcGIS StoryMaps のアイテム (ストーリー、ブリーフィング、コレクション) を Web ドメインの特定の URL に埋め込む

  • 組織の標準的な Web サイトのヘッダーとフッターを使用し、ArcGIS StoryMaps のアイテムを Web サイトのグローバル ナビゲーションに統合する

  • Web サイトに ArcGIS StoryMaps のコンテンツを埋め込む際、複数のスクロール バーを表示しないようにする

  • 独自のフォントを使う

  • 画像、ハイパーリンク、ボタン、その他のコンテンツ要素にカスタム スタイルを適用する

  • カスタム コンポーネントを追加する (ページが最初に読み込まれた際に表示されるスプラッシュ画面や、読者が質問やコメントを投稿するために使用できる展開可能パネルなど)

  • 新しいユーザー エクスペリエンスを構築する (読者に郵便番号を入力してもらい、それに基づいてマップをその場所に移動するフォームなど)

  • お気に入りの解析サービスを使って読者のエンゲージメントを追跡する

ヒント:

詳細や例については、GitHub 上の「ArcGIS StoryMaps 開発者サンプル」をご参照ください。

高度な埋め込みの有効化

高度な埋め込みを有効にするには、次の手順に従います:

  1. ビルダーで、ヘッダーの その他 ボタン ... をクリックし、設定 を選択します。

  2. 高度な設定 タブで、高度な埋め込みの有効化 をクリックします。

  3. 許可されたドメイン に、ArcGIS StoryMaps のアイテムを埋め込む予定のドメイン名を入力します (www.example.com など)。 プロトコルやポート番号は含めないでください。

  4. 追加 をクリックします。

  5. 必要に応じ、この操作を繰り返してドメインをさらに追加します。

  6. ArcGIS StoryMaps のアイテムを公開します。

重要:

ArcGIS StoryMaps のアイテムを他の Web ページに埋め込むには、全員と共有する必要があります。

埋め込みコード スニペットのコピー

高度な埋め込みが有効になり、ArcGIS StoryMaps のアイテムが公開されて全員に共有されたら、以下の手順を実行し、埋め込みに必要なコード スニペットを取得します。

  1. ArcGIS StoryMaps のアイテムを編集します。

  2. ヘッダーの その他 ボタン ... をクリックし、このストーリーの埋め込み を選択します。

  3. ドロップダウン メニューから スクリプト (高度) を選択します。

  4. コピー をクリックします。

    埋め込みコードがコピーされます。

埋め込みコードは、埋め込み タブの 共有 メニューから公開された ArcGIS StoryMaps のアイテムを表示する際に取得することもできます。

コード スニペットは、以下に似た <script> タグとして提供されます。 ArcGIS StoryMaps のアイテムを追加するページに 2 つ目のスクリプト タグを配置します。

<script>
  window.storyMapsEmbedConfig = {
    storyId: '[StoryMapItemID]',
    rootNode: '.storymaps-root',
  };
</script>
<script src="https://storymaps.arcgis.com/embed/view"></script>

参考資料