アセットマネージャー

アセットマネージャーへのアクセス

ダッシュボードの上部ナビゲーションバーのAssetsリンクをクリックして、アセットマネージャー (opens in a new tab)に移動します。

ブラウズ

アセットマネージャーホームページにはリストビューが表示され、特定のソースのすべてのアセットをブラウズできます。左上のソースドロップダウンからソースを選択して切り替えることができます（アセットマネージャーの設定にアセットを持つ1つのソースしかない場合は、ドロップダウンオプションは表示されません）。

デフォルトでは、アセットは作成日によってソートされ、最新のアセットが最初に表示されます。他のサポートされているソートには、更新日とファイルサイズがあります。すべてのソートは昇順または降順にすることができます。

画像詳細

リストビューで画像のサムネイルをクリックすると、その画像の詳細が右側の情報パネルに表示されます。

情報パネルにはメタデータ、AIによるタグ、ユーザー定義のカテゴリ、ユーザー定義のカスタムフィールド、コンテンツアラート、色データが表示されます。各セクションは開閉でき、アセットマネージャーはデバイス/ブラウザごとに開閉状態を記憶します。

注意: アセットマネージャーでは、各画像の上限は500MBです。

メタデータ

このセクションには画像のメタデータが表示されます：

• ファイル名
• クリック可能なimgix URL（例：https://assets.imgix.net/examples/bridge.jpg） (opens in a new tab)
• コンテンツタイプ
• ファイルサイズ
• 寸法
• DPI
• 顔（アカウントで顔検出が有効な場合）

アセットタグ

アセットタグはAIによる分析で生成されます。タグは画像のコンテンツまたは主題を記述するために使用されます。タグは信頼度スコア順に表示され、特定のタグをホバーするとそのスコアが表示されます。

タグをクリックすると、そのタグを持つ他の画像をそのソースで検索します。

画像からタグを削除するには、「Edit」ボタンをクリックし、「×」をクリックしてタグを削除し、「Save」ボタンをクリックします。削除されたタグは灰色で表示され、信頼度レベルは0に設定されます。

アセットタグ生成はプレミアム機能であり、すべてのアカウントで利用可能ではありません。このプレミアム機能をアカウントで有効にしたい場合は、お問い合わせください (opens in a new tab)。

カテゴリ

カテゴリはユーザーによって定義され、アセットを整理するために使用されます。カテゴリを追加するには、「Add」ボタンをクリックし、既存のカテゴリを選択するか、「Add new category」をクリックして新しいカテゴリを入力します。カテゴリをクリックすると、そのカテゴリを持つ他の画像をそのソースで検索します。

カテゴリはアセットマネージャー設定を介して削除または編集できます。

カスタムフィールド

カスタムフィールドは、画像に関連情報を関連付けるために使用できるキーと値のペアです。一般的なユースケースは、キーが「User ID」、値が「123」のユーザーまたは製品IDを追加することです。カスタムフィールドを追加するには、「Add」をクリックし、利用可能なキーを選択するか、「Add New Key」を選択します。キーと値を入力して「Save」をクリックします。

カスタムフィールドキーはアセットマネージャー設定を介して削除または編集できます。

コンテンツアラート

コンテンツアラートはAIによる画像分析によって生成され、成人向け、暴力的、医療関連、あえて挑発的、偽装の5つのカテゴリに分けられます。各画像は5つのカテゴリそれぞれにスコアが与えられ、低確率から高確率まで次のようにリストされます：疑わしい、ありそうにない、可能性がある、ありそう、確実。画像が成人向けまたは暴力的カテゴリで「ありそう」またはそれ以上のスコアを得た場合、コンテンツアラートのヘッダーのアイコンがコンテンツアラートの重大度を反映するように変わります。（以下のスクリーンショットで強調表示されている画像は実際には「可能性のある成人向け」に分類されているわけではありません。これは単なる例示です。）

コンテンツアラートはプレミアム機能であり、すべてのアカウントで利用可能ではありません。このプレミアム機能をアカウントで有効にしたい場合は、お問い合わせください (opens in a new tab)。

色データ

色データセクションでは、色プロファイル、色モデル、および画像の主要な色が表示されます。色をクリックすると、その色を含む他の画像を検索します。

色抽出はプレミアム機能であり、すべてのアカウントで利用可能ではありません。このプレミアム機能をアカウントで有効にしたい場合は、お問い合わせください (opens in a new tab)。

画像詳細ビュー

