新しい画像フォーマットHEIFを 用いたiOSアプリの通信量削減/iosdc-heif

9/16 10:30 ~ 10:45 Track A で発表した資料です

Transcript

1. 新しい画像フォーマットHEIFを
   ⽤いたiOSアプリの通信量削減
   iOSDC 2017 Sun Sep 16
   Taketo Yoshida
   

   View Slide

2. 2
   Taketo Yoshida
   @TamaObject12
   ⽇本経済新聞社のiOSエンジニア
   ⽇経電⼦版アプリ、紙⾯ビューアーアプリの開発
   

   View Slide

3. 3
   HEIFとは…
   

   View Slide

4. 4
   High Efficiency Image File Format
   

   View Slide

5. 5
   次世代の画像フォーマット
   

   View Slide

6. 6
   WWDC17にてiOS11から
   HEIFを使⽤できる事が分かりました
   

   View Slide

7. 7
   H.265/HEVCでエンコードされた
   イントライメージを利⽤している
   特徴その１
   

   View Slide

8. 8
   Live Photosなどの
   シーケンス画像を効率よく保存
   特徴その２
   

   View Slide

9. 9
   深度マップや透明度などの
   補助データに対応
   特徴その３
   

   View Slide

10. 10
    本⽇話す事
    HEIFがどのようにmacOSやiOSで使⽤されているか
    紙⾯ビューアアプリのHEIFの導⼊実験の話
    

    View Slide

11. 11
    HEIFに触れてみる
    

    View Slide

12. iOS11のiPhone7(A10 chip)で写真を撮る
    

    View Slide

13. 13
    PHAssetのrequestContentEditingInput
    を使ってファイルのパスを取得してみる
    

    View Slide

14. // Photo image url: file:///var/mobile/Media/DCIM/102APPLE/IMG_2252.HEIC
    

    View Slide

15. 15
    取った写真はHEIFで保存されています
    

    View Slide

16. 16
    Webにアップロードする時は
    どうすればいいん？
    

    View Slide

17. 17
    HEIFからJPEGに⾃動で変換されます※
    HEIF to JPEG
    ※ PhotoKitやUIImagePickerControllerを普通に使えば問題ないです
    

    View Slide

18. Previewで普通に閲覧できる (なおSafariでは無理な模様)
    

    View Slide

19. 19
    HEIF Decode サポート
    iPhone Mac
    Hardware Decode A9 Chip (iPhone 6S, iPad Pro)
    6th Generation Intel Core
    (Skylake family of processors.)
    Software Decode All iOS Devices All Macs
    HEIF Encode サポート
    iPhone Mac
    Hardware Decode A10 Chip (iPhone7) None
    

    View Slide

20. 20
    ⽇経の朝刊画像をHEIF/WebP/JPEG
    に変換して⽐べた話
    

    View Slide

21. 21
    その前に紙⾯ビューアーアプリの話を
    

    View Slide

22. 22
    紙⾯ビューアーアプリの歴史
    2012年3⽉ リリース
    当時は外注開発
    JPEG画像で紙⾯配信
    

    View Slide

23. 内製開発、Swift移⾏
    23
    紙⾯ビューアーアプリの歴史
    WebP画像で紙⾯配信
    サーバレスアーキテクチャが少し話題に
    2016年3⽉ リニューアル
    

    View Slide

24. 24
    2016年3⽉
    2012年3⽉ 201?年??⽉
    JPEG時代 WebP時代 HEIF時代？
    

    View Slide

25. 25
    HEIF導⼊のために評価を⾏う
    

    View Slide

26. 26
    HEIF/WebP/JPEGでSSIMの値を⾒て同程度の画質に※
    朝刊画像⼀週間分を変換
    HEIFの作成はffmpeg, GPAC/MP4Boxを利⽤
    ※ SSIMの値が⼤体0.963 ~ 0.998の間に収まるように
    JPEGとWebPはImageMagickで作成
    

    View Slide

27. 27
    JPEG HEIF
    HEVC intra image
    ffmpeg GPAC/MP4Box
    HEIF作成の流れ
    

    View Slide

