Ver. 2.11 で新しく追加された「エントリーの一括編集」機能を体験してみましょう。

秋合宿 a-blog cms Training Camp 2014 Autumnの募集を開始いたしました。

前回は愛知・三重・静岡・福井・石川・長野・京都・奈良・大阪・兵庫・東京・香川・広島・山口の14エリアから集まり、合計43人の方にご参加いただきました。会場は前回とはちがって師崎荘で行います。

営業日等のカレンダーを表示する機能として、「サイト管理＞スケジュール」があります。
標準機能では、登録項目としてテキスト入力とセレクトによる選択があります。
カスタムフィールドを使って項目を追加する方法を説明します。

このハンズオン記事ではVer.2.11から追加された、開発環境が整ったテーマ「Develop」を触ってみましょう。

ここでは、ローカル環境に a-blog cms をインストール状態を例に解説していきます（ablogcms.io では行えません）。環境が異なる場合はご自身の環境に合わせて読み替えてください。

このハンズオンでは、npm（Node Package Manager）が必要です。インストールされていない方は、 https://nodejs.org/ja/download から環境にあったインストーラーをダウンロードしてインストールください。

「develop」テーマとは

Ver.2.11より同梱された新しいテーマです。a-blog cms を開発する際によく使うテンプレートをシンプルにしたものを同梱していますが、フロントエンドに関する開発環境も整えられています。

機能

はじめてみよう

ローカル環境に a-blog cms をインストールしてください。ターミナルで、developテーマを設置しているディレクトリまで移動します。

$ cd  /themes/develop/

移動できたら、npm をインストールします。

$ npm install

※現在お配りしているdevelopテーマではstylelintが入らないようになっているので、以下のように別途インストールしてください。

$ npm i stylelint stylelint-config-rational-order stylelint-config-recommended stylelint-scss --save

テーマ名（デフォルト: develop）を変更した場合は、package.json の config.theme を変更してください。もし、LiveReload を使用する場合は、実行しているローカル環境のアドレスに合わせて config.local を変更してください。

/themes/develop/package.json

"config": {
  "local": "localhost",
  "theme": "テーマ名"
},

用意しているビルドコマンドについて

コマンドは、npm run **になります。**の部分に下記のコマンドが入ります。

※ npm run startと npm run dev では、JavaScriptに余分なコードが入ったり、最適化されません。納品時には必ず npm run build を行なってください。

一度、npm run startと実行すると、以下のページが立ち上がるのを確認してみてください。

localhost:3000 でページが立ち上がります

基本的なテーマの使い方は以上となります。 それでは、このハンズオン記事では以下のことを行なっていきます。

• 組み込みJSを使わず、lazy-loadを使ってみよう
• ファーストビューに含まれるCSSをインライン化してみよう
• Font Awesome 5 のSVG with JavaScriptを使ってみよう

組み込みJSを使わず、lazy-loadを使ってみよう

パフォーマンス向上のために、組み込みJSを外す場合は、include/head/js.html で読み込んでいる組み込み JSをTouch_SessionWithContribution を使って、投稿者以上の場合だけ読み込むようにします。

/include/head/js.html

developテーマの/include/head/js.htmlには以下のように記述されています。タッチモジュールの冒頭に「！（エクスクラメーション）」が記述されているので、今回は削除してください。

<!-- 組み込みJSを使わない場合、エクスクラメーションを外して、投稿者以上の場合だけ読み込むようにする -->
<!-- !BEGIN_MODULE Touch_SessionWithContribution -->
<script src="%{JS_LIB_JQUERY_DIR}jquery-%{JS_LIB_JQUERY_DIR_VERSION}.min.js" charset="UTF-8"></script><!-- BEGIN_MODULE Js -->
<script src="/acms.js{arguments}" charset="UTF-8" id="acms-js"></script><!-- END_MODULE Js -->
<!-- !END_MODULE Touch_SessionWithContribution -->

以下のようになります。