画像詳細ビューは、画像をより大きなサイズと元のアスペクト比で表示します。リストビューですでに選択されている画像サムネイルをクリックするか、リストビューの画像サムネイルをダブルクリックすることで画像詳細ビューを開きます。画像詳細ビューを終了するには、左上隅の「x」をクリックするか、キーボードのEscを押します。

画像詳細ビューには、画像を表示または非表示にするオプションもあります。画像を非表示にすると、元のコンテンツが判別できないように画像がピクセル化され、表示すると元の画像が復元されます。画像の表示または非表示はアセットマネージャー内でのみ効果があり、アセットマネージャーの外での画像の実際のレンダリングには影響しません。画像が表示または非表示に設定されると、その状態はアセットマネージャー内で維持されますが、ブラウザー/デバイス間やユーザー間でその状態は保存されません。

デフォルトでは、成人向けまたは暴力的カテゴリで「ありそう」またはそれ以上のスコアを得た画像は非表示として表示されます。

検索

キーワード検索

画面上部の検索ボックスに入力するとキーワード検索が実行されます。これは画像の元のパス、名前、説明、タグ、カテゴリ、カスタムフィールドなど、複数の事前定義されたフィールドを横断して検索します。正確な挙動は変更される可能性があります。

タグ検索

タグによる検索が可能です。画像に移動し、そのタグのいずれかをクリックして、同じタグを持つ他の画像を検索します。

カテゴリ検索

カテゴリによる検索が可能です。画像に移動し、そのカテゴリのいずれかをクリックして、同じカテゴリを持つ他の画像を検索します。

色による検索

色による検索が可能です。画像に移動し、その色見本のいずれかをクリックして、類似の色を持つ他の画像を検索します。

詳細検索

より複雑な検索を行うには、検索バーの右側にある「Advanced」をクリックします。タグ、カテゴリ、カスタムフィールド、色、フォルダーパス、コンテンツアラート、顔、アニメーション、ファイルタイプ、ユーザーによる編集があるかどうかに基づいて検索するための高度なフィルターを使用します。複数のフィルターを選択すると、すべてのフィルターの基準を満たす画像を検索します。

アセットマネージャー設定

アセットマネージャー設定 (opens in a new tab)ページでは、ユーザーが作成したカテゴリやカスタムフィールドキーを編集できます。このページにアクセスするには、アカウント設定ページ (opens in a new tab)のリンクをクリックするか、アセットマネージャーの右上隅にある歯車アイコンをクリックします。

カテゴリやカスタムフィールドキーを編集すると、そのメタデータが関連付けられているすべての画像に自動的にそのカテゴリやカスタムフィールドキーが更新されます。カテゴリやカスタムフィールドキーを削除すると、それが現在関連付けられているすべての画像からそのメタデータが削除されます。注意: カテゴリやカスタムフィールドキーを削除することは元に戻すことができませんので、注意して進めてください。

アップロード

アセットマネージャーでは、クラウドストレージバックアップソースに直接アップロードできます。Web FolderまたはWeb Proxyソースへのアップロードはサポートされていません。

ストレージタイプによって、アップロードには異なる制限と要件があります。以下の表を参照してください：

ソースへのアセットのアップロードを開始する前に、アップロードする各ソースのアップロード設定を完了する必要があります。

なぜアップロード設定が必要なのか？

ソースをレンダリング用に設定する際、imgixは画像をレンダリングするために必要な最小限の権限である読み取りとリストの権限のみを要求します。アップロードには書き込み権限が必要であり、レンダリングが影響を受けないように別の認証情報を使用することをお勧めします。

アップロード設定

ソースがまだアップロード用に設定されていない場合、アセットマネージャーの右上隅にある「Upload」ボタンをクリックして設定プロセスを開始します。または、リストビューにファイルをドラッグアンドドロップすると、アップロード設定ビューが表示されます。

imgix専用の新しい認証情報を生成し、これらのupload_credentialsをdeployment_credentialsとは別にすることを強く推奨します。

Amazon S3

S3のupload_credentialsを追加する

IAMアカウントの「Amazon S3 Full Access」ポリシーテンプレートは、アップロード用の新しいS3認証情報を作成する最も簡単な方法です。

