バースデイ@サンシャインシティ

今日は僕の●●回目の誕生日！
っちゅうことで、みゃ～が僕の誕生日を祝ってくれることに！

行き先は池袋のサンシャインシティ！

普段はどこに行くんも車移動やけど、今日は駅に車を停めて電車でGO！
池袋は駐車場高いからね！

僕は普段はめったに電車に乗らへん生活をしとるから、電車に乗るだけでドキドキ♥
それだけで新鮮な気分やね！

サンシャインシティに到着し、屋上にあるプラネタリウム満天へ！

僕は今までプラネタリウムはたぶん小さい頃に1回行ったきり。
（田舎育ちやから毎夜プラネタリウム？）
上京してからというもの、キレイな夜空なんか旅行した時にぐらいしか見られへんから、ワクワクやね！

ここでアンドロメダストーリー　ギリシャ神話の星空っちゅうのを見たんやけど、星空がめっちゃキレイやわ、映像が飛び出してくるわで、そりゃもうびっくり！
みゃ～もうっとりで、気持ち良過ぎて寝てまいそうなご様子！

記憶の中のプラネタリウムのイメージは、ただ暗いドームに星が映し出されとるだけやったんやけど、こりゃとんだ思い過ごしっちゅうもんや！
星空のキレイなとこで生まれ育った田舎モンでも十分に楽しめる！

» コニカミノルタ プラネタリウム"満天"

星空を満喫した後は、エレベータを降りてナムコナンジャタウンへ！

池袋には何回も遊びに来とるのに、ナムコナンジャタウンに行くのは初めて！
風に聞くナムコナンジャタウンとは、いかなるものぞ！？
（みゃ～は何回か来たことあるらしい。）

入口でチケットを買うんやけど、とりあえず訳も分からんまま入場券だけ購入！
（入場券だけやとアトラクションは利用できへんらしい。）

ナムコナンジャタウン
  • みゃ～ときどきみゃん-ナムコナンジャタウン-01
    東京デザート共和国の人気No.1やというチョコモンブラン！
    めっちゃ濃厚な甘さで、甘党向け！（モンブランのくせに栗なし）
  • みゃ～ときどきみゃん-ナムコナンジャタウン-02
    誕生日ムードムンムンで見とるだけで楽しいショートケーキ！
    食いにくいけど雰囲気はバツグン！
  • みゃ～ときどきみゃん-ナムコナンジャタウン-03
    何やらレトロな場所に迷い込んだ！
  • みゃ～ときどきみゃん-ナムコナンジャタウン-04
    なんや、このネコ地蔵の群れは！？
    ナンジャタウンのシステムはイマイチよく分からん。
  • みゃ～ときどきみゃん-ナムコナンジャタウン-05
    餃子スタジアムで食うた味噌バター餃子！
    みゃ～お気に入り♥
  • みゃ～ときどきみゃん-ナムコナンジャタウン-06
    おおぉ！？
  • みゃ～ときどきみゃん-ナムコナンジャタウン-07
    にゃひひひひぃ…
  • みゃ～ときどきみゃん-ナムコナンジャタウン-08
    ぐげにゃ～！
  • みゃ～ときどきみゃん-ナムコナンジャタウン-09
    ぐがぉ～！！

↑ MOUSE ON ↑

折角来たんやから、ちょっとぐらいアトラクション楽しもう！っちゅうことで、入ったのが地獄便所。
ネーミングが実にハイセンスやね！

狭い便所にみゃ～と二人押し込まれて、ヘッドホンで怪談話を聞く、っちゅうなんとも単純明快なアトラクション。
気持ち悪いアナウンスとプシュ～プシュ～がおもろかった！

次に怨念旅館！
いわゆるお化け屋敷で、ナンジャタウン内で一番怖いアトラクションらしいけど、、、。

全然怖くなくて、僕がスタコラサッサと進んでまうから、怖がりのみゃ～も全然怖くなかったらしい。
どうやら僕はお化け屋敷に行ったらあかん人種みたいやね。

