超基礎的なGeolocation API 入門

こんにちはよつやです。
今日の宮崎市は台風の影響で大雨でした。ただ、波があって、ものすごく振る時と全く振らない時と分かれていたので変な天気でした。

さて、今回はすごく久しぶりにHTMLとJavascriptを用いた「メモ帳プログラミング」を紹介したいと思います。
え?記事のネタが・・・なかったから作ったのですが何か?
普段僕はGoogle Map APIを用いたカーナビアプリを個人的な趣味で作っているのですが、この時に重要なものとして位置情報があります。そりゃ現在地わからないとカーナビの役割を果たさないですからね。
HTMLとJavascriptでは実際に位置情報を取得するAPIがありまして、意外と行数も少ないので今回はこれを紹介しようと思います。

というわけで、今回扱うのは位置情報を取得する「Geolocation API 」というのを紹介していきたいと思います。
これ、「ジオロケーション」と読みます。最初ゲオロケーションと間違って読んでいたのは秘密・・・
さて、まずはどんな感じの挙動を示すか見せましょう。
まずは適当にメモ帳を開きプログラムを書きます。このプログラムについては後で詳しく書きます。
書いたHTMLファイルを実行すると・・・
無題2
こんな感じで位置情報を提供していいか、ブラウザが聞いてきます。
これで許可をすると、このように緯度経度を表示します。
無題3
一応緯度経度の情報はプライバシーに関わるので消していますが、ここに本来なら0.0000と言った感じで「度」で返してきます。
これをGoogleMapと連動させて記述することで、地図上に現在地を示すことが出来るんですね。

さて、ではプログラムの方を見てみましょう。
無題
こんな感じです。
「//現在地の取得」というところから見ていただきたいのですが、まずは「navigator.geolocation.getCurrentPosition()」というメソッドを用意します。
その中に更に「function(position)」というメソッドを記述し中身を書いていきます。
ちなみにこのgetCurrentPositionと言うのは一度だけ現在地を取得します。カーナビの様に現在地を追跡したい場合、つまり現在地をついじゅうしたい場合は「watchPosition」とすることで追従するようになります。
ただ、ここまではもう呪文とでも思ってひたすら無心でかけばいいかと思います。
次に変数 dataに「position.coords」を代入し、以後の記述を楽にします。
例えば緯度を取得するときは「position.coords.latitude」と入力するところを変わらない部分を変数に代入することで「data.latitude」で実行できるようになります。
ちなみにこのdataと言うのは適当なものでOKです。例えば「umi」とか「LoveLive」としても何ら問題ありません。
最後に経度を取得するならlatitude、緯度を取得するならlongitudeとすると「度」として現在地を取得することが出来ます。

ちなみにこのGeolocation APIには他にも機能があり、先ほどのlatitudeなどの部分を変えることで取得する値が変わります。
一応表にまとめるとこんな感じ。
無題4
もちろん、これ以外にもあります。
他にもいろいろ試してみたいなと思うのですが、まだ試してはいないので読者の皆様も試してみてはいかがでしょうか?

というわけで本日のメモ帳プログラミングは以上になります。
前回の簡単な内容からいきなりマニアックな内容になったのでアレですが、遊んでみてくださいね。

いかがでしたか?
ではまたお会いしましょう!
今日もいい日でありますように!
スポンサーサイト

HTMLとJavascriptを我流でやり続けたよつやのメモ帳教室、始めました!

こんにちはよつやです。
寒い。寒いです。とてつもなく寒いです。なんでこんなに寒いのでしょう。暖冬だとか言われてますが、嘘でしょ?ねえ、嘘でしょ??
あ、天気予報って嘘つきみたいな風潮あるからきっと天気予報が嘘つきなだけだよね、そうだよね。だって現にすごく寒いし。
さて、今日は家に一日中いたのですが、それでもすごく寒いです。外に出たらもっと寒かったのでしょうね。
明日は出かけないと行けないのでちょっと防寒も考えないといけないですね。

さて、新しいジャンルを始めることにした。その名も「メモ帳は素晴らしい!」ということでやらせていただきたいと思います。
なぜこんな新ジャンルを始めるかというと、そもそもこのブログ、ジャンル登録上はコンピュータジャンルなのにこの一週間を不利買ってみるとコンピュータに関する記事はなんとゼロ!しかもそんな状態で「IT Express」なんて名乗ってるんですよ、奥さん。
しかし、最近コンピュータ関連の記事が書けなくなっているのには2つ理由があって、一つは海未ちゃんドールが可愛すぎてコンピュータのことを語ってる場合じゃねぇ!となっていること。もう一つは大学後期から予想以上に忙しくなってきてコンピュータの記事を書くための下調べがあまりできなくなっているということ。
というわけで、時間が無い時は自分の知っている知識の中からネタを出そう!という考えの元、ここ1年ちょっとずっとHTMLとJavascriptのプログラムを書いていたので、超初心者講座ということでそれらのことをやっていきたいと思います。
ちなみに、注意事項ですが、一応大学の授業でHTMLはやったことがあるのですが、その後HTMLを書き始めたのは授業が終わってからしばらく経っていたため、ほとんど独学+我流という最悪な状況です。
なので、変なところとかあるかと思いますが、ぐっとこらえていただけたらと思います。
間違っても、正しい知識を身に着けたいという人は見てはいけません。

