#カスタマイズ

数年前のインターンの課題として「Facebook の複数枚写真をアップロードした際に、写真をレイアウトしてくれる JavaScriptライブラリを作ってみよう！ 」というお題を出していた時期があります。

これはサンプルの1枚画像です

これは a-blog cms Advent Calendar 2023 3日目の記事です。昨日は、Sugar さんの ファイルを添付できるフォームのハマりどころ6選 でした。

a-blog cms のユーザーアイコンは、何も設定しないと user0.png 〜 user9.png で uid の下一桁で 10色のアイコンが自動で振られます。ユーザーの管理画面でアイコンを設定する人も少なくデフォルトのアイコンのままってことが多いんじゃないかと思ったりする部分を識別しやすいように自動でアイコンが設定されたらいいなって思って今回のカスタマイズ「Gravatarのアイコンを反映してみる」という事にチャレンジしてみました。

Gravatar とは

Wikipedia によると

と書かれている。いつ作られたがかかれてないですが、今は WordPress.com のアカウントと統合されているのかな？

歴史を感じますね。私の SNSアイコンは 3世代あり、それがこの Gravatar には登録されているようです。 （今のヤツ、ルップルちゃん付き、mixi にも設定されているアイコンの順）

それでは a-blog cms への実装

ちょっと説明を全部書くのが難しそうなので、demo@beginner でテーマを用意してみました。まずはダウンロードください。

テーマファイルの説明

demo@biginner/admin.html

管理画面の左側のアイコン部分になります。

demo@biginner/admin/action.html

（エントリー作成）ボタンの上にあるアイコン部分の設定になります。

demo@biginner/admin/user/index.html

ユーザー一覧のアイコンのテンプレートになります。

demo@biginner/admin/user/edit.html

ユーザー詳細ページのアイコンのテンプレートになります。少し悩むのが、Gravatar のものなのかを表示させることができないことです。苦肉の策として、Gravatar のアイコンの時には画像を削除するチェックボックスを表示させないようにしました。この画像は消せないという意味になります。

themes_system__layout/admin.html

themes_system__layout のディレクトリにある admin.html は、themes/system/_layout を上書きするようにファイルになります。

3.0.28 のファイルに @section を追加しています。 将来的には今後のバージョンに入ったらいいなって思って @extends するように書いています。

extension/acms/Hook.php

Gravatar はメールアドレスを md5 で変換した文字列を利用します。 a-blog cms のログインユーザーのメールアドレスは %{SESSION_USER_MAIL} で表示は可能ですが、このメールアドレスを md5 で変換しないといけないので、%{SESSION_USER_MAIL_MD5} のようなものをオリジナルグローバル変数を作成します。

hook.php の最初の方に

use ACMS_RAM; 

を書いて、

public function extendsGlobalVars(&$globalVars)
{
    if ( SUID ) {
       $globalVars->set('SESSION_USER_MAIL_MD5', md5(ACMS_RAM::userMail(SUID)));
       $globalVars->set('GRAVATAR',"true"); # この行を消すと Gravatar 利用しないようになります
    }
}

とする事で、メールアドレスを md5ハッシュ化することができます。
[email protected] が 28f266d6006293d4b53e365e3f3b57ee になります。

ついでに %{GRAVATAR} に true を設定しておいて、場合によってはこの部分を消すとテンプレート上で Gravatar を使わない設定になるように IFブロックを書いてあります。

config.system.php

extension/acms/Hook.php をカスタマイズする場合には以下の設定 HOOK_ENABLE を 1 に設定を変更する必要があります。

define('HOOK_ENABLE', 1);

最後に

上記の実装をコピーすると、Gravatar のアイコンが表示されるようになります。会員制サイトなどには、効果のある実装になるのではないかと思います。 次にリリースする Ver. 3.1 では会員制サイトの機能のテコ入れをしていますので、もしかするとコレも標準的な実装になるかもしれませんね。

Ver. 3.1 で themes_system__layout/admin.html の修正分が反映されることになりました。

今回は多店舗展開をしているウェブサイトで新店を追加する際にできるだけ簡単にサイトの設定を完了させるための設定を考えてみます。

初期の状態としては上記のようになります。 URL は架空のもので実際には 404 です。 ここに bid:5 https://www.appleple.com/nagoya/ 名古屋店を追加していきます。

普通に追加する際の手順

1) bid:2 ショップ一覧のブログ管理にある（子ブログを作成）ボタンをクリック

2) 子ブログの設定を行い（作成）ボタンをクリック

ここで問題になりそうなのは、このコンフィグセットを「店舗用」を選択する 必要がある事です。このコンフィグセットを選択せず「デフォルト」のままだった際には正しいテーマが設定されず blog テーマになってしまったり店舗用のコンフィグが設定されない事になります。

