kintoneプラグインを使用して、ボタンやフォームをアプリに追加することができます。また、ボタンやフォームの操作によってkintoneのレコードを更新することもできます。この記事では、kintoneのREST APIを使用してレコードを更新する方法について説明しています。レコードを更新した後、ページを再読み込みすることもできます。さらに、Spinnerを使用するとローダーを表示することができます。更新した履歴を残すために、kintoneのAPIを使用することもできます。参考になるリンクも掲載されています。

Next.js App Routerでサンプルアプリを動かしていたところ、useEffectとuseStateを使った非同期処理が動かない場面に遭遇しました。解決方法自体は、「Node.jsのバージョンをアップグレードする」だけでOKでしたが、また別PCやワークショップで遭遇するかもしれないので、覚書としてまとめます。

microCMSテンプレートのシンプルなECサイトを紹介しています。microCMSやStripeを組み合わせて商品データを連携する方法や、注文時に商品データを作成する方法を解説しています。また、microCMSのWebhookを使用してデータの同期を行ったり、価格が変更された場合の処理方法も説明しています。ただし、カスタマイズやリスク要素についても言及しており、Stripe Elementsを使ったデータ連携の方法も提案しています。今後はテンプレートの更新情報や有料テンプレートの配布を検討しています。

microCMSのテンプレート作成に挑戦する中で、画面プレビューの実装を行いました。Next.js App Routerを使用してmicroCMSのプレビュー機能を実装する方法を紹介します。ngrokを使用してローカルのNext.jsアプリに中継するためのセットアップ方法も紹介されています。microCMSのAPI設定画面でngrokのURLを設定し、Next.js側では公開済みのコンテンツを表示するページを用意する必要があります。また、プレビューコンテンツの取得にはdraft_keyを利用します。

S3バケットのデフォルト設定が変更されたため、新しいバケットを作成する際にエラーが発生しました。エラーの原因は、バケットポリシーの設定に関するエラーでした。AWSは、新しいバケットに対してデフォルトでS3パブリックアクセスブロックを有効にし、ACLを無効にする設定を導入しました。CDKを使用してバケットを作成する場合は、blockPublicAccessパラメータを追加して設定する必要があります。これにより、問題が解決しました。

microCMSのコンテンツをNext.jsで表示させるアプリをCloudflare Pagesにデプロイした際にエラーが発生しました。cacheの設定はCloudflare Pagesでは利用できないため、環境変数を分岐させることで対応しました。さらに、NODE_ENVを使ってAPIキーの切り替えも可能です。このように、NEXT_RUNTIMEとNODE_ENVを使い分けることでCloudflare Pagesと開発環境での挙動を変えることができます。なお、next-on-cloudflareは便利なツールです。

Next.jsのApp Routerで構築したサイトをCloudflare Pagesにデプロイするために必要な作業をまとめました。package.jsonにビルドコマンドを登録し、ページやAPIのランタイムをedgeに変更する必要があります。また、Font(next/font/google)の読み込みも調整する必要があります。これらの作業を行えば、エラーを回避できるはずです。ただし、CMSやライブラリとの連携やデプロイ設定の変更が必要な場合もあるので、参考リンクもご覧ください。

触らない期間が不安になるため、バージョンの確認方法とNodeバージョンの警告についてまとめました。CDK CLIのバージョンは`cdk –version`で確認できます。現在のバージョンは`2.34.0`です。Nodeバージョンの警告では、Node 16は2023年9月11日以降新しいリリースでサポートされないため、サポートされているバージョンにアップグレードするよう呼びかけています。AWS CDK(v2)のCLIは`npm i -g aws-cdk@latest`で更新できます。触れなくなったときに困らないよう、技術ブログや自分のサイトでまとめておくと便利です。

HonoがAWS Lambdaで動くことがわかったので、HTMLを配信するための設定を試しました。CDKとLambdaを使用してHonoアプリをセットアップし、HTMLを返すRouteを追加しました。サーバー側でHTMLを組み立てて表示させるため、metaタグなども作成可能です。AWS CDKでデプロイして、/testなどのパスにアクセスするとHTMLが表示されます。また、APIを呼び出して結果を表示する動的な処理を追加することもできます。HonoはUIとAPIをまとめて作成できる軽量なツールです。ただし、実務で使用する場合はTwigやJSXなどでHTMLを構築する仕組みを用意する必要があります。参考記事もあります。

Sonikは、Honoのメンテナであるyusukeさんが開発しているメタフレームワークであり、Next.jsのようなファイルベースのルーティングやHonoを使用したAPIの実装が可能です。AWS CDKを使用してSonikアプリをデプロイする方法を紹介しています。SonikのセットアップやAWS Lambda向けの調整、S3の利用方法なども解説されています。ただし、LambdaからS3の画像を配信する部分には問題があり、今回はS3にリダイレクトさせた形でデプロイされています。