ImageFluxの便利機能を自社サービスで使い倒した件

ImageFluxの便利機能を自社サービスで使い倒した件株式会社ext 高橋悠 2019/8/30 ImageFulxMeetup #4

自己紹介 •高橋悠 •株式会社ext（エクジット） •Webエンジニア •RubyでもPythonでもPHPでもなんでもやります •最近はLINEのBot絡みの仕事が多いです

株式会社ext

一言で表すと

すごく胡散臭い会社です！

株式会社ext •Webアプリ開発 •スマホ向けアプリ開発 •Webページ作成 •３Dモデリング •AR/VR •等々

仮想通貨のマイニングしてます

今回は弊社の様々なサービスでの利用事例をご紹介いたします

アジェンダ 1. LINEのMessaging APIと連携した利用事例 2. Webページでの利用事例 3. Webアプリの写真投稿機能での利用事例

LINEのMessagingAPI 使ってる方いらっしゃいますか？

お店のLINEアカウントと友だちになっているとこういう画像のメッセージ送信されてきますよね？

こういうのとか

こういうやつですね

リッチメッセージ（イメージマップ） •画像にリンクをつけて、LINEのプラットフォーム上でメッセージを送信 •MessagingAPI経由で利用する場合、１つの画像について複数のサイズの画像を用意しなくてはいけない。

イメージマップのURL 例）coupon.pngを画像として利用した場合 https://hoge.com/images/coupon/1040 https://hoge.com/images/coupon/700 ※：どのパラメーターでアクセスされるかは、デバイス次第

ようやくここで ImageFlux

Amazon S3 Amazon EC2 イメージマップの配信 ① ② ③ ④

Amazon S3 Amazon EC2 イメージマップのアクセス ① ② ③ ④

ImageFluxのパラメーター https://hoge.imagefulx.jp/c/w=1040/coupon.png https://hoge.com/images/coupon/1040 LINE側からアクセスするURL 実際のアクセスURL

他にもLINEのMessagingAPIで •画像を利用するものはいくつかある • 画像メッセージ • リッチメニュー • イメージカルーセル • etc
•どれもサイズが違ったり、ファイル形式が決まっていたり等処理が煩雑

ImageFluxを利用することよによって •複数毎画像を用意しなくてもよい •画像アクセスに対してキャッシュが利用可能

みなさん、SEO対策やら UI/UXやら対応大変ですよね？

表示スピードも重要ですよね？

WebP •Googleが開発した画像フォーマット •非可逆圧縮だと、JPEGと比較して 25~34%容量減 •AndroidやWindowsは対応 •ChromeやFirefox、Edgeには対応 •iOSやSafariは未対応

WebP対応したいけどiOSもケアしないと

ここでも ImageFlux

ImageFluxのパラメーター https://hoge.imagefulx.jp/c/w=400,f=webp:jpeg/cake.jpg •パラメーターだけで解決可能 •WebPが使えるものはWebPで •使えないものはJPEGで

Amazon S3 Amazon EC2 Webサイトでの利用構成 ① ② ③ ④ ⑤

ImageFluxを利用することよによって •次世代画像フォーマットへの変換も簡単！

ユーザーに画像投稿をしてもらうと、おかしな向きの写真が投稿されることもありますよね？

やっぱりここでも ImageFlux

ImageFluxのパラメーター https://hoge.imagefulx.jp/c/w=400,r=auto/cake.jpg •パラメーターだけで解決可能 •Exif情報があれば、自動で判別して回転

ImageFluxを利用することよによって •Exif情報をもとに画像の向きも自動修正可能！ •ユーザー側も運用側も気にせず、写真を投稿できる。

まとめ •面倒な画像のリサイズ、複数生成も簡単！ •適切な画像サイズ、フォーマット変換も簡単！！ •写真の向きの補正も簡単！！！ •画像のことはImageFluxに任せて他の開発に集中できる！！！！

ImageFlux いろいろ便利なので皆さんも利用してみてください

ImageFluxの便利機能を 自社サービスで使い倒した件