CMS を開発する上で必ず必要不可欠な UI として、ブラウザ上で「HTMLを編集するUI」が存在します。 contenteditable に始まり、TinyMCE や CKEditor のようなリッチエディタ、Gutenberg のようなブロックエディタと呼ばれるUIが登場し、Webブラウザの中でHTMLを編集できるようになりました。 しかし、その裏側の仕組みは...

このエントリーは「a-blog cms Advent Calendar」の19日目の記事です。 今年は、a-blog cms の次期バージョンである Ver. 3.2 でエントリー管理画面にカスタムフィールド検索機能を実装した経験から、カスタムフィールド検索機能についての知見が深まったので共有していこうと思います。 まず、a-blog cms のカスタムフ...

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 サイトを構築できるようにするための...