IE環境でGoogle map API v3が表示されない

IE開発者はマンホールで足滑って骨折してください。

IE11では確認していませんが、IE10以下でこの問題が発生しました。
解決するのに酷く苦労しましたが、原因がわかれば「そんなことで!!」という内容だったので備忘録としてメモ。

<div id=”map”></div>

という基本的な要素に対して、display:table-cell;を指定していると、IE環境でGoogle mapが正常にレンダリングされません。
※正確にはレンダリングしようとしているのだけど地図が表示されない。

解決方法は
<div style=”display:table-cell; width:80%;”>
<div id=”map”></div>
</div>
といった感じに、外枠でtable-cellを指定すれば解決します。

オマケですが、iPhoneなどのモバイル端末用に
<script src=”http://maps.googleapis.com/maps/api/js?sensor=”true”>
とやっていると、何故かiPhoneでGoogle mapを描写しませんでした。

こちらはconsole.logを見るとエラーがでています。
なんでもsensorのパラメーターはそのうち削除します。という物でしたので、こちらは削除して良さそうです。
そして削除したところ、iPhoneでgoogle mapが表示されました。

もう何なんですか、これ…。

IE9でHTML5 videoが表示されない

Web制作者の仇敵IE様は今日も元気に制作者の首をしめてきます。
今回は制作したサイトでIE9でだけvideoが表示されないというもの。

前提条件として先に

  1. <!DOCTYPE html>されている? Y/N
  2. IE9が互換表示されている?(F12の開発ツールで IE9 standardを確認) Y/N
  3. consoleで [ document.getElementsByTagName(“video”)[0].error.code ] を実行させて、”Unable to get value of the property ‘code’: object is null or undefined”がでることを確認できる? Y/N
  4. Networkタブで動画のファイルを読み込んでいる? Y/N

3番目で違う物が出た場合はmp4のエンコードがオカシイ場合があるので再エンコードで治る可能性があります。

そして今回は上記は全て大丈夫だけど表示されなかったっていうお話。
(動画エリアで右クリックした場合、再生等のコンテキストメニューに変わるのだけど、コントローラーが表示されない)
具体的に言うと一度ブロックを非表示にしたものを表示した場合の不具合の気がする。

今回の使用していたソース。

<video id="player1" controls="controls" preload="none" width="640" height="360">
  <source src="./movie.webm" type='video/webm; codecs="vp8, vorbis"' />
  <source src="./movie.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"' />
  <source src="./movie.ogv" type='video/ogg; codecs="theora, vorbis"' />
  Video tag not supported. Download the video <a href="./movie.webm">here.
<video>

IE9でのvideo注意点

  • preload=”auto”では、posterで指定した画像が動画で上書きされて表示されない
  • codecsの記述次第ではie9は対応していないことがある。こちら参照

治したい現象

videoタグだけを記述したTESTページでは、マウスオーバーでコントローラーが表示される。
しかし一度display:hiddenした内容の再表示(タブみたいなの)を行うとマウスオーバでコントローラーが表示されなくなる。
(この状態では右クリックのコンテキストメニューで操作は可能)

というか真っ白フェードイン動画と真っ白背景とIE9が産んだ奇跡の不具合コラボ。
もうIE滅べ。

解決方法

videoタグにposterを設定すると解決する。

<video id="player1" controls="controls" preload="none" poster="poster.gif" width="640" height="360">

この際にはpreloadは必ずnoneにしないといけないのはIE9様の仕様。
何かの助けになれば幸いデース。

Google Map API V3のdisplay:hidden

もっと良いBlog記事はいっぱいありますが、アホな私にはさっぱりわからなかった。
そして、この記事はもしかしたらいるかもしれない同レベルな方向け。
※中央ズレについて追記しました。やっぱりIE9がだめだったので追記。

Google MAP API v3にて、

<div style="width:960px; height:300px">
<!-- google map が入るよ! -->
</div>

というのを設定して、アコーディオンやらで最初は非表示(display:hidden)にしたい場合に、
GoogleMapの描画が左上1/6みたいな微妙な描画をされてしまう。

これを解決するには色々種類があるらしいですが、もうまどろっこしいのは無しで結論から。
アコーディオンの場合、ボタンをクリックする際に表示させるScriptがあると思います。


<script>
$(function(){
  $('p.btn').on('click',function(){
  //アコーディオン展開script
  });
}
</script>

ここに1行を入れます。


google.maps.event.trigger(MAPを描画しているobject配列, 'resize');

これで解決です。
私は結構これではまりましたので、備忘録としてメモメモ。

なんでもこれバグ?らしくて、
Google Mapが描写を行う前に、それを包んでいるDIVが display:Hiddenしていると描写が指定のdivサイズにならないというモノのようです。

解決方法としては、display:hidden ではなく、position: absolute, left: -99999px みたいに表示はするけど画面外が定番のようです。

今回の案件ではそれが使えなかったのでハマりましたとさ。

これだと中央ズレが治らないよ

上の方法までだとreloadによる描画エラーはなおるけれど、マーカーが中央にいかなかった…。
治す方法はこちら


google.maps.event.trigger((MAPを描画しているobject配列, 'resize');
map.setCenter(座標が格納されているオブジェクトを指定);

例えば、

var lat01 = xx.xxxxx,
lng01 = xx.xxxxx;
googleMap.center = google.maps.LatLng(lat01, lng01);

を指定しているならば、

map.setCenter(googleMap.center);

それでもIE9だけ治らないよ

結局これでもIE9だけは動作が怪しかった状況が今回です。
結局stackoverflowにかかれていた1行で回避できました。


google.maps.event.trigger(mapObj, 'resize')
mapObj.setCenter(googleMap.center);
mapObj.setZoom(mapObj.getZoom()); // 追加したstackoverflowの1行

こんな感じにするとオッケーデス!

Sublime text3(Mac OSX)でdefault関連の設定を変更する

備忘録としてメモがてら。
環境はMac OS X 10.9.2で行っています。

Sublime textは便利なのですが、2から3にverupして変な要素が増えた気がします。
そのもっともたるのが、[Performances]から変更できるはずであろう各種パッケージのdefault設定。
実体ファイルがないせいで変更できません(・ε・)プップクプーとかでてきて、最高にイラ壁である。

初期のKeybind的な [Default (OS X).sublime-keymap]のやり方はでてくるのだけど、他のものが出てこない。
似たようなやり方をしても上手くイカなかったのだけど、解決方法は初歩的でした。
というか気づけ!ってレベルの低さかもしれませんが、そんな人が他にもいるかもしれないのでメモ書きがてら残しておきます。

方法自体は[Default (OS X).sublime-keymap]と同じです。
同じなのだけど、実態がないファイルがどこを参照しているのかが重要です。
それを判断するのがコンソール画面のエラー。

[VIEW]→[Show Console]を開いた状態で、変更したいdefaultの設定を呼び出すと

Unable to open /Users/user/Library/Application Support/Sublime Text 3/Packages/Emmet/Emmet.sublime-settings

という感じでエラーが出る。
Pakagesの下にEmmetのフォルダがないし、見たいファイルもないよ?
と言われているので、表示されている内容をコピーして適当に保存。

その後、[Perfmance]→[Browse Packeages…]で移動した後に、対象のフォルダ(この場合は Emmet)を作成する。
そして先ほど適当に保存したファイルを入れなおすと

reloading

と出るので、一度ファイルを閉じて再度[Perfmance]で選択しなおせば、編集が可能となる。
最初から編集できるようにしとけヴォケー!