• あなたのサイトは何点？サイトの表示速度をスコア化するPageSpeed for Chrome
• Firefoxの開発者ツール、3D表示がムダにすごい
• CSSレンダリング高速化の5つのポイント
• ハイクオリティーなCSS3 メニューチュートリアル　32選
• DMMスクレイピング × WordPress
• jQuery版window.onload
• Googleに設置のjQueryが一瞬でコピーできる便利ツール
• jQueryでhoverとclickのfunctionを１つにまとめるには？
• Twitter風！スクロール終了判定でページ読み込み
• 超簡単にスクロール終了を判定してくれるjQueryプラグイン

あなたのサイトは何点？サイトの表示速度をスコア化するPageSpeed for Chrome

サイトの速度を計測！改善も提案。PageSpeed for Chrome アドオン

以下のページからダウンロードできます。

PageSpeed for Chrome インストール方法

PageSpeedはChrome版でさらに性能を上げたと言っています。ここはぜひChromeで利用することにしましょう

PageSpeed for Chromeをダウンロード手順

まだ試験段階ということで、ダウンロードして利用するにはちょっとして手順があるようです。

chromeブラウザで以下のURLに新しいタブを開いてアクセスします。

試験運用APIの利用を有効にします。

設定を変更したら、Chromeを再起動します。

追加ボタンを押します。

無事インストールできます。

ツールの拡張機能から無事入ったかを確認します。

次にデベロッパツールをクリックします。

するとPageSpeedのアイコンが現れます。

RunPageSpeedボタンを押して計測スタート

点数が表示されて、何を直したらいいのか改善案を提案してくれます。

さらに細かく何を直すべきかが表示されます。

Firefoxの開発者ツール、3D表示がムダにすごい

最新版Firefoxの開発者ツール、3D表示がムダにすごいと評判になっています。
まずは最新版のFirefoxのインストールをしてください。

またはショートカットキー

と、押してください。

Firefoxの開発者ツール、3D表示 キャプチャ動画

Firefox最新版じゃない人のために、すぐどんな風になるのか分かるよう、キャプチャ動画を作成しました！

CSSレンダリング高速化の5つのポイント

せっかくマークアップしたサイトが表示後に妙に動きが引っかかる、なんとなく重い気がする。
それはCSSのレンダリングの問題かもしれません。
CSSセレクタから今一度サイト高速化を見直してみることにしましょう。

CSSのレンダリングの問題はどのようなものか？

PCサイトを作る上ではこれまでさほど意識してこなかったCSSのレンダリング。
いざスマートフォンサイトを作ってみるとこのレンダリングは非常に重要で、
CSSのレンダリングが遅いと

という問題が起こります。そこでレンダリングについて今一度学んでみるべく、海外の有名サイトより、こんな記事を紹介します。

CSSセレクタは右から左へ

このようなセレクタがあったとします。CSSセレクタでは右から解釈していくので、この場合1番最初に読まれるパーツはa[title=”home”]です。
この部分は部分は、最終的に、それが選択されている要素であるという点で “キーセレクタ”と呼ばれています。

IDは最も普遍的で、最も効率的である

セレクタのIDは最も普遍的で最も効率がよい。
確かにIDはユニーク、他とかぶらないということですから最も効率がよいはずです。
以下は4種類のセレクター(ID、class、タグ、ユニバーサルセレクタ)を、効率のよい順に並べたものです。
下から4つ目まではよく見ますが、タグレベルだったり、『*』や、属性値にあてていくのはレンダリング的には効率が悪いそうです。

あまり意味のないセレクタ

これはそれほど効率的でないことは確認されています。
IDはブラウザから最初に検索されるので、その子供の要素を見つけることが容易なのでしょう。

タグにIDをあてるのは意味がない

IDはそもそもユニークなのでタグと組み合わせても意味がない。
(ごもっともです。でもITかあさんは癖でやってしまうことがあります。)

子孫セレクタは最悪

