メディアを利用したカスタムフィールドとは

Ver.2.10からメディアを利用したカスタムフィールドを作れるようになりました。メディアのカスタムフィールドを使うとメディア管理に登録されている画像やファイルをカスタムフィールドとして登録することができます。

a-blog cmsに標準で梱包されているsiteテーマにもブログのカスタムフィールドにメディアのカスタムフィールドが組み込まれています。

メディア選択

「メディア選択」をクリックするとメディア一覧から画像もしくはファイルを選択するモーダルウィンドウが出現します。

メディアアップロード

またカスタムフィールドより「アップロード」ボタンをクリックするとそこから新たにメディアを登録するためのモーダルウィンドウが出現します。

メディアのカスタムフィールドからもメディアユニットのように複数ファイルアップロード可能ですが、カスタムフィールドとして登録されるファイルは初めの一個だけになります。

メディア編集

また「メディア編集ボタン」をクリックすることで、メディアのカスタムフィールドから直接登録されたメディアを編集することができます。ただし、このメディアが他の場所でも使われている可能性があるので十分注意して編集してください。

メディア削除

また、カスタムフィールドに登録してあるメディアは「削除」ボタンをクリックすることでカスタムフィールドへの登録を解除できます。メディアに登録されたファイルは削除されません。

カスタムフィールドの記述方法

メディアのカスタムフィールドは簡単なHTMLを記述するだけで作成可能です。下はメディアのカスタムフィールドのサンプルコードになります。

<tr class="js-media-field">
  <th>サイト ロゴ
    <i class="acms-admin-icon-tooltip js-acms-tooltip" data-acms-tooltip="サイトのロゴ画像を設定します。"></i>
  </th>
  <td>
    <div>
      <!-- BEGIN_IF [{site_logo@thumbnail}/nem] -->
      <img src="{site_logo@thumbnail}" class="acms-admin-img-responsive js-preview" alt="{site_logo@alt}" />
      <!-- ELSE -->
      <img src="" style="display:none" class="acms-admin-img-responsive js-preview" />
      <!-- END_IF -->
    </div>
    <div class="acms-admin-margin-top-mini">
      <button type="button" class="js-insert acms-admin-btn">メディア選択</button>
      <button type="button" class="js-insert acms-admin-btn" data-mode="upload">アップロード</button>
      <button type="button" class="js-edit acms-admin-btn">メディア編集</button>
      <button type="button" class="js-remove acms-admin-btn acms-admin-btn-danger">削除</button>
    </div>
    <input type="hidden" name="site_logo" value="{site_logo}" class="js-value" />
    <input type="hidden" name="field[]" value="site_logo" />
    <input type="hidden" name="site_logo:extension" value="media" />
  </td>
</tr>

メディアのカスタムフィールドを利用したい領域に js-media-field というクラスを追加します。その後その領域内で、メディア選択ボタンには、js-insert、メディア編集ボタンにはjs-edit、削除ボタンにはjs-removeというクラスを付与します。またメディアの選択結果をプレビューしたい場合はimg要素に js-previewというクラスを付与します。アップロードボタンも選択ボタンと同じく、js-insertクラスを付与しますが、data-mode属性をuploadにする必要があります。さらに、アップロードしたい画像のタイプを制限したい場合は、data-type属性を利用します。data-type="image"にすると画像のみアップロード可能に、また、data-type="file"とするとファイルのみアップロード可能になります。

カスタムフィールドメーカーの利用

Ver.2.10よりカスタムフィールドメーカーからメディア用のカスタムフィールドもHTML出力できるようになっています。記述量が多いのでこちらで設定する方が間違いが少ないのでオススメです。

こちらのカスタムフィールドメーカーはdeveloperサイトからもご利用いただけます。

再仕様変更

以下のバージョン以上で、仕様が更に変更されました。

• a-blog cms Ver. 3.1.12
• a-blog cms Ver. 3.0.32
• a-blog cms Ver. 2.11.61
• a-blog cms Ver. 2.10.53

仕様変更前は、「raw」校正オプションが付与されていることは関係なく、「allow_dangerous_tag」校正オプションが付与されていなければ、危険なタグはサニタイズされて出力されていました。 これを上記のバージョンから仕様変更し「raw」校正オプションが付与されている場合のみ、危険なタグをサニタイズする処理が動作するようにしました。「raw」校正オプションが付与されていない場合はそもそもサニタイズ処理されるためです。

