コンテンツの読み込みに時間がかかっています

4ページ目   #ablogcms

コンフィグセットを利用していない時にコンフィグセット管理を表示させないカスタマイズを考えてみる

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

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

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

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

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

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



コンフィグセット管理 http://localhost/bid/1/admin/config_set_index/
コンフィグ管理 http://localhost/bid/1/admin/config_index/

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

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 は、どんなカスタムを行ってますか?



編集者権限でバナーモジュールをフロント側で編集できるような UI を使えるような実装を考える

先日、ネットミーティングの中で「管理者じゃないとモジュール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時間前には、この実装は標準にするべきでは!っと思って書いていましたが、最終的なこの時点での結論としては、やはりカスタマイズで実装した方がいいかもに変わっています。皆さんは、どう思われますか?


今年用意した初心者のための a-blog cms コンテンツ

まずは 8つの 5分くらいの動画「動画で基礎から学ぶ a-blog cms」で 40分勉強した後で、4つのハンズオン「静的HTMLサイトからCMSのテーマを作ってみよう」をやってみてもらいたい。

これで何となく a-blog cms でオリジナルのテーマを作る方法が分かるようになるんじゃないかと思っているが、どうでしょうか? 分かりにくい部分があったら教えて欲しいです。


動画で基礎から学ぶ a-blog cms

初心者向けのオンライン勉強会については、以前は何も知らない人向けに2時間ほどライブでオンライン勉強会を行なっておりました。そこを今年は8つの短編動画を用意して、まずは動画をみてください。という形式に変えることにしました。

また、毎月 a-blog cms live というオンラインイベントを開催し、そのアーカイブも公開していますので、そちらもよかったらご覧ください。そして、a-blog cms 公式 YouTube チャンネル のチャンネル登録もお願いします。

静的HTMLサイトからCMSのテーマを作ってみよう



a-blog cms のバージョンとアップデートについて

a-blog cms Advent Calendar 2022 の 16日目の記事になります。今回は、a-blog cms のバージョンについて少し書いてみようと思います。

a-blog cms のメンテナンスポリシー

以前は a-blog cms は 2.10.0 がリリースされると 2.9.x でバグが見つかっても、2.10.x の最新版を利用をお願いし、何かあれば最新版へのアップデートが必要な状態でした。

しかし、3年前の 2019年12月 2.11.0 のリリースタイミングで、メンテナンスポリシーを公表し、バグフィックスは 2年セキュリティーフィックスは 5年 と設定され、最長5年はセキュリティー上の問題が見つかった時に新しいバージョンをリリースする体制となりました。

以下にサポートコンテンツにある メンテナンスポリシー の表を転載しておきます。



バージョン 最終バージョン マイナーバージョンリリース日 不具合修正(期限日) セキュリティ修正(期限日)
1.7 1.7.0 2013/06/24 - -
2.0 2.0.1.1 2013/12/18 - -
2.1 2.1.1.4 2014/06/23 - -
2.5 2.5.1.3 2015/04/23 - -
2.6 2.6.1.4 2015/12/25 - -
2.7 2.7.34 2017/03/30 - -
2.8 セキュリティ修正のみ 2018/03/26 2020/03/26 2023/03/26
2.9 セキュリティ修正のみ 2018/10/09 2020/10/09 2023/10/09
2.10 セキュリティ修正のみ 2019/02/28 2021/02/28 2024/02/28
2.11 メンテナンス中 2019/12/17
2022/12/17
2024/12/17
3.0 メンテナンス中 2021/12/24 2023/12/24 2026/12/24

こちらを確認すると、今日の段階では 2.8.x / 2.9.x / 2.10.x がセキュリティフィックス対応のバージョンとなっており、2.11.x / 3.0.x がバグフィックス対応のバージョンである事が分かります。ちなみに、2.11.x については 3.0.0 のリリースに時間がかかった事からバグフィックスの期間を特別に2年から3年に変更されておりました。

2.11.x のバグフィックス版のリリースが終わります

