• 公式テーマを活用して、効率よく開発するすすめ
  フォルトゥナ 坂本 邦夫さん
• Webサイトのサーバー間移行作業での気づき −アップデートは主体性が大事だと思った経緯
  株式会社ルーコ 川﨑 絢加さん
• 「Ver. 3.0 こんなつまずき」集 −3系のアップデートで遭遇した「えっ！こんなこと」とその解決方法
  株式会社データファーム 勝又 孝幸さん
• a-blog cms on AWS - アップルップルさんのコーポレートサイトをAWSにお引越し！
  アルブストリクス株式会社 平山 智則さん
• いまクライアントに提供するユニットのかたち
  A-Systems株式会社 石川 寿刀さん
• 事例紹介2024 - ましじめ株式会社
  ましじめ株式会社 田村 章吾さん
• エントリーの運用体験を改善するVer.3.2のアップデート
  有限会社アップルップル 宇井 陸登＆ 新井 慎之介
• a-blog cms Ver. 3.2 アップデート：機能強化と新たな可能性
  有限会社アップルップル 伊藤 淳

この記事は Advent Calendar 2024 の24日目の記事となります。a-blog cms に関する25日分の記事が公開されていますので、ぜひご覧ください。

https://adventar.org/calendars/9974

はじめに

この記事では、エントリー編集の基本機能であるユニットの設定について紹介します。意外と知らないことも多い設定方法について、この機会にいくつかのチップスをお届けします。

ユニット設定では、編集設定で追加した「ユニット追加ボタン」を押した際の挙動をカスタマイズすることができます。これにより、運用者にとって使いやすい編集画面を実現できます。ぜひ一度お試しください。

新規エントリー作成時に最初から追加されるユニットを設定する

この機能を知っている人は多いかもしれません。エントリー作成時にデフォルトで追加されているユニットを設定することができます。 標準テーマだと「メディア」と「テキスト」ユニットが設定されています。

設定方法

ユニット設定画面に移動すると「新規エントリー作成」という項目があるので、ここに初期ユニットを好きなように設定することができます。 例えばブログ的コンテンツの場合は、「メディア」「目次ユニット」「テキスト」などにしたり、専用のカスタムユニットを必ず入力する場合など初期から表示されていると便利です。

初期値を設定する

ユニット追加時にデフォルト値を設定することができます。設定はユニット設定画面から行い、各ユニットに対して指定します。

設定例

テキストユニット

マークダウンでのみテキスト入力する場合は、テキストユニットのデフォルトを「マークダウン」にしておくことで、毎回マークダウンを選択する手間をなくすことが出来ます。

メディアユニット

「配置」を中央寄せにすることが多いので、デフォルトで配置を中央にしておきます。 またデフォルトのメディアIDを設定することにより、ユニット追加時に画像が設定されている状態にできます。 例えばエントリーの下書き時に、まだ画像がないけど画像を入れる予定がある場合などに、ひとまず仮の画像を設定する手間が省けます。

複数のユニットの組み合わせを一度に追加する

以下のような設定を行うことで、ボタン１つで複数ユニットを一度に追加することも可能になります。 例えば、ユニットグループを使用して段組する時、複数ユニットを組み合わせる必要があり、また設定する箇所が多いです。このような時に便利です。

設定例

メディアユニットとテキストの組み合わせを2カラムの段組にしたい場合を考えてみます。 まず「編集設定」ページで新しく「ユニット追加ボタン」を追加します。重要なのは「モード」は「拡張」を選び、値は適当な文字列（ユニット拡張ではない）に設定することです。

次にユニット設定画面に移動すると「2段組（画像+テキスト）」という枠ができていますので、ここにメディアとテキストのユニットをユニットグループで二段組になるように追加・設定します。

以上で設定完了です。エントリー編集ページで「2段組（画像+テキスト）」ボタンを１つ押すだけで、ユニットが４つ挿入され、以下のようなレイアウトを瞬時に組むことが可能になります。

ユニットグループを使った段組レイアウトは、理解をするのが難しくなかなか使いこなせません。
ただこのように最初から設定された状態でユニット追加ができることにより、運用者が簡単に段組レイアウトを実現することができるようになります。

定型ユニットを用意する

最後定型ユニットを追加する方法です。こちらは特に独自の設定があるわけではなく、運用しやすい編集画面を用意する上でのアイデアになります。