概要

現行バージョンでも、危険なタグを含めてサニタイズ（エスケープ）処理されるようになっていますが、 raw校正オプション をつけた場合、サニタイズ処理はされずに出力されていました。

今回この仕様を変更し、raw校正オプションを指定していたとしても、標準で危険なタグを出力しないように仕様変更いたしました。 危険なタグを出力したい場合は、専用の校正オプション（allow_dangerous_tag）を付与する必要があります。

仕様変更される条件

以下のバージョン以上が対象になります。

• Ver. 3.1.7
• Ver. 3.0.29
• Ver. 2.11.58
• Ver. 2.10.50

また、private/config.system.yaml で、以下オプションが「on」になっている場合のみ仕様変更がされます。

strip_dangerous_tag: on

変数出力の新しい仕様

新しい仕様の有効化方法

private/config.system.yaml で設定します。

strip_dangerous_tag: on # on | off 変数から標準で危険なタグ（dangerous_tagsで指定）を削除するか指定

変数から削除されるタグ

private/config.system.yaml で設定されている許可されたタグ以外のタグは出力できなくなります。

base_allowed_tags: # 変数で出力できる全タグリスト
  - a
  - abbr
  - acronym
  - address
  - applet
  - area
  - article
  - aside
  - audio
  - b
  - base
  - basefont
  - bdi
  - bdo
  - big
  - blockquote
  - body
  - br
  - button
  - canvas
  - caption
  - center
  - cite
  - code
  - col
  - colgroup
  - data
  - datalist
  - dd
  - del
  - details
  - dfn
  - dialog
  - dir
  - div
  - dl
  - dt
  - em
  - embed
  - fieldset
  - figcaption
  - figure
  - font
  - footer
  - form
  - frame
  - frameset
  - h1
  - h2
  - h3
  - h4
  - h5
  - h6
  - head
  - header
  - hgroup
  - hr
  - html
  - i
  - iframe
  - img
  - input
  - ins
  - kbd
  - label
  - legend
  - li
  - link
  - main
  - map
  - mark
  - menu
  - meta
  - meter
  - nav
  - noframes
  - noscript
  - object
  - ol
  - optgroup
  - option
  - output
  - p
  - param
  - picture
  - pre
  - progress
  - q
  - rp
  - rt
  - ruby
  - s
  - samp
  - script
  - search
  - section
  - select
  - small
  - source
  - span
  - strike
  - strong
  - style
  - sub
  - summary
  - sup
  - svg
  - table
  - tbody
  - td
  - template
  - textarea
  - tfoot
  - th
  - thead
  - time
  - title
  - tr
  - track
  - tt
  - u
  - ul
  - var
  - video
  - wbr

この上で、危険なタグ（script, iframeなど）が自動で削除されます。

危険なタグを意図的に出力する

新しく追加された [allow_dangerous_tag]校正オプションを使用することで、意図的に危険なタグを出力できます。 例えばアナリティクスのスクリプトなどを管理画面で設定したい場合などに使用します。

設定例

「allow_dangerous_tag」と「raw」校正オプションを指定します。「raw」校正オプションを指定しないと、scriptタグがエスケープされるので「raw」の指定も必要になります。

<!-- BEGIN_MODULE Blog_Field -->
{script_body_start}[raw|allow_dangerous_tag]
<!-- END_MODULE Blog_Field -->

危険なタグを追加する

危険なタグはデフォルトでは「script」と「iframe」が指定されていますが、追加することができます。 「config.system.yaml」で以下のように配列で追加します。

dangerous_tags: ['script', 'iframe', 'style'] # 変数から標準で削除するタグを指定

ご不明な点があったときは

この件についてなにかご不明な点がございましたら、お問い合わせフォームまでご連絡ください。

日々使いやすいシステムとなるよう改善を勤めておりますので、皆様からの貴重なフィードバック、お待ちしております。

サーバーのドメインやデータベースの情報などはconfig.server.phpで設定します。ただし、このファイルは自動アップデートを利用すると上書き保存されてしまうため、最初から記述されている設定以外を定義しておくことができません。

そこで、Ver.2.10より config.user.php を用意しました。このファイルに記述されている内容は config.server.phpがロードされるタイミングと同じタイミングでロードされ、CMSのアップデートによって上書きされません。 CMS起動時に処理したい内容はここに記述しておきましょう。