このハンズオンではa-blog cms で実装するときに、srcset属性やpicture要素を使ってレスポンシブイメージでユーザーの閲覧環境に最適な画像を表示する方法をご紹介します。

レスポンシブイメージとは？

まずはレスポンシブイメージについておさらいしましょう。

普段、Retinaディスプレイへの画像表示の対応はどうしていますか？スマートフォンでも大きなPCのRetinaディスプレイ用の画像を読み込んでいたりしないでしょうか。 レスポンシブイメージを使えば、画像の幅、高さ、ピクセル密度をブラウザが判断して、最適なサイズで読み込ませることができます。

レスポンシブイメージを使う際には大きく2つの方法があります。

• 画像解像度の変更（resolution switching）
• アートディレクション(art direction)

画像解像度の変更（resolution switching）

レスポンシブイメージを使用したい用途が「画像解像度の変更」だけなら、img要素とsrcset属性を組み合わせた方法がおすすめです。たとえば、全く同じ構図の写真を高解像度のディスプレイと通常のディスプレイどちらにも表示したい場合に有効です。

HTMLの記入方法

<img srcset="画像のパス 記述子,
	     画像2のパス 記述子,
	    画像3のパス 記述子"
     src="フォールバック画像のパス"
     sizes="メディアクエリー（任意） 表示サイズ,
	    画像2のメディアクエリー（任意） 画像2の表示サイズ,
	    画像3のメディアクエリー（任意） 画像3の表示サイズ"
     alt="代替テキストを入力してください">

srcset属性に使用できる記述子には2種類あります。

記述子がなかった場合は、1xが使用されます。

HTMLの記入例

<img srcset="img.png 400w,
	     img@2x.png 900w,
	     img@3x.png 1200w"
     src="img_fallback.png"
     sizes="(max-width: 479px) 100vw, 50vw"
     alt="代替テキストを入力してください">

<img srcset="img.png 1x,
	     img@2x.png 2x,
	     img@3x.png 3x"
     src="img_fallback.png"
     alt="代替テキストを入力してください">

アートディレクション(art direction)

レスポンシブイメージを使用したい用途が、「画角を変更したい」なら、picture要素+srcset属性を組み合わせた方法がおすすめです。たとえば、小さなスクリーンでは写真が全体的に小さくなって人物の顔がよく見えなかったり、文字が潰れてしまう場合に画角を変更して表示することが可能になります。

HTMLの記入方法

<picture>
	<source media="メディアクエリー"
		srcset="画像1のパス 表示サイズ,
			画像2のパス 表示サイズ,
			画像3のパス 表示サイズ">
	<source media="メディアクエリー"
		srcset="画像4のパス">
	<img src="フォールバック画像のパス" alt="代替テキストを入力してください">
</picture>

img要素以降にsource要素を書いた場合、以降のsource要素は無視されてしまいます。img要素はpicture要素内で一番最後に記述します。

HTMLの記入例

<picture>
	<source media="(max-width: 479px)"
		srcset="img.png 400w,
			img@2x.png 900w,
			img@3x.png 1200w">
	<source media="(min-width: 480px)"
		srcset="img@3x.png">
	<img src="img.png" alt="代替テキストを入力してください">
</picture>

picture要素では、以下のようにtype属性を指定しSVGやWEBPなどの画像に対応している環境で読み込むことも可能です。

<picture>
	<source type="image/svg+xml" srcset="img.svg">
	<source type="image/webp" srcset="img.webp">
	<img src="img.png" alt="代替テキストを入力してください">
</picture>

ImageMagickに対応

a-blog cms では画像処理にGDライブラリを使用して画像生成を行っていたのですが、 生成後の画像が綺麗じゃないとの意見を頂いて 次のバージョン2.1（2014/05/26現在）からimageMagickに対応します。

改善点

ImageMagickにした事により以下の改善がみられました。

• 白色が綺麗に出力されるように（特にGDでのgif画像で白がうまく出力できなかった）
• GDに比べてくっきりするように

実際の出力ファイル

画像1

• GD image1
• ImageMagick image1

画像2

• GD image2
• ImageMagick image2

画像3

• GD image3
• ImageMagick image3

注意事項

ImageMagickを使用するにはImageMagickのPHP 拡張モジュールがインストールされている 必要があります。使用できない場合はGDを使用して画像生成を行います。

