concrete5のテーマでレスポンシブ画像をサポートする
concrete5は拡張可能な画像のサムネイル生成システムを持っており、画像に対して異なるサイズのサムネイルを複数作成することができます。例えば、画像ギャラリーを表示する際に、小さいスクリーン用には小さな画像を表示することで、通信帯域を節約することができます。これからご紹介するサンプルの実装は簡単ですが、テーマ内で少しコーディングが必要です。
サムネイルタイプの作成
Elementalテーマはインストール時に自動的に３つの異なるサムネイルタイプを作成します。これらのサムネイルタイプは［管理画面 > システムと設定 > ファイル > サムネイル］から確認できます。
小画像、中画像、大画像がElementalテーマによって追加されたタイプです。これらのサムネイルタイプには最大幅が設定されています（高さは設定されていません。これは、高さが比率を保ったまま画像が最大幅に収まるようにリサイズされ、切り抜かれないということを意味します）。
この画面からサムネイルタイプを追加することもできますが、パッケージでテーマを管理している場合は、インストールプロセスから自動で追加するほうがスマートでしょう。テーマパッケージコントローラーの install() メソッドから、次のコードでサムネイルタイプを追加することができます。最初にサムネイルタイプがインストール済みかどうかをチェックしています。
$small = \Concrete\Core\File\Image\Thumbnail\Type\Type::getByHandle('small');
if (!is_object($small)) {
$type = new \Concrete\Core\File\Image\Thumbnail\Type\Type();
$type->setName('Small');
$type->setHandle('small');
$type->setWidth(740);
$type->save();
}
このコードによって、ハンドルが "small" のサムネイルタイプを追加できます。あとは、必要な数だけ繰り返してください。Elementalテーマの場合は、"Medium" と "Large" も追加しています。
どのように使用するかを定義する
さて、いま３つのサムネイルタイプが存在する状態です。大きな画像をconcrete5にアップロードした際に、小画像タイプは最大で740px幅、中画像タイプは940px、大画像タイプは1140pxで作成されます。これらは、元画像の大きさとは関係なく作成されます。
さて、ではこれらのサムネイルタイプを次のように使用することにしましょう。ブラウザーが900pxより広い場合は大画像タイプを、ブラウザーが768pxより広く900pxより狭い場合は中画像タイプを、それ以外の場合、ブラウザーが768oxより狭い場合は、小画像タイプを使用しましょう。
スクリーン幅をサムネイルタイプと対応させる
スクリーンサイズとサムネイルタイプの対応方針が決まりましたので、次のメソッドを PageTheme クラスに追加することで、レスポンシブ画像を実装しましょう。
public function getThemeResponsiveImageMap()
{
return array(
'large' => '900px',
'medium' => '768px',
'small' => '0'
);
}
サムネイルタイプを配列のキーとして、最小px数を値として定義します。
これで、このテーマで画像ブロックを使用した際やRedactorエディタで画像を配置した際には、下記のようなレスポンシブなHTML要素を出力するようになります。
<picture> <source srcset="http://c57dev.example.com/application/files/thumbnails/large/1914/2241/3642/sunset.jpg" media="(min-width: 900px)" class="ccm-image-block img-responsive bID-538"> <source srcset="http://c57dev.example.com/application/files/thumbnails/medium/1914/2241/3642/sunset.jpg" media="(min-width: 768px)" class="ccm-image-block img-responsive bID-538"> <source srcset="http://c57dev.example.com/application/files/thumbnails/small/1914/2241/3642/sunset.jpg" class="ccm-image-block img-responsive bID-538"> <img src="http://c57dev.example.com/application/files/thumbnails/small/1914/2241/3642/sunset.jpg" alt="#" class="ccm-image-block img-responsive bID-538"> </picture>
これは、どのように動作しているのでしょうか？concrete5では、\Concrete\Core\Html\Image クラスを特定のファイルオブジェクトから image タグを生成するのに使用しています。次のコードを確認してください。注意：下記のコードでは、ファイルマネージャーに大きな画像をアップロードし、$file 変数にその画像のファイルオブジェクトが格納済みであるとします。サムネイルはファイルのアップロードの時点で生成されます。
// $file はファイルオブジェクトのインスタンスです
$image = \Core::make('html/image', array($file));
$tag = $image->getTag();
ImageクラスのAPIドキュメントはこちら（英語）にあります。このクラスは現在のテーマを解析し、レスポンシブ画像をサポートしているかを判別し、そうである場合は、シンプルはimageタグの代わりにpictureタグを出力します。
注意：テーマでレスポンシブ画像を使用する際は、"picturefill" Javascriptアセットをテーマから読み込むようにしてください。まだすべてのブラウザがpictureタグをサポートしてはいないためです。picturefill Javascriptライブラリを使用すると、pictureタグが未対応のブラウザもサポートすることができます。
やるべきことは以上です！このページではバージョン5.7の画像サムネイルシステムの概要を説明しただけですが、この機能によって快適で美しいレスポンシブサイトが構築されることを願っています。
訳注：レスポンシブ画像についての日本語解説
順次追加して行きます。
concrete5を知ろう！
concrete5ダウンロード
フォーラムで聞いてみる
concrete5japan on Twitter
