SSブログ
IT系とか ブログトップ

ブラウザの位置情報① ― JavaScriptが使えるらしいのでテスト [IT系とか]

今書いているこのブログ、無料ブログなんですけど、JavaScriptが使えるのですね。今知りました。
さて、何して遊ぼうか?(笑)

今どきのWEB技術では、と言っても10年前からある技術ですが、

   

って、どっち押しても同じ動きするんですけどw、
位置情報の取得というのができます。

※ スマホ版はプレビュー機能が無いようなので、公開前に事前に動作確認できません。 動かなかったらごめんなさい。

クリックすると「位置情報の取得を許可しますか?」という確認メッセージが表示されたと思うのですけど、うっかり「許可する」を選択してしまうと、

地図を表示

どこからアクセスしているかバレちゃったりするので、気を付けてくださいね!
位置情報の取得を許可していない場合、またはボタンをクリックしていない場合は、東京駅が表示されます。

位置情報はアクセス元のIPアドレスからこっそり取得する方法が一般的ですが、不正確な場合が多いです。
許可を求められるだけあって、こちらの方法の方が正確です。


※ 位置情報は一切保存していません。というか、多分保存できません。

共通テーマ:日記・雑感

ブラウザの位置情報② ― 真面目に使って何か作ってみる [IT系とか]

前回の記事「JavaScriptが使えるらしいので、テスト」で使ってみた、アクセス元の位置情報を取得する機能。
もちろん、悪い人がプライバシー侵害するためにあるのではありません!
真面目に使えば、色々と便利なものが作れます。

例えば、企業やお店のホームページでは、どこでも作っているアクセス案内ページ。
homepage.png
(サンプル住所:なぜかサントリーホール)


このページを開いた人の位置情報を取得して、近くにいる場合は、地図に現在地からのルート案内を表示するとか。

地図欄に表示↓
akasaka-suntryHall.png

アクセス地図をルート案内にしておくのは、一見便利そうです。
初めてお店や会社を訪問する方には、
「御社のホームページをご覧いただければ、ルート案内が表示されます。参考にしてくださいね!」
なんてご案内できるわけです。

でもこれだと、遠くにいて、訪問する予定もない人にとっては

地図欄に表示↓
chiba-suntryHall.png
縮尺が大きすぎる謎の地図が表示されるだけになります。
それに、位置情報の取得を許可しない人もいます。

そこで、見ている人の位置情報に応じて、近くにいる人にはルート案内を表示し、遠くの人と、位置情報が取得できなかった人には、通常の地図を表示するよう切り替えるのです!


この話、多分もう1回続きます・・・

共通テーマ:パソコン・インターネット

ブラウザの位置情報③ ― 真面目に使って何か作ってみたんだけど・・・ [IT系とか]

前回、「真面目に使えば・・・」で、作るものが決まったので、今回はこれを実現する方法を考えます。
アクセス地点の位置情報を取得して、近くだったら、地図表示をルート案内に切り替えるのでしたね。
akasaka-suntryHall.png

ルート地図の表示については、出発地と目的地の緯度経度を google map に渡すだけでOKなので、
ルート地図:
https://www.google.com/maps/dir/?api=1&origin=35.672638,139.736434&destination=35.667172,139.740841
出発地:赤坂駅(緯度35.672638、経度139.736434)
目的地:サントリーホール(緯度35.667172、経度139.740841)

あとは、ルート案内を表示するか、それとも通常の地図表示にするか?を判定すれば良いことになります。
例えば、会社所在地から1㎞以内にいる場合は、地図表示をルート案内に切り替えるようにしましょうか。
ページを開いた人の位置から、所在地までの距離を算出します。

距離を算出するには、、、
直角三角形を使いまくります。
distance.png sankaku1.png

まず、中学校で習った三平方の定理です。
出発地と目的地の緯度・経度の差分が、それぞれA、Bの値になります。

でも緯度経度は角度なので、距離に変換する必要があります。
まず、緯度の1度が何kmなのかを計算するには、地球の円周を計算して360で割ります。
地球の円周 = 地球の直径 * 3.14
緯度1度の距離 = 地球の円周 ÷ 360


経度の1度が何kmなのかを計算するのは、ちょっと複雑です。
高校で習った三角関数を使います。
cos.png

longitude.png

大抵のプログラム言語にはコサイン関数というものがあって、角度をラジアン単位に変換して渡すとコサインの値を返してくれるので、これを利用します。
所在地から1㎞以内にいるかどうかを調べるのに、地球の直径や半径から距離を算出するっていう、なんだか壮大な話になってきました・・・

私は、主にWEBサービスや社内システムを作っているので、普段は数学の知識はほぼ不要なのですが、偶にこういうのが出てきます。
高校くらいの数学って、「こんなの、社会に出てから使わないじゃん!」とかブツブツ言いながら勉強した覚えがありますが、役に立つこともあるのです!
でも、すっかり忘れているので、そんな時にはこっそりスマホでググって調べます[たらーっ(汗)]

ところで、ここまで書いておいて、こんな事言うのもなんですけど
わざわざ計算しなくても、ルート地図表示に切り替える範囲を大体決めて、緯度経度を固定で持っておけばいいじゃない!?
■ サントリーホール周辺の駅
北:赤坂駅(緯度35.672554 経度139.736340)
南・西:六本木駅(緯度35.663187 経度139.731313)
東:虎の門駅(緯度35.670556 経度139.750148)

⇒ アクセス地点の緯度経度が以下の範囲内だったら、ルート地図を表示する。
緯度:35.663187~35.672554
経度:139.731313~139.750148

プログラマーって、何か小難しいロジックの機能とかを無性に自分で作ってみたくなったりするけれど、なるべく簡単シンプルな方法で作らないとね。
無駄に時間がかかってしまいます。
システムって、同じ要件を満たすものでも、設計する人、作る人によって、開発にかかる手間、即ち開発コストが変わってくるのですよ。

さらに、開発コストの話をするなら、
そもそもこの機能、普通の地点表示のgoogle mapでも、大して使い勝手は変わらないんじゃ??

普通の地点表示の地図↓
suntryHall2.png

えっと、ちょっとカッコ良いかなって思って[あせあせ(飛び散る汗)][あせあせ(飛び散る汗)]
サントリーホールみたいに、最寄り駅がいくつもある場所だったら、多少便利かな。。。


共通テーマ:パソコン・インターネット

意外とgoogle検索にヒットしていた件 [IT系とか]

今、書いているこのブログですが、管理機能に簡易的なアクセス解析機能が付いています。
(簡易的なものなので、アクセス元IPとかは取得していません。ご安心ください。。。)

で、その検索エンジンのページが、いつもこんな感じなのです↓
アクセス解析.png

最近のgoogleの傾向としては、一個人が書いたブログ等は、内容の信憑性が低く正確さに欠けるとみなされるためか、検索順位が低めになるようです。

このブログ、作ったばかりなのもあるし、いつもSEOを完全無視した書き方をしているため、google先生には相手にされていないと思っていたのですけど。

先日、かなり久しぶりに更新した際、ちょっとしたことから、意外とgoogle検索にひっかかっていた事が判明!
ブログのアクセス解析機能が拾えていなかっただけのようなのです。

今後は、googleクローラー君が更新確認に来てくれているうちに、あまり間を開けずにブログ更新するよう心がけます!

いつまで続くか分かりませんが・・・

共通テーマ:日記・雑感
IT系とか ブログトップ

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。