github trending 2014/06/17

boba.js


analytics.jsのイベントトラッキングを簡単に扱うライブラリ


card


クレジットカード入力フォーム: Demo


Gitbook


markdownで本を書けるツール
GitBookで販売できるようにもできる?


octotree


githubのディレクトリ構造をtree表示できるchromeのextension


seed_migration


Railsのseedをmigrationできるようにするツール

スポンサーサイト

[PhantomJS]loadreportを使ったheadlessのページ分析

皆さんは、Webページの表示速度を分析する際に、どうやっていますか?
ChromeやFirebug等に付属しているツールで調べている?
loadreport.jsというツールを使ってみるのも良いかもしれません。


インストール


PhantomJSが必要ですので、インストールしてください。
MacOSでbrewを利用されているならば以下のコマンドで一発です。


brew install phantomjs

githubのリポジトリからソースコードをコピーしてきます。
これで利用の準備は整います。


git clone https://github.com/wesleyhales/loadreport.git

filmstripを使ってページがどのように表示されるかをみてみよう


loadreportをインストールしたディレクトリへ移動し、以下のコマンドを実行します。


phantomjs loadreport.js "調査対象のURL" filmstrip

実行すると、実行したディレクトリ以下にfilmstripというディレクトリが作られ、
中に経過時間[ms]ごとのキャプチャが保存されています。
161_01.png


CSS, JS等の解釈の結果を ms単位でキャプチャしたものになります。
このブログだと画像を含めた最終的なレンダリング完了には 10sかかっていることがわかります。


画像をみてみると、少しずつ変化していることがわかります。
なお、Googleに対して実行してみたところ、300msでした。
さすがに早い。


Sppedreport


ブラウザに付属している分析ツールと同じような機能です。
以下のように実行します。


phantomjs speedreport.js "調査対象URL"

実行結果は、speedreportsというディレクトリ以下にhtmlで保存されます。
HTMLを開くと以下の様なレポートが表示されます。
161_02.png


結果をCSV, jsonで出力する


メインとなる機能です。
以下のように実行します。
csvの箇所をjsonにすると結果がjsonになります。


phantomjs loadreport.js "調査したいURL" performance csv

この機能は複数回実行すると、結果が追記されていきます。
画像等のリソースで最も遅かったものや、データ量が大きかったもの、エラーなどがCSV, JSONとして記録されます。


UAの偽装


デフォルトはChromeを偽装しますが、config.json中の `userAgent`を`iphone`や`android`へ変更することでUAの偽装も行い分析が可能です。


スケジュール実行


schedule-loadreport.js を用いて指定した時刻ごとの結果も取得出来ます。
schedule-loadreport.js 内のURLを変更し、以下を実行しておけば 毎時の結果を取得出来ます。


npm schedule-loadreport.js

HTMLInspector.js

HTML Inspector.js


Github: https://github.com/philipwalton/html-inspector
ローカルでも動作可能なHTMLの品質チェックツール。
カスタマイズ製が高いことが特徴。
W3C validtor等ではチェック不可能な
このプロジェクトのHTMLのマークアップ規則はこうである
といったことに対応可能。
例えば、このプロジェクト内では、`data-id`をつかってはいけないや、クラスに`btn-danger`を付ける場合は、必ず`data-confirm`をつけるなどのチェックが可能。


インストール


bower install html-inspector

または、ソースコードをコピーしてローカルに`html-inspector.js`として保存する


チュートリアル


以下の様なHTMLがあるとする。


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Language" content="ja">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="author" content="namakesugi" />
<title>NAMAKESUGI</title>
<script src="jquery.1.10.1.js"></script>
</head>
<body>
<ul>
<div><span>a</span></div>
</ul>
<script src="html-inspector.js"></script>
<script> HTMLInspector.inspect() </script>
</body>
</html>

これをChromeなり、Firefoxなりで開き、Javascriptコンソールを表示すると以下のように表示される。
html-inspector-01.png


カスタムバリデーター


ここでは、 btn-dangerというclassが与えられている場合は、`data-confirm`を必要とするというバリデーションを書いてみる。


bodyの中身を以下のようにする


<a class="btn btn-danger" data-confirm="are you sure?">btn-danger1</a>
<a class="btn btn-danger">btn-danger2</a>

以下のようにスクリプトを定義する


<script>
HTMLInspector.rules.add(
"btn-danger-need-data-confirm",
{},
function(listener, reporter, config) {
listener.on('class', function(className, domElement) {

if(!/btn-danger/.test(className) || $(domElement).attr('data-confirm') !== undefined)
return;
reporter.warn(
"btn-danger-need-data-confirm",
"class 'btn-danger' need 'data-confirm'.",
domElement
);
}
)
});
HTMLInspector.inspect();
</script>

とすると、以下のように、`'btn-danger' need 'data-confirm'`と表示されるようになる。
html-inspector-02.png

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。