imgixでソーシャル画像を生成する

このガイドでは、ビルダーパターン (opens in a new tab)を活用してimgix画像URLを作成する方法を探ります。ビルダーパターンを使用してimgix画像URLを生成することで、画像操作に構造的でスケーラブルなアプローチを提供します。

この方法により、メソッド呼び出しを連鎖させて複雑な画像構成を簡単に作成することで、柔軟かつ効率的なURL生成が可能になります。メソッド呼び出しを連鎖させることで、パラメータを段階的に追加し、メンテナンスが容易で読みやすいコードベースを作成できます。

この設定は、メソッドチェーンを処理し、URLにクエリパラメータを追加するプロキシオブジェクトを作成します。proxyHandlerはメソッド呼び出しをインターセプトしてパラメータを追加し、appendQueryParamは各パラメータが正しくフォーマットされてURLに追加されることを保証します。この関数はまた、paramNameとparamValueを使用して、画像を構築するためのURLクエリパラメータに正しい要素を追加します。

前提条件

始める前に、以下のものを準備してください：

imgixアカウント (opens in a new tab)
JavaScriptとimgixパラメータの基本的な理解

実装

ステップ1: buildURLの作成

まず、URL生成プロセスを開始する関数が必要です。この関数はクエリパラメータを追加してURLを構築する「ディレクター」として機能します。

export function buildURL({ protocol = "https://", domain }) {
  let baseURL;
  // ...
  const proxyHandler = {
    get(target, prop) {
      return function (paramValue) {
        // ...
        appendQueryParam(prop, paramValue);
        return new Proxy(target, proxyHandler); // メソッドチェーンを許可
      };
    }
  },
 
  // プロキシを親スコープオブジェクトに公開
  const parentScope = new Proxy({}, proxyHandler);
 
  return parentScope;
}

ステップ2: メソッド呼び出しのチェーン

プロキシオブジェクトを使用して、望ましいimgixパラメータでURLを構築するためにメソッド呼び出しをチェーンできます。このアプローチにより、複数のパラメータを指定するクリーンで読みやすい方法が提供されます。各メソッド呼び出しはURLにパラメータを追加します。

const image = buildURL({ domain })
  .path("/blog-og-image.png")
  .width(400)
  .height(400)
  .auto("format,compress")
  .fm("jpeg")
  .fit("crop")
  .finalize()
 
console.log(image)
// https://assets.imgix.net/blog-og-image.png?w=400&h=400&fm=auto&fit=crop

ステップ3: 特殊なパラメータの処理

base64エンコードを含むmark64やblend64などのより複雑なパラメータには、専用のメソッドが必要です。

function mark64({ text, ...rest }) {
  // `~text` URLの構築を開始
  const markURl = new URL(`${protocol + domain}/~text`)
 
  // base64にエンコードする~txt URLにパラメータを追加
  Object.entries(text).forEach(([key, value]) => {
    if (!(key === "txt" || key === "w")) {
      markURl.searchParams.set(`txt-${key}`, value)
    } else {
      markURl.searchParams.set(key, value)
    }
  })
  const mark64 = markURl.toString()
 
  // 検索パラメータをクリア
  baseURL.searchParams.delete("mark64")
  Object.entries(rest).forEach(([key, _value]) => {
    baseURL.searchParams.delete(`mark-${key}`)
  })
 
  // 新しい検索パラメータを設定
  baseURL.searchParams.set("mark64", Buffer.from(mark64).toString("base64"))
  Object.entries(rest).forEach(([key, value]) => {
    // console.log(`key = ${key}, value = ${value}`);
    baseURL.searchParams.set(`mark-${key}`, value)
  })
 
  return this
}
 
function blend64({ url, ...rest }) {
  // 検索パラメータをクリア
  baseURL.searchParams.delete("blend64")
  Object.entries(rest).forEach(([key, _value]) => {
    baseURL.searchParams.delete(`blend-${key}`)
  })
 
  // 新しい検索パラメータを設定
  baseURL.searchParams.set("blend64", Buffer.from(url).toString("base64"))
  Object.entries(rest).forEach(([key, value]) => {
    baseURL.searchParams.set(`blend-${key}`, value)
  })
}

この方法は、~text URLを構築し、それをbase64でエンコードし、mark64パラメータに追加します。base64エンコードを使用することで、テキストやフォントパラメータ内の特殊文字がURLフォーマットに干渉しないようにします。