こうならないようにするためには「店舗追加時の設定マニュアル」を用意する必要が出てきます。できる事なら、このようなマニュアルは作らずに運用できるようにしたい。

解決編「最初からコンフィグセットを設定済みの子ブログ設定フォームを用意する」

店舗一覧が表示される https://www.appleple.com/shop/ の時に上記を表示させます。

実装方法

themes/＊作成しているテーマ＊/admin/action.html を

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

@section("extra")
<!-- BEGIN_IF [%{BID}/eq/2] -->
<form action="/bid/2/admin/blog_edit/" method="post" class="acms-admin-form">
  新規店舗：
  <input type="text" name="name" value="" placeholder="ショップ名">
  <input type="hidden" name="blog[]" value="name">

  <input type="text" name="code" value="" placeholder="shopname">
  <input type="hidden" name="blog[]" value="code">

  <input type="hidden" name="config_set_id" value="1">
  <input type="hidden" name="blog[]" value="config_set_id">

  <input type="hidden" name="status" value="open">
  <input type="hidden" name="blog[]" value="status">
  <input type="hidden" name="domain" value="%{DOMAIN}">
  <input type="hidden" name="blog[]" value="domain">
  <input type="hidden" name="indexing" value="on">
  <input type="hidden" name="blog[]" value="indexing">

  <input type="submit" name="ACMS_POST_Blog_Insert" value="店舗作成"
    class="acms-admin-btn-admin acms-admin-btn-admin-primary" onclick="javascript:return confirm('新規店舗子ブログを追加します。よろしいですか？')">
</form>
<!-- END_IF -->
@endsection

こんな感じに設定します。4.5行目の 2 は /shop/ の ブログID になりますので、環境によって変わってきます。また、13行目の name="config_set_id" value="1" についても、店舗用のコンフィグセットID が 1 なのでこのような設定にしてあります。

誰にでも思いつく簡単な管理画面の実装になります。 a-blog cms の管理画面のカスタマイズは、簡単な HTML をどう書くかだけになります。

オマケ：グローバルカテゴリーを紹介

https://www.appleple.com/shop/ のカテゴリー設定で、

のように設定をするとします。 a-blog cms の グローバル化 のチェックは下層の子ブログで利用できるようにする設定 になります。店舗毎に自由にカテゴリーを設定するのではなく、店舗毎のブログの1つ上の階層でカテゴリーを作ることで子ブログを作成するだけで、https://www.appleple.com/nagoya/news/ という「お知らせ一覧」のページを作ることができるようになります。

このグローバルカテゴリーがあることで、上の階層で店舗の news をまとめた一覧を表示させることが簡単に行うことができます。

a-blog cms の設定をコンフィグと呼び、その設定はブログ単位に設定をすることができます。その設定に名前をつけて複数管理したり、その設定を共有したりすることができるのが「コンフィグセット」です。

このコンフィグセットができた事から、同じ設定を複数の子ブログで設定が楽になったりしていますが、1つしかコンフィグを利用しないような時にも現在は、このコンフィグセット管理の画面を表示させて「このブログの初期コンフィグ」をクリックして「コンフィグ管理」の画面を表示させる必要があります。

テンプレートのカスタマイズだけで1ステップ減らすには

以下の 3つを行うことで実現が可能になる。

• コンフィグセットを作っていない時にはコンフィグ管理を表示
• コンフィグセットが作ってある時にはコンフィグセット管理を表示
• コンフィグ管理の画面に（コンフィグセットの作成）ボタンを追加

これらの実装を考える際には、3つのファイルをカスタマイズします。この実装をする際にやるべき事は「このブログの初期コンフィグ」以外の行が無い時に「コンフィグ管理」にリダイレクトするということです。

コンフィグセット管理のテンプレートをカスタム

themes/system/admin/config/set/index.html を自分のテーマの中に移設して修正します。使ってるモジュール名は Admin_Config_Set_Index というもののようです。

<!-- BEGIN_IF [<!-- BEGIN_MODULE Admin_Config_Set_Index --><!-- BEGIN config_set:loop -->{name}<!-- END config_set:loop --><!-- END_MODULE Admin_Config_Set_Index -->/em] --><!-- BEGIN_SetRendered id="redirect" --><meta http-equiv="refresh" content="0; URL=%{HOME_URL}bid/%{BID}/admin/config_index/"><!-- END_SetRendered --><!-- END_IF-->

どこでもいいので、このページの中に上記の1行を追加してみましょう。

1. Admin_Config_Set_Index の config_set:loop を繰り返し {name} を表示させる。
2. 上記の表示結果に値が何かあるかを IFブロックで判定
3. <meta http-equiv="refresh" content="0; URL= ... でリダイレクト用のタグを書く
4. SetRendered id="redirect" でメタタグを保存して消す