まず、プログラムを書くときにはエディタというものが必要になります。しかし、心配ご無用。Windowsにはすでにエディタがあります。
それが僕が最近愛してやまないメモ帳です。ちなみに何度か紹介している自作カーナビは基本的にはすべてメモ帳で書いています。というわけで、メモ帳でも全然問題なくプログラムを書くことができるわけですね!(ただ、大学とかでは異端児の目で見られてしまいますが・・・)

というわけで、まずは導入編。
まず右クリックをして「新規作成」から「テキストドキュメント」を選択してテキストを作ります。
1_20151226230236847.png
そしてこのドキュメントの名前を変更します。
ここで重要なのは最後に「~.html」という風にすること。そう、ひらがなで書くと「どっとえいちてぃーえむえる」ですよ。
2_20151226230238b31.png
するとさっきのドキュメントがHTMLのファイルに変化します。
もし、HTMLファイルにならないという方はフォルダオプションからこの青枠の部分のチェックを外してみてくださいね。
3_201512262302390de.png
これはWindows7ですが、確かWindows8だと上のリボン上にこの項目があった気がします。やっぱりできる子Windows8。

さて、じゃあ早速HTMLを書いていきたいと思います。
しかし、問題があります。それはフォーマットです。普通の開発環境なら最初から基本的なフォーマットは書いた状態で出てくるのですぐプログラムを書き始めることができるのですが、メモ帳の場合、元々”メモ帳”でメモをするためのアプリなので、真っ白です。どこかの洗剤のように”驚きの白さ”です。
というわけで、基本的なフォーマットを自分で書きます。
4_20151226230241545.png
書くとこんな感じ。HTML4時代はDOCTYPE宣言はかなり長々と書かなければならず結構めんどくさかったのですが、HTML5では<!DOCTYPE html>だけでよくなったのでかなり楽です。
解説をしておくと、headという部分はHTMLファイルが読み込まれた時に最初に実行する物。そしてここに書いたものは基本的にはブラウザ上には表示されません。もちろんスクリプトからdocument.writeすれば表示できますが、そんな使い方は基本的にしません。
Javaとかが書ける人向けに言えば、コンストラクタみたいな物です。まあこれが理解できる人はすでに超初心者では無いのでまったり行きましょう。
また、<>の中に色々かいていますが、これをタグと言います。ニコ動とかのあれでは無いですよ?そう、だからこのタグを神がかった使い方をする人のことをタグ職人というわけでも無いですよ?ここには文字の大きさや段落の指定など簡単な命令を書いていきます。

というわけでとりあえず、百聞は一見にしかずです。とりあえず基本的なタグを使って見ましたので、メモ帳の画面と実行画面を見比べてみてください。
まずはメモ帳の画面。
5_20151226230235c60.png
次に実行画面。
6_201512262302493ce.png
h1とか言うのは題名を書いたりするときに使うものでhのとなりにある数字が小さくなるほど文字が大きくなります。一番大きいのは1です。
また、HTMLでは入れ子という形で既述します。例えばさっきの題名のやつだとh1と書いたら必ず終わりには/h1と書かなければなりません。

しかし、実は入れ子にしなくてもいいタグというものが存在します。その例としてimgタグというのがあります。
というわけでまずはメモ帳から見てみましょう。
7_201512262302495ce.png
そう、img~って始めてるのに終わりの/imgがありません。これを単独タグと言います。
ちなみにさっきの例で出した改行を意味する<br>も単独タグです。
これを実行するとこんな感じです。
8.png
ああ、海未ちゃん可愛い。普段みたいに髪をおろしている姿も素晴らしいですが、弓道の時に見せる結んだ姿もいいですね。
この画像のように結ぼうとしているところなんて最高に可愛いじゃないですか!普段凛としている海未ちゃんがこういう姿を見せると世界中の男性は間違いなくノックアウトされてしまうのでは無いでしょうか?いや~そりゃ可愛すぎて萌死にしますよね?(あれ?萌とかもう死語な気が・・・)

というわけで、今回はこの辺で終わりにしたいと思います。
繰り返しますが、これを書いた本人が独学+我流でやってきているため説明はかなりへんてこです。まあ、こんな感じでWebページって書いてあるんだなって位に思っていただければ幸いです。

いかがでしたか?
ではまたお会いしましょう!
今日もいい日でありますように!
プロフィール

よつや

Author:よつや
こんにちはよつやです。
主にPC関係の記事を書いていきます。
コメントやメッセージ大歓迎です。
相互リンクなども遠慮なくお申し付けください!

アクセスランキング
[ジャンルランキング]
コンピュータ
521位
アクセスランキングを見る>>

[サブジャンルランキング]
その他
99位
アクセスランキングを見る>>
twitter
カテゴリ
最新記事
RSSリンクの表示
最新コメント
最新トラックバック
月別アーカイブ
ブロとも申請フォーム

この人とブロともになる

リンク
検索フォーム
RSSリンクの表示
QRコード
QR