パフォーマンス測定

GTmetrix

• オンラインツール
• サイトの表示速度を計測
• パフォーマンスの改善点を調査
• ブラウザとサーバー間のやり取りを調査
  ※時間・データサイズ・回数等。

補足

Googleのサイト速度計測サービスである”Page Speed“とYahoo!のサイト速度計測サービスである”YSlow“の結果をまとめて見ることができる、サイトの表示速度計測ツールです。Page SpeedやYSlowがブラウザのアドオンであるのに対して、GTmetrixはサイトのURLを入力するだけの簡単仕様で使えるオンラインツールです。

GTmetrixは、ブラウザとサーバー間のやり取りを調査するためのツールですので、データベースの処理速度を計測することはできません。
WordPressでサイトを作成している場合、以下を記述するだけで”データベースへのアクセス回数(クエリ数)”と”処理にかかた時間”を確認することができます。

▼footer.php等に以下のテンプレートタグを記述
<?php echo get_num_queries(); ?> queries. <?php timer_stop(1); ?>

普段は”<!—->”でコメントアウトしておき、計測したい場合のみコメントを外して使用してくださいね(※ブウラウザでページ上に表示されますので、footer.phpの</body>の直前にでも入れて確認しましょう)。

データベースの処理速度は、もちろんサーバーのスペックにも依存します。
サーバーの処理能力を確認するには、ApacheBenchでベンチマークをとってみてもよいですね(※ApacheBenchに関しては、以前の記事でも紹介しています)。
⇒ APCでPHPの処理を高速化 -ApacheBenchで処理速度を計測-

サイト表示スピード測定・サーバレスポンス時間測定

• オンラインツール
• サイトの表示スピード計測(時間/秒)
• GETでのレスポンス時間を測定
  ※実際のページが表示される時間を表示。
• 直近の1000件をランキング表示

補足

もっと簡単にサイトの表示スピードを確認したい場合はこれ！
実際のページが表示されるまでの時間(秒)を表示してくれます。

もし、こちらのページが文字バケしてしまう場合、以下を試してみてください。
※metaにキャラセットを指定していないためです。

●Internet Explorerの場合
ブラウザより[表示]→[エンコード]→[日本語(自動選択)]を選択

●Firefoxの場合
ブラウザより[表示]→[文字エンコード]→[自動判別]→[日本語]を選択

ファイル圧縮

Online YUI Compressor

• オンラインツール
• CSSファイルのminify化
• Javascriptファイルのminify化
• テキスト･ファイル･URLよりファイルをminify化
• 軽量化したファイルをダウンロード可能

補足

CSSファイルやJavascriptファイルをminify化して、ファイルをダウンロードすることができるツールです。

●minify化
CSSやJavascriptのファイルには、コメント・余白・改行等を入れて分りやすく記述していきますが、ブラウザでの表示上は必要のないものです。これらを削除し、ファイルを軽量化する手段をminify化といいます。

Smush.it

• オンラインツール
• 画像ファイルの軽量化
• 画像ファイルの付加情報を削除
• 軽量化したファイルをダウンロード可能

補足

Photoshop等で画像を加工し保存した場合、その画像ファイルには、その他の情報も付加された状態で保存されます。例えば、画像を加工したPhotoshopのバージョンなんかもそうです。それらの付加情報を削除することで画像ファイルを軽量化します。

GIDZipTest

• オンラインツール
• Gzip圧縮されたサイトの測定
• Gzip圧縮の有無
• Gzip圧縮前と後のファイルサイズ比較
• 圧縮率(%)の表示

補足

Gzip圧縮されたサイトの測定ツールです。
例えば、ApacheのモジュールでGzip圧縮したhtml・css・javascript等のファイルが、ページ全体として本当に圧縮されているか確認することができます。
｢Gzip圧縮の有無｣｢Gzip圧縮前と後のファイルサイズ比較｣｢圧縮率(%)の表示｣等がオンラインツール上で確認することができます。

HTML・CSS

Zen-Coding

• エディタ用プラグイン
• HTML・CSSコーディングの効率化
• ショートカットでHTML・CSSの入力を補助
• オーサリングソフトDreamweaverにも対応(※CS3以上)
• 各種テキストエディタに対応

補足

ショートカットでHTML・CSSの入力を補助し、コーディングの高速化を可能にしたエディタ用プラグインです(※Zen-Codingは、各種テキストエディタがサポートされており、Dreamweaverや秀丸等でも使用する事ができます)。

