株式会社ニューフォリアから公開されている HTML5/CSS/JavaScriptによるiPhone&Androidアプリ開発フレームワーク「アプリカン」を使って実際にアプリを作ってみる，ハンズオンのサポートページです．

更新履歴

• 2016.03.18 第4-5回組込みソフトウェア技術研究会(2016.03.18, 25)用に作成．

アプリカンとは？

以下のWebページを参照．

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

ハンズオンに必要な開発環境

• パソコン
  • OSは問わない．
  • デバッガを持つブラウザを推奨（Firefoxの開発者ツールやChromeデベロッパツールなど）．
  • エディタ（HTML, CSSのタグがハイライトされるものがおすすめ）
• GPS機能を有するスマートフォンあるいはタブレット
  • OSは iOS でも Android のどちらでも可．
  • ただし，iOSの場合，実機へのダウンロードには “Apple Developer Program” の契約が必要．実機でのアプリカンデバッガ上の実行は可能．
• アプリカンのアカウント
  • 無料アカウントでOK
• Amazon AWSのアカウント
  • こちらで用意した環境を使う場合は不要．
• インターネットに接続可能な環境

開発対象のアプリ

複数メンバの待ち合わせを支援するために各時のスマートフォンの現在位置を共有してマップ上に描画するアプリ（要するに Google検索: 待ち合わせアプリ のようなアプリ）を作成します．

開発対象のアプリのイメージは以下の通り．

1. UserIDとGroupIDを設定します．
2. 各メンバのデバイスは位置情報をクラウドに周期的にアップロードします．
3. クラウド上の同一GroupIDの位置情報を参照してマップ上に描画します．

開発環境の準備

1. アプリカンの準備

スタートアップ | アプリカン | アプリ開発支援プラットフォーム にアクセスして，step1 アカウントの解説 ～ step6 実機へのインストール までを実施．

2. 位置情報を共有するDB/WebAPIの準備

Web API with Amazon AWS API Gateway の手順に従って，Amazon AWS 上にデータベースとWeb APIを用意する．

こちらで用意したデータベースとWeb APIを利用する場合はこの手順は不要．

3. サンプルコードの準備

Step0としてアプリカンのプロジェクトの準備をします。

アプリカンのスタートアップの Step. 3 まで進めてみましょう。

ハンズオン

Step1:現在の位置情報を取得しよう．

• 位置情報を取得し，コンソールに出力します．

Step2:取得した位置情報をマップ上に表示してみよう．

• 現在位置を中心にGoogle Mapを表示します．
• 現在位置をマーカーで表示します．

Step3:予めデータベース登録された位置情報を取得しよう．

• バックエンドのデータベースにアクセスし，位置情報を取得し，コンソールに出力します．

Step4:予めデータベースに登録された位置情報をマップ上に表示してみよう．

• バックエンドのデータベースにアクセスし，位置情報を取得し，マップ上にマーカーで表示します．

Step5:予めデータベース登録された位置情報を参照してリストに表示してみよう．

• バックエンドのデータベースにアクセスし，位置情報を取得し，リストに表示します．

Step6:自分の位置情報を送信してみよう．

• 取得した位置情報をバックエンドのデータベースに送信します．
• 送信した自分の位置情報が表示されるようになったことを核ににしましょう．

Step7:周期的に更新してみよう．

• 周期的に位置情報を取得し，データベース上の情報を更新します．
• 周期的に位置情報を参照して，マップを更新します．

Step8:デザインを整えてみよう．

• bootstrap を導入してデザインを整えます．

Step9:設定画面を作って見よう．

• ユーザ名とグループ名を設定するための設定画面を作成します．