a-blog cmsにフォームを設置する方法

a-blog cmsには標準でメールフォーム機能（フォームモジュール）が実装されています。今回はこのフォームを設置する方法について書いてみたいと思います。

company1であれば、標準でフォームが用意されているので、plainにフォームを用意してみる事について書いてみる事にします。（lupple.comに設置してみました）専用のフォームページではなく、どこにでも設置できるサンプルとして用意してみる事にします。

まずは、以下のサンプルのテンプレートをダウンロード下さい。

簡単なフォームサンプル (3KB)

分かりやすくするために include/form.html というメインのファイルと、そのファイルからincludeされるファイルに分けています。

plainのテーマの index.html に以下のように追記し、include のディレクトリは index.html と同じ階層にアップロード下さい。

<!--#include file="/include/form.html"-->

それでは、フォームの記述について説明をしていきます。 include/form.html には、＜!-- BEGIN_MODULE Form --＞から＜!-- END_MODULE Form --＞までの間に4つのBEGIN〜ENDが用意されています。

最初の表示用＜!-- BEGIN step#apply --＞〜＜!-- END step#apply --＞
エラー&修正用＜!-- BEGIN step#reapply --＞〜＜!-- END step#reapply --＞
確認画面用＜!-- BEGIN step#confirm --＞〜＜!-- END step#confirm --＞
送信完了用＜!-- BEGIN step#result --＞〜＜!-- END step#result --＞

と、なっています。各ブロックの実際のフォームについては、

＜!--#include file="/include/form/insert.html"--＞
＜!--#include file="/include/form/update.html"--＞
＜!--#include file="/include/form/confirm.html"--＞
＜!--#include file="/include/form/result.html"--＞

を読み込んで表示しています。こうする事で、フォームのページがすっきりします。 #include file を利用する事で a-blog cms のテンプレートを分かりやすく整理し、後でメンテナンスもしやすく作っていく事ができます。

フォーム作成の基本としては、

<input type="text" name="name" value="" />
<input type="hidden" name="field[]" value="name" />

1行目は、どんなフォームにしたいのかというところで自由に用意したいフォームの項目を用意します。そして、2行目の hidden で用意する name="field[]" で value="name" と宣言する事で、a-blog cms のシステムに1行目の入力項目がある事を伝える事ができるようになります。これについては、checkbox , radio , textarea , select であっても同様になります。書く順番は自由ですが、セットで記述するようにした方が分かりやすいのではないかと思います。

confirm.html にメールの設定があります。メールのタイトルや、本文のレイアウト、メールのヘッダー情報（From:・To:等）の設定もここで行います。HTMLソースを見るとメールアドレスも見えてしまう事から、Base64でエンコードして通常では見えないようにする事ができるようになっています。

<!-- 以下の[*]のメールアドレス等の項目を設定してください。-->
<!-- 必要ない場合は項目を削除してください -->
<!-- また送信メールの件名や本文となるsubject.txt、body.txt、
adminsubject.txt、adminbody.txtを編集してください。 -->

<!-- [*]送信先（To）の設定 -->
<!-- nameにはToおよびTo[]が設定可能 -->
<!-- To[]の場合、複数のアドレスが設定可能 -->
<input type="hidden" name="To[]" value="送信先１<[email protected]>" />
<input type="hidden" name="To[]" value="送信先２<[email protected]>" />

<!-- [*]送信者（Sender）の設定 -->
<input type="hidden" name="Sender" value="送信者<[email protected]>" />

<!-- [*]送信者（From）の設定 -->
<!-- nameにはFromおよびFrom[]が設定可能 -->
<!-- From[]の場合、複数のアドレスが設定可能 -->
<input type="hidden" name="From[]" value="送信者１<[email protected]>" />
<input type="hidden" name="From[]" value="送信者２<[email protected]>" />

<!-- [*]返信先（Reply-To）の設定 -->
<input type="hidden" name="Reply-To" value="返信先<[email protected]>" />

<!-- [*]カーボンコピー（Cc）の設定 -->
<!-- nameにはCcおよびCc[]が設定可能 -->
<!-- Cc[]の場合、複数のアドレスが設定可能 -->
<input type="hidden" name="Cc[]" value="カーボンコピー１<[email protected]>" />
<input type="hidden" name="Cc[]" value="カーボンコピー２<[email protected]>" />

<!-- [*]ブラインドコピー（Bcc）の設定 -->
<!-- nameにはBccおよびBcc[]が設定可能 -->
<!-- Bcc[]の場合、複数のアドレスが設定可能 -->
<input type="hidden" name="Bcc[]" value="ブラインドコピー１<[email protected]>" />
<input type="hidden" name="Bcc[]" value="ブラインドコピー２<[email protected]>" />

<!-- 文字コードの設定 -->
<input type="hidden" name="Charset" value="ISO-2022-JP" />

<!-- 送信メールの件名の設定 -->
<input type="hidden" name="SubjectTpl" value="sample/form/subject.txt" />
<!-- 送信メールの本文の設定 -->
<input type="hidden" name="BodyTpl" value="sample/form/body.txt" />