次に、UFOキャッチャ～でおもろいモン見付けた時はみゃ～大はしゃぎ！

オシャレなペットボトルキャップとか色々GETしたんやけど、一番みゃ～が喜んだのが、夏目友人帳っちゅうアニメのニャンコ先生っちゅうキャラの偽物の黒ニャンコのぬいぐるみ！
結構お金掛かってもたけど、みゃ～の欲しいモンが全部GETできて、めでたしめでたし！
（一応今日は僕の誕生日。）

» ナムコナンジャタウン

んで、家に帰ってきてみゃ～からの誕生日プレゼントGET！
オシャレな文房具とか服とかベルトとか色々もらったけど、一番でかいのが絵！

先日美術館に見に行って僕が気に入ったアンドリュー・ワイエスの窓から海が見える絵で、海好きな僕にぴったりでうれしかったなぁ！
海外から取り寄せてくれたらしい！
みゃ～、ありがとな！

こうして僕の●●回目の誕生日が幕を閉じるのであった！

ほなほな！

Google Maps API 3 でルート（道順）表示

注意！
この記事は、HTMLとJavascriptの知識がない人が読んだら、きっとチンプンカンプンです。

HPに地図。
僕はWebデザインの仕事でHP中に地図を張り付けることがようあるんやけど、どうせやったら地図をど～んと張り付けるだけやなくて、例えば最寄駅から目的地までの道順を表示させたりもしてみたいな～、って思う今日この頃。

もちろん、Illustrator等で自作した地図画像にやったらなんぼでも道順ぐらい表示できるけど、どうせやったら出発地点を最寄駅だけやなく、住所や施設名の自由入力で道順が表示されたらもっとえ～な～。

っちゅう時に非常に便利なツールがGoogle Maps API ver.3！
ver.3になって、より簡単により多くの機能を使えるようになったのだ！！

っちゅうことで、早速サンプルソースを。

っとその前に、ここではルート表示させるためのポイントを中心に説明していくから、より詳細に知りたい人はGoogle提供の解説ページへ！

>> Google Maps JavaScript API V3
>> Google Maps JavaScript API V3 リファレンス

1. さぁ、富士山へ行こう

ソースの前に、まずは結果から！
（画像を縮小しとるから、ちょい見にくいけど、、、）

みゃ～ときどきみゃん-Google Map API test01

うん、しっかりルート表示されとるね！
ほなソースをど～ぞ～。
（ソースはHTMLとCSS、Javascriptの3つ。）

HTML : index.html
01|
02|
03|
04|
05|
06|
07|
08|
09|
10|
11|
12|
13|
14|
15|
16|
17|
18|
19|
20|
21|
22|
23|
24|
25|
26|
27|		<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <script type="text/javascript" src="./google_map.js"></script>
  <link rel="stylesheet" href="./style.css" type="text/css" />
  <title>Google Maps API 3 TEST</title>
</head>

<body>
  <div class="controller">
    【出発地】 <input type="text" id="from" value="東京駅" />
    【目的地】 <input type="text" id="to" value="富士山" />
  </div>
  <div class="container">
    <div id="map"></div>
    <div id="panel"></div>
    <br class="clear" />
  </div>
</body>

</html>

HTMLのポイントは、まずは8行目～9行目の<script>タグ。
この記述でGoogle Maps APIを呼び出しとるんやね！

次に、17, 18, 21, 22行目で指定しとるidで、いずれもJavascriptから参照されとる。
fromとtoは出発地と目的地で、ここには住所や施設名、緯度・経度を入力する。
んで、mapは地図を表示する領域、panelはルートを表示する領域。
（もちろんid値は自由に設定できるけど、その場合は、当然Javascriptも修正する必要がある。）

他のポイントとしては、10行目かな？
もちろんJavascriptをHTML内に記述してもええんやけど、ぐっちゃぐちゃになるから、僕は外部参照の方が好き♥

