でも、表現力でもブラウザ対応にしてもFlashには劣ります。
Flash使える場合は、Flash使った方がよいと思いますよ。

ということで、いまさらながら…になりますが、canvasとSVGを使ってちょっとだけ動きを試してみたいと思います。
　
こんなのをつくります→「canvas」「SVG」
　
あ、仕事ではまだ使っていません。
　
■canvas？SVG？

HTML5のコンテンツ・モデルでは、「canvas」「SVG」ともに「embedded contents」に含まれます。
HTMLに他のリソースを組み込んだりして表現するコンテンツ、ということですね。

「embed」という言葉が出てきているので、「あー、Flashみたいにコンテンツ貼り付けるのね。」と思っていただいて問題ないと思います。
　
■canvasとは…？

HTML5のタグの中で、一番有名…というか「HTML5だといろんなことできるんでしょ？」の代名詞として頭に浮かぶのが、このcanvasだと思います。

ただ、HTMLの中では、

<canvas width="**" height="**"></canvas>

のような形で、「canvas」の場所を確保するだけです。
この「canvas」に絵を描いて、「いろんなことできる」ようにするのはJavaScriptです。

ということで、描画。
　
リファレンスは色々なところにでていますので、ここではさくっと。
　
まずはお決まりの。
　

var canvas = document.getElementById('canvas');	//「#canvas」という要素（canvas要素のIDに「canvas」とつけたもの）を探してきて、「canvas」と名前をつけておきます。
var ctx = canvas.getContext("2d");	//「canvas」は「2d描画ですよ」と宣言したものを、「ctx」と名前つけておきます。

　
ということで、「ctx」を以下では使っていきます。
　
今回はTAMくんのシルエットを描画します。なので、クローズするパスを描いていく感じですね。
　

	ctx.beginPath();	//「ctx」に今からパス描きますよ！と宣言。
	ctx.moveTo(486,0);	//「ctx」の左上から、右に486px、下に0px行ったところに、最初の点を置きます。

　
「moveTo()」という言葉が「最初の点」というのをイメージしづらいのですが、「描きますよ！宣言」した時にはまだcanvas内に無かったポインタをココに動かして持ってくる、というのをイメージするとしっくりきました。
　
あとは、曲線を書いていくだけ。
今回はカンタンに、ベジェ曲線を組み合わせただけです。
　

	ctx.bezierCurveTo(267, 50, 0, 164, 14, 363);
	ctx.bezierCurveTo(30, 555, 226, 553, 253, 553);
	ctx.bezierCurveTo(357, 551, 494, 496, 505, 361);
	ctx.bezierCurveTo(511, 231, 424, 124, 280, 112);
	ctx.bezierCurveTo(313, 86, 336, 62, 486, 0);

　
ベジェ曲線は「bezierCurveTo()」。
引数が6つもあるのですが、補助線ひくとわかりやすいです。
　

　
片方の端っこは、1つ前の「moveTo()」「bezierCurveTo()」の最後の座標。
「bezierCurveTo()」の最初の2つの引数は、その端っこの点の制御点の座標。
真ん中2つの引数は、もう1つの端っこの点の制御点の座標。
もう1つの端っこは、後ろ2つの引数が座標。ココで、ベジェ曲線1つ描き終わり。
　
その描き終わりから、どんどん同じように描き足して最初の点に戻ります。
ただ、コレだけだとデフォルトの「パス」として認識されるだけなので、せっかくだから色をTAMブルーに。
　

	ctx.fillStyle = '#2C3962';

　
「fillStyle」は塗りの色。CSSの色指定の仕方でそのままいけます。RGBaも大丈夫。
　
パスと色が出来上がったので、いざ、塗りましょう。
　

	ctx.fill();

　
これで描きあがりです。
　
demoはこちら。IE向けに、uuCanvas.js使用しています。
　
一筆書きになりましたが、離れたところにもう1つ。という場合には「fill()」してから「moveTo()」で何回も開始点を移動すればよいです。
開始と閉じが同じ座標にならずに「fill()」された場合は、この場合だと開始と閉じが直線で結ばれます。
　
■SVGとは…？
　
元々、<object>でembedできてたものですね。
JPGやGIF、PNGと同じ画像形式の1つなのですが、SVGはベクターデータの画像形式です。
　
Adobe の Illustrator も、SVGでデータを書き出せます。
私の超古いCS2でも書き出せているので、普通のデザイン環境の方であれば書き出し可能だと思います。
　
XMLデータなので、テキストエディタで中身を確認できます。
ベクターデータですので、px単位での表記ではないのでこれに手を加えるのは潔く諦めました…。
　
私のIllustratorが古いからなのかパスデータの「,」がついたまま書き出されますが、ブラウザのデバッグツールはそれだと認識してくれなかったのでデバッグが必要な部分の「,」は抜いたほうが便利です。
　
描画と書き出しは、コレでOKです。
　
demoはこちら。このdemoでは、外部に置いたSVGファイルを<object>で呼び出しています。
SVGファイル単独は、こちらに置いています。
　
ブラウザへの読み込みですが、比較的新しいブラウザだとインラインSVGに対応しています。
　
なので、Firefox、Safari、Chrome、Operaでは書き出されたXMLの<svg>～</svg>をそのままHTMLに書き込んでしまってOKです。
widthとheightはつけてください。HTMLの書式ではないため、中身の高さは取れません。
　
IE8以下は…残念ながら<object type=”image/svg+xml” data=”SVGへのパス”>です。
それもWindows Vistaではムリだそうです。私のXPは大丈夫なのですが…。
　
IE9からはカヤックさんの「SVG女子」でも有名なように、基本的には対応しています。
今回は、IE8以下向け対応はナシとさせていただきます。すみません。
　
スマホですが、iPhoneではインライン対応はムリなようです。<object type=”image/svg+xml” data=”SVGへのパス”>ですね。
（案件の確認用にiOSのバージョンを落としているため、iOS5での確認はできておりません…）
Androidは…残念ながら3.系からSVGに対応なので、電話端末Androidでは現状は壊滅的です。
　
■動かしてみる。～canvas～
　
canvasでアニメーション、ということはよく耳にしますが「アニメーションする」という機能があるわけではなく、パラパラマンガのように1コマずつ白場を含めて書き直していきます。
　
なので、例えば先ほどのTAMくんの帽子の先っちょを動かそうと思うと
　

    if( tip.rct == '0' ){	//tip.rct  は、上に動くか下に動くかのフラグを用意しています。
	    tip.y = tip.y + 1;	//下方向に行く時は、元の座標に1pxたす。
    } else {
	    tip.y = tip.y - 1;	//上方向に行く時は、元の座標から1pxひく。
    }

