アプリカンブログ

HTML5でiOS/Androidアプリが開発できるプラットフォーム、アプリカンのブログです。

リファレンスより。アプリカンでカメラアプリを作ろう

アプリカンのリファレンスページではAPIの説明と共に、そのAPIを使うためのサンプルプロジェクトを公開しています。

今回はその中からCamera APIを使ったBluetooth通信の使い方を紹介します。

必要なもの

プロジェクトのダウンロード

Camera | アプリカン | アプリ開発支援プラットフォームにてサンプルをダウンロードをクリックします。

f:id:moongift:20150528165451p:plain

アプリカンにログイン

アプリカン | アプリ開発支援プラットフォームへ行き、右上にある会員登録をクリックします。既に会員登録済みの場合はログインをクリックします。

f:id:moongift:20150510221355p:plain

新規プロジェクト作成

会員登録、ログイン後に表示されるプロジェクト一覧ページにて、新しいプロジェクトを作成ボタンをクリックします。

f:id:moongift:20150510221412p:plain

プロジェクト名は「カメラデモ」として、対象デバイスはAndroidを選択してください(iOSは対応していません)。そして作成ボタンをクリックします。

作成されると、カメラデモのプロジェクト画面に移動します。

f:id:moongift:20150510221449p:plain

コードのアップロード

プロジェクト画面左にあるアップロードをクリックします。

f:id:moongift:20150510221511p:plain

そしてアップロードと書かれている枠の中に、先ほどダウンロードしたweb.zipをドラッグ&ドロップしてください。

f:id:moongift:20150510221528p:plain

アップロードが完了すると、追加されましたというメッセージが出ます。そして、その下にある公開ボタンをクリックします。

f:id:moongift:20150510221549p:plain

そして公開するボタンをクリックしてください。

f:id:moongift:20150510221604p:plain

更新されました、と表示されれば準備は完了です。

f:id:moongift:20150510221619p:plain

アプリカンシミュレータのインストール

iOSのApp StoreまたはAndroidのGoogle Playにて applican と検索してアプリカンシミュレータをインストールしてください。

f:id:moongift:20150510221634p:plain

アプリカンシミュレータで確認

アプリカンシミュレータを起動すると、まずログイン画面が表示されます。会員登録したログインID、パスワードでログインします。

f:id:moongift:20150510221648p:plain

そうすると登録しているプロジェクトが一覧表示されますので、カメラデモを選択します。

f:id:moongift:20150528165506p:plain

起動するとこのように表示されます。まずは撮影してBase64で取得をタップしてみます。

f:id:moongift:20150528165516p:plain

そうするとカメラが起動しますので撮影します。その結果はカメラデモのアプリ画面に反映されます。

f:id:moongift:20150528165531g:plain

さらに画像のパスを取得することもできます。

f:id:moongift:20150528165606g:plain

そして撮影した写真をカメラロールに保存するためのメソッドも用意されています。

f:id:moongift:20150528165633p:plain

Camera APIの使い方

カメラを起動する際には以下のように実行します。

//カメラ撮影base64で取得
function getPicture1(mode){
    var options = {
        quality: 70,
        destinationType: applican.camera.DestinationType.DATA_URL,
        sourceType: applican.camera.PictureSourceType.CAMERA,
        encodingType: applican.camera.EncodingType.JPEG,
        targetWidth:400,
        targetHeight:400
    };
    applican.camera.getPicture(getPicture1_getPictureSuccess, getPicture1_getPictureError, options);
}
function getPicture1_getPictureSuccess(res){
    var dump = "getPicture1_getPictureSuccess\n";
    dump += "result:"+res+"\n";
    document.getElementById("dumpAreaCamera2").value =dump;
 
    var image = document.getElementById('myImage');
    image.src = "data:image/jpeg;base64," + res;
}
function getPicture1_getPictureError(){
    var dump = "getPicture1_getPictureError\n";
    document.getElementById("dumpAreaCamera2").value =dump;
}
  • applican.camera.DestinationType.DATA_URL : dataURI(Base64)で取得する指定
  • applican.camera.PictureSourceType.CAMERA : ソースはカメラ
  • applican.camera.EncodingType.JPEG : JPEGで受け取る

といった指定になります。この他、

  • applican.camera.DestinationType.FILE_URI : ファイルのパスで受け取る
  • applican.camera.PictureSourceType.PHOTOLIBRARY : 写真ライブラリから取得
  • applican.camera.PictureSourceType.SAVEDPHOTOALBUM : アルバムから取得
  • applican.camera.EncodingType.PNG : PNG画像で取得

などが指定できます。この他、

  • applican.camera.MediaType.PICTURE : 静止画のみ
  • applican.camera.MediaType.VIDEO : 動画のみ
  • applican.camera.MediaType.ALLMEDIA : すべて可

といった指定もできます。

そして取得した画像を保存する場合は次のように実行します。

var imageData = "base64 string data....";
applican.camera.saveToPhotoAlbum(imageData, saveToPhotoAlbumSuccess, saveToPhotoAlbumError);

function saveToPhotoAlbumSuccess(){
    alert('Success');
}
function saveToPhotoAlbumError(message){
    alert(message);
}

また、ファイルのパスを渡して保存することもできます。


アプリカンを使うとカメラ機能を使ったアプリが簡単に作れるようになります。ぜひ皆さんのアプリの中で使ってください。

アプリカン | アプリ開発支援プラットフォーム