たぶん1時間でできるマッシュアップ講座

クラウドで動く
GPS連動スマホ用Webアプリを作る

株式会社リクルートメディアテクノロジーラボ
山本大策
2010/11/4

- PR -

　皆さん、こんにちは。リクルートメディアテクノロジーラボの山本です。現在、「Mashup Awards 6」という開発コンテストを開催しています。このコンテストの関連イベントで開発者の方とお会いする機会があったのですが、その際に「応募したいんだけど、開発する時間がない……」という声をよく耳にしました。そこで今回は、そんな開発者の方の参考になればと思い、1時間で開発できるスマートフォン向けマッシュアップアプリの開発手順を紹介します。

現在地周辺のスポットをリアルタイム表示するWebアプリ

　今回開発するのは、現在いる場所の位置情報を基に、その周辺にあるスポットをリアルタイム表示するWebアプリです。PCではなく、iPhoneやAndroidなどのスマートフォンで使われることを想定しています。最近スマートフォンを持っている方は増えているので、そういったスマートフォンを持っている方が、普段生活するなかで気軽に使えるアプリを開発してみたいと思います。

iPhoneで本稿のサンプルを表示したところ

　ここから、開発作業に必要な時間の目安に従い、開発手順を紹介していきたいと思います。この時間で作業を進めていけば、およそ1時間でアプリを開発できます。さあ、頑張っていきましょう！

【0～20分】まずは、せっせと開発環境構築

　本稿では、オープンソースの統合開発環境であるEclipseを利用します。Eclipseのダウンロードサイトから、開発する端末に合わせてダウンロード、インストールを行ってください（筆者の環境では、Windows 64bit版Helios Service Release 1をインストールしました）。

　Eclipseのインストールが完了したら、「Aptana」のダウンロードサイトからEcipse Pluginバージョンをインストールしてください。Aptanaプラグインをインストールすると、HTMLとJavaScriptのコード補完、ローカル環境でのHTMLプレビューができて便利です。

http://www.aptana.com/products/studio2/download

Aptana | Download Aptana Studio 2.0.5 via kwout

　また本稿では、サービスを公開するサーバ環境として、クラウドPaaS環境のGoogle App Engineを利用するため、Google App Engineへのアプリケーションのデプロイが簡単にできる「Google App Engine Plugin」をインストールします。「Google Plugin for Eclipse」のページから、Eclipseのバージョンに合わせて、プラグインをインストールしてください。

Google Plugin for Eclipse - Google Code via kwout

【20～30分】新規プロジェクト作成＆Hello World！

　さあ、これで開発環境が整いました！ここから、いよいよ本格的にコーディングに入っていきたいと思います。

　まずは、Eclipseで「Spotnavi」という新規プロジェクト（［Google］メニュー→［Web Application Project］）を作成します。そのプロジェクトのなかに、ファイルを新規作成します。ファイルの名前は「index.html」にしましょう。まずここでは、基本の「Hello World!」を表示させてみましょう。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Spotnavi</title>
  </head>
  <body>
    <div id="msg">Hello!World!</div>
  </body>
</html>

　そして、Eclipseのメニューから「実行」を選択します。そうすると、PCのWebブラウザ（Firefox）でindex.htmlが表示できます。

　これでアプリケーション開発環境が確認できました。

1/3

INDEX
たぶん1時間でできるマッシュアップ講座　クラウドで動くGPS連動スマホ用Webアプリを作る
	Page1 現在地周辺のスポットをリアルタイム表示するWebアプリ【0～20分】まずは、せっせと開発環境構築【20～30分】新規プロジェクト作成＆Hello World！
	Page2 【30～40分】Web APIで地図表示と現在地取得【40～50分】スマートフォンで動作確認
	Page3 【50～60分】スポット情報を表示 HTML5やjQueryで、さらに高機能に

　Smart＆Social フォーラムトップページへ

Smart ＆ Social フォーラム新着記事

夏休みの自由研究にマイコンボードで「電子サイコロ」を作ったり、音楽プログラミングをしたりしてみよう （2017/7/24）
　子ども向け電子工作＆プログラミング用マイコンボード「chibi:bit」の基本的な使い方を紹介する企画。夏休みの自由研究に「電子サイコロ」を作ったり、音楽プログラミングをしたりしてみよう
子ども向け電子工作＆プログラミング用マイコンボード「chibi:bit」の基本的な使い方 （2017/7/20）
　子ども向け電子工作＆プログラミング用マイコンボード「chibi:bit」の基本的な使い方を紹介する。夏休みの子どもの自由研究などに役立てつつ、プログラミングを始めるきっかけにしてみてはいかがだろうか
3DゲームのAIをiOSのSceneKitとGameplayKitで作る基本 （2017/7/10）
　3Dゲーム用のフレームワークSceneKitを使った簡単なアプリ制作を通して、3Dゲーム用の人工知能（AI）について学ぶ
UnityアプリをWebGL、UWP、Android、iOS用としてビルドしてみた （2017/6/27）
　アプリをWebで実行できるように書き出す方法やWindows上でUWP、Android、iOS用などにビルドする方法について解説する【Windows 10、Unity 5.6に対応】