というように座標を事前に変数に入れておいて

    ctx.fillStyle = '#fff';	//canvasの背景色
    ctx.fillRect(0, 0, canvas.width, canvas.height);	//canvasを背景色で塗りつぶす

    ctx.beginPath();
    ctx.moveTo(486,tip.y);	//	先っちょの座標は、さっきのtip.y
    ctx.bezierCurveTo(267, 50, 0, 164, 14, 363);
    ctx.bezierCurveTo(30, 555, 226, 553, 253, 553);
    ctx.bezierCurveTo(357, 551, 494, 496, 505, 361);
    ctx.bezierCurveTo(511, 231, 424, 124, 280, 112);
    ctx.bezierCurveTo(313, 86,  336, 62, 486, tip.y);	//	先っちょの座標は、さっきのtip.y

    ctx.fillStyle = '#2C3962';
    ctx.fill();	//一旦描画

    setTimeout(arguments.callee, 1000 / 30);	//	1000 / 30秒 ごとに、背景塗りつぶしから繰り返す

　
といった感じで、全体を毎回描画することになります。
　
demoはこちら。IE向けに、uuCanvas.js使用しています。ソースの全体像は、HTMLを参照してください。
　
何枚かcanvasを重ねておいて、動くcanvasのみを書き直す、でもいいかもしれません。レイヤーの順番や背景色に注意しなければいけませんが。
　
■動かしてみる。～SVG～
　
SVGの場合は、XMLなのでオブジェクト単位で操作できます。
　
が…TAMくんって一筆書きしてしまったので、オブジェクトが1つです…。
　
帽子と顔の2つのオブジェクトに分けて、動く帽子部分のみを動かすオブジェクトとします。
その方がデータもわかりやすいですし。
　
ということで、帽子の先っちょ部分を
　

<g id="tsuno">
	<path id="test" style="fill:#06123C;" d="M 28.384 119.565 C 95.775 28.261 220.514 28.261 267.514 0 C 151.21 63.043 128.384 119.565 185.775 80.435 z"/>
</g>

　
として書き出し、先っちょ部分のy座標を探すと
d=”M 28.384 119.565 C 95.775 28.261 220.514 28.261 267.514 0 C …
の、Cの前の0にあたるということがわかりました。
あとはその「0」を変数に入れて、canvasの時と同様に座標を埋めて「setTimeout()」で動かすだけです。
　
（パスデータを理解しやすくするために、ちょっといじってしまいました…なので、canvasバージョンとちょっとカタチが変わってしまってすみません。）
　

var pdItem = document.getElementById('test'),
	pd = pdItem.attributes['d'].value,
	pdArrNo = pd.split(' ')[9],	//コレが「0」の位置
	pdAttr = 0,	//最初の座標は「0」
	pdrct = 0;	//先っちょが動く向きのフラグ

　
～～～～～～
　

	if( pdrct == '0' ){
		pdAttr = pdAttr + 1;	//下方向に行く時は、元の座標に1たす。
	} else {
		pdAttr = pdAttr - 1;	//上方向に行く時は、元の座標から1ひく。
	}

	var st = pd.split(' '),	//元のパスデータを半角スペースで分け分け。
		stLen = st.length,	//分け分けしたのの個数を数えておく。
		s = '';	//新たに書き直すパスを入れるための準備。

	for( var i=0;  i<stLen; i++ ){	//分け分けしたのの個数分繰り返す。
		if( i != 9 ){	//[9]の時以外は、元のまま「s」に入れる。
			s += ' ' + st[i];
		} else {	//[9]の時は、書き換えた値を「s」に入れる。
			s += ' ' + pdAttr;
		}
	}

	pdItem.setAttribute('d',s);	//「d」の値に、用意した「s」を入れなおしたら、描画完了。

    setTimeout(arguments.callee, 1000 / 30);	//コレを繰り返す。

　　
