たぶん1時間でできるマッシュアップ講座たぶん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のバージョンに合わせて、プラグインをインストールしてください。

http://code.google.com/intl/ja/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 フォーラム トップページへ


TechTargetジャパン

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

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード

＠IT 新着記事

キャリアアップ

＠IT Sepcial
→ ＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -
もっと見る
- PR -

お勧め求人情報

ホワイトペーパー（TechTargetジャパン）

＠IT Sepcial
→ ＠IT Special ヘ
ソリューションFLASH