今回のエントリーの一番伝えたいところになりますが、実は明日が 2022/12/17 でバグフィックス対応が終わる日となっております。まだセキュリティ上危険だと判断した修正については 2024/12/17 まで続きますが、バグが見つかったとしても 3.0.x しか修正されなくなります。

そんな今日ですが、a-blog cms Ver. 2.11.56 がリリースされました。(リリースノート)今後は セキュリティーフィックス で 2.11.57 、2.11.58 などはリリースされるので最後のバージョンではありませんが、どこかのタイミングで、3.0.x へのアップデートもご検討ください。


2023年度になると 2.8.x のセキュリティ対応が終了に

また、2.8.x を利用されているサイトについては、今年度末までは大丈夫ではありますが、来年度になるとセキュリティ上問題があっても新しいバージョンはリリースされない事になります。正確な日程としては 2023/03/26 が最終日になります。

今は、セキュリティ上修正したいところが見つかった時には、2.8.x / 2.9.x / 2.10.x / 2.11.x / 3.0.x の 5つのバージョンをアップデートしています。多くのバージョンを並行してサポートしていくコストもありますので、この点はご了承いただきご利用ください。

ライセンスのバージョンアップ費用について

a-blog cms は 1.0 から 2.10 までバージョンアップに費用をいただいておりませんでしたが、上記のように古いバージョンもしっかりサポートするためにアップデート時に 11,000円(税込) の費用をいただく事になりました。

a-blog cms は現在、セマンティックバージョニングを採用しております。上記のアップデートに費用がかかるものは、メジャーバージョンアップとマイナーバージョンアップというところになり、パッチバージョン については費用がかかりません。

また、アップデートについては1年間分の権利として提供していますので、今日 3.0.x にアップデート費用をお支払いして、1年以内の 2023年夏に 3.1.x にアップデートする際には、追加で費用はかかりませんのでご安心ください。


PHP のバージョンについて

バージョンアップを考えないといけない時の一番多くは、利用している PHP についてサーバー側の PHP サポート終了のタイミングでしょう。

  • PHP 7.4.x対応 については、Ver. 2.11.15 以降である必要があります。
  • PHP 8.0.x対応 については、Ver. 3.0.0 以降である必要があります。
  • PHP 8.1.x対応 については、Ver. 3.0.12 以降である必要があります。

2.11.x の場合については、ionCube Loader の設定も変更が必要になりますので注意ください。3.0 から ionCube Loader が廃止されているのでアップデートが少し楽になりましたね。

アップデートに注意が必要な時があります

12/10 の a-blog cms Advent Calendar 2022 すずきカレー さんのポッドキャスト「a-blog cms★のんびりラジオ 2」の中でも話題に出してもらえていた「各バージョンのアップデート変更点まとめ」を参考にしてください。


バージョンアップをしている際に、前のバージョンとの互換性がなく、設定の修正やテンプレートの修正が必要になる事があります。

クライアントさまに、11,000円の費用がかかる事に加えて、少し作業やチェックが必要になる分もコストを考えつつ、アップデートをご検討ください。この点はご迷惑をおかけしますが、よろしくお願いします。

パッチバージョンは最新にしよう!

管理画面 /bid/1/admin/update/ からバージョンアップは簡単にできます。ぜひ、ご利用のバージョンで新しいパッチバージョンがリリースされていたら(今すぐ更新)から新しいバージョンをご利用ください。

管理画面上でも修正点は確認できますし、リリースノートのページ にもアップデート内容は掲載しております。



a-blog cms で Tweet の引用をブログにお手軽に実装する方法

https://publish.twitter.com/ を一度ご確認ください。上記のようなサイトがあります。以前は Twitter の Widgets が設定画面にあって、そこでコードをコピペするような感じで提供されていたが、いつの日か無くなってしまっていたと思っていたのですが、いつの間にか復活しておりました。



機能としては、Embedded Tweet / Embedded Timeline / Twitter Buttons の3種類が用意されています。 Buttons はクリックすると 5種類あるみたいですが、今回は全く確認していない。 Timeline も便利に使えそうではあるが、今回は Embedded Tweet のお話です。

