第一回 プログラミング備忘録

① < Geolocationの罠 >

いきなり「ちょっとGPS情報取得しといてよ」といわれて、

「え？やったことないよー」

難しそうに思えますよねぇ。触ったことないので焦りました、、

でも最近のブラウザさんは素晴らしすぎで、

JavaScriptをちょちょいと動かしていけば簡単にできちゃいます！

詳しいコードは他サイトに任せて(後で載せるかも)、

一つ注意を。

ページ遷移してJS起動時にGeolocationを読み込む場合、どうにもGeolocationの読み込みは、

非同期通信

のようだとわかりました。衛星との通信が終わったタイミングで値が返るようです。

つまりAjaxの時と同じ注意が必要で、

Geolocationで読み込んだ

latitude	緯度	度
longitude(accuracy)	経度(の誤差)	度
altitude(altitudeAccuracy)	高度(の誤差)	m
heading, speed	方角, 速度	度, m/s(GPS取得できないとnull)

の値をJS内の他の関数やゲットパラメータとしてURLに持たせたい場合は、

successCallback関数内(またはerrorCallback関数内)に続けて処理を書かないと、

GPS待ってる間に値が返って(undefinedかdefault値)しまいます。

② < pureについて >

http://purecss.io/

pureはYahoo! Inc.の出してるYUI(=Yahoo User Interface)の拡張版(?)です。

軽くてデザインも流行りのフラット！

いいですよー

ただちょっとわかりにくい部分もあるので、何度か使った経験を生かして今後紹介していこうと思います。

OOCSS(=Object-Oriented CSS)を採用しておりますが、まぁオブジェクト指向と言ってもCSSの場合は継承やオーバーライドがあるくらいで、結構直感的にわかるはず。

例えば

<button type="submit" class="pure-button pure-button-primary"> Sign in </button>

とあれば、CSSのpure-buttonで定義されたプロパティと値を採用した後で、pure-button-primaryで定義されたプロパティと値も追加します。

この時、pure-buttonで定義されたプロパティが、pure-button-primaryでも定義されていた場合、後にあるpure-button-primaryのプロパティで指定した値が採用されます。

OOCSSとは、それだけのことです。

.syntaxhighlighter
{
  font-size: 16px;
  width: 99%;
}

実際、この辺はGoogleChromeさんのJavaScriptコンソールで確認していただければわかりやすいです。

矢印で画面の要素を指定してあげれば、その部分のCSSがコンソールの横欄に映ります。

そこで上書きされていれば、取消線でこういう風になっています。

JavaScriptコンソールのすごいところは、そこでCSSを外したり付け足したりできちゃうところ。

これを使って、CSS初心者の自分もサイトデザインを短時間でできるようになりました。

実際、CSSは理論だけでやろうとしていくと結構うまくいかなかったりして難しいです。

pureやJavaScriptコンソールの使い方については、今後更に、図付で説明していこうと思います！