CSS : style.css
01|
02|
03|
04|
05|
06|
07|
08|
09|
10|
11|
12|
13|
14|
15|
16|
17|
18|
19|
20|
21|
22|
23|
24|
25|
26|
27|
28|
29|
30|
31|
32|
33|
34|		@charset "utf-8";

body{
  width:800px;
  margin:50px auto;
  font:80% sans-serif;
}
.controller{
  margin-bottom:10px;
  padding:1em;
  background:#660000;
  color:#ffffff;
}
.controller input{
  width:20em;
  margin-right:1em;
}
.container{
  border:1px solid #cccccc;
}
#map{
  float:left;
  width:70%;
  height:400px;
}
#panel{
  margin-left:70%;
  padding:0 10px;
  height:400px;
}
br.clear{
  clear:left;
  font-size:0;
}

何の変哲もない、至ってフツ～のCSS。
強いて言うと、地図を表示させる領域（#map）は、widthとheightをちゃんと設定してね～、ってことぐらい。

Javascript : google_map.js
01|
02|
03|
04|
05|
06|
07|
08|
09|
10|
11|
12|
13|
14|
15|
16|
17|
18|
19|
20|
21|
22|
23|
24|
25|
26|
27|
28|
29|
30|
31|
32|
33|
34|
35|
36|
37|		var directionsDisplay = new google.maps.DirectionsRenderer();
var directionsService = new google.maps.DirectionsService();

window.onload = function(){

  var option = {
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    scaleControl: true,
    streetViewControl: true
  }

  var map = new google.maps.Map(document.getElementById('map'), option);
  directionsDisplay.setMap(map);
  directionsDisplay.setPanel(document.getElementById('panel'));

  getRoute();
  document.getElementById('from').onchange = getRoute;
  document.getElementById('to').onchange = getRoute;
}

function getRoute(){

  var from = document.getElementById('from').value;
  var to = document.getElementById('to').value;

  var request = {
    origin: from,
    destination: to,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
  };

  directionsService.route(request, function(response, status){
    if(status == google.maps.DirectionsStatus.OK){
      directionsDisplay.setDirections(response);
    }
  });
}

う～ん、ポイントが多すぎてどこから説明すりゃええんやろ、、、。
各オブジェクトとかプロパティ、クラス、メソッドのことまで細かく説明するんは面倒やから、それについてはGoogleさんのリファレンスページへ！

まずはHTMLで設定したid(map, panel, from, to)の参照箇所から。
mapは12行目、panelは14行目、fromは17, 23行目、toは18, 24行目でそれぞれ参照先を設定しとる。

んで、4～19行目のfunctionは地図を表示する関数で、21～37行目のgetRouteはルートを取得する関数。
<body onload="~">とか<input onchange="~">っちゅう風にしてHTML内からJavascriptを呼び出すんはなんとな～く汚らわしいから、Javascript内で完結させるための措置が4, 16, 17, 18行目。

次に6～10行目の地図のオプション。
フツ～に地図を表示させるだけやったら、地図の表示範囲を設定するzoomとか、地図の中心となる緯度と経度を設定するcenterとかっちゅうパラメータが必要なんやけど、ルートを表示させる場合は、ルート全体が表示されるようにzoomとcenterが自動的に調整されるみたいで、設定する必要なし！

地図のオプションと来たら、ついでにルート表示のオプションも（26～30行目）。
その名の通り、originで出発地を、distinationで目的地を設定する。
travelModeで交通手段を設定できるんやけど、DRIVINGは車の運転モード。
他にも徒歩モードのWALKING、チャリモードのBICYCLINGがあるけど、今んとこBICYCLINGはアメリカのみの実装らしい。
その内電車モードとか飛行機モードとかバスモードとかができたらえ～なぁ。

これでソースの解説はとりあえず一段落！
このソースをそのまんまコピペすれば、冒頭の画像通りになるはず！

ただ、ここで重大な問題が一つ！
上記画像の右下辺りをよ～く見てみると、、、。

ルートが枠からはみ出しとるがな！
っちゅうことで、お次は、、、。