1. AWS IAMダッシュボード (opens in a new tab)にアクセスします。
2. 左ナビゲーションのUsersをクリックします。
3. Add Userをクリックするか、既存のユーザーを選択します。
4. ユーザーを追加する場合は、User Nameを付けます。
5. Nextボタンをクリックして、ステップ＃2 Set Permissionsに進みます。
6. Attach existing policies directlyオプションを選択します。
7. ポリシーテンプレートのリストが表示されます。「AmazonS3FullAccess」を検索し、そのオプションのチェックボックスを選択します。独自の特定の権限ポリシーを設定したい場合は、以下の注意を参照してください。
8. Nextをクリックして新しいユーザーを確認します。
9. 全てが正しければ、Create userボタンを選択します。
10. 新しいユーザーを作成したら、その詳細ページを訪れてセキュリティ認証情報タブの下でアクセスキーのセットを作成します。これらのキーはあなたのupload_credentialsとして機能し、ソースに直接画像やビデオをアップロードすることを可能にします。

特定の権限を設定したい場合は、以下を付与します：

• ListBucket
• GetBucketLocation
• GetObject
• PutObject

バケットのCORS設定を更新する

https://dashboard.imgix.comからPUTメソッドとContent-Typeヘッダーを許可するようにCORS設定を更新してください。バケットのCORS設定は、バケットの権限タブで見つかります。詳細はS3ドキュメント (opens in a new tab)を参照してください。

1. AWSのS3バケット (opens in a new tab)に移動します
2. 権限タブをクリックします
3. Cross-origin resource sharing (CORS)セクションまでスクロールダウンします
4. AllowedHeaders、AllowedMethods、AllowedOriginsのプロパティを追加します。S3設定のCORSセクションが空の場合、以下のJSON値をCORS設定にコピーできます：

[
  {
    "AllowedHeaders": ["Content-Type"],
    "AllowedMethods": ["PUT"],
    "AllowedOrigins": ["https://dashboard.imgix.com"],
    "ExposeHeaders": []
  }
]

Google Cloud Storage

GCSのupload_credentialsを追加する

GCSソースを使用している場合、GCSの役割リストからStorage Object Admin役割を追加できます。役割をユーザーに追加した後、Settings (opens in a new tab)ページに移動し、Interoperabilityタブで相互運用性キーを生成する必要があります。

バケットのCORS設定を更新する

https://dashboard.imgix.comからPUTメソッドとContent-Typeヘッダーを許可するようにCORS設定を更新してください。GCSでは、プログラムでまたはCLIツールを使用してこれを行うことができます。詳細についてはGCSドキュメント (opens in a new tab)を参照してください。

gsutil CLIコマンドの例: CORS設定を設定する

gsutil cors set <CORS_JSON_FILE> gs://<BUCKET_NAME>

_CORS JSON設定ファイルの例

[
  {
    "origin": ["https://dashboard.imgix.com"],
    "method": ["PUT"],
    "responseHeader": ["Content-Type"],
    "maxAgeSeconds": 3600
  }
]

Microsoft Azure

Azureのupload_credentialsを追加する

Azureソースについては、新しい共有アクセス署名（SAS）トークンを生成する必要があります。SAS文字列を生成するには、ストレージアカウントのShared Access Signature Settingsページを使用します。以下の設定を変更します：

• Allowed Services: サービスタイプに応じてFileまたはBlobを選択します。
• Allowed Resource Types: ContainerとObjectのみを選択します。
• Allowed Permissions: Read、List、Writeを選択します。
• Start and Expiry Date/Time: 終了日を「2029-01-01」に変更するか、少なくとも1年先の日付を選択します。

最後に、Generate SAS and connection stringをクリックします。その下に「SAS token」とラベル付けされたテキストボックスがあります。トークンは「?sv=」で始まります。このテキストボックスの内容があなたのSASトークンです。

DigitalOcean

DigitalOceanのupload_credentialsを追加

DigitalOceanバケット用の新しいアクセスキーとシークレットアクセスキーを作成します。これらのキーは、ソースに直接画像やビデオをアップロードするためのupload_credentialsとして機能します。

バケットのCORS設定を更新

imgixアセットマネージャーを使用して直接アセットをアップロードするには、SpaceのCORS設定でhttps://dashboard.imgix.comからのPUTメソッドとContent-Typeヘッダーを許可する必要があります。

CORSの設定方法については、DigitalOceanのドキュメント (opens in a new tab)を参照してください。以下のスクリーンショットは、設定がどのようなものであるべきかを示しています。

Cloudflare R2

Cloudflare R2のupload_credentialsを追加

Cloudflare R2バケット用の新しいアクセスキーとシークレットアクセスキーを作成します。キーを設定する際にはEdit権限を付与してください。これらのキーは、ソースに直接画像やビデオをアップロードするためのupload_credentialsとして機能します。

