5ページ目   #ablogcms

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

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

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

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

• 動画で基礎から学ぶ a-blog cms エントリー編
• 動画で基礎から学ぶ a-blog cms ユニット編
• 動画で基礎から学ぶ a-blog cms カスタムフィールド編
• 動画で基礎から学ぶ a-blog cms テーマ編
• 動画で基礎から学ぶ a-blog cms テンプレート編
• 動画で基礎から学ぶ a-blog cms モジュール編
• 動画で基礎から学ぶ a-blog cms モジュールID編
• 動画で基礎から学ぶ a blog cms フォーム編

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

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

• 静的HTMLサイトからCMSのテーマを作ってみよう 1「エントリー編」
• 静的HTMLサイトからCMSのテーマを作ってみよう2「カスタムフィールド編」
• 静的HTMLサイトからCMSのテーマを作ってみよう 3「モジュール編」
• 静的HTMLサイトからCMSのテーマを作ってみよう 4「子ブログ編」

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

• a-blog cms のメンテナンスポリシー
• 2.11.x のバグフィックス版のリリースが終わります
• 2023年度になると 2.8.x のセキュリティ対応が終了に
• ライセンスのバージョンアップ費用について
• PHP のバージョンについて
• アップデートに注意が必要な時があります
• パッチバージョンは最新にしよう！

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

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

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

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

こちらを確認すると、今日の段階では 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/ からバージョンアップは簡単にできます。ぜひ、ご利用のバージョンで新しいパッチバージョンがリリースされていたら（今すぐ更新）から新しいバージョンをご利用ください。

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

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 のテキストユニットでの引用

さらに脱線気味に 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/1510118505139798019 を https://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 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 エントリーのタグ入力画面を元に戻す方法 も紹介していますので、あわせてご覧ください。

現在の a-blog cms で、あるユーザーが書いた記事を表示させようと思った時、例えば uid が 10 のエントリーを表示させる際には以下のように書きます。

https://www.domain.com/uid/10

でも、 どちらかと言えば数値で表現するのではなく、以下のような URL で表現したいと思うのではないかと思います。

https://www.domain.com/user/usercode.html 

残念ながら現在の a-blog cms の URLコンテキストには user が用意されておりません。この URLコンテキストの修正は影響範囲が大きいので、なかなか追加することが難しい状況です。追加することで user がブログやカテゴリーで利用できないことになりバージョンアップ動かなくなるサイトが出てしまうからです。

でも、なんとかしたい！という要望をクリアするため「ユーザーコード＋".html"」からユーザーの情報や、ユーザーの書いたエントリーの情報などを表示できるような実装を考えてみます。

最終的には、ユーザー情報だけでは無理っぽく、カテゴリーやエントリーを作ったりする必要があるので、スマートではありません。ゴメンナサイ。

カスタムグローバル変数

まずはオリジナルのグローバル変数を作ります。オリジナルグローバル変数の作成についてはサポート対象外ではありますが、 extension/acms/Hook.php の function extendsGlobalVars を以下のような感じで書いてください。

public function extendsGlobalVars(&$globalVars)
{
    if (EID) {
        $ecd = \ACMS_RAM::entryCode(EID);
        list($ucd) = explode('.', $ecd);

        if ($ucd) {
            $sql = \SQL::newSelect('user');
            $sql->addSelect('user_id');
            $sql->addWhereOpr('user_code', $ucd);
            $sql->addWhereOpr('user_pass', '', '<>');
            $sql->addWhereOpr('user_blog_id', BID);
            $sql->addWhereOpr('user_status', 'open');
            if ($uid = \DB::query($sql->get(dsn()), 'one')) {
                $globalVars->set('CUSTOM_USER_ID', $uid);
            }
        }
    }
}

これにより %{CUSTOM_USER_ID} で UID が扱えるようになります。

config.server.php を設定

extension/acms/Hook.php をカスタマイズしている場合には、config.server.php の HOOK_ENABLE を 1 に設定します。

define('HOOK_ENABLE', 1);

モジュールID の設定で %{CUSTOM_USER_ID} を利用する

モジュールとしては、Entry_Summary とか User_Search など uid で情報を取得するようなモジュールを選択します。

モジュールID の条件設定の引数の鉛筆マークをクリックすると入力フォームが表示されます。ここにはユーザーIDを数値で設定したり、グローバル変数を設定ができます。そこに今回の %{CUSTOM_USER_ID} を入力します。

最後に /user/usercode.html を表示できるようにするには

ちょっと、最初にも書きましたが、無理矢理でゴメンナサイ。

/user/ はカテゴリー で、usercode.html はエントリー を作ります。こうすることで、/利用しているテーマ/user/_entry.html のテンプレートが表示できるようになります。

こうすることで、/利用しているテーマ/user/index.html で表示したいユーザーの一覧ページもできます。

ユーザーが管理画面上で usercode を書き換えると、エントリーコードと紐付かないことになりますので注意が必要です。

不特定多数のユーザーがいるようなサイトではなく、ユーザーを作った時点で手動でエントリーも作れるような規模の案件であれば使えるのではないかと思います。いかがでしょうか。

2021年12月24日 11:00 に久しぶりに a-blog cms の新しいバージョンがリリースされました。前のバージョン 2.11.0 からで2年ぶり、今回は 3.0 という事になるので 2.0 からすると 8年ぶりのメジャーバージョンアップになります。

動作環境

一番大きい部分としては、ionCube の廃止 でしょう。弊社としては、2004年から 17年お世話になっていた ionCube Encoder と Loader ですが利用しないで配布をする事になりました。

次に、動作PHP のバージョンを 7.2.5 から という事で、これまでの 5.3 - 7.1 の環境では動作しない事になります。

テンプレート

1.7 から 2.0.0 になった時には、管理画面が一新され、テンプレートの互換性が無くなりアップデートする必要がありバージョンアップには少なからず人的コストがかかってしまう状態でした。

そして、今回の 2.11.42 から 3.0.0 のアップデートではテンプレートの互換性は保っていますので アップデート時にテンプレートの改修の必要はありません。 変わってないので、このテンプレートで紹介する必要はなかったのですが、その点はお伝えしたかったので書いています。

セッションやキャッシュ管理

これまではデータベースにページのキャッシュデータを蓄積することを行っていました。10年前と今ではディスクのアクセス速度が随分変わっています。皆さんのパソコンも HDD から SSD に変わって劇的に読み書きが速くなっていることはご存知だと思います。

そういう理由で DB へのキャッシュではなく、ファイルキャッシュなどで行うような方針転換 が行われました。さらにサーバーの環境によっては、APCu や Redis も利用が可能です。この辺りの設定は .env というファイルに設定されています。

XSERVER や さくら であれば、APCu が利用できるようになっており、デフォルトの設定では APCu が優先で利用し、使えない時にはファイルキャッシュを利用するようになっていますので、あまり気にしないでインストールしたままの設定で大丈夫です。

ダッシュボードのキャッシュサイズを表示していた場所が以下のように変わっています。

これまでの ページキャッシュ だけでなく、テンプレートキャッシュ や コンフィグキャッシュ・カスタムフィールドキャッシュ など多くの情報を都度データベースに取りにいくことなく、キャッシュで処理するようになったことからデータベースへのアクセスを劇的に減らすことができるようになりました。

これにより何倍も速くなりました。正確な数字で出してみたいので社内の誰かにお願いしてみようと思っています。

また、あわせてセッション管理も独自にDBで行っていたものを辞めています。これも DBアクセスを減らす1つでもありますね。

エントリー単位のエクスポート・インポート

これは実装担当者は、きっと喜んでくれると思います。a-blog cms で作ったサイトをリニューアルするような案件も10年もやっていると多くなり、作っているサイトと並行して運用しているサイトに情報が増えてきます。

本番公開前に、 運用サイトから部分的にエントリー＋メディアなどをエクスポートし、作っている公開予定のサイトにインポートができるようなる という10年欲しかった機能が搭載されました。

Webhook機能と API機能

まずは Webhook については、現状は エントリー（作成・削除・更新・公開）/ フォーム送信 の際に外部サーバーに情報を POST できる ようになりました。どう活用していくのか、利用者次第な部分ではありますので、活用事例を今後 a-blog cms zoomup などで聞けたらと思っています。

私としては、次はユーザー（作成・削除・更新）の追加が必要だと思っており、まだまだ拡張しないといけない部分になりますので、ご意見・ご要望などをお聞かせください。

API機能というところでは、a-blog cms ユーザーの人に分かりやすく伝えるとするのであれば「モジュールID の変数をテンプレートを用意せず JSON出力できる」という方が伝わりやすいかもしれません。

最後に

私は、この数年「3.0 をリリースする事は無い。新しい CMS を作るよ」とイロイロな人に言ってたと思います。でも、3.0 出ちゃいましたね。

a-blog cms を時代に合ったカタチに進化させていく必要があり、今後も安心して提案・活用してもらえるよう頑張っていきます。

また、新しい CMS の開発についても考えていないわけではありませんので、そちらも何か進捗があればブログに書くというよりは Twitter(@kazumich) に Tweet する感じで情報は漏らしていきます。お楽しみに！