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

地図の縦横サイズを端末の大きさに合わせる

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
アプリ内に設置した地図の縦横サイズを、実機端末の解像度に併せて大きさを調整する方法について解説致します。
講師:
04:52

字幕

このレッスンでは 前回のレッスンでアプリ内に設置した 地図の縦横サイズを 実機端末の解像度に合わせて 大きさを調整する方法について 解説いたします まずはダウンロードしてきた こちらの「adjust_map_size」 というフォルダの中に入っている こちらの「js」フォルダの中の 「index.js」ファイル こちらをエディタで開いてください そしてこれがそのファイルを開いた状態です このファイルを使って今回のレッスンの 解説を進めていきたいと思います それでは早速レッスンを始めていきましょう まずは前回のレッスンのおさらいからです 前回のレッスンでは こちらの「receivedEvent」という関数の中に このように 「initialize」という関数を作って アプリの中に地図を組み込むプログラムを 書いていきました ただそうするだけで 地図がアプリの横幅縦幅に合わせた サイズで表示されてくるかというと そうではなくて その地図を囲っている 「div」タグに対して動的に JavaScriptで 端末の横幅と縦幅を取得して それをその「div」タグに 設定してあげる必要があります このようにすることで 初めて地図がアプリの中で きちんと表示されてくる形になります 今回はその地図の大きさの設定方法について 見ていきたいと思います 今回注目していただきたい部分は こちらの部分となります まずは変数を定義して その変数の名前を 「deviceWidth」としています 要するに デバイスの横幅を 格納するための変数ですね そして「=」と書いて 「$(window).width();」と書いています こうすることによって端末の横幅を こちらの「deviceWidth」 という変数に格納することができます そして高さも同様の形で取得していきます 同じように 変数「deviceHeight」を作ってあげて そして「$(window).height()」 そして「-20;」としています この「$(window).height()」 という形にすることで 端末の縦幅を取得することができます そうして取得してきた高さを 「-20」pxしたものを この「deviceHeight」の中に 代入しています さて この「20」という値について 少し説明しておきます このコースでは確認するためのデバイスとして iPhone6+を利用しています そして この「20」は端末の上に表示されている 電波状態や時間を 表示されている部分の高さを表しています 要するに ステータスバーの下から 表示させるような高さに設定にして この変数に入れ込んでいるわけですね ただこのステータスバーの 高さに対する対応ですが これは実機端末の機種や インストールされているOSの端末 もしくはPhoneGapの バージョンによって 少し扱い方が異なってきますので 状況に合わせて調節するようにしてください そして この「deviceWidth」や 「deviceHeight」に 実機端末の高さや横幅 そして この変数「deviceWidth」や 「deviceHeight」の中に 端末の横幅や縦幅が代入されたら 今度はGoogle Mapを表示させるための 「div」タグですね それに対して この横幅や高さを設定してあげます その部分がこちらの部分ですね 「$('div#map')」 要するに 「id="map"」が付いた「div」タグですね その「css」に対して 「width」を「deviceWidth」に そして「height」を 「deviceHeight」の値に変更する という命令を書いています こうすることで 初めてアプリの中で地図が 端末の解像度に合わせて 横幅いっぱい そして縦幅いっぱいに 表示されてくる形になります 実際にGoogle Map APIを使って 地図を表示させようとしたときに 上手く地図が表示されない といったような状況になるようであれば この処理が抜けている可能性がありますので 忘れずに覚えておきましょう 以上でレッスンは終了です 今回は アプリ内に設置した地図の縦横サイズを 実機端末の解像度に合わせて 大きさを調節する方法について 解説いたしました 以降のレッスンでは 実機端末のGPS機能にアクセスして 現在地の緯度経度を取得する方法について 解説いたしますので そちらも合わせてご覧ください

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宛までご連絡ください。