アプリカンブログ

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

アプリカンの提供するAPIをまとめて紹介

アプリカンの特徴として、利用できる機能がすべてJavaScriptで提供されるというのがあります。ネイティブをプラグイン的に使うことがないので、ピュアなHTML5/JavaScriptアプリケーションとしてスマートフォン/タブレットアプリが開発できます。

ということで今回はリファレンスより、アプリカンが提供しているAPIについて紹介します。

iOS/Android共通

Accelerometer

加速度センサーを扱います。たとえば現在の加速度を取得する場合は次のように書きます。

//現在の加速度を取得
function getCurrentAcceleration(){
    applican.accelerometer.getCurrentAcceleration(currentAccelerationSuccess, currentAccelerometerError);
}

// 成功時の処理
function currentAccelerationSuccess(res){
    var dump = "currentAccelerationSuccess\n";
    dump += "x:"+res.x+"\n";
    dump += "y:"+res.y+"\n";
    dump += "z:"+res.z+"\n";
    dump += "timestamp:"+res.timestamp+"\n";
    document.getElementById("dumpAreaAcceleration").value =dump;
}

// 失敗時の処理
function currentAccelerometerError(){
    var dump = "currentAccelerometerError\n";
    dump += "code:"+e.code+"\n";
    document.getElementById("dumpAreaAcceleration").value =dump;
}

Barcode

QRコードなどのバーコードを読み取ります。サンプルとして次のようなコードです。

//QRコード読み取り
function captureBarcode(){
    applican.barcode.captureBarcode(captureBarcodeSuccess, captureBarcodeError);
}

// 読み取り成功時の処理
function captureBarcodeSuccess(res){
    var dump = "captureBarcodeSuccess\n";
    dump += "codeData:"+res.codeData+"\n";
    document.getElementById("dumpAreaBarcode").value =dump;
}

// 読み取り失敗時の処理
function captureBarcodeError(e){
    var dump = "captureBarcodeError\n";
    document.getElementById("dumpAreaBarcode").value =dump;
}

Camera

写真を撮影したり、ライブラリから写真を選択します。写真のみ、ビデオのみといった指定もできます。

画像はBase64またはData URIで取得できます。

Capture

デバイスのカメラ、オーディオを使ってマルチメディアデータを生成します。たとえばオーディオを録音して音声を保存したり、ビデオカメラを起動して映像をファイルとして保存します。

動画を保存する場合のコードサンプルは次のようになります。

//動画撮影
function captureVideo(){
    applican.capture.captureVideo(captureVideoSuccess, captureVideoError);
}

// 保存成功時の処理
function captureVideoSuccess(mediaFiles){
    var dump = "captureVideoSuccess\n";
    for (i=0, len=mediaFiles.length; i<len; i++) {
        dump += mediaFiles[i].fullPath;
    }
    document.getElementById("dumpAreaCapture").value = dump; 
}

// 保存失敗時の処理
function captureVideoError(err){
    var dump = "captureVideoError\n";
    dump += "code:"+err.code+"\n";
    dump += "message:"+err.message+"\n";
    document.getElementById("dumpAreaCapture").value = dump; 
}

Compass

いわゆるコンパスです。デバイスの方向を取得します。一度だけ取得したり、一定時間ごとに継続で取得することもできます。

//現在向いている方角を取得
function getCurrentHeading(){
    applican.compass.getCurrentHeading(currentHeadingSuccess, currentHeadingError);
}

// 取得成功時の処理
function currentHeadingSuccess(res){
    var dump = "currentHeadingSuccess\n";
    dump += "magneticHeading:"+res.magneticHeading+"\n";
    dump += "trueHeading:"+res.trueHeading+"\n";
    dump += "headingAccuracy:"+res.headingAccuracy+"\n";
    dump += "timestamp:"+res.timestamp+"\n";
    document.getElementById("dumpAreaCompass").value =dump;
}

// 失敗時の処理
function currentHeadingError(e){
    var dump = "currentHeadingError\n";
    dump += "code:"+e.code+"\n";
    document.getElementById("dumpAreaCompass").value =dump;
}

Connection

デバイスの通信状態を取得します。オフライン時の処理分けなどに使います。

var message = "通信環境:"+applican.connection.type;
alert(message);
if (applican.connection.type == "NONE") {
    // 圏外時の処理
} else if (applican.connection.type == "UNKNOWN") {
    // 判別不能時の処理
} else {
    // オンライン時の処理
}

Contact

連絡先を作成したり、参照します。たとえば作成する場合には次のように書きます。

