HEIC画像って何！？ってところから実装まで

HEICってなんだよ〜〜〜〜

Transcript

1. ⿑藤 夢実 HEIC画像って何！？ ってところから 実装するまでの流れ
2. ⾃⼰紹介 01 ⽬次 実装までの流れ 03 HEICって何？ 02 苦労したところ 04 さいごに 05
3. ⾃⼰紹介 01
4. ⾃⼰紹介 名前: ⿑藤夢実 08 仕事: フロントエンドエンジニア 趣味: 美術館巡り‧ハンドメイド‧ゲーム(最近はDQ5)
5. 10MBまで PC:Chrome/Safari スマホ:iOS/Android Next.js 画像の許容 アプリの要件 環境の許容 実装 いろいろお話しする前に.....
6. HEICって何？ 02
7. HEICって何？ アプリにアップロードした画像が表⽰されない！！ ↓ .heicという拡張⼦.....HEIC画像？？？ HEICとの出会い
8. HEICって何？ じゃあ、表⽰させよう！！
9. Appleが作った 独⾃の画像 ⾼画質 ⼩容量 iOS標準 HEIF 国際規格のこと HEIC(ヘイク)とは？ HEICって何？ HEICの特徴 HEIF(ハイフ)とは？ HEIC この規格を元に作 られたもの HEICがなんなのか調べてみよう！
10. 環境差の調査 環境別表⽰表
11. 環境差の調査 Safari以外は、<img src="..."> で読み込んでも何も表示ない .... しかも、Next/imageがHEICに対応していない.....
12. そのまま HEIC画像が表示 acceptの画像形式に 自動的に変換 環境差の調査 JPEG画像に ⾃動的に変換 macOS Safari iOS Safari inputのaccept属性でheicが記載されているかどうか 記載関係なく 記載されている 記載されていない
13. 実装までの流れ 03
14. ⽅針の決定 許容 判断材料 対象ユーザーにiOSを使⽤する⼈が多いかどうか iOSデフォルトで設定されていることがあるので、多くの写真が⾮対応になってしまうかも ⾮対応 実装コスト： 低 ユーザー体験： 落ちる 実装コスト： ⾼ ユーザー体験： ◎ JPEGに変換する
15. 変換する場所の決定 フロントエンド バックエンド 判断材料 プレビュー画像を表⽰する必要があるかどうか
16. 変換で検討したライブラリ 許容 heic2anyは実装できませんでした 10MGの画像だと変換されない可能性があるという記事を⾒た heic2any Canvas＋heic-decode
17. 変換に使⽤したライブラリ 無事にCanvas＋heic-decodeでJPEGに変換する処理ができました🎉
18. 苦労したところ 04
19. 苦労したところ カラーノイズ + Live Photos + ⼿ぶれ→MAX7MB
20. 苦労したところ 環境ごとに異なるため 今⾃分が何をやっているのか、検証も多く分からなくなる
21. さいごに 05
22. さいごに HEIC画像は、⼀般的には変換せずに⾮対応にすることが多いので あまり記事がなく、実装に苦労しましたが、無事に実装できてよかったです。 もし、⾃分がアプリを作っている時にHEIC画像にであったら 今⽇のLTを思い出して参考にしてくださると嬉しいです。
23. Thank you!