読者です 読者をやめる 読者になる 読者になる

アプリカンブログ

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

アプリカンを使ってスマートフォンアプリを作ってみよう(コンパス編)

今回はアプリカンを使って実際にスマートフォンアプリを作ってみる流れを紹介します。ピュアなJavaScriptだけで作れますので、誰でもすぐに開発をはじめられます。

今回作るのはコンパス(方位磁石)アプリです。スマートフォンのコンパス機能を使って、描画してみます。

HTMLファイルの作成

早速ですがHTMLファイルは次のようになります。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link href="stylesheets/style.css" rel="stylesheet">
    <title>コンパス</title>
  </head>
  <body>
    <div class="container">
      <div class="needle">
        <img src="images/compass-needle.png" />
      </div>
    </div> <!-- /container -->
    <script src="javascripts/applican.js"></script>
    <script src="javascripts/jquery-2.1.1.min.js"></script>
    <script src="javascripts/app.js"></script>
  </body>
</html>

DOMの操作用にjQueryを読み込んでいます。後は東西南北を書いた画像と針を表示しています。このスタイルシートは次のようになります。

.container {
  background-image: url("../images/compass-background.png");
  background-repeat: no-repeat;
  width: 360px;
  height: 640px;
}

.needle img{
  position:absolute;
  width: 40px;
  top: 90px;
  left: 165px;
}

注意点としてはJavaScript、スタイルシートは相対パスで読み込む必要があります。例えば以下のような記述は駄目です。

<script src="/javascripts/applican.js"></script>

開発中はローカルにWebサーバを立てていると思いますのでこの記述でも動きますが、アプリ内で動かす場合は絶対パスにすると読み込めなくなるので注意してください。そのため、スタイルシートから画像を読み込む場合も相対パスで指定する必要があります。

.container {
  background-image: url("../images/compass-background.png"); // ここが相対パス
  :

画像は2つ用意しています。1つはコンパスの背景画像です。

f:id:moongift:20141127212352p:plain

もう一つはコンパスの針になります。

f:id:moongift:20141127212405p:plain

これらを合わせた表示としては次のようになります。

f:id:moongift:20141127212427p:plain

JavaScript

では針を動かすJavaScript(CoffeeScript)を見てみます。

$ ->
  #コンパス方位を一定の時間間隔で取得
  watchHeading = ->
    options = frequency: 100
    _compassWatchID = applican.compass.watchHeading(watchHeadingSuccess, watchHeadingError, options)
  watchHeadingSuccess = (res) ->
    $(".needle img").css transform: "rotateZ(#{res.magneticHeading}deg)"
  watchHeadingError = (e) ->
    dump = "watchHeadingError\n"
    dump += "code:" + e.code + "\n"
    console.error dump
  compassWatchID = undefined
  watchHeading()

watchHeadingは100msごとにコンパス情報を取得しています( applican.compass.watchHeading がそうです)。そして取得が成功したら、針をスタイルシートの transform を使って表示角度を変更しています。コンパスは方位を0から359.99の範囲で取得できます。 watchHeadingError はエラー時の処理になります。

デスクトップ開発時

デスクトップブラウザを使って開発している場合、 watchHeadingSuccess には次のようなダミーデータが入ってきます。

{
  magneticHeading: 45,
  trueHeading: 45,
  headingAccuracy: 0,
  timestamp: 1416830212730
}

そのため角度は45度固定になりますので注意してください。

その他必要なファイルのダウンロード

アプリカンのアプリを開発する際に必要なファイルをダウンロードします。web.zipをダウンロードして、解凍します。そして以下のファイルを開発しているプロジェクトに配置しましょう。

f:id:moongift:20141127212448p:plain

applican-config.xml : アプリカンの基本設定ファイルです。

applican.js : アプリカンAPIを利用するために必要な制御ファイルです。

whitelist.xml : アプリケーションからURL・ファイルのアクセス制御をする際に必要なファイルです。

最終的に次のようなファイル構成になります。これで開発が完了です。

f:id:moongift:20141127212503p:plain

圧縮してアップロード

開発したプロジェクトを web というディレクトリ名にしてZip圧縮します。次のようなコマンドで可能です。

$ rm -R web.zip web # 古いのは消す
$ cp -r compass web # 今回のプロジェクトをコピー
$ zip -r web.zip web # 圧縮

※ 今回のプロジェクトがcompassというフォルダであった場合です。webというディレクトリで作っている場合は古いものを削除する必要はありません。

アップロードはアプリカンの管理画面、アップロードメニューから行います。

f:id:moongift:20141127212517p:plain

コンテンツのアップロードフォームで先ほど作成したweb.zipを指定します。

f:id:moongift:20141127212539p:plain

これで完了です。

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

アップロードが終わったらアプリカンシミュレータを起動します。Android版iOS版がありますのでそれぞれ入手してください。

アプリを起動し、アプリカンのユーザIDとパスワードでログインすると、登録しているプロジェクトが一覧で確認できます。その中から先ほど作成したプロジェクトをタップします。

f:id:moongift:20141127212556p:plain

デバイスの向きを変えると、方位磁針の向きも変わります。

f:id:moongift:20141127212611p:plain


いかがでしょうか。アプリカンを使うとこんな感じに簡単にアプリ開発をはじめられます。APIリファレンスもありますので、他にどんなことができるのかぜひ見てください。

なお今回のコードはGitHubにアップロードしてあります。動作しないと言ったことがありましたらご覧ください(applican.js/whitelist.xml/applican-config.xmlは除いていますのでご注意ください)。

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