<!-- [*]管理者の送信先（AdminFrom）の設定 -->
<input type="hidden" name="AdminTo" value="管理者の送信先<[email protected]>" />
<!-- [*]管理者の送信者（AdminFrom）の設定 -->
<input type="hidden" name="AdminFrom" value="管理者の送信者<[email protected]>" />

<!-- 管理者メールの件名の設定 -->
<input type="hidden" name="AdminSubjectTpl" value="sample/form/adminsubject.txt" />
<!-- 管理者メールの本文の設定 -->
<input type="hidden" name="AdminBodyTpl" value="sample/form/adminbody.txt" />

<!--
送信先などのメールアドレスにBase64を用いる事ができます。
ご利用の場合には以下のコードを利用します。
<input type="hidden" name="Obfuscation" value="Base64" />
-->

もう1つ大事なHTMLのフォームタグの書き方についてです。

<form action="" method="post"><input type="hidden" name="phpMyAdmin" value="JhzGC9Z7ShvbMVYJCn-d4181jAf" />

</form>

現状では、上記のように action="" と書きます。（将来的には変更になる可能性もあります）この状態だとAnother HTML-lint で減点になってしまいますので、ちょっとなんとかしたいと思っています。

次回は、a-blog cmsのフォームオプション編 を書いてみようと思います。

a-blog cms と htmx で作る SPA(Single Page Application) なブログテーマの実装方法