<!-- 組み込みJSを使わない場合、エクスクラメーションを外して、投稿者以上の場合だけ読み込むようにする -->
<!-- BEGIN_MODULE Touch_SessionWithContribution -->
<script src="%{JS_LIB_JQUERY_DIR}jquery-%{JS_LIB_JQUERY_DIR_VERSION}.min.js" charset="UTF-8"></script><!-- BEGIN_MODULE Js -->
<script src="/acms.js{arguments}" charset="UTF-8" id="acms-js"></script><!-- END_MODULE Js -->
<!-- END_MODULE Touch_SessionWithContribution -->

組み込みJSを読み込まない場合、スライダーや画像ビューワーなどのすべての組み込みJSが動作しなくなるためご注意ください。

必要な機能やライブラリは、自分でインストール、実装する必要があります。

バンドル環境が整っていますので、 npm経由でライブラリをインストールし、 importする方式をお勧めします。以下 Lazy Load を実装する例になります。

$ npm i vanilla-lazyload

index.js 6行目

import LazyLoad from 'vanilla-lazyload';

index.js 34行目 domContentLoadedイベント内に追記

domContentLoaded(() => {
  new LazyLoad({elements_selector: '.js-lazy-load'});
});

HTMLに以下のソースコードを記述して、表示してみましょう。 成功した場合、一瞬プレースホルダー画像が現れた後、すぐに猫の写真が表示されます。

<img data-src="http://placekitten.com/400/300" src="/images/placeholder/image.svg" width="400" class="js-lazy-load">

ファーストビューに含まれるCSSをインライン化してみよう

スタイルの読み込みについて

カスタムスタイルは、include/head/preload.html で読んでいます。 以下記述のように preload 属性を使って読み込むようにしており、非同期でスタイルを読み込んでいます。

<link rel="preload" href="/dest/bundle.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/dest/bundle.css"></noscript>

Above the fold（ファーストビュー）に含まれる CSS のインライン化

preload属性を使って、非同期にスタイルを読むようにしたことで、スタイル読み込みでブロックされずレンダリングが速くなります。 ただその影響で、スタイルが当たっていないHTMLが一瞬表示される可能性があります。これを解決するために、Above the fold（ファーストビュー）のCSSをインライン化して読み込みます。

手順

1. ファーストビューのスタイルが完成したら、themes/develop/src/index.html に 現在のソース貼り付けます。（ブラウザで表示したときのソースを貼り付ける）
2. npm run build コマンドを実行します。
3. ビルドコマンドを実行すると、themes/develop/dest/index.html にファイルができます。
4. dest/index.html にインラインCSSが書き出されている（17行目あたり）ので、このCSSを、include/head/preload.html に設置します。

<style>
<!-- ファーストビュー（above the fold ）のインラインCSS を挿入。インラインCSSは webpackでbuildすると、dest/index.html に生成される。 -->
</style>

ファーストビューのスタイルの配布

ハンズオンしやすいように、簡単なスタイルを用意したファイルを用意しました。以下のファイルをご利用ください。

所定の場所にファイルをおいたら、$ npm run startすると以下のようなページが作成されます。

ページの表示を確認できたら、上記の手順に沿ってnpm run buildしてみてください。

確認方法

ちゃんとファーストビューのインラインのCSSが読み込まれているかどうかは、ブラウザの開発者ツールから確認できます。Google Chrome をお使いの場合は、下記の手順で確認できます。

1. Networkタブを開く
2. 実装したドメインと同じ項目を探し、クリックする
3. Previewタブを開く

そうすると、通常であればCSSが当たっていない素のHTML表示されますが、スタイルが当たったHTML要素が確認できます。もし、CSSが当たっていないHTMLが表示された場合は、手順を見直してください。

preload.htmlにインラインCSSを記述していない場合

preload.htmlにインラインCSSを記述した場合

preload.htmlではファーストビューで使用しているCSSを記述すればいいので、今後開発して行く際はいつものように制作していただければ大丈夫です。

