存在しない画像がリクエストされた場合に別画像を表示する

小ネタ

Webサイトで存在しない画像がリクエストされた場合に別画像を表示する方法に関するメモです。
Apache 2系での方法になります。

はじめに

新年会で自作梅酒を飲みすぎて調子が今一な今日この頃みなさんいかがお過ごしですか?

現在進行中のプロジェクトではアプリケーション開発とデザイン開発が分離しているのですが、
 

画像等が揃わないために、レイアウト確認や表示の確認がし辛い


といった状態になっています。
単純に画像が表示されないだけならばまだ良いのですが、これによって

レイアウトが崩れた上に一部の要素が正しく表示されず、テスト作業にも影響が出る

状況に。。。

本来ならば、画像が表示されない場合も、他要素の表示には影響がないようにデザインするのが望ましいのですが、デザインを他社が担当しているといった場合、指摘や改善提案をしても、

  • 「デザイン面は全て実装してあるので、出し分けなど制御は御社側パートの認識です」とか言われる
    ( 出し分けって何?HTML/CSS+Javascriptで制御する事もあるよね? )
  • 指摘した事に対して嫌味を言われる
    ( えっ? )

といったように、アプリ-デザイン部隊の関係性によっては、めんどくさい事になったり、嫌な思いをするだけになる場合も。。。

こんな場合には、システム的に代替手段を講じるのが吉。

存在しない画像がリクエストされた場合には、別画像を表示するように Apache を設定する事にしました ( mod_rewrite モジュールを利用します )。

環境

設定を行うサーバ側環境は以下になります。

OS CentOS 6.6 (Final)
Apache httpd-2.2.15-39

Apache 2 系ならば同じ手順で実施可能と思われます。

手順

設定手順を以下に示します。

mod_rewrite モジュールのインストール確認

httpd を yum で導入している場合、mod_rewrite もインストール済みです。
ファイルの場所は以下で確認できます。

$ rpm -ql httpd | grep rewrite
/usr/lib64/httpd/modules/mod_rewrite.so

httpd.conf 設定

mod_rewrite が有効になっているか設定を確認します。

$ sudo vi /etc/httpd/conf/httpd.conf

以下設定を確認します (コメントになっていない事)。

LoadModule rewrite_module modules/mod_rewrite.so

リライト設定

mod_rewrite の設定を行います。
設定の方針は以下の通り。

※( 大きさが決まっている ) 商品画像がまだ作成されていない場合、レイアウトが崩れないように同じ大きさの別画像を表示する事を想定


  • 画像ファイルが存在しない
  • 且つ、特定のパターンに合致するファイル

の場合に、

任意の画像ファイルを表示する ( URL をリライトする)。


実現するための設定を apache の設定ファイルに記述します。

  1. httpd 設定に以下を記述します。
    ※ 記述先ファイルは conf や .htaccess 等、設定によって適宜変更して下さい。
    RewriteEngine On
    
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} (.*)/images/(.*)\.png
    RewriteRule ^.*$ /replace-image.png [L]
    
  2. 設定を確認し、
    $ sudo httpd -t
    
  3. 問題なければ apache をリロードします。
    $ sudo /etc/rc.d/init.d/httpd reload
    
  4. Web ブラウザでアクセスして、リライトが正しく機能しているかどうか確認します。

設定の意味するところは以下のようになります。

  • RewriteEngine On
    で mod_rewrite を有効化
  • RewriteCond %{REQUEST_FILENAME} !-f
    でファイルの存在チェック(存在しない場合有効)
    ※もし存在する場合のルールを記述する場合には !-f ではなく -f になります。
  • RewriteCond %{REQUEST_FILENAME} (.*)/images/(.*)\.png
    でファイル名のパターンチェック。
    上記では images (サブ)フォルダ中にある png ファイルの場合
  • RewriteRule ^.*$ /replace-image.png [L]
    でリライト・ルールを設定。
    RewriteCond で指定した条件に合致する場合、/replace-image.png にリライトされます。

EC サイト等で商品写真が容易できていない場合に "No Image Available" といった画像が表示される事がありますが、こういった画像を表示する用途でも利用できます。

上記定義を複数回行う( ファイルパターン、及び、置き換える画像は変える ) 事で、商品画像が無い場合と、サムネイルが無い場合とで、置き換える画像を違うものにするといった事も可能でしょう。

よく使う(と思われる) mod_rewrite 設定

mod_rewrite に関しては上記以外にもよく利用される使い方が幾つかあります。
弊社で利用している他の設定に関してもいくつか晒してみます。

httpsへの転送

  RewriteCond %{HTTPS} off
  RewriteCond %{REQUEST_URI} ^/contact.html$
  RewriteRule (.*) https://%{HTTP_HOST}$1 [L,R=301]

/contact.html にhttpsでない状態でアクセスした場合にhttps にリダイレクトします。

ファイルの直リン禁止

  RewriteCond %{HTTP_REFERER} !^$
  RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?agilegroup.co.jp [NC]
  RewriteCond %{HTTP_REFERER} !google\. [NC]
  RewriteCond %{HTTP_REFERER} !bing\. [NC]
  RewriteCond %{HTTP_REFERER} !yahoo\. [NC]
  RewriteCond %{HTTP_REFERER} !facebook\. [NC]
  RewriteRule \.(jpg|jpeg|png|gif)$ – [NC,F,L]

画像ファイルの直リン禁止設定です。参照元 ( リファラー ) が自サイト+α ( 検索エンジンやSNS等 ) の場合、あるいは、画像URLを直接指定した ( リンクでない ) アクセスのみ許可

まとめ

mod_rewrite は、上記以外にもサイト移転 ( URLが変わる ) 場合なんかにも利用される事が多いのではないでしょうか。

"No Image Available" 対応の類は、アプリケーションの直しを入れなくとも apache の設定で対応可能な場合が殆どではないかと思われます。

運用環境ではmod_rewrite を利用する事は当たり前の感はありますが、今回のネタは、開発環境でも mod_rewrite で小細工する事で作業効率を上げるといった事が可能になる場合もあるという話でした。

複雑な設定を行った場合、はまる事も多々ある apache ディレクティブ だったりしますが、活用できれば強力な武器の一つとなるので、上手く使っていければと思います。

P.S.
ダイソー108円ワインがうまいという噂が立っているようなので、調子が戻ったらチャレンジしようかと思っています。