アップルがiOS 11搭載iPhone/iPadなどで採用している新画像形式HEIFをFC2ブログで表示させてみました。

また新しいスキルを獲得したんですね。

HEIFってナニ? おいしい?

アップルがiOSとmacOSで採用しはじめているHEIFというファイル形式については、WebPと並び将来Web世界を席巻するであろう次世代画像形式として最近その動向に関心を持っています。
ちなみにHEIFは”ヒーフ”、WebPは”ウェッピー”と発音するそうです。

HEIFの特徴の一つとして拡張子heicで示される高圧縮画像が挙げられますが、HEIF自体はファイルボックス(コンテナ)のようなものでその中に画像や動画などいくつものアイテムを収められるのが一番の特徴なんだろうと思います。
難しいことはよくわかりませんが、例えばサムネイルを含む複数の画像を一つのファイルとして扱うことができるそうです。

ブログ表示高速化の観点からはコンテナ化によるリクエスト数の削減に期待が持てそうですが、画像遅延ローディングとの相性を考えると、高圧縮技術による画像データ量の削減効果の方が大きいのではないかと思います。

ただこのHEIFはOSや画像アプリでの対応は進みつつあるようですが、2018年12月時点で表示対応しているWebブラウザがなく、また今のところ各ブラウザとも対応予定の話も出てきていないようです。

FC2ブログでHEIF画像を表示したい。

ブログでHEIF表示したいったって対応ブラウザが無いんじゃ仕方ないじゃん。
と思われるかもしれませんが、それが調べていくと手法としては存在していたんですよね。
Javascript化されたHEIF表示ライブラリをブラウザ上で実行してHEIF画像を表示する方法が、下記ブログカードの記事で紹介されていました。

お手軽なHEIFファイルの作成・表示方法 - QiitaQiita

お手軽なHEIFファイルの作成・表示方法.

んで。早速GitHubからダウンロードしたライブラリJSをFC2ブログにアップロードしなおして、上記記事に記載されていたコードを試してみたんですが…これがまたうんともすんともで 何にも表示してくれなかったんですよね。


それでもGoogleChromeデベロッパーツールを使いながら、時間のある時にネットで情報収集して挑戦して失敗して諦めてを何日か繰り返しているうちに、ライブラリJSの改造を経てどうにかFC2ブログでもHEIF画像を表示されることができました。
(※IEでは表示されません。)

上の画像はHEIF画像なんですけど…canvas領域内に描いているので右クリックでダウンロードするとpng画像になってしまいます。
この後に紹介する手法をマネして皆さんのFC2ブログで試してもらうことでしか、これがHEIF画像であることを証明できなかったりします。
ただけっして簡単に試せるシロモノとはいえませんので、興味のある方はどうぞといった感じですけど。

HEIF表示ライブラリのダウンロード。

ノキアが作ったHEIF表示JavascriptライブラリがGitHubにありますので、その中から以下の5つのファイルをダウンロードしてください。
(※IEで表示するためにはこれ以外にもJSファイルが必要になりますが、ここでの説明は割愛させていただきます。)
ライブラリ保存場所は下のリンクをクリック。
「github:HEIF表示Javascriptライブラリ」

  • heif-api.js
  • heif-extension.js
  • hevc-decoder.js
  • image-provider.js
  • libde265.min.js

HEIF表示ライブラリの改造。

FC2ブログのファイルシステム仕様上、そのままのJavascriptでは動作してくれませんので、「heif-extension.js」内の下記3か所を書き換えます。

1.赤マーキング部heic→rdfに変更。
var FILE_EXTENSION = "rdf";

