Categories
Hono / SonikJavaScript
HonoXを使えば、Tailwind CSSやクライアントコンポーネントなどの最新機能を備えた高速・軽量なWebサイトを簡単に構築できます。この記事では、HonoXプロジェクトのセットアップから開発サーバーの起動まで、一歩一歩解説しています。
SaaS / FaaSStripeWordPress
この記事では、WooCommerceとStripe Checkoutを連携させ、クレジットカード決済に加えてコンビニ決済などの多様な決済手段を簡単に追加する方法を解説しています。数行のコードでECサイトの売上向上に繋がる支払い体験を提供できます。
LINESaaS / FaaS
この記事では、LINE Botの開発において重要なChat IDの取得方法について解説しています。WebhookイベントからChat IDを効率的に抽出する汎用的な関数の実装例と、Chat IDを活用したユースケースの具体例(非同期処理のローディング通知など)が紹介されています。
CloudflareSaaS / FaaS
Cloudflare PagesとVercel OGを組み合わせて、エッジでリアルタイムにOGP画像を生成する方法を紹介。SNSシェア向けの魅力的なOGP画像を、ページごとに手動作成する手間を省きながら実装できます。TypeScriptとReactで実装された実用的な例を解説しています。
Next.jsStripe
この記事では、Vercel AI SDKとStripe V2 APIを組み合わせた高スループットなAI利用量計測の実装方法を解説しています。Stripe V2 APIの新機能であるMeter EventStream APIを活用することで、秒間10,000リクエストまでの処理が可能になり、大規模なAIサービスでの利用量計測に適しています。
Clerkremix
この記事では、RemixプロジェクトでClerk認証を実装する際に発生する「clerkStateを渡していない」エラーの解決方法を紹介しています。rootAuthLoaderの使用、ClerkAppでのラッピング、環境変数の設定など、適切なSSR設定を行うことで問題を解決できます。
AWSremix
AWS Amplify SDK v6とRemixを組み合わせ、SSRに対応した認証機能を実装する方法を解説。Cookieベースの認証状態管理とカスタムアダプターにより、セキュアでパフォーマンスの高いWebアプリケーションを構築できます。
AWSHono / SonikLINE
今回はAWS CDK、LINE Messaging API、Honoを組み合わせて、効率的で拡張性の高いLINEボットを構築する方法を紹介。AWS LambdaにHonoフレームワークを導入し、LINE Webhookを処理してユーザーからのメッセージに自動返信する機能を実装します。
JavaScriptNext.jsReact
この記事では、RemixアプリケーションでVercel AI SDKを使用する際に発生する「z8.string(…).base64 is not a function」エラーの原因と解決策を解説しています。エラーの原因はzodライブラリの依存関係が明示的にインストールされていないことでした。zodをインストールすることで問題が解決し、Anthropicの言語モデルを使ったストリーミングレスポンスの実装例も紹介されています。
この記事では、Cloudflare Workersで開発中のAPIをローカル環境のみで実行できるようにするコードスニペットを紹介しています。リクエストのホスト名をチェックし、ローカルホストからのアクセスのみを許可することで、安全な開発環境を実現できます。