Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

ImageFlux
December 18, 2021

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

ImageFlux

December 18, 2021
Tweet

More Decks by ImageFlux

Other Decks in Design

Transcript

  1. 2 自己紹介 • 配信技術部 = ImageFluxを作ってるところ ◦ 他にもやってるけど、これがメイン • マネージャーという肩書ですが、だいたいコード書い

    てます • プライベートでは、Rubyというプログラミング言語処 理系のコミッタをやってます usa 技術開発本部 配信技術部 マネージャー
  2. 3 とは? • 「画像変換・配信エンジン」 ◦ 画像を変換して ◦ 必要に応じてキャッシュして ◦ 配信する

    画像リクエスト オリジン画像 リクエスト オリジン画像を 指定された形式に変換 変換後画像 オリジン画像 エンドユーザー オリジンサーバ
  3. • Q:なんでピクシブがやってるの? • A:画像そのものを扱うサービスを開発・運営しているから ◦ 普通のサービスは、何らかのコンテンツをユーザーに提供し、そのコンテンツを説明 する材料の一つとして画像が使われている ◦ なので、画像そのものをどうこうするのは、サービスの本筋ではない ▪

    そこにコスト・労力をかけるのは費用対効果が悪い ◦ ピクシブは、画像を扱うこと自体が、サービスの本筋 ▪ 本気で画像処理にコストと労力をかけている ▪ 1億枚以上に及ぶ投稿画像があり、ノウハウも大量に蓄積 5 とは?
  4. • Q:なんでピクシブがやってるの? • A:画像そのものを扱うサービスを開発・運営しているから ◦ ピクシブの培った画像処理の技術・ノウハウ自体を、サービスとして提供 ▪ 利用者は、労力をかけずにそれを利用できる ▪ その分のコストを、自分のサービスの価値向上に注ぎ込める

    ◦ ピクシブは、自社利用だけでは本来は直接の売上がないはずの画像処理開発・運用 から、売上を得ることができる ▪ それを使って、さらなる開発ができる ◦ エンドユーザーの拡大・多様化によって、さらなるノウハウも得られる 6 とは?
  5. • モデルケース ◦ 1枚の画像につき、ユーザービューが複数ある ▪ PC、モバイル、サムネイル、拡大、 etc. ◦ 画像がいっぱいある ▪

    1コンテンツにつき1ページに数枚ずつでも、100ページあったら数百枚 ▪ ユーザービューの種類の数だけ掛け算で増える ◦ コンテンツがどんどん増えていく ▪ ので、画像もどんどん増える 8 どこがうれしいの?
  6. • やり方その1:クライアントサイドリサイズ ◦ 現代だと、何も考えずに撮影した画像そのままだと、とてもでっかい ▪ 例えば、私の手元のコンデジで適当に撮った画像の場合、 5184×3888 pxで、 9.5MB ▪

    → 転送量が多い • エンドユーザー(閲覧者)からすると、表示が遅い ⌛ • サービス提供者からすると、転送量で課金されるサービスでサーバを運用 していると料金が無駄にかさむ 💸 • 混雑時には帯域がひっ迫してサービス運用が困難に 󰢛 10 どこがうれしいの?
  7. • やり方その2:リサイズ画像をアップロード ◦ 画像を必要なサイズにリサイズしてからアップロードする ▪ クライアントサイドリサイズの問題は全部解決 ▪ ユーザービューの数だけリサイズ後画像の作成が必要 • 毎回同じような作業を繰り返す手間

    (=工数) • 作業者によって作業の質にムラ ▪ そもそも、ユーザーが画像をアップロードする方式のサービスだったらどうする の? • フリマ系サービス、投稿系サービス、 etc. 11 どこがうれしいの?
  8. • 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>
  9. • つまり、HTMLを書ければ誰でも使える • リサイズ以外にもいろいろできる ◦ クリッピング(切り抜き) ◦ 複数画像の重ね合わせ合成 ◦ 画像フォーマット変換

    ▪ JPEG→WebPに変換するだけで画像サイズは大幅に縮小できる ◦ etc. ◦ 詳しくは公式ドキュメントを参照 https://console.imageflux.jp/docs/image/conversion-parameters 17 使い方
  10. • 使い始めるまでが大変 ◦ 現在、オンラインサインアップの導入に向けて鋭意開発中! ▪ Web上の申し込みだけでサービス利用開始 が可能に ▪ 利用形態に応じて複数のプランの中から選択可能 に

    ◦ 実はまだ一切外部発表してないので、これが初の外部へのお知らせ (たぶん) ◦ 詳細は近日中にさくらインターネットより発表されます ◦ 12/15 に公開! ▪ https://www.sakura.ad.jp/services/imageflux/image/ 22 の課題と今後