Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ImageFluxの便利機能を 自社サービスで使い倒した件
Search
yukyu2nd
August 30, 2019
Programming
0
31
ImageFluxの便利機能を 自社サービスで使い倒した件
ImageFlux Meetup #4で発表した内容です。
yukyu2nd
August 30, 2019
Tweet
Share
More Decks by yukyu2nd
See All by yukyu2nd
ベンチャーの情シスも悪くないよ?
yukyu2nd
0
25
SIer出身のエンジニアがインハウスITエンジニアに転向してみた話
yukyu2nd
0
60
Other Decks in Programming
See All in Programming
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
2
74k
HonoのRPCで真の型安全が欲しかった
kosei28
1
140
CREってこういうこと? 体験入社 - 提案資料 - / what-is-cre-trial-employment
shinden
1
620
Namespace, What and Why
tagomoris
3
690
otelcol receiver 自作RTA / Pepabo Tech Conference #22 春のSREまつり
arthur1
0
970
Timeline エディター拡張入門
yucchiy
0
450
Sheets API使ってみた
toshi0383
2
180
『Railsオワコン』と言われる時代に、なぜブルーモ証券はRailsを選ぶのか
free_world21
2
480
How to improve maintainability and readability of your automated tests? ( #scrumniigata )
teyamagu
PRO
1
130
Revisiting the Hotwire Landscape after Turbo 8 @ RailsConf 2024, Detroit
marcoroth
3
610
Criando a Woovi em uma semana
daniloab
0
120
TCAとKMPを用いた新規動画配信アプリ 「ABEMA Live」の設計
tomu28
2
140
Featured
See All Featured
The Language of Interfaces
destraynor
151
23k
Music & Morning Musume
bryan
41
5.6k
Embracing the Ebb and Flow
colly
80
4.2k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
Side Projects
sachag
451
41k
Statistics for Hackers
jakevdp
790
220k
Testing 201, or: Great Expectations
jmmastey
30
6.4k
How STYLIGHT went responsive
nonsquared
92
4.8k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
Fantastic passwords and where to find them - at NoRuKo
philnash
39
2.5k
Transcript
ImageFluxの便利機能を 自社サービスで使い倒した件 株式会社ext 高橋 悠 2019/8/30 ImageFulxMeetup #4
自己紹介 •高橋 悠 •株式会社ext(エクジット) •Webエンジニア •RubyでもPythonでもPHPでもなんでもやります •最近はLINEのBot絡みの仕事が多いです
株式会社ext
一言で表すと
すごく胡散臭い 会社です!
株式会社ext •Webアプリ開発 •スマホ向けアプリ開発 •Webページ作成 •3Dモデリング •AR/VR •等々
仮想通貨の マイニングしてます
今回は弊社の様々な サービスでの利用事例を ご紹介いたします
アジェンダ 1. LINEのMessaging APIと連携した利用事例 2. Webページでの利用事例 3. Webアプリの写真投稿機能での利用事例
アジェンダ 1. LINEのMessaging APIと連携した利用事例 2. Webページでの利用事例 3. Webアプリの写真投稿機能での利用事例
LINEのMessagingAPI 使ってる方 いらっしゃいますか?
None
お店のLINEアカウントと 友だちになっていると こういう画像のメッセージ 送信されてきますよね?
こういうのとか
こういうのとか
こういうやつですね
リッチメッセージ(イメージマップ) •画像にリンクをつけて、LINEのプラットフォー ム上でメッセージを送信 •MessagingAPI経由で利用する場合、1つの画像 について複数のサイズの画像を用意しなくてはい けない。
None
イメージマップの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を利用することよによって •複数毎画像を用意しなくてもよい •画像アクセスに対してキャッシュが利用可能
アジェンダ 1. LINEのMessaging APIと連携した利用事例 2. Webページでの利用事例 3. Webアプリの写真投稿機能での利用事例
みなさん、SEO対策やら UI/UXやら対応大変です よね?
表示スピードも 重要ですよね?
None
None
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を利用することよによって •次世代画像フォーマットへの変換も簡単!
アジェンダ 1. LINEのMessaging APIと連携した利用事例 2. Webページでの利用事例 3. Webアプリの写真投稿機能での利用事例
ユーザーに画像投稿をし てもらうと、おかしな向 きの写真が投稿されるこ ともありますよね?
やっぱりここでも ImageFlux
ImageFluxのパラメーター https://hoge.imagefulx.jp/c/w=400,r=auto/cake.jpg •パラメーターだけで解決可能 •Exif情報があれば、自動で判別して回転
ImageFluxを利用することよによって •Exif情報をもとに画像の向きも自動修正可能! •ユーザー側も運用側も気にせず、写真を投稿でき る。
まとめ •面倒な画像のリサイズ、複数生成も簡単! •適切な画像サイズ、フォーマット変換も簡単!! •写真の向きの補正も簡単!!! •画像のことはImageFluxに任せて 他の開発に集中できる!!!!
ImageFlux いろいろ便利なので 皆さんも利用してみてください