demoはこちら。このdemoでは、インラインSVGにさせていただきました。JSも同じファイルに書いているので、フルのソースをご覧いただけます。
　
■何がちがうの？
　
canvasはパラパラマンガなので、一度描いたら描きっぱなしです。それの繰り返し。
なので、一部を動かそうとすると全部を描き直していくことになります。
　
SVGはXMLなので、オブジェクトが使えます。
たとえば、今回の「ぼうしの先っちょ部分」だけを取り出して、例えばそこをクリックしたらTAMくんの色が変わる、とかもできます。
　
canvasは、「クリックした」のが「ぼうしの先っちょ部分」であることを認識できません（座標はわかりますので、そこの情報はわかりますがオブジェクトを持っていません）。
　
座標を利用してゲームアニメーションを作るのはcanvasでよくありますが、オブジェクトを使用してアクションをしたい場合にはSVGの方が向いているといえます。
　
また、SVGはオブジェクトを持っているため、例えば見えないところにオブジェクトが移動してもそのデータをずっと持っているのですが、canvasはcanvasのエリアを越えた部分は描画データはないようです。
見えない部分に色々用意しておいて、ということになるとSVGの方が容量的には不利になるかもしれません。
　
今回、SVGの書き出し以外は全てテキストエディタでやっています。
そろそろツールも出てきている頃ではあろうと思うのですが（ツールにあまり興味がないので知らないのですが…）、HTMLやCSSと同様、どういう仕組みになっているか？という部分は手を動かすとよくわかります。
ツールを導入する前に、一度触ってみるとなんとなく理解できると思いますよ。
　
【参考】

• Canvasのリファレンス：HTML5.jp（羽田野 太巳　様）
  http://www.html5.jp/canvas/
• SVGのリファレンス：W3C SVG 1.1 仕様 （第２版） 日本語訳
  http://www.hcn.zaq.ne.jp/___/SVG11-2nd/index.html
• SVG女子：KAYAC様
  http://jsdo.it/event/svggirl/

【ブラウザ対応の参考に…】

• Raphael.js：クロスブラウザ描画用JSライブラリ。基本的にはSVGのようですが、独自の記法になるようです。
  http://raphaeljs.com/
• uuCanvas.js（uupaa　様）：canvas対応用クロスブラウザライブラリ。canvasの記法そのままで、関数たたくことでIE向けにcanvasの描画を再現してくれます。
  http://uupaa-js-spinoff.googlecode.com/svn/trunk/uuCanvas.js/README.htm

１． WordPressで固定ページ（例：facebook03.php）を作成
２． Facebook ページ（例：テスト01）を作成
３． WordPress の固定ページ（例：facebook03.php）をFacebook ページ（例：テスト01）で表示する

<?php
/*
Template Name: facebook03のテンプレート
*/
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>facebook03テスト</title>
<style type="text/css"><!--
html { overflow: hidden; }
body { width: 810px; overflow: hidden; }
#main {
margin: 0 auto;
width: 510px;
height: 800px;
padding: 10px 10px;
background-color: #cccccc;
}
--></style>
</head>
<body>
<div id="fb-root"></div>
<script type="text/javascript" src="https://connect.facebook.net/en_US/all.js"></script>
<script>
(function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol + '//connect.facebook.net/ja_JP/all.js';
    document.getElementById('fb-root').appendChild(e);
}());
window.fbAsyncInit = function() {
    FB.init({
        appId: 'xxxxxxxxxxxxxxx',
        status: true,
        cookie: true
    });
    FB.Canvas.setAutoGrow();
};
</script>
<div id="main">
<?php if(have_posts()): while(have_posts()): the_post(); ?>
<?php the_content(); ?>
<?php endwhile; endif; ?>
</div>
</body>
</html>

※今回は省略していますが、カスタムフィールドを使用して運用すると更新しやすくていいですね。

※「appId: ‘xxxxxxxxxxxxxxx’,」はApp IDを入れてください。（３のアプリ基本設定画面の①で確認）

※「スクロールバーを消す」コーディングの詳細はこちら⇒

■Wordpress 新規ページを追加

Facebook ページを作成します。

■http://www.facebook.com/pages/create.php　画面へ入り

　　　　↓

■カテゴリ、Facebookページ名（例：テスト01）を入力。

　　　　↓

■1.プロフィール写真　スキップ。

　　　　↓

Facebook ページ（例：テスト01）が作成できました。

■Facebook 開発者ページ（http://developers.facebook.com/)で

※Facebook 開発者ページに入るには、事前にFacebookの開発者登録が必要になります。

　　　　↓

■①App Name (例：テスト03内容)を入力。

　
　　　　↓

■セキュリティチェック用の文字を入力し、

　　　　↓

■この画面での設定は必要ありませんので、

　　　　↓

■アプリの基本設定画面で①App ID を確認しておきます。

　　　　↓

■１．で作成したWordPressで固定ページ（例：facebook03.php）のURLを

　　　　↓

■Facebook ページ（例：テスト01、App Name：yyyyyyyyyyyyyyy）と

　　　　↓

■Facebook ページ（例：テスト01）に入り、「アプリの表示名：テスト03内容」のアプリ画像が

参）：https://www.facebook.com/pages/テスト01/yyyyyyyyyyyyyyy

　　　　↓

