このページの本文へ

CanvasとPhoneGapで作るiPhone用落書きアプリ (4/4)

2012年01月12日 11時02分更新

文●古籏一浩

  • この記事をはてなブックマークに追加
本文印刷

カメラでの撮影機能を追加

 最後に、カメラで写真を撮影し、撮影した写真にすぐに取り込んでお絵かきできるようにしましょう。カメラ撮影とフォトアルバムの選択は同じnavigator.camera.getPictureメソッドですので、オプションの指定だけでどちらを使うかを選択できます。

 sourceTypeに指定できるオプションは以下の表のようになります。

カメラ撮影navigator.camera.PictureSourceType.CAMERA
フォトライブラリ選択navigator.camera.PictureSourceType.PHOTOLIBRARY

 カメラ撮影の時には、カメラで撮影した画像のJPEG画質を指定します。画質はqualityオプションで指定できますが、画質をかなり落とさないと処理に時間がかかります。テスト時に実機での動作が停止してしまったら、iPhoneを再起動して画質を調整し、再度動作をチェックしましょう。

 実際のプログラムは以下のようになります。

【図】13.png

カメラ機能を追加したプログラム


<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <style type="text/css">
        body { margin:0; padding: 0; background-color:black; }
        canvas { background-color: white; }
    </style>
    <script type="text/javascript" charset="utf-8" src="phonegap.0.9.6.min.js"></script>
    <script type="text/javascript">
        function cameraCapture(srcType) {  
            navigator.camera.getPicture( cameraSuccess, cameraError, {
                sourceType: srcType,
                quality: 30
            });
        }
        // データの取得に成功した場合
        function cameraSuccess(imageData) {
            var image = new Image();
            image.src = "data:image/jpeg;base64," + imageData;
            image.onload = function(){
                var canvasObj = document.getElementById("myCanvas");
                var context = canvasObj.getContext("2d");
                context.drawImage(this, 0, 0, 320, 320);
            }
        }
        // データの取得に失敗した場合
        function cameraError(message) {      
            document.getElementById("stat").innerHTML = "エラー:"+message;
        }
    </script>
  </head>
  <body>
    <canvas id="myCanvas" width="320" height="320"></canvas>
    <button onclick="cameraCapture(navigator.camera.PictureSourceType.PHOTOLIBRARY)">
    フォトライブラリを選択</button>
    <button onclick="cameraCapture(navigator.camera.PictureSourceType.CAMERA)">
    カメラで撮影</button>
    <div id="stat"></div>
    <script type="text/javascript" charset="utf-8" src="js/draw.js"></script>
  </body>
</html>

実機で動作確認

 実機に転送して動作を確認してみましょう。以下の写真のようになります。

【図】14.jpg

Canvas上を指でなぞると赤い線が描かれる。「フォトライブラリ」を選択ボタンをタップすると……

フォトアルバム選択画面になる。画像をタップして選択する

【図】17.jpg

選択した画像がCanvasに描画される

【図】18.jpg

Canvas上を指でなぞると赤い線で描くことができる。「カメラで撮影」ボタンをタップすると……

【図】19.jpg

カメラが起動して撮影状態になる

【図】20.jpg

撮影した画像を使う場合には「Use」ボタンをタップ。撮り直す場合は「Retake」ボタンをタップ

【図】21.jpg

撮影した写真がCanvasに描画される

【図】22.jpg

撮影した写真の上にお絵かきができる

 PhoneGapを使えばWebアプリの機能に加えて、モバイル端末ならではの機能も活用できます。また、プラグインを利用することで、作成できるアプリの幅も広がります。これまでの連載も参考に、ぜひPhoneGapによるアプリ開発を試してみてください。

前へ 1 2 3 4 次へ

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

Webディレクター江口明日香が行く