2. ルートはみ出ちゃダ～メ♥

これはとっても簡単。
CSSの#panelにoverflowの設定を追加するだけ！

CSS : style.css
26|
27|
28|
29|
30|
31|		#panel{
  margin-left:70%;
  padding:0 10px;
  height:400px;
  overflow:auto;
}
みゃ～ときどきみゃん-Google Map API test02

どうせここまでやったんやったら、ルートを表示させとるとこにガンガンおしゃれさせたい！
って思わへん？

3. おしゃれ街道を歩みましょう

これも大したことはない。
CSSの#panelにガンガン設定を追加しまくるだけ！
（31～33行を追加）

CSS : style.css
26|
27|
28|
29|
30|
31|
32|
33|
34|		#panel{
  margin-left:70%;
  padding:0 10px;
  height:400px;
  overflow:auto;
  background:#660000;
  color:#ffffff;
  font:80% /1.5 sans-serif;
}
みゃ～ときどきみゃん-Google Map API test03

うん、ま～ま～おしゃれになったね！

けど、#panelのCSSをいじくっただけやったら、例えば#panelのヘッダ部分の背景色とかルートを区切っとるボーダーとかのスタイルとかを変更できへん！
（その辺のスタイルは自分で設定しとるわけやなく、Googleさんから与えられたものをただ粛々と受け止めとるだけ。）

地図のスタイルを細かく設定するクラス（例えば道の色を変えるとか）は用意されとるのに、ルートの部分のスタイルを変えるクラスは用意されてないみたいやし、、、。
（ひょっとしたら、見落としとるだけでよう探したらあるかもしれん。）

このままやったら如何にも中途半端！
さぁ、ど～したもんか、、、。

4. 敵を知り己を知らば百戦危うからず

さぁ、敵を知ろう！

あんまりにもルートが長々と表示されても見にくいだけやから、目的地を急遽富士山から東京国際フォーラムに変更。

んで、Googleさんから返されたルートの部分のソースを覗き見て解析してみると、大雑把に以下のようなパーツに分解できることがわかった。
（ホンマはもっと色々パーツがあったけど、あんまり重要やなさそうやったから割愛。）

みゃ～ときどきみゃん-Google Map API test04

んで、それぞれのパーツのHTMLはこんな感じ。
（なるべくシンプルになるように、HTMLタグとclass属性以外の余計なモンはぜ～んぶ削除し、タグ内の文字列は内容が分かる言葉に置き換えた。）

HTML : HEADER & FOOTER
01|
02|
03|
04|
05|
06|
07|
08|		<table class="adp-placemark">
  <tbody>
    <tr>
      <td>MARKER IMAGE</td>
      <td class="adp-text">TEXT</td>
    </tr>
  </tbody>
</table>
HTML : SUMMARY
01|<div class="adp-summary">DISTANCE - TIME</div>
HTML : DIRECTIONS
01|
02|
03|
04|
05|
06|
07|
08|
09|		<table class="adp-directions">
  <tbody>
    <tr>
      <td class="adp-substep">NO.</td>
      <td class="adp-substep"><b>BOLD TEXT</b> NORMAL TEXT</td>
      <td class="adp-substep"><div class="adp-distance">DISTANCE</div></td>
    </tr>
  </tbody>
</table>
HTML : COPYRIGHTS
01|<div class="adp-legal">COPYRIGHTS</div>

お～！
しっかりclass付けされとるね！

ここまで敵を丸裸にしたら、後は本丸に攻め入るだけ！

5. いざ本丸へ！

目指すは大将首！

っちゅうことで、最終的なCSSはこんな感じ。
（色付きの部分が追加したとこ。）
（HTMLとJavascriptははじめと一緒。）