バケットのCORS設定を更新

imgixアセットマネージャーを使用して直接アセットをアップロードするには、R2オブジェクトストレージのCORS設定でhttps://dashboard.imgix.comからのPUTメソッドとContent-Typeヘッダーを許可する必要があります。

CORSの設定方法については、Cloudflare R2のドキュメント (opens in a new tab)を参照してください。以下のスクリーンショットは、設定がどのようなものであるべきかを示しています。

Wasabi

Wasabiのupload_credentialsを追加

Wasabiバケット用の新しいアクセスキーとシークレットアクセスキーを作成します。これらのキーは、ソースに直接画像やビデオをアップロードするためのupload_credentialsとして機能します。

Linode

Linodeのupload_credentialsを追加

Linodeバケット用の新しいアクセスキーとシークレットアクセスキーを作成します。キーを設定する際には、Linodeバケットでソースが設定されているものに対してRead/Write権限を付与してください。これらのキーは、ソースに直接画像やビデオをアップロードするためのupload_credentialsとして機能します。

画像のアップロード

アップロード設定が完了したら、アセットマネージャーの右上隅にあるUploadボタンをクリックするか、リストビューにファイルをドラッグアンドドロップしてアップロードを開始できます。

ここで、現在のアップロードのすべての画像に対して任意の宛先パスを指定できます。特定のサブディレクトリに画像をアップロードしたい場合に便利です。

注意: アセットマネージャーはバケット内の既存のものを上書きしません。バケットにbridge.jpgというファイルが既に存在していて、同じ場所に別のbridge.jpgファイルをアップロードしようとすると、アップロードは失敗します。

「Upload」をクリックすると、アップロードマネージャービューに移動し、アップロードの進行状況が表示されます。完了後、「View」ボタンをクリックすると、アセットマネージャーに戻って新しくアップロードされたファイルを表示できます。

新しくアップロードされた画像はすぐにアセットマネージャーで利用可能となり、他の画像と同様に検索や変更が可能です。

アセットマネージャーはすべてのコンテンツタイプのアップロードをサポートしています。

注意: 50MBを超えるアセットの場合は、Amazon S3およびGoogle Cloud Storageソースで利用可能なアップロードセッションフローの使用をお勧めします。

ビデオステータス

ソースでビデオが有効になっている場合、互換性のある入力フォーマットは自動的に検出され、トランスコードされます。ビデオのトランスコードは、以下のいずれかのステータスで終了します：

• 処理中: ビデオは現在、私たちのサービスによって処理されています。
• 処理済み: ビデオは正常に変換され、imgix.videoドメインを通じて提供することができます。バケットから削除されたことが検出されるまで保持されます。
• エラー発生: ビデオの処理中に問題が発生しました。問題の原因は以下のいずれかの可能性があります：
  • 入力フォーマットが正しくない: バケットでビデオが検出されましたが、現在サポートされているフォーマットと互換性がありません。
  • ファイルが短すぎる: ビデオファイルは最低0.5秒の長さが必要です。
  • ファイルにアクセスできない: バケット内のファイルにアクセスする際の問題が発生しました。

処理されたビデオが削除されると、アセットマネージャーから72時間以内に消えるはずです。削除されたビデオが72時間以上残っている場合、またはアセットマネージャーで予期せずビデオが見つからない場合は、ビデオURLと共にsupportに連絡してください。

アセットマネージャーAPI

ダッシュボードのアセットマネージャーで提供されている機能のほとんどはAPIを通じても実行できます。詳細はアセットマネージャーAPIのドキュメントをご覧ください。

トラブルシューティング

アップロード時の405 CORSエラー

画像のアップロード時に405エラーが発生した場合、CORS設定が正しくないことを意味します。この問題はCORSを設定することで解決できます。ソースに応じて、CORSの設定方法は以下で見つかります：

• S3
• GCS

アセットが表示されるのに時間がかかる

アセットマネージャーは、S3、GCS、Azureソースで最も効果的に機能します。ソースがWeb Folderの場合、アセットが表示されるまでに時間がかかります。可能であれば、アセット検出時間を改善するために別のソースに切り替えることをお勧めします。

アセットを即座にアセットマネージャーに取り込みたい場合は、Refresh APIエンドポイントを使用できます。

アセットが更新されない

原点で削除されたり更新されたりしたアセットは、アセットマネージャーで更新されるまでに時間がかかります。

アセットを即座に更新する必要がある場合は、Refresh APIエンドポイントを使用してください。