今回、この a-blog cms で作られているブログを htmx を利用して SPA(Single Page Application) にする実験をしてみましたので、その点について紹介をしてみます。 Single Page Application（SPA）とはウェブ開発の世界では、Single Page Application（SPA）がますます人気になっています。SPA は、従来の複数ページからなるウェブサイトと異なり、単一の HTML ページで動作し、ユーザーの操作に応じて部分的に、必要なデータだけをサーバーから取得するためデータの授受が最小限になり、ページの表示速度向上が向上します。一般的には、React や Vue.js などのフレームワークを利用して構築することが多く、エンジニアのコストが増えることもあります。 htmx をフロントエンドに、バックエンドには a-blog cms を採用すると a-blog cms では、PHP のコードを書くことなく、テンプレートには HTML のみを記述し、管理画面で表示件数やソート順、表示する情報の条件を設定する必要がなく、バックエンドのコードは記述する事がありません。また、そのテンプレートの HTML に属性を追加するだけで、htmx が動作し、手軽に SPA を実現することが可能です。最初のアクセスは a-blog cms が担当トップページはもちろんですが、Google検索や SNS のリンクなどで途中のページにアクセスがあった際にも、最初のアクセスは a-blog cms がページ全体の HTML を生成します。分かりやすくするために、サブカラムの一番上に a-blog cms のロゴを表示するようにしています。 2ページ目以降は htmx が担当し Ajax で更新しています 1ページ目を表示し、どこかのリンクをクリックすると Ajax で部分的にページを更新するような実装になっています。この時には a-blog cms のロゴだったところが、htmx に変わっている事で確認できます。 History API の活用（ hx-push-url ）一般的には htmx の属性で hx-push-url="true" と追加することで、htmx でページを書き換えた際にブラウザの URL も変更されます。また、URL 以外にタイトルタグの更新も簡単にできるため、ページ全体をリロードしない部分的な更新であっても、ブラウザの履歴にはクリックするたびにタイトルと URL が記録されます。そのため、ブラウザの戻るボタンで前のページに戻ることが可能になります。今回の実装では、この書き換えられた URL でブラウザのリロードをした場合に a-blog cms が同様のページを生成できるように、hx-push-url="{url}" のように URL を指定し History API に書き込む情報を調整しています。 htmx 化する際の実装方法リンクの修正通常 <a herf="{url}"> と書かれているようなリンクを以下のように修正します。今回は、ほとんどのリンクが entry-body.html のテンプレートを利用して部分的にページを更新する事になりました。内容としては、以下のようになります。元のリンク先 a-blog cms をバックエンドに利用する際には必要な記述 htmx でアクセスする URL を指定 History API に記録したい URL を設定置き換えたい場所の <div id="main-contents"> <div>を残す設定置き換えたい場所を指定ページの上部にスクロールする a-blog cms 側の設定「htmx でアクセスする URL を指定」で、例えば https://kazumich.com/htmx-spa-blog202405.html/tpl/include/htmx/entry-body.html と指定しているとすると https://kazumich.com/htmx-spa-blog202405.html で表示される内容を、/tpl/include/htmx/entry-body.html のテンプレートに切り替えて表示させるという指示になります。次に、そのテンプレートについて解説します。呼び出されるテンプレート entry-body.html 呼び出されるテンプレートについては、もともと Entry_Body のモジュールだけ書かれているテンプレートファイルですが、ここに Topicpath モジュールと、タイトルタグを生成するための Ogp モジュールを追記して1つのファイルにまとめています。（略）（略） htmx:{title} entry-body.html のテンプレートファイルの中で hx-swap-oob="true" が付いている <div id="topicpath"> 〜 </div> は、id="topicpath" の部分が置き換わります。hx-swap-oob="true" については複数のエリアを一緒に更新ができる便利な属性になります。また、<title>〜</title> については htmx の属性をつける事なくタイトルタグを置き換えることができます。残った HTML が、<div id="main-contents"> 〜 </div> に置き換えられる事になり、複数のエリアの置き換えが完了する事になります。このように a-blog cms を利用するとバックエンドの処理を PHP で書くことなく、htmx を呼び出すついでに、呼び出される HTML ファイルを書き、呼び出される側の HTML にも hx-swap-oob="true" などの属性を付加するなどして相互に関連するテンプレートを HTML だけで書いていくことが可能なのです。検索機能の実装これまでは <a hx-get="{url}" ... > タグでリンクを作成し、htmx を動かしコンテンツを呼び出すことについて説明を書いてきましたが、次は記事の検索機能を hx-post を利用して作っていくことを解説していきます。標準的な検索フォーム htmx 化するには hx-get で方法が身についていれば、hx-post でも同様に書くことができます。今回のフォームでの htmx を動作させる場合のトリガーには hx-trigger="submit" を利用します。加えて name="tpl" を hidden で追加します。これで hx-post の設定は完了です。オマケ： input 要素に hx-trigger="keyup" で htmx を動かすキーワード検索の <input> を以下のように修正します。 <form> 自体を POST する必要があると最初は考えましたが、この <input> タグ単体でサーバーに情報を送ることができたらと考え hx-get で呼び出したい URL を指定し、hx-trigger="keyup" で GET リクエストを送ってみたところ思った動きになりました。その後、delay:1s を追加し、1秒後に動作するようにしています。あと、hx-push-url="true" とする事で URL も https://kazumich.com/?keyword=htmx のようになります。ここでは entry-summary.html を指定しており、サブカラムの最新記事を更新しています。 hx-post で hx-push-url="true" をする際のオマジナイ History API を利用して URL を書き換える際に、hx-get であれば URL を hx-push-url="{url}" のように、この URL にしたいと事前に設定ができますが、hx-post の場合には POST 後に URL が確定し、書き換えられた URL となってしまいます。この URL から include/htmx/＊＊.html を削除する JavaScript になります。 addEventListener('htmx:beforeHistoryUpdate', function (event) { const proposedUrl = event.detail.history.path; const customUrl = proposedUrl.replace(/\/tpl\/include\/htmx\/.*\.html/, ''); event.detail.history.path = customUrl; }); htmx 動作後に a-blog cms の acms.js を再度起動する a-blog cms が標準提供している JavaScript で acms.js というものがあります。ページを読み込んだ後で、この acms.js が動かないと困るようなこともありますので、HTML の読み込み後に再起動します。 addEventListener('htmx:afterSwap', function (event) { ACMS.Dispatch(event.target); }); ※ 現在、シンタックスハイライトが上記の JavaScript を書いても動作していない問題を抱えています。その点は改善された際にアップデートします。 a-blog cms で作られたブログを SPA にするヘッドレスCMS を活用して JSON を相手に、SPA ブログを作ろうと思うと少しづつ SPA 化していくというよりは、最初からそのように実装していく事になります。その点、今回の私のブログを SPA 化する際には、部分的にこの部分を htmx を動くようにしよう！を繰り返し、最終的には全てのページの遷移を htmx で動くように進めていきました。ビルド環境も必要ないですし、htmx の利点である JavaScript を書かない = 難しいプログラミングをしないの延長で、バックエンド側である PHP も書かず、htmx属性を追加するついでに、呼び出す HTMLテンプレートを書き、またその中に htmx属性も含める。これで a-blog cms の実装ができる人であれば誰でも簡単に SPA 化していくことが可能になるのではないでしょうか。もちろん、a-blog cms の学習コストが高いという方もいるかと思いますが、よかったら htmx@blogテーマがどんな実装になっているのか ablogcms.io の環境で試してみてください。

2024年 5月 20日

JavaScript ライブラリ htmx と a-blog cms は相性が良さそうだ

