技術メモ
投稿タイプの処理
前回の手順で、ブログの記事一覧を取得して Sanity Studio で投稿一覧を参照することができるようになりました。今回は投稿しているコンテンツについてもう少し細かく処理をしていきます。
← カテゴリー一覧に戻る
カテゴリ
技術情報 (ページ 2)
技術メモ
アセットのアップロード
この記事では、Wordpress のサービスにアップロードしている画像などをアップロードしていきます。なお、公式の手順は自分で Wordpress をホスティングをしている、もしくは有償のプランのみの手続きとなるため、ここでは別の手順で進めます。
技術メモ
iCloud メールでカスタムメールドメインを利用する
iCloud+ を利用している場合、見逃しがちなカスタムドメインを利用することができる機能です。この機能を利用すれば、ドメインの維持費用は別途かかりますが、メールに関しての部分は設定さえしてしまえば、独自ドメインを利用してメールを利用することができます。ここではこの手順を紹介します。
技術メモ
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 のチュートリアルを参考にしながら、どのような製品か紹介をしていきます。
技術メモ
Next.js + Storybook
この文書では、Next.js のプロジェクトに Storybook を追加して利用する方法を紹介します。Storybook を利用すると、事前に用意したデータを利用してコンポーネントを表示することができるため、プログラムの開発と並行してコンポーネントの UI を作成していくことができます。
技術メモ
Embla Carousel を Next.js で利用する
Web サイトのトップページやナビゲーションなどで利用されるスライドするコンポーネント、Carousel を Next.js App Router に実装します。今回は、Embra Carousel を利用します。
技術メモ
Cloudinary 概要
Cloudinaryは、画像や動画などのメディアアセットの管理、最適化、配信を一元的に行えるクラウドベースのデジタルアセット管理（ DAM ）サービスです。開発者やマーケターは、アップロードから変換、圧縮、リサイズ、フォーマット変換、CDNによる高速配信まで、コードやUIを通じて簡単に操作できます。
技術メモ
構造化メタデータのフィールドの設定
Cloudinaryでは、アップロードした画像や動画に対してメタデータとして説明情報を登録することができます。このメタデータにはタイトル、キャプション、タグ、カスタムフィールドなどを設定でき、これにより大量のアセットの中から目的のファイルを素早く検索・特定できるようになります。長期的な運用では、管理対象のアセットが増えるにつれて検索性が重要になるため、メタデータの活用は作業効率の向上に大きく貢献します。
技術メモ
最初のアセットをアップロード
Cloudinaryでは、ローカルデバイス、URL、画像検索など、さまざまなソースから1枚または複数の画像を簡単にアップロードできます。たとえば、自分のパソコンやスマートフォン内の写真はもちろん、ウェブ上の画像URLや外部サービスを指定して直接取り込むことも可能です。このページではアセットのアップロードの基本的な手順を確認します。
技術メモ
ロゴの透かし画像
最初のステップとしてロゴをアップロードして、画像に対してウォーターマークを設定する設定を追加します。この手順を学ぶことで、画像に関して毎回同じ処理をするような変換に関する動作を理解することができます。
技術メモ
WSL を利用して Ubuntu の環境のセットアップ
このページでは Windows 11 の環境に Windows Subsystem for Linux を利用して Ubuntu が動作する環境を立ち上げるための手順をまとめています。