昨日のエントリーで、
「埋め込みんでいるルートラボの地図。スクリプトで埋め込まれてるため解決策が見いだせない。」
と書きましたが、何とか対処できたので自分用の備忘録としてエントリーしておきます。

ルートラボの地図をブログなどに埋め込む場合、公式ではスクリプトのコードしか提供していません。そのコードをWordPressの投稿欄にコピペすると、サイトをレスポンシブ化していてもiPhoneで見ると横にはみ出してしまいます。

地図のタイトルをクリックすれば、画面が切り替わって全画面で地図を見ることはできるので致命傷ではないのですが、しかし見映えが悪い。

方策はないかと探っていたら、「tera-tory2・ルートラボの地図をwordpressの記事に表示させる方法」で、スクリプトのコードからiFrameのHTMLコードを生成する方法が紹介されていました。
iFrameのHTMLコードがわかれば、YouTubeムービーのようにレスポンシブ化ができます。

で、紹介された方法そのままに、ソースコードを貼り付けるのも芸がないので、function.phpに関数を設定し、ショートコードでHTMLコードを生成させることにしました。

fonction.php

//ルートラボiFrame生成
function latlonglabcode( $atts, $content = null ) {
	return '<div class="routelab"><iframe scrolling="no" frameborder="0" src="http://latlonglab.yahoo.co.jp/route/watch?id=' . $content . '&mode=paste&graph=false&mapstyle=map&maponly=false&url=\'+encodeURIComponent(location.href)+\'"></iframe></div>';
}
add_shortcode('rlab', 'latlonglabcode');

サンプルソースでは地図オプションに、標高グラフなし「graph=false」、地図の種類は通常地図「mapstyle=map」、タイトルなし「maponly=false」を設定しています。
別の設定をする場合は、falseはtrueに、地図の種類は、地形図：topographic、大きい文字：bold、モノトーン：monotone、水域図：waters、鉄道路線図：railwayとします。

HTML

[rlab]〜ここにルートラボ・マップIDを記述〜[/rlab]

ルートラボ・マップのアドレスの後半、「id=」以降のマップIDのみ記述します。

CSS

.routelab {
 	position: relative;
 	width: 100%;
	padding-top: 75%; /*表示高さ指定*/
	overflow: hidden;
	border: solid 1px #aaa;
}
.routelab iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}

「overflow: hidden」を入れないとiPhoneで「padding-top」が効かず、表示がおかしくなります。
また、「border」の指定も「iframe」の方に設定すると左辺、下辺が表示されません。

iPhoneでの表示例。

ただし、問題もあります。iPhoneを縦から横に持ち替えたり、PCブラウザの横幅を変えた場合、iFrameの枠サイズは追従して可変しますが、中身の地図は最初に読み込んだ大きさのまま。
リロードしないと枠にフィットしてくれません。もう一工夫必要ですが。現在のスキルではここまで。

「へろへろ・のぉと」をリニューアルしました。

Gogle Analyticsでチェックすると、我がサイト訪問者の38％弱がモバイル環境のようです。それで、ずっと懸案事項でしたが、この度やっとレスポンシブWebデザイン化を果たしました。

レスポンシブ化にあたって解決できていないこともあります。
その1つは、埋め込みんでいるルートラボの地図。スクリプトで埋め込まれてるため解決策が見いだせていません。

YouTubeの埋め込み動画は何とかなりましたが、記事の修正が必要なため、1個ずつ直していかなければなりません。

あともう1個はLightBoxで表示する拡大画像。モバイル環境でクリックすると拡大でなくて縮小表示になってしまいます。なのであまり意味がない。
ピンチするとウィンドウ内で拡大できる、とかだったりすると良いのだけれど。

掛川城の近くを流れる逆川の土手の百合が咲き誇っています。6月14日(日)には周辺で「掛川ゆり祭り2015」が開催されました。

14日はあまり良い天候ではなく、僕も祭りの終了時刻前にちょっとブラブラしてきました。しかし、前日の13日は雲は多かったが晴れ間もあったから、FZ200を持って出掛けてきました。

仁藤町筋の逆川に架かる奥姫橋から臨みます。左岸はオレンジ色で統一されています。対岸も白でまとまっていますがまばら。

次の橋から商工会議所までの間の土手はカラフル。

商工会議所前では間近に見ることができます。

その対岸は黄色一色。

橋のたもとにはあじさいと百合のコラボレーション。

ステンドグラス美術館が6月6日に掛川城の近くでオープンしました。
入場料は一般500円。月曜日休館。

5日には市民向けの無料観覧会が開催されたので行ってきたのですが、その時は順番待ちで入場するほどの人手でした。さすがにこの日は人影もまばら。

ほとんどの展示は、渋い色合いの英国作品。ステンドグラスの制作法の展示もありました。

西側の通りから見たステンドグラス美術館。円い窓はフランスの極彩色なステンドグラスがはまっています。外からは何も分かりません。

浅草から「Zepp ブルーシアター六本木」の最寄り駅「麻布十番」へ行くには、都営地下鉄浅草線で「大門」へ行き、大江戸線に乗り換えます。

30分足らずで順調に移動。鳥居坂という急な坂を登っていきます。

入り口ではポスターを記念に撮る人も。

まだ12時前ですが、入場者の行列はすでに建物の角を曲がって駐車場直前まで伸びていました。
しばらく並んでいると、パンフレットの販売が始まりました。