CSS : style.css
01|
02|
03|
04|
05|
06|
07|
08|
09|
10|
11|
12|
13|
14|
15|
16|
17|
18|
19|
20|
21|
22|
23|
24|
25|
26|
27|
28|
29|
30|
31|
32|
33|
34|
35|
36|
37|
38|
39|
40|
41|
42|
43|
44|
45|
46|
47|
48|
49|
50|
51|
52|
53|
54|
55|
56|
57|
58|
59|
60|
61|
62|
63|
64|
65|
66|		@charset "utf-8";

body{
  width:800px;
  margin:50px auto;
  font:80% sans-serif;
}
.controller{
  margin-bottom:10px;
  padding:1em;
  background:#660000;
  color:#ffffff;
}
.controller input{
  width:20em;
  margin-right:1em;
}
.container{
  border:1px solid #cccccc;
}
#map{
  float:left;
  width:70%;
  height:400px;
}
#panel{
  margin-left:70%;
  padding:0 10px;
  height:400px;
  overflow:auto;
  background:#660000;
  color:#ffffff;
  font:80% /1.5 sans-serif;
}
#panel .adp-placemark{
  background:#cc3333;
  border:none;
  color:#ffffff;
  font:bold 120% sans-serif;
}
#panel .adp-summary{
  text-align:right;
}
#panel .adp-directions tr:hover{
  background:#990000;
}
#panel .adp-directions td{
  padding:0.5em 0.2em;
  border:dotted #cc3333;
  border-width:1px 0;
}
#panel .adp-directions b{
  font-weight:normal;
  color:#ffcc33;
}
#panel .adp-directions .adp-distance{
  font-weight:bold;
}
#panel .adp-legal{
  text-align:right;
  color:#ff6666;
}
br.clear{
  clear:left;
  font-size:0;
}
みゃ～ときどきみゃん-Google Map API test05

まぁ見ての通りやけど、上記画像の通り、ルートにオンマウスした時に背景色が変わってくれると、「あ、クリックできるんや～。」って分かりやすいね！
（クリックすると、地図上の該当する地点に吹き出しが出る。）

今回は画像を使わずにデザインしたけど、色んな画像を使ったらもっとかっちょ良くて使いやすい地図が作れそうやね！

このルート表示以外にも、Google Maps API 3にはもっともっと面白そうな機能が満載！
もっと色々試してみたいけど、あんまり遊んどったら仕事する時間が、、、。

ほなほな！

アンドリュー・ワイエス展

今日は埼玉県立近代美術館でやっとる企画展、アンドリュー・ワイエス展 －オルソン・ハウスの物語－へ！

昔別のとこでやっとったアンドリュー・ワイエス展をみゃ～が見たことあって、そん時にめっちゃよかった、っちゅうことで一緒に行くことに！

アンドリュー・ワイエスは病弱やったアメリカ人画家で、オルソン家の足の不自由な女性クリスティーナを描いた代表作『クリスティーナの世界』で有名（らしい）。
この企画展では、オルソン・ハウスの物語っちゅうサブタイトル通り、アンドリュー・ワイエスの別荘の近くにあるオルソン家に関係する作品ばっかり！
水彩画と素描が中心。

僕は初めてアンドリュー・ワイエスの作品を見たんやけど、その繊細なタッチに感動！
近くで見たら単なる落書きのようにも見えるごく繊細な線が、離れて見ると実に見事に絵になっとる！
絵って不思議やなぁ！

習作もいっぱいあって、その作品がどういう考えで作られていったか、っちゅう過程が見れて、アンドリュー・ワイエスっちゅう人間がどういう人やったか、っちゅうのが作品を通して分かった！（気がした。）

さらに、「なんでこんなもんにこだわっとるんやろ？」っちゅうモチーフが多く、例えばブルーベリーを入れておく木桶を描いた作品がいっぱいあったりする。
そこからも、アンドリュー・ワイエスが何気ない日常生活の中に独特の美を見出す天才やったことが伺える。

僕もアンドリュー・ワイエスみたいに、ありふれたものの中に美を見出せるニンゲンでありたいね！

>>埼玉県立近代美術館 『アンドリュー・ワイエス展 －オルソン・ハウスの物語－』

ほなほな！