a-blog cms勉強会高知 Vol.1 を開催しました

10月11日（金）、1年数ヶ月ぶりに高知で a-blog cms の勉強会をやってきました。人数は10人くらいでしたが、ハンズオン形式で入門の勉強会をするって感じでやってみました。初めてだったので、どのタイミングで進めていいのかが悩みながらでしたが、ほとんど皆さんゴールまで作れたようなので、これをもう少し完成度を高めてみたいと思います。

a-blog cms勉強会高知 Vol.1

ハンズオン形式の初心者向け勉強会でやった事

簡単に書くと、site2013 でインストールした環境で、blog2013 にテーマを切り換えて、そのテーマをトップ・一覧・詳細と分け、最終的にはコンテンツ的には site2013 っぽい感じに戻していくという作業を行ってもらいました。

テーマを複製する
ヘッダー画像を入れよう
グローバルナビゲーションをタイトルの下に移動する
インクルードの利用
index.html をコピーして top.html を作る
top.html に一覧系のモジュールを利用する
モジュールIDを設定する
サブカラムを整理する
カテゴリーのカスタムフィールドを設定する
出て欲しくないものを隠す
一覧と詳細のテーンプレーとを分ける
カテゴリー毎に違うテンプレートを利用する
特定のエントリーだけテンプレートを変更する

あと、何が欲しいですかね？

高知と言えば、鰹のタタキ

わらを使って自分で焼く鰹のたたきを食べさせてくれる「土佐タタキ道場」に行ってきました。桂浜の近くにありますので、海の方に行くのであれば、寄ってみるのもオススメです。

桂浜は遊泳禁止なんだそうだ

a-blog cms Autumn Week 2018 は10月1日から

10月から1週間1人で瀬戸内をぐるっとドライブしながら a-blog cms の勉強会をするという企画をたてています。全ての宿を予約し、現地でご協力いただけそうな人たちと連絡を取ったりも済ませ、勉強会の会場も半分以上は決まってきています。名古屋からスタートして、今のところは岡山をゴールという予定です。移動距離と時間を調べてみると以下のような感じになるようです。最終的に名古屋に戻ってきて 1,300km の予定です。 10/1 (月) 名古屋 0km 10/2 (火) 神戸市 200km / 2h30m 10/3 (水) 高松市 160km / 2h10m 10/4 (木) 高知市 130km / 1h50m 10/5 (金) 松山市 120km / 2h50m （初） 10/6 (土) 広島市 190km / 3h00m 10/7 (日) 岡山市 170km / 2h20m なんとか、午前中に移動しながら、少しくらい観光なんかもできたらいいですね。各地のイベントページ 10/1(月) a-blog cms 勉強会 in 名古屋 2018/10 10/2(火) a-blog cms 勉強会 in 神戸 2018 10/3(水) a-blog cms 勉強会 in 高松 2018 10/4(木) a-blog cms 勉強会 in 高知 2018 10/5(金) a-blog cms 勉強会 in 松山 2018 10/6(土) a-blog cms 勉強会 in 広島 2018 10/7(日) a-blog cms 勉強会 in 岡山 2018 各地のホテルの予約を済ませ、徐々にイベントページも公開しています。ぜひ、お近くの方で CMS を活用して仕事している人は参加をご検討ください。よろしくお願いします！この秋に開催予定の他地区 a-blog cms 勉強会 9/4(火) a-blog cms 勉強会 in 札幌 2018 4人 9/8(土) a-blog cms 勉強会 in 富山 2018 10人 9/11(火) a-blog cms 勉強会 in 名古屋 2018/09 5人 9/12(水) a-blog cms 勉強会 in 大阪 2018/09 7人 10/17(水) a-blog cms 勉強会 in 大阪 2018/10 10/26(金) a-blog cms 勉強会 in 北九州この秋に参加予定のイベント 9/22(土) WCAN 新潟出張版 2018 sponsored by a-blog cms 新潟 10/27(土) クリエイティブハント 2018 山口

2018年 8月 11日

a-blog cms 勉強会 in 高知 2016/10 を開催しました

四国ツアー2日目は高知です。地元、掘くんの凱旋公演でした。勉強会を始める前に、上級者向けに Set_Template 講座を開催！このために高知に来た理由の1つでもある。高知といえば「鰹のタタキ」「カツオの塩たたき」は1人で2皿食べてしまいました。