という流れで1つ目のファイルの修正が完了です。

管理画面のテンプレートファイルをカスタム

テーマの中に admin.html があれば、それを無かったら themes/system/admin.html を自分のテーマの中に移設して修正します。

@section("admin-meta")
@parent
<!-- GET_Rendered id="redirect" -->
@endsection

これで、コンフィグセット管理のテンプレートを表示した時の SetRendered id="redirect" があったら、その部分がこちらに移動してきます。

結果、リダイレクト処理が動くことになります。

最後に（コンフィグセットの作成）ボタンを追加

この状態だと、コンフィグセットが作れなくなってしまうのでコンフィグ管理のテンプレートファイル themes/system/admin/config/index.html にボタンを追加します。ボタン自体は themes/system/admin/config/set/index.html にあるものをそのまま持ってきたらいいでしょう。

<!-- BEGIN_MODULE Touch_SessionWithAdministration -->
<form action="" method="post" class="acms-admin-margin-bottom-small clearfix">
  <input type="hidden" name="bid" value="%{BID}" />
  <input type="hidden" name="admin" value="config_set_edit" />
  <input type="hidden" name="edit" value="insert" />
  <input type="hidden" name="query[]" value="edit" />
  <button type="submit" name="ACMS_POST_2GET" class="acms-admin-btn acms-admin-btn-success acms-admin-float-right">
    <!--T-->コンフィグセットの作成<!--/T-->
  </button>
</form>
<!-- END_MODULE Touch_SessionWithAdministration -->

位置は、お好みで構いませんが、</header> の下くらいがいいでしょう。

最後に

これで、今回のコンフィグセットが作られていない時に、管理画面の「コンフィグセット管理」の画面を1つ飛ばして「コンフィグ管理」を表示させるカスタマイズは完了です。

a-blog cms の管理画面のカスタマイズは、簡単にテンプレートファイルを修正することで可能です。カスタマイズする人次第で管理画面は自由にカスタマイズが可能です。皆さんの a-blog cms は、どんなカスタムを行ってますか？

先日、ネットミーティングの中で「管理者じゃないとモジュールIDの設定を表から変更できないのが困っている」と相談がありました。本来は編集者権限を渡したいのに、この機能を使うために仕方がなく管理者を渡さないといけない状況とのことでした。

まず、管理者の時の表示としてはモジュールの右上に「モジュール」というリンクが表示されます。

しかし、編集者の時にはこの「モジュール」というものは出てきません。

この機能としては、管理者がモジュールIDの設定（条件設定・編集設定・カスタム設定）を変更するためのものなので「モジュール」という表示になっています。

サイトの運営をする人たちのためであれば「編集」というラベルでないと「モジュール」と書かれていても分からないかもしれません。

@include("/admin/module/setting.html")

中身を確認してみると

<!-- BEGIN_MODULE Touch_NotPreview -->
<!-- BEGIN_MODULE Touch_SessionWithAdministration -->
<!-- BEGIN module_setting -->
<!-- BEGIN_IF [{admin_module_mid}/nem] -->
<p class="{{class|default('acms-admin-module-edit')}}"><a href="#" class="js-module_management" data-bid="{admin_module_bid}" data-mid="{admin_module_mid}"><!--T-->モジュール<!--/T--></a></p>
<!-- ELSE -->
<p class="{{class|default('acms-admin-module-edit')}}"><a href="{admin_module_url}" class="js-dialog-btn js-link_no_rewrite"><!--T--><!--$1-->{admin_module_name}<!--/$1--> を編集<!--/T--></a></p>
<!-- END_IF -->
<!-- END module_setting -->
<!-- END_MODULE Touch_SessionWithAdministration -->
<!-- END_MODULE Touch_NotPreview -->

タッチモジュールで権限を見直してみる

Touch_SessionWithAdministrationモジュール で囲まれていることで 管理者のみ表示 されるという事になります。まず思いつく方法とすれば、このタッチモジュールを管理者の設定を編集者以上の設定 Touch_SessionWithCompilation に変えることが思いつきます。 場合によっては、管理者にだけ表示しているエリアを編集者以上に表示可能にするということで大丈夫かもしれませんが、権限の問題でこの方法では解決することができませんでした。

ショートカット機能を利用してみる

a-blog cms の管理画面には、各所に（★ ショートカットに追加）というボタンがあります。これを使うことで、ダッシュボードやショートカット一覧に管理画面をブックマークするようなことが可能になります。

フロント側から利用するという目的からすると解決にはなりませんが、どのような URL になるのか確認してみます。

モジュールID一覧から

