Media

先ほど「ステンレスタンブラー 500ml」の Content を作成したとき、メイン写真の欄は空のままにして先に進みました。タンブラーの商品ページには製品写真が必要です。この写真のように、コンテンツスタジオにアップロードしておく画像・動画・ドキュメントのファイル一つひとつが Media です。

Media は一度アップロードしておけば、複数の Content から取り出して使えます。タンブラーの製品写真を一度アップロードしておけば、タンブラー商品のメイン写真として連結し、同じ写真を特集ページのバナーにも再び使えます。写真を Content ごとに別々にアップロードする必要はありません。

このページでは Media が何かを見たうえで、タンブラーの製品写真を Media としてアップロードし、その写真をタンブラーの Content のメイン写真として連結してみます。

ファイルを切り離して管理するとよい理由

商品ごとに写真をそのつどアップロードして貼り付けると、同じ写真を複数の商品で使うときに同じファイルを何度もアップロードし直すことになります。あとでその写真をより良いものに差し替えるには、その写真を使った商品を一つひとつ探して直していく必要があります。

Media はファイルを Content と切り離して一か所にまとめておくので、この問題を減らしてくれます。写真は Media の一覧に一度だけアップロードしておき、Content ではその Media を選んで連結するだけで済みます。同じ写真を複数の商品で一緒に使えますし、どのファイルがアップロードされているかを一つの画面でまとめて見られます。

アップロードすると自動で公開されます

ここで Content と違う点が一つあります。Content は作成したあとにもう一度公開してはじめて外部に公開されますが、Media はアップロードするだけで自動的に外部に公開されます。あらためて公開ボタンを押す必要はありません。

ファイルをアップロードすると、システムがそのファイルを受け取って処理する過程を経ます。画像なら縦横のサイズを読み取り、動画なら長さを確認するというように、ファイルの情報を整理します。この処理が終わると、その Media の状態が自動的に Published に変わります。

Content は作成したあとに自分で公開してはじめて外部に公開されますが、Media はアップロードすれば処理が終わりしだい自動的に Published になります。

Published になった Media は、それ自体で外部に公開されます。Content に連結しなくても公開され、Content のメイン写真として連結するのはこの写真を使う一つの方法です。処理時間はファイルによって異なります。写真のような小さいファイルはたいていアップロードするとすぐに Published になり、大きな動画のように容量の大きいファイルは処理に少し時間がかかることがあります。大きなファイルをアップロードした直後でまだ Published でない場合は、処理が終わるまで少し待てば大丈夫です。

外部に公開しても問題ないファイルだけをアップロードしてください。 Published になった Media には固有のアドレス（リンク）が生成され、そのアドレスを知っている人ならログインなしで誰でもそのファイルを開いて見られます。別途アクセスを防ぐ仕組みはなく、アドレスがそのまま鍵になります。一度外に出たアドレスは回収しにくいので、身分証のコピーや公開されてはいけないドキュメントのような機密ファイルはアップロードしないでください。

タンブラーの製品写真をアップロードする

ここからはタンブラーの製品写真を Media としてアップロードしてみます。コンピューターに保存しておいたタンブラーの写真ファイル一枚（tumbler.png）をアップロードするとします。ファイルをアップロードする作業と、タイトル・説明を書く作業はすべて一つの画面で終わります。

1. Media の一覧画面を開いてください。
2. 一覧の右上の 作成 ボタンを押してください。
3. 開いたメニューから 単一Media を選んでください。

写真を複数枚まとめてアップロードするには、単一Media の代わりに 複数Media を選んでください。ここでは一枚だけアップロードするので 単一Media を使います。

「Mediaを作成」の作成画面が開きます。この画面には、ファイルをアップロードする領域とともに タイトル・説明 の欄があります。

4. ファイル領域の ファイルを参照 ボタンを押して、コンピューターからタンブラーの写真（tumbler.png）を選んでください。または写真ファイルを点線の領域へドラッグして置いてください。
5. タイトル の欄に ステンレスタンブラー 500ml 正面カット と入力してください。
6. 説明 の欄に 白い背景で撮影したタンブラーの正面の製品写真です。 と入力してください。

7. 右上の 作成 ボタンを押してください。

作成 を押すと写真がアップロードされ、続いてシステムがそのファイルを処理します。作成画面では状態が Draft と表示されますが、処理が終わると別途の公開なしに自動的に Published になります。

タイトル と 説明 は空のまま 作成 しても大丈夫です。ファイル名だけではあとでどの写真か見分けにくいので、書いておくと Media の一覧が増えても目的の写真をすばやく見つけられます。書いておかなかった場合は、あとでその Media を開いて 編集 で入力しても大丈夫です。

公開されたか確認する

アップロードした写真が公開されたかは、Media の一覧ですぐに確認できます。一覧には名前、種類（例: Image）、サイズ（例: 900 x 900 px）、容量（例: 50 KB）とともに、右端に ステータス の列があります。その写真の状態が Published なら公開が完了しています。

