H 原水工房
← タグ一覧に戻る
Tag

#Sanity

技術メモ

ポータブルテキストエディタのカスタマイズ

Sanity の Portable Text Editor は標準的な HTML を扱うところまで用意されています。また、カスタムコンポーネントを作成することで、例えば地図情報と合わせたお店の情報、という形の定型のコンテンツに関して簡単に扱えるようにしたいといったコンテンツを入れることも可能です。今回は Portable Text Editor にカスタムのコンテンツの項目を追加するための手順をまとめます。

技術メモ

Sanity のコンテンツツリーの制御

Sanity Studio で表示するコンテンツの一覧に関して、表示のルールを適用して作業をしやすいようにすることが可能です。今回はこの部分を取り上げます。

技術メモ

Cloudflare Pagesにウェブサイトを公開する

今回は、Astro で作成をした Web サイトを Cloudflare Pages に展開します。これにより、CDN を利用した Web サイトのホスティングが実現でき、かつ小さな規模なので無料で利用できます。

技術メモ

ブログ投稿のルーティングを設定

初回のドキュメントでブログのタイトルなどを取得していますが、リンクをクリックしてもエラーになります。そこで今回は各種記事のルーティングを実装して行きます。

技術メモ

Astro から Sanity のコンテンツを取得する

この記事では、Web フレームワークの Astro を利用して Sanity のコンテンツを利用するブログを作るための最初のステップ、コンテンツの取得を紹介します。

技術メモ

利用する関連パッケージのインストール

前回は Next.js のトップページでブログのタイトルを取得するところまで進めました。今回は、ブログを作っていくにあたって手持ちのライブラリなどを追加して環境を整えて行きます。

技術メモ

HTMLを Portable Text に変換する

ここでは Wordpress のコンテンツエリアで管理をしている RichText のデータを Portable Text 形式に変換して、Sanity のコンテンツとして利用するための手順をまとめています。

技術メモ

WordPress からの移行について

このシリーズでは Wordpress のサイトのコンテンツを Sanity に移行する手順を紹介していきます。まず最初のステップとして、今回は作業をする環境を紹介していきます。

技術メモ

Studio の準備とスキーマタイプ

前回の前提条件のところで Wordpress に関する環境のチェックが終わっていれば、早速作業に入りましょう。今回は、CMS の環境となる Studio の作成と、コンテンツスキーマの準備になります。

技術メモ

移行スクリプトの準備

Wordpress から Sanity にコンテンツを移行するための受け皿の準備が完了したので、サンプルとして提供されているマイグレーションのスクリプトを利用していきます。

技術メモ

投稿タイプの処理

前回の手順で、ブログの記事一覧を取得して Sanity Studio で投稿一覧を参照することができるようになりました。今回は投稿しているコンテンツについてもう少し細かく処理をしていきます。

技術メモ

コンテンツの再構築

ブログのページの移行ができたので、残るはページのコンテンツを移行していきます。ページの使い方によってはこの手順はできませんが、基本機能ということで参考にしてください。

技術メモ

アセットのアップロード

この記事では、Wordpress のサービスにアップロードしている画像などをアップロードしていきます。なお、公式の手順は自分で Wordpress をホスティングをしている、もしくは有償のプランのみの手続きとなるため、ここでは別の手順で進めます。

技術メモ

Sanity Studio の起動

ここでは公式ガイドの前提条件と次のステップに関して紹介をします。このステップが完了した時には、Sanity の管理画面となる Sanity Studio にアクセスすることが可能となります。

技術メモ

GROQ を学ぶ

Sanity に保存しているデータを取得する仕組みとして、GraphQL 以外に GROQ という仕組みが提供されています。今回は、この GROQ に関して動作確認をしていきます。

技術メモ

Next.js との連携

前回は Sanity Studio の Vision を利用して、GROQ を利用したクエリーから必要となるコンテンツの取得ができました。今回は、Next.js から同様の処理を実行して Web のコンテンツとして利用する方法を紹介します。

技術メモ

タイプの生成

前回はサンプルのコードとして完結させるために、Typescript で利用する Type を手作業で作成をしました。今回は、定義しているフィールドに関しての Type を生成します。

技術メモ

コンテンツアプリケーションの作成

多くのケースでは Sanity Studio の管理画面を利用してコンテンツの編集をしますが、用途によってはコンテンツを編集するためのアプリケーションを用意する方が良い場合があります。今回はこれに対応したアプリケーションの作成を実践します。

技術メモ

Sanity 概要

Sanity は、高い柔軟性を持つヘッドレスCMSで、構造化コンテンツの管理に優れています。カスタムスキーマを TypeScript で定義でき、リアルタイムな共同編集や豊富なAPI連携が可能です。このコースでは、Sanity のチュートリアルを参考にしながら、どのような製品か紹介をしていきます。