PhoneGap Buildで作るGPSを使ったスマートフォン用地図アプリ

地図アプリのHTMLコーディング

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
PhoneGap Buildを使った地図アプリの開発において、地図アプリのUIをHTMLでコーディングする方法について解説致します。
講師:
04:01

字幕

このレッスンでは 「PhoneGap Build」を使った 地図アプリの開発において 地図アプリのUI 要するにuser interfaceを HTMLでコーディングする方法について 解説いたします まずはダウンロードしてきた こちらの「html_coding」 というフォルダの中に入っている 「index.html」ファイルを エディタで開いてください そしてこれがそのファイルを開いた状態です このファイルを使って今回のレッスンの 解説を進めていきたいと思います それでは早速レッスンを始めていきましょう この「index.html」ファイル このファイルは以前のレッスンで GitHubからダウンロードしてきた プロジェクトテンプレートファイルを 今回の地図アプリ用に 修正したものとなっています このファイルを目で追いながら どのようにHTMLコーディングをしていくか 確認していきたいと思います まずは こちらの 「div id="app"」というタグですね こちらのタグの中に 地図を表示するための「div」タグ こちらは「id="map"」としています と もう1つ 検索キーワードを入れるための「input」タグ こちらを「form」タグで囲って設置しています この「form」タグには 「id="searchBox"」を付けています そして こちらの「input」ボックスには 「id="search"」を付けていて そして「type」属性を 検索ボックスを意味する 「search」を入れています 今回は検索するといったボタンを 置いていませんので こちらの「input」タグの 「type」を「search」に そして それを「from」タグで囲ってあげる というのが1つのポイントとなっています そして この「id="app"」が付いた 「div」タグの下には 「JavaScript」を読み込んでいます まず こちらの「src="cordova.js"」 という「script」タグと そして「"js/index.js"」を「src」としている こちらの「script」タグ こちらは もともとの プロジェクトテンプレートファイルの中に 記載されているものですので そのまま使いましょう そして さらに その下に書かれている こちらの「app.initialize」 という関数を囲っている こちらの「script」タグ こちらもテンプレートファイルの方に 書かれていたものですので こちらも そのまま利用します そして 今回新たに追加したものとして こちらの部分があります こちらは「Google Maps API」を 利用するための ファイルを読み込んでいますね このファイルを読み込む際の 注意事項なのですが こちらの「js?」の後の「sensor」 というパラメーターの値を 「true」に必ずしておいてください こちらのように 「sensor=true」と設定しておくと この「Google Maps API」で 端末のGPS機能を使えるようになります そして以前のレッスンでご紹介した APIキーを利用する場合には こちらに新たに「key」 というパラメーターを追加して その「=」の後に APIキーを張り付けておきましょう そして もう一つ新たに追加したものとして こちらの「jQuery」があります 今回は「jQuery」のサイトから 「jQuery」のファイルを ダウンロードしてきて そして「js」フォルダのなかに設置して それを読み込むような形としています これら「JavaScript」の読み込み以外の HTMLコーディング部分に関しては 通常の HTMLコーディングで問題がないので 「PhoneGap Build」を使うからといって 特に難しく考える必要はありません 通常通りに コーディングしていけば大丈夫でしょう 以上でレッスンは終了です 今回は 「PhoneGap Build」を使った 地図アプリの開発において 地図アプリのUIをHTMLで コーディングする方法について 解説いたしました 以降のレッスンではこの作成した地図アプリの HTMLファイルに対して CSSでスタイルを調節する方法について 解説していきますので そちらも合わせてご覧ください

PhoneGap Buildで作るGPSを使ったスマートフォン用地図アプリ

PhoneGap BuildとはHTMLやCSS、JavaScriptなどを使って制作したファイルをモバイルアプリに変換してくれるWebサービスです。このコースではPhoneGap Buildを使いながらGPS機能を用いた地図アプリの作成する方法について学習します。PhoneGap Buildの事前準備や地図機能の実装方法などについて詳しく解説します。

1時間15分 (23 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2015年03月11日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。