少し前から気になっていたlessを本格的に導入しようと意気込み、調べた事メモを。

本当は案件の返事待ちで、寝ぼけ頭で書いていたり。

[LESSとは？]

LESS

CSS拡張メタ言語と呼ばれていて、「CSSの言語自体を拡張し、CSSには存在しない機能を追加するものです。CSS拡張メタ言語を利用することで、変数、ミックスイン、入れ子ルール、名前空間、四則演算、関数などの動的な処理をCSSに追加でき、CSSが苦手とする大規模サイトやWebアプリケーションの構築に欠かせない再利用性を高められます。」(引用 From ASCII)

らしいです。

なんすかね、まずはCSSをjavascript的に書ける、くらいの気持ちで進んで行きます。

こんな感じで書けたり

.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

#header {
  .rounded-corners;
}

「LESSには手軽なJavaScriptライブラリーが用意されているので、HTMLのソース内に、「less.js」ファイルと「.less」スタイルシートの呼び出しを追加するだけで使い始められます。
　ただ、本番サイト上でJavaScripに依存しすぎるのは、パフォーマンスとアクセシビリティの点で不安があります。そこで、 .lessファイルを.cssファイルに変換してくれるコンパイルツールを利用し、公開サイトではCSSだけを利用する方法があります。」
(引用 From ASCII)

確かにjavascriptが使えないと共倒れっていうのは微妙なので、ここはコンパイルツールを使おうかと思います。

じゃあ何を使えばいいの？っと。

ツール

LESS.app
Macのみらしいです。でも、Macだからこれでいいです。

SimpLESS
保存するとCSSにコンパイルしてくれるツール

この寝ぼけ頭で文章を書く気にならないので、引用しまくりでした。

XXXXXXXXXXX 2012.04.17追記 XXXXXXXXXXX

LESSのブラウザ上でコンパイルのテストができるものを発見したのでメモ

LESSTESTER

XXXXXXXXXXX 2012.04.19追記 XXXXXXXXXXX

一つ案件をLESSを使ってこなしてみた。使い心地的には文句なし。
style.lessに自分でライブラリファイルを作成して、@importして使用してみるとうまい具合に切り分けが出来てスッキリかも。

【新たに見つけた参考サイト】

下記サイトを参考にCODAでもLESSがちゃんと対応されるようになるpluginをいれてみた。(pluginというよりmode?)
CodaにLESSを入れてみた

CSS3　参考サイト
10 LESS CSS Examples You Should Steal for Your Projects

LESSとBootStrapの組み合わせ
Using LESS with Bootstrap

引き続き引用しまくり。

XXXXXXXXXXX 2012.04.20追記 XXXXXXXXXXX

またまた追記

【LESS.appのCSS出力をカスタマイズする】

LESS.appのCSS出力をカスタマイズする

みなさま明けましておめでとうございます。

マカオ行きの旅のおともに持って行ったハイパフォーマンスWebサイトの本のまとめをここに。(どこぞやのbugcloudに頼まれたので。)
この本、2010年頃の出版なので若干情報が古い。ただ、やる事に関しては特に変わりがないので特に問題なし。

ザクっと読んだ印象はHTML5やCSS3が、どうこうではなく、サイトを制作する上で基本的なところをちゃんと押さえる、という感じ。
なのでここには気になった部分だけ書いて行きます。
Javascriptまわりで勉強したい部分が多かった。
大きなまとめは
「フロントエンドを改善していった方が、改善の時間もサイトのレスポンスも早くなるよ」
とのこと。
で、読んだ感じ大きくまとめてザクっと4つ。

1.HTTPリクエストの話

2.Javascriptの話

-JavaScriptを分割して最初のロードを最小限にして、あとから残りのJavaScriptをロードする「遅延ロード」を推奨(これに関してはどのやり方が良い、というのはなく、場合によってやり方を変える、等で紹介されていました。)
その他紹介されていたテクニックもいくつか

