WordPress

ImageFlux画像変換・配信エンジンをWordPressで使用するためのドキュメントです。
プラグインを使用するためには、ImageFlux画像変換・配信エンジンの契約が必要となります。

WordPressプラグインのインストール

WordPress管理画面で、メニューの「プラグイン」から「新規追加」をクリックします
画面右上の検索ボックスにImageFluxと入力し、プラグインの「今すぐインストール」ボタンをクリックします
プラグインを有効化します

ImageFluxアカウントの取得

ImageFluxのサービスサイトを開きます
プランを選択して、ImageFlux画像変換・配信エンジンのアカウントを作成します
- どのプランを選択した場合でもプラグインはお使いいただけます
アカウント作成後、初回ログインURLからパスワードを設定します

システムAPIトークンの発行

ImageFluxの管理コンソールにログインします
右上に表示されているご自身のメールアドレスをクリックし、「APIトークン管理」をクリックします
APIトークン管理画面の「トークンを新規発行」をクリックします
APIトークン発行画面で、権限から統計情報とキャッシュ操作にチェックを入れ、「発行」をクリックします
APIトークン管理画面にて、発行したトークンを確認し、「生トークン」をクリックします

プラグインの初期設定

WordPress管理画面で、左手のメニューから「ImageFlux」をクリックします
ImageFluxの管理コンソールからコピーしたシステムAPIトークンをペーストして保存します
左手のメニューから「オリジン設定」をクリックし、「オリジンを追加」をクリックします
オリジン設定画面で、設定に必要な情報を入力し、保存します
1. HTTPを利用する場合
  - 推奨設定
    - オリジン種別：HTTPを選択
    - スキーム：ご自身のサイト設定に合わせてhttpもしくはhttpsから選択
    - ホスト：オリジンとして設定するWordPressのホスト名を入力
    - パスプレフィックス：空欄
    - 署名付きURL：有効にチェック
    - 署名付きURL使用時の暗号化鍵：適当な文字列を入力
2. S3を利用する場合
  - ※前提としてWordPressでS3を使うためのプラグイン（WP Offload Media Liteなど）を併用する必要があります。
  - 推奨設定
    - オリジン種別：S3を選択
    - AWSアクセスキーID：IAMアカウントのアクセスキーIDを入力
    - AWSシークレットアクセスキー：IAMアカウントのシークレットアクセスキーを入力
    - AWSリージョン：取得先リージョンのホスト名を入力
      - アジアパシフィック (東京)の場合、 ap-northeast-1を指定してください
    - AWSバケット：取得先のバケット名を入力
    - エンドポイント：空欄
    - パスプレフィックス：空欄
    - 署名付きURL：有効にチェック
    - 署名付きURL使用時の暗号化鍵：適当な文字列を入力
左手のメニューから「画像変換・配信設定」をクリックし、画像の変換、配信に必要な情報を設定し保存します
- 推奨設定
  - フォーマット変換：webp:auto を選択
  - 配信しない拡張子の指定：gif のみチェック
  - 端末に応じた画像サイズに自動変換：お好みで選択
    - 「する」：PCとモバイル端末それぞれで画像サイズの指定が可能。Retinaディスプレイでは設定の2倍サイズで配信
    - 「しない」：アップした画像サイズのまま配信
  - クオリティ指定：60～80の間で指定
  - Exif削除(JPEGの場合のみ)：Exif情報のうち、Orientation以外を削除する を選択
画像の変換・配信状況を確認します
1. 自身の投稿の中で画像がついているページにアクセスします
2. 画像を右クリックし、画像アドレスをコピーしてください
3. メモ帳などにペーストしてURLが書き換わっていれば画像の変換・配信ができています

キャッシュ設定

ImageFluxで変換した画像を高速にキャッシュ配信するために必要な設定です。お客様のWordPressサーバ側での設定となります。 Apacheをお使いの場合は、以下のように設定します。

FTPソフトなどを使用して、WordPressのサーバへアクセスします。
サイトのルートディレクトリ上にある .htaccess ファイルを開きます。（ファイルがない場合は新規作成してください）
.htaccess ファイルの一番上に以下の文字列を追記します。（例：キャッシュを1日=86400秒保持する場合）
- Header append Cache-Control s-maxage=86400
キャッシュ配信ができているか確認します。
- WordPressの管理画面にアクセス
  - ブラウザの開発ツールを開き、リロードして Cache-Control レスポンスヘッダを確認
  - no-cache などがついており、キャッシュされないようになっていることを確認
- サイト内の画像があるページにアクセス
  - ブラウザの開発ツールを開き、リロードして Cache-Control レスポンスヘッダを確認
  - .htaccess で指定した Cache-Control s-maxage=86400 がついていることを確認

ダッシュボードの確認

WordPressの管理画面を開きます
左手のメニューから「ImageFlux」をクリックし、「ダッシュボード」をクリックします
「ダッシュボード」から直近3ヵ月分のリクエスト、画像変換回数、転送量、キャッシュヒット率の確認ができます。グラフでは当月分の利用量が確認できますなお、同一アカウント内で複数のオリジンを使用している場合は、すべてのオリジンの合計値が表示されます