Storyblokのdocs翻訳チャレンジその4！！！

ソース

第四段

この翻訳チャレンジでは、翻訳をより良いものにするため編集リクエストを送ってくれる方を募集しています！！！！！

イメージサービス

Storyblokのout-of-the-boxイメージサービスは、画像を実行時リサイズすることで、デバイスやプラットフォームに関係なくあなたの顧客にはハイクオリティで訴求力のあるブランド体験を提供出来ます。

インストール / 要件

イメージサービスを使うのに必要なインストール作業は何もありません。システム要件も同じくありません。

使い方

画像をStoryblokにアップロードすればイメージサービスを最適化、リサイズ、クロップなどの目的に使うことが出来るようになります。

URL構造: img2.storyblok.com/NEW_SIZE(/FILTERS/…)/YOUR_IMAGE_PATH

Storyblok rendering serviceを使えば、リサイズヘルパーが使えます:

{{ blok.image | resize:'300x300' }}

# 遅延読み込みのレスポンシブイメージをlazysizesと共に使用した例
# https://afarkas.github.io/lazysizes/
<img
  src="{{ blok.image | resize:'100x0' }}"
  data-sizes="auto"
  data-src="{{ blok.image | resize:'300x0' }}"
  data-srcset="{{ blok.image | resize:'300x0' }} 300w,
  {{ blok.image | resize:'600x0' }} 600w,
  {{ blok.image | resize:'900x0' }} 900w" class="lazyload img-responsive" />

セルフホストの場合やクライアントサイドプロジェクトの場合、ヘルパ関数をより簡単に書くことができます。JavaScriptとPHPの例を示します。

JavaScriptの例

function resize(image, option) {
  var imageService = '//img2.storyblok.com/'
  var path = image.replace('//a.storyblok.com', '')
  return imageService + option + path
}

var example = '//a.storyblok.com/f/39898/1000x664/ab64dad3bc/flowers.jpg'
console.log(resize(example, '500x500'))
// //img2.storyblok.com/500x500/f/39898/1000x664/ab64dad3bc/flowers.jpg から取得

PHPの例

<?php

function resize($image, $option) {
  $imageService = '//img2.storyblok.com/';
  $path = str_replace('//a.storyblok.com', '', $image);
  return $imageService . $option . $path;
}

$example = '//a.storyblok.com/f/39898/1000x664/ab64dad3bc/flowers.jpg';

echo resize($example, '500x500');
// //img2.storyblok.com/500x500/f/39898/1000x664/ab64dad3bc/flowers.jpg から取得

関数

リサイズ

ブラウザにこのURLを入力してください。

img2.storyblok.com/500x500/f/39898/1000x664/ab64dad3bc/flowers.jpg

幅500px、高さ500pxの画像が見えるはずです。URL内の寸法を調整すれば、自動的にあなたの定義した通りに寸法が調整されます。

幅に比例させたい場合は高さに0を入れます。このように:

img2.storyblok.com/500x0/f/39898/1000x664/ab64dad3bc/flowers.jpg

fit-in

fit-in引数は自動クロップではなく自動リサイズ(シュリンク)を適用したい場合のための引数です。高さと幅は仮想的なボックスの内側にフィットするように変更されます。ボックスをある色で塗りつぶしたければ、フィルフィルターfilters:fill(CCCCCC)を16進RGB表現(#無し)で使うことが出来ます。

例1

img2.storyblok.com/fit-in/200x200/filters:fill(CCCCCC)/f/39898/1000x664/ab64dad3bc/flowers.jpg

filter:fill(CCCCCC)なのでグレーで塗りつぶされて出力されます。

例2

img2.storyblok.com/fit-in/200x200/filters:fill(transparent):format(png)/f/39898/1000x664/ab64dad3bc/flowers.jpg

filter:fill(transparent)によって、透明色で塗りつぶされ、またフォーマットをpngに変えて出力されます。

クオリティ最適化

クオリティフィルタを使えば、jpg画像の圧縮率を変えることも出来ます。この値は0-100を取ります。

例

img2.storyblok.com/200x150/filters:quality(10)/f/39898/1000x664/ab64dad3bc/flowers.jpg

これは圧縮率10のjpg画像の例です。

フォーマットの変更

画像の出力フォーマットを変えることもできます。webp, jpeg, gif, pngが選択可能です。

例

img2.storyblok.com/fit-in/200x200/filters:format(gif)/f/39898/1000x664/ab64dad3bc/flowers.jpg

これは、jpg画像をgifに変換した例です。

顔検出とスマートクロッピング

画像をクロップするとき、顔がある場所の周りをクロップするスマートフィルターを定義できます。これはスマートアルゴリズムで決定されます。サイズ指定の後にキーワードsmartを入れるだけです。

例

//img2.storyblok.com/300x90/smart/f/39898/2247x1500/5e42d053a5/kitchen.jpeg

スマートフィルター無しの場合の出力

スマートフィルター有りの場合の出力