#daiizメモ

Scrapboxに夢中

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>
f:id:daiiz:20160211002210p:plain

GitHub

github.com

技術的な話

〜 次回以降に続く 〜

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