Tizen SDK 2.2の変更点・注意点と、カメラアプリの作例

HTML5で作る！ 次世代スマートフォンOS「Tizen」アプリケーション（2）

プロジェクトの作成

　それでは、プロジェクトを作っていきましょう。今回はTizen UI Frameworkの「Multi Page Application」テンプレートを使ってプロジェクトを作っていきます。

　まず［File］-［New］-［Tizen Web Project］を開き、プロジェクトウィザードを起動します。そして「Template」タブの［Tizen］-［Tizen Web UI Framework］を開き、「Multi Page Application」を選択してください。Projectnameに任意の名前を入力し「Next」ボタンを押します。

　次の画面ではTizen Web UI Frameworkライブラリのバージョンを選択できますが、そのままにしましょう。「Theme」タブをクリックし、用意されているテーマ、WhiteかBlackを選びます。Tizen2.2では端末のデフォルトのテーマがBlackになりましたので、それに合わせる形で今回はBlackを選択します。そして「Finish」ボタンを押してください。

　プロジェクトが作成されたら、プロジェクトを右クリックして［Run As］-［Tizen Web Simulator Application］や［Run As］-［Tizen Web Application］を選び、前回紹介したWebシミュレータやエミュレータで動作確認を行います。

　前回紹介したように、エミュレータでの実行には開発者署名のための署名ファイルを作成する必要がありますが、Tizen SDK 2.2では以前のようにコマンドラインを使用する必要はなく、IDE内で作業が完結するようになりました。

　手順としては、まず［Window］（Macの場合は［Tizen SDK］）-［Preferences］-［Tizen SDK］-［Security Profiles］を開きます。次に［Profiles］セクションの［Add］ボタンを押し、任意のプロファイルの名前を入力してOKを押します。次に［Author Certificate］セクションの［Generate］ボタンを押し、必要な項目を埋めていきます。OKを押せば、次に出るダイアログで［Yes］を押すと自動的にプロファイルにひも付けされますので、Preferences画面のOKボタンを押して作業は終了になります。これでエミュレータでの起動や、実機を入手された方は実機での起動ができるようになりました。

ページの作成と遷移

　次にページを作っていきましょう。今回は次の2画面を作りたいと思います。

1. カメラを起動するボタンがあるトップページ
2. カメラで撮影した画像を表示するページ

　それではindex.htmlを開いて中を見ていきましょう。

　jQuery Mobileの経験者であれば、見慣れた2ページのHTML構成になっています。とりあえずサンプルの文章などは省きつつ、1つ目の画面に2つ目の画面へと遷移するボタンを残し、2つ目の画面には1つ目の画面に戻るボタンを置いておきましょう。

<!-- Start of first page: #one -->
<div data-role="page" id="one">
    <div data-role="header" data-position="fixed">
        <h1>Multi-page application</h1>
    </div>
    <!-- /header -->

    <div data-role="content">
        <!-- ここにカメラ起動の機能をつける -->
        <input type="file" accept="image/*" capture="camera" id="imageInput" >
        
        <p>
            <a href="#two" data-role="button">Show page "two"</a>
        </p>

    </div>
    <!-- /content -->

    <div data-role="footer" data-position="fixed">
        <h4>Page Footer</h4>
    </div>
    <!-- /footer -->
</div>
<!-- /page one -->


<!-- Start of second page: #two -->
<div data-role="page" id="two">
    <div data-role="header" data-position="fixed">
        <h1>Two</h1>
    </div>
    <!-- /header -->

    <div data-role="content">
        <!-- ここにカメラから取得した画像を表示する -->
        <img id="inputImage" style="width: 344px;height: 344px;"/>
        <p>
            <a href="#one" data-direction="reverse" data-role="button">Back
                to page "one"</a>
        </p>

    </div>
    <!-- /content -->

    <div data-role="footer" data-position="fixed">
        <h4>Page Footer</h4>
    </div>
    <!-- /footer -->
</div>
<!-- /page two -->

　以上で画面の下準備ができました。

カメラから画像取得

　まずはカメラの制御ですが、HTMLのINPUTエレメントを利用します。HTML5では「HTML Media Capture」としてINPUTエレメントからカメラなどの機器から画像などを取得する仕様の策定が進められています。これはすでに最新のAndroidブラウザやモバイル向けChromeなどには搭載されていますが、下位互換性も考えるとなかなか利用するのがためらわれる機能です。新しいプラットフォームのTizenであれば下位互換を気にすることなく利用することができます。

　INPUTエレメントにおいてTYPE属性を"file"、accept属性を"image/*"、capture属性を"camera"とすることで、カメラからの静止画をキャプチャできます。ここでaccept属性を"video/*"にすれば動画の取得が可能ですし、capture属性を"file"にするとギャラリーからの画像読み込みが可能になります。

　画像の取得は、INPUTエレメントのchangeイベントによってファイルとして取得が可能です。イベントによって取得したファイルデータをHTML5の「File API」のFileReaderクラスによってdataURL形式のデータとして読み込むことが可能です。このdataURL形式のデータはそのままIMAGEエレメントのsrc属性として貼り付けることができ、そのIMAGEエレメントをCANVASエレメントに描画してから一連の画像処理を行うことができます。

index.html

<input type="file" accept="image/*" capture="camera" id="imageInput">

main.js

$("#imageInput").change(function(e) {
    var file = e.target.files[0];
    var reader = new FileReader();
    reader.onload = onReadImage;
    if (file.type.match('image.*')) {
        reader.readAsDataURL(file);
    }
});
function onReadImage(e) {
    var imageSrc = e.target.result; 
        /**
         * Case1. カメラから取得した画像を表示するのみ
         */

    $("#inputImage").attr("src", imageSrc);
}

　ファイルINPUTエレメントはデフォルトのスタイルが適用されているので、見た目を変えたいという場合は、以下の2つのやり方があります。

　1つ目はCSSでINPUTエレメントを非表示にして、別のボタンを用意して、ボタン押下時のイベントでINPUTエレメントを反応させるというやり方です。

index.html

<input type="file" accept="image/*" capture="camera" id="imageInput" style="display: none;">
<button id="startCamera">Start Camera</button>

main.js

$("#startCamera").click(function() {
    $("#imageInput").click();
});
$("# imageInput ").change(function(e){ 
     //同上
}) ;

　2つ目はINPUTエレメントをHTML上に配置すらせずに、ボタンを押した時に動的に作成して、カメラ画像の取得イベントを起こさせるというやり方です。

index.html

<button id="startCamera">Start Camera</button>

main.js

$("# startCamera ").click(function(e){
    $("<input>").attr({
        type: "file",
        accept: "image/*",
        capture: "camera"
    }).change(function(e){
        //同上
    }).click(); 
}) ;

　このように、HTMLならではの工夫やJavaScript単独での工夫など、自由度が高いのが分かります。

　機能を試したくとも手元に実機がない、という方でも、TizenのエミュレータにはPCのカメラを利用する機能がついています。さらに、Webシミュレータにもカメラの代わりに画像ファイルを読み込む機能もありますので、実機がなくとも動作を確認することができます。