http://localhost/bid/1/admin/module_edit/?mid=2&edit=update#acms_box2

ショートカット一覧から

http://localhost/bid/1/admin/module_edit/?mid=2#acms_box2

あれ？ 同じだった。予想では、ココが違っててショートカットの URL を使えばいいと思ったのですが...

ショートカット機能を利用してみる その2

このブログの記事では、全部終わってから結論だけ書くということではなく、どうやって実装するかを考えていく部分も共有すべく書いていますので、上記の2つはボツ案になっています。

ショートカット機能を利用してみる では、管理者で確認していたのですが、今回の目的である編集者の時で確認するべきでした。

モジュールID一覧 （メニューに無いので URL を直接）

http://localhost/bid/1/admin/module_edit/?mid=2&edit=update#acms_box2

この URL でアクセスすると 表示設定 は出てきますが、条件設定はデータが無く正常に保存することができません。

ショートカット一覧から

http://localhost/bid/1/admin/config_media_banner/?mid=2

URL が変わりました！ このURL の時には編集者でも情報を更新が可能になっています。管理者とは違い、編集者では条件設定を触ることができないので、編集者には 表示設定 のタブのみが表示されます。

a-blog cms しっかり権限によって管理画面が作られていることが確認できます。

暫定対応を考える

@include("/admin/module/setting.html") の代わりに、以下のようなコードを書くことで Media_Banner モジュールのところだけ希望の動きをするようになります。

develop ・ utsuwa テーマの中で使われている実装を見つけました。

<!-- BEGIN_MODULE Touch_SessionIsCompilation -->
<p class="acms-admin-module-edit acms-admin-module-edit"><a
    href="/bid/{admin_module_bid}/admin/config_media_banner/?mid={admin_module_mid}"
    class="js-dialog-btn js-link_no_rewrite">編集する</a></p>
<!-- END_MODULE Touch_SessionIsCompilation -->

config_media_banner の部分が、Navigationモジュールの時には config_navigation であったりする必要があるのですが、この部分を手動で書かないとうまく動かないです。各モジュールの共通変数でモジュール名を表示させるものがあったらいいのですが...

解決編

admin_module_mid の記述をしているプログラムを探して、admin_module_url という便利な変数を見つけました。これを利用すると、そのまま欲しい URL が生成してくれるようです。

ということですので /admin/module/setting.html のファイルをカスタマイズすることにし、まずは利用するテーマの中に setting.html をコピーします。

@include("/admin/module/setting.html")

そして Touch_SessionWithAdministration の下に、編集者のみ表示の Touch_SessionIsCompilation のモジュールを追加し、{admin_module_url} の変数を活用した記述を追記します。

<!-- BEGIN_MODULE Touch_NotPreview -->
<!-- BEGIN_MODULE Touch_SessionWithAdministration -->
<!-- BEGIN module_setting -->
<!-- BEGIN_IF [{admin_module_mid}/nem] -->
<p class="{{class|default('acms-admin-module-edit')}}"><a href="#" class="js-module_management" data-bid="{admin_module_bid}" data-mid="{admin_module_mid}"><!--T-->モジュール<!--/T--></a></p>
<!-- ELSE -->
<p class="{{class|default('acms-admin-module-edit')}}"><a href="{admin_module_url}" class="js-dialog-btn js-link_no_rewrite"><!--T--><!--$1-->{admin_module_name}<!--/$1--> を編集<!--/T--></a></p>
<!-- END_IF -->
<!-- END module_setting -->
<!-- END_MODULE Touch_SessionWithAdministration -->
<!-- BEGIN_MODULE Touch_SessionIsCompilation -->
<p class="acms-admin-module-edit acms-admin-module-edit"><a
    href="{admin_module_url}"
    class="js-dialog-btn js-link_no_rewrite">編集する</a></p>
<!-- END_MODULE Touch_SessionIsCompilation -->
<!-- END_MODULE Touch_NotPreview -->

この時には、モジュールという言葉を知らない編集者の方にも伝わりやすいように「編集する」というラベルにしておくことでバナーを編集できるんだね。ってことが伝えやすくなります。

これで、編集者権限でモジュールの表示設定が可能になります。この実装をすることによって全てのモジュールの表示設定が編集者で可能になってしまいます。

勝手に Entry_Summary の設定を触られたくないということもあるかもしれませんので、その際にはバナーのモジュールとか触って大丈夫なところだけ /admin/module/setting.html ではなく、/admin/module/editor_setting.html のように違うテンプレートを読み込むような実装をした方がいいこともあるかもしれません。

1時間前には、この実装は標準にするべきでは！っと思って書いていましたが、最終的なこの時点での結論としては、やはりカスタマイズで実装した方がいいかもに変わっています。皆さんは、どう思われますか？