Monacaには、アプリからカメラや各種センサーなどの各種ハードウェア機能を呼び出すための命令が組み込まれています。今回はカメラの写真や端末の写真を取得する方法を紹介します。

諸注意

devicereadyの使用

モバイル端末のハードウェア機能を呼び出すため、MonacaIDEのプレビューでは動作しません。デバッガーアプリをご用意ください。また、ハードウェア機能の呼び出しにはアプリ内で準備が必要なため、deviceready イベントを考慮する必要があります。

iOSで端末の写真を見る方法

準備中

サンプルアプリ

書籍のサポートページから入手して下さい。
ひな形版と完成版をご用意しております。

ひな形版のソースコード

ひな形版ではHTML部分だけ記載されています。
完成版に持って行くためには、scriptタグ内に完成版のソースコードを打ち込みます。

完成版のソースコード


<script>
// 写真を撮る
function takePicture() {
    var options = {
        sourceType: Camera.PictureSourceType.CAMERA,   // 撮影モード
        saveToPhotoAlbum: true   // 撮影後、写真を端末に保存
    };
        
    // カメラを起動
    navigator.camera.getPicture(onSuccess, onError, options);

    // 撮影完了したときに呼び出される
    function onSuccess(imageURI){
        alert(imageURI + "に保存しました");
    }
    // 撮影キャンセルしたときに呼び出される
    function onError(message){
        alert("エラー: " + message);
    }
}

// 写真を見る
function loadPicture() {
    var options = {
        sourceType: Camera.PictureSourceType.SAVEDPHOTOALBUM   // 読込モード
    };
        
    // 写真を読み込む
    navigator.camera.getPicture(onSuccess, onError, options);
    
    // 読込完了したときに呼び出される
    function onSuccess(imageURI){
        document.getElementById("photo").src = imageURI;
    }
    
    // 読込失敗したときに呼び出される
    function onError(message){
        alert("エラー: " + message);
    }
}
</script>
</head>
<body>
    <div id="buttons">
        <button onclick="takePicture()">写真を撮る</button>
        <button onclick="loadPicture()">写真を見る</button>
    </div>
    <img id="photo" src="">
</body>

解説

takePicture()

この関数ではnavigator.camera.getPicture()関数を使ってカメラを呼び出します。

カメラを呼び出すときの諸条件はoptions変数で予め定義しています。また、カメラを呼び出したときの処理に関してはonSuccess()関数が、呼び出し失敗したときにはonError()関数を呼ぶように記述しています。

今回のオプションはカメラを通常モードで起動して撮影後に端末に保存する設定（saveToPhotoAlbum: true）となっています。端末に保存する必要が無い場合は「saveToPhotoAlbum: false」に設定してください。また、オプションで起動するカメラをリアカメラに変更することも可能です。オプションで指定できる内容の詳細はCordovaのマニュアルを参照してください。

カメラの撮影が成功したときに取得できる情報

「function onSuccess(imageURI){」の引数部分が、カメラの撮影が成功したときに取得できる情報を示しています。端末内で写真が保存された場所のアドレス情報が格納されます。

この情報をimgタグのsrc属性に渡せば、画面上に画像を表示できます。

loadPicture()

この関数もnavigator.camera.getPicture()関数を使っているのですが、オプションで「Camera.PictureSourceType.SAVEDPHOTOALBUM」を指定しています。この場合、カメラが起動する代わりに端末内に保存された写真を参照します。アプリの利用者には写真の一覧が表示され、そのなかかから写真を選んで貰う形となります。

アプリの利用者が写真を選んでくれた場合はonSuccess()関数、選んでくれなかった場合はonError()関数が呼ばれます。

なお、最新のiOSでは「Camera.PictureSourceType.SAVEDPHOTOALBUM」による参照を行っても、取得するURLをアプリ内で表示できないため、実質、この方法は使えません。

iOSで端末内の写真を参照する方法は改めて記事にする予定です。