タッチモジュールは、見ているページ(テンプレート)がその条件にあてはまる時だけ表示されます。次の例では、単一記事の表示のときだけコメントモジュールを読み込みます。

例：エントリーが指定されている（個別ページ）時のみコメントモジュールを表示する

<!-- BEGIN_MODULE Touch_Entry -->
　<!-- BEGIN_MODULE Comment_Body -->
　　（中略）
　<!-- END_MODULE Comment_Body -->
<!-- END_MODULE Touch_Entry -->

タッチモジュール

Not系タッチモジュール

最近はメディア機能を利用される人も多いかもしれませんが、カスタムフィールドグループで画像を利用すると「ブラウザ側のリサイズ機能を使用する」が機能していない事が分かりました。将来的なアップデートで修正される予定ですが、正常に動作するサンプルコード を紹介しておきます。

グループ名： album / 画像 : photo で設定しています。

<table class="js-fieldgroup-sortable adminTable acms-admin-table-admin-edit">
  <tbody>
  <!-- BEGIN album:loop -->
  <tr class="sortable-item">
    <td class="item-handle acms-admin-table-nowrap">
      <i class="acms-admin-icon-sort"></i>
    </td>
    <td>
      <table>
        <tr>
          <td class="js-img_resize_cf">
            <!-- BEGIN_IF [{photo@path}/nem] -->
            <img src="%{ARCHIVES_DIR}{photo@path}" class="js-img_resize_preview" style="max-width:300px" alt="{photo@alt}" />
            <input type="hidden" name="photo@old[]" value="{photo@path}" />
            <label for="input-checkbox-photo@edit[]" class="acms-admin-form-checkbox">
              <input type="checkbox" name="photo@edit[]" value="delete" id="input-checkbox-photo@edit[]" />
              <i class="acms-admin-ico-checkbox"></i>削除</label>
            <!-- ELSE -->
            <img src="%{ARCHIVES_DIR}{photo@path}" class="js-img_resize_preview" style="max-width:300px;display:none" />
            <!-- END_IF -->
            <input type="file" name="photo[]" class="js-img_resize_input" />
            <br/>
            <input type="hidden" name="photo@width[]" value="800" />
          </td>
        </tr>
      </table>
    </td>
    <td class="acms-admin-table-nowrap">
      <input type="button" class="item-delete acms-admin-btn-admin acms-admin-btn-admin-danger" value="削除" />
    </td>
  </tr>
  <!-- END album:loop -->
  <tr class="sortable-item item-template">
    <td class="item-handle acms-admin-table-nowrap">
      <i class="acms-admin-icon-sort"></i>
    </td>
    <td>
      <table>
        <tr class="js-custom-img_resize_cf">
          <td class="js-img_resize">
            <img src="" style="max-width:300px;display:none" class="js-img_resize_preview" />
            <input type="file" name="photo[]" class="js-img_resize_input" style="max-width:300px" />
            <br/>
            <input type="hidden" name="photo@width[]" value="800" />
          </td>
        </tr>
      </table>
    </td>
    <td class="acms-admin-table-nowrap">
      <input type="button" class="item-delete acms-admin-btn-admin acms-admin-btn-admin-danger" value="削除" />
    </td>
  </tr>
  </tbody>
  <tfoot>
  <tr>
    <td colSpan="3">
      <input type="button" class="item-insert acms-admin-btn-admin" value="追加" />
      <input type="hidden" class="item-max" value="20" />
    </td>
  </tr>
  </tfoot>
</table>
<input type="hidden" name="@album[]" value="photo@path" />
<input type="hidden" name="@album[]" value="photo@alt" />
<input type="hidden" name="@album[]" value="photo@x" />
<input type="hidden" name="@album[]" value="photo@y" />
<input type="hidden" name="@album[]" value="photo@edit" />
<input type="hidden" name="@album[]" value="photo@old" />
<input type="hidden" name="photo:extension" value="image" />
<input type="hidden" name="@album[]" value="photo" />
<input type="hidden" name="field[]" value="photo" />
<input type="hidden" name="field[]" value="@album" />

<script>
ACMS.Ready(function () {
  ACMS.addListener("acmsAddCustomFieldGroup", function(e) {
    $('.js-custom-img_resize_cf', e.target).each(function () {
      ACMS.Library.ResizeImage(this);
    });
  });
});
</script>

Ver. 2.11.22 より、次世代画像フォーマットである「WebP」画像の生成に対応しました。

新規制作であれば、最初からWebP画像が生成されるので問題ないですが、CMSをアップデートしてWebP画像に対応した場合、 古い画像は残念ながらWebP対応されません。

そこで今回は、古い画像もWebP画像に対応させる方法について、紹介したいと思います。

cwebp コマンド

最初に、WebP画像を生成するために、Googleが開発している「cwebp」コマンドをインストールします。
公式ページ: https://developers.google.com/speed/webp

いろいろな環境があるため、ここでは、macOS環境で「homebrew」を使ってインストールしてみます。 他の環境の場合は「cwebp」のインストール方法は、いろいろ記事で紹介されていますので、そちらをご参考ください。

Homebrewでのインストール

ターミナルで以下のコマンドを実行することにより「cwebp」をインストールすることができます。 $ brew install webp

シェルスクリプトの用意

以下のシェルスクリプトを、画像変換したいディレクトリ（例えば「media」ディレクトリなど）に設置します。

#!/bin/sh

images=`find . -type f -name *.jpg -or -name *.jpeg -or -name *.png`

for image in $images;
do
    cwebp $image -o $image".webp" >/dev/null 2>&1
done

例

上記のスクリプトを webp.sh として media ディレクトリに設置した場合。

$ cd path/to/media
$ chmod 755 webp.sh // 実行可能なパーミッションに変更
$ ./webp.sh

これで、pngやjpegの元画像と同じディレクトリ、元ファイル名.webp というファイルができてると思います。

これで、バージョンアップ前の画像も、WebP画像対応することができました。是非WebPが利用できる環境であれば是非お試しください。