ビデオ、ソーシャル メディア、iframe の埋め込み

FacebookVimeoYouTube のソーシャル メディアからビデオを共有し、iframe をサイトやページに埋め込みます。

操作を開始するには、イニシアティブまたはサイト チームのメンバーが ArcGIS Hub にサイン インし、[概要] ページの [サイト] を選択して、サイトのリストを表示します。 組織で ArcGIS Hub Premium のライセンスを保有している場合、イニシアティブ サイトが [概要] ページの [イニシアティブ] の下にリストされます。

ヒント:

サイトをブラウザーで表示しているときに編集することもできます。 ArcGIS Hub にサイン インしていることを確認し、サイトの左側にある編集ボタンを見つけます。

ビデオの表示

ビデオ カードを追加して、YouTubeVimeo、または Facebook ビデオを埋め込みます。

  1. [ビデオ] カードをドラッグして既存の行に配置します。
  2. カードにポインターを合わせて、編集ボタン 編集 を選択し、編集モードに切り替えます。
  3. [ビデオの URL] フィールドに、FacebookVimeo、または YouTube のビデオの URL を貼り付けます。
  4. ビデオ ソースに応じて、ビデオ ディスプレイを構成できる追加のオプションが表示されます。
    • Facebook ビデオの場合、[ポスト テキストの表示] を選択すると、「いいね!」、「コメント」、「シェア」の数、およびその他の関連テキストが表示されます。 ビデオ キャプションを表示するには、[キャプションを常に表示] を選択します。
    • Vimeo ビデオの場合、[ビデオ タイトルの表示][ビデオ所有者の表示][ビデオ所有者のサムネイルの表示]、および [ビデオのループ再生] を選択します。
    • YouTube ビデオの場合、[YouTube ブランドの表示] YouTubeおよび [ビデオのループ再生] を選択します。
  5. [ビデオの URL] の横にあるコピー ボタンを選択してリンクをクリップボードに保存すると、アプリの他の場所で再利用できます。
  6. [保存] を選択します。

1 つの Facebook 投稿の共有

1 つの投稿を表示して、特定の投稿をハイライト表示できます。

  1. [ソーシャル メディア] カードを既存の行にドラッグします。
  2. カードにポインターを合わせて、編集ボタン 編集 を選択し、編集モードに切り替えます。
  3. [ソーシャル メディア投稿の URL] フィールドに、パブリックに共有されている Facebook の投稿の URL を貼り付けます。 正しい URL をコピーするには、投稿のタイム スタンプ (投稿の左上隅の日付または時刻) を選択してから、サイトの編集に戻る前にブラウザーで新しい URL をコピーします。
  4. 必要に応じて、[ポスト テキストを表示] 切り替えボタンを選択して、投稿に関連付けられているテキストを表示します。
  5. [保存] を選択します。

Facebook または Twitter タイムラインの表示

Facebook のタイムライン、イベント、およびメッセージを表示することで、詳細に内容を確認できます。

  1. [ソーシャル メディア] カードを既存の行にドラッグします。
  2. カードの内部を選択して、編集モードに切り替えます。
  3. [ソーシャル メディア投稿の URL] フィールドに、パブリックに共有されている Facebook ページの URL を貼り付けます。
  4. 必要に応じて、切り替えボタンを選択し、次のオプションの組み合わせをオンにすることができます。
    • [タイムライン] では、ページのヘッダーの下にタイムラインが表示されます。 タイムラインをイベントやメッセージとともに共有する場合は、このオプションを選択します。
    • [イベント] には、ページのイベント ビューのリスト ビューが表示されます。

    [ソーシャル メディア] カードを使用すると、Facebook イベント フィードで予期しない結果が生じる可能性があります。 詳細については、「ソーシャル メディア カードと Facebook イベントの問題」をご参照ください。

    • [メッセージ] では、Facebook Messenger を使用して Facebook ページの管理者にメッセージを入力および送信できます。
    • [大きいヘッダーを使用] をクリックすると、ページのヘッダーのサイズが大きくなり、ユーザーを Facebook Messenger にリンクする [メッセージの送信] ボタンが追加されます。
    • [カバー写真の表示] をクリックすると、ページのカバー写真が表示されます。
  5. [保存] を選択します。

iframe カードを使用したコンテンツの埋め込み

[iframe] カードを使用すると、アプリ、Web マップ、ダッシュボードなどの外部リソースをその URL を使用して埋め込むことができます。

ヒント:

Iframes は、ダッシュボードとインフォグラフィックスを表示する場合に最適です。 Experience Builder Web アプリ、Insights ページ、Web マップ、調査、ストーリー マップなどの他のアイテムについては、ギャラリー カードWeb マップ カードアプリケーション カード調査カードの使用を検討してください。

2 個以下の iframe インスタンスを使用することを検討します。 1 つのサイトまたはページに使用する iframes が多すぎると、モバイル ビューでのパフォーマンスが低下する可能性があります。 iframe と別のカードのどちらを使用していても、表示する主要なアイテムを 2 個以下にすると、より明確でアクセスしやすいデザインを作成できます。 残りのアイテムにはギャラリー カードを使用してみてください。

  1. [iframe] カードを既存の行に追加します。
  2. iframe の URL と iframe の高さを指定します。 別の Web サイトの iframe コードを埋め込まないでください。埋め込みたい URL のみを貼り付けます。 esri.com ドメインはサポートされていません。

    注意:
    小さなデバイスでプライマリ URL がエラーになった場合でもコンテンツがレンダリングされるようにするには、[モバイル URL のオーバーライド] フィールドを使用してセカンダリ URL を指定します。

  3. iframe にタイトルを追加します。
  4. [自動] をオンにしてスクロールを有効にします。

    ヒント:
    モバイル デバイスでは、スクロールが常に適切であるとは限りません。これは、アプリケーションを通過できない可能性があるためです。 変更を適用する前に、モバイル デバイスでスクロール可能な iframe の操作性を確認してください。

  5. [適用] を選択します。

    注意:

    HTTP を使った URL は、HTTPS を使っている編集モードでは表示されません。 サイトを保存し表示して、iframe を観察します。

  6. [保存] を選択します。