入力フォームに埋め込む

動的フォームの入力フォームのテンプレート /themes/system/include/form/input.html をご利用のテーマにコピーしてきます。
/themes/ご利用のテーマ/include/form/input.html

Form2_Unitモジュールのcolumn:loopの外にHTMLで記述されたカスタムフィールドを記述してください。

<tr>
  <th>都道府県</th>
  <td>
  <select class="formSelect" name="pref_code">
    <option value="" selected="selected">選択してください ▼</option>
    <option value="北海道"\{pref_code:selected#北海道\}>北海道</option>
      
    <option value="青森県"\{pref_code:selected#青森県\}>青森県</option>
    <option value="岩手県"\{pref_code:selected#岩手県\}>岩手県</option>
    <option value="宮城県"\{pref_code:selected#宮城県\}>宮城県</option>
    <option value="秋田県"\{pref_code:selected#秋田県\}>秋田県</option>
    <option value="山形県"\{pref_code:selected#山形県\}>山形県</option>
    <option value="福島県"\{pref_code:selected#福島県\}>福島県</option>
    <option value="茨城県"\{pref_code:selected#茨城県\}>茨城県</option>
    <option value="栃木県"\{pref_code:selected#栃木県\}>栃木県</option>
    <option value="群馬県"\{pref_code:selected#群馬県\}>群馬県</option>
      
    <option value="埼玉県"\{pref_code:selected#埼玉県\}>埼玉県</option>
    <option value="千葉県"\{pref_code:selected#千葉県\}>千葉県</option>
    <option value="東京都"\{pref_code:selected#東京都\}>東京都</option>
    <option value="神奈川県"\{pref_code:selected#神奈川県\}>神奈川県</option>
    <option value="新潟県"\{pref_code:selected#新潟県\}>新潟県</option>
    <option value="富山県"\{pref_code:selected#富山県\}>富山県</option>
    <option value="石川県"\{pref_code:selected#石川県\}>石川県</option>
    <option value="福井県"\{pref_code:selected#福井県\}>福井県</option>
    <option value="山梨県"\{pref_code:selected#山梨県\}>山梨県</option>
      
    <option value="長野県"\{pref_code:selected#長野県\}>長野県</option>
    <option value="岐阜県"\{pref_code:selected#岐阜県\}>岐阜県</option>
    <option value="静岡県"\{pref_code:selected#静岡県\}>静岡県</option>
    <option value="愛知県"\{pref_code:selected#愛知県\}>愛知県</option>
    <option value="三重県"\{pref_code:selected#三重県\}>三重県</option>
    <option value="滋賀県"\{pref_code:selected#滋賀県\}>滋賀県</option>
    <option value="京都府"\{pref_code:selected#京都府\}>京都府</option>
    <option value="大阪府"\{pref_code:selected#大阪府\}>大阪府</option>
    <option value="兵庫県"\{pref_code:selected#兵庫県\}>兵庫県</option>
      
    <option value="奈良県"\{pref_code:selected#奈良県\}>奈良県</option>
    <option value="和歌山県"\{pref_code:selected#和歌山県\}>和歌山県</option>
    <option value="鳥取県"\{pref_code:selected#鳥取県\}>鳥取県</option>
    <option value="島根県"\{pref_code:selected#島根県\}>島根県</option>
    <option value="岡山県"\{pref_code:selected#岡山県\}>岡山県</option>
    <option value="広島県"\{pref_code:selected#広島県\}>広島県</option>
    <option value="山口県"\{pref_code:selected#山口県\}>山口県</option>
    <option value="徳島県"\{pref_code:selected#徳島県\}>徳島県</option>
    <option value="香川県"\{pref_code:selected#香川県\}>香川県</option>
      
    <option value="愛媛県"\{pref_code:selected#愛媛県\}>愛媛県</option>
    <option value="高知県"\{pref_code:selected#高知県\}>高知県</option>
    <option value="福岡県"\{pref_code:selected#福岡県\}>福岡県</option>
    <option value="佐賀県"\{pref_code:selected#佐賀県\}>佐賀県</option>
    <option value="長崎県"\{pref_code:selected#長崎県\}>長崎県</option>
    <option value="熊本県"\{pref_code:selected#熊本県\}>熊本県</option>
    <option value="大分県"\{pref_code:selected#大分県\}>大分県</option>
    <option value="宮崎県"\{pref_code:selected#宮崎県\}>宮崎県</option>
    <option value="鹿児島県"\{pref_code:selected#鹿児島県\}>鹿児島県</option>
      
    <option value="沖縄県"\{pref_code:selected#沖縄県\}>沖縄県</option>
  </select>
  <input type="hidden" name="field[]" value="pref_code" />
  </td>
</tr>

確認画面に項目を追加する

フォームの確認画面にも追加したHTMLのカスタムフィールドを追加してください。
Form2_Unitモジュールのcolumn:loopの外にHTMLで記述されたカスタムフィールドを追加します。
/themes/ご利用のテーマ/include/form/confirm.html

先ほど追加した都道府県の場合は以下のようになります。こちらもカスタムフィールドの変数にエスケープして記述します。

<tr>
  <th>都道府県</th>
  <td>\{pref_code\}</td>
</tr>

メールのテンプレートに項目を追加する

入力フォームと確認画面にHTMLで記述されたカスタムフィールドを追加してきました。追加したHTMLで記述されたカスタムフィールドの変数をメールのテンプレートにも記述する必要があります。メールのテンプレートもご利用のテーマにコピーしてきてからカスタマイズをしてください。

/themes/ご利用のテーマ/include/form/body.txt
/themes/ご利用のテーマ/include/form/adminbody.txt

メールアドレス  : {email}<!-- BEGIN_MODULE Form2_Unit -->
<!-- BEGIN column:loop --><!-- BEGIN text -->
{label}  : \{form-unit-{utid}\}<!-- END text --><!-- BEGIN textarea -->
{label}  : \{form-unit-{utid}\}<!-- END textarea --><!-- BEGIN radio -->
{label}  : \{form-unit-{utid}\}<!-- END radio --><!-- BEGIN select -->
{label}  : \{form-unit-{utid}\}<!-- END select --><!-- BEGIN checkbox -->
{label}  : <!-- BEGIN\ form-unit-{utid}:loop -->\{form-unit-{utid}\} <!-- END\ form-unit-{utid}:loop --><!-- END checkbox -->
<!-- END column:loop --><!-- END_MODULE Form2_Unit -->
都道府県  : {pref_code}

 <!-- BEGIN radio -->
 <tr>
  <th><label>{label}</label></th>
  <td class="acms-radio">
   <!-- BEGIN radio#val:loop -->
   <label class="acms-form-radio"><input type="radio" name="form-unit-{utid}" value="{value}"\{form-unit-{utid}:checked#{value}\}>
   <i class="acms-ico-radio"></i>
   {value}:{i}
   </label><!-- END radio#val:loop -->
  </td>
 </tr><!-- END radio -->

このハンズオンでは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を使用して画像生成を行います。