アプリカンブログ

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

リファレンスより。アプリカンで加速度センサーを使ってみよう

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

今回はその中からAccelerometer APIを使った加速度センサーの使い方を紹介します。

必要なもの

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

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

f:id:moongift:20150528092410p:plain

アプリカンにログイン

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

f:id:moongift:20150510221355p:plain

新規プロジェクト作成

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

f:id:moongift:20150510221412p:plain

プロジェクト名は「加速度デモ」として、対象デバイスは必要なものを選択してください。そして作成ボタンをクリックします。

f:id:moongift:20150510221433p:plain

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

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:20150528092500p:plain

以下が加速度デモを実行した時の画面です。

f:id:moongift:20150528092659g:plain

Accelerometer APIの使い方

加速度センサーは加速度の取得、監視、さらにシェイクジェスチャーの取得ができます。

以下は加速度の監視(ウォッチ)です。watchAccelerationSuccessに100msごとにデータが入ってきます。

var _accelerationWatchID;
function watchAcceleration(){
    var options = { frequency: 100 };
    _accelerationWatchID = applican.accelerometer.watchAcceleration(watchAccelerationSuccess, watchAccelerationError, options);
}
function watchAccelerationSuccess(res){
    var dump = "watchAccelerationSuccess\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 watchAccelerationError(e){
    var dump = "watchAccelerationError\n";
    dump += "code:"+e.code+"\n";
    document.getElementById("dumpAreaAcceleration").value =dump;
}

さらにシェイクジェスチャーの取得です。これは監視を行う必要があります。

applican.accelerometer.watchShake(shakeSuccess);
function shakeSuccess(){
    var dump = "shake: "+parseInt((new Date)/1000)+"\n";
    document.getElementById("dumpAreaShake").value += dump; 
}

アプリカンを使うとこのような動きを伴うアプリケーションがとても簡単にできるようになります。ぜひ皆さんのアプリの中で使ってください。

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