iPhoneで撮影した画像をWebサイトに表示して確認するためには

本章では、スマートフォンで撮影した画像をHTML上に反映する方法について共有します。

はじめに

HTML5が策定されたことにより、WEBサイトで端末の様々な機能を利用できるようになりました。
例えば、スマートフォンで撮影した画像や動画、音声、現在地といったコンテンツを利用できます。

スマートフォンで撮影した画像を利用

撮影画像を利用するためには、以下の要素を活用します。

• HTMLの「accept」属性
• javascriptの「FileReader」API(オブジェクト)
• CSSの「background-image」プロパティ

上記要素を組み合わせることで、PCやスマートフォンで撮影した画像データを読み込み、Webサイト上に確認として表示させることが可能です。

まず、HTMLの「accept」属性は、ファイルをアップロードする際に利用する「input type="file"」に追加の属性として指定することで、PC・スマートフォンといった端末の機能*1を利用できます。今回は、「accept」にカメラを利用できるように、「image/*;capture=camera」を追加します。「image」は、録画ではなく画像に限定する決まりです。また「capture」は、撮影にどの機能を利用するかを指定する決まりで、端末のカメラ機能を利用するために「camera」を指定します。

次に、javascriptの「FileReader」APIは、端末のファイルシステム*2を利用するための仕組みです。今回は、画像ファイルのデータを読み込み、WEBサイト上に画像として表示するために利用します。「FileReader」オブジェクトに「readAsDataURL」で画像を読み込ませ、「onloadend」でWEBサイトに反映します。

最後に、CSSの「background-image」プロパティは、画像データをHTMLの各種要素に背景として表示するための仕組みです。今回は、「url」に画像のデータ*3を指定することで、画像データを背景として表示します。

実装

以下、実装例です。従来のINPUTタグでファイルを開く手法と違い、デザインに富む表現で画像をアップロードできる仕組みが実現できます。

<style>
input[type="file"] {
    display: none;
}

label.imageBox {
    position: relative;
    width: 200px;
    height: 200px;
    border-width: 1px;
    border-style: solid;
    border-radius: 10px;
    background-position: center center;
    background-size: cover;
    -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .3);
    display: block;
}
label.imageBox > span.title {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: 0 auto;
    -webkit-transform: translate(0%, -50%);
    -moz-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
}
</style>

<input type="file" id="image-id" accept="image/*;capture=camera">
<label for="image-id" class="imageBox">
    <span class="title">タイトル</span>
</label>

<script>
$(document).ready(function () {
    $(document).on("click", "input[type='file']", function () {
        var id = $(this).attr("id");
        $("#" + id + " + label").css("background-image", "");
        $(this).val("");
    });
    $(document).on("change", "input[type='file']", function () {
        var id = $(this).attr("id");
        $("#" + id + " + label").css("background-image", "");
        var files = !!this.files ? this.files : [];
        if (!files.length || !window.FileReader) {
            return;
        }

        if (/^image/.test(files[0].type.toLowerCase())) {
            var reader = new FileReader();
            reader.readAsDataURL(files[0]);
            reader.onloadend = function () {
                $("#" + id + " + label").css("background-image", "url(" + this.result + ")");
            };
        }
    });
});
</script>

実行例

以下サイトより、サンプルを確認できます。
jsfiddle.net

筆休め

IE6が闊歩していた時代と異なり、WEB制作者にとって表現しやすい土壌*4が整い、様々な表現も実現可能となりました。もちろん、ブラウザによる差異は今でもあります。しかし利用者が、ブラウザによる小さな違いに対して受け入れていることが、デザイナにとって非常に大きいかと思います。

以上、「iPhoneで撮影した画像をWebサイトに表示して確認するためには」でした。

*1:カメラや録音、位置情報検索

*2:ファイルの読み出しや保存等

*3:FileReaderオブジェクト内のonloadendで得られるresult

*4:ブラウザ