Font Awesome 5 のSVG with JavaScriptを使ってみよう

アイコンの利用を考え、developテーマでは、Font Awesome 5 の SVG with JavaScript が利用できるようになっています。

アイコンのインポート

SVG with JavaScript では必要なアイコンのみインポートして利用します。 アイコンの種類により、インポートするパッケージが違うので気をつけてください。例えばブランドアイコン系は、@fortawesome/free-brands-svg-icons から読み込みます。

themes/develop/src/fonts.js

import { faUser, faSignOutAlt } from '@fortawesome/free-solid-svg-icons';
import { faFacebook, faTwitter, faInstagram } from '@fortawesome/free-brands-svg-icons';

命名規則はクラス名（ケバブケース）をキャメルケースにしたものになります。

.fa-sign-out-alt のアイコンを使いたい場合は、 faSignOutAlt を読み込みます。

themes/develop/src/fonts.js

import { faSignOutAlt } from '@fortawesome/free-solid-svg-icons';

アイコンの登録

インポートしたアイコンを以下のように使用できるように登録します。使用するアイコン全てを指定します。

themes/develop/src/fonts.js

library.add(faUser, faSignOutAlt, faFacebook, faTwitter, faInstagram);

アイコンの表示

あとは、以下のようにアイコンを表示させることができます。

<i class="fab fa-twitter"></i>
<i class="fab fa-facebook"></i>
<i class="fas fa-sign-out-alt"></i>

Font Awsome の公式サイトから好きなアイコンを探して、developテーマで使えるようにしてみましょう。

• Icons | Font Awesome

この口座はa-blog cms Training Camp 2021 Autumnで行った内容です。
当日の内容がYouTubeに上がっているため、よければご覧ください。

下準備

管理画面側で読み込むCSSとJavaScriptファイルを作成して、エントリー編集画面に読み込んでおきましょう。

実践

使用テーマ直下に admin-asset 作成し、フォルダの中に field-edit.css と field-edit.js を作成しておきます。

1. 管理画面側編集ページでの読み込み

/使用テーマ/admin.htmlをひらき、 先程作成したcssとjsファイルを Touch_Edit の中で下記のように読み込みます。

@extends("/_layouts/admin.html")

@section("admin-css")
@parent

<!-- カスタムCSSを記述 -->
<!-- BEGIN_MODULE Touch_Edit -->
<link rel="stylesheet" href="/dest/admin.css">
<link rel="stylesheet" href="/admin-asset/field-edit.css">
<!-- END_MODULE Touch_Edit -->
@endsection

@section("admin-js")
@parent

<!-- カスタムJSを記述 -->
<script src="/dest/vendor.js" async></script>
<script src="/dest/admin.js" charset="UTF-8"></script>
<!-- BEGIN_MODULE Touch_Edit -->
<script src="/admin-asset/field-edit.js"></script>
<!-- END_MODULE Touch_Edit -->
@endsection

2. 表側編集ページでの読み込み

/使用テーマ/include/head/link.html をひらき、 作成したcssファイルを Touch_SessionWithContribution の中で下記のように読み込みます。

<!-- BEGIN_MODULE Touch_SessionWithContribution -->
<link rel="stylesheet" href="/css/acms-admin.min.css">
<link rel="stylesheet" href="/admin-asset/field-edit.css">
<!-- END_MODULE Touch_SessionWithContribution -->

/使用テーマ/include/head/js.html をひらき、 作成したjsファイルを Touch_SessionWithContribution の中で下記のように読み込みます。

<!-- BEGIN_MODULE Touch_SessionWithContribution --><!-- BEGIN_MODULE Js -->
<script src="/acms.js{arguments}" charset="UTF-8" id="acms-js"></script><!-- END_MODULE Js -->
<script src="/admin-asset/field-edit.js"></script>
<!-- END_MODULE Touch_SessionWithContribution -->

これで下準備は完了です。

