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

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

操作を開始するには、Portal for ArcGIS にサイン インし、[概要] ページの [サイト] をクリックしてサイトのリストを表示します。

ヒント:

サイトをブラウザーで表示しているときに編集することもできます。サイン インしていて、サイトの左側に編集ボタンが表示されていることを確認してください。

ビデオの表示

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

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

1 つの Facebook 投稿の共有

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

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

Facebook タイムラインの表示

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

1. [ソーシャル メディア] カードを既存の行にドラッグします。
2. カードにポインターを合わせて、設定ボタンをクリックし、編集モードに切り替えます。
3. [ソーシャル メディア投稿の URL] フィールドに、パブリックに共有されている Facebook ページの URL を貼り付けます。
4. 必要に応じて、切り替えボタンをクリックし、次のオプションの組み合わせをオンにすることができます。
   • [タイムライン] では、ページのヘッダーの下にタイムラインが表示されます。タイムラインをイベントやメッセージとともに共有する場合は、このオプションをクリックします。
   • [イベント] には、ページのイベント ビューのリスト ビューが表示されます。
   • [メッセージ] では、Facebook Messenger を使用して Facebook ページの管理者にメッセージを入力および送信できます。
   • [大きいヘッダーを使用] をクリックすると、ページのヘッダーのサイズが大きくなり、ユーザーを Facebook Messenger にリンクする [メッセージの送信] ボタンが追加されます。
   • [カバー写真の表示] をクリックすると、ページのカバー写真が表示されます。
5. [保存] をクリックします。

1 つのツイートの表示

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

1. [ソーシャル メディア] カードを既存の行にドラッグします。
2. カードにポインターを合わせて、設定ボタンをクリックし、編集モードに切り替えます。
3. [ソーシャル メディア投稿の URL] フィールドに、パブリックに共有されている Twitter の投稿の URL を貼り付けます。1 つのツイートへのリンクを取得するには、投稿の右上にある [その他] ボタンをクリックしてから、[ツイートへのリンクをコピー] を選択します。
4. 必要に応じて、切り替えボタンをクリックして [オプション] メニューにある次のオプションの組み合わせをオンにすることができます。
   • [暗いテーマを表示] をクリックすると、ディスプレイの色が反転します。
   • [ツイート幅] では、投稿の表示サイズを [小]、[中]、[大] から選択できます。
5. [ツイート位置の選択] をクリックすると、[左]、[中央]、または [右] 揃えを選択できます。
6. [保存] をクリックします。

Twitter タイムラインの表示

スクロール可能な Twitter タイムラインを表示します。

1. [ソーシャル メディア] カードを既存の行にドラッグします。
2. カードにポインターを合わせて、設定ボタンをクリックし、編集モードに切り替えます。
3. [ソーシャル メディア投稿の URL] フィールドに、パブリックに共有されている Twitter タイムラインの URL を貼り付けます。
4. 必要に応じて、切り替えボタンをクリックして [オプション] メニューにある次のオプションの組み合わせをオンにすることができます。
   • [展開した高さ] では、twitter のタイムラインをより多く表示できます。
   • [ツイート制限] を使用すると、タイムラインに表示されるツイート数を設定できます (最大 20)。
   • [暗いテーマを表示] をクリックすると、ディスプレイの色が反転します。
   • [ヘッダーの表示] をクリックすると、ヘッダーが表示されます。同様に、[フッターの表示] をクリックするとフッターが表示されます。
   • [輪郭の表示] をクリックすると、タイムラインの周囲に境界線が表示されます。
   • [背景の表示] をクリックすると、背景の表示/非表示が切り替わります。
5. [保存] をクリックします。

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

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

ヒント:

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

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

1. [iframe] カードを既存の行にドラッグします。
2. カードにポインターを合わせて、設定ボタンをクリックし、編集モードに切り替えます。
3. iframe の URL と iframe の高さを指定します。別の Web サイトの iframe コードを埋め込まないでください。埋め込みたい URL のみを貼り付けます。

   注意:

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

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

   ヒント:

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

6. [適用] をクリックします。

   注意:

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

7. [保存] をクリックします。