カスタムフィールドのタグの基本

カスタムフィールドはフォームタグのようにHTMLベースで書くことができます。値段を入れるカスタムフィールドを追加してみましょう。カスタムフィールドの変数は price にします。

<input type="text" name="price" value="{price}" />
<input type="hidden" name="field[]" value="price" />

「このテキスト部分をサイトで一括して置換したいけど、エントリーが多すぎて一つずつ修正するのが大変…。」

皆さんの中に、このような経験をされた方はいらっしゃいませんか？そんな時はa-blog cmsのデータ修正機能を使ってみましょう。Ver. 2.8 まではプロフェッショナル版以上でのみ利用可能でしたが、Ver. 2.9ではスタンダード版にも搭載され、誰でも手軽に利用できるようになりました。操作はブラウザのみで行っていただけますので、サイト運用時の一つのテクニックとしてぜひご活用ください。

課題

平成元年(1989年)と今年(2018年)のニュースがランダムに並んだエントリーがあります。しかしこれらは全て、本文中では「1989年」と表記されてしまっています。今回はこの中でも2018年のニュースについて、西暦部分をデータ修正機能「テキスト置換」を利用して正しい表記に置き換えていきます。

事前準備

まずは平成元年(1989年)と今年(2018年)のニュースがランダムに並んだエントリーを以下の手順で作成します。

1. ハンズオン専用のカテゴリーを作成する

カテゴリー設定画面より、カテゴリー名を[ハンズオン]、コードネームを[handson]と設定し、このハンズオン専用のカテゴリーを新規作成しましょう。

2. 3種類のファイル準備する

①平成元年(1989年)と今年(2018年)のニュースを一覧にしたCSVファイル

以下で配布するsample.csvをダウンロードしてください。

②データ内で使用しているカスタムフィールドを入力するテンプレートファイル

sample.csv は、ニュースタイトルが {entry_title} 、本文が {contents} として読み込まれる仕様になっています。

本文の {contents} は a-blog cms 内で定義されていない値になるので、カスタムフィールドとして登録しなければなりません。

以下の階層に handson.html を新規作成し、入力用ソースを記述しましょう。

例）/admin/entry/field/handson.html

<table class="acms-admin-table-admin-edit">
<tr>
<th>ニュース本文</th>
<td><input type="text" name="contents" class="acms-admin-form-width-full" value="{contents}"><input type="hidden" name="field[]" value="contents"></td>
</tr>
</table>

③データ内で使用しているカスタムフィールドを出力するテンプレートファイル

次に {contents} 部分を表示するテンプレートファイルを作成します。以下の階層に entry_handson.html を新規作成し、出力用ソースを記述しましょう。

例）include/field/entry_handson.html

<p>{contents}</p>

3. インポート機能を使ってデータをエントリーに落とし込む

先ほどダウンロードしたCSVファイルを、インポート機能を使ってエントリー登録します。管理画面＞インポート より[CSV]を選択し、インポート先カテゴリーを[ハンズオン]に設定してインポートを実行しましょう。

ハンズオンカテゴリーに50件のエントリーが登録されました。以上で事前準備は完了です。

実践

ここからは、実際にテキスト置換機能を使ってテキストの修正箇所を一括変更していきます。テキスト置換機能は、管理ページ＞データ修正＞テキスト置換 より利用することができます。

上図のように、「対象フィールド」「対象文字 / 置換文字」項目より置換するテキストの情報を指定してきます。また対象フィールドで [カスタムフィールド] を選択すると「フィード指定」という入力欄が追加表示され、対象とする変数を入力することもできます。

今回は {contents} で定義した本文内のテキストを置換の対象とするため、置換するテキストの情報は以下のように設定します。

[チェック] をクリックすると下図のように該当するテキストの一覧が表示されます。テキスト内で黄色の網掛けにより強調されている部分が置換対象です。

この中で修正に該当するテキストについてフィード名の左側にあるチェックを打ち、全てに打ち終えたら、最後は [チェックをつけたものを置換] をクリックしてください。

上図のようにテキストが置換できました。

今回のハンズオンでは、平成元年(1989年)と今年(2018年)のニュースをそれぞれ25件ずつ用意しています。正解は以下のファイルにて表記してありますので、答え合わせの際に是非ご活用ください。