Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ImageFluxの便利機能を 自社サービスで使い倒した件
Search
yukyu2nd
August 30, 2019
Programming
0
39
ImageFluxの便利機能を 自社サービスで使い倒した件
ImageFlux Meetup #4で発表した内容です。
yukyu2nd
August 30, 2019
Tweet
Share
More Decks by yukyu2nd
See All by yukyu2nd
KomeKaigi企画セッション 新潟テック米俵リレー
yukyu2nd
0
35
新潟の技術コミュニティNiigata5分Techについて
yukyu2nd
0
130
個人的新潟駅周辺の推しラーメン
yukyu2nd
0
110
Niigata5分Tech#18_Android端末の管理方法っていくつあるか知っている?
yukyu2nd
0
35
Niigata5分Tech#14_監査ログの保存どうしてます?
yukyu2nd
0
57
Niigata5分Tech#8_最小権限の原則のためにWindowsLAPSを使ってみた
yukyu2nd
0
36
Niigata5分Tech#9_十徳ナイフのような便利ツールDevToys ver2を使ってみた
yukyu2nd
0
25
Niigata5分Tech#10_最近のLaravelってどんな感じか
yukyu2nd
0
25
Niigata5分Tech#4_逸般の誤家庭で 一般のご家庭の機器を使う
yukyu2nd
0
33
Other Decks in Programming
See All in Programming
Cap'n Webについて
yusukebe
0
120
社内オペレーション改善のためのTypeScript / TSKaigi Hokuriku 2025
dachi023
1
550
チームをチームにするEM
hitode909
0
290
CSC509 Lecture 14
javiergs
PRO
0
220
SwiftUIで本格音ゲー実装してみた
hypebeans
0
100
組み合わせ爆発にのまれない - 責務分割 x テスト
halhorn
1
140
TypeScriptで設計する 堅牢さとUXを両立した非同期ワークフローの実現
moeka__c
6
3k
堅牢なフロントエンドテスト基盤を構築するために行った取り組み
shogo4131
8
2.2k
バックエンドエンジニアによる Amebaブログ K8s 基盤への CronJobの導入・運用経験
sunabig
0
140
Microservices Platforms: When Team Topologies Meets Microservices Patterns
cer
PRO
1
1k
WebRTC と Rust と8K 60fps
tnoho
2
1.9k
DSPy Meetup Tokyo #1 - はじめてのDSPy
masahiro_nishimi
1
160
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
56
14k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Code Review Best Practice
trishagee
74
19k
Typedesign – Prime Four
hannesfritz
42
2.9k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
196
69k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Keith and Marios Guide to Fast Websites
keithpitt
413
23k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.8k
Large-scale JavaScript Application Architecture
addyosmani
515
110k
Designing for Performance
lara
610
69k
Build The Right Thing And Hit Your Dates
maggiecrowley
38
3k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
36
6.2k
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 いろいろ便利なので 皆さんも利用してみてください