Drupal内のメディアを再利用する
これまでの方法では、記事やカスタムブロックなどDrupalサイト内で利用される画像は再利用ができませんでした。Drupal 8の新しいメディア機能は画像、ビデオ、PDFなどのメディアアセットのアップロード、管理、再利用できる統合的なUIを備えています。堅牢で使いやすく、カスタマイズ可能なインターフェイスを使用して、メディアアイテムを検索、並べ替え、作成できます。エンティティ参照フィールドにメディアアイテムを追加し、テキストエディタを介してコンテンツにメディアを埋め込むことができます。ではWebサイトにメディア管理を導入してみましょう。
モジュールの有効化
メディア管理はDrupalのコア機能の一部ではありますが、デフォルトでは有効化されていません。機能拡張ページに移動し、「Media」「Media Library」の2つのモジュールを有効にします。
なお、各モジュールの概要は下記の通りです。
- Media：画像、動画などのメディアアイテムの作成、設定、表示を管理します。
- Media Library：メディアリストを強化し、既存のメディアアイテムをより簡単に検索して使用できるようにします。
画像を追加する
コンテンツ画面に移動すると、新しく「メディア」セクションが追加されていることがわかります。ここではDrupalサイト内の全てのメディアがリストされ、管理されます。試しに、「メディアを追加」から、1つ画像を追加してみます。
「Image」を選択し、適当な画像と代替テキストを挿入し、他はデフォルトのまま保存します。
メディアが1つ追加されました。
記事コンテンツタイプでメディアを使えるようにする
メディアを、サイト構築＞コンテンツタイプ＞記事＞フィールドの管理＞フィールドの追加 に遷移し、以下の項目を入力します。
| 新しいフィールドの追加 | メディア |
| ラベル | メディア |
| システム内部名所 | media |
フィールドの設定画面ではデフォルトのまま進み、次の編集画面の「参照タイプ」の「Media type」には「Image」のみチェックをして、他はデフォルトのまま保存します。
今しがた追加したメディアフィールドは、このままだとページの下部に表示されてしまい見栄えがよくないので、フィールドの位置を調整します。記事コンテンツタイプの「表示管理」セクションに移動し、十字キーをドラッグしてメディアフィールドを一番上に移動させ、保存します。
それでは記事を追加します。コンテンツ＞コンテンツを追加＞記事 にて、以下の項目を入力します。
そして、記事に画像を追加するため、「メディアを追加」をクリックします。
モーダル画面に、先ほど追加した画像がリストされ、選択できるようになっています。また、この場で他の画像を追加することもできます。その場合も、そのメディアアセットが他のコンテンツで再利用できるようにメディア管理の配下に置かれます。
ここでは、既存の画像ではなく、別の画像を挿入したいと思います。「ファイルを選択」をクリックして適当な画像を選択し、代替テキストを入力して保存します。
先ほど追加した画像が選択された状態になっているので、このまま「Insert selected」をクリックし、記事を保存します。
メディア機能を使って、記事ページに再利用可能な画像を挿入できました。
| タイトル | 季節限定メニューを開始 |
| 本文 | 本日より、夏の季節限定メニューを開始します！今年はマンゴータピオカです。 |
| URLエイリアス（右カラムのドロップダウン） | /news/summer-seasonal-item-2020 |
CKEditorでメディアを埋め込む
エンティティ参照フィールドを設置してメディアを挿入する方法だけではなく、テキストエディタを設定してメディアライブラリにアクセスし、それを使用してコンテンツにメディアを埋め込むことも可能です。
環境設定＞テキストフォーマットとエディタ に移動します。テキストエディタが「CKEditor」のものであれば設定が可能です。今回は「ベーシック HTML」に設定を追加したいと思いますので、「設定」をクリックします。
「利用可能なボタン」から、メディアライブラリボタンを「Media」グループ内にドラッグ＆ドロップで移動させます。
「有効なフィルター」内の「Embed media」にチェックを入れます。後はデフォルト設定のまま保存します。
それでは早速テキストエディタでメディアを埋め込んでみます。コンテンツ＞コンテンツを追加＞記事 にて、以下の項目を入力します。
| タイトル | テイクアウトを開始しました！ |
| 本文 | 本日より弊社では、より多くのお客さまにまる茶のタピオカドリンクをお楽しみいただけるようテイクアウトサービスを開始いたしました。なお、テイクアウトサービスは一部商品のみの対応となっておりますが、定番商品の抹茶タピオカや夏季限定のマンゴータピオカなどご注文可能です。[ここにエディタから画像を挿入します]より便利に、身近に楽しめるようになったまる茶のドリンクメニューをぜひこの機会にお楽しみください！ |
| URLエイリアス（右カラムのドロップダウン） | /news/offering-takeout |
そして、本文内エディタのツールバーの「メディアライブラリボタン」をクリックします。
モーダル画面にメディア管理画面が表示されました。ここでは、既存の画像を再利用したいと思います。リストから適当な画像を選択し、「Insert selected」をクリックします。
本文中央に画像が挿入されました。最後に記事を保存します。
CKEditorを使ってコンテンツにメディアを埋め込むことができました。
まとめ
第3回では、Drupal 8以降の新機能の一部をご紹介しながらGUI上でサイト構築を行いました。Webサイトのあらゆる部分を翻訳することができる多言語機能、画像などのデジタルアセットを管理するための直感的なUIを持つメディア管理機能など、Drupalのコア機能でできることをご紹介しました。次回も引き続きDrupalの新機能の中から「レイアウトビルダー」「ワークフロー」「JSON:API」について解説します。
