ドキュメントの更新を同期

docs/manual/画像.md

@@ -0,0 +1,89 @@
+---
+contentId: image
+directory: manual
+---
+
+# 画像
+
+画像フィールドは、画像ファイルを管理するためのフィールドです。  
+ブログ記事のサムネイル、商品画像、スタッフ紹介のプロフィール写真など、コンテンツ内で使用する画像を管理するのに適しています。
+
+データの入稿方法
+--------
+
+![画像フィールドを操作するGIF画像](https://images.microcms-assets.io/assets/d6af1616730544a596d299c20834f460/b291c3cb13454c518c1e2488bdbf19cd/CleanShot%202025-12-19%20at%2015.47.55.gif?w=800&h=465)
+
+1.  画像フィールドをクリックすると「メディア管理」のモーダルが表示されます。
+2.  すでにアップロードされている画像を選択するか、\[+ アップロード\]ボタンから新しい画像をアップロードします。
+3.  使用したい画像をクリックし、\[この画像を使用する\]ボタンを押すと選択が確定します。
+
+※フィールドに直接ファイルをドラッグ＆ドロップしてアップロード・選択することも可能です。
+
+### 補足
+
+*   画像の左下にファイル名が表示されます。
+*   画像にカーソルを合わせる（ホバー）と表示されるズームボタン（虫眼鏡アイコン）をクリックすると、拡大プレビューが表示されます。
+*   画像にカーソルを合わせると表示される\[×\]ボタンをクリックすると、選択が解除されます。
+
+
+API、CSVを利用した入稿については以下のドキュメントをご参照ください。
+
+https://document.microcms.io/content-api/post-content#h7b3c950f25
+
+https://document.microcms.io/manual/csv-import#h2b3036ae9c
+
+詳細設定
+----
+
+設定項目
+
+説明
+
+必須項目
+
+設定をONにすると入稿時の入力が必須となります。
+
+説明文
+
+入稿画面に表示する説明文です。
+
+画像のサイズ制限
+
+画像の`width`、`height`の値を制限します。設定したサイズと一致しない場合はエラーとなります。
+
+GET APIのレスポンス形式
+---------------
+
+詳細は以下のドキュメントをご参照ください。
+
+https://document.microcms.io/content-api/get-api-field-responses#he02e86da57
+
+フロントエンドでの利用方法
+-------------
+
+画像フィールドは、アップロードした画像の`url`、`width`、`height`、`alt`などの情報を含むオブジェクトとして返されます。  
+※ 拡張子や設定によっては、`url`以外のキー自体が含まれない場合もあります。  
+返却された`url`をそのままsrc属性に指定することで画像を表示でき、`width`と`height`を指定することで表示サイズを設定できます。  
+以下はNext.jsの実装例です。
+
+    export default async function Page({ params }) {
+      const { slug } = await params;
+
+      // microCMS JavaScript SDK（https://github.com/microcmsio/microcms-js-sdk）を使用してデータを取得
+      const data = await client.getListDetail({
+        endpoint: "blog",
+        contentId: slug,
+      });
+
+      return (
+        <main>
+          {/* imageFieldはフィールドIDです。実際のフィールドIDに置き換えてください */}
+          <Image
+            src={`${data.imageField.url}?w=800&fm=webp`} // 画像APIを指定
+            alt={data.imageField.alt || ''}
+            width={data.imageField.width}
+            height={data.imageField.height}
+          />
+        </main>
+      );
+    }