DrupalのUUIDが違う画像を管理しやすくする「Config Default Image」モジュール

Drupalで画像フィールドのデフォルト画像を設定する場合、フィールドの設定画面から画像をアップロードする必要があります。

しかし、この方法では設定した画像をUUIDというIDでコンフィグ管理することになります。
そしてこのUUIDは、ステージング環境と本番環境では異なるIDになってしまうため、画像が表示されなくなってしまいます。

表示させるためには、環境ごとにファイルを登録してUUID を合わせる作業が必要になりますが、この方法は手間がかかりますし、間違いも起こりやすく問題があります。

この問題の解決策として、「Config Default Image」モジュールを使用して管理する方法があります。
今回はこのモジュールについて紹介します。
 

 

デフォルト画像の設定方法

まずは基本的な画像フィールドにデフォルト画像を設定する方法についてです。

フィールドの編集画面へ移動する

Drupal管理画面の［サイト構築］メニューをクリックして、表示されるページ一覧から［コンテンツタイプ］を選択します。

設定されているコンテンツタイプが一覧で表示されます。
デフォルトでは「基本ページ」と「記事」の2つしかありませんが、記事の「フィールドの管理」を選択します。

記事の場合は一番下に「画像」がデフォルトで追加されているので、ここから設定を行います。
 

フィールドタイプ全体に登録する場合

「フィールドタイプ」列の「画像」をクリックすると、画像フィールド全体の編集画面へ移動します。

「デフォルト画像」という項目があり、ここに画像をアップロードして設定しておくと、画像が設定されていない場合にこのデフォルト画像が表示されます。

 

フィールドごとに登録する場合

画像フィールド全体ではなく、「このコンテンツタイプのフィールドにだけ、この画像をデフォルトとして設定したい」場合もあると思います。

その場合は、「フィールド管理」でフィールドの一番右にある「編集」ボタンを押して、フィールドの編集画面へ移動します。

先ほどと同じように、ここにも「デフォルト画像」という項目があるので、ここに画像を設定します。
これで、フィールド全体のデフォルト画像よりも優先して、ここに設定した画像が表示されます。
 

通常の移行方法

この設定したデフォルト画像を、通常の方法で移行しようとすると、かなり時間がかかります。
手順をまとめていますが、今回紹介する「Config Default Image」モジュールを使った方が圧倒的にラクになります。

あくまで「デフォルトだとこんなにいろんな手順を踏まないといけないんだな」という目安にしてください。
 

設定ファイルのエクスポート

ワンポイントメモ：
今回ご紹介する設定ファイルのエクスポート・インポート方法はCMSの管理画面上から行う最も簡易な方法です。
複数人で開発を行うような大規模開発の現場では、Drushコマンドを利用し、CMSで設定された構成情報を書き出し、gitで管理を行うのが一般的なやり方です。Drush コマンドを利用した同期の方法はまた別記事にてご紹介させていただきます。
 

Drupal管理画面の［環境設定］メニューをクリックして、［構成の同期］を選択します。

［エクスポート］タブから「エクスポート」ボタンをクリックすると「config-{URL}-YYYY-MM-DD-HH-mm.tar.gz」形式で設定ファイルがダウンロードされます。

インポート先にデフォルト画像を登録する

次にインポート先にデフォルト画像を登録します。
手順は先ほど紹介した「デフォルト画像の設定方法」と全く同じです。

設定のインポート

あとはインポート先でも同じように「同期」画面まで移動して、［インポート］から先ほどの設定ファイルを選択します。

インポートが完了したら、［同期］タブに差分が表示されるので、確認の上「すべてインポート」でインポートします。

これで設定はすべて同期されるはずですが、UUIDが違うためデフォルト画像は表示されません。

サイトのUUIDを一致させる

UUIDが違うことが原因で、デフォルト画像が表示されていないので、下記の手順で一致させます。

1. インポート元（開発環境）のUUIDを確認する
2. 確認したUUIDをインポート先（本番環境）にセットする

インポート元のUUIDを確認する

まずはインポート元のDBにアクセスして、下記のMySQL queryを実行します。

select * from file_managed \G

UUIDが表示されるので、それと「fid」をメモします。

インポート先にUUIDをセットする

「uuid」は先ほどメモしたUUIDを設定して、「fid」も先ほどと同じ値を設定します（それぞれの環境に合わせて「uuid」と「fid」は変えてください）。

update file_managed set uuid='6b78ffde-3ede-4c88-af45-53ab2c20a362' where fid=1;