//連絡先を作成
function createContact(){
    var myContact = applican.contacts.create({"displayName": "Test User"});
    myContact.note = "この連絡先のメモ";
    
    var dump = "createContact\n";
    dump += myContact.displayName+"\n";
    dump += myContact.note+"\n";
    document.getElementById("dumpAreaContacts").value =dump;
}

Database

データの永続化、参照に用いるためのデータベース機能になります。クエリーが使えます。

function searchData(){
    if(db==null){
        alert('データベースを開いていません');
        return;
    }
    var sql = "SELECT * FROM DEMO";
    db.query(sql, searchData_success, searchData_error);
}
function searchData_success(result){
    var dump = "searchData_success\n";
    var cnt = result.rows.length;
    dump += "row cnt:"+cnt+"\n";
    for (var i=0; i<cnt; i++){
        dump += "id:" +result.rows[i].id+", data:"+result.rows[i].data+"\n";
    }
    document.getElementById("dumpAreaDatabase").value =dump;
}
function searchData_error(error){
    var dump = "searchData_error\n";
    dump += error.message+"\n";
    document.getElementById("dumpAreaDatabase").value =dump;
}

Device

デバイスのハードウェア、ソフトウェア情報を取得します。たとえばモデル名、OS、UUID、バージョン、アプリカンのバージョン、解像度などです。また、プッシュ通知のトークン取得にも使えます。

// プッシュ通知用のトークンを取得
function getPushTokenSuccess(res){
    var token = res.pushToken;
}

FileSystem

ファイルシステムです。ファイル/ディレクトリの読み書きの他、ローカルのファイルをHTTPサーバを介してアップロード、ダウンロードする機能もあります。

GameSound

ゲーム向きにサウンドファイル(MP3など)をバックグラウンド再生します。ローカルの他、HTTP上の音楽ファイルを指定することもできます。

var bgmList = [
    {track:0, src:"gamesound/bgm1.mp3"},
    {track:1, src:"gamesound/bgm2.mp3"},
    {track:2, src:"gamesound/bgm3.mp3"},
    {track:3, src:"gamesound/bgm4.mp3"}
];

applican.gamesound.loadBGM(bgmList, loadBGMSuccess, loadBGMError);

// 読み込み成功時の処理
function loadBGMSuccess(){
}

// 読み込み失敗時の処理
function loadBGMError(err){
    alert(err.code);
}

GEOLocation

位置情報の処理になります。GPSに限らず、IPアドレスやRFID、WiFi、Bluetooth、MACアドレス、基地局IDなど様々な情報を使って取得します。一度だけの取得の他、一定時間ごとの繰り返しも可能です。

//位置情報を取得
function getCurrentPosition(){
    var options = { maximumAge: 10000, timeout: 30000, enableHighAccuracy: false};
    applican.geolocation.getCurrentPosition(currentPositionSuccess, currentPositionError, options);
}

// 取得成功時の処理
function currentPositionSuccess(res){
    var dump = "currentPositionSuccess\n";
    dump += "latitude:"+res.coords.latitude+"\n";
    dump += "longitude:"+res.coords.longitude+"\n";
    dump += "altitude:"+res.coords.altitude+"\n";
    dump += "accuracy:"+res.coords.accuracy+"\n";
    dump += "altitudeAccuracy:"+res.coords.altitudeAccuracy+"\n";
    dump += "heading:"+res.coords.heading+"\n";
    dump += "speed:"+res.coords.speed+"\n";
    dump += "timestamp:"+res.timestamp+"\n";
    document.getElementById("dumpAreaGeolocation").value =dump;
}

// 取得失敗時の処理
function currentPositionError(error){
    var dump = "currentPositionError\n";
    dump += "code:"+error.code+"\n";
    document.getElementById("dumpAreaGeolocation").value =dump;
}

Globalization

デバイスの言語設定やロケールを取得します。

applican.globalization.getPreferredLanguage(getPreferredLanguageSuccess, getPreferredLanguageError);

// 取得成功時の処理
function getPreferredLanguageSuccess(language){
    alert(language.value);
}

// 取得失敗時の処理
function getPreferredLanguageError(err){
    alert(err.code);
}

HTTP

HTTP通信を行います。whitelist.xmlにて許可されている必要があります。GETまたはPOSTが可能です。

function HHTPGet(){
    var getHeaders = {
            "Header 1”:"Contents 1",
            "Header 2":"Contents 2",
            "Header 3":"Contents 3"
            };

    var url = "http://some.url/get.php";

    var options = {
            timeout:10000,
            headers:getHeaders,
            verboseoutput:true
            };

    applican.http.get(url, options, httpGetSuccess, httpGetError);
}