カスタムフィールドの必須解除ができるチェックボックスを実装してみよう

目標

実践

1. カスタムフィールドメーカーでコード生成

/使用テーマ/admin/entry/field.html を開いておきます。

カスタムフィールドメーカーで入力欄を生成します。

カスタムフィールドメーカー
https://developer.a-blogcms.jp/tools/custom-field.html

生成内容

• カスタムフィールド

• チェックボックス
  タイトル : フィールド設定
  フィールド : test_f1
  項目名 : 必須解除
  値 : on

• テキスト
  タイトル : フィールドタイトル
  フィールド : test_f2
  オプション > 入力チェック > バリデータ：必須 [ フィールドタイトルが入力されていません ]

※今回はJavaScriptによるバリデートを使用するにチェックは入れないでください。

生成した入力用ソースをコピーして、あらかじめ開いておいた /使用テーマ/admin/entry/field.html に貼り付けます。

管理画面 > エントリー > エントリー作成 からエントリー作成画面を表示してフィールドが追加されたことを確認します。
保存ボタンを押してバリデータによってエラー表示されることも確認しておいてください。

2. スタイル調整

テーブルに見出しをつけます。
先程追加したフィールドテーブルの上に下記ソースを貼り付けてください。

<h2 class="acms-admin-admin-title2 acms-admin-margin-top-medium">必須切り替えテスト</h2>

必須ラベルをつけます。
「フィールドタイトル」の後ろ（thタグの中）に下記ソースを貼り付けてください。

<span class="acms-admin-label acms-admin-label-danger acms-admin-margin-left-mini js-test_f2_label">必須</span>

フィールドタイトルのテキストinputの長さを調整します。
フィールドタイトルのテキストinputのクラス acms-admin-form-width-full を acms-admin-form-width-large に書き換えてください。

エラー文の余白調整を調整します。
acms-admin-text-error に acms-admin-margin-top-mini クラスを追加してください。

エラー文にアイコンをつけます。
acms-admin-text-error 要素の中身を下記で置き換えてください。

<span class="acms-admin-icon acms-admin-icon-attention"></span><span class="acms-admin-align-middle">フィールドタイトルを入力してください</span>

スタイルが整ったかエントリー編集画面を再度確認します。

3. JSで必須解除する

エラー文のpタグに js-test_f2-error-text クラス を追加します。

/使用テーマ/admin-asset/field-edit.js に下記ソースを貼り付けてください。

document.addEventListener('DOMContentLoaded', function() {
  // チェックボックスのinput要素を取得
  var checkbox = document.getElementById('input-checkbox-test_f1-on');
  // 必須バリデータ要素を取得
  var checkHidden = document.getElementById('test_f2-v-required');
  // 必須ラベル要素を取得
  var label = document.querySelector('.js-test_f2_label');
  // ページロード時にチェックボックスにチェックが入っていた場合はバリデータ無効化
  if (checkbox.checked) {
    checkHidden.disabled = true;
    label.style.display = 'none';
  }
  // チェックボックスをON/OFFした時の処理
  checkbox.addEventListener('change', function(event) {
    var errorText = document.querySelector('.js-test_f2-error-text');
    if (event.target.checked) {
      // チェックした時はバリデータを無効化し、エラー文が出ていたら非表示にする
      checkHidden.disabled = true;
      label.style.display = 'none';
      if (errorText) {
        errorText.style.display = 'none';
      }
    } else {
      // チェック外した時はバリデータを有効化し、エラー文非表示のスタイルを消す
      checkHidden.disabled = false;
      label.style.display = '';
      if (errorText) {
        errorText.style.display = '';
      }
    }
  });
});

動きの確認をしてください。

詳細設定の公開日時と掲載期限を抜き出してみよう

目標

実践

1. 公開日時と掲載期限の情報を入れるテーブルを用意

下記ソースを /使用テーマ/admin/entry/field.html に貼り付けます。