-Javascriptはローカル変数の読み書きがもっとも高速

-for-inは遅いので使用しない方が良い

などなど、細かい部分や気になったところは後日載せます。

3.CSSの話

-セレクタはなるべく単純にする。これは個人的にスッキリしている方が好きだったのであまりズラっと書いていなかったけれど、確かに言われてみればセレクタを右から解析して左にいくわけだから、 ズラズラと書いていればいるほど、処理が多くなるな、と。

4.画像の話

1.CDNを使う → CloudFlareとかかな

2.gifはなるべく使わずpng(png8)を使用する。(この方が画像サイズが軽くなるらしい。 )

3.アイコン系やボタン系を一つの画像にまとめbackgroundで配置

4.ツールを使用し、jpgからMETAデータを削除する。
最適化ツール→PNGCRUSH
でもこれは正直web用に保存で十分なのでは？と思うけど違うのかな。

5.favicon(apple iconも)の読み込みは絶対発生するので必ず用意すること

[掲載してあった高速化をする14のルール]

ルール1 : HTTPリクエストを減らす

ルール2 : CDNを使う

ルール3 : Expiresヘッダを設定する

ルール4 : コンポーネントをgzipする

ルール5 : スタイルシートは先頭に置く

ルール6 : スクリプトは最後に置く

ルール7 : CSS expressionの使用を控える

ルール8 : JavaScriptとCSSは外部ファイル化する

ルール9 : DNSルックアップを減らす

ルール10 : JavaScriptを縮小化する

ルール11 : リダイレクトを避ける

ルール12 : スクリプトを重複させない

ルール13 : ETagの設定を変更する

ルール14 : Ajaxをキャッシュ可能にする

最後に関連サイト

グーグルがWebを高速化するために何をしているか

Javascriptが遅い原因

facebook APIを使う機会が出来たので情報まとめ

認証が必要なAPIをたたくとき

var appId = "appIDを入れる";
if(window.location.hash.length == 0){
	url = "https://www.facebook.com/dialog/oauth?client_id=" +
	appId  + "&redirect_uri=" + window.location +　"&response_type=token";
	window.location.href = url;
} else {
	accessToken = window.location.hash.substring(1);
	//Friendsを取得
	graphUrl = "https://graph.facebook.com/me/friends?" + accessToken +　"&callback=コールバック名"

	//use JSON-P to call the graph
	var script = document.createElement("script");
	script.src = graphUrl;
	document.body.appendChild(script);
}

※ connectionについて調べる

<p id="btn_link"><a href="javascript:void(0);">LINK</a></p>

こう書くと、処理がぶつかる可能性を回避できる。
名前の汚染を防ぐためにできるだけprototypeをうまく使う、と。

$("#myID").bind('change',checkval);

このコードでselect要素が変わった時に何かを実行する、としていたのだけど、これだとキーボードの上下で選択したときに効かない、という事を発見。

なので、下記のコードも加えておくと、両方いけるようになる。

$("#myID").keyup(function(e){
 console.log("changed");
});

どうやればいいのか探していたところ、下記のサイトを発見したのでこれも参考にしてみると良いかも。

参考サイト

jQueryのchangeイベントはjQueryのヴァージョンによって違う。

とりあえず、jQuery1.6でどうなったのかこれから調べるとする。。

旧デザイン

http://twitter.com/home?status=

新デザイン

http://twitter.com/?status=

例)http://twitter.com/?status=この文字列をつけて投稿

「home」をとればOK

■margin,paddingを含んだ高さを取得する方法
outerHeight、outerWidth（true）
jQueryだと.outerHeight({margin: true})でいける。

ここ2回くらい連続で案件でやったので、jQueryでfadeIn();がIE6で効かない時のバグの回避の仕方メモ

通常コレのところを

$("id名").fadeIn("slow");

下記のように書き換える

$("id名").css({filter:''});
$("id名").fadeIn("slow", function(){
	$(self.select_name).css('filter','');
});