a-blog cms の標準的な引用ユニット


blogテーマでは、デフォルトは表示されていないが「引用ユニット」をオンにすると以下のように URL を設定できるようになっている。そこで、https://www.a-blogcms.jp を設定すると、そのページの OGP情報を取得して表示してくれる便利な機能だ。


a-blog cms のテキストユニットでの引用


一般的なテキストの引用については、こんな感じで書くと <blockquote> 〜 </blockquote> のタグで囲まれた文章となる。

さらに脱線気味に cite属性を追加する方法

管理画面 / コンフィグ / エントリー / 編集設定 / テキストタグセレクト の3つ目の入力欄に「引用元URL」と設定します。


上記の設定を行うと以下ような感じで引用元URLを設定できるユニットに進化します。


あとは blog/include/unit.html@section(text-unit) を持ってきて blockquoteブロック をカスタマイズします。3つ目の入力欄の変数は {extend_tag} となっています。

<!-- BEGIN blockquote -->
<div class="entry-container">
<blockquote{class}<!-- BEGIN_IF [{extend_tag}/nem] --> cite="{extend_tag}"<!-- END_IF -->>
{text}[raw|nl2br]</blockquote></div><!-- END blockquote -->

本題の引用ユニットに Embedded Tweet 機能を追加

例えば https://twitter.com/ndrf_kazumich/status/1510118505139798019https://publish.twitter.com/ に設定します。

<blockquote class="twitter-tweet">
<p lang="ja" dir="ltr">今日は朝早起きしたので、a-backup を作り直している。処理を簡単にして短い時間で処理が完了できるようにすることを第一の目標とし、2つ目の目標として設定項目を減らして簡単に使えるようにする。テーマの設定を DB を確認して出来るようになった。 
<a href="https://t.co/5IFYxsPJDq">pic.twitter.com/5IFYxsPJDq</a></p>&mdash; 山本一道@アップルップル (@kazumich) <a href="https://twitter.com/kazumich/status/1601727082824105985?ref_src=twsrc%5Etfw">December 10, 2022</a>
</blockquote> 
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

こんな事が書ければ OK な事がわかります。

実は blog テーマは、https://platform.twitter.com/widgets.js が最初から読み込まれているので、<script> タグは消しても動作します。

オリジナルテーマで実装する際には widgets.js が必要になります。必要な時に読み込むようにカスタマイズするには「SetRendered と GET_Rendered を活用した「円グラフのカスタムユニット」を作ってみよう」を参考にしてください。

徐々に情報を減らして動くかを調べてみたところ、class="twitter-tweet" の中の <a> の href 属性に Twitter の URL があるだけで動作する事がわかりました。

テンプレートをカスタマイズしていきます

blog/include/unit.html には最初から @section(quote-unit) がカスタマイズして設置されていました。そこの一部が以下のように書かれています。

(略)
<!-- BEGIN html:veil -->
 {quote_html}[raw]
<!-- END html:veil -->
<!-- BEGIN_IF [{quote_title}/nem/] -->
<blockquote class="quote">
(略)

<-- END html:veil --> の後ある IFブロックを少し修正し、以下のようにします。

(略)
<!-- BEGIN html:veil -->
 {quote_html}[raw]
<!-- END html:veil -->
<!-- BEGIN_IF [{quote_url}/lk/twitter.com] -->
 <blockquote class="twitter-tweet">
  <a href="{quote_url}">Tweet内容をtwitter.comで確認する</a>
 </blockquote>
<!-- ELSE_IF [{quote_title}/nem/] -->
<blockquote class="quote">
(略)

<blockquote>タグclass="twitter-tweet" をつけ、その中の <a>タグ に Tweet の URL を設定するだけOKです。


と設定すれば、以下のような感じになります。


引用機能の隠れた機能?