<h2 class="acms-admin-admin-title2 acms-admin-margin-top-medium">イベント情報</h2>
<table class="acms-admin-table-admin-edit"><tbody class="js-date-prepend"></tbody></table>

今貼り付けたソースには、すでにJSで制御する時に使用する js-date-prepend クラスがつけてあります。
h2タグ見出しもついていますが、不要な場合は削除してください。

2. 期限要素を移動させる

下記ソースを /使用テーマ/admin-asset/field-edit.js に追記してください。

document.addEventListener('DOMContentLoaded', function() {
    // ~ 割愛 ~

  ACMS.addListener("acmsDispatch", function() {
    // 公開期間をカスタムフィールド内へ移動
    var datePrepend = document.querySelector('.js-date-prepend');
    var entryStartDateDisplay = document.getElementById('entry-start-date-display');
    var entryEndDateDisplay = document.getElementById('entry-end-date-display');
    // 所得したカスタムフィールドのテーブル要素の末尾に期限要素を追加していく
    datePrepend.appendChild(entryStartDateDisplay);
    datePrepend.appendChild(entryEndDateDisplay);
  });
});

公開日時と掲載期限が移動するかエントリー編集画面を開いて確認します。

3. スタイル調整

期限入力欄が間延びしているので、詳細設定にあった時とおなじようなスタイルに調整します。
下記ソースを /使用テーマ/admin-asset/field-edit.css に貼り付けてください。

/* 公開日時と掲載期限をエントリーのカスタムフィールドに移動 */
.js-date-prepend .entryFormDateBlockWrap {
  margin-right: 10px;
}
@media screen and (min-width: 480px) {
  .js-date-prepend .entryFormDateBlockWrap{
    display: inline-block;
  }
  .js-date-prepend .entryFormDateBlock {
    display: inline-block;
    width: 150px;
    vertical-align: middle;
  }
}

スタイルが整ったかエントリー編集画面を再度確認します。

カスタムフィールドグループにデフォルト値を入れておくには

目標

実践

1. カスタムフィールドメーカーでコード生成

/使用テーマ/admin/entry/field.html を開いておきます。

カスタムフィールドメーカーで入力欄を生成します。

カスタムフィールドメーカー
https://developer.a-blogcms.jp/tools/custom-field.html

生成内容

• カスタムフィールドグループ

• グループのタイトル : イベント情報
  フィールド名 : group_test_f3
  横向きレイアウト

• テキスト
  タイトル : 見出し
  フィールド : test_f3_item_title

• テキストエリア
  タイトル : テキスト
  フィールド : test_f3_item_note

生成した入力用ソースをコピーして、あらかじめ開いておいた /使用テーマ/admin/entry/field.html に貼り付けます。

管理画面 > エントリー > エントリー作成 からエントリー作成画面を表示してフィールドが追加されたことを確認します。

2. デフォルト値用の入力欄を作成する

入力欄を設置します。
先ほど生成たコードの group_test_f3:loop 内をコピーして、:loop開始コメントの上に3回ペーストしてください。

タイトルをデフォルト値に書き換えます。
ペーストしたコード内 name="test_f3_item_title[]" 要素の value をそれぞれ「出演」「企画」「協賛」に置き換えてください。

テキストをデフォルト値に書き換えます。
ペーストしたコード内の textarea 要素の中身を全て「内容を書き換えてください。不要な場合は項目ごと削除してください。」に置き換えてください。

3. 新規エントリー作成時にのみデフォルト値が読み込まれるようにする

下記IF文でペーストしたコードを囲ってください。

<!-- BEGIN_IF [%{EID}{test_f3_item_title}{test_f3_item_note}[delnl]/em] -->
 ~ ここにデフォルト値を設定したフィールドが入ります。 ~ 
<!-- END_IF -->

管理画面 > エントリー > エントリー作成 からエントリー作成画面を表示して確認します。
デフォルト値がエントリー新規作成時にのみ読み込まれて、エントリー編集時/エントリー保存失敗時に不要なフィールドが増えないことを確認してください。