■「アプリの表示名：テスト03内容」ページが表示されています。

※Facebook ページ（例：テスト01）に複数ページを表示したい場合は、

• 「いいね」したときに自分と友人のニュースフィードにも上がる。
• OGPの設定内容はニュースフィードに表示する内容を指定することができる。

ＯＧＰとは

Facebook以外のページをFacebookページのように見せる仕組みである。
ＯＧＰの参照方法は、ＯＧＰを設定したＵＲＬの先にＯＧＰがあれば、そのＯＧＰのURLを参照し

どんどんたどって最終的なＯＧＰを取得している。

「いいね」ボタンの数とFQLのいいねの数

• 『「いいね」ボタンに設定したＵＲＬのページに設定されたＯＧＰのＵＲＬ』　をカウントしている。
• ＦＱＬから取得する「いいね」の数は、『条件設定したＵＲＬ』のカウントを取得している。

『ＦＱＬ取得の「いいね」』と『「いいね」ボタンの数』が異なる現象に遭遇しました。

A.html　内に表示している下記はどちらも同じURL A.html を条件に指定しています。
OGPの記述のURLは B.html を設定しています。

上がFQLで取得した数。
下がボタンの数。
「いいね」対象のページを　A.html　とした場合
A.html　のＯＧＰのURLを、B.html　という別のＵＲＬで設定すると

ＦＱＬ取得では、条件設定するＵＲＬが　A.html　の場合、A.html　のカウントになる。

「いいね」ボタンは　B.html　のＯＧＰを取得し、カウントが　B.html　のカウントになる。

このＯＧＰの取得の違いに気がつくまでハマってしまいました。

また、最近ではOGPの設定で

fb:app_id と　fb:addmin で警告が出るため

対象となるドメインのアプリＩＤが必要なようです。

ここから作成する。

https://developers.facebook.com/apps/?action=create

アプリの詳細で、ウェブサイトにドメインを設定する。

取得したアプリＩＤをfb:app_id に設定するとＯＫです。

ドメイン毎に一つ作っておくだけでよいと思います。

<meta property="og:locale" content="ja_JP" />
<meta property="og:title" content="タイトル" />
<meta property="og:type" content="article" />
<meta property="og:url" content="いいね対象のURL" />
<meta property="og:image" content="いいねしたいときに表示したい画像" />
<meta property="og:site_name" content="サイトの名前" />
<meta property="og:description" content="サイトの説明文" />
<meta property="fb:app_id" content="アプリID(15桁）" />

下記のようにリンク要素の画像にCSSで半透明になるように記述して

●CSS

a:active img{
	opacity: 0.5;
	-moz-opacity: 0.5;
	filter: alpha(opacity=50);
	-ms-filter: "alpha(opacity=50)";
}

 
 
IEで表示します。
 
 
▼通常時

▼マウスオーバー時

ところどころ、画像が白く抜けてしまっています。
 
調べてみたところ、JPEG画像にfilter: alphaをかけると
特定の色（#02050a)が透過してしまうIEのバグのようです。
 
 

解決策としては
・特定色（#02050a)を別の色に置き換える。
・PNGを使う
になるようです。
 
この時は、IE6を対象ブラウザに含んでいたので
わからないように別の色に置き換えて対応しました。
 
 
知らないと解決するのに無駄に時間を使ってしまう事になりかねないので
頭の片隅に入れておくとよいと思います。
 
 
 

◎参考サイト
http://2244.jp/daily/2008/09/09/ie67jpgfilteralphaopacity/
http://www.gravity-works.jp/gravica/web/js/002123.html

制作途中でちょっと表示を確かめたい・調整したいときなど、PCと実機スマホを何度も往復していては時間がかかってしまいます。

作業中はPCブラウザの幅を縮めたり、何かしらのツールを使って、PC上でスマホ画面に近い環境を作って表示をチェックしているのではないでしょうか。

今回はPCブラウザでお手軽にスマホページを表示する方法を紹介します。

主要ブラウザをリストアップしました。

• Firefox
• Google Chrome
• Safari
• Internet Explorer
• Opera

それぞれ自分の使いやすいブラウザや開発ツールがあると思いますので
各ブラウザでの方法をまとめます。

• 【UA（ユーザーエージェント）の変更】
• 【ブラウザ幅・サイズの変更】

この設定をすることでスマホに近い環境をPCに再現できます。

PCからスマホページのURLにアクセスすると、リダイレクト設定などの自動振り分けによって、
勝手にPCページに転送されてしまい、そもそもスマホ用のページを見れない場合があります。

これはブラウザのUA設定を変更することによって解決できます。

● Firefox

アドオンでUAを切り替えることができるようになります。

・Fire Mobile Simulator

Mobile 用でも使われている有名なアドオンです。
Firefox がバージョンアップしてから対応していない場合もあるらしいです。
使えると便利です。

・User Agent Switcher

ブラウザメニューのツールからUAの変更ができるようになります。
初期設定で使える端末は iPhon 3.0 となっていて、追加もできます。
設定が少し大変そうです。

画面サイズの切り替えにも様々なアドオンがあります。

・Browsizer

320 × 480 など好きなサイズを登録することができ、
メニューバーに表示させると、右クリックで選択してブラウザの画面サイズを切り替えることができます。
現在の画面サイズも表示されますので手動で画面幅を変えてもサイズがわかります。