ステップ4: URLの確定

finalize()メソッドはチェーンを停止し、すべてのパラメータが追加された後の完全なURLを返します。このメソッドは、構築されたURLを出力するために不可欠です。

const proxyHandler = {
  get(target, prop) {
    // 👇 URL文字列を返す
    if (prop === "finalize") {
      return function () {
        return baseURL
      }
    } else {
      return function (paramValue) {
        // ...
        appendQueryParam(prop, paramValue)
        return new Proxy(target, proxyHandler)
      }
    }
  },
}

例: imgixパラメータをレイヤー化してソーシャルメディア画像を作成

この例では、LinkedInの投稿用の画像を作成します。この方法を使用することで、ソーシャル画像、OG画像、ブログヘッダー、プロモーションバナーなど、幅広い画像を作成できます。最終出力は次のようになります：

LinkedIn Post Image Example

レイヤー1: ベース画像の設定

buildURL関数を使用してパラメータをレイヤー化することで、この画像を作成します。最初に、最終画像の背景として機能するベース画像を設定します。

const layerdURL = buildURL({ domain: "luis-ball.imgix.net" }).path(
  "builder-pattern-base-layer.png",
) // ベースパスの設定

レイヤー2: Mark64パラメータの追加

次に、mark64パラメータを追加して、ベース画像の上に画像やテキストをオーバーレイします。この例ではテキストオーバーレイを使用します。

mark64({
  pad: 100,
  align: "top, left",
  text: {
    w: 900,
    color: "fff",
    font64: "avenir",
    size: 112,
    txt: "Transforming Images Using AI Without Leaving Your React App",
  },
})

レイヤー3: もう一つのテキストレイヤーの追加

追加情報のためにtxtパラメータを使用してもう一つのテキストレイヤーを追加します。

.txt({
  align: 'bottom, left',
  color: 'fff',
  font64: 'avenir',
  pad: 100,
  size: 40,
  text64: 'Luis Ball - Senior Software Engineer',
})

レイヤー4: Blendパラメータの追加

.blend64({
  mode: 'normal',
  url: `${heroImage}`,
})

結論

ビルダーパターンを使用してimgix画像URLを作成することで、強力で柔軟な画像操作のアプローチが提供されます。メソッド呼び出しをチェーンすることで、複雑な画像URLを動的に簡単に構築でき、最適化された画像を提供する能力が向上します。以下はLinkedIn画像例の全コードです：

const layerdURL = buildURL({ domain: "luis-ball.imgix.net" })
  .path("builder-pattern-base-layer.png") // ベースパスの設定
  .bri(-15)
  .mark64({
    pad: 100,
    align: "top, left",
    text: {
      w: 900,
      color: "fff",
      font64: "avenir",
      size: 112,
      txt: "Transforming Images Using AI Without Leaving Your React App",
    },
  })
  .txt({
    align: "bottom, left",
    color: "fff",
    font64: "avenir",
    pad: 100,
    size: 40,
    text64: "Luis Ball - Senior Software Engineer",
  })
  .blend64({
    mode: "normal",
    url: `${heroImage}`,
  })
  .auto("compress,format")
  .fm("jpeg")
  .finalize()
// -> https://luis-ball.imgix.net/builder-pattern-base-layer.png?bri=-15&mark64=aHR0cHM6Ly9sdWlzLWJhbGwuaW1naXgubmV0L350ZXh0P3c9OTAwJnR4dC1jb2xvcj1mZmYmdHh0LWZvbnQ2ND1hdmVuaXImdHh0LXNpemU9MTEyJnR4dD1UcmFuc2Zvcm1pbmcrSW1hZ2VzK1VzaW5nK0FJK1dpdGhvdXQrTGVhdmluZytZb3VyK1JlYWN0K0FwcA%3D%3D&mark-pad=100&mark-align=top%2C+left&txt64=THVpcyBCYWxsIC0gU2VuaW9yIFNvZnR3YXJlIEVuZ2luZWVy&txt-font64=YXZlbmly&txt-align=bottom%2C+left&txt-color=fff&txt-pad=100&txt-size=40&blend64=aHR0cHM6Ly9sdWlzLWJhbGwuaW1naXgubmV0L2J1aWxkZXItcGF0dGVyLXByb2ZpbGUtaW1hZ2UucG5n&blend-mode=normal&fm=auto

Asset Managerで画像を編集する imgixを使用したクリエイティブな導入事例