// 取得成功時の処理
function httpGetSuccess(result){
    alert(result);
}

// 取得失敗時の処理
function httpGetError(message){
    alert(message);
}

Launcher

別アプリを開くなど連携する際に使います。エラー判定を使うことでアプリがインストールされている場合、いない場合の処理分けができます。

applican.launcher.urlScheme('appName:', launcherUrlScheme_Error);

function launcherUrlScheme_Error(error){
    alert(error.code);
}

LocalNotification

ローカル通知機能です。iOSの場合のみ、バッジの取得や設定が可能です。

//ローカル通知
function localNotificationSchedule(){       //5秒後
    var now = parseInt((new Date)/1000);
    var options = {
        alertId: 1,
        alertBody: "message1",
        uri: "http://www.yahoo.co.jp/",
        fireDate: now+5,
        //repeatInterval: "",
        alertAction: "開く",              //iOSのみ
        applicationIconBadgeNumber: 3,          //iOSのみ
    };
    applican.localNotification.schedule(localNotificationScheduleSuccess, localNotificationScheduleError, options);
}
function localNotificationScheduleSuccess(){
    var dump = "localNotificationScheduleSuccess\n";
    document.getElementById("dumpAreaLocalNotification").value =dump;
}
function localNotificationScheduleError(res){
    var dump = "localNotificationScheduleError\n";
    dump += "code:"+res.code+"\n";
    document.getElementById("dumpAreaLocalNotification").value =dump;
}

Media

オーディオの再生、停止、音量調整などに使います。

function playAudio(url) {
    var media = new Media(url,
        // success callback
        function () {
            console.log("playAudio():Audio Success");
        },
        // error callback
        function (err) {
            console.log("playAudio():Audio Error: " + err);
        }
    );
    // 再生
    media.play();
}

Notification

ダイアログ、音、バイブレーションによる通知機能になります。

applican.notification.vibrate(1000);

Purchase

アプリ内課金を処理します。

applican.purchase.makePurchase('jp_co_xxx_yyy_coin100', 'inapp', makePurchaseSuccess, makePurchaseError);

// 課金開始成功時。ここから課金処理が開始します。
function makePurchaseSuccess(result){
    if(result.productId=='jp_co_xxx_yyy_coin100'){
        //※課金アイテムの付与などの処理を実装する
    }else if(result.productId=='jp_co_xxx_yyy_coin200'){
        //※課金アイテムの付与などの処理を実装する
    }

    //決済完了にする処理。
    //iOSの場合は必ず送信。Androidは消費アイテムの場合のみ送信する。
    if(result.os=="ios" || 
        (result.os=="android" && (result.productId=="jp_co_xxx_yyy_coin100" || purchase.productId=="jp_co_xxx_yyy_coin200"))){
        applican.purchase.finishPurchase(result.purchaseId,  finishPurchaseSuccess, finishPurchaseError);
    }else{
        alert('決済完了しました:'+result.purchaseId);
    }
}

// 課金開始失敗時の処理
function makePurchaseError(error){
    var dump = "makePurchaseError\n";
    dump += "code:"+error.code+"\n";
    dump += "message:"+error.message+"\n";
    alert(dump);
}

// 課金処理成功時の処理
function finishPurchaseSuccess(purchaseId){
    alert('決済完了しました:'+purchaseId);
}

// 課金処理失敗時の処理
function finishPurchaseError(error){
    alert('決済完了できませんでした。'+"code:"+error.code+"\n"+"message:"+error.message);
}

SimpleStorage

データをKVS(キーバリューストア)で簡易的に保存、取得します。

//簡易データ保存
function setSimpleStorage(){
    applican.simpleStorage.set('testkey', 'testval\'.'+(new Date().getTime()), setSimpleStorage_success);
}

// 保存成功時の処理
function setSimpleStorage_success(){
    var dump = "setSimpleStorage_success\n";
    document.getElementById("dumpAreaSimpleStorage").value =dump;
}

SlideMenu

スライドメニューを操作します。applican-config.xmlによる設定が必要です。

applican.slideMenu.getCurrentMenu(getSlideMenu_Success);

//スライドメニューが開いた時の処理。画像とURLの2つが返ってきます。
function getSlideMenu_Success(result){
    var dump = "getSlideMenu_Success\n";
    var cnt = result.length;
    if(cnt>0){
        for(var i=0; i<cnt; i++){
            var menu = result[i];
            dump += "========================\n";
            dump += "image:"+menu.image+"\n";   //画像ID
            dump += "url:"+menu.url+"\n";       //URL
        }
    }
    alert(dump);
}

