a-blog cmsでAjax検索機能を実装 (1.2.2b) その3

の続きです。今回は検索エンジンからのリファラーを元に、検索した結果を表示させてみましょう。

<form action="" method="post" class="js-post_include-ready">
<input type="hidden" name="keyword" size="30" value="CSS" />
<input type="submit" name="ACMS_POST_2GET" />
<input type="hidden" name="tpl" value="searchList.html" />
</form>

上記であれば、CSS というキーワードが固定されています。これを以下のようにしてみます。

<form action="" class="js-post_include-ready" onsubmit="return ACMS.Config.searchEngineKeyword;">
<input type="hidden" name="tpl" value="searchList.html" />
<input type="hidden" name="keyword" value="ACMS.Config.searchEngineKeyword" class="js-input-eval_value" />
<input type="hidden" name="ACMS_POST_2GET" />
</form>

form に onsubmit="return ACMS.Config.searchEngineKeyword;" を、検索条件のvalueには ACMS.Config.searchEngineKeyword と書き、classを class="js-input-eval_value" のように付けます。

あと、元はsubmitボタンになっていましたが、hiddenでも大丈夫ですので、hidden に変更してあります。

これで、検索エンジンからのリンクで検索ワードがセットされるようになるハズです。

うまく動けば、以下に何か表示されるようになります。この下に何か出てますか？

んー、うまく動いてない気がします。もう少し、調整してみます。

a-blog cmsでAjax検索機能を実装 (1.2.2b) その2

昨晩書いた a-blog cmsでAjax検索機能を実装 (1.2.2b) では、以下のように書いています。（検索されるとココが置き換わります）（検索されるとココが置き換わります）今回は、SUBMITボタンを押さないで表示させるような事をしてみたいと思います。 class="js-post-include" を class="js-post-include-ready" と -ready" を追記します。また、検索の条件になる keyword の value を設定しておきます。これで、検索のボタンを押さなくても（検索されるとココが置き換わります）が置き換わって表示されるようになります。（検索されるとココが置き換わります）であれば、入力やボタンが無くてもいい事になりますので、さらに以下のように修正します。随分、すっきりした感じですね。条件の設定ができませんが、以下の部分には CSS で検索された結果が表示されているハズです。ソースは上記の form タグが書かれています。いかがでしょうか？こんな感じに class="js-post_include-ready" を利用する事ができます。その3 では、検索エンジンのキーワードに反応させる方法というのを書いて見ます。 1.2.2bという未配布のバージョンのものについて書いていますので、もう少しだけお待ち下さいね。

2010年 2月 19日

a-blog cmsでAjax検索機能を実装 (1.2.2b)

普通に検索するフォームを作ると、以下のように書きます。実際の動作すると以下のような感じになります。お試し下さい。（ページが切り替わります）ここからが今回の本番。class="js-post_include" target="#result" を form につけます。そして、form とは別に検索結果を表示させる div を追加します。 div の id="result" と target="#result" が同じに設定します。（検索されるとココが置き換わります）そして、こちらもお試し下さい。画面のリロード無しで searchList.html を読み込む事ができます。（検索されるとココが置き換わります）そして、searchList.html には Entry_List のモジュールが書かれており、モジュールIDを設定し、keyword 部分にチェックがつけて keyword に反応するように設定してあります。たった10分くらいの作業で Ajax 検索機能を実装する事ができました。例えば、改ページ部分をこの機能を利用して、Entry_Body を読み込めば改ページ無しで、次のエントリーを追加表示させたりする事もシステム本体は、そのままでテンプレートのカスタマイズだけで実装する事が可能です。 1.2.2bという未配布のバージョンのものについて書いていますので、もう少しだけお待ち下さいね。

2010年 2月 19日

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日

店内からのアクセスがあった時のみ表示させるタッチモジュール ( Touch_Ip )

ベースキャンプ名古屋のサイトで、会員紹介のコンテンツを用意し店内からのアクセスの時にだけ表示させたいという要望が出てきました。最近できた IFブロックではテンプレート上に $_SERVER['REMOTE_ADDR'] の中身（アクセスしてきている人のIPアドレス）を表示させる事ができないので、今回はオリジナルのタッチモジュールを作っての対応する事になります。 GETモジュール作るべきGETモジュール Touch_Ip は、ユーザーの作る GETモジュールなので /php/ACMS/User/GET/ に作る事になります。他のタッチモジュールと同じ感じになるように Touchディレクトリに Ip.php というファイルを作ります。＊＊店舗のIPアドレスを指定＊＊の部分はIPアドレスに書き換える事。 /php/ACMS/User/GET/Touch/Ip.php テンプレートテンプレートは、以下のように、表示させたいコンテンツを囲むように記述します。（表示させたいコンテンツ）また、逆の Touch_NotIp というのも一緒に作っておくと便利かもしれません。また、キャッシュがオンになっていると利用できませんので注意が必要です。

2014年 1月 14日

日付の選択を表示させるモジュール

石川丸の予約フォームに「3日後から30日分の選択を表示させる」という単機能のモジュールを用意して提供しました。モジュール作成の際の参考に紹介しておきます。モジュールのコード /php/ACMS/User/GET/AppointmentDate.php というファイルで以下のような内容になります。利用するテンプレートファイル側大事なところですが、{appointment_date の前と、({week}) の後に、バックスラッシュが必要です。それがないと selcted="selected" にする事ができなくなります。ご注意下さい。選択して下さい {year}年{month}月{day}日 ({week}) このモジュール自体は、私が書いたものじゃないですが、こんな感じでいいので簡単なモノはこんなんでいいのでブログにアウトプットしてね。って参考に書いておきました。

2012年 8月 1日

a-blog cms のエントリーのフィールド順って何だ？

先日の高松の勉強会で出た質問で、「エントリーの表示順にあるフィールド順とは？」というモノがありました。私自身も一度も使った事が無かったので、答えられなかったのでココで回答しておきます。まず、どのモジュールを利用するのかを設定する必要があり、その設定はモジュールIDで設定します。ですので、モジュールID化されていないモジュールでは利用する事ができない事になります。そこで、FieldName/nem のように設定します。nemというのは条件として NOT EMPTY という意味で値が空ではない時という宣言になり、一般的にはフィールドに情報が入っている全部という事になるかと思います。もちろん、条件で絞って表示させたい時にはnemである必要はありません。これで、モジュール側での表示順が正常に動作するようになるとの事です。詳しいカスタムフィールドの検索については、以下をご覧下さい。カスタムフィールドをキーにしたエントリーの条件検索

2012年 7月 24日

kazumich.log

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

Recommendation

a-blog cmsでAjax検索機能を実装 (1.2.2b) その2