ImageFluxについて / CAMPHOR- 2021-12-18

ImageFluxについて
ピクシブ株式会社
usa
pixiv・CAMPHOR- Webフロントエンドを学ぼう ~ CSSアニメーション・画像変換・配信エンジン ~ 2021-12-18

Transcript

1. について pixiv Inc. usa 2021.12.18
2. 2 自己紹介 • 配信技術部 = ImageFluxを作ってるところ ◦ 他にもやってるけど、これがメイン • マネージャーという肩書ですが、だいたいコード書い てます • プライベートでは、Rubyというプログラミング言語処 理系のコミッタをやってます usa 技術開発本部 配信技術部 マネージャー
3. 3 とは？ • 「画像変換・配信エンジン」 ◦ 画像を変換して ◦ 必要に応じてキャッシュして ◦ 配信する 画像リクエスト オリジン画像 リクエスト オリジン画像を 指定された形式に変換 変換後画像 オリジン画像 エンドユーザー オリジンサーバ
4. • ピクシブがエンジン部分を開発し、さくらインターネットがサービスとして提供 • 今すぐ「ImageFlux」で🔍検索！ • 10月に出た紹介記事 https://sakumaga.sakura.ad.jp/entry/imageflux-1 4 とは？
5. • Q：なんでピクシブがやってるの？ • A：画像そのものを扱うサービスを開発・運営しているから ◦ 普通のサービスは、何らかのコンテンツをユーザーに提供し、そのコンテンツを説明 する材料の一つとして画像が使われている ◦ なので、画像そのものをどうこうするのは、サービスの本筋ではない ▪ そこにコスト・労力をかけるのは費用対効果が悪い ◦ ピクシブは、画像を扱うこと自体が、サービスの本筋 ▪ 本気で画像処理にコストと労力をかけている ▪ 1億枚以上に及ぶ投稿画像があり、ノウハウも大量に蓄積 5 とは？
6. • Q：なんでピクシブがやってるの？ • A：画像そのものを扱うサービスを開発・運営しているから ◦ ピクシブの培った画像処理の技術・ノウハウ自体を、サービスとして提供 ▪ 利用者は、労力をかけずにそれを利用できる ▪ その分のコストを、自分のサービスの価値向上に注ぎ込める ◦ ピクシブは、自社利用だけでは本来は直接の売上がないはずの画像処理開発・運用 から、売上を得ることができる ▪ それを使って、さらなる開発ができる ◦ エンドユーザーの拡大・多様化によって、さらなるノウハウも得られる 6 とは？
7. • つまり、Win Winなサービス 7 とは？
8. • モデルケース ◦ 1枚の画像につき、ユーザービューが複数ある ▪ PC、モバイル、サムネイル、拡大、 etc. ◦ 画像がいっぱいある ▪ 1コンテンツにつき1ページに数枚ずつでも、100ページあったら数百枚 ▪ ユーザービューの種類の数だけ掛け算で増える ◦ コンテンツがどんどん増えていく ▪ ので、画像もどんどん増える 8 どこがうれしいの？
9. • やり方その1：クライアントサイドリサイズ ◦ 元画像(/images/foo.jpg)は素材をそのまま置いておく ◦ 作る方はこれだけなのでとても簡単 9 どこがうれしいの？ <img src=”/images/foo.jpg” width=160 height=120>
10. • やり方その1：クライアントサイドリサイズ ◦ 現代だと、何も考えずに撮影した画像そのままだと、とてもでっかい ▪ 例えば、私の手元のコンデジで適当に撮った画像の場合、 5184×3888 pxで、 9.5MB ▪ → 転送量が多い • エンドユーザー(閲覧者)からすると、表示が遅い ⌛ • サービス提供者からすると、転送量で課金されるサービスでサーバを運用 していると料金が無駄にかさむ 💸 • 混雑時には帯域がひっ迫してサービス運用が困難に 󰢛 10 どこがうれしいの？
11. • やり方その2：リサイズ画像をアップロード ◦ 画像を必要なサイズにリサイズしてからアップロードする ▪ クライアントサイドリサイズの問題は全部解決 ▪ ユーザービューの数だけリサイズ後画像の作成が必要 • 毎回同じような作業を繰り返す手間 (=工数) • 作業者によって作業の質にムラ ▪ そもそも、ユーザーが画像をアップロードする方式のサービスだったらどうする の？ • フリマ系サービス、投稿系サービス、 etc. 11 どこがうれしいの？
12. • やり方その3：アップロード時リサイズ ◦ 画像がアップロードされたときに、サーバ側で自動で必要なサイズにリサイズする ▪ アップロード者の作業はなくなる ▪ その「自動で必要なサイズにリサイズする」仕組みの開発工数が必要 ▪ もちろん運用工数も必要 ▪ デザインが変更されたとき、既にある画像の再リサイズが必要になる • 膨大な数の画像が蓄積されてたらどうする？ • 例：pixiv 1.1億作品 12 どこがうれしいの？
13. • そこで、 ◦ アップロード者は元画像をアップロードしておくだけ ◦ 指定された任意のサイズにImageFluxがリサイズしてエンドユーザーに配信してくれ る ◦ 画像絡みのシステム開発コストはゼロ ◦ 総転送量は普通は減るので運用コストも低減 ◦ 高速転送(=表示)でエンドユーザーもハッピー😍 13 どこがうれしいの？
14. 14 • オリジン設定 使い方 ImageFluxが自動で割り当てたホスト名 元画像が置いてあるサーバにアクセスする 方法の指定 元画像が置いてあるサーバのホスト名
15. • HTML側の変更 これを、 こうするだけ 15 使い方 <img src=”/images/foo.jpg” width=160 height=120> <img src=”https://p1-XXXXXXX.imageflux.jp/w=160,h=120/im ages/foo.jpg” width=160 height=120>
16. 16 使い方 <img src=”https://p1-XXXXXXX.imageflux.jp/w=160,h=120/im ages/foo.jpg” width=160 height=120> HTTPSに標準で対応(あたりまえ) 先ほど自動で割り当てられたホスト名 変換パラメーター 　　w= 横幅　h= 高さ
17. • つまり、HTMLを書ければ誰でも使える • リサイズ以外にもいろいろできる ◦ クリッピング(切り抜き) ◦ 複数画像の重ね合わせ合成 ◦ 画像フォーマット変換 ▪ JPEG→WebPに変換するだけで画像サイズは大幅に縮小できる ◦ etc. ◦ 詳しくは公式ドキュメントを参照 https://console.imageflux.jp/docs/image/conversion-parameters 17 使い方
18. • 株式会社メルカリ様 https://case.sakura.ad.jp/case/234/?_ga=2.209733141.1867241416.1635400151- 931975367.1597903128 ◦ 「ImageFluxではサイズ変更やファイルフォーマットの変換を行う際、画像ファイルを 参照するURL文字列に画像変換用のパラメータを組み込むだけなので、アプリの UI やデザインの変更によって画像のサイズ変更などが必要な場合でも柔軟に対応でき るようになりました」 ◦ 「メルカリの画像データ通信量を30%以上削減することができた」 18 実際の事例
19. • ストアーズ・ドット・ジェーピー株式会社様 (現 ヘイ株式会社様) https://case.sakura.ad.jp/case/247/?_ga=2.36897184.1867241416.1635400151-9 31975367.1597903128 ◦ 「コード変更箇所はパスの組み立て部分だけですので 実作業は1日かかっていない」 ◦ 「保守をしなくてよい、今後を考えなくてよい、どきどきする必要が無い、という 見えな いコストが1/3も減った」 19 実際の事例
20. • BASE株式会社様 https://case.sakura.ad.jp/case/228/?_ga=2.40504994.1867241416.1635400151-9 31975367.1597903128 ◦ 「目に見える形でレスポンスが改善」 ◦ 「ImageFluxを導入した後、画像をアップロードしたのに表示されない、あるいは意図 した画像と違うといった問い合わせは一切ありません。そういった意味で、 カスタマー サポートの部分でも負担軽減につながっています」 20 実際の事例
21. • いいことづくめに見えるが、課題もある ◦ 使い始めるまでが大変 ▪ Webで申し込みをして、連絡を貰って、いろいろヒアリングにこたえて、そこから サービス利用開始(※2ヶ月間の無料試用期間あり) ◦ HTMLも書けない人にはどうしようもない ◦ 「他社の〇〇〇というサービスにあるこの機能がない！」 21 の課題と今後
22. • 使い始めるまでが大変 ◦ 現在、オンラインサインアップの導入に向けて鋭意開発中！ ▪ Web上の申し込みだけでサービス利用開始 が可能に ▪ 利用形態に応じて複数のプランの中から選択可能 に ◦ 実はまだ一切外部発表してないので、これが初の外部へのお知らせ (たぶん) ◦ 詳細は近日中にさくらインターネットより発表されます ◦ 12/15 に公開！ ▪ https://www.sakura.ad.jp/services/imageflux/image/ 22 の課題と今後
23. • HTMLも書けない人にはどうしようもない ◦ 現在、WordPress用のプラグインを鋭意開発中！ ▪ プラグインの画面上で設定して画像をアップロードするだけ で、 自動的にImageFluxが使われるようになる ◦ 実はまだ一切外部発表してないので (以下同文) ◦ 詳細は近日中にさくらインターネットより (以下同文) ◦ 12/15 公開！ ▪ https://www.sakura.ad.jp/services/imageflux/image/ 23 の課題と今後
24. • 「他社の〇〇〇というサービスにあるこの機能がない！」 ◦ カタログにいろんな機能を並べても、実際のサービスで使われる機能なんて限られて るよねえ……🤔 ◦ ピクシブの経験と、今までのImageFluxの顧客企業のみなさまからのフィードバックに より、本当に必要な機能はだいたい揃ってる、はず ◦ とはいえ、「あるといいな」「これもできたらいいのにな」という、付加的な部分ではまだ まだやることがある ◦ 手が足りてないので、腕に覚えのある人は、ピクシブの採用にご応募を！ ▪ https://recruit.jobcan.jp/pixiv/show/b001/365436 24 の課題と今後
25. 25 ご清聴ありがとう ございました おしまい