この記事では、Cordova(HTML5+javapre)を用いて、カメラで写真を撮るスマホアプリ(Android, IOS)を作る方法とソースコードについて紹介します。
## カメラプラグイン
Cordovaでは、プラグイン(拡張機能)を導入することで、便利な機能を追加できます。
今回は前回「【Cordova】カメラプラグインのインストール方法」で導入したカメラプラグインを使って、カメラ映像を表示するアプリを作ります。
## ソースコード
サンプルプログラムのソースコードです。
HTML
index.html
!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *"> <meta name="format-detection" content="telephone=no"> <meta name="msapplication-tap-highlight" content="no"> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> <link rel="stylesheet" type="text/css" href="css/index.css"> <title>カメラアプリ</title> </head> <body> <div class="app"> <h1>Camera</h1> <div> <button id="take_pictures">撮影ボタン</button> <div> <img src="" id="image" width="500px" /> </div> </div> </div> <pre type="text/javapre" src="cordova.js"></pre> <pre type="text/javapre" src="js/index.js"></pre> </body> </html>
Javascript
index.js
var app = { initialize: function() { this.bindEvents(); }, bindEvents: function() { document.addEventListener('deviceready', this.onDeviceReady, false); }, onDeviceReady: function() { var button = document.getElementById("take_pictures"); button.addEventListener("click", takePictures); } }; // 初期化 app.initialize(); // 「撮影ボタン」が押された時の処理 function takePictures(){ navigator.camera.getPicture(cameraSuccess, cameraError, { quality: 80, destinationType: Camera.DestinationType.DATA_URL }); } // 撮影成功時の処理 function cameraSuccess(image){ var img = document.getElementById("image"); img.src = "data:image/jpeg;base64," + image; } // 撮影失敗時の処理 function cameraError(message){ alert("Failed!!: " + message); }
値 | 内容 |
---|---|
targetWidth | 画像の横幅[px] |
targetHeight | 画像の縦幅[px] |
quality | 写真の画質(0〜100) |
cameraDirection | 背面カメラ, 正面カメラの選択 |
saveToPhotoAlbum | 写真撮影後に画像を保存するか否か |
correctOrientation | 画像を写真撮影した時と同じ向きにするか否か |
sourceType | ソースタイプ(Camera.PictureSourceType.PHOTOLIBRARYならピクチャフォルダから画像選択、Camera.PictureSourceType.CAMERA ならカメラで写真撮影、Camera.PictureSourceType.SAVEDPHOTOALBUMならアルバムから画像選択 |
destinationType | 戻り値のフォーマット(Camera.DestinationType.DATA_URL、Camera.DestinationType.FILE_URI) |
allowEdit | 画像選択前の簡単な編集を許可するか否か(true, false) |
encodingType | 画像ファイルのエンコード種類 |
mediaType | メディアの種類(Camera.MediaType.PICTURE, Camera.MediaType.VIDEO, Camera.MediaType.ALLMEDIA) sourceTypeでPHOTOLIBRARYかSAVEDPHOTOALBUMを指定した時に有効 |
popoverOptions | iPadでポップオーバー位置を明示するか否か |
## 実行結果
サンプルプログラムの実行結果です。
「撮影ボタン」を押すと、カメラ映像が表示され、写真を撮ることができます。
今回はAndroidアプリ(apkファイル)に変換して実行しています。
生成したapkファイル→android-debug.apk
– | 関連記事 |
---|---|
① | 【Cordova入門】Android向けハイブリッドアプリ開発 |
② | Javascript入門 サンプル集 |
③ | Java入門 |
④ | Node.js入門 |
コメント