htmx という JavaScript のライブラリが、2023 JavaScript Rising Stars : Front-end Frameworks で 2位になっているが、日本ではあまり聞かない。私自身も最近知ったばかりだが面白そうなので、いろいろ実験を始めたところです。 https://htmx.org/ 他にも、調べてみると【GitHub Accelerator】GitHubが選んだ、将来有望なプロジェクト20選というのも見つかり、その中にも htmx が選ばれているようです。 2023-04-12 : GitHub Accelerator: our first cohort and what’s next 世界的に見れば、結構話題になっているという事になります。そんな中で、日本国内ではどんな感じかを調べてみるときのリンクを以下に。 Qiita : htmx 20件 Zenn : htmx 9件 X : #htmx lang:ja 日々少しある YouTube : htmx 日本語では数件 Google : htmx + 日本語を検索海外と比べると、ほとんど無いと言ってもいいくらいな状況であることがわかります。 Qiita や Zenn の記事を読みつつ、何で日本では流行ってないんだろ？って考えてみると、今の日本国内ではフロントエンドのフレームワーク的なものを使おうと思う人たちは、やっぱり React や Vue のような JavaScript をしっかり書くような人が多いのではないだろうか。そんな中で htmx は、JavaScript で実装するものではなく、HTML のテンプレートを書きつつ、必要なところだけサーバーサイドから欲しい HTML を返してくれる必要があるので、普段使ってる JSON を返してくれるヘッドレスCMS では欲しいデータを返してくれないということになる。そうなると、そこに学習コストをかけようということになってないのかもしれない。私の勝手な考えではありますが... 私自身が、JavaScript をバリバリ書く人ではないので、書かないでもいい！って言われると、私と似た属性の人たちに紹介したくなるので、少し初歩的なところも書いておきます。 htmx とは htmx は、ウェブページにインタラクティブな機能を簡単に追加するために設計された、HTMLを拡張するJavaScriptライブラリです。このライブラリを使用すると、サーバーと非同期に通信し、ページの一部を更新することができます。これにより、ページ全体を再読み込みすることなく、ユーザーインターフェイスを動的に更新することが可能になります。 htmx は、HTMLの属性を使用して動作します。これにより、JavaScriptをほとんどまたは全く書かずに、多くの一般的なウェブ開発タスクを実行できます。例えば、ある要素をクリックしたときに特定のURLからコンテンツを取得してその要素内に表示する、といった動作を簡単に設定できます。 htmx は、モダンなウェブ開発のアプローチの一つとして注目され、Ajax、WebSocket、サーバー送信イベント（SSE）などの技術をより簡単に活用できるようにすることを目指しています。 htmx の主な特徴以下のような主な特徴を持っています。簡単なインストールと設定単一のJavaScriptファイルを HTML に追加するだけで利用開始できます。 HTMLを拡張する特別な hx-* 属性をHTMLタグに追加することで、非同期通信 ( ajax ) や DOM の更新を行うことができます。簡潔さとアクセシビリティインタラクティブな Webアプリケーションを作成するために、JavaScript のコードをほとんどまたは全く書く必要がありません。 Click Me! 上記は、公式サイトにあるサンプルコードでは、（Click Me!）ボタンをクリックすると、https://example.com/clicked に POST して、取得した HTML を id="parent-div" と置き換える処理が実行されます。開発者は複雑なJavaScriptやフレームワークに頼ることなく、HTMLの拡張を通じてインタラクティブなウェブアプリケーションを構築できます。これにより、コードベースが簡潔に保たれ、メンテナンスや理解が容易になります。低い学習曲線 HTML属性を利用することで機能を実現します。そのため、HTMLの基本的な知識があれば、追加のプログラミング言語やフレームワークを学ぶことなく、すぐに使用を開始できます。サーバー中心のインタラクション設計サーバーサイドのロジックを活用して、クライアントサイドのインタラクティビティを向上させます。これにより、サーバーとクライアント間の連携が強化され、開発プロセスが合理化されます。この htmx の通信をするサーバー側の処理を簡単にできたら、さらに便利に htmx が使えそうではないですか。スムーズな統合性既存のウェブアプリケーションに簡単に統合でき、大規模な書き換えを必要としません。これにより、従来のウェブサイトを段階的にアップグレードすることが可能になります。パフォーマンスと効率必要な部分のみを更新することで、全体のページリロードを避けます。これは、帯域幅の使用を削減し、アプリケーションのパフォーマンスを向上させます。幅広い互換性現在、リリースされている htmx 1.x では IE11 もサポートしているようです。もちろん現代のブラウザであれば問題なく動作します。 2.0.0-alpha1 リリースされ、IE のサポートを終了したそうです。（もう IE は対応しないでいいですよね） htmx と a-blog cms の相性が良さそうな理由 htmx のことを調べて、ここに辿り着いた人は a-blog cms なんて知らないかもしれないので、少しだけ説明をしておきます。 a-blog cms とは PHP + MySQL で動作する国産のローコードCMS で、基本的には HTMLファイルとしてテンプレートを作り、PHP や JavaScript など難しい事は書くことなくウェブサイトを作ることができる CMS（コンテンツ・マネージメント・システム）です。 https://www.a-blogcms.jp/ a-blog cms には htmx に似た Ajax 機能が標準搭載 a-blog cms には post include 機能という名称で10年前から htmx のような ajax 機能を用意しています。よく利用される記述をサンプルコードを紹介します。 class="js-post_include-ready" がある form では、ページが表示された後に include/sample.html を読み込みます。また、sample.html には以下のようなコードが書かれているとします。 {title} これで、何件かのリストが表示されることになります。このように、a-blog cms では標準的な機能として、Ajax でリクエストがあった情報を部分的に HTML で返すことができる機能を持っています。これ htmx でやってることと同じです。もちろん、これまで通り純正の post include で作るということでもできますが、htmx の方が機能が豊富なので、置き換えることも可能ではないだろうかと考えています。実際の post include の動作デモ以下の青いボタンをクリックすると、このブログの新着記事を5件 Ajax で読み込み、その読み込まれたコードにも続きを読むボタンがありますので、繰り返し読み込むことができるようになっています。 a-blog cms の post include は、標準的に消して、出てくるアニメーションがついているので、下の htmx のデモと違うもので動いているのが分かりやすいと思います。ボタンのコード class="js-post_include" がある <form> タグは画面を遷移せずに、Ajax でコンテンツを読み込みます。読み込まれる sample.html のコード上半分が記事の一覧を読み込む部分で、下半分が続きを読むためのボタンのためのコードになります。 {title} post include を htmx に置き換えてみるやる事は簡単で <form> タグ部分の属性を書き換えます。見やすく属性毎に改行していますが、もちろん 1行でも大丈夫です。ボタンのコードこちらは https://kazumich.com/include/sample-htmx.html を GET で読み込むように設定してみました。読み込まれる sample.html-htmx のコードこちらは、何ページ目という情報を POST で渡すカタチで書いています。 {title} head タグに追加する htmx のライブラリを読み込むコード a-blog cms のテンプレートの中で、htmx を呼ぶためには、hx-ext="ajax-header" を追加する必要があります。そして、これを利用するためには、<head> タグ内に以下のように htmx のライブラリとあわせて ajax-header.js も読み込みます。最後に htmx で渡される HTML 自体をテンプレートとして表示部分を記述し、POSTするだけで a-blog cms は結果を HTML として返してくれます。上記のサンプルコードをご覧になれば、htmx が簡単に Ajax 部分を処理してくれているのと同様に、a-blog cms が必要な HTML を整形してくれることがわかります。必要な部分だけ JSON で返してくれるヘッドレスCMS と違い、必要な部分だけ HTML を返してくれる機能を a-blog cms は持っているのです。このように、a-blog cms と htmx の相性はとってもいいのではないかと考えています。ローカル環境での利用や、個人が非商用で利用する際には無料で、費用はかかりません。htmx の学習の環境として a-blog cms 使ってみませんか？

