Next.js × Tailwind CSS（Flowbite 利用）でダークモード機能を実装したので、実装方法を紹介します。 完成形は、このブログのヘッダーに切り替え用のドロップダウンから確認できます。 前提 利用している技術は以下を想定しています。 Next.js Ver. 14.0.4 Tailwind CSS Ver. 3.4.16 Flowbite Ver. 2.2.0 React Ver. 18...
a-blog cms をバックエンドで動かして、Next.js でフロントエンドを構築している Web サイトで sitemap.xml を実装する方法を紹介します。 このサイトでも今回紹介する方法で実装した sitemap.xml を以下のURLで確認できます。 https://blog.uidev.jp/sitemap.xml 利用するライブラリ acms-js-sdk Metadata Files API Ne...
a-blog cms をバックエンドで動かして、Next.js でフロントエンドを構築している Web サイトで RSS Feed を実装する方法を紹介します。 このサイトでも今回紹介する方法で実装した RSS Feed を以下のURLで配信しています。是非、ご利用の RSS Reader に登録してみてください。 https://blog.uidev.jp/feed 利用するライ...
a-blog cms には API 機能というモジュールが出力する変数をJOSNで取得する機能があります。 今回は、a-blog cms の API 機能を扱いやすくするための SDK である acms-js-sdk を開発したので、詳しい利用方法をご紹介いたします。 acms-js-sdk は OSS としてGitHub にて公開しています。 SDK を利用することで、複雑にな...
Next.js で Date オブジェクトに変換した日付のデータをサーバーコンポーネントとクライアントコンポーネントで利用している場合の対応に戸惑ったので、原因と対応方法を備忘録としてブログに残しておきます。 今回、Date オブジェクトを利用していて困った点は次の点になります。 ローカル環境と本番環境でタイムゾーン...
このエントリーは、 a-blog cms Advent Calendar 2023 19日目 の記事です。 本日、個人ブログを、a-blog cms × Next.js の構成でリニューアルしました。 このエントリーでは、a-blog cmsをヘッドレスCMSとして活用し、Next.js でテンプレートを作ってみての良かったこと、難しかったことについてまとめています。 ちなみ...
Vue3 × TypeScript でミニマルなモーダルコンポーネントをライブラリとして公開してみました。 どんなモーダル？ 必要最低限の機能を備えたミニマルなモーダルです。必要最低限といってもアクセシビリティには以下の点で配慮しています。 モーダル要素に role 属性、aria-modal 属性、aria-labelledby 属性、aria-descri...
これは a-blog cms Advent Calendar 2022 19日目の記事です。 今回は、現在開発中の ShoppingCart 拡張アプリについて、個人的にここは推しポイントだというところを紹介していきたいと思います。 ShoppingCart 拡張アプリとは ShoppingCart 拡張アプリとは、a-blog cms で EC サイトを構築できるようにするための...
husky と lint-staged を活用して、コミット時に自動で ESLInt や Prettier を走らせる事があるかと思います。有料の Git GUI クライアントである Tower からコミット時に husky で lint-staged を実行しようとしたらエラーが発生してしまいました。今回は、Tower で husky を実行できるようにする方法を紹介します。 結...
今回は、Xserver に nodenv をインストールする方法を紹介します。Web で調べると nodebrew を Xserver にインストールする方法は出てきますが、 nodenv をインストールする方法は出てこなかったのでブログに残しておこうと思いました。 nodenv-installer nodenv には nodenv-installer というインストーラーが公式に用...