●Google Chrome

ブラウザの機能で、F12キーを押すと「 Chrome Developer Tools 」が起動します。
画面右下の歯車のマーク「 Settings 」ボタンをクリックすると設定メニューが開きます。
「 Network 」項目の「 Override User Agent 」にチェックを入れて、
プルダウンのメニューからUAを選択できます。
「 iPhone－iOS5 」等を選択したあと、ページを再読み込みすると
スマホUAに切り替わった画面が表示されます。

画面サイズの変更には Chrome ウェブストアの拡張機能（アドオン）が使えます。

・Window Resizer

好きなサイズを登録することができ、
アイコンクリックでサイズ変更ができるようになります。
手動で幅を動かしたとき、右下に現在のウィンドウサイズも表示されます。

●Safari

ブラウザの機能でUA切り替えができます。

まずは開発メニューを表示させるために、ブラウザ右上の歯車マークから「設定」を開き、
「詳細」の項目から「メニューバーに開発メニューを表示」にチェックをいれます。
次に歯車マークの隣にあるメニューボタンから「開発」を選ぶと、
「ユーザエージェント」という項目があるので、選択して切り替えることができます。

Safari はブラウザの最小幅が 320px なので、手動で横幅を一番小さくすると
iPhone の幅と同じになります。

●Internet Explorer

Internet Explorer 9 のブラウザの機能で「F12開発者ツール」を使います。F12キーを押すと起動します。
開発者ツールのメニューバーから「ツール」を選択。
「ユーザーエージェント文字列の変更」→「カスタム」でスマホ用のUA文字列を登録します。

例）iOS 5 のUA文字列は以下になります。

