Gatsby向けimgixプラグインの発表
ユーザーからのフィードバックは私たちにとって非常に重要です。お客様が求める機能を提供することを常に目指しています。最近、多くの方から急成長中のフレームワーク Gatsby への対応を求める声をいただきました。
そこで今回、imgixのGatsbyプラグイン をリリースしました！本記事では、Gatsbyプラグインを開発した理由と、その主な3つの活用方法について紹介します。
なぜGatsbyなのか？
Gatsbyは、Reactをベースにしたオープンソースの静的サイトジェネレーターであり、高速でスケーラブルなウェブサイト（静的・動的）を構築できるフレームワークです。特に、Eコマースサイト、ニュースサイト、ブログなどで急速に普及しています。
Gatsbyは以下のような特長を持っています。
- 開発者にとっての優れたエクスペリエンス
- 業界最高水準のパフォーマンス
- 最新のWeb標準に準拠
- 標準でPWA（プログレッシブWebアプリ）をサポート
- アクセシビリティの考慮
- 豊富なプラグインエコシステム
また、Gatsby Cloud のカスタムアーキテクチャにより、デプロイが簡単になり、本番環境へのリリースがスムーズに行えます。
imgix Gatsbyプラグインの機能
本プラグインは、gatsby-plugin-sharpの代替 として機能し、画像処理をローカルではなくimgixで行うことで、開発を高速化します。
主なメリット
- ビルド時間の短縮：ローカルでの画像処理が不要に
- レスポンシブ対応の強化：より多くの画像バリエーションを生成
- imgixの豊富な変換・最適化機能の活用
本プラグインは、以下の3つの主要なユースケースに対応しています。
- Gatsbyソース経由の画像
- 静的に定義された画像
- 動的に設定される画像
それぞれ詳しく見ていきましょう。
1. Gatsbyソース経由の画像
最も一般的なユースケースは、ContentfulやPrismicなどのGatsbyソースから提供される画像です。
例えば、商品情報を読み込む際、画像がWeb上のURLとして提供される場合があります。本プラグインを使用すると、その画像URLをimgixを通して最適化・変換できるようになります。
この場合、Web Proxy Sourceを設定する必要があります。
コード例（流動的な画像）
import gql from 'graphql-tag';
import Img from 'gatsby-image';
// コンポーネント
export default ({ data }) => <Img fluid={data.post.imgixImage.fluid} />;
// GraphQLクエリ
export const query = gql`
{
post(id: "id-123") {
imgixImage {
fluid(imgixParams: {
// 任意のimgixパラメータを指定
}) {
...GatsbyImgixFluid
}
}
}
}
`;
2. 静的に定義された画像
Webサイトのロゴやバナー画像など、コード内で静的に定義された画像に適用できます。
この場合、Web Proxy Source 以外の どのimgixソース でも使用可能です。
コード例（流動的な画像）
import gql from 'graphql-tag';
import Img from 'gatsby-image';
// コンポーネント
export default ({ data }) => <Img fluid={data.imgixImage.fluid} />;
// GraphQLクエリ
export const query = gql`
{
imgixImage(url: "/image.jpg") {
fluid(imgixParams: {
// 任意のimgixパラメータを指定
}) {
...GatsbyImgixFluid
}
}
}
`;
3. 動的に設定される画像
無限スクロールギャラリーのように、ページの読み込み後に追加される動的な画像にも対応しています。
この場合、任意のimgixソースを使用できますが、プレースホルダーやぼかし効果など、一部の機能は使用できません。
コード例（動的に設定する画像）
import Img from 'gatsby-image';
import { buildFluidImageData } from '@imgix/gatsby';
// コンポーネント
export default () => (
<Img
fluid={buildFluidImageData(
'https://assets.imgix.net/examples/pione.jpg',
{
ar: 1.61, // プレースホルダー機能に必要
},
{
sizes: '50vw', // 推奨オプション
},
)}
/>
);
今後のアップデート
他のimgixライブラリと同様、本プラグインも継続的にアップデート していきます。
現在、gatsby-plugin-imageのサポートを追加 する作業を進めていますので、最新情報にご期待ください。
プラグインの最新情報や機能追加のリクエストは GitHubリポジトリ でご確認いただけます。インストール手順や使用方法、APIドキュメントもそちらでご覧いただけます。
