チュートリアル: フロントページでのツイートの表示

開発者ポータル のフロントページの外観をカスタマイズして、最近のツイートを表示することができます。 ツイートを使用して、サービスの可用性やマーケティング・キャンペーンなどの情報をユーザーに提供できます。

開始前に

このチュートリアルを完了するには、 開発者ポータル を有効にして、管理者権限を持っている必要があります。 チュートリアル「 ポータルの作成 」では、ポータルを有効にする方法が説明されています (まだ有効になっていない場合)。

このチュートリアルについて

このタスクでは、ビューを作成し、そのビューをカスタマイズしてツイートを表示し、そのビューを 開発者ポータル ・サイトのフロントページに組み込みます。

開始する前のフロントページは、 フロントページの画像 のようになります。

このチュートリアルでは、以下の手順を実行します。
  1. 「メディア・エンティティー Twitter (Media entity Twitter)」 モジュールを有効にします。
  2. ツイートを保管するための 「Twitter」 という名前のエンティティーを作成します。
  3. メディア項目を追加します。
  4. カルーセル・ビューを作成します。
  5. カルーセル・ビューをカスタマイズします。
  6. 開発者ポータルのフロントページにカルーセル・ビューを埋め込みます。

Media entity twitter モジュールを有効にします。

  1. 開発者ポータル に管理者としてログインします。
  2. Extend > Extendをクリックし、Filterフィールドに'media入力する。
  3. MediaセクションでMedia Entity Twitterを見つけ、Enableをクリックして'Media entity twitterモジュールを有効にする。

    メディア・エンティティのtwitterモジュールを有効にするページ

ツイートを保管するための Twitter という名前のエンティティーを作成します。

  1. Structure > Media typesに移動する。
  2. メディアタイプを追加]をクリックします。
  3. 「名前」 フィールドに、 Twitterと入力します。
  4. メディアソースリストから、ツイッターを選択します。

    Twitter のメディア・ソース

  5. メディアソース設定セクションで、「Whether to use Twitter api to fetch tweets or not値が「No」に設定されていることを確認する。
  6. フィールドマッピングセクションで、Tweet IDセクションとTwitter user informationセクションが- スキップフィールド -に設定されていることを確認します。

    ページにツイッタービューを追加する

  7. 保存 をクリックします。
  8. 新しいTwitterメディアタイプの編集の隣にあるリストから、表示管理を選択します。
  9. Tweet URLのフォーマットリストから、ツイッター埋め込みを選択します。
  10. Authored on, Authored by, Thumbnail フィールドが Disabled セクションにあることを確認してください。

    表示オプションのスクリーンショット

  11. 保存 をクリックします。

メディア項目の追加

  1. メディア 」 >「メディアを追加 」>「 Twitter 」をクリック。
  2. 「名前」 フィールドに、メディアの名前 ( Drupal Tweetなど) を入力します。
  3. ツイート URL フィールドに、 URL、例えば https://twitter.com/drupal/status/966443708160839684 と入力する。

    ツイッターを追加するページ URL

  4. 保存 をクリックします。
  5. さらにツイートを追加する場合は上記のステップを繰り返します (カルーセル・ビューを作成するには少なくとも 2 つのツイートが必要です)。

カルーセル・ビューの作成

  1. 構造 > ビューに移動します。
  2. ビューを追加]をクリックします。
  3. ビュー名フィールドに、例えばツイートビューのように、ビューの名前を入力します。
  4. 表示設定で、以下のオプションを選択する：
    • show：メディア
    • of type：ツイッター
    • sorted by：ソートされていない
  5. ブロックの設定セクションで、ブロックを作成するチェックボックスを選択します。
  6. 表示形式が、フィールドのスリックカルーセルとして選択されていることを確認してください。

    カルーサルページの作成

  7. 「保存して編集」をクリックします。

カルーセル・ビューのカスタマイズ

ビューを編集するページが表示されました。

  1. ビューの編集ページでない場合は、[ 構造 ] > [ ビュー] に移動し、作成したビューの名前を見つけ、[ 編集] をクリックします。
  2. タイトルセクションで、ツイート表示をクリックし、Titleフィールドに<none>を入力し、適用をクリックします。

    ページでビューの名前を変更する

  3. フィールドセクションで、追加をクリックし、ツイートを検索します。
  4. Tweet URL 」のチェックボックスを選択し、「 Add and configure fields 」をクリックする。

    フィールドの追加ページ

  5. Formatter から、Twitter embed を選択し、Apply をクリックします。

    ツイッター埋め込みフォーマッターを追加するページ

  6. フィールドセクションでメディアメディア名をクリックし、削除をクリックする。

    メディア名を削除するページ

  7. フィルター基準セクションでメディア発行済み（＝真）をクリックし、削除をクリックする。

    公開されたメディアを削除するページ

  8. フォーマットセクションで、スリック・カルーセルの隣にある設定をクリックします。
  9. スキンのメインリストから、デフォルトを選択します。
  10. キャプション フィールドセクションで、 メディア: ツイート URL とメイン オプション セットの上書きのチェックボックスを選択します。
  11. Overridable Optionsセクションで、AutoplayとDotsのチェックボックスを選択し、Applyをクリックします。

    スキンの変更を設定するページ

  12. ページャーセクションで、項目をクリックし、表示する項目フィールドを0に設定し、適用をクリックします。

    ページャーオプションページ

  13. 保存 をクリックします。

開発者ポータル のフロントページにビューを埋め込みます。

  1. 構造 > ページに移動します。
  2. welcomeラベルを見つけて、編集をクリックします。
  3. バリアントセクションで、パネルをクリックし、コンテンツをクリックします。
  4. 「新規ブロックの追加」をクリックします。
  5. リスト（ビュー）セクションで、新しいブロックを選択します。

    ブロックにツイートビューを追加

  6. タイトルを表示するチェックボックスをオフにして、ブロックを追加するをクリックします。
  7. フロントページのツイートビューの位置を並べ替えることができるようになりました。

    フロントページのツイート表示のスクリーンショット

  8. 「更新して保存」をクリックします。

このチュートリアルで実行したこと

作成したビューがサイトのフロントページに表示されることを確認できます。

ツイート・カルーセルのある新しいフロントページ

次のタスク

「構造 > ビュー」 に移動し、名前でビューを選択することにより、いつでもビューを編集できます。 また、フロントページのビューのレイアウトを変更または削除するには、「 構造 」>「 ページ 」でページのレイアウトセクションに戻ります。

Twitter データを動的に統合することもできます。 詳しくは、以下のリンクを参照してください。