このページの本文へ

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

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

文●古籏一浩

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

フォトライブラリの写真を取り込む

 お絵かきアプリの基本機能が無事に動作したので、PhoneGapならではの機能を追加します。PhoneGapにはiPhone/iPad内に保存されているフォトライブラリ(カメラロール)に保存されている画像データを読み込む機能があります。ボタンがタップされたらフォトライブラリから写真を選択できるようにしましょう。選択した写真はCanvasに描画されます。

 ボタンを用意します。ボタンはクリックされたら(タップされたら)、cameraCapture関数を呼び出すようにします。


<button onclick="cameraCapture()">フォトライブラリを選択</button>

 フォトライブラリへは、カメラで撮影する場合と同じ、PhoneGapのCamera APIを使ってアクセスできます。navigator.camera.getPicture()メソッドを使い、sourceTypeのオプションに「navigator.camera.PictureSourceType.PHOTOLIBRARY」を指定するとフォトライブラリから画像を選択できます。


navigator.camera.getPicture( cameraSuccess, cameraError, {
    sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY
});

 この後の処理はカメラでの撮影とまったく同じです。カメラからの画像取り込みに関しては過去の記事を参照してください。

PhoneGapでiPhoneのカメラアプリを作ろう
http://ascii.jp/elem/000/000/624/624794/

 これでフォトライブラリの画像を選択する画面になり、選択した画像がCanvasに描画されるようになります。実際のプログラムは以下のようになります。

【図】8.png

変更を加えたプログラム

 なお、本来ならばPhoneGapのdevicereadyイベント発生後でなければカメラ機能は正しく使えませんが、ここでは起動後、ボタンがタップされるまでに十分な時間があるものとしてdevicereadyイベントの処理を省略しています。一般に配布するアプリを作成する場合は、devicereadyイベントを捕捉して処理を実行するようにしてください。

 実機に転送して実行してみましょう。Canvasに何か描いてからボタンをタップすると、フォトライブラリが表示されます。カメラから撮影した写真も選択できますが、写真のサイズが大きいと変換に時間がかかり、iPhone 4では4~5秒近く待たされることがあります。しばらくするとCanvasに選択した写真が描画されます。

【図】9.jpg

Canvasに何か描いてからボタンをタップする

【図】10.jpg

Camera Roll(カメラで撮影した写真)かPhoto Library(フォトライブラリ)をタップ

【図】11.jpg

描画したい写真をタップ

【図】12.jpg

しばらくすると選択した画像がCanvasに描画される。画像上で指をなぞると赤い線で描ける


<!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() {    
            navigator.camera.getPicture( cameraSuccess, cameraError, {
                sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY
            });
        }
        // データの取得に成功した場合
        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()">フォトライブラリを選択</button>
    <div id="stat"></div>
    <script type="text/javascript" charset="utf-8" src="js/draw.js"></script>
  </body>
</html>

この連載の記事

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

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

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