Page: 17 / 109

Honoの静的サイト生成機能（`toSSG`）を試してみる

最近Honoを使用してデモアプリを作成し、静的サイトビルド機能を試した結果を共有。Hono(v4)を使用し、nodejsテンプレートを利用してアプリをセットアップ。SSG対応のためにJSXでWebページを生成する方法やビルド用の処理を追加する手順を解説。ビルド時のログ記録方法や実際にビルドする際の注意点も紹介。静的ファイルを生成し、実践投入するための準備が整った。

公開日: 2024/03/20

最終更新日: 2024/03/20

Hono / Sonik JavaScript

Honoxで、サーバーサイドとクライアントサイドのfetchを試してみた

HonoでWebサイトを作る「honox」の実装方法を紹介。クライアント・サーバーサイドでのデータ取得やAPI呼び出しを説明。外部APIを用意し、クライアントでfetchやサーバーでfetch、レスポンス表示する手順を示す。Reactライクな使い勝手とHono/Cloudflare Workersっぽい特徴がある。honoxは個人的に興味深く、SSGの場合はAstroを、サーバー側処理が多い場合はhonoxを推奨。

公開日: 2024/03/20

最終更新日: 2024/12/16

AI / ML JavaScript LangChain.js LLM Node.js

[LangChain.js LCEL入門]マルチステップのテキスト生成を行う

LangChain.jsを使用してLangChain Expression Language（LCEL）を作成する方法を試行錯誤するシリーズ。今回は、複数ステップのLLM呼び出しに挑戦。1回目は英語で質問に回答を生成し、2回目は回答を日本語に翻訳。各ChainはRunnableSequenceを使用して実装し、前のChainの結果を次のChainの入力として利用可能。方法を理解することで、複数回のテキスト生成を簡単に行える。LangChain.jsの柔軟性に注目。

公開日: 2024/03/19

最終更新日: 2024/03/19

AI / ML JavaScript LangChain.js LLM Node.js

[LangChain.js LCEL入門] LCELを使ったChainを作る

LangChainを利用したLLMアプリ構築では、LangChain Expression Language（LCEL）の理解が重要です。LCELはLangChainを操作するための表現言語であり、複数ステップのAPI呼び出しを実装する際に役立ちます。LCELの書き方はPythonとJSで異なり、LangChain.jsではRunnableSequenceやpipe()関数を使って処理を記述します。それぞれのメソッドは異なる使い方があり、状況や好みによって選択することができます。LangChain.jsを使用して動作させた結果は正常に文字列データが取得できることが確認されています。

公開日: 2024/03/17

最終更新日: 2024/03/18

AI / ML JavaScript LangChain.js LLM Node.js

FakeLLMを使って、LangChainのChainを無料・高速にテストする方法

LangChainは、Chainを通じて複数のLLM API呼び出しやデータ処理をサポート。Chainを使用することで簡単に動的な処理を実装可能。また、FakeLLMを使用することで、LLMのレスポンス整形などを手軽にテスト可能。FakeLLMの利用はテキスト生成以外の処理やCI / CD上でのテストに適しており、モデルの差し替え方法も重要。FakeLLMのユースケースや実装方法など詳細はLangChainのドキュメントに記載されている。

公開日: 2024/03/12

最終更新日: 2024/03/12

WordPress

WordPressのREST APIエンドポイントを追加する方法

WordPressのREST APIは/wp-jsonから始まるパスで提供されており、独自のAPIを追加して外部サービスと連携する方法を紹介しています。rest_api_initフックでregister_rest_routeを使用し、プラグインコードを追加するとAPIが追加されます。第一・第二引数で指定したパスでAPIにアクセスすることができ、APIの情報は自動的に登録されます。また、正規表現を使用してパスに商品や店舗のIDなどを渡すこともできます。さらに、バリデーション処理を追加することで、リクエスト内容のバリデーションとエラーメッセージの表示が可能です。最後に、WordPressのREST APIを活用することで、ブロック開発に役立つことも紹介されています。

公開日: 2023/12/30

最終更新日: 2023/12/31

Supabase

SupabaseのDatabase Webhookを試してみた

SupabaseのWebhook機能について試してみた結果を報告しています。WebhookはAPIリクエストをDB操作と連動して外部に送ることができます。デフォルトではINSERTに対してイベントが発火し、指定したURLにJSON形式のデータが送信されます。開発時はngrokなどを使用してローカル環境にProxyを設定する必要があります。Webhookを活用することで、サービス開発とデータ連携を効率化することができますが、双方向の連携には注意が必要です。

公開日: 2023/12/30

最終更新日: 2023/12/31

WordPress

WordPressのカスタムブロックで、子ブロック(InnerBlock)を扱えるようにする覚書

レイアウト系や認証エリアなどの機能を備えたブロックを作成する場合、InnerBlocksを使用する必要があります。InnerBlocksを編集画面に配置し、コードをビルドすると、ブロックの中にブロックを配置できるようになります。保存時にもInnerBlocksに対応し、配置した子ブロックも保存されます。また、allowedBlocksを使用して追加できる子ブロックの種類を制限したり、templateを使用して子ブロックの初期配置をカスタマイズすることもできます。詳細は参考記事をご覧ください。

公開日: 2023/12/30

最終更新日: 2023/12/30

WordPress

WP APIのレスポンス内容をPHPでカスタマイズする方法

WP APIを使ってWordPress内の記事データをREST形式のAPIリクエストで取得できます。レスポンスカスタマイズ方法として、_fieldsパラメータを使用する方法や、register_rest_field関数を使用してカスタムなデータを追加する方法が紹介されています。ただし、デフォルトで提供されているAPIのレスポンス内容を減らすことは非推奨であり、注意が必要です。カスタムフィールドの情報を含める場合には、get_post_meta関数と組み合わせることができます。また、追加したフィールドには_fieldクエリを使用して必要なデータのみを取得することもできます。

公開日: 2023/12/30

最終更新日: 2023/12/30

JavaScript WordPress

WP APIで必要なデータだけレスポンスに含める方法

2023年2月にWordCamp Asia 2023で聞いた話をようやく試せたので、覚書です。WP APIのレスポンスは情報が豊富であり、不要な情報を絞るために_fieldsクエリパラメータを利用することができます。また、JavaScriptでAPIを利用する場合はURLSearchParamsを使用して_fieldsを指定することができます。参考記事に詳細があります。

公開日: 2023/12/30

最終更新日: 2023/12/30