4. SetTemplateでテンプレートをスッキリさせる

デフォルト値が設定されている部分が冗長なのでSetTemplateを使いテンプレートの変数化をしていきます。 @include でも同様のことができので、どちらで対応してもOKです。

SetTemplate を用意します。 下記コードを /使用テーマ/admin/entry/field.html の上の方に貼り付けてください。

<!-- BEGIN_SetTemplate id="tpl_test_f3_item" -->
<!-- END_SetTemplate -->

デフォルト値設定しているtr要素の一つをコピーし、SetTemplateの中に貼り付けてください。
次に、SetTemplate 内の name="test_f3_item_title[]" 要素の value を {{tpl_item_title}} で置き換えます。

GET_Template を設置します。
<!-- BEGIN_IF [%{EID}/em/_and_/<!-- BEGIN_MODULE Admin_Messages -->{message}<!-- END_MODULE Admin_Messages -->/neq/failure] --> の中を下記で置き換えてください。

<!-- エントリー作成時のデフォルト設定 -->
<!-- GET_Template id="tpl_test_f3_item" tpl_item_title="出演" -->
<!-- GET_Template id="tpl_test_f3_item" tpl_item_title="企画" -->
<!-- GET_Template id="tpl_test_f3_item" tpl_item_title="協賛" -->

GET_Templateできているかエントリー新規作成して確認します。

5. スタイル調整

「イベント情報」見出しが2つある場合は削除してください。

theadは不要かと思いますので削除してください。

name="test_f3_item_title[]" が入っている td を th に変更してください。

必要であれば placeholder を入れてください。

テーブルがくっついて線が2重になっている場合は、/使用テーマ/admin-asset/field-edit.css に下記を追記してください。

.acms-admin-table-admin-edit + .acms-admin-table-admin-edit {
  border-top: 0;
}

スタイルが整ったかエントリー編集画面を再度確認します。

6. テキストエリアを Lite Editor にする

js-lite-editor-field クラスを name="test_f3_item_note[]" 要素につけてください。
※ 表示側の解説は本記事でしていませんが、表示する時には校正オプションの[raw]が必要になります。

カスタムフィールド用の Lite Editor JS をカスタマイズします。
/使用テーマ/admin-asset/field-edit.js に下記を追記してください。

document.addEventListener('DOMContentLoaded', function() {
  // ~ 割愛
  ACMS.Ready(function() {
    ACMS.Config.LiteEditorFieldConf.btnPosition = 'bottom';
    ACMS.Config.LiteEditorFieldConf.classNames = {
      LiteEditor: 'entryFormLiteEditor',
      LiteEditorBtnGroup: 'acms-admin-btn-group acms-admin-btn-group-inline',
      LiteEditorBtn: 'acms-admin-btn',
      LiteEditorBtnActive: 'acms-admin-btn acms-admin-btn-active',
      LiteEditorBtnClose: '',
      LiteEditorTooltipInput: 'acms-admin-form-width-full'
    };
    ACMS.Config.LiteEditorFieldConf.btnOptions = [
    { label: 'リンク', tag: 'a', className: '', sampleText: 'リンクテキスト' },
    { label: '強調', tag: 'em', className: '', sampleText: ' ' },
    { label: '重要', tag: 'strong', className: '', sampleText: ' ' }
    ];
  });
});

Lite Editor のスタイル調整もしておきます。
js-lite-editor-field の親要素に field-lite-editor-wrap クラスを付けてください。

次に、/使用テーマ/admin-asset/field-edit.css に下記を追記します。

.field-lite-editor-wrap .lite-editor-toolbox {
  margin-top: 6px;
  padding: 0;
  background-color: transparent;
  border: none;
  border-radius: 0;
}
.field-lite-editor-wrap .lite-editor-btn-group-wrap {
  padding-left: 0;
}

エントリーの編集ページが Lite Editor 化されているか確認します。

ユーザー情報をセレクトできるようにしてみよう