2024年 2月 6日

Chat GPT が書く a-blog cms の紹介ブログ記事

このブログ記事は、2024年1月24日に、Chat GPT 4 に以下の手順で書いてもらった文章になります。以下のようなプロンプトを書いています。番号1つ分を書くことで Chat GPT 4 から返答があり、続けて次の番号のテキストで返信しました。 a-blog cms を紹介するブログの記事を1つ書きたいと思っています。ご存知ですか？実際に書いていくお手伝いをお願いします。まずは見出しを決めていきたいです。 1つ目の見出しから文章を書いていきましょう。次に2つ目 3つ目 …. 書かれたものをコピペさすがに、開発している会社名が間違っている部分だけは、取り消し線で消し、その後に修正テキストを追記しています。それ以外は何も修正せず、コピペ記事にあえてしています。文字数としては 3,800文字くらいになりました。 a-blog cms をご存知の方からしたら内容としては、どうでしょう？これは実験的な記事になりますので、記事を複製して、キャプチャを付けたり、私として補足したいテキストを追加したバージョンも作ってみようと思っています。はじめに: a-blog cmsとは？ Webサイト制作の現場では、コンテンツ管理システム（CMS）の選択が非常に重要です。多くの選択肢の中で、日本国内で注目を集めているのが「a-blog cms」です。このCMSは、ユーザーの柔軟なニーズに応えるため、高いカスタマイズ性と使いやすさを兼ね備えています。 a-blog cmsは、株式会社アップルップ有限会社アップルップルによって開発されました。特に日本のWebサイト制作者や企業に向けて設計されており、日本国内の法規制に準拠したセキュリティ対策が施されている点が大きな特徴です。また、レスポンシブWebデザインに対応しており、スマートフォンやタブレットからのアクセスにも柔軟に対応します。この記事では、a-blog cmsの基本的な特徴、主な利用シーン、そして実際の導入メリットについて詳しく掘り下げていきます。これからWebサイトを構築しようと考えている方、またはCMSの変更を検討している方にとって、有益な情報を提供することを目指します。 a-blog cmsの主要な特徴 a-blog cmsの魅力はその多様な機能とユーザーフレンドリーな設計にあります。ここでは、特に注目すべきいくつかの特徴を詳しく見ていきましょう。高度なカスタマイズ性 a-blog cmsは、テンプレートの柔軟なカスタマイズを可能にします。これにより、ウェブサイトのデザインを自由に調整し、独自のブランドイメージを強く打ち出すことができます。また、HTMLやCSS、JavaScriptに精通している開発者にとっても、非常に使いやすいプラットフォームです。ユーザーフレンドリーな管理画面管理画面は直感的で理解しやすく、技術的な知識がないユーザーでも容易にコンテンツの追加や編集が行えます。これは時間の節約にもつながり、コンテンツ管理の効率を大幅に向上させます。セキュリティと安定性日本国内の法規制に準拠したセキュリティ対策が施されているため、個人情報の保護やデータの安全性が高く評価されています。定期的なアップデートにより、セキュリティの脅威からウェブサイトを守り続けます。スマートフォン・タブレット対応レスポンシブデザインに対応しているため、どのデバイスからアクセスしても最適な表示が可能です。これは、モバイルファーストの時代において非常に重要な機能です。 SEO対策の容易さ検索エンジン最適化（SEO）は現代のウェブサイト運営において不可欠です。a-blog cmsでは、SEOに有利な構造が組み込まれており、高い検索エンジンランキングを実現しやすくなっています。実践的な利用シーン a-blog cmsはその柔軟性と機能性から、さまざまなウェブサイトで効果的に利用されています。ここでは、具体的な使用例をいくつか挙げて、a-blog cmsの実践的な応用を探ります。企業の公式サイト a-blog cmsは、企業のブランドイメージを反映したオリジナルのデザインを容易に実現できます。製品情報の更新、ニュースリリースの公開、顧客からの問い合わせへの対応など、日常的なウェブサイト運営がスムーズに行えるため、多くの企業で採用されています。オンラインショップ商品の陳列や在庫管理、注文処理など、オンラインショッピングに必要な機能を統合して提供します。カスタマイズ性の高さは、オンラインストアの独自性とブランディングに寄与します。ポータルサイトやニュースサイト情報量の多いポータルサイトやニュースサイトでは、大量のコンテンツを効率的に管理・公開する必要があります。a-blog cmsは、こうした高い要求に応えるための機能を備えており、更新作業の効率化を実現します。ブログや個人サイト個人のブログやポートフォリオサイトでも、a-blog cmsはその簡便さとカスタマイズの自由度から選ばれています。デザインの自由度が高く、個人のスタイルや趣味を反映させやすいのが特長です。 a-blog cmsの導入メリット a-blog cmsを選択する最大の理由は、その導入によって得られる多くのメリットです。ここでは、特に重要な利点をいくつか挙げてみましょう。効率的なウェブサイト管理 a-blog cmsの直感的な管理画面と高度なカスタマイズ性により、ウェブサイトの日常的な管理が大幅に効率化されます。これにより、時間とリソースを節約し、他の重要な業務に集中できるようになります。優れたユーザーエクスペリエンスレスポンシブデザインの対応により、どのデバイスからアクセスしても快適な閲覧体験を提供できます。これは、訪問者の満足度を高め、リピート率の向上につながります。強化されたセキュリティ日本の法規制に準拠したセキュリティ対策は、ウェブサイトをオンラインの脅威から守ります。これにより、企業やユーザーの信頼を保つことができ、ブランドイメージを守ります。 SEOの最適化 a-blog cmsのSEOフレンドリーな設計は、検索エンジンでの可視性を高めるための重要な要素です。より多くのトラフィックを獲得し、ウェブサイトの影響力を拡大することが可能です。コスト効率の良さ初期設定や日々の管理において、ユーザー自身で簡単に行える点は、長期的に見てコスト削減につながります。外部の専門家に依頼する必要が減るため、特に中小企業やスタートアップにとっては大きな利点となります。 a-blog cmsの設定とカスタマイズ a-blog cmsの魅力の一つは、その設定とカスタマイズのしやすさにあります。ここでは、基本的な設定方法とカスタマイズのポイントについて説明します。基本設定の手順 a-blog cmsを使用するための最初のステップは、基本設定を行うことです。これには、サイトの名前や言語設定、テンプレートの選択などが含まれます。管理画面は直感的に設計されているため、このプロセスは比較的簡単に完了できます。テンプレートのカスタマイズ a-blog cmsの大きな特徴は、テンプレートの高いカスタマイズ性です。既存のテンプレートをベースにして、独自のスタイルや機能を追加することが可能です。HTMLやCSSの知識があれば、さらに細かい調整ができます。プラグインと拡張機能の利用 a-blog cmsは多くのプラグインや拡張機能をサポートしています。これにより、フォーム作成、ソーシャルメディア統合、SEO最適化など、さまざまな追加機能を簡単に導入できます。コンテンツ管理の効率化 a-blog cmsでは、記事やページの追加、編集が容易です。また、カテゴリーやタグの管理を通じて、コンテンツを効果的に整理し、ユーザーにとってナビゲートしやすいサイト構造を構築できます。 a-blog cmsを使用したユーザーの声 a-blog cmsの実際の効果をより深く理解するためには、実際にこのシステムを使用しているユーザーの声を聞くことが重要です。ここでは、さまざまな業界のユーザーからの実際のフィードバックを紹介します。中小企業のウェブ担当者「a-blog cmsの導入により、私たちのウェブサイト管理が大幅に簡素化されました。直感的な管理画面と簡単なコンテンツ更新システムのおかげで、日々の運営が効率的になり、他の業務にもっと時間を割くことができています。」フリーランスのウェブデザイナー「a-blog cmsのカスタマイズの自由度の高さには本当に感動しました。クライアントのニーズに合わせて、細かい部分までデザインを調整できるので、よりクリエイティブな仕事ができるようになりました。」オンラインショップオーナー「私のオンラインストアはa-blog cmsで構築されています。製品管理と注文処理がとても簡単で、顧客からの反応も良いです。特にモバイル対応のおかげで、スマートフォンユーザーからのアクセスも増えました。」個人ブロガー「初心者でも簡単に扱えるのがa-blog cmsの最大の魅力です。ブログのセットアップが簡単で、カスタマイズも自由自在。自分の個性を反映したブログを作ることができて、大満足しています。」まとめと今後の展望この記事を通じて、a-blog cmsの多様な特徴と実践的な利用シーン、さらには実際のユーザーの声を紹介しました。a-blog cmsはその柔軟性、ユーザーフレンドリーなインターフェース、そして強固なセキュリティにより、多くのウェブサイト制作者に選ばれています。今後、a-blog cmsは技術の進化と共にさらに多機能性やユーザビリティを向上させていくことが予想されます。人工知能の統合、より高度なカスタマイズオプション、さらにはグローバルな市場での展開など、様々な革新が期待されています。ウェブサイト制作を検討している方々、または既存のCMSからの乗り換えを考えている方々にとって、a-blog cmsは非常に魅力的な選択肢となるでしょう。その使いやすさ、柔軟性、そして強固なセキュリティは、今後も多くのユーザーに支持され続けることでしょう。