SplashScreen

アプリ起動時のスプラッシュ画像を指定します。データの読み込みなどが終わったら、hideで非表示にする必要があります。

//スプラッシュ表示
function showSplash(){
    applican.splashscreen.show('splash/splash2_portrait.png', 'splash/splash2_landscape.png', 3000);
}
function showSplash1(){
    //javascriptでタイムアウト
    applican.splashscreen.show('splash/splash1_portrait.png', 'splash/splash1_landscape.png');

    setTimeout(function() {
        applican.splashscreen.hide();
    }, 2000);
}

Video

動画を再生します。Android 4.4から禁止されたvideoタグでの自動再生はこちらで代替可能です。iPhoneの場合はWebViewで再生すると最大化されますが、こちらではインラインで再生可能です。

var options = {
    top:10,
    left:(document.documentElement.clientWidth-190)/2,
    width:190,
    height:240,
    control:false
};
applican.video.play('sample.mp4', playVideoOverlay_success, playVideoOverlay_error, options);

function playVideoOverlay_success(){
    alert("playVideoOverlay_success");
}

function playVideoOverlay_error(error){
    alert("playVideoOverlay_error code:"+ error.code);
}

WebSocket

Android 4.3以前ではWebSocketを使えないので代替実装しています。iOSなどすでに利用できる場合は標準の機能を使うようになっています。

function openWebSocket(){
    applican.webSocket.open(
        "ws://echo.websocket.org",
        webSocketOnOpen,
        webSocketOnMessage,
        webSocketOnClose,
        webSocketOnError
    );
}

// WebSocketが開始した時の処理
function webSocketOnOpen(){
    alert("webSocketOnOpen");
}

// WebSocketでメッセージを受け取った時
function webSocketOnMessage(event){
    alert("webSocketOnMessage\n"+event.data);
}

// WebSocketを閉じた時(サーバとの切断時)
function webSocketOnClose(event){
    alert("webSocketOnClose");
}

// エラー時の処理
function webSocketOnError(event){
    alert("webSocketOnError\n"+event.data);
}

WebView

WebViewを制御します。この機能はAndroid 4.1においてJavaScriptによるブラウザバックが正常動作しない場合がある問題を回避します。

applican.webView.goBack();

Androidのみ

以下はAndroidのみの機能になります。

Bluetooth

Bluetoothの状態取得やON/OFF、シリアル通信を行います。接続は次のようになります。

applican.bluetooth.connect(
    “00:00:00:00:00”,
    bluetoothClientOnOpen,
    bluetoothClientOnMessage,
    bluetoothClientOnClose,
    bluetoothClientOnError
);

// 接続完了時の処理
function bluetoothClientOnOpen(){
    alert("onOpen");
}

// メッセージ受信時の処理
function bluetoothClientOnMessage(message){
    alert("message:"+message);
}

// 切断時の処理
function bluetoothClientOnClose(){
    alert("onOnClose");
}

// 接続失敗時の処理
function bluetoothClientOnError(error){
    var dump = "bluetoothClientOnError\n";
    dump += "code:"+error.code+"\n";
    dump += "message:"+error.message+"\n";
    alert(dump);
}

Finish

アプリを終了させます。

applican.finish();

Keyboard

キーイベントの処理を行います。キーイベントを監視します。

applican.keyboard.watchKeyDown(watchKeyDownSuccess);

function watchKeyDownSuccess(res){
    alert(res.keyCode);
}

WiFi

WiFiの状態取得、ON/OFFの設定、接続を行います。

applican.wifi.getStatus(getWiFiStatus_Success, getWiFiStatus_Error);

// ステータス取得成功時の処理
function getWiFiStatus_Success(status){
  alert("getWiFiStatus_Success status:"+status);
}

// ステータス取得失敗時の処理
function getWiFiStatus_Error(error){
  alert("getWiFiStatus_Error code:"+error.code);
}

この他、サードパーティーのAPIを使うことで広告表示(appC)、ドコモ基地局を使った位置情報の取得(DocomoLocation)、Google Analyticsを使ったアクセス解析(GoogleAnalytics)、プッシュ通知(popinfo)も可能です。

これらのAPIを使えば様々なアプリがハイブリッド(iOS/Android)に開発できることでしょう。詳細はアプリカン リファレンスにてご覧ください!

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