スキップしてメイン コンテンツに移動

投稿

ラベル（Ajax）が付いた投稿を表示しています

無線LANで現在位置を取得してGoogleマップとストリートビューで表示する

昨年の8月に書いた記事、「 Google App Engine: Gearsで位置情報を取得してストリートビューで表示させる 」で、無線LANから取得した現在位置を Googleマップ と ストリートビュー で表示するウェブアプリを作ったが、今回、それをブログなどにもそのまま貼り付けられるようにしてみた。もともと、JavaScriptを使ったアプリなのでそれほど変更するところもなかったのだが、無用な部分を削除し、きちんと画面にエラーメッセージを表示するようにした。動作させるためには Gears をインストールしている必要がある。 無線LANから現在位置情報を取り出すためにGearsの Geolocation API を使った。位置情報を取り出したらあとは Google Maps API でそれをGoogleマップとストリートビューで表示させるだけだ。因みに、今年の7月からGoogleマップの画面で左上にある四角いボタンを押すと 現在位置を表示できる ようになっている。 今回のアプリでは、現在位置を示すマーカーに自作の扇形アイコンを使った。ストリートビューの向きと連動している。ペグマン(人型アイコン)でもよかったのだろうけど、個人的には向いている方向が分かりづらいと思う。 以下にソースファイルを示す。ページを読み込んだ際にGearsにより位置情報を取得している。 <script src="http://maps.google.com/maps?file=api&v=2.x&key= Google Maps API Key " type="text/javascript"></script> <script type="text/javascript" src="http://code.google.com/apis/gears/gears_init.js"></script> <script type="text/javascript"> var map; var pano; var overlayInstance = null; var marker;...
コメントを投稿
続きを読む

Google App Engine: Googleマップのストリートビューが凄い

日本でも Googleマップでストリートビュー のサービスが開始された。既にいろいろなところで 話題になっている が、実際に使ってみると確かに凄い。自宅の前の道は車がぎりぎり通れるかどうかと云う細い道なのだが、それでもちゃんと自宅が写っていた。とっても面白かったので、Google Maps APIでストリートビューをいじってみたくなり、何かできないか考えてみた。 そこで、 Google Maps API Demo Gallery - Lazy Street View を参考に、と云うかほとんどそのままのコードをGoogle App Engineで利用してみた。スクリプトをそのままHTMLとして書き出しているだけなので、Google App Engineである必要はなく、利用したというのもおこがましいのだが、Google Maps APIを一度も使ったことがなく、とりあえずどんなものか試したかっただけなのでご容赦を。でも、Google App EngineとGoogle Maps APIを組み合わせて面白そうなことができそうだなぁ。実際の町を舞台とした3Dロールプレイングゲームとか?(笑) Google Maps Street View API Demo デモではJR秋葉原駅とヨドバシカメラを結ぶ横断歩道を中心にカメラがぐるりと回っている。あのいつも混んでいる横断歩道だ。因みに位置を変更するには、変更したい場所をGoogleマップで検索しストリートビューを表示させ、そのリンク内の位置情報(赤字で示す)をオリジナルのスクリプトの位置情報と置き換えればよい。 http://maps.google.com/maps?f=q&hl=ja&geocode=&q=%E6%97%A5%E6%9C%AC+%E7%A7%8B%E8%91%89%E5%8E%9F&ie=UTF8&ll=35.700549,139.774622&spn=0.003929,0.006866&z=17&layer=c&cbll= 35.698584,139.774216 &panoid=HNw-5xoiN5NJCVEWfeSdlA&cbp=1,65.31797388218855,,0,2.59767209...
コメントを投稿
続きを読む

Bloggerに「続きを読む」機能を導入

この Blogger 、なかなか使い勝手が良いのだけど、一つ大きな不満がある。「続きを読む」機能がないのだ。英語で言えば"Read more"だ。そこでネット上を検索したところ、 クリボウの Blogger Tips なるページを見つけた。ふむふむ、これならできそうかな…? しかし、すべての記事に「続きを読む」リンクが表示されてしまう。これをどうにかできないかと思ったら、同じサイトでそれを消すやり方が出ていた…が、今度は投稿記事中にその記事自体のURLを埋め込まないといけないらしい。これでは手軽に投稿できる機能に価値を見出していた自分としては意味がなくなってしまう。う～ん、自分でスクリプト書けば何とかなるかなぁ…とも思ったが、広い世の中、同じことを考えている人は絶対いるはずだともう少し探し回ってみたところ、 Blogger Beta Tips なるサイトを見つけた。どうやら、 Beautiful Beta というサイトでJavaScriptによって「続きを読む」機能を実装したらしい。早速、使わせてもらったが、素晴らしい! Blogger Beta Tips のページとかなり被ってしまうが、 Beautiful Beta の日本語訳と日本語化した導入方法を以下に書いておく。 1. まずは「テンプレート」タブから「HTMLの編集」タブを開き、「テンプレートをすべてダウンロード」で現在のテンプレートを保存する。そのテンプレートを編集するのだが、編集前にバックアップファイルは残しておいたほうが良い。 2. 以下のコードをメモ帳などのテキストエディタを使って、 </head> タグの直前に書き込む。 <script type='text/javascript' src='http://www.anniyalogam.com/widgets/hackosphere.js' /> 3. テンプレートコード中で下記の赤字の部分を書き加える。 <b:includable id='post' var='post'> <div class='post'> <a expr:name='data:post.i...
11 件のコメント
続きを読む

リンク先のウェブサイトをサムネイル表示 - Snap Shots

まずは下記のリンク上にマウスポインタを置いて欲しい。 Snap Shots リンク先のウェブサイトのサムネイルが表示されたと思う。この機能、適当なウェブを閲覧していたときに見つけたのだけど、一目で気に入ってしまった。しかも、自分のサイトに導入するのもとても簡単。<head>～</head>内の最後に指定されたHTMLテキストをカット&ペーストするだけ。 リリースとともにすぐに弄り回したJavaのときやまだほとんどの人に存在すら知られていなかったGoogleベータ版のサービスを見たときも絶対流行ると思ったけど(そしてどちらも爆発的に普及した)、これも流行る予感。すでに広まりつつあるしね。
コメントを投稿
続きを読む