2.赤マーキング部追加。
if (imageElement.src && imageElement.classList.contains("heifimg")) {

3.赤マーキング部url.pathname→urlに変更。
canvas.setAttribute(CANVAS_ATTRIBUTE_FILENAME, url);

各箇所の改造内容についてちょっと簡単に説明しておきます。

1の「heic→rdfへの変更」ですが、元々のHEIF表示ライブラリではimgタグsrc属性のheicファイルを対象にcanvas領域への書き換えが行われるようになっています。
しかしFC2ブログでは拡張子.heicのファイルをアップロードすることはできません。そこでアップロード可能な拡張子である.rdfのファイルを対象とするようにしています。

2の「imageElement.classList.containsを追加」している部分ですが、Lazyloadingの初期表示ドット画像などBase64形式で記載されたものがimgタグsrc属性に設定されていると、その後の処理でエラーになってしまいます。
また僕のブログのようにWebPファイルを拡張子.rdfとして使用している場合は1の変更によって変換対象にされています。
そこでクラス名"heifimg"が定義されているimgタグのみを変換対象にするように制限しています。

3の「url.pathname→urlへの変更」ですが、FC2ブログではブログ用ドメインと画像記録用ドメインが異なるためドメイン後部のURLパスのみでは画像データにアクセスできません。
そこで変換画像URLをhttpsから始まるドメインを含むURLに変更することで画像データに正常にアクセスできるようにしています。

HEIF画像ファイルの準備。

iOS 11搭載iPhoneとかiPadを持っている方はそれで撮影した画像は拡張子.heicになっているそう(僕は持ってないので分かりませんが…)なので、そのファイルを利用します。

持っていない方は、まず下記ブログカード記事を参考にしてGIMP2.10.8をダウンロード・インストールしてください。

GIMP (ギンプ)最新日本語版のダウンロード・インストール方法

WindowsでのGIMP最新日本語版のダウンロードとインストール方法を初心者でも分かるように説明します。

GIMPを立ち上げて好きな画像をドラッグ&ドロップしたあと、【ファイル】→【名前を付けてエクスポート】を選んで、保存ファイルの拡張子を「.heic」に変えてエクスポートするとHEIF画像を作成することができます。

拡張子.heicのファイルが用意できたら、その拡張子だとFC2ブログにアップロードできないので拡張子を.rdfに書き換えます。

FC2ブログでHEIF画像を表示させる。

ダウンロード&改造した5つのJSファイルとHEIF画像ファイルをFC2ブログにアップロードします。

記事編集で以下のように記述します。
青マーキング部はご自分の環境や画像サイズに合わせて変更してください。

<img class="heifimg" src="アップロードしたheif画像ファイルのURL" alt="">

<script src="アップロードした「ibde265-min.js」のURL"></script>
<script src="アップロードした「heif-api.js」のURL"></script>
<script src="アップロードした「heif-extension.js」のURL"></script>
<script src="アップロードした「hevc-decoder.js」のURL"></script>
<script src="アップロードした「image-provider.js」のURL"></script>

<script>
var styleElm = document.createElement('style');
styleElm.type = 'text/css';
styleElm.innerText = '.heifimg{max-width:100%;width:600px}';
document.getElementsByTagName('HEAD').item(0).appendChild(styleElm);
</script>

テスト的には表示できたけど…

現在の表示方法ではJavascriptを介して表示させていますので速度的に遅くなりますし、ライブラリJSのサイズが大きくて(heif-api.jsなんか1.4MBもある!!)読み込み時間も長く、HEIF画像のデータサイズ縮小の効果が台無しになっています。
またJavascriptの実行タイミングやcanvas上に描写していることを考えると、Lazyloadingとの相性も悪いように思います。

ここまでやって何なんですけど、やはりブログで実使用できるレベルになるにはブラウザ側で対応するしかないというのをあらためて実感しました。

う~ん。アップルがHEIFを諦めるとは思えないしファイル管理都合を考えるとHEIFの方が扱いやすいような気もします。
一方でGoogleは自分たちが開発したWebPを推進していくでしょうし、実際ブラウザ各社もWebP対応に動きだしています。
OS的にはHEIF、Web的にはWebPみたいな流れになっていってしまうのかもしれませんね。

今日のアイキャッチ画像は。

「転生したらスライムだった件」からシュナちゃんです。

TVアニメ「転生したらスライムだった件」公式サイト

サラリーマン三上悟は通り魔に刺され死亡し、気がつくと異世界に転生していた。ただし、その姿はスライムだった!リムルという新しいスライム人生を得て、さまざまな種族がうごめくこの世界に放り出され、「種族問わず楽しく暮らせる国作り」を目指すことになる――!

放映前にハーレム萌えアニメという似非情報が入ってきたので期待してたんですが、なかなかヒロインらしき女の子が登場せず、ようやくシズさんが現れたと思いきやすぐに退場しちゃうし仮面かぶってばっかだし…
と思っていたところに登場してくれたのが萌え美少女のシュナちゃんです。

今のところリムル様の秘書兼護衛役であるおっぱいおばけさんの方が出番が多くなってしまっていますが、もう戦闘シーンとかどうでもいいんでシュナちゃんの出番を増やしてもらいたいですね。

リムル様のチート能力である「大賢者」「捕食者」によって何でもアリアリの世界観で、物語的としては大味になりやすくなっているように感じます。
なんていうか世の中にはバランスというものも必要であって、例えば熱に強ければ冷気に弱いとか、そういう物理的に相反する耐性を同時保有しているのは物語的にはつまらなくなってしまうと思うんですよね。
まぁ。そういうところを気にしない系のジャンル作品ということなんでしょうけど。

スポンサーサイト
Webテク転生したらスライムだった件シュナ

0 Comments

Post a comment