Mozilla/5.0 (iPhone; CPU iPhone OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3

登録したUA選択後、ページの再読み込みでスマホページが確認できるようになります。

●Opera

ブラウザの機能を使います。
左上メニューから「ページ」→「開発者用ツール」→「 Opera Dragonfly 」を起動します。
Opera Dragonfly のツールバーから「ネットワーク」を選択。
「ネットワークオプション」→「ヘッダを全体的に上書きする」にチェックを入れます。
「プリセット」のプルダウンからUAを切り替えて「保存」をクリックします。

• Mobile Safari on iOS4
• Android 2.3.3

これらの項目が初期で入っています。

その他

画面サイズを変更するフリーソフト

・Sizer

メニューバーやウィンドウ端で右クリックすると、あらかじめ設定したサイズに
ウインドウ幅を選んでリサイズしてくれます。

320px × 480px がすぐに作れます。

まとめ

今回調べてみて、ほとんどのブラウザで設定できることがわかったので、
実機チェックの前に自分の使いやすいブラウザで軽く確認したいときに使えます。

PCブラウザでの確認だと開発ツールの機能と一緒に使えるので、
要素の確認や調整もしやすいです。
Firefox なら Firebugと 合わせて使うこともできます。

もちろん最終的には実機を使って、表示や挙動に問題が無いか確認することが必要です。
javascript の挙動やタッチ・フリックなどスマホ独特のアクションはPCブラウザでは再現できないことも多いです。

その他ツールで。。
Mac であれば X code に iOS シミュレータという機能があります。
バージョンの切り替えもできて、かなり実機に近い再現ができていると思います。

windows でも使えるシミュレーターでは、
Adobe Air アプリに ibb demo というのものがあります。
ちょっとiPhone・iPadでの表示確認がしたいときに便利です。

探してみると他にもたくさんのツールがありました。
ダウンロードしてもうまく起動しないものもありましたが。。
完全にスマホ環境を再現してくれるツールが出来るといいですね。

HTML5, CSS3 では便利な機能が多数追加されましたが、ブラウザによって対応状況はまちまちです。

Modernizr を使うとブラウザの HTML5, CSS3 対応状況を簡単に調べることができるので、個々の状況にあわせたコードを比較的容易に書けるようになります。

バージョンの古い Internet Explorer 等に対応する際、コンディショナルコメントやいわゆる CSS セレクターハックを使用することがありますが、それらと同様のものと考えると分かりやすいかもしれません。

それではごくごく簡単ではありますが、以下に基本的な使い方をご紹介します。（バージョン等は記事執筆時点のものです。変更になっている場合があります。）

1. modernizr.js をダウンロードする

公式サイト からひとまず Development バージョンをダウンロードします。

（Modernizr Download Builder を使って、必要な機能だけで構成したスクリプトをダウンロードすることも可能です。公開環境で使用する場合等にどうぞ。）

2. HTML で modernizr.js を読み込む（バージョン 2.5.3）

<!DOCTYPE html>
<html lang="ja" class="no-js">
	<head>
		<meta charset="UTF-8">
		<title>modernizr.js 使用例</title>
		<script src="modernizr-2.5.3.js"></script>
	</head>
	<body>
	</body>
</html>

これをブラウザ（Google Chrome 18.0.1025.152）で開き、開発者ツールで表示した状態が下の画像です。ご覧のとおり、html 要素の class 属性値 no-js の代わりに、js, flexbox 等の値がずらずらっと沢山並んでいます。

• js
• flexbox
• flexbox-legacy
• canvas
• canvastext
• webgl
• no-touch
• geolocation
• postmessage
• websqldatabase
• indexeddb
• hashchange
• history
• draganddrop
• websockets
• rgba
• hsla
• multiplebgs
• backgroundsize
• borderimage
• borderradius
• boxshadow
• textshadow
• opacity
• cssanimations
• csscolumns
• cssgradients
• cssreflections
• csstransforms
• no-csstransforms3d
• csstransitions
• fontface
• generatedcontent
• video
• audio
• localstorage
• sessionstorage
• webworkers
• applicationcache
• svg
• inlinesvg
• smil
• svgclippaths

一通り並べてみましたが、この内の no- から始まるものが、そのブラウザが対応していない機能です。上記の例では、touch イベントに非対応（no-touch）、CSS 3D Transforms（no-csstransforms3d）に非対応なことが分かります。

3. CSS を書く

ブラウザの対応している機能が分かったところで、それに合わせたコードを書いていきましょう。まずは CSS から。

/*
 例：box-shadow が有効な場合はドロップシャドウをつけ、
 　　無効な場合は枠線（border）をつける
*/

/* 有効な場合 */
.boxshadow div {
  -moz-box-shadow: 0 1px 2px #969696;
  -webkit-box-shadow: 0 1px 2px #969696;
  box-shadow: 0 1px 2px #969696;
}

/* 無効な場合 */
.no-boxshadow div {
  border: 1px solid #969696;
}

簡単ですね。

4. JavaScript を書く

続いて JavaScript です。JavaScript の場合、Selector API や jQuery selectors 等で CSS と同じようにセレクタを使用する方法の他に、スクリプト中で機能を評価して処理を振り分ける方法があります。

// 例：touch イベント

if (Modernizr.touch) {

  // 有効な場合
  // touchstart, touchmove イベントにイベントハンドラをバインドする、等
} else {
  // 無効な場合
  // click, mousemove イベントにイベントハンドラをバインドする、等
}

以上です。

おわりに

以上、ごくごく簡単ではありますが Modernizr を使った CSS と JS の書き方をご紹介しました。

他にも、対応状況に合わせて別途 CSS, JS を読み込む機能や、独自のテストを追加するといった機能もありますので、詳しくは 公式のドキュメント を参照の上、活用して下さい。

Modernizr を使って、ブラウザに振り回されることなく、きちんと動作・表示する Webサイト・Webアプリケーションを作っていきましょう。

それでは。

1. 1.最新のトラッキングコードを取得
2. 2.ソーシャルトラッキング用のJavaScriptを設置
3. 3.Twitter用トラッキングコード
4. 4.Facebook用トラッキングコード
5. 5.GoogleAnalyticsで確認

※以下はサイトにソーシャルメディアボタンが設置されている事を前提として説明しております。
ソーシャルメディアボタン設置の方法に関しては、下記の記事を参考にしてください。
≫【WordPress・Movable Type】ソーシャルメディアボタン設置方法のまとめ

Google Analytics新バージョンの画面から、最新のトラッキングコードを取得して、
＜/head＞タグの直前に貼り付けます。

<!-- Google Analytics Tracking Code -->
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-xxxxxxxx-x']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>

</head>

※「Google+1」については、上記トラッキングコードを貼り付けるのみで、その他に必要な設定作業はありません。

TwitterとFacebookを計測する為に、「ga_social_tracking.js」を以下よりダウンロードして、
先程取得したトラッキングコードの下に読み込ませます。(14行目～16行目)
≫ga_social_tracking.js

<!-- Google Analytics Tracking Code -->
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-xxxxxxxx-x']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>

<!-- Google Analytics Social Button Tracking -->
<script type="text/javascript" src="http://www.tam-tam.co.jp/js/ga_social_tracking.js">
</script>

</head>

※「ga_social_tracking.js」UP場所のパスは適宜変更してください。

＜head＞タグ内に下記Twitter用トラッキングコードを挿入。
≫サンプルコード：twitter_js_async.html

<!-- Load Twitter JS-API asynchronously -->
<script>
(function(){
var twitterWidgets = document.createElement('script');
twitterWidgets.type = 'text/javascript';
twitterWidgets.async = true;
twitterWidgets.src = 'http://platform.twitter.com/widgets.js';
// Setup a callback to track once the script loads.
twitterWidgets.onload = _ga.trackTwitter;
document.getElementsByTagName('head')[0].appendChild(twitterWidgets);
})();
</script>

Facebookの「いいね！」ボタンのトラッキングは、iframe版では出来ないようです。
「HTML5版」「XFBML版」での実装のみ、Google Analyticsでのトラッキングが可能のようです。

■XFBML版「いいね！」ボタンの例■

<div id="fb-root"></div>
<script src="http://connect.facebook.net/ja_JP/all.js#appId=IDを記述;xfbml=1"></script>
<fb:like href="SiteURIを入れてください。" send="false" layout="button_count" width="任意の値" show_faces="true" font=""></fb:like>

上記のコードに下記、計測用コードを追加します。
※挿入場所は「fb:like」前でOKです。

<script type="text/javascript">_ga.trackFacebook();</script>

合体させるとこんな感じです↓

<div id="fb-root"></div>
<script src="http://connect.facebook.net/ja_JP/all.js#appId=IDを記述;xfbml=1"></script>
<script type="text/javascript">_ga.trackFacebook();</script>
<fb:like href="SiteURIを入れてください。" send="false" layout="button_count" width="任意の値" show_faces="true" font=""></fb:like>

※サンプルコードは下記より取得・参照いただけます

≫Google Analytics Sample Code

GoogleAnalytics左メニューの[ユーザー]⇒[サマリー]⇒[ソーシャル]から確認できます。

①エンゲージメント

ソーシャル アクションが行われた訪問と行われなかった訪問で比較できます。

②アクション

ソーシャル ソース別にアクション（+1 のクリックや「いいね！」の操作）の回数を比較できます。

③ページ

サイトのページ別に、ソーシャルソース別・ソーシャルソースとアクションの組み合わせ別に、表示アクション数を比較できます。

※Google Analyticsでは、3月22日に新しいソーシャルメディア分析機能の発表がありました。
数週間後には、より詳細なソーシャル分析レポートが確認出来るようになると思います。

■参考サイト■

≫ソーシャル プラグイン アナリティクスについて
≫Google Analyticsでソーシャルメディアの価値をつかむ
≫Google Analyticsでソーシャルメディア分析、5つのポイント

WordPressなどのプラグインを用いて、TwitterやFacebookのボタンを表示させている場合は、
計測が出来ないようですのでご注意ください。

1. 1.ローカルサーバの構築
2. 2.セキュリティの設定
3. 3.MySQLにWordPress用のデータベースを作成
4. 4.XAMPPにWordPressをインストール

XAMPPのサイトへアクセスします。
http://www.apachefriends.org/jp/xampp-windows.html

インストーラーをダウンロードし、インストール。

インストールしただけではセキュリティが低く設定されているようなので、セキュリティーの設定をします。

XAMPPのコントロールパネルを起動し、ApacheとMySqlのStartボタンを押してApacheとMySQLを起動させます。

※私が初めて起動させた時は、Apachが起動しませんでした。
ApacheはPort80、MySqlはPort3306を利用していて、Port80を他のアプリケーションが使っているため起動しなかったようです。今回はskypeを閉じると無事起動しました

Apacheの「Adim」ボタンをクリックすると、ブラウザでXAMPPの画面が表示されます。

「日本語」をクリックします。

ツールの「セキュリティ」をクリックして、現在のセキュリティの状況を確認をします。

ステータスの箇所を確認すると、「要注意」になっている箇所がありますので、上3つの設定を行います。
画像の下部にある「http://localhost/security/xamppsecurity.php」をクリックしてセキュリティの設定をします。

MySQLのパスワードを設定します。
(後からWordPressをインストールするときに使います。)
下記のチェックボックスにチェックを入れると、パスワードを記したテキストファイルが保存されます。

XAMPPのディレクトリ制御のために「ユーザ」「パスワード」を入力します。
下記のチェックボックスにチェックを入れると、パスワードを記したテキストファイルが保存されます。

MySQLとXAMPPのディレクトリにパスワードが設定されました。

再度セキュリティボタンをクリックすると、ステータスが安全に変わっているのが確認できます。

ツールの「phpMyAdmin」をクリックします。

ログイン画面で言語を日本語にし、ユーザー名とパスワードを入力してログインします。

MySQL 接続の照合順序が「utf8_general_ci」になっていることを確認し、ヘッダーのデータベースボタンをクリックします。

赤枠の部分に任意のデータベース名を入力します。

「作成」ボタンをクリックすると、データベース作成が完了します。

WordPressの公式ページにてWordPressをダウンロードします。
http://ja.wordpress.org/

ダウンロードしたファイルを解凍して、インストールしたXAMPP内のhtdocsフォルダに入れます。
（今回の場合、C:\xampp\htdocsに入れました。）

「http://localhost/wordpress/」にアクセスします。
すると下記の画面になりますので、「設定ファイルを作成する」ボタンを押します。

「次に進みましょう」ボタンでさらに進み、下記画面で各項目を入力します。

・データベース名

・ユーザ名

・パスワード

・データベースのホスト名とテーブル接頭辞

下記の画面が出てきたら、「インストールを実行」ボタンを押し、インストールを完了します。

これまで最大 520pxだった横幅は、520px・810px の 2タイプになりました。
横幅が広くなるため、より自由なレイアウトが行えるようになります。


今までのサイズである 520px がデフォルトとなっているため、
これまでに作成したページは、特に移行作業をしなくても今まで通り表示させることができます。
※上記キャプチャのように、左右に余白が追加され、センターに配置されます。

新しく追加された 810px を使用したい場合は、アプリの設定画面から選択します。


なお、iframe周辺の余白は以下の通りとなっています。


　
　

iframeの高さは、今まで通り 800px です。
この高さを超えると、スクロールバーが表示されてしまいますので、
長いページの場合は、スクロールバーを消す設定を加える必要があります。


以前ご紹介した「スクロールバーを消す方法」は、
現在では IE でのみエラーが表示されてしまいます。*1
>> iframe版 Facebookページのスクロールバーを消す方法

　
　
今回は、iframe の高さを自動的に調整してくれる JavaScript SDK、
「FB.Canvas.setAutoGrow」を使用します。

<body>
<div id="fb-root"></div>
<script type="text/javascript" src="https://connect.facebook.net/en_US/all.js"></script>
<script>
(function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol + '//connect.facebook.net/ja_JP/all.js';
    document.getElementById('fb-root').appendChild(e);
}());
window.fbAsyncInit = function() {
    FB.init({
        appId: 'xxxxxxxxxxxxxxx',
        status: true,
        cookie: true
    });
    FB.Canvas.setAutoGrow();
};
</script>