演劇「幕が上がる」は、開演時刻の前から、開場直後から0場と称して芝居が始まっているのです。
入場してパンフを買ったりモタモタしていると0場を見逃してしまいます。開場前の並んでいる時間に購入できるのは助かります。

パンフレットはハードカバーで、結構豪華仕様だと思うのですが、ももクロ主演だから？たしかにモノノフの購買力は高そうです。
実際並んでいる人のほとんどが買っていたような気がします。

入場が始まり次々とホールに吸い込まれていきます。入り口脇には笑福亭鶴瓶さんや関わりのある番組などからのお花が並べられていました。
こういう花って1ヵ月近くも保つものか？最初の頃と入れ替わっているのだろうなぁ。

さて、お芝居はあっという間の1時間半。最後のスタンディングオーベーションは、すでに観客に情報が行き渡り、予定調和な感があってちょっと気恥ずかしかったです。

れにちゃんが突然、坂本冬美さんの「また君に恋してる」を歌い出したのでびっくり。そしたら場面転換してカラオケボックスで芝居の練習をするという設定のシーンでした。

ももクロちゃんのお芝居は全然不安に思っていなかったので、すんなり楽しめました。お芝居は休憩なしのぶっ通しなのですが、場面展開も芝居の一部になっていて新鮮でした。

余韻を噛みしめつつ、再び坂を下り都営地下鉄で新橋へ移動。ここでJRに乗り換えて帰路につきました。もちろん帰りも各駅停車。夜8時頃には掛川に着いていました。

翌日お土産に買ってきた舟和の「芋ようかん」を食べました。ホームページに書いてあったように焼いてみたら、焼き芋のようになっておいしさが増しました。
どっちかいうと自分的には焼いた方がうまい。

もうひとつのお土産、舟和の「栗入り二色きんつば」。お芋と栗とあんこのコラボレーション。仲見世3号店でしか入手できないのが残念かな。

2日間たっぷり楽しめた旅でした。今度はどこへ連れって行ってくれるのかなぁ？

カミさんに、東京土産に舟和の「芋ようかん」をリクエストされていました。調べると本店は浅草で、地図を確認するとすぐ近くのようです。
しかし行ってみると開店は9時半からで、まだ間があります。その近くに開いている喫茶店があったので、時間つぶしにしばらく休憩することにしました。

「芋ようかん」はデリケートで、日持ちが短い。店頭で明日に食べることになりそうだと相談すると、帰ってから冷蔵庫保管すれば問題ないとのこと。10本入りを求めました。

舟和の仲見世3号店だけで売っている「栗入り二色きんつば」もゲットしようと仲見世通りに移動。しかしこちらは10時開店で、まだシャッターが開いていません。

この頃になると雨も上がり、仲見世通りにも境内にも人があふれていました。しかし、聞こえてくるのは中国語？ばかり。とても日本国内だとは思えないほどです（たまに白人）。

たぶんこの7割くらいは異国の人です。

日本人も異国の人も線香の煙を浴びています。

自分も線香を買ってみました。奥がヒーターになっていて、先端を当てていると火が付きます。

いろんなことをお願いしながら頭やら腰やらに煙を浴びせてきました。ちなみに右手前の真新しい線香が自分が差したやつ。線香いっぱいで熱いので、奥の方にはなかなか差せません。

こちらは9時オープン。家と娘ん家用に2つ、家内安全護摩符を授かってきました。

護摩符をリュックに詰めていたら、アジア系の外国人に日本語で本堂内を撮影して構わないものかと尋ねられました。堂内がとても美しいからと言っていました。
日本人以上に気配りをする外国人だなと思いましたが、何も掲示がないからOKじゃないかと答えました。自分も撮っちゃたしね。

次にお隣の浅草神社に移動。三社祭の飾り付けがされていました。

式典が始まるため、参拝客以外の本殿への接近、立ち止まりを規制していました。

人の頭越しに式典の様子を撮影。
自分は背が低いですが、FZ200のバリアブル液晶モニタが威力を発揮します。

浅草神社の三之宮、一之宮、二之宮の神輿。

神楽殿。

被官稲荷神社の境内においてあった「東一番　浅草馬一」の町内神輿。

十二支がぐるりと囲む豪華な装飾。

浅草神社の右奥にある被官稲荷神社の本殿。

珍しい子持ちのお狐さん。お母さんと子供？対は1匹だったので、そっちはお父さんかな？

10時半を回る頃になると、仲見世通りを自分のペースで歩けないほど混雑してきました。浅草寺の南側はいくつかの道が縦横にあるので、空いている道へ避難します。

そんな道で出会った祭ばやしの屋台。

「南十四番　浅草東」の町内神輿。

店先の飾り提灯。

そろそろ旅の本来の目的の時間が迫ってきました。ちょっと早いが浅草で昼食を採ることにします。
入ったお店は「らーめん　与ろゐ屋」。飲食店も祭に参加するためか休業しているところも多い。

初めての浸けラーメン。さっぱりした和風醤油でとてもおいしかった。スープの中には細切りのチャーシューやシナチクが沈んでいます。

プレーンな浸けラーメンは750円。

都営地下鉄で麻布十番駅へ移動します。雷門の前も人でごった返していました。

雷門脇の路上に人力車の行列。お一人様おためしで3,000円。180分で32,500円。たぶん一生乗ることはないだろう。

さあ、「Zepp ブルーシアター六本木」へ行くぞ！