設定例

例えば、以下のような定型ユニットを考えてみます。

• スタッフ募集の定型文ユニット
• 休業日のお知らせ定型文ユニット
• お問い合わせ先の定型文ユニット

このように、サイトを運営していく上でよく使用するような文章やパーツをボタン１つで追加できるようにしておくことでスムーズに記事を更新できるようになります。

以上になります。 カスタムフィールドの設計だけではなく、ユニット設定もしっかり設定することで、運用しやすくお客様に喜ばれる編集画面を提供できます。 ぜひ試してみてください！！

a-blog cmsでは、フォーム送信後の結果を、ページを移動せずにAjaxを使用して表示できる機能が標準で実装されています。この方法は組み込みJavaScriptのpost include機能を利用します。（Ver. 1.3.0より）

通常は検索フォームにデータを入力して送信ボタンを押すと、新しいページを読み込んで検索結果を表示しますが、この機能を利用するとページを移動せずに同じページ内で検索結果を表示することができます。

デモ

検索ボタンをクリックするとこの部分が置き換わります。

実装方法

ここでは例として、サイト内検索フォームから検索すると、ある特定のコンテンツエリアを書き換えて検索結果を表示する手順を説明します。

1.テンプレートを用意する

フォームを送信した後に表示する内容をテンプレートとして用意します。ここではsearchResult.htmlというテンプレートを用意するとします。このテンプレートには検索結果の表示部分のみ記述しています。

<!-- BEGIN_MODULE Entry_List -->
<ul><!-- BEGIN entry:loop -->
  <li><a href="{url}">{title}</a></li><!-- END entry:loop -->
</ul>
<!-- END_MODULE Entry_List -->

2.モジュールIDを作成する

「1.テンプレートを用意する」で作成したモジュールをモジュールIDにし、引数設定の[keyword]にチェックを入れます。これで、フォームから送られたキーワードに合致するエントリーが表示されるようになります。

<!-- BEGIN_MODULE Entry_List id="searchResult" -->
<ul><!-- BEGIN entry:loop -->
  <li><a href="{url}">{title}</a></li><!-- END entry:loop -->
</ul>
<!-- END_MODULE Entry_List -->

3. フォームを用意する

（1）サイト内検索フォームを用意します。

<form action="" method="post">
    <input type="text" name="keyword" value="" size="15" />
    <input type="hidden" name="bid" value="6" />
    <input type="submit" name="ACMS_POST_2GET" value="検索" />
</form>

（2）form要素にclass属性とtarget属性を追加します。「class="js-post_include"」はこのとおりに記述し、target属性は#の後に任意の名前を記述します。（"#"はidを意味しています）このtarget属性は検索結果の表示を置き換える場所を指定しています。

target属性がない場合は、form自体が検索結果表示に置き換わります。

<form action="" method="post" class="js-post_include" target="#jsChangeContents">
    <input type="text" name="keyword" value="" size="15" />
    <input type="hidden" name="bid" value="6" />
    <input type="submit" name="ACMS_POST_2GET" value="検索" />
</form>

（3）検索結果を表示するテンプレートを参照します。 例）include/searchResultSample.html というテンプレートを参照する場合の例です。

<form action="" method="post" class="js-post_include" target="#jsChangeContents">
    <input type="text" name="keyword" value="" size="15" />
    <input type="hidden" name="bid" value="6" />
    <input type="hidden" name="tpl" value="include/searchResultSample.html" />
    <input type="submit" name="ACMS_POST_2GET" value="検索" />
</form>

4. 検索結果表示部分と関連付ける

検索結果を表示したいコンテンツエリアに、formのtarget属性と同じ名前を付けます。手順2（2）で指定したtarget属性の値と同じ名前が付いている要素部分が、検索結果表示として置き換わります。

target属性で指定した要素自身を置き換えるか、その中身を置き換えるかを設定することができます。設定の詳細は「post includeの基本設定」の「postIncludeMethod」を参照してください。

例）formのtarget属性で"#jsChangeContents"と記述した場合

<div id="jsChangeContents">
<p>この部分が置き換わります。</p>
</div>

これで、検索結果を別ページに移動せずに表示できるようになります。

フォームそのものを表示させずに検索結果を表示することも可能です。詳細は「送信ボタンを押さずに検索結果を表示する（post include）」を参照してください。