# 原水工房

> 原水工房（haramizu.jp）は、Web技術（Astro、Next.js、Headless CMS、AI開発ツールなど）の技術ドキュメントおよび個人開発・日々の記録（ガジェット、ライフログ、マラソン、旅行など）を発信する個人Webサイトです。

## Overview

Shinichi Haramizu による個人サイト「原水工房」です。主に以下の領域についての技術ドキュメントや実践記録、ライフログを提供しています。

- **Web開発 & フロントエンド**: Astro, Next.js, React, Tailwind CSS, TypeScript
- **ヘッドレスCMS & クラウド**: Sanity, Contentful, Cloudinary, Auth0
- **AI & 開発ツール**: Google Antigravity, macOS, Windows / WSL
- **ライフログ & 趣味**: マラソン（フルマラソン・大会記録）、トライアスロン、47都道府県巡り、旅行記、ガジェットレビュー

## Key Pages

- [Top Page](https://haramizu.jp/): 原水工房のトップページ。最新記事やトピック一覧。
- [Blog](https://haramizu.jp/blog/): ブログ記事一覧。技術・日常・旅行・ガジェットなどの記事。
- [Documentation](https://haramizu.jp/doc/): 各種プロダクト・ツールの技術ドキュメントのインデックス。
- [Categories](https://haramizu.jp/category/): 記事カテゴリ一覧。
- [Tags](https://haramizu.jp/tag/): 記事タグ一覧。
- [このサイトについて](https://haramizu.jp/pages/about/): このサイトは、昔は暇つぶしにブログを書いていたのですが、ここまできたら人生のログを残していこう、ということで個人的なことを書いているブログです。
- [一眼レフはじめました](https://haramizu.jp/pages/beginning-my-camera-adventure/): レンズ交換式カメラを少し頑張ってみよう、と勉強しながらまとめているブログシリーズをまとめてみました。
- [マラソンの結果](https://haramizu.jp/pages/marathon/): これまで出てきたマラソンなどの結果を一覧でまとめている形です。今後出るマラソン大会が決まったら、都度スケジュールは更新します。
- [海外マラソン・バイクの結果](https://haramizu.jp/pages/oversea/): このページではこれまで出たことのある海外のマラソン大会に関しての記録を抜粋しています。一部、マラソンのブログ記事があるやつにはリンクを貼ってあります。
- [47都道府県チャレンジ](https://haramizu.jp/pages/prefectures/): 全国のマラソン大会に出るのが楽しくて、ついでに４７都道府県ハーフマラソン以上のレースに出る、というのをチャレンジしています。このページではその記録を掲載しています。
- [スターバックス リージョナル ランドマーク ストアの旅](https://haramizu.jp/pages/starbucks-landmark-store/): ここではスターバックスのストアの種類としてある、スターバックス リージョナル ランドマーク ストアの訪問履歴をまとめています。
- [トラベル関連のキャンペーン](https://haramizu.jp/pages/travel-campaign/): このページでは、ホテルや航空会社が展開する各種のキャンペーンを随時まとめていくようにします。
- [2026 年フランスへの旅のまとめ](https://haramizu.jp/pages/travel-to-france-paris-2026/): 2 月 26 日〜 3 月 6 日と１週間ほどのフランスへの旅、色々なネタをブログに記載していったので、それに関してのまとめのページを作ってみました。それなりのボリュームになったのですが、何か参考になればと思います。
- [トライアスロンの結果](https://haramizu.jp/pages/triathron/): 2013年から2016年ぐらいまでトライアスロンをしていました。当時の記録と関連するブログへのリンクをページにまとめています。

## Documentation

- [Antigravity ドキュメント](https://haramizu.jp/doc/antigravity/): Antigravity は Google が提供する開発者向けの生成 AI ツールです。（公開ドキュメント: 2件）
- [Apple ドキュメント](https://haramizu.jp/doc/apple/): macOS は Apple が開発した Unix ベースの OS で、直感的なUIや高いセキュリティが特徴です。最新の macOS 15 Sequoia は Apple Silicon と Intel 両方に対応し、iPhone との連携も強化されています。（公開ドキュメント: 3件）
- [Astro ドキュメント](https://haramizu.jp/doc/astro/): Astroは高速な表示を重視したモダンなWebフレームワークです。デフォルトでJavaScriptを極力送らない「アイランドアーキテクチャ」を採用し、静的サイト生成（SSG）を中心に高いパフォーマンスを実現します。ReactやVue、Svelteなど複数のUIフレームワークを併用でき、Markdownとの親和性も高く、ブログやドキュメントサイトの構築に適しています。（公開ドキュメント: 3件）
- [Auth0 ドキュメント](https://haramizu.jp/doc/auth0/): Auth0は、認証および認可のプロセスを簡素化するためのクラウドベースのサービスです。開発者がアプリケーションにシングルサインオン（SSO）、多要素認証（MFA）、ソーシャルログインなどの認証機能を迅速に統合できるように設計されています。Auth0 を使用することで、セキュリティを強化し、ユーザーエクスペリエンスを向上させることができます。（公開ドキュメント: 1件）
- [Cloudinary ドキュメント](https://haramizu.jp/doc/cloudinary/): Cloudinaryは、画像や動画の管理・最適化・配信を行うクラウド型DAMサービスで、開発者やマーケターが簡単にメディア操作と高速配信を実現できます。（公開ドキュメント: 4件）
- [Contentful ドキュメント](https://haramizu.jp/doc/contentful/): Contentfulは、コンテンツ管理と配信を柔軟に組み合わせることができるヘッドレスCMSです。開発者はAPIを通じてコンテンツを簡単に統合し、管理者はブラウザベースのインターフェースで直感的にコンテンツを作成できます。これにより、コンテンツの作成から公開までのプロセスが効率化され、複数のプラットフォームへのコンテンツ配信をシームレスに行うことができます。Contentfulは、その拡張性の高さと使いやすさから、多くの企業や開発者に利用されています。（公開ドキュメント: 3件）
- [Microsoft ドキュメント](https://haramizu.jp/doc/microsoft/): このサイトでは、Windows 11の活用法に加え、Microsoft 365 や Edge、OneDrive などのマイクロソフト製品と連携した便利なTipsや最新機能の使い方を紹介しています。（公開ドキュメント: 3件）
- [Next.js ドキュメント](https://haramizu.jp/doc/next-js/): Next.jsはReactベースのフレームワークで、SSRやSSGに対応し、パフォーマンスとSEOに優れたWebアプリを構築できます。Vercelと組み合わせて効率的な開発・運用が可能です。（公開ドキュメント: 7件）
- [Sanity ドキュメント](https://haramizu.jp/doc/sanity/): Sanityは、リアルタイムコラボレーションや柔軟なスキーマ定義が可能なヘッドレスCMSです。カスタマイズ性が高く、独自の編集UI「Sanity Studio」でコンテンツを自由に管理できます。API経由で高速にデータ取得ができ、GROQクエリで柔軟なデータ操作も可能です。開発者に人気のCMSです。（公開ドキュメント: 20件）

## Blog Categories

- [エンターテイメント](https://haramizu.jp/category/entertainment/): 映画、ドラマ、本、音楽などのエンターテイメントに関する記事や感想を紹介します。
- [ガジェット](https://haramizu.jp/category/gadget/): PC、スマートフォン、周辺機器などの購入レビューや便利なガジェット情報を紹介します。
- [製品](https://haramizu.jp/category/product/): 日常で愛用している各種製品やライフスタイルアイテムのレビューを紹介します。
- [技術情報](https://haramizu.jp/category/tech/): 日常で気になった技術情報を調べた結果や、実際にやってみたことなどを発信していきます。
- [グルメ](https://haramizu.jp/category/gourmet/): 旅先で見つけた美味しいレストランや、お気に入りのグルメ情報を紹介します。
- [学習](https://haramizu.jp/category/learning/): プログラミング技術、語学、資格取得などの日々の学習記録やTipsを紹介します。
- [マラソン](https://haramizu.jp/category/marathon/): 国内外のマラソン大会への参加レポートや、ランニングに関する記録を紹介します。
- [マネー](https://haramizu.jp/category/money/): 資産運用、ポイント活動、クレジットカードなどのマネーハックやキャンペーン情報を紹介します。
- [雑記](https://haramizu.jp/category/notes/): 日常の気づき、日記、その他の雑多なテーマについての記事をまとめています。
- [旅行](https://haramizu.jp/category/travel/): 国内外の旅行記、ホテルの宿泊記、観光スポットのレビューを紹介します。
- [トライアスロン](https://haramizu.jp/category/triathron/): トライアスロン大会への挑戦記録、トレーニング方法、機材に関するレビューを紹介します。
- [都道府県](https://haramizu.jp/category/prefecture/): 都道府県別のグルメや観光スポットの情報を紹介します。

## Recent Blog Posts

- [スターバックス リージョナル ランドマーク ストアの旅を始めました](https://haramizu.jp/blog/2026/09/11/starbucks-landmark-store-start/): [travel] スターバックスの店舗は全国津々裏にあるわけですが、その中にもリージョナル ランドマーク ストアという店舗があります。全国制覇もそうですが、せっかくなのでこのランドマークストアの旅もかねて進めていくことにしました。
- [【ラーメン】麺厨房あじさい](https://haramizu.jp/blog/2026/09/10/hakodate-ajisai/): [gourmet] 北海道といえばラーメン、函館といえばあじさい、ということで駅ビルに入っているあじさいがサクッと食べれるというのをネットでみて、バスに乗る前にラーメンを食べることにしました。
- [北海道新幹線に乗ってきました](https://haramizu.jp/blog/2026/09/09/hokkaido-shinkansen/): [travel] 青森まで来たなら、まだ乗っていない北海道新幹線に乗って全ての新幹線を制覇しなければ！ということで、弘前のスターバックスでコーヒーを飲んだ後、北海道新幹線に乗って函館まで行ってみました。
- [スターバックスの北海道、東北を獲得するために残りの青森へ](https://haramizu.jp/blog/2026/09/08/starbacks-tohoku-medal/): [travel] 今年はスターバックス 47 都道府県のメダルを獲得するべく頑張っているわけですが、北の地で残っていた青森のメダルを獲得するべく、青森に行ってきました。
- [羽田空港第一ターミナルの新しい搭乗口のあたりまで行ってみた](https://haramizu.jp/blog/2026/09/07/haneda-airport-24-29/): [travel] この週末はスターバックスのスタンプ＆メダル、そして北海道新幹線に乗って全部の新幹線を乗ったということになるために飛行機に乗るのですが、少し早めに羽田空港の新しい搭乗口を見にきました。
- [JRE ポイントプログラムのステージ、今回はステージ３でした](https://haramizu.jp/blog/2026/09/06/jre-point-2026/): [travel] ポイントとして勝手に貯まっていく JRE ポイントですが、今回はステージを意識してみました。10月からのステージの評価は 8 月末までの半年の実績で決まります。さて、その結果をちょっと追いかけていきます。
- [TOHO One のプログラムが変わってからを振り返ってみる](https://haramizu.jp/blog/2026/09/05/toho-one-point-2609/): [entertainment] 以前は 6 本見たら 1 本タダというシンプルなプログラムでしたが、今年はプログラムが変わってしまいどういう感じで映画を無料で見れるのか？ということで、少し振り返ってみたいと思います。
- [久しぶりに野球を見てきました 阪神 vs ヤクルト](https://haramizu.jp/blog/2026/09/04/tigers-260903/): [entertainment] 阪神タイガースとしては史上初の連覇がかかる今年、マジックも点灯している状況になったのですが、神宮球場のチケットを手に入れていたので、仕事を終わらせたあと見てきました
- [109 シネマズのポイントを改めて確認をする](https://haramizu.jp/blog/2026/09/03/109cinemas-point/): [entertainment] どうしても利用機会が減ってしまった 109 シネマズなのですが、過去の利用履歴も踏まえて少し見直してみました。
- [1ヶ月の振り返り - 26年8月](https://haramizu.jp/blog/2026/09/02/monthly-report-2026-08/): [notes] 毎月前の月を振り返るレポートの記事のタイミングになりました。何かと忙しくて、過去に訪問をしたスターバックスのお店のお話ばかり掲載している形となってしまいました。そのネタもそろそろなくなってきたので、頑張って復活させていく必要があります。
- [松屋のロカボ定食](https://haramizu.jp/blog/2026/09/01/matsuya-morning/): [gourmet] 朝早くからの映画鑑賞、ということでスターバックスでコーヒーだけではちょっと朝は寂しいということで、映画を見る前に松屋でロカボ定食を食べてきました。
- [映画 シェルターを見てきました](https://haramizu.jp/blog/2026/08/31/movie-shelter/): [entertainment] とにかく一般人のはずが、キレたら止まらない男を毎回演じているジェイソンステイサムの映画の新作が出てきたので、毎度のことながら見に行ってみました。
- [ニトリのソファーが壊れたので修理依頼をしてみた](https://haramizu.jp/blog/2026/08/30/nitori-sofa-support/): [notes] 実は壊れてからなかなか依頼をする時間がなかったのですが、流石にそろそろ治した方がいいだろうと、ということでニトリのソファーの修理依頼をしました。なかなかいい経験だったので、それを記録に残しておきたいと思い、まとめておきます。
- [ベースフードの焼きそばを試してみた](https://haramizu.jp/blog/2026/08/29/base-food-yakisoba/): [gourmet] 2026年5月からダイエットに取り組んでいて、お昼はだいたいセブンイレブンのサラダと何か、という感じで済ませています。最近はジョギングを再開して、それではお腹が空いてしまうということで何か試してみよう、ということでベースフードの焼きそばを試してみました。
- [映画 ミニオンズ＆モンスターズを観てきました](https://haramizu.jp/blog/2026/08/28/movie-minions-monsters/): [entertainment] 実は先日ユニバーサルスタジオジャパンに行ってきたのですが、その際にミニオンズが好きというのを思い出した娘と一緒に、ミニオンズ＆モンスターズを観てきました。

## Feeds & Metadata

- [Sitemap](https://haramizu.jp/sitemap.xml): XML サイトマップ。全公開URLを網羅。
- [RSS Feed](https://haramizu.jp/rss.xml): RSS 2.0 フィード。最新記事の配信。
- [GitHub Repository](https://github.com/haramizu/haramizu.jp): サイトのソースコードリポジトリ。

## Optional

LLMが各プロダクトの個別詳細ドキュメントを直接参照するためのインデックスリストです。

### Antigravity
- [Antigravity の利用状況の確認と Tips](https://haramizu.jp/doc/antigravity/antigravity-usage/): このサイトのリニューアルに関しては、全面的に Antigravity を利用して作業自体も完了させることができました。使い始めた最初の頃は、これは便利や！とよく分からずあっというまにリミット声をしたわけですが、リミットのルールに関して頭に入れておく必要があると思って調べた内容です。
- [Antigravity IDE を Linux の環境にインストールする](https://haramizu.jp/doc/antigravity/install-linux/): このドキュメントでは、Google が提供する Antigravity を利用して開発をするツール、Antigravity IDE を Linux の環境にインストールをする手順を紹介しています。

### Apple
- [iCloud メールでカスタムメールドメインを利用する](https://haramizu.jp/doc/apple/icloud-plus-custom-mail-domain/): iCloud+ を利用している場合、見逃しがちなカスタムドメインを利用することができる機能です。この機能を利用すれば、ドメインの維持費用は別途かかりますが、メールに関しての部分は設定さえしてしまえば、独自ドメインを利用してメールを利用することができます。ここではこの手順を紹介します。
- [macOS の環境をセットアップ](https://haramizu.jp/doc/apple/set-up-macos/): このガイドでは、macOS の上に開発環境をセットアップする手順についてまとめています。
- [Lets's Encrypt の証明書を作成する](https://haramizu.jp/doc/apple/create-a-lets-encrypt-certificate/): このドキュメントでは、Let's Encrypt の証明書を macOS 上で作る手順を紹介しています。また作成した証明書の動作確認として、Windows Server 2025 に証明書をインストールして確認をします。

### Astro
- [Astro で作成したサイトを GitHub Actions を利用して Cloudflare で公開する](https://haramizu.jp/doc/astro/astro-cloudflare/): 今回は Astro を利用したWebサイトを GitHub Actions を利用して Cloudflare Pages で公開していきます。
- [Starlight を利用してサイトを立ち上げる](https://haramizu.jp/doc/astro/build-website-using-starlight/): 今回は Astro を利用したドキュメントサイトを立ち上げるためのフレームワーク Starlight のサイトを立ち上げていきます。
- [Cloudflare Pagesにウェブサイトを公開する](https://haramizu.jp/doc/astro/deploy-website-to-cloudflare-pages/): 今回は、Astro で作成をした Web サイトを Cloudflare Pages に展開します。これにより、CDN を利用した Web サイトのホスティングが実現でき、かつ小さな規模なので無料で利用できます。

### Auth0
- [Auth0 の活用](https://haramizu.jp/doc/auth0/using-auth0/): 実際の Web サイトにて会員向け情報提供などを展開するにあたって、ログイン認証の仕組みを組み合わせてサイトを運用していくことがあります。ここでは、Auth0 の利用方法に関して紹介をしていきます。

### Cloudinary
- [Cloudinary 概要](https://haramizu.jp/doc/cloudinary/cloudinary-quick-start-guide/cloudinary-introduction/): Cloudinaryは、画像や動画などのメディアアセットの管理、最適化、配信を一元的に行えるクラウドベースのデジタルアセット管理（ DAM ）サービスです。開発者やマーケターは、アップロードから変換、圧縮、リサイズ、フォーマット変換、CDNによる高速配信まで、コードやUIを通じて簡単に操作できます。
- [ロゴの透かし画像](https://haramizu.jp/doc/cloudinary/cloudinary-quick-start-guide/watermarked-logo-image/): 最初のステップとしてロゴをアップロードして、画像に対してウォーターマークを設定する設定を追加します。この手順を学ぶことで、画像に関して毎回同じ処理をするような変換に関する動作を理解することができます。
- [最初のアセットをアップロード](https://haramizu.jp/doc/cloudinary/cloudinary-quick-start-guide/upload-your-first-asset/): Cloudinaryでは、ローカルデバイス、URL、画像検索など、さまざまなソースから1枚または複数の画像を簡単にアップロードできます。たとえば、自分のパソコンやスマートフォン内の写真はもちろん、ウェブ上の画像URLや外部サービスを指定して直接取り込むことも可能です。このページではアセットのアップロードの基本的な手順を確認します。
- [構造化メタデータのフィールドの設定](https://haramizu.jp/doc/cloudinary/cloudinary-quick-start-guide/cloudinary-metadata-fields/): Cloudinaryでは、アップロードした画像や動画に対してメタデータとして説明情報を登録することができます。このメタデータにはタイトル、キャプション、タグ、カスタムフィールドなどを設定でき、これにより大量のアセットの中から目的のファイルを素早く検索・特定できるようになります。長期的な運用では、管理対象のアセットが増えるにつれて検索性が重要になるため、メタデータの活用は作業効率の向上に大きく貢献します。

### Contentful
- [WordPress から Contentful への移行](https://haramizu.jp/doc/contentful/wordpress2contentful/introduction/): ここでは、WordPress の基本的なブログを Contentful に移行する方法についてまとめています。なお、手持ちの WordPress の環境を利用して移行した形のため、別の構造の場合は正しく移行できない可能性はあります。その点はご了承ください。
- [Contentful に移行したコンテンツを Next.js で表示する](https://haramizu.jp/doc/contentful/wordpress2contentful/contentful-nextjs-blog/): WordPress から Contentful に移行したコンテンツを Next.js で表示するブログのプロジェクトを追加で作成をしました。基本的には WordPress のブログだけであれば、移行をしてしまえばこのプロジェクトで繋がるようになります。
- [Contentful に移行したコンテンツを Astro で表示する](https://haramizu.jp/doc/contentful/wordpress2contentful/contentful-astro-blog/): WordPress から Contentful に移行したコンテンツを Astro で表示するブログのプロジェクトを追加で作成をしました。基本的には WordPress のブログだけであれば、移行をしてしまえばこのプロジェクトで繋がるようになります。

### Microsoft
- [Playwright を展開する](https://haramizu.jp/doc/microsoft/deploying-playwright/): Playwright は、Microsoft によって開発されたオープンソースのエンドツーエンドテスト自動化フレームワークです。複数のブラウザ（Chromium、Firefox、WebKit）をサポートし、高速で信頼性の高いテストを実行できます。Playwright は、クロスブラウザテスト、スクリーンショット、PDF 生成など、多くの機能を提供します。
- [Windows 11 Pro と Ubuntu Desktop の共存](https://haramizu.jp/doc/microsoft/dual-booting-windows-11-pro-and-ubuntu-desktop/): 今回は Windows 11 Pro のマシンをデュアルブートで Ubuntu が起動する手順を確認していきます。
- [WSL を利用して Ubuntu の環境のセットアップ](https://haramizu.jp/doc/microsoft/wsl-ubuntu-install/): このページでは Windows 11 の環境に Windows Subsystem for Linux を利用して Ubuntu が動作する環境を立ち上げるための手順をまとめています。

### Next.js
- [Google Tag Manager の追加](https://haramizu.jp/doc/next-js/nextjs-google-tag-manager/): Web サイトを運営する際には、様々なツールを活用することが求められます。これらのツールを利用する際には、Meta データや JavaScript をサイトに適用する必要が生じることがあります。もちろん、CMS を使用して管理することも可能ですが、Google Tag Manager のような汎用的なツールを利用することで、より柔軟かつ効率的な運用が実現できます。
- [Embla Carousel を Next.js で利用する](https://haramizu.jp/doc/next-js/next-js-embla-carousel/): Web サイトのトップページやナビゲーションなどで利用されるスライドするコンポーネント、Carousel を Next.js App Router に実装します。今回は、Embra Carousel を利用します。
- [Next.js + Tailwind CSS + shadcn/ui](https://haramizu.jp/doc/next-js/next-js-tailwind-css-shadcn-ui/): 最近話題の、UI コンポーネントの shadcn/ui をこのドキュメントでは評価していきます。shadcn/ui は、UI コンポーネントライブラリとして提供されており、npm パッケージとして提供する形ではないため、使いやすく、カスタマイズ可能なコンポーネントが豊富に揃っています。
- [Google Maps Library](https://haramizu.jp/doc/next-js/nextjs-googlemaps/): Google は 2024年5月21日に、Google Maps Platform 向けの React ライブラリをリリースしました。
- [Next.js + Storybook](https://haramizu.jp/doc/next-js/next-js-storybook/): この文書では、Next.js のプロジェクトに Storybook を追加して利用する方法を紹介します。Storybook を利用すると、事前に用意したデータを利用してコンポーネントを表示することができるため、プログラムの開発と並行してコンポーネントの UI を作成していくことができます。
- [Next.js サイトでの多言語化](https://haramizu.jp/doc/next-js/multi-language-on-the-next-js-site/): Next.js を利用したサイトにおいて、多言語サイトを展開する際のポイントをこの記事ではまとめておきます。
- [Next.js と Tailwind CSS でダークモードの実装](https://haramizu.jp/doc/next-js/implementing-dark-mode-with-next-js-and-tailwind-css/): サイトを実装するときに、企業向けはあまり利用されませんが、それ以外に多いダークモードの実装を、Next.js と Tailwind CSS を利用して実装します。

### Sanity
- [WordPress からの移行について](https://haramizu.jp/doc/sanity/migration-from-wordpress/introduction-migration-from-wordpress/): このシリーズでは Wordpress のサイトのコンテンツを Sanity に移行する手順を紹介していきます。まず最初のステップとして、今回は作業をする環境を紹介していきます。
- [Next.js と Sanity　を使用したブログ構築](https://haramizu.jp/doc/sanity/next-js-and-sanity/retrieving-content-from-sanity-using-next-js/): この記事では新しいプロジェクトを作成して、Next.js で Sanity で管理しているコンテンツを取得する手順を紹介します。
- [Sanity 概要](https://haramizu.jp/doc/sanity/sanity-quick-start-guide/sanity-introduction/): Sanity は、高い柔軟性を持つヘッドレスCMSで、構造化コンテンツの管理に優れています。カスタムスキーマを TypeScript で定義でき、リアルタイムな共同編集や豊富なAPI連携が可能です。このコースでは、Sanity のチュートリアルを参考にしながら、どのような製品か紹介をしていきます。
- [Studio の準備とスキーマタイプ](https://haramizu.jp/doc/sanity/migration-from-wordpress/preparing-a-studio-and-schema-types/): 前回の前提条件のところで Wordpress に関する環境のチェックが終わっていれば、早速作業に入りましょう。今回は、CMS の環境となる Studio の作成と、コンテンツスキーマの準備になります。
- [利用する関連パッケージのインストール](https://haramizu.jp/doc/sanity/next-js-and-sanity/installing-the-required-packages/): 前回は Next.js のトップページでブログのタイトルを取得するところまで進めました。今回は、ブログを作っていくにあたって手持ちのライブラリなどを追加して環境を整えて行きます。
- [Sanity Studio の起動](https://haramizu.jp/doc/sanity/sanity-quick-start-guide/quick-guide-step-1/): ここでは公式ガイドの前提条件と次のステップに関して紹介をします。このステップが完了した時には、Sanity の管理画面となる Sanity Studio にアクセスすることが可能となります。
- [移行スクリプトの準備](https://haramizu.jp/doc/sanity/migration-from-wordpress/preparing-your-migration-script/): Wordpress から Sanity にコンテンツを移行するための受け皿の準備が完了したので、サンプルとして提供されているマイグレーションのスクリプトを利用していきます。
- [ブログ投稿のルーティングを設定](https://haramizu.jp/doc/sanity/next-js-and-sanity/set-up-blog-post-routing/): 初回のドキュメントでブログのタイトルなどを取得していますが、リンクをクリックしてもエラーになります。そこで今回は各種記事のルーティングを実装して行きます。
- [GROQ を学ぶ](https://haramizu.jp/doc/sanity/sanity-quick-start-guide/quick-guide-step-2/): Sanity に保存しているデータを取得する仕組みとして、GraphQL 以外に GROQ という仕組みが提供されています。今回は、この GROQ に関して動作確認をしていきます。
- [投稿タイプの処理](https://haramizu.jp/doc/sanity/migration-from-wordpress/processing-post-types/): 前回の手順で、ブログの記事一覧を取得して Sanity Studio で投稿一覧を参照することができるようになりました。今回は投稿しているコンテンツについてもう少し細かく処理をしていきます。
- [Next.js との連携](https://haramizu.jp/doc/sanity/sanity-quick-start-guide/quick-guide-step-3/): 前回は Sanity Studio の Vision を利用して、GROQ を利用したクエリーから必要となるコンテンツの取得ができました。今回は、Next.js から同様の処理を実行して Web のコンテンツとして利用する方法を紹介します。
- [アセットのアップロード](https://haramizu.jp/doc/sanity/migration-from-wordpress/uploading-assets/): この記事では、Wordpress のサービスにアップロードしている画像などをアップロードしていきます。なお、公式の手順は自分で Wordpress をホスティングをしている、もしくは有償のプランのみの手続きとなるため、ここでは別の手順で進めます。
- [タイプの生成](https://haramizu.jp/doc/sanity/sanity-quick-start-guide/quick-guide-step-4/): 前回はサンプルのコードとして完結させるために、Typescript で利用する Type を手作業で作成をしました。今回は、定義しているフィールドに関しての Type を生成します。
- [HTMLを Portable Text に変換する](https://haramizu.jp/doc/sanity/migration-from-wordpress/converting-html-to-portable-text/): ここでは Wordpress のコンテンツエリアで管理をしている RichText のデータを Portable Text 形式に変換して、Sanity のコンテンツとして利用するための手順をまとめています。
- [コンテンツアプリケーションの作成](https://haramizu.jp/doc/sanity/sanity-quick-start-guide/quick-guide-step-5/): 多くのケースでは Sanity Studio の管理画面を利用してコンテンツの編集をしますが、用途によってはコンテンツを編集するためのアプリケーションを用意する方が良い場合があります。今回はこれに対応したアプリケーションの作成を実践します。
- [コンテンツの再構築](https://haramizu.jp/doc/sanity/migration-from-wordpress/restructuring-content/): ブログのページの移行ができたので、残るはページのコンテンツを移行していきます。ページの使い方によってはこの手順はできませんが、基本機能ということで参考にしてください。
- [Sanity のコンテンツツリーの制御](https://haramizu.jp/doc/sanity/controlling-the-sanity-content-tree/): Sanity Studio で表示するコンテンツの一覧に関して、表示のルールを適用して作業をしやすいようにすることが可能です。今回はこの部分を取り上げます。
- [ポータブルテキストエディタのカスタマイズ](https://haramizu.jp/doc/sanity/customizing-the-portable-text-editor/): Sanity の Portable Text Editor は標準的な HTML を扱うところまで用意されています。また、カスタムコンポーネントを作成することで、例えば地図情報と合わせたお店の情報、という形の定型のコンテンツに関して簡単に扱えるようにしたいといったコンテンツを入れることも可能です。今回は Portable Text Editor にカスタムのコンテンツの項目を追加するための手順をまとめます。
- [Astro から Sanity のコンテンツを取得する](https://haramizu.jp/doc/sanity/retrieve-content-from-astro-to-sanity/): この記事では、Web フレームワークの Astro を利用して Sanity のコンテンツを利用するブログを作るための最初のステップ、コンテンツの取得を紹介します。
- [Webhook を利用してサイトの更新を実行 - Sanity](https://haramizu.jp/doc/sanity/use-webhooks-to-execute-site-updates-sanity/): Sanity でコンテンツの公開をした際に、今回は Cloudflare で展開しているサイトの更新を行うための Webhook の作成手順を紹介します。