※「appId: ‘xxxxxxxxxxxxxxx’,」はアプリIDを入れてください。

高さを設定するより若干動作が重いようにも感じるのですが、
毎回高さを設定しなくてもよく、使いまわしもできるのでとても便利です。

　
　
　

Facebookページに作成した iframeページを追加したら、
こちらに表示されるアイコン（111px × 74px）を作成します。

画面右端にある▼をクリックして管理モードに変更。
アイコンを変更したい画像にカーソルを乗せると「鉛筆アイコン」が表示されます。
「鉛筆アイコン」をクリックすると選択肢が表示されますので、「設定を編集」を選択。

編集のウィンドウが開くので、
「カスタムタブの画像：変更」をクリック

新しいウィンドウまたはタブで、
カスタム画像の編集画面が表示されます。
「Change」をクリック

アップローダーが表示されるので、
作成した画像を選択。

（設定した画像が表示されたら、このウィンドウは閉じても問題ありません。）

元の画面に戻ってきました。
編集ウィンドウの「OK」をクリック。

アイコンを設定できました。


今まで OGP で使用していた 90px × 90px の画像で設定してみましたが、
枠内に収まるように縮小され、センターに配置されました。

30日までに対応できそうにない場合は、
しばらくはすでにあるもので代用しても大丈夫そうです。