『これはもう公害です』とまでおっしゃっています。

セレクタを書く意味をもう一度考えてみる

こんなことをするなら

こうしたほうがいいに決まっていますね。

CSS3は効率的か

まことに悲しいお知らせです。

CSS3のセレクタ（例えば、は、：nth-​​child）、マークアップをきれいに、セマンティック維持しながら、私たちがしたい要素をターゲットにするうえで非常に素晴らしいです。
(センスのないClass名やID名で悩まなくていいですからね！)
しかし、このセレクタはブラウザのリソースが集中的であることから　高速化を意識するのであれば使うべきではないということです。

結論：とにかくIDを使いまくったほうがいい

記事は最後に以下のように締めくくられています。

なるほど、もっとも効率の悪い子孫セレクタは使わないようにし、CSS3はレンダリングを意識するなら極力使わないようにして、今より少しIDに対する意識を高めるのが良さそうです。

翻訳元：

Efficiently Rendering CSS | CSS-Tricks

ハイクオリティーなCSS3 メニューチュートリアル　32選

ハイクオリティーなCSS3 メニュー,ナビゲーション

ハイクオリティーなメニュー、ナビゲーションが32個もチュートリアル付で紹介されています。
アニメーションから、綺麗なグラデーションまで繊細なものばかり。nonJavascriptというところも個人的には嬉しいです。

CSS3 Minimalistic Navigation

特にお気に入りのものをITかあさんも一つこの場で実装してみました。

こんなカンジで32個のCSS3ナビゲーションのチュートリアルが確認出来ます。
CSS3 Menu and Navigation Tutorials

DMMスクレイピング × WordPress

ちょこちょこブログ中でも話題にさせて頂いております、『Linuxお勉強使用会』　お試しの第0回からカウントすると、かれこれ4回目を開催させていただきました。
場所は前回同様、埼玉県朝霞市の朝霞中央公民館で行いました。
ちなみに会議室がどこも埋まっていたので、おもむきのある和室で皆さん座布団に正座して行い、何とも不思議な勉強会でしたｗ

うっかり今回は写真を撮影するのを忘れてしまいまして、ま、だいたいこんな感じだったかな？(ダイブ嘘つきましたね。)

DMMスクレイピング × WordPress

ITかあさんのお題はDMMをスクレイピングして自分のWordpressに記事として登録してしまおうというものでした。実際にスクレイピングが実行できると『おお～！』という感嘆の声を頂き、かあさん、恐縮です。

資料

しょぼくて申し訳ないのですが、資料も作りました。実際に説明することがたくさんあって、肝心のスクレイピングのやり方までは書いていないのですが(ダメじゃん)、スクレイピングの事前準備と前段階の知識として必要なことをまとめてあります。

そもそもスクレイピングとは

スクレイピングとは、WEBページに表示されている情報を、『自分の欲しいところだけ』抜き出す技術のことで、抜き出した情報を利用して自分のデータベースに登録して、あたかも自分のサイトのオリジナルデータのようにする　他人のふんどし使うちょっとずるいけど、素敵な技術のことです。
なお、少し前にもスクレイピングの技術についてはざっくりここで触れていますのでよかったら確認して下さい。今回の勉強会の発表内容はその発展、応用版です。

なぜDMMをスクレイピングしたのか

DMMをスクレイピングする方はけっこういらっしゃいまして、理由はDMMがアフィリエイトを広く展開しているのに対してAPIを配布していないので、だったらDMMをスクレイピングしてしまおうというわけです。

それではさっそくスクレイピングのはじまりはじまり～～

jQuery版window.onload

jQueryの実行といえば、毎度お馴染み

ですね。docment.readyです。
この実行は、DOM要素の実行を待ってからという意味になるのですが、必ずしも全てのDOM要素を待たずに実行したいケースもあるかもしれません。たとえば、Javascriptで言う、『window.onload』みたいなあれ。

これだけ、簡単ですね。

jQuery版window.onloadの使用例