⇒ 各種テキストエディタ用のプラグインダウンロード
⇒ 秀丸エディタ用マクロ
⇒ Zen-codingチートシートダウンロード(PDF形式)

公式のものとサードパーティー製のプラグインがありますので、各種対応状況をご確認の上ご利用ください(※サードパーティー製のプラグインは、一部機能が対応していない場合もありますので、その点ご注意ください)。

Sass

• CSS拡張メタ言語
• CSSの記述を効率化
• 構築方法1：Rubyを導入後、Sassをインストール
• 構築方法2：ScoutでSassを使用
  ※Scoutは、コマンドを使わずGUIで操作できるAIRアプリです。

補足

CSSを拡張したメタ言語であるSass。
もっと簡単に言うと、CSSを効率的に扱うための言語です。
CSSファイルを作成するのではなく、SCSSというファイルを作成し、そのファイルをCSSファイルに変換(コンパイル)します。
変換(コンパイル)されたCSSファイルは、SCSSの記述に従って自動的に変換されるので、記述した人によって構文の違い等が発生したりする心配がありません。
また、CSSの記述では使うことのできない変数・定数・演算を使用できたり、セレクタのネストやセレクタの継承等の機能を提供してくれます。

導入方法としては、｢Rubyを導入後、Sassをインストールする方法｣と｢ScoutでSassを使用する方法｣があります。

⇒ Rubyダウンロード(Windows)
⇒ Scoutダウンロード(Windows or Mac)

Support tables for HTML5,CSS3,etc

• 情報提供サイト
• CSS対応状況確認
• HTML5対応状況確認
• その他(JS API・SVG等)対応状況確認
  ※ブラウザごとの対応状況を確認できます。

補足

CSSやHTML5のブラウザごとの対応状況を確認できるサイトです。
CSSでは、どのブラウザにベンダープレフィックスが必要か、バージョンごとに確認ができてとても便利です。その他、Javascript APIやSVG等のブラウザごとの対応状況も確認できます。

FindMeByIP -CSS3 & HTML5 Support-

• 情報提供サイト
• HTML5対応状況確認
  ※プロパティ・セレクタ等。
• CSS3対応状況確認
  ※ウェブアプリ・グラフィック・オーディオ・ビデオ・フォーム等。

補足

HTML5やCSS3のブラウザごとの対応状況を確認できるサイトです。
上記の｢Support tables for HTML5,CSS3,etc｣ほど詳細を確認できるわけではありませんが、全体の対応状況をざっと確認したい場合に便利です。

W3C HTML 検証サービス

• オンラインツール
• HTMLのバリデータチェック
• ドキュメントタイプごとの検証が可能(自動検出もあり)
• URL・アップロード・直接入力に対応

補足

W3CのHTMLバリデータチェックサービスです。
もう、説明の必要がないほど有名なツールですよね。

W3C CSS 検証サービス

• オンラインツール
• CSSのバリデータチェック
• オプションでCSS3にも対応
• URL・アップロード・直接入力に対応

補足

W3CのCSSバリデータチェックサービスです。
こちらも、上記と同じく有名なツールの1つですよね。

CSS3 PIE

• サーバー上で使用
• Internet Explorer6～8でも一部のCSS3を使用可能にする
• 対応プロパティ
  border-radius・box-shadow・border-image・multiple background images・linear-gradient as background image・Hover tracking(-pie-track-hover)・Active tracking(-pie-track-active)

補足

Internet Explorer6～8でも一部のCSS3を使用可能にするためのツールで、サーバーにアップロードして使います。

CSS3 PIEに関しては、以前の記事でも紹介しています。
⇒ Internet Explorer9以前でもCSS3を使う

Prefix free

• Javascriptライブラリ
• ベンダープレフィックスを自動追記
• 対応ブラウザ
  IE9以上・Opera 10以上・Firefox 3.5以上・Safari 4以上・Chrome・Mobile Safari・Android browser・Chrome Mobile・Opera Mobile
  ※2012.9.28時点の最新バージョン1.0.7を使用した場合

補足

CSSのベンダープレフィックスを自動で追記してくれるJavascriptライブラリです。
最新バージョンでは、対応ブラウザも増え、さらに使いやすくなりました。

Prefix freeに関しては、以前の記事でも紹介しています。
⇒ CSS3のベンダープレフィックス