その Media を開いても、右側の ステータス の領域で同じ状態を見られます。

状態が Published になると、この写真を Content に連結できます。

タンブラー商品に写真を連結する

写真が公開されたので、ここからはタンブラーの Content のメイン写真の欄にこの写真を連結します。「商品」の Content Type を作成するときに、メイン写真を Media を指す Field として作っておきました。そのためタンブラー商品の作成画面にはメイン写真の欄があり、その欄には文字や数字を書く代わりに、あらかじめアップロードしておいた Media を選んで入れます。

1. 先ほど作成した「ステンレスタンブラー 500ml」の Content を開いてください。
2. 右上の 編集 ボタンを押してください。

編集画面を下にスクロールすると メイン写真 の欄があります。まだ写真を連結していなければ、この欄に 既存のMediaを追加 と 新しいMediaを作成 の二つのボタンが見えます。

3. メイン写真 の欄の 既存のMediaを追加 ボタンを押してください。
4. 開いた Mediaを選択 のウィンドウで、アップロードしておいたタンブラーの写真（ステンレスタンブラー 500ml 正面カット）を選んでください。

5. 右上の 保存 ボタンを押してください。

連結されると メイン写真 の欄に選んだ Media が表示されます。欄には、選んだ Media のタイトル（ステンレスタンブラー 500ml 正面カット）が記された項目として表示されます。

新しい写真をその場でアップロードしてすぐ連結するには、既存のMediaを追加 の代わりに 新しいMediaを作成 を押してください。あらかじめアップロードしておいた写真がないときに使えます。

これでこのタンブラーの Content を公開すると、連結したメイン写真も一緒に外部に公開されます。

タンブラーの Content そのものを公開する方法は Content の作成と公開 で扱います。連結した写真がその間に削除されると、タンブラーの Content の公開が止まることがあるので、連結した Media はそのままにしておくのがよいです。

連結したあとに知っておくこと

一つの写真を複数の商品で一緒に使えます。 タンブラーの製品写真をタンブラー商品に連結したあと、同じ写真を別の商品や特集ページのバナーにも同じように選んで連結できます。Media は Content にコピーされるのではなく連結されるので、一つの Media を複数の場所から指せます。

連結だけを解くことも、ファイルを消すこともできます。 タンブラー商品でメイン写真を別の写真に差し替えたいなら、編集 画面で連結を解いて別の Media を選べば大丈夫です。このとき Media 自体は一覧にそのまま残り、別の場所で使い続けられます。Media ファイルをまるごと無くすには、Media の詳細画面で 削除 します。

公開された写真は、まず公開を停止しないと消せません。 Published 状態の Media はすぐには削除されません。削除しようとすると、まず公開を停止（公開停止）するようにという案内が出ます。その写真を開いて公開停止し、状態を Draft に戻したあと 削除 すれば大丈夫です。

アップロードできるファイル形式とサイズには条件をつけられます。 「商品」の Content Type でメイン写真の Field を作るとき、この欄にアップロードできるファイルのサイズや画像の縦横のサイズに条件をつけておけます。条件に合わないファイルを連結しようとすると保存されません。どんな条件をつけられるかは Content モデリング で扱います。

写真を好みのサイズで受け取る（画像処理）

同じタンブラーの写真でも、使う場所ごとに適したサイズは異なります。商品一覧の小さなサムネイルには小さな写真が、詳細画面には大きな写真がよく合います。サイズごとに写真を別々に作ってアップロードする必要はありません。公開された Media の画像アドレスのうしろに決められたスタイル名を付けると、原本はそのままにして、その場でサイズを縮小し軽い形式に変換した画像を受け取れます。

画像アドレスの末尾に /{スタイル名} を付けます。たとえばタンブラーの写真のアドレスが https://.../tumbler.png なら、末尾に /style3 を付けた https://.../tumbler.png/style3 は、同じ写真を 128 × 128 のサイズに縮小し、WebP（容量の小さい画像形式）に変換して返します。

選べるサイズ

すべてのスタイルは原本の比率を保ったまま指定したサイズに合わせて縮小し、品質 100% の WebP に変換します。

次にやること

• Content の作成と公開: メイン写真を連結したタンブラーの Content を公開して外部に公開します。
• 状態と公開: Draft、Published、Changed といった状態が何で、どう変わるかを見ます。
• 多言語: 同じ写真を言語ごとに違うもの（例: 文言が入った画像）にする方法を扱います。Media はファイル・タイトル・説明を言語ごとに持てます。
• Content モデリング: メイン写真のように Media を連結する Field を作る方法を扱います。
• API リファレンス: 写真をアップロードして連結する作業をコードで直接行うときに必要なリクエスト形式や、ファイル形式・サイズ制限といった技術仕様を扱います。