観光ガイドみるの？グーグルマップあるのに？その8
酒場でひとりホッピーと肴を楽しんでいた。隣にフランス人夫妻が座った。気が付いたらワイワイ話しをして、その後近くの博物館まで案内して帰ってきた。たまにはそんな出会いも悪くない。メアド交換なんて何年ぶりだ！博物館に近寄ったの何年ぶりだ！さてっ
昨日InfoWindowではできなさそう、というところまできたが、StackOverflowで似たような問い合わせを発見した。
http://stackoverflow.com/questions/23662283/google-maps-v3-placing-infowindow-box-in-fixed-position
カスタムコントロールを使うのが正攻法とのこと、他にも類似の問い合わせを発見。
Google Infowindow Position - Geographic Information Systems Stack Exchange
やはりライブラリのようなものを使ってカスタム部品を実装せよとのこと。
グーグルフォーラムの回答も似たようなものが寄せられると推測している今日このごろ。。
カスタム部品の実装が必要になる、ということが分かっただけでとめておく。
明日は、目標画面と標準サービスAPIだけでは実装できないところをまとめてしめる予定。
観光ガイドみるの？グーグルマップあるのに？その7
暑い。エアコン弱めに設定してたら熱中症になりそうなくらい暑い、部屋の中でぐったりだ。昼過ぎたぐらいの時間帯がとくに暑い。その後アキバ→上野コースで、いつもの鮮魚酒場へ。こんな日のホッピーは最高にうまい。暑ければ暑いほどうまくなるからアルコール飲料は不思議だ。その仕組みどこかの大学教授が調べて発表したら、そのページの飲料広告が儲かるんじゃないか。。さて、
昨日出てきた下記のギャップについてGoogle Map APIリファレンスを見てみたが、どうもInfoWindowではできなさそう。
・吹き出しを画面の左右端に置きたい
・吹き出しをフラットな引き出し線にしたい等
できなさそう、ではどうも不安なので、グーグルのフォーラムに質問して確認することにした。さっき質問登録したから明後日ぐらいには回答がつくだろうか。回答あるまで、広大なインターネットでも調べる。
明日は回答結果またはインターネットでの調査結果または目標とする表示例を手書きで作ってアップする予定。
追伸 グーグルのマップAPIフォーラムを見ていて気になったが、意外と質問数が多くない、また質問スレッド間の日にちが空いている。いまいち盛り上がっていないということだろうか。量販店の街頭でワークショップでもやればいいのにと思ってしまうのだが、個人向けじゃないからか。
観光ガイドみるの？グーグルマップあるのに？その６
なんとな～くお盆休みに入ってしまった俺。そして、急に乗りたくなったサンダードルフィンに2回連続で乗って、それだけで満足して帰ってきた。サンダードルフィンはいい、出発後急降下するまでの時間が短くて心の準備ができない、そこが良い。世間は夏休み、天気いい、外は楽しそうな人でいっぱい。あぁ。。楽しい1週間だった。さて、
前回までで、お買い物マップの基本的な表示機能と経路を示した。しかしながら、
・店舗数を絞っても、表示した吹き出しが重なってみにくい
・マップを掲載するサイトの雰囲気にあった色合いに変えたい等
という点がみえてきた。モヤモヤしてきたので、自分だったらどんな見た目に仕上げたいか、それを図で書き出してみる。
(時間がかかりそうなのでそのうちアップ)
図で書き出すと、より多くの点が出てくるから不思議だ。文章に書き出すのが途中で面倒になっているだけか？
・吹き出しを画面の左右端に置きたい
・吹き出しをフラットな引き出し線にしたい
・吹き出しをパステル調で色分けしたい。
つまりこれらが前回までの現状と理想的な仕上がりとのギャップだ。
明日はこれらについてGoogle Map APIの技術的な可否を調べてみる。
補足 これまではまとまったら出す形式で書いてきたが、どうもさぼり癖がつきそうなので、記事の出し方を変えてみる。
Surface 2もちろんカバー付き
今更だけど、Surface 2+Touch Coverを手に入れた。うおー、他のタブレット買った時とワクテカ感が違いすぎる。タブレットだけど、ノートパソコンとしても使える。レビューで評価がよくないと言われていたタッチカバーキーボードだが、全然問題ない、いやむしろ超使えてる自分にビックリする。タイプカバー要らないと思うくらい。そして、本体背面の銀板デザインがいい、あと選べるカバーの強調する色使いも良い。あれ？マイクロソフトってこんなデザインできるメーカーだったの？これからはマイクロソフトでそろえよう、ってなるぐらい衝撃。
あれぇ？なところもあった。カバーキーボードで2回も不良品に当たり交換した。違う種類のキーボードで連続して遭遇したのはこれがはじめて。自分がツイているだけかもしれないが。。
単にタブレットがほしい人にはお勧めできない、特にカバーキーボードを買わない人、あとアプリの数にこだわる(具体的にどんなアプリがなくて困るのかわからない)なら、裏切られたーってなる。自分もはじめ1時間ぐらい、これは失敗かもしれん、どうしようと思ったよ。でもカバーつなげたら世界が変わった。久しぶりにエアコンの効いた部屋で一人で唸った。こういうブログってタブレットで記事を書こうとすると、操作が期待したようにできなかったり、ソフトキーボードで文章が面倒とか、その他色々あるけど、そういうところを解決してくれる。コイツだけで、ウェブプログラミング、ブログ管理、そしてタブレットでの気軽なネットサーフが完結したから。
スマホとは違うフル表示のブラウザ、革新的なカバーキーボードによる日本語IME入力、強力なステレオスピーカー、本体備え付けの2段階キックスタンド、HDMI出力でデュアルディスプレイ、そして普通サイズのUSBポート、強調色の選べるアクセサリ、それらがまとまっててイイ。コレ装備した自分を想像するだけで、明日からブログが捗りそうだ。たぶん気のせいだけど。
小話 グーグルマップAPI？？なにそれ美味しいの？
初めてその存在を知ったとき、自分の心の中でつぶやいた。いや、それって食べられるの？食べたら美味しいの？という意味ではなく。
ホームページでグーグルマップ表示して、結果的に誰がどう収入を得て、オイシイ収益化になるのか、あんまり想像できなかった。まさかマップ表示自体が無料で、マップ上の、例えば、お店情報そのものが広告だと知ったときには、♪いーないーな、人間っていーいーなー♪、オイシイなーと思った。
みんなが使うモノを極限まで身近にして、みんなで収益に貢献できるようにしてる。これってビックウェーブじゃん、俺も乗らなきゃっ。
そう思ったのが、このブログを開始する半年ぐらい前でした。遅い、遅すぎるぞ俺。。ビックウェーブはもう去った？でも、マップAPIを説明するページは山のようにあるのに、マップAPIを使ったらどんな面白いことができるのか、そしてそれが、世の中のどんな要求を解決できる可能性があるのか、その点に重点を置いているページがあまりなさそうだから、それ俺やればいいじゃん、と思ってちょいちょい書いてる。。
観光ガイド見るの？グーグルマップあるのに？その５
前回買い物マップ編最終回を目指しておきながら、途中でお腹が空いて投げ出した。今回こそしめたい。
前回記事を書いていて出てきた、秋葉原駅から出発して、端の方のパーツ街で売っている特価品を買いに行く、と言う良い例を取り上げてみる。えっ？なに？パーツ街なんて知ってるし、お店の場所もだいたい分かるって？はいはいよく聞こえません。じゃあそれ駅で溢れてる人達に説明してみてよ。想像しただけで面倒でしょ？それに、駅の周りで今日どこいこっかーてへぺろ的雰囲気だしてる人たくさんいるけど、その人たちパーツ街みたいな小売店でほとんど見ないじゃん。アキバで買い物するのに一番大事な部分を見ないまま帰ってるよきっと。お店にとってもお客さんにとっても損じゃない？これ口頭説明したら多分嫌な顔されるけど、グーグルマップで表示したらふーんで済むと思う。そうグーグルならね。
実装結果を下に示す。
簡単に実装できた。前回のコードでJavascriptコード部に10行程度追加しただけ。簡単でイイじゃないか。コードは終わりに示す。
これで、観光ガイド風お買い物マップ向け最小機能が実現できた。うーんまだやる事あるから、しめられませんでしたっ。次回は、表示画面の最終デザインと、未実装の機能用件を振り返り、お買い物マップ編をしめくくる予定。
<!DOCTYPE html> <html> <head> <title>買い物スポット</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <style> html, body, #map-canvas { margin: 0; padding: 0; height: 95%; width: 90%; } </style> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> <script> var directionsDisplay = new google.maps.DirectionsRenderer(); var directionsService = new google.maps.DirectionsService(); var map; function initialize() { directionsDisplay = new google.maps.DirectionsRenderer(); var mapOptions = { zoom: 16, center: new google.maps.LatLng(35.699712, 139.771353), mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); directionsDisplay.setMap(map); /* Point1 あき◯お〜店 */ var myPoint1=new google.maps.LatLng(35.700200, 139.770300); var contentString1="<dl id='infowin1'><dt><b>あき◯お〜◯店</b></dt><dd><img src='animal_kowai_kuma.png' align='left' />◯月×日 商品A 価格△△円 </dd><dd>記事へのリンク</dd></dl>"; var infowindow1=new google.maps.InfoWindow({ content: contentString1 }); var marker1=new google.maps.Marker({ position: myPoint1, map: map, title:"あき◯お〜店" }); infowindow1.open(map,marker1); /* Point2... */ var myPoint2=new google.maps.LatLng(35.702590, 139.770501); var contentString2="<dl id='infowin1'><dt><b>Q◯P◯SS店</b></dt><dd><img src='ryouri_kuma.png' align='left' />◯月×日 商品B 価格××円 </dd><dd>記事へのリンク</dd></dl>"; var infowindow2=new google.maps.InfoWindow({ content: contentString2 }); var marker2=new google.maps.Marker({ position: myPoint2, map: map, title:"Q◯P◯SS店" }); infowindow2.open(map,marker2); calcRoute(); } function calcRoute() { var start = new google.maps.LatLng(35.698343, 139.773033); var end = new google.maps.LatLng(35.702590, 139.770501); var request = { origin: start, destination:end, travelMode: google.maps.TravelMode.WALKING }; directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); }else{ alert("ルート検索に失敗しました"); } }); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="map-canvas"></div> </body> </html>
観光ガイド見るの？グーグルマップあるのに？その４
経路情報追加しようかなぁ。やっぱりやめようかなぁ。。
だってぇ、経路情報が必要なのは、お店が集中していて、商店街端から端まで歩くのが嫌になるぐらいでないと意味なさそうだかもん。なんとなーくそう感じられる実体験をあげてみる。
まず、米シカゴで買い物をするとする。ダウンタウンに限ると、だいたい栄えてる所なんて数ブロックの中で、そんなに離れてない、だからわざわざ経路をマップで見るよりも、景観を眺めながら歩いた方が早いし楽しい。でも、郊外の複合ショッピングセンターだとかなり違う、だって、どこに何屋さんがあるのかなかなか覚えられないぐらいでかくて、歩くだけで疲れてしまう。郊外の小売店とかだと、すごく離れて点在してて、マップでわざわざ経路なんて確認しないでテキトーにただっ広い道をすすんで行けば目に入ってくる。
次に、仏パリ市内で買い物をするとする。お店は広く点在していて、とにかく案内あった方がいい。でないと、ちょっと入った所にある、美味しいパン屋さんとか、奇麗な花屋さんとか、良い感じの小物のお店など、気づかず見過ごす、そして旅行者向けのお土産屋さんばかりが記憶に残ってしまう。
次はインドで買い物に行くとする。理想的にはまず現地の友人、次にホテルの人、それでも駄目ならリキシャーのおじさんに、買いたい物を伝え、それが買えそうなお店(ショッピングモール)の存在を確認するところから始まる。そして着いたら、乗り物から降りる前に、本当におすすめと考えられる店舗を聞き出す。ストリートファイト系の路上小売店が並ぶ場合は、”興味ないんだけど”という冷たい表情であしらいながら、先ほど聞いた店舗を目指し、着いたら楽しげに交渉し、それでも高いと感じた場合は、近くの同じ物を売ってそうな別の店に行ってみる。だいたい別の店の人もやり取りを遠目で見ていて、”はいはい、その値段だったら、こっちで売ってあげるよ、さっさと来なよ”という雰囲気でこっちをガン見してる、そんな店主のところへ行く。それだけだ、悔いはない。買い物は時に心と体を鍛える陸上競技となる事を忘れては行けない。。慣れれば暑さぐらいしか気にならなくなる。ゆっくりした時間が流れることもある、悪くない。。いやそれが良い。
最後に、ご存知アキバで買い物をする。お店は密集していて、端から端までそこそこ距離があり、オタク友達の案内があると超捗る。その日オススメのショップを教えてれて最高だ。最近は、そんなオタクさん達エキスパートを有料で時間貸ししてくれて、アキバを案内してくれる、そんなニッチなサービスがあるらしい。。おや、このマップ要らんかもしれん。ブヒっ
上記で示唆した通り、その商店街地区を知っている知っていないに関わらず、小売店の密集度と市場の成熟度によって、経路情報が必要な場合とそうでない場合がある。。。うーん、やっぱり経路情報付けよう。アキバで駅から遠いパーツ街の道のりなんて、口で説明してもたどり着けない人いるだろうし。。
（おなかが空いたので、この記事はここで１日程度投げ出しました）
