Alibaba Cloud OSSの画像編集機能を使ってみよう

こんちには、比嘉(Higakin)です。

今回の投稿では、Alibaba Cloudのプロダクトの1つである OSS(Object Storage Service)のとても便利な使い方をお伝えできればと思います。

増え続けるサムネイル問題

私は、SBクラウドへ来る直近では、デジタルコンテンツ系のサービスの開発・運用を行っておりました。

デジタルコンテンツ系やECサイト系でもそうですが、運用者にとって頭を悩ます問題が、

・日々増え続けるアイテム、、それに伴う膨大なサムネイルの数(生きているか死んでる画像か、全力で調べないとわからない状態)

・また、各デバイスが増え続けることによる、さらに加速度的に増え続けるサムネイルセット郡

・それに伴い増え続けるストレージのコスト

例えば、スマホ向けのアプリサービスとして提供していた場合、

「WEB / PC 版も対応するぞー」となる場合があるわけですが、当然サムネイルはPC用に用意しておりません。(ストレージ節約のため無駄なサムネイルは極力作らないというポリシーから)

数十万を超えるサムネイルを奥底に眠ってるオリジナル画像から再コンバート

1枚のサムネイルにかかるコンバート時間 ○○ms ✕ アイテム数= 数ヶ月かかりますね。分散コンバートして、どのぐらい短くなるか、云々。。となります。

OSSのイメージ処理機能

OSSのイメージ処理機能を活用すれば、これら各種サムネイルセット郡を用意せずに、リアルタイムで画像変換が行えます。これは、Alibabaが膨大なデータ量のECサイトを運用するための知恵やノウハウを踏襲し産まれた機能だと思いますが、レスポンスも非常に高速です。

それでは、ためしてみましょう。

まずOSSにテスト用のバケットを作成します。「blog-test」日本リージョンに作成しました。

続いて以下から画像をアップロードします。

 

アップロードされたオリジン画像(2448 x 3264、 2.8Mの画像)

静岡某所のスタミナ丼

http://tech-blog-oss.oss-ap-northeast-1.aliyuncs.com/assets/2017/07/delicious_food.jpg

OSSのリサイズ機能

上記のオリジナル画像をリアルタイムにリサイズを行いたいと思います。

リサイズしたいスタイルを作成します。

「イメージサービスを選択」→「スタイルを作成」

スタイルを定義、今回はTOPなどで表示する軽量なサムネイルを定義します。

今回はルール名「thumbnail_small」としました。(下記の犬の画像は単なるプレビュー用のイメージ画像です。)

スタイルを作成したら以下のオリジナルドメインにスタイル指定とルール名を付与します。

 

でわ、実際に呼び出してみましょう。

以下の画像は実際にリアルタイムでリサイズされております。

135 x 180 、 10K までリサイズされました。

http://tech-blog-oss.oss-ap-northeast-1.aliyuncs.com/assets/2017/07/delicious_food.jpg?x-oss-process=style/app_thubnail_small

リサイズ以外にもいろいろある

OSSは、リサイズだけでなく様々なイメージ処理機能があります。

例えば、クロップしてみたり

http://tech-blog-oss.oss-ap-northeast-1.aliyuncs.com/assets/2017/07/delicious_food.jpg?x-oss-process=image/crop,x_800,y_1600,w_700,h_700

 

角丸にしてみたり、くどいようですが、オリジナル画像からリアルタイムで表示してます。

http://tech-blog-oss.oss-ap-northeast-1.aliyuncs.com/assets/2017/07/delicious_food.jpg?x-oss-process=image/rounded-corners,r_150

 

回転してみり

http://tech-blog-oss.oss-ap-northeast-1.aliyuncs.com/assets/2017/07/delicious_food.jpg?x-oss-process=image/rotate,180

などなど

他にも、ウォーターマーク、ぼかし、輝度、コントラスト、鮮明化などの機能もあります。(詳細はコチラ

おわりに

今回はOSSの画像処理機能についてご説明させていただきましが、

本機能をご活用いただくことにより事前にアプリケーション側で行ってた処理をOSS側に委任することができます、サムネイルセットにおいては、画像の数を劇的に減らせることができるので、運用が楽になり、ストレージコストも下げることができるかと思います。

また、OSSはドメインベースでの連携が可能ですので、既存の仕組みとの連携も容易にできます。

ぜひご活用をご検討ください。

この記事をシェアする