Chromeアプリで簡単に画像を表示するためのHTMLタグをつくりました

img-view

ウェブページで写真を表示したい場合は<img>タグを使って

<img src="http://images.miil.me/j/1c3b3f42-c0c0-11e5-a6e4-22000aba146f.jpg">

とすれば良いのですが，Chromeアプリではセキュリティ上の理由でこのような方法で外部（アプリパッケージ外）の画像を読み込むことができません．読み込みエラーになってしまいます．

公式のドキュメントで提示されている解決策として，XMLHttpRequestでBlobとして読み込んで，表示するという方法があります．コードは以下のようになります．

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://images.miil.me/j/1c3b3f42-c0c0-11e5-a6e4-22000aba146f.jpg', true);
xhr.responseType = 'blob';
xhr.onload = function (e) {
    /* ここで <img> を生成している */
    var img = document.createElement('img');
    img.src = window.URL.createObjectURL(this.response);
    document.body.appendChild(img);
};
xhr.send();

写真一枚表示するだけなのにJavaScriptを書かなくてはいけないので，結構大掛かりです．

そこで，今回は，Chromeアプリに備わっている，アプリ内で外部のウェブサイトを表示するための<webview>タグをフル活用*1した新しいタグ<img-view>をつくりました．
bowerで

$ bower install daiz713/img-view 

インストールして，img-view.jsを読み込んだうえで以下のようなHTMLを書くだけで，写真を表示させることができます．widthやheightは通常通りCSSで指定できます．写真がクリックされた場合は，idが「curry」のimg-view要素として検知されます．

<img-view id="curry" src="http://images.miil.me/j/1c3b3f42-c0c0-11e5-a6e4-22000aba146f.jpg"></img-view>

背景色を表すためのbgcolor，角丸半径を表すradius独自属性を以下のように指定すると，円形に切り抜いて表示させることも可能です．

<img-view id="curry" radius="50%" bgcolor="#eee" src="http://images.miil.me/j/1c3b3f42-c0c0-11e5-a6e4-22000aba146f.jpg"></img-view>

GitHub

github.com

技術的な話

〜 次回以降に続く 〜

*1:webviewのsrcに画像のURIを与えただけではありません!!