kazumich.log

kazumich.log

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

この記事は公開日より年以上経過しています

情報が古くなっている可能性がありますのでご注意ください。

高松・高知・神戸と3日連続の「a-blog cms 勉強会」3日目でした。

この日は、高知に掘くんを置いてきたので、神戸のエバンジェリストの 株式会社ふわっと 岡田さんと、株式会社それいゆ 江川さんと3人で発表する会となりました。会場は 神戸デジタル・ラボ さんの会議室をお借りしました。

a-blog cms に挑戦して良かったと思う3つの理由

この内容は、多くの人に聞いてもらいたい！ a-blog cms Training Camp 2016 Autumn で発表をお願いしています。 内容について書くのは、それ以降に。

ゴメンナサイ。 3日目で疲れてて自分で写真が撮れてなかったです。岡田さんのがありません。

終わってからの懇親会！ 最近の神戸の飲み会は 地魚屋台 元町豊丸 ですね。

更新

Facebookでシェアする Xでシェアする LINEでシェアする

シェアする

Recommendation

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 山口

a-blog cms DAY in KOBE 2015 を開催しました

先週も台風を心配しながらの開催だったのですが、今回も台風が来るかもって前日の夜はドキドキしていました。7月24日に、神戸のエバンジェリスト岡田さんの協力により a-blog cms DAY in KOBE 2015 を開催しました。 お昼からの開催って事だったので少し神戸観光 新幹線を降りたら近くだからって異人館の方にテクテク歩いて行ったのは失敗でした。7月の暑い日に坂ばかりの異人館の辺りはオススメできません。いくつかの建物に入って、異人館に来たよ！って写真を撮って、ランチは「Red Rock 元町店」で ローストビーフ丼 に。 夜は1時間くらい神戸街を歩きました 終わってから神戸っぽいところをテクテク歩いて神戸を満喫してきました。 私が最初に就職した4月の1ヶ月はこの神戸で研修でした。なので、20年前から愛知県を出るのなら、神戸が一番住みたい街なのです。

神戸の「ゼロからはじめる a-blog cms：ふわっとbiz 01」に参加してきました

神戸で行われた「ゼロからはじめる a-blog cms：ふわっとbiz 01」に登壇してきました。このイベントは神戸のパートナーであるふわっとの岡田さんに主催頂いたもので、a-blog cms だけの勉強会でした。人数としては25人の参加者という事で、地方の a-blog cms だけの勉強会としては多くの人に参加頂けたんじゃないかと思います。 基本的なところは岡田さんから紹介して頂きました。普段からイロイロなところで結構な時間をかけて紹介して頂いているので、安心して聞いていられる a-blog cms の紹介でしたね。 WordPress との比較的な事は普段私が勉強会で言うような事はないのですが、ユーザー目線での紹介ってのはホント助かります。 神戸版 a-blog cms の日 を開催 ベースキャンプ名古屋で毎月開催されている a-blog cms の日ですが、山形に続き神戸でも開催される事になりました。山形は7月からですが、神戸では実験的に6月から繋いでみたいと思います。 a-blog cmsの日 神戸サテライト会場 - 告知 a-blog cmsの日 神戸サテライト会場 - 申込 参加者からの感想（掲載許可分） 6月13日の神戸の勉強会に参加させていただきました。 a-blog cmsは、操作面、セキュリティ面、機能面等どれを取っても従来のcmsより安心して利用でき、お客様にとっても制作者にとっても活用しやすいWEBサイト制作にとても役立つサービスであると思います。6月23日のバージョンアップも楽しみにしています。 今後ともどうぞよろしくお願いいたします。 a-blog cmsを少しずつ使いはじめています。 サイト構築の部分を外注しなくてもよくなること、またプロトタイプでの制作に向いているところに個人的に魅力を感じています。 ふわっとbiz01では、いろんな方が参加されていました。 プログラマーの目線からの質問や、プランナー目線の質問なども出てきて興味深かったです。 『動的サイトのお知らせ部分だけ導入する』方法も説明されていて、これは初心者の私でもすぐにできそうなので、どこかで早速やってみたいと思っています。ありがとございました。 参加レポート 「 #ablogcms 全国ツアー神戸編」終了しました | お知らせ - ホームページ制作なら神戸のWeb制作会社「株式会社ふわっと」 「ゼロからはじめるa-blog cms」に参加してきました | Webooker

神戸ITフェスティバル 2013 で a-blog cms 2.0 を紹介してきました

2013年12月13日(金) に デザイン・クリエイティブセンター神戸（KIITO）で開催された 神戸ITフェスティバル 2013 CMSセッション の1コマで a-blog cms を紹介させて頂きました。 今回はタイトルにもあるように 2.0 の事を紹介したかったのですが、1.x を知らない人に 2.0 の新しくなったところだけ話をしても無駄なので、普段通りに ユニット・ダイレクト編集・カスタムフィールド・マルチデバイス対応 について紹介をしておきました。 1.x 系を使ってる人向けに 2.0 のよくなったところだけをしっかり紹介するイベントをやりたい！（それって a-blog cms の合宿だね） 利用したスライドデータ CMS 座談会 WordPress , a-blog cms , concrete5 , SOY CMS , Drupal , baserCMS の6つの紹介が終わった後に、発表者が前に座ってパネルディスカッション的なイベントが行われました。 今年は、6月に北九州で開催された ABC Words 2013 というイベントと、今回の2回だけだったのですが、ぜひ 2014年は、ほかのCMSと一緒の勉強会やセミナーができたら、もしくは、どこかで開催されるイベントに呼んでもらえたら嬉しいです。交通費もギャラもいりません。お気軽に相談下さい。

a-blog cms の日 in 神戸 が開催されました

4月は8カ所で行った a-blog cms の日 ですが、5月の最初は神戸で行う事ができました。開催前には神戸のパートナーである株式会社ふわっとさんで #ablogcms STREAM の配信も。 岡田さんのおかげで10人集まるイベントになりました。私の方から新しい1.6の話や、これからの人に向けての岡田さんのセッション、既に利用している人に向けての個別相談とか参加された皆さんの聞きたい事をイロイロお話してきました。 会場は三宮駅の近くにあるコロコさんです。通常に利用している人達の邪魔にならないように会議室を借りての開催でしたが、通常スペースも利用させて頂いたりとか、受付に協力頂いたりとかありがとうございました。コロコさんは六甲商会さんという事務機屋さんが運営するコワーキングスペースで、通常はビジター利用というのが無く、月額会員の方のみのコワーキングスペースでした。ビジター向けには Jimdo cafe KOBE というイベントを定期開催しているようなので神戸の方は、そこに一度行ってみてどのようなところなのか体験してみるといいかもしれません。 春の全国 a-blog cms の日 2013 4.5.6月で20都道府県くらいで開催予定しており、多くのWeb制作者にお会いできたらと思っております。集客に協力頂ける方や会場に利用させて頂けるコワーキングスペースのオーナーの方、まだまだ日程や会場が決まっていないところも多くあります。 また、実際に参加頂ける方についても、以下のURLより近くでイベントが開催される際には、ぜひご参加下さい。いい時間に来て頂ければと思います。 http://www.a-blogcms.jp/news/ablogcmsDay2013.html

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 の環境で試してみてください。

Contact

お問い合わせはこちら