あまり出番が無いように思えるjQuery版window.onload。
しかし、Ajaxページ読み込みではかなり有効に使えます。

ページ読み込みの例

id　hogeのブロックに、あるURLを読み込む例です。
読み込み完了したら、pにhiddenクラスをあてて、かくしてあげたい、Ajaxページ読み込みの典型的な例です。

悪い例

これでも悪くはないのですが、load実行されて、表示が完了するより速くaddClassが実行されてしまうことがあります。
ちょっと重たいページの読み込みで使うには不十分なのです。

var url = "http://example.com/";
$('#hoge').load(url,function(){
$("p#loading").addClass("hidden");
});

よい例

こちらはjQuery.event.addの例。表示が完了されてから処理を実行してくれるので、重たいページの読み込みにはこちらが最適です。

var url = "http://example.com/";
$('#hoge').load(url,jQuery.event.add(window, "load", function(){$("p#loading").addClass("hidden");}));

Googleに設置のjQueryが一瞬でコピーできる便利ツール

ちょっとしたサンプル、ローカル環境でjQueryをGoogleホスティングのjQueryをコピーしてくることが多いと思います。

毎回毎回GoogleAPIから持ってくるのは面倒なので、便利に使えるのが

これらをクリックするだけで一発でコードを取得できます。

クリックするだけで簡単にコピー完了

今後対応のライブラリがもっと増えると嬉しいですね。

jQueryでhoverとclickのfunctionを１つにまとめるには？

hoverとclick それぞれ２つの同じ処理のfunctionがあったとします。
これをコンパクトに１つにまとめる方法を紹介します。

click

$('#target').click(function() {
alert('foo');
});

hover

$('#target').hover(function() {
alert('foo');
});

こんな風に、マウスイベントはそれぞれ違うんだけれど、実行する処理は同じ場合、よりコンパクトにさせたいですよね。
やり方やいたってシンプル。

var hoverOrClick = function () {
alert('test');
}
$('#target').click(hoverOrClick).hover(hoverOrClick);

または、bindを使って合体も可能です。

$('#target').bind('click hover', function () {
alert('test');
});

今回はhoverと、clickの場合のみでしたが、あらゆるイベントを合体してあげることも可能ですね。

Twitter風！スクロール終了判定でページ読み込み

Twitterでのようなスクロール終了判定でページ読み込み

Twitterのタイムラインをずっと下にスクロールし、スクロール終端まで達するとさらに読み込むのが新しいページ遷移が流行っているようなので実際にやってみました。

bottom_detection.js

スクロール終端判定はbottom_detection.jsを利用します。

利用例

プラグインを読み込んで、下記のように記述するだけでスクロール終端の判定をしてくれます。

function doInTheBottom()
  {
  alert('foo');
}

bottom_detection.jsを利用したTwitter風スクロールページローディング

基本的には長いコンテンツ作成時に有効なのですが、今回は意図的にスクロールさせるため、iframeにてサンプルを作りました。
iframeのスクロールが終端まで達すると、次のhtmlファイルが次々に(１０ページまで)呼び出されます。

超簡単にスクロール終了を判定してくれるjQueryプラグイン

これは便利！超簡単にスクロール終了を判定してくれるjQueryプラグイン

仕事でスクロール終了を判定してくれるプラグインを探していたところ、超シンプルで超簡単にスクロール終了を判定してくれるプラグインを発見しました！

Webページの最下部へのスクロールを判定するjQuery まつぼ x Web　より

bottom_detection.jsの使い方

使い方はとっても簡単！いつも通りjQuery読み込んで、スクロール終了後に発動させたいイベントを下記のように指定するだけ。
(例ではスクロール終了後にアラートを発動)

<script src="/js/jquery-1.7.js"></script>
<script src="/js/bottom_detection.js"></script>
<script> 
function doInTheBottom()
{
alert('test');
}
</script>

とっても簡単で使い易いのでみなさんもぜひ！！