今週末、3月30日にFacebookの画面が大きく変わります。
今までの「ウォール」が「タイムライン」という名前に変わり、
見た目も変わってしまいます。

すぐに変更した方がいい部分に絞って、簡単にまとめました。

　
　
※Facebookページの変更点に関しては、以下へアップしています。
>> 移行直前！タイムライン対応まとめ（Facebookページ編）
　
　

【カバー写真】　※新規作成
サイズ：851px × 351px

ページの上部に新しく追加される大きな画像です。
Facebookページや個人のイメージとなる画像を設定ください。



アップロード時に、サイズ通りに作ってもうまく反映されなかったり
画像が粗くなることがあるようです。
これを防ぐために非常に大きなサイズでアップする方法なども紹介されていますが、
基本的にはサイズを守って作成すれば大丈夫なようです。

　
　
【プロフィール写真】　※調整が必要な場合有
サイズ：180px × 180px
※実際の表示サイズは、125px × 125px です。



今までのサイズが、180px × 540px と縦長だったので、
正方形になったことで調整が必要な場合は、調整をしてください。

カバー写真下の「基本データ」「写真」は固定ですが、
その右側に1～3つのアプリを表示させることができます。



このアプリの編集・追加・削除は、
右端にある▼をクリックし、管理モードに変更して行います。
アプリ画像上にカーソルを乗せると「鉛筆アイコン」が表示され、編集することができます。
（並び替えが少しわかりづらいのですが、
前後のアプリ画像からプルダウンで選択すると順番が入れ替わるようです。）

このアプリ画像のサイズは、111px × 74 px で、
その下に追加されるアイコン画像は、以前と同じ 16px × 16 px です。

今まで「いいね！」を押していない人向けに
デフォルト表示にしていたウェルカムページが設定できなくなり、
カバー写真のあるタイムライン（旧ウォール）がデフォルト表示になります。
※「基本データを編集」内の
　「権限の管理」ページにある「デフォルトで表示するタブ」もなくなります。

ただし、
「Facebook広告」からのリンク先は、
ファンゲート機能を設定したウェルカムページなどを設定することができますので
広告を出稿されている場合は、設定をご確認ください。

また、
「いいね！」の位置が変更になっていますので、
ウェルカムページを以前のデザインから流用する場合は、デザインにご注意ください。

このほか、Facebookページへメッセージを送ることができるようになったり、
過去記事の投稿・ハイライト表示など、数多くの機能も増えました。
以下のサイトで詳しく解説されていますので、ご参照ください。

●Facebookの新機能「タイムライン」の使い方まとめ – Facebook navi［フェイスブックナビ］
http://f-navigation.jp/special/timeline
6つのカテゴリに分けて、わかりやすく解説されています。

●新Facebookページ　使い方・移行方法　まとめ（facenavi）
http://facebook.boo.jp/facebook-new-page-tutorial
やるべきことを9つに分類し、順を追って解説されています。

●ASCII.jp：変更直前！Facebookページタイムライン最終ガイド
　（今日からできるFacebookファンページ制作＆運用ガイド）
http://ascii.jp/elem/000/000/680/680672/
タイムライン移行によって大きく変更される4点について。最後の「チェックリスト」も便利。

●Facebookページタイムライン完全ガイド | Social Media Experience
http://socialmediaexperience.jp/5109
図が多いので、非常にわかりやすいです！

●Facebookページのタイムライン化で検討すべき11項目のチェックリスト【完全版】
　（ガイアックスソーシャルメディアラボ）
http://gaiax-socialmedialab.jp/facebook/091
チェックリスト形式で紹介されています。間違いやすい情報についてのフォローも有。