ah-placeholder.js

• jQueryライブラリ
  ※jQuery本体も必要です。
• 未対応のブラウザで、HTML5のplaceholder属性を使用可能にする
• フォームの入力コントロール(inputやtextareaの入力例等)

補足

Internet Explorerのように未対応のブラウザで、HTML5のplaceholder属性を使用可能にするjQueryライブラリです。

今後、Internet Explorerを含め、主要なブラウザがplaceholder属性に対応した場合でも、フォームを修正する必要がないところがおすすめです。
placeholder属性をそのまま記述すれば、未対応の環境でだけ動作してくれます。

ah-placeholder.jsに関しては、以前の記事でも紹介しています。
⇒ HTML5のplaceholder属性をInternet Explorerで使う

スマートフォン・タブレット

jQuery mobile

• スマートフォン・タブレット向けのフレームワーク
• 広範囲な互換性を持つ、Webサイト・アプリケーションの構築
• タッチパネルに最適化されたUIウィジェット
• Ajaxによるアニメーション効果のついたスムーズなナビゲーション

補足

スマートフォン・タブレット向けのフレームワークです。
広範囲な互換性を持つ、Webサイトやアプリケーション構築に適したフレームワークで、タッチパネルに最適化されたUIを簡単に制作可能です。

[参考サイト]
⇒ jQuery Mobile 日本語リファレンス

respond.js

• Javascriptライブラリ
• クロスブラウザ対応
  ※Internet Explorer9未満でもMedia Queriesを使用可能にします。
  ※Media Queriesは、CSS3から導入されたMedia Type拡張です。

補足

Internet Explorer9未満では、CSS3に対応していないため、Media Queriesを用いたレスポンシブデザインはできません。
Javascriptライブラリであるrespond.jsを使えば、Internet Explorer9未満でもMedia Queriesを使用することができるようになります。

Media Queries
Media Typeを大幅に拡張したもので、CSSを適用するメディアをより細かく指定することができます。

レスポンシブデザイン
PC・スマートフォン・タブレット等、様々なデバイスに対応するWebデザインを提供することを指します。

2014.9.29追記
css3-mediaqueries-jsを紹介していましたが、Google Codeのリンクが削除されていましたので、同種のJavascriptライブラリである｢respond.js｣に変更しました。

GoMo日本語版

• 情報提供サイト・オンラインツール
• スマートフォンでの表示確認
• 診断レポート
• スマートフォン関連情報
• 事例紹介

補足

Googleが提供するスマートフォン最適化診断サイトです。
URLを入力し、質問に答えていくことで診断結果が表示され、診断レポートをPDFでダウンロードすることができます。
その他にも、スマートフォン関連情報が掲載されています。

英語版ではもっとコンテンツが充実していますので、日本語版も徐々にコンテンツが充実していくと思います。

User-Agent Switcher for Chrome

• Google Chrome用の拡張機能
• UserAgentごとに表示切替
• デフォルトのUserAgentは、Chrome・Firefox・Opera・Safari・Internet Explorer・iPhone・iPad・Android
• User-Agentの追加も可能

補足

Google ChromeでUserAgentを切り替え・追加できる拡張機能です。
様々なブラウザや端末での表示をシミュレートできます。
※実機と比べると正確性には劣ります。

User-Agent Switcherに関しては、以前の記事でも紹介しています。
⇒ Google Chromeで簡単にUserAgentを変更

その他

TortoiseSVN

• ソフトウェア
• バージョン管理ツール
• Subversion(SVN)のクライアント
• Windowsのシェルエクステンション

補足

Windows上で動作するSubversion(SVN)クライアントです。
制作過程でのバージョン管理ツールとして使用します。
Subversionのコマンドを実行することなく、直観的に操作することが可能です。

[参考サイト]
⇒ sourceforge.netにあるTortoiseSVNの日本語ミラーサイト
⇒ TortoiseSVNの解説
⇒ Apache Subversionソースコード

Yahoo! Pipes

• オンラインツール
• フィード作成
• モジュールをつなげ、オリジナルフィードを作成
• 米国版Yahoo! IDが必要

補足

データソースをRSSフィードとして取り込み、その内容を加工するモジュールを複数つなげ、オリジナルのRSS/JSONフィードを作成することができる、米国版Yahoo!が提供しているツールです。キーワードを抽出しYahoo!で検索したり、Flickrから画像を取得したりすることもできます。