a-blog はなんでエーハイフンブログと書くのだろう？

a-blog はなんでエーハイフンブログと書くのだろうと思った事がある方はいるんじゃないかと思います。

a-blog の前は a-news 、その前は a-nikki でした。そんな感じで作られてきていますが、最初は appleple nikki という名前のCGIになる予定だったのですが、長いんじゃないかという事で、それを短縮して a-nikki になりました。なんでハイフンにしたのかはおぼえていません。 a-blog のロゴを見ると、@blog でもいいんじゃないの？って思ったりもしますが、a-blog というテキストが a-news の後継という事で出来てから、ロゴができたので @blog じゃなく a-blog なんです。

そうなるとCMSは a-cms なんじゃないの！って事になるのですが、商標の問題でエーシーエムエスというが無理という事で a-blog cms という事になっています。本来CMSは大文字で書くのが普通ですが、a-blog のロゴにあわせ a-blog cms になってます。

アップルップルの作るCMS 14年間の進化の歴史

今日は、公開アップルップル社内勉強会 Vol.5 がベースキャンプ名古屋で開催され、そこで昔話をするために書いてみました。 2004年10月21日のキャプチャをご紹介。残念ながら、ちょうど10年前の今日ではなく、10年前の明日ってところが残っていました。 a-Nikki 1.06・ a-News 2.32・ a-Column 2.31 ・ a-Update 2.01 ・ a-Site 20040505・ a-Link 1.00・ a-Blog 1.0b11 が公開されていたようです。ユーザー登録しないとダウンロードできないようにしてあったようで、User 10649 / Today +8 / Yesterday +9 というのも見えますね。では、順番に紹介していきましょう。 a-Nikki v1.06 一番最初に世の中に公開した日記のCGIになります。リリースする直前までは appleple Nikki だったと記憶しています。長いなって事で a-Nikki になったのですが、それが無かったら a-blog は appleple Blog だったり appleple CMS だったりしたかもしれません。ソースの最初に以下のように書かれています。これでリリース日が分かるというものです。 #====================================================== # a-Nikki v1.06 (2001/03/08) # a-Nikki v1.05 (2001/03/08) # a-Nikki v1.04 (2001/01/19) # a-Nikki v1.03 (2001/01/07) # a-Nikki v1.02 (2000/12/10) # a-Nikki v1.01 (2000/12/07) # a-Nikki v1.00 (2000/10/28) #------------------------------------------------------ 余談ですが 1.0 をリリースしたのが今の WCAN の元になった勉強会の当日だったりします。話のネタに、こんなの作ったんだ！って言いたかったんでしょうね。 Macお宝鑑定団のサイトの更新ができるようなものを作ってみようというのを最初の目標にしていますので、そっくりな仕様で書けるようになっています。データとしては、/data/2014/10/11.html というテキストファイルに以下の情報のみ書かれています。お久しぶりですとっても久しぶりに a-Nikki に会う事ができて嬉しいです。とっても久しぶりに a-Nikki に会う事ができて嬉しいです。とっても久しぶりに a-Nikki に会う事ができて嬉しいです。とっても久しぶりに a-Nikki に会う事ができて嬉しいです。とっても久しぶりに a-Nikki に会う事ができて嬉しいです。とっても久しぶりに a-Nikki に会う事ができて嬉しいです。とっても久しぶりに a-Nikki に会う事ができて嬉しいです。とっても久しぶりに a-Nikki に会う事ができて嬉しいです。 a-Nikki は a-nikki じゃなかったんだねぇ... そして文章の書き方が Macお宝鑑定団形式なんだよね。世の中からブログって名前のものが出てくる前の時代がとても懐かしい。 data.csv のような感じでサイト全体のコンテンツを1つのCSVファイルくらいで運用するようなものが多かったですが、書き込み時にデータが壊れたり、長く運用できるような方法として、年のディレクトリ、月のディレクトリ、日のテキストファイルのような分割をする事でサイトの運営が破綻しないような構成で作られています。 a-News v2.32 a-Nikki の文字だけだと寂しいって事で写真をアップできるようなものを作ろうって事で、a-News が出来ました。 a-Nikki が 2001/3 で終わっているので、3年くらいは a-News の開発が続いた事になります。 #====================================================== # a-News v2.32 (2004/05/05) #------------------------------------------------------ 全バージョンの更新履歴があったらよかったのに... トップページは index.html を静的出力しサーバの負荷軽減対策をしてあり、a-Nikki の時とは違い1日分のテキストファイルは単体でアクセスした時には1つのHTMLファイルになるようにHTML構造になっています。 RSSの存在を知った時にRSS対応もしたんだと思います。 a-News：2014/10/11 (土) 2014/10/11 (土) ● ああああああああああああああああああああ。ああああああ。ああああああ。ああああああ。ああああああ。ああああああ。ああああああ。ああああああ。ああああああ。ああああああ。ああああああ。ああああああ。ああああああ。ああああああ。ああああああ。ああああああ。ああああああ。ああああああ。 ● 同じ日に2つあったらどうなるんだっけ？こんな感じ？こんな感じ？こんな感じ？こんな感じ？こんな感じ？こんな感じ？こんな感じ？こんな感じ？こんな感じ？こんな感じ？こんな感じ？こんな感じ？こんな感じ？ ● a-news も登録できたよへぇー。こんなんだったんだ。へぇー。こんなんだったんだ。へぇー。こんなんだったんだ。へぇー。こんなんだったんだ。へぇー。こんなんだったんだ。へぇー。こんなんだったんだ。へぇー。こんなんだったんだ。へぇー。こんなんだったんだ。へぇー。こんなんだったんだ。へぇー。こんなんだったんだ。へぇー。こんなんだったんだ。へぇー。こんなんだったんだ。へぇー。こんなんだったんだ。へぇー。こんなんだったんだ。へぇー。こんなんだったんだ。へぇー。こんなんだったんだ。へぇー。こんなんだったんだ。へぇー。こんなんだったんだ。＜!--news_from--＞から＜!--news_to--＞を読み込んで正規表現でデータを分解し、更新用のフォームを作るような感じになっています。また、年のディレクトリ部分には index.html というファイルで年間カレンダーを生成しています。タイトル・URL・内容・写真が1つのセットになり、これを繰り返し登録できるような仕組みになっています。カテゴリーや表示のステータスもなく、日付の変更もできない仕様になっていました。 a-Column 2.31 a-News と同じ時期にリリースされていた a-Column は、今でいうところの Category_EntryList になります。 a-News になかったカテゴリーと記事を非公開にする機能が用意されていました。 #====================================================== # a-Column v2.31 (2004/05/04) #------------------------------------------------------ あと、静的コンテンツの利用という事も考慮して、そのカテゴリーにファイルを置けばリストにタイトルタグからテキストを持ってきて一覧に表示できる機能も面白い機能であったかもしれません。一度書いた内容の順番を変更する機能が用意されていない事から、追加する際に（下追加）（上追加）のボタンがあったり、今でもある URL挿入なんかができたり、写真を左右に配置する際には小さく上下の時には大きく表示するような機能もあったようです。追記した際には、日付をアップデートするのかも指定可能です。HTMLタグをコピペで貼る時のために改行を無効にするか、改行をBRタグを利用するのかも指定します。 a-Update 2.01 a-blog cms でいうところの、ブログのカスタムフィールドみたいなものかな。 #====================================================== # a-Updater v1.00 (2001/10/13) # a-Updater v2.00 (2002/11/19) # a-Updater v2.00 (2004/04/15) #------------------------------------------------------ 静的なHTMLファイルを読み込んで、テキストと画像を更新できるフォームを生成するシステムです。静的なHTMLファイルに以下のような記述をします。テキストこの部分が INPUT name="main" になります。画像 a-Link 1.00 残念ながらソースが無い。まぁ、今の Links モジュールみたいな感じですね。 a-Site 20040505 a-News + a-Column + a-Link をセットにした siteテーマみたいなもんでした。 a-blog 1.90 これまでは、Perl のCGIにテキストファイルでデータを保存するものでしたが、このシステムからは PHP + MySQL という環境で動作するものになりました。リリースノート的なものがダウンロードしたファイルの readme フォルダの中にありました。正式版リリース以降は全て1つのファイルにまとまっていたようです。 a-blog 改訂履歴記事の基本設定 a-News には無かった、公開ステータスやカテゴリーが追加になっています。当時のブログにはトラックバックというブログ間での連携をする機能というのがあってこそブログと名乗れるようなところもあった事からトラックバックのURL欄も大きく作られていました。 a-blog の頃のユニットここら辺からは今の a-blog cms のようなインターフェースになってきているのが、なんとなく分かる感じがします。a-blog の頃はテキストユニットと画像ユニットがセットになっていました。画像がたくさんある記事ではテキスト欄が空のままで画像だけ設定されるような利用でした。昔は wiki の記法でも登録できたようですね。忘れていました。画像のサイズとFloat設定「画像を左寄せ＋下の記事を横に」って意味分からないかもしれないけど、下の記事を横にする機能が後半できるようになった事で、写真が横に並べられるようになりました。この頃もサイズの指定は無く、横に配置した時のサイズと上下に配置した時でサイズが違うという a-News の仕様のままでした。 a-blog cms 2.1.1.1 そして、現行の a-blog cms も昨年まで5年間同じような管理ページでしたが、年末に 2.0 がリリースされ次の進化が行われました。これから先の進化は、今のアップルップルの皆さんの手で正常進化させていきましょう！ http://www.a-blogcms.jp という昔話をしていました。皆さんはこの話はどこら辺からご存知ですか？今回の勉強会では、アップルップル 1年目の今井、2年目の森田、3年目の日比野と、3人の女子が発表していました。皆どこに出しても恥ずかしくない発表のできる子達です。近いうちに今回の発表についてもアウトプットがあるハズです。公開されたら追記してお知らせします。月間10,000PVのブログにするために学んだSEO | ひびの備忘録

2014年 10月 20日

独立記念日とa-blogの終了のお知らせ

2002年2月1日に独立したという事なので今日は独立記念日という事になる。有限会社アップルップルの前の個人事業主という事です。2002年に何故、独立しても大丈夫って思ったのか。今の自分では思い出す事ができない。 9年前の今日に独立した事で、有限会社アップルップルも出来たし、a-blog も出来た、WCAN も続いてるし、a-blog cms も出来た。という事なので、今となっては正しい選択だったという事になるのではないかと思う。そして、そんな日でないと出来ない決断をしようと思う。それは、a-blog 開発終了のお知らせを掲載する事。私が1人で作ったブログシステムで、これのおかげでいろいろな仕事もできた。残念ではあるが、どこかで終わりますという事を伝えないといけないので、今日にする事にする。 a-blog の開発が終わっても、今このタイミングで困る人は、殆どいないのではないかと思っている。なぜなら、もっと素晴らしい a-blog cms というモノが後継システムとして育ってきているからです。実際に a-blog cms の事を知って、a-blog で検索して間違える人もいるようで、これから a-blog を始める人が増えないように、3月末日で新規ユーザー登録についても終了します。これから始める人は a-blog cms を使って下さい。よろしくお願い致します。 2011年3月で新規ユーザー登録終了のお知らせもちろん、これまで a-blog でビジネスをしてきた人で、今後も利用される方については、問題無く利用できるようにしていきますが、今後のPHPやMySQLのバージョンアップによって動作しなくなる可能性はありますので、サーバ環境が大きく変わる時には乗り換えも検討下さい。 a-blogからのコンバートツール | その他チュートリアル | サポート・マニュアル | a-blog cms 上のサイトは2003年頃のサイトのキャプチャになりますが、この頃から「あなたのサイトの更新を楽にするのがアップルップルドットコムのお仕事です。」だったようですね。それは、今でも変わってないですね。サイトを作る人、そのサイトを更新する担当の方、皆さんが楽になる a-blog cms は、私自身がコードを書く事なく、a-blog の後継のシステムとして生まれ、バージョンアップをくり返し育ってきています。こんなに嬉しい事はありません。独立した日ではありますが、今は1人ではありません。多くのスタッフとクライアントさん、そして a-blog や a-blog cms のユーザーさんのおかげで、今の有限会社アップルップルがあります。ありがとうございます。

2011年 2月 1日

a-blog と a-blog cms の違い

a-blog から a-blog cms にコンバートする際に問題になった点を書いておきます。タグがスペースが利用できない仕様になった事により、a-blog cms というタグだったのが ablogcms になりました。カテゴリーを表示だけしてなかったのですが、カテゴリがあるもののパーマリンクが /category00/entry-000.html になってしまいました。カテゴリーはバッサリDB上から削除してしまいました。検索エンジンで例えば「Wii フレンド」と検索すると、なぜか2番目に出てくるんですが、そこでは、https://kazumich.com/index.php?ID=3516 と、リンクがあります。そこをクリックしてアクセスした際に Not Found に通常なってしまいます。なんとか、無理矢理な感じで、https://kazumich.com/bid/1/eid/3516 に飛ばす事をして対応していますが... これについてもなんとかしたいところです。 mod_rewrite で index.php?ID=3516 を /bid/1/eid/3516 にするだけでいいのですが、なかなかうまく出来ません。どなかた、いい方法をご存知の方がいらっしゃいましたらお知らせ下さい。

2009年 12月 30日

a-blog for iPhone について

アップルップルという会社名では、デベロッパー登録できなかったりして、リリースが少し遅れてしまっています。現状について少し報告です。今回出来上がったアプリについてはa-blog用であり、a-blog cms用ではありません。しかし、最近は a-blog cms が話題になる事も多く、a-blog cms用だと勘違いされる方も多いみたいで、このアプリのリリースのタイミングに悩んでおります。もう少しすると a-blog cms 1.2 がリリースされます。同じタイミングでのリリースは問題があるのではないか、でも a-blog を使っている人の方が多いし... もし、a-blog を利用している人で、最新版にアップデート（1.91b2）して、早く利用してみたい方がいらっしゃいましたら、コメントに連絡先のメールアドレスとかを書いて連絡下さい。

2009年 11月 24日

a-blog から a-blog cms にコンバートツール

a-blog のデータを a-blog cms にコンバートするためのコンバーターの準備ができたようです。私のブログもテストで引っ越しした事もあります。結構、良く出来ているようです。複数設置してた a-blog を、a-blog cms の子ブログにインストールする事もできます。仕方がないところとしては、URLが変更になってしまいます。新旧のURL両方を把握し、リダイレクトするような設定を .htaccess に書くとか、そんな事をする必要が出てきてしまいます。ダウンロード＆利用方法については以下をご覧下さい。 a-blogからのコンバートツール | プラグイン | a-blog cms - Web制作者のためのCMS

2009年 7月 24日

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日

kazumich.log