2024年 1月 24日

PhotoCollage.js を a-blog cms のブログテーマに実装してみた

数年前のインターンの課題として「Facebook の複数枚写真をアップロードした際に、写真をレイアウトしてくれる JavaScriptライブラリを作ってみよう！」というお題を出していた時期があります。 3日間コースで、まずは静的な HTML と CSS で、2枚の時、3枚の時のような感じで複数のパターンを作って、その後 JavaScript を利用してターゲットの HTML に Class を振っていくという感じ。 JavaScript が苦手でも CSS と格闘しつつ、いろいろな場合に対応できない感じでも、できる学生さんなら1日5時間で2日目の終わりには、ある程度動く感じまで作ってくる人もいました。その後、長期インターンで何度も作り直して、公開しても大丈夫そうなところまで出来上がったものを「PhotoCollage.js」という名前で公開しています。しかし、インターンの学生さんが作ったもので、あまり公式にどうだろう？ってところもあり使われないままになっていました。 PhotoCollage.js の特徴いろいろな HTML に対応しています。表示している画像とリンク先は別で扱うようにしています。 smartPhoto.js の利用も考慮して設計されています。画像のパスは src なのか data-src なのか指定も可能です。生成されるHTMLソースの各所に Class や attribute の設定が可能です。オプション以下のようなオプションを設定できるようになっています。ダウンロード GitHub に公開されていますので、そちらからダウンロードしてご利用ください。 https://github.com/appleple/PhotoCollage a-blog cms のブログテーマで利用するには CSS と JavaScript のファイルをご自身の blog テーマディレクトリに入れてください。 /css/photocollage.css /js/photo-collage.bundle.js _entry.html に追加 @section("head-link") @parent @endsection @section("head-js") @parent document.addEventListener("DOMContentLoaded", function () { const elements = document.getElementsByClassName('js-photocollage'); Array.from(elements).forEach((element, index) => { element.classList.add('js-photoCollage-' + index) new PhotoCollage(".js-photoCollage-" + index, { srcAttribute: "data-src", gap: "5px", margin: "0px 0px 35px 10px", imgClass: "js-lazy-load", aAttribute: { "data-group": "group-" + index, "data-rel": "SmartPhoto", } }); }); }); @endsection 17行目の margin を margin: "0px 0px 35px 10px" と設定をしました。 21行目の "data-rel": "SmartPhoto" に変更することで、a-blog cms の SmartPhoto が動作します。 css/photocollage.css を修正 a-blog cms のユニットの仕様の関係で左右に 10px 狭くしないといけない関係で、width : 100% のところを -20px 減らすように /css/photocollage.css の .photocollage を修正しています。 calc ってのを使った事なかったのですが、イマドキは便利になってるもんですね。 .photocollage { position: relative; /* width: 100%; */ width:calc(100% - 20px); height:100%; } @media screen and (max-width: 1024px) { .photocollage { width: calc(100% - 20px); height:100%; } } a-blog cms の管理画面の設定編集画面設定のユニットグループにクラスは js-photocollage とし、ラベルは自由ですが photocollage としておきます。投稿画面の指定としてユニットグループ設定で、photocollage を選択します。解除するには、1カラムを選択することで以下のユニットは JavaScript のライブラリの対象外になります。最後にたくさんの写真を撮って、それをブログの記事に、まとめて貼っておきたい。全部みたい時には SmartPhoto の機能でスライドして見ることも可能です。よろしければ使ってみて感想を X の #ablogcms ハッシュタグをつけてお知らせください。 https://github.com/appleple/PhotoCollage

2024年 1月 6日

2023年の a-blog cms を振り返って

これは a-blog cms Advent Calendar 2023 25日目の最終日の記事になります。昨日は、弊社アップルップルの CTO である伊藤さんの次世代フロントエンドツール「Vite」を a-blog cms で利用するためのコツでした。最近の CMS としてはノーコードやヘッドレスなどが流行っていますが、弊社のプロダクトである a-blog cms は中間地点のローコードCMS という位置付けかなと思っています。ウェブ制作のお仕事をされている人が作りやすく、利用者は使いやすいシステムを提供しています。アドベントカレンダー最終日であり、年末ということでもありますので、この1年を振り返ってみたいと思います。イベントについてコロナ禍でイベントができなかった数年も終わり、オンラインばかりだったところから、やっとリアルイベントを開催できるようになりました。リアルイベント a-blog cms Training Camp 2023 a-blog cms 勉強会 in 大阪 2023/08 a-blog cms 勉強会 in 東京 2023/09 a-blog cms 勉強会 in 名古屋 ( 4回 ) オンラインイベント a-blog cms live Vol.10 - Vol.17 ( 8回開催 ) 初心者向けのオンライン勉強会 ( 5回開催 ) a-blog cms Training Camp 2023 ( ライブ配信 ) リアルイベントができないことから a-blog cms live をオンラインで定期開催していましたが、これも役目が終わった感じはありますが、違うカタチで何かやっていけたらと考えています。また、リアルでの勉強会についても、しっかり計画して再開していきたいので、各地の皆さんのご協力をお願いいたします。 a-blog cms awards 2023 今年は、以下の 4つの制作会社となりました。どこもイイ仕事しているオススメな制作会社です。 # テクノロジー賞ましじめ株式会社制作のあしかクッキー # ユーザビリティ賞フォルトゥナ制作の株式会社銭辰堂仏壇・仏具サイト # デザイン賞 ZANMAI株式会社制作の越後長野温泉嵐渓荘 # アップルップル賞有限会社リーグラフィ制作の竹内建設システムについて a-blog cms は 2009年6月23日に Ver. 1.0 がリリースされて今日で 5,298日になるようです。14年半ということで長く利用いただいており、ホントありがとうございます。現在の a-blog cms は、リリースされて2年間はバグフィックス対応を、5年間はセキュリティフィックス対応を行なっております。 Versionリリース日バグ修正期日セイキュリティ修正期日 2.8.02018/03/262020/03/262023/03/26 2.9.02018/10/092020/10/092023/10/09 2.10.02019/02/282021/02/282024/02/28 2.11.02019/12/172022/12/172024/12/17 3.0.02021/12/242023/12/242026/12/24 3.1.02023/09/142025/09/142027/09/14 ※ メンテナンスポリシーについて今年 Ver. 2.8.79 、Ver. 2.9.45 が最終ということでセキュリティー対応が終了しました。今でも古いバージョンの利用を続けている方も多くいらっしゃいますが、セキュリティーを考えるのであれば Ver. 2.10.x 以上をご利用ください。またバグ対応についても Ver. 3.0.28 が昨日期限を迎えてしまいました。 3.0.28 が 7月5日リリースということで、その後に見つかったリリースできてない修正済みのものをもう一度リリースし Ver. 3.0.29 で 3.0.x のバグ修正対応を終了させていただきます。最近は、管理画面からポチッとクリックするだけで新しいバージョンにすることもできますので、できるだけ最新のものをご利用ください。今年は、2.9.x (1回) ・2.10.x (1回) ・2.11.x (1回) ・3.0.x (8回) ・3.1.x (7回) の 18回のリリースがありました。リリースノート最後に今年も、 a-blog cms Advent Calendar 2023 を無事完走することができました。この12月1日〜25日に毎日 a-blog cms のブログの記事が公開されるのは、ほんと嬉しいといつも思っています。できたら、12月だけじゃなくて毎日 Advent Calendar な日々ならいいのに！って思ったりもしていますが、今年も協力いただいた皆さま、ありがとうございました！ 2024年も、a-blog cms を頑張っていきますので、よろしくお願いします。

2023年 12月 25日

エントリー新規投稿画面で次のエントリーコードっぽいものを placeholder に表示させるカスタマイズ

これは a-blog cms Advent Calendar 2023 3日目の記事です。昨日は、Sugar さんのファイルを添付できるフォームのハマりどころ6選でした。上には、エントリーの新規投稿画面のHTMLのソースコードのキャプチャを貼ってみた。なんだか気になるコメント（緑色の部分）を発見した。なぜだか、コメントで次に発番される eid が書かれいる。テンプレート側 /themes/system/admin/_layouts/entry/edit.html を確認してみると、以下のように書かれている。 placeholder に entry-1.html を書いておくのなら、変数を設定したらいいんじゃないかと思うんだが、どうだろうか？結果、以下のような感じになった。この entry- も変更できるので必ず例）の状態にならないかもしれないが、entry-1.html よりはその名前になる可能性があるくらいの例）にはなるのではないだろうか？修正するファイルは、/themes/＊自分のテーマ＊/admin/entry/edit.html を以下のようにする。 @extends("/admin/_layouts/entry/edit.html") @section("apply-file") ファイル名 @endsection これで、次のエントリーコードが分かるようになります。今回の実装では、番号だけ表示をできるような実装になっていますので、エントリーの編集画面設定で entry- の部分をカスタマイズしたところは変えられませんので注意が必要です。 placeholder に表示する例ということで、entry-1.html よりはいいのでは？という実装になります。標準に入れてもらってもいい気もしますが、どうでしょうか？

2023年 12月 3日

kazumich.log