2015年07月

マークアップエンジニアとかWEBディレクターとかをやってる僕が、自分が詰まって、解決したことをここに残しておきますよ。

chromeの要素を検証でスマホモード(device mode)を切り替えるショートカット

51

コーディングしてて、スマホで確認したいとき、まずはchromeのスマホモードで確認するよね?
そうだよね?

26
 
要素の検証をおして左上のスマホみたいなアイコンをクリックしてiphone5とかに切り替えて確認する。

要素の検証を立ち上げるショートカットはよく使うが、その後、スマホモードにするのにいちいちマウスをさわりにいかないといけないのも面倒だったのでショートカットあるのかなって調べたらあった

このデバイスモード(device mode)を切り替えるショートカットは

⌘+shift+M

だから、htmlをブラウザで開いてスマホモードで閲覧するためのショートカットキーの流れは以下のようになる。

①要素を検証をたちあげる
⌘+alt+I



②デバイスモードを切り替える
⌘+shift+M



③リロードする(リロードしないと正しく表示しないことが多いため)
⌘+R


これを素早くできるようになるには訓練が必要だけど、5分もやれば身につけられるだろう。

さぁさっそくyahooにいってこの流れを10回やろう!

もっと強い戦士になるために。


 

navigator.geolocation.getCurrentPositionがandroidでうまくいってないとき

はまったけど解決がどこにも載っていなかったので自己解決。

位置情報を取得してマップに載せるなどをしたいときに
geolocation APIを使うよね。

if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(
ほげほげ
);

ってやつ。 

これ、pcブラウザやiOS safariでは普通にうまくいってるのに、androidではうまくいかない現象がおきた。
どうやらnavigator.geolocation.getCurrentPositionの部分でエラーが起きているぽい。
geolocationは使えるのにnavigator.geolocation.getCurrentPositionでエラーがおきる。
謎だ・・。
迷宮だ。

いろいろ試行錯誤してみて、解決したのがこれ


enableHighAccuracyオプションをtrueで設定する 


書き方はこんな感じ

if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(
function (pos) {
var crd = pos.coords;
nowlat = crd.latitude;
nowlong = crd.longitude;
},
function (err) {
alert(err.message);
},{
enableHighAccuracy: true,
timeout : 5000
}
);
} else {

}

 navigator.geolocation.getCurrentPosition()

の3番目の引数にはオプションを設定できるんだけども、そこに何もいれていなかったらandroidでうごかなかったところ、上記のようにオプションを加えたらandroidでも表示された。


enableHighAccuracyってなに

enableHighAccuracyというのは、詳しくはしらないけど、GPSを使ってより詳細な位置情報を取得するというオプション設定だ。
その代償としてバッテリーの消耗が激しくなる。

これを使うとGPSを使うというのなら、これをfalseにするといったい何をつかって位置情報をしるの??という疑問は残るものの、 とりあえずこれでandroidも解決!
 
オプションについてやや詳しく書いてあるサイト
Geolocation API


ではお先に失礼します。

yahoo map(YOLP)でマップが描画されずにグレーになったときのCSS原因

yahoo map使う案件があった。
中国人向けのサイトで、でも中国ではgoogleが禁止されてるからgoogle mapも使えない。
それでyahoo mapというわけ。

んで、普通にチュートリアル などをみながら設置してみたのだけど、地図がでない。

チュートリアルのソースだけなら出るのに、サイトに組み込んでみると地図がでない。
なんぞ。

と思って1つ1つソースを消しながらどいつが原因なのか探っていったら見つけた。
なんとcssに原因がいた。

犯人はこいつ

img{
max-width:100%;

でかい画像が投稿されてもレイアウトをぶちぬかないように、imgにmax-width:100%をつけてたんだけどね、これがあるとyahoomapがダメみたい。

たぶんマップエリア内に巨大な画像をおいてそれを動かすことで地図を実現してうから、max-width:100%とかやっちゃうと機能しないんだろうなと推測。

解決方法は1行追加するだけ

#map img{max-width:none;}

<div id="map"></div>

の中でのimgのmax-widthを解除するだけ。


解決!

ホッ

 

ページ内リンク(アンカー)がついてるページの要素が上にずれる

index.html#box1

のようにページ内リンクつきのページを ひらいたら、なんかページ内の要素が上に20pxくらいズレるという不具合。

しらべてみたら、親要素にoverflow:hiddenが入ってる状態でその雇用そのアンカーにリンクされたurlをひらくと、上にズレるバグがあるんだってさ。

clearfixでズレるという記事もあるけど、問題なのはoverflow:hiddenなので、
clearfixではズレないと思う。

.clearfix:after{
content:".";
height:0;
clear:both;
display:block;
visibility:hidden;
}

↑overflow:hidden 使ってない。

とはいえ、overflow:hiddenのほうが手軽に使いやすいから、わざわざclearfixつけずにoverflow:hiddenで済ましちゃうことは多くて、今回の僕のバグもそれで起こった。

幸い親要素についてたoverflow:hiddenをとっても問題ない構造だったので、とるだけで解決ぅ 
記事検索

リモキュー

お仕事のご依頼・お問い合わせはこちら

コーディングのお仕事が得意です。

https://twitter.com/tacshock
タグクラウド
QRコード
QRコード
  • ライブドアブログ