Google Cloud Storage 内の画像を表示する方法。伸縮の方法

Google App Engine PHP API でのファイルアップロードでは、 Google Cloud Storage (GCS) 上にファイルをアップロードする方法を紹介しました。

ここでは、GCS 上にアップロードされている画像を表示するために利用できる、画像提供用の API の使い方を説明します。

まずは、具体例を示すためのサンプルを GCS にアップロードしましょう。

画像のアップロードは 「Google App Engine PHP API でのファイルアップロード」で紹介した方法でも可能ですが、 ここでは単純に Web ベースの管理画面である Google Cloud Storage Manager からアップロードしました。

アップロードした画像はこのような画像です。

»オリジナルの画像 (1920x1080)[891kb]

画像提供用の便利なメソッドは CloudStorageTools クラスの getImageServingUrl メソッドに実装されています。

この API に、クラウドストレージ内のオブジェクト名 (gs://バケツ名/... の形式) を渡すと、その戻り値として img タグの src に直ちに使える URL が返ります。

画像を縮小して表示

getImageServingUrl メソッドの便利な点として、画像の伸縮を自動的に実行できる点があげられます。

例えば、ここでアップロードした画像は 1920x1080 というサイズの画像ですが、次のようにサイズを指定 (ここでは 200) して画像の URL を取り出すと、 サイズの小さい画像が作成され、それへの URL が返されます。

require_once 'google/appengine/api/cloud_storage/CloudStorageTools.php';
use google\appengine\api\cloud_storage\CloudStorageTools;

$url = CloudStorageTools::getImageServingUrl(
	"gs://my-bucket1.appspot.com/test/museum-1.JPG",
	['crop' => false, 'size' => 200]);

echo "<img src='$url' alt='Museum'/>";

この結果は次のような画像になりました。画像サイズは 11.7kb です。

縦横比が保存されたまま、長辺が指定したサイズ (ピクセル) になります。

クロップ画像

また、クロップ (「切取り」の意味）パラメータを指定することによって、画像の一部を切り取って返すことも可能です。

次の例では getImageServingUrl メソッドのオプションパラメータとして、サイズ (size) が 200 とした他に、crop を true にして渡しています。(上の例では crop は false。false が既定値)

require_once 'google/appengine/api/cloud_storage/CloudStorageTools.php';
use google\appengine\api\cloud_storage\CloudStorageTools;

$url = CloudStorageTools::getImageServingUrl(
	"gs://my-bucket1.appspot.com/test/museum-1.JPG",
	['crop' => true, 'size' => 200]);

echo "<img src='$url' alt='Museum'/>";

この結果、次のような正方形の画像が返されました。辺の長さがサイズで指定したピクセルになっています。

このとき、いったい元画像のどこをクロップしているのでしょうか？

それは次のように、短辺の長さで正方形を作り、その正方形で画像の中心部を切り抜いています。そして、切り取った箇所の一辺の長さがサイズで指定したサイズになるように伸縮されます。

尚、画像提供用の API 利用時に気をつける点としては、上記 getImageServingUrl が返した URL はアプリケーションの外部からもアクセス可能である点です。 推測不可能な文字列を含む URL が作成されるので、一般の利用時には問題ないと考えられますが、万が一 URL が一人歩きした場合にも問題がないことを確認するべきです。