28. $ ffmpeg -i {source.png} -y -pix_fmt yuv420p \
    -codec:v libx265 -crf 13 -preset slower \
    -x265-params ssim=1 -f hevc {output.hvc}
    画質測定のためにx265のオプションにSSIMする
    HEIFのHEVCイントライメージを作成
    

    View Slide

29. $ MP4Box -add-image {source.hvc} -ab heic \
    -new {output.heic}
    GPAC/MP4BoxでHEIFを作成する
    

    View Slide

30. 30
    実験結果
    

    View Slide

31. 31
    0
    30
    60
    90
    120
    8/21 8/22 8/23 8/24 8/25 8/26 8/27
    HEIF [MB] WebP [MB] JPEG [MB]
    朝刊画像の各フォーマットの合計サイズ
    

    View Slide

32. 32
    0
    30
    60
    90
    120
    8/21 8/22 8/23 8/24 8/25 8/26 8/27
    HEIF [MB] WebP [MB] JPEG [MB]
    朝刊画像の各フォーマットの合計サイズ
    32%削減
    

    View Slide

33. 33
    0
    30
    60
    90
    120
    8/21 8/22 8/23 8/24 8/25 8/26 8/27
    HEIF [MB] WebP [MB] JPEG [MB]
    朝刊画像の各フォーマットの合計サイズ
    52%削減
    

    View Slide

34. 34
    JPEGと⽐べて、約50%通信量を削減可能
    A9 chip以降ならばハードウェアデコード可能
    

    View Slide

35. 35
    HEIF最⾼や！JPEG、WebPなんて
    最初っからいらんかったんや！
    

    View Slide

36. 36
    しかし…
    

    View Slide

37. 37
    商業⽬的でffmpeg, GPAC/MP4Box
    を使うのは特許使⽤の観点から
    正直怪しい IANAL
    ɹɹɹɹɹɹɹɹ㱸㱸
    ɹɹɹɹɹɹʋ ŋТŋ
    ɹɹţƄŠŖ
    ɹɹɹɹɹʘ ʘϊ
    ɹɹɹɹŊŰ Ŋɹʉ
    ɹɹɹɹʉ
    

    View Slide

38. 38
    ffmpegなどを使ってHEIF
    作成しても商業利⽤できないので
    気をつけてくださいね
    

    View Slide

39. 39
    それでも僕はHEIFを使いたいので
    ⼒技でも実現できるように考えてみました
    

    View Slide

40. 紙⾯ビューアーアプリ朝刊⾃動ダウンロード
    紙⾯画像⽣成
    

    View Slide

41. 紙⾯ビューアーアプリ朝刊⾃動ダウンロード
    紙⾯画像⽣成
    これだ！！
    

    View Slide

42. 42
    ※ デバイストークンの管理については⼀度無視
    紙⾯画像確認
    メタデータ更新
    朝刊のページ分 ✕ N 回
    SQSに積む
    Polling
    Notifier
    Download
    HEIF Encode & Upload
    社内のiPhone Cluster
    Silent
    Remote
    Notification
    紙⾯画像置き場
    ①画像確認
    ②
    ③
    ④
    ⑤
    ⑥
    

    View Slide

43. 43
    ※ デバイストークンの管理については⼀度無視
    紙⾯画像⽣成
    朝刊のページ分 ✕ N 回
    SQSに積む
    Polling
    Notifier
    Download
    HEIF Encode & Upload
    社内のiPhone Cluster
    Silent
    Remote
    Notification
    紙⾯画像置き場
    ①画像確認
    ②
    ③
    ④
    ⑤
    ⑥
    取りこぼし防⽌のために⼀つの端末に通知をN回送る
    スケジューラが何度も起動して反映されてるか確認
    iPhoneの台数は朝刊の最⼤ページ数の48個程度⽤意
    

    View Slide

44. 44
    問題点
    画像反映スピード
    システム全体の可⽤性
    iPhone爆買いを上に説得すること
    

    View Slide

45. 45
    最後に
    

    View Slide

46. 46
    High SierraとiOS11からHEIFの利⽤が可能
    AppleがServerSide-HEIFに対応するのを期待
    HEVCやHEIFは特許問題でドロドロしてる
    1
    2
    3
    

    View Slide

47. 47
    ありがとうございました
    

    View Slide