ローカルでテストしつつ、このブログにも実装しておこう!って作業をしたらこの設定をしないでも、引用ユニットに Twitter の URL を設定するだけで同じものが表示されてしまいました。

コンフィグの設定で Twitter API を設定すると OGP の代わりに、今回の https://publish.twitter.com/ の結果と同じタグを twitter.com から API 経由で持ってきてくれることを忘れておりました。これも、せっかくなのでお伝えしておきます。


a-blog cms の TimePicker をアナログ時計UI にする方法

これは a-blog cms Advent Calendar 2022 4日目の記事です。

a-blog cms の標準の時刻を設定する UI については、以下のような Flatpickr というライブラリを利用しています。 直接 input 要素の入力欄にキーボードから時刻を入れることもできますがマウスクリックで数値の増減をしようとすると随分小さなボタンをクリックする必要が出てきます。


そんな事から Flatpickr 以外の JavaScript ライブラリを探してみる事にし、 Google で timepickerで画像検索 してみるとイロイロな UI を見つける事ができます。


2016年のブログの記事になりますが より直感的な時間入力のUIを考える | UX MILK の中で ClockPicker が紹介されていますが、9年前で更新が止まっていることから似たものを探し、最終的には jquery-clock-timepicker.js にたどり着きました。

Android の時間入力 UI も同様の時計なのを、今回の実装後に知りました。

a-blog cms の管理画面に実装する

利用するライブラリが決まったことから、a-blog cms の中に実装をしていきます。

エントリーの時刻入力フォーム部分になりますので、system/admin/entry/entry.html を複製して利用しているテーマにコピーをします。

このファイル自身は @extends("/admin/_layouts/entry/edit.html") と書かれているファイルなので実体は別のところですね。新規と修正の @section を修正する必要があるのも注意が必要です。

@section("apply-date")
*省略*
<input type="text" name="time" value="%{NOW_TIME}" size="12" id="entryTime" class="acms-admin-form-width-full js-timepicker">
*省略*
@endsection

@section("reapply-date")
*省略*
<input type="text" name="time" value="{time}" size="12" id="entryTime" class="acms-admin-form-width-full js-timepicker">
*省略*
@endsection

class="js-timepicker" となっている部分を、今回 class="js-clockpicker" に修正する事にします。 あとは、jquery-clock-timepicker.js を読み込む必要がありますが、今回は管理画面の中だけで大丈夫なので admin/entry/field.html の中で読み込む事で対応します。

<script src="/js/jquery-clock-timepicker.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
  $('.js-clockpicker').clockTimePicker({autosize:true,popupWidthOnDesktop:300});
});
</script>

スタイルを少し調整しないと今の時刻を設定するボタンが離れてしまっているので


admin/entry/field.html に CSS の調整を追加します。

<style>
.entryFormTable .entryFormDateBlock {
    width: 130px;
}
</style>

アナログ時計UI の実装後

9:00 の 9 をクリックすると時間側の UI が表示されます。


その後、分 の UI に切り替わります。また、INPUT 要素の 分 をクリックすると、こちらが表示されるようになっています。


今回の実装で行ったものを以下からダウンロードできるようにしていますので、blog テーマであれば入れるだけ、それ以外は参考にしてもらえば簡単に実装できる事でしょう。


12KB

おまけ1: ブラウザにお任せする

デフォルトの管理画面のコードでは input type="text" name="time" となっておりますが、input type="time" name="time" とし、class の設定から js-timepicker などを消す事でブラウザにお任せする事ができます。


上は Mac の Chrome のキャプチャになります。Edge も同様の UI が出てきます。 残念ながら Mac の Safari は未対応でしたが、iOS の Safari は以下のように対応されているようです。


ブラウザでサポートしているような時には、JavaScript のライブラリを動かさないようにするように今後は検討していく必要がありそうです。

おまけ2:他のエントリー投稿フォームの UI のカスタマイズ

私の個人ブログには、エントリー管理画面のカスタマイズについて a-blog cms 2.10 エントリーのタグ入力画面を元に戻す方法 も紹介していますので、あわせてご覧ください。