これでUUIDのセットも完了したので、デフォルト画像が表示されるようになりました。
 

Config Default Imageを使う方法

（ご注意）Config default image は、2021年7月19日現在、beta版のみがリリースされています。
beta版ということのリスクを理解した上で、ご利用ください。

このように、通常の手順だとかなり面倒です。
わざわざMySQLでUUIDを確認して、それをセットする必要があり、ここまで手順を重ねてもできることはあくまで「デフォルト画像の表示」なので、そこまで時間や手間をかけるメリットはありません。

「Config Default Image」を使うとこれがかなりラクになります。

モジュールのインストール方法

まずはConfig Default Imageのモジュールページにアクセスして、インストールコマンドを実行してインストールします。

モジュールファイルをインストールしたら、Drupal管理画面の［機能拡張］で「Config Default Image」にチェックを入れて、モジュールをインストールします。

デフォルト画像の設定

通常の方法とデフォルト画像の設定場所が変わるので、注意が必要です。

Drupal管理画面の［サイト構築］メニューをクリックして、表示されるページ一覧から［コンテンツタイプ］を選択します。

設定したいコンテンツタイプの「フィールドの管理」をクリックしてから、さらにその先で［表示管理］タブをクリックして「表示管理」画面に切り替えます。

ここに追加した「画像」フィールドがあるので、「フォーマット」を「画像」から「Image or default image」に変更します。

変更したら一番右にある「歯車アイコン」をクリックします。

ここに、デフォルト画像の設定画面があります。
 

 

通常時と違って、画像を選択するのではなく、画像パスを入力して「更新」ボタンを押し、1番下の「保存」ボタンを押せば設定完了です。

なお、画像はテーマフォルダ内に入れてパスを指定しておけば、デフォルト画像もテーマフォルダ内の他ファイルと同じようにGitで管理できるようになります。

通常の方法で設定したデフォルト画像はそのままでも良い

先ほど設定した、通常方法のデフォルト画像の設定は、そのままでも問題ありません。

ただし、「Config Default Image」を使った方法で設定するとき、パスを間違えていたとしても、通常方法で設定したデフォルト画像が表示されてしまうので、パスを間違っていることに気づかない可能性があります。

きちんとパスが合っているかどうかの確認だけはしっかり行うようにしましょう。

設定ファイルのエクスポートとインポート

設定ができたら、通常時と同じようにDrupal管理画面の［環境設定］メニューをクリックして、［構成の同期］を選択します。

あとは［エクスポート］タブから設定ファイルをエクスポートします。

さきほどの設定ファイルと違うのは、このときに書き出される「.tar.gz」ファイル内に、モジュールをインストールして設定したデフォルト画像のパス情報も含まれていることです。

この設定ファイルを本番環境でインポートすれば、デフォルト画像もきちんと表示されます。

これで面倒なUUIDを合わせる作業が丸々なくなりました。
UUIDを間違えたり、ミスをする可能性がなくなりますし、デプロイ作業も「エクスポート」「インポート」の作業だけになるので、ラクになります。

表示管理でそれぞれ設定して回る必要がある

UUIDを合わせる作業はなくなりましたが、その代わりに「表示管理」画面で設定するため、ビューモードごとに設定する必要があります。

そのため、ビューモードが多いサイトの場合は少し大変になります（ビューモードごとに違うデフォルト画像を設定できるといったメリットもあります）。

このあたりはサイトによるので、どちらの方がメリットが大きいか考える必要がありますが、デプロイのときに面倒になったり、UUIDを間違えて表示されなくなる可能性を考えると、「Config Default Image」を使ったほうがメリットが大きいのではないかと思います。

SVG Imageモジュールとの併用

余談ですが、「SVG Image」というモジュールを使うとDrupal上でSVG画像が使用できるようになります。

このモジュールをインストールして、「Config Default Image」と一緒に付いてくる「Config Default SVG Image」をインストールすれば、SVGファイルもデフォルト画像として登録可能になります。

デフォルト画像はシンプルなアイコンを表示させるだけの場合も多いですし、SVGとして登録しておけばどのサイズでもキレイに表示され、なおかつシンプルな画像であればファイルサイズも抑えられます。

まとめ

「開発環境ではちゃんと表示されていたのに、本番環境だと表示されない」という事態は非常に怖いですし、UUIDを合わせる作業はその可能性を高めてしまいます。

デプロイ時に行う作業は極力シンプルにした方がいいですし、「Config Default Image」はそれが実現可能です。
このような便利なモジュールをうまく使って、サイトの管理・運営を安全に行いましょう。