コンテンツの読み込みに時間がかかっています
a-blog cms Training Camp 2024 は、ユーザーや開発者が一堂に会し、活用事例や次のバージョンの新機能を学び、情報共有を行うためのイベントとして2024年11月15日に名古屋国際センタービルで開催されました。
昨年は会場に集まっての参加とリモート環境でもライブ配信でも参加できるハイブリットイベントとして開催しましたが、今年はリアルのみという事で参加者が集まるか心配もありましたが、北は北海道から南は九州まで、20都道府県から55人の参加者が集まりました。5.6年ぶりに会う人たちも多く、会場では「お久しぶりです」の挨拶が各所から聞こえてきていました。
今回の Training Camp は、2010年から始まり22回目の開催となり、 #合宿 のハッシュタグ で全参加レポートが書いていますので、昔から参加されている方は懐かしい写真とかチェックしてみてください。
今回、この a-blog cms で作られているブログを htmx を利用して SPA(Single Page Application) にする実験をしてみましたので、その点について紹介をしてみます。
htmx という JavaScript のライブラリが、2023 JavaScript Rising Stars : Front-end Frameworks で 2位 になっているが、日本ではあまり聞かない。私自身も最近知ったばかりだが面白そうなので、いろいろ実験を始めたところです。
<https:>
このブログ記事は、2024年1月24日に、Chat GPT 4 に以下の手順で書いてもらった文章になります。以下のようなプロンプトを書いています。番号1つ分を書くことで Chat GPT 4 から返答があり、続けて次の番号のテキストで返信しました。
数年前のインターンの課題として「Facebook の複数枚写真をアップロードした際に、写真をレイアウトしてくれる JavaScriptライブラリを作ってみよう！ 」というお題を出していた時期があります。
これはサンプルの1枚画像です
これは a-blog cms Advent Calendar 2023 25日目の最終日の記事になります。昨日は、弊社アップルップルの CTO である伊藤さんの 次世代フロントエンドツール「Vite」を a-blog cms で利用するためのコツ でした。
最近の CMS としては ノーコード や ヘッドレス などが流行っていますが、弊社のプロダクトである a-blog cms は中間地点の ローコードCMS という位置付けかなと思っています。 ウェブ制作のお仕事をされている人が作りやすく、利用者は使いやすいシステムを提供しています。
アドベントカレンダー最終日であり、年末ということでもありますので、この1年を振り返ってみたいと思います。
2023年11月17日(金) に a-blog cms Training Camp 2023 を4年ぶりのリアル開催に加え、コロナ禍でオンラインイベントが普通になったこともあり、リアルに加えライブ配信も合わせたハイブリット開催というカタチでの開催となりました。
2023年9月14日に無事 a-blog cms Ver. 3.1.0 をリリースすることができました。本来は 2023年春頃にリリースする予定でいましたが、最終的なパッケージが用意されたのが 8月末で、最低限のドキュメントの準備などがあり半月後のリリースという事に。
詳しくは、開発ブログ に 8つの記事で書かれています。新機能 15、変更点 32、バグフィックス 17 で合計 64 と多くの追加を変更を行なっています。
これは嬉しい！ って思う改善は、どれになりますか？ X ( 旧Twitter ) などで #ablogcms のハッシュタグをつけて教えて欲しい。
a-blog cms のユーザーアイコンは、何も設定しないと user0.png 〜 user9.png で uid の下一桁で 10色のアイコンが自動で振られます。ユーザーの管理画面でアイコンを設定する人も少なくデフォルトのアイコンのままってことが多いんじゃないかと思ったりする部分を識別しやすいように自動でアイコンが設定されたらいいなって思って今回のカスタマイズ「Gravatarのアイコンを反映してみる」という事にチャレンジしてみました。
Wikipedia によると
Gravatar（グラバター）は、サイトを越えて利用できるアバターを作成できるサービス。トム・プレストン・ワーナーが開発した。2007年にAutomatticが買収し、ブログのプラットフォームであるWordPress.comに統合されている。
と書かれている。いつ作られたがかかれてないですが、今は WordPress.com のアカウントと統合されているのかな？
歴史を感じますね。私の SNSアイコンは 3世代あり、それがこの Gravatar には登録されているようです。 （今のヤツ、ルップルちゃん付き、mixi にも設定されているアイコンの順）
ちょっと説明を全部書くのが難しそうなので、demo@beginner でテーマを用意してみました。まずはダウンロードください。
管理画面の左側のアイコン部分になります。
（エントリー作成）ボタンの上にあるアイコン部分の設定になります。
ユーザー一覧のアイコンのテンプレートになります。
ユーザー詳細ページのアイコンのテンプレートになります。少し悩むのが、Gravatar のものなのかを表示させることができないことです。苦肉の策として、Gravatar のアイコンの時には画像を削除するチェックボックスを表示させないようにしました。この画像は消せないという意味になります。
themes_system__layout のディレクトリにある admin.html は、themes/system/_layout を上書きするようにファイルになります。
3.0.28 のファイルに @section を追加しています。 将来的には今後のバージョンに入ったらいいなって思って @extends するように書いています。
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ハッシュ化することができます。
kazumich@appleple.com が 28f266d6006293d4b53e365e3f3b57ee になります。
ついでに %{GRAVATAR} に true を設定しておいて、場合によってはこの部分を消すとテンプレート上で Gravatar を使わない設定になるように IFブロックを書いてあります。
extension/acms/Hook.php をカスタマイズする場合には以下の設定 HOOK_ENABLE を 1 に設定を変更する必要があります。
define('HOOK_ENABLE', 1);上記の実装をコピーすると、Gravatar のアイコンが表示されるようになります。会員制サイトなどには、効果のある実装になるのではないかと思います。 次にリリースする Ver. 3.1 では会員制サイトの機能のテコ入れをしていますので、もしかするとコレも標準的な実装になるかもしれませんね。
Ver. 3.1 で themes_system__layout/admin.html の修正分が反映されることになりました。
まずは 8つの 5分くらいの動画「動画で基礎から学ぶ a-blog cms」で 40分勉強した後で、4つのハンズオン「静的HTMLサイトからCMSのテーマを作ってみよう」をやってみてもらいたい。
これで何となく a-blog cms でオリジナルのテーマを作る方法が分かるようになるんじゃないかと思っているが、どうでしょうか？ 分かりにくい部分があったら教えて欲しいです。
初心者向けのオンライン勉強会については、以前は何も知らない人向けに2時間ほどライブでオンライン勉強会を行なっておりました。そこを今年は8つの短編動画を用意して、まずは動画をみてください。という形式に変えることにしました。
また、毎月 a-blog cms live というオンラインイベントを開催し、そのアーカイブも公開していますので、そちらもよかったらご覧ください。そして、a-blog cms 公式 YouTube チャンネル のチャンネル登録もお願いします。
a-blog cms Advent Calendar 2022 の 16日目の記事になります。今回は、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年に変更されておりました。
今回のエントリーの一番伝えたいところになりますが、実は明日が 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 へのアップデートもご検討ください。
また、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 サポート終了のタイミングでしょう。
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:> を一度ご確認ください。上記のようなサイトがあります。以前は Twitter の Widgets が設定画面にあって、そこでコードをコピペするような感じで提供されていたが、いつの日か無くなってしまっていたと思っていたのですが、いつの間にか復活しておりました。
機能としては、Embedded Tweet / Embedded Timeline / Twitter Buttons の3種類が用意されています。 Buttons はクリックすると 5種類あるみたいですが、今回は全く確認していない。 Timeline も便利に使えそうではあるが、今回は Embedded Tweet のお話です。
blogテーマでは、デフォルトは表示されていないが「引用ユニット」をオンにすると以下のように URL を設定できるようになっている。そこで、<https:> を設定すると、そのページの OGP情報を取得して表示してくれる便利な機能だ。</https:>
一般的なテキストの引用については、こんな感じで書くと <blockquote> 〜 </blockquote> のタグで囲まれた文章となる。
管理画面 / コンフィグ / エントリー / 編集設定 / テキストタグセレクト の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 -->例えば <https:> を <https:> に設定します。</https:>
<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>— 山本一道@アップルップル (@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です。
と設定すれば、以下のような感じになります。
<script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8">月曜にマツダに車検に出して、今日帰ってきました。久しぶりのロードスターですが、やっぱりイイ車ですね。 pic.twitter.com/IhHCNZiOnO
— kazumich@NDロードスターRF (@ndrf_kazumich) April 2, 2022
ローカルでテストしつつ、このブログにも実装しておこう！って作業をしたらこの設定をしないでも、引用ユニットに Twitter の URL を設定するだけで同じものが表示されてしまいました。
コンフィグの設定で Twitter API を設定すると OGP の代わりに、今回の <https:> の結果と同じタグを twitter.com から API 経由で持ってきてくれることを忘れておりました。これも、せっかくなのでお伝えしておきます。