目標

実践

1. ユーザー追加

これからユーザー情報を表示させたいので、ユーザーがあまりいない場合はユーザー追加しておきましょう。 管理画面 > ユーザー の [ユーザー作成] から追加できます。 10件以上あると後から行うカスタマイズで変化がわかりやすいです。

2. カスタムフィールドメーカーでコード生成

/使用テーマ/admin/entry/field.html を開いておきます。

カスタムフィールドメーカーで入力欄を生成します。

カスタムフィールドメーカー
https://developer.a-blogcms.jp/tools/custom-field.html

生成内容

• カスタムフィールドグループ

• グループのタイトル : 担当者
  フィールド名 : group_test_f4
  横向きレイアウト

• セレクトボックス
  タイトル : 担当者名
  フィールド : test_f4_item_user
  項目名 : 名前
  値 : ユーザーID

生成した入力用ソースをコピーして、あらかじめ開いておいた /使用テーマ/admin/entry/field.html に貼り付けます。

エントリー編集画面を表示してフィールドが追加されたことを確認します。

3. User_Search モジュールを追加する

User_Search モジュールのスニペットと変数表を開きます。

ビルトインモジュール
https://developer.a-blogcms.jp/document/reference/built_in.html#entry-6
※ 他のUser系モジュールでも問題ないです。

スニペットから下記の必要なものをコピぺしていきます。
値が空になっていないoption要素を囲うように貼り付けてください。

• モジュールの開始と終了
• user:loopの開始と終了

変数表から下記の必要なものをコピぺしていきます。
値が空になっていないoption要素内に貼り付けます。

• ユーザーID ... valueに当たる部分に変数を中括弧で括って入れます。
• ユーザー名 ... option要素の表示テキストとして変数を中括弧で括って入れます。

4. User_Search内のエントリーフィールド値をエスケープする

group_test_f4:loop 内の option要素に中括弧が2重になっている部分があるので、その一番外側をエスケープします。

<option value="{id}" \{test_f4_item_user:selected#{id}\}>{name}</option>

5. User_Search モジュールにIDを設定

管理画面 > モジュールID を開きモジュールIDを作成します。

• モジュール : User_Search
  モジュールID : user_search_test
  名前 : カスタマイズ講座用（ユーザー情報をセレクトできるようにしてみよう）
  ※ モジュールIDや名前はなんでもOKです。わかりやすいものにしてください。

• ブログID : ユーザーが登録されている（またはこれから登録する）ブログを選択

一度保存します。

表示設定を開き、表示件数や権限などを調整します。
※表示件数を10件以上にしておくとこの後に行うカスタマイズでの変化がわかりやすくなります。

作成したモジュールIDをコピーして、テンプレート側のモジュールに貼り付けます。

<!-- BEGIN_MODULE User_Search id="user_search_test" -->

エントリー編集画面を確認し、担当者のselectにユーザー情報が反映されていることを確認します。

6. ユーザーが増えても困らないようにする

現在ユーザー選択はただのselectボックスなのでユーザーが増えた場合に探すのが大変です。 こういう時は、select2.js の組み込みJSを入れておくと便利です。 ユーザーが10こ以上になるとテキスト検索がかけれるようになります。

担当者名のセレクトボックスに js-select2 クラスをつけておきましょう。

7. スタイル調整

value が空の option には「選択してください」を入れておくと親切かと思います。

担当者の見出しが上の要素とくっついている場合は、余白クラスをつけておきましょう。

<h2 class="acms-admin-admin-title2 acms-admin-margin-top-medium">担当者</h2>

おわり

お疲れ様でした。
今回は裏側の作り込み方や小技紹介をさせていただきました。
この記事をみて気になる項目がありましたら表側の実装にも挑戦してみてください。

あまり解説していない内容の詳細

• 組み込みJSのイベントハンドラ
• テンプレートの変数化
• インクルード
• 校正オプション
• カスタムフィールドにインラインエディターのUIを適用する