プロダクトアップデート//5 読了時間

Unsplashインテグレーションによるメディア管理:完全CMSガイド

Eray Gündoğmuş
共有

ほとんどのi18nツールでは、翻訳と並行したメディア管理は常に後回しにされてきました。テキストを翻訳し、その後に別のシステムで画像を手動で処理する——ダウンロード、再アップロード、リンク設定。Better i18nは異なるアプローチを採用しています。メディアはコンテンツワークフローにおいて第一級市民です。

このガイドでは、Better i18nのメディア管理の仕組みを、基本的なアップロードから組み込みのUnsplashインテグレーション、そしてすべてを支えるR2エッジストレージまで順を追って説明します。

あらゆるユースケースに対応する4つのアップロードタイプ

画像はすべて同じ目的を持つわけではないため、Better i18nは各コンテキストに特化したアップロードフローを提供しています。

プロフィールアバター

すべてのチームメンバーは、アカウント設定からプロフィール写真をアップロードできます。画像は自動的に処理、リサイズ、保存されます。アバターはダッシュボード、アクティビティフィード、コンテンツの帰属表示全体に表示されるため、チームは誰がどの変更を行ったかを常に把握できます。

組織ロゴ

組織のブランドロゴは一度アップロードするだけで、ダッシュボード、メール通知、公開ページ全体で使用されます。ブランドが変わった際は一か所で更新するだけで、すべての場所に反映されます。

AIチャット画像

Better i18nのAI翻訳エージェントを使用していますか?視覚的なコンテキストを提供するために、チャットに直接画像をアップロードできます。これは、翻訳する文字列の空間的なコンテキストをエージェントが理解できるよう、UIのスクリーンショットを見せる必要がある場合に特に便利です。

コンテンツメディア

これは最も汎用性の高いアップロードタイプです。CMSエントリ——ブログ投稿、変更ログ項目、マーケティングページ——を編集する際に、エントリに直接画像を添付できます。コンテンツメディアファイルは親エントリにリンクされているため、どの画像がどこに属するかを簡単に追跡できます。

Unsplashインテグレーション:検索、選択、完了

コンテンツ作業で最も一般的なタスクの一つは、良い画像を見つけることです。Better i18nはUnsplashをコンテンツエディタに直接統合しているため、ワークフローを離れる必要がありません。

仕組みは次のとおりです。

  1. メディアピッカーを開きます——任意のコンテンツエントリのメディアフィールドまたはアイキャッチ画像で。
  2. キーワードでUnsplashを検索します。 結果は即座に表示されます——Unsplashの300万枚以上の画像ライブラリから高品質で無料で使用できる写真が表示されます。
  3. 画像を選択します。 ワンクリックで自動ダウンロードが開始されます。
  4. 自動R2ストレージ。 選択した画像はUnsplashからダウンロードされ、プロジェクトのR2バケットにアップロードされます。URLはコンテンツエントリに保存されます。

主なメリット:画像はUnsplashのCDNからではなく、自社インフラから配信されます。これにより、サードパーティの稼働状況への依存がなくなり、安定したパフォーマンスとアセットの完全な管理が実現します。

R2ストレージ:高速、グローバル、エグレス料金なし

Better i18nにアップロードされたすべての画像——デバイスから、チームメンバーのアバターから、またはUnsplash検索から——はCloudflare R2に保存されます。

なぜR2なのか?3つの理由があります。

  • エッジ配信。 R2はCloudflareのグローバルデータセンターネットワークからファイルを配信します。ユーザーがどこにいても、画像は高速に読み込まれます。
  • エグレス料金ゼロ。 従来のクラウドストレージプロバイダーは、誰かがファイルをダウンロードするたびに課金します。R2はしません。これはグローバルなオーディエンスを持つコンテンツヘビーなサイトにとって重要です。
  • 安定したURL。 アップロードされたすべてのファイルは、恒久的で安定したURLを取得します。テンプレート、APIレスポンス、または静的サイトジェネレーターで使用しても——引き続き機能します。

CMSメディアフィールドタイプ

Better i18nのヘッドレスCMSでコンテンツモデルを構築している場合、画像をエントリに接続する方法がMediaフィールドタイプです。

コンテンツモデルにMediaフィールドを追加すると、エントリエディターは次のことができます。

  • デバイスから画像をアップロードする
  • Unsplashから検索して選択する
  • 添付された画像のインラインプレビューを確認する
  • 必要に応じてロケールごとに異なる画像を設定する(ローカライズされたUIのスクリーンショットに便利)

このフィールドタイプは、他のすべてのアップロードと同じR2ストレージパイプラインに統合されています。管理する別のメディアライブラリはなく——すべてが一つのシステムを通じて流れます。

実践例:ブログ投稿にカバー画像を追加する

実際のシナリオを見てみましょう。製品の新しいダッシュボードのリデザインについてブログ投稿を書いているとします。

  1. Better i18nのCMSで新しいブログ投稿エントリを作成します。
  2. タイトル、本文、抜粋を書きます。
  3. アイキャッチ画像フィールドをクリックします。
  4. Unsplashで「dashboard design」と検索するか、自分のスクリーンショットをアップロードします。
  5. 画像を選択します。自動的にR2に保存され、投稿にリンクされます。
  6. 投稿を他の言語に翻訳します。アイキャッチ画像はそのまま引き継がれるか、ロケール固有のスクリーンショットに差し替えることができます。
  7. 公開します。画像はR2のエッジネットワークから世界中に配信されます。

別途メディアアップロードのステップは不要。壊れた画像リンクもなし。サードパーティCDNへの依存もなし。

これはあなたのワークフローにとって何を意味するか

Better i18nのメディア管理は、コンテンツワークフローにステップを追加するのではなく、コンテンツワークフローの中に自然に溶け込むよう設計されています。アップロードタイプはそれぞれのコンテキストに合わせて設計され、Unsplashは必要な場所に統合され、R2がストレージと配信を設定なしで処理します。

多言語ブログ、ドキュメントサイト、製品マーケティングページのいずれを管理していても、画像は翻訳と同じ方法で処理されます——一か所で、一つのワークフローで。

メディア管理はすべてのBetter i18nプランで利用可能です。すでにCMSを使用している場合は、アップロードを始める準備ができています。

Comments

Loading comments...