2016年 10月 7日

WCK Meeting vol.33 a-blog cms勉強会「事例に学ぶカスタマイズテクニック」に参加してきました

2012年から年に1回のペースで、高知には行っています。ということで、今年も10月2日(金) に WCK Sessions Vol.33 に呼んで頂き、参加してきました。毎年参加してくれる人もいれば、初めての人もいるこういう環境になると、初歩だけ話をしてると利用者からするとものたりない事になるし、新しい機能の話ばかりだと初心者に知って欲しい部分が伝えられないし毎回悩むところです。なので、最近は初歩の「PHPは書かないよ」「ユニット」「カスタムフィールド」と、最新機能の「レイアウト」「Cookieの出し分け」を森田さんに紹介してもらいつつ、聞きたいことについて質問形式でやっていることが多いです。今回は高知の主催者側の人にも、こんなに質問が多く出る回は珍しいと言って頂け、興味を持って知りたいと思ってもらえて、嬉しく思いました。また、来年も来ます！（呼んでください）少しだけ観光も高知といれば、カツオのたたきという事で、飛行機で到着したお昼に「どこか行きたいところありますか？」の問いに、「ランチでカツオを食べに行きたいです！」と即答した事から、2013年にも行った「土佐タタキ道場」に連れていってもらいました。その後、桂浜というコースです。昼に1皿、夜にも1皿と高知に来ると、たっぷりカツオが食べられるのが、毎年の楽しみです。

2015年 10月 2日

高知のWeb勉強会 WCK Sessions Vol.7 で a-blog cms を紹介してきました

高知には、アップルップルを法人化した時にいたデザイナーが地元に戻って頑張ってます。もちろん、a-blog cms もしっかり使ってWebサイトを作ってくれています。そんな高知で WCK Sessions Vol.7 という勉強会で a-blog cms を紹介してきました。 WCK Sessions Vol.7 これまで2回高知では a-blog cms の勉強会をしていますが、今回の参加者13人のうち11人が過去参加した事がある人で、初めての人は2人だけでした。 2013/10/11 a-blog cms勉強会高知 Vol.1 を開催しました | kazumich.log 2012/07/21 WCK Sessions vol.2 『選ばれるCMSとその理由』WordPress × a-blog cms に参加しました | kazumich.log こうなると、各地でお話しているような初歩の話をしてはダメな気もするが、初めての人に知ってもらわないといけないって事もあるので、どんな感じの内容にするのか悩みました。結局は同じような感じで話をした後で、1時間くらい知りたい事を聞いて、それに答えるようなスタイルでの開催としました。高知では、本場の鰹のタタキが楽しみなところですよね。懇親会では写真の塩タタキを2皿1人で食べさせてもらいました。大満足で、ホントありがとうございました！

2014年 8月 1日

WCK Sessions vol.2 『選ばれるCMSとその理由』WordPress × a-blog cms に参加しました

高松〜高知〜岡山と勉強会ツアーの2日目として、21日(土)の11時くらいに高知に入りました。高知と言えば、鰹のたたきですよね。お昼からひろめ市場という屋台村ようなトコロに連れて行ってもらいました。鰹のたたきは、一般的にはポン酢で食べるんだと思いますが、塩たたきというのがオススメとの事でしたよ。 WCK ウェブクリエイターズ高知本番はココからになります。今回は a-blog cms だけでなく、WordPress も一緒に紹介するような高知のWeb系の勉強会に呼んで頂きました。一緒にやった上村さんは岡山でもご一緒した方で、とてもいい感じの話をされる方だったのでWCKさんにも紹介し、今回のような感じになりました。 Webクリエイターズ高知龍馬の生まれたまち記念館で行われた勉強会には、写真のように40数名と多くの方に集まって頂きました。他のCMSを活用してサイトを制作している人が少なかったようですが、アンケートの結果を見ると私の伝えたかった部分は分かって頂けた人もそれなりにいる感じでした。こうやって行った事のない地域に出向いて、a-blog cms の紹介をしてまわるという事を3年くらいやってきていますが、これからも頑張って広めるためなら、どこにでも行きたい！と思います。声をかけて下さい。よろしくお願い致します。

2012年 7月 27日

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