例えばレスポンシブ対応のブログなんかを作っている時、サイドバーに設置したGoogle+やFacebookのウィジェットって厄介じゃありませんか？

ウィジェットの横幅を大きくしたらスマホビューでは画面をはみ出ちゃうし、小さくしたらPCビューでかっこ悪い…。かといってPHPでユーザーエージェントを取得して出力タグを振り分けるというのも…。「各ブラウザはもっとユーザーエージェントを分かりやすくしろよ!!!」と作業5分後には叫んでいることでしょう。

今回は、ほんの少しのスタイルシートと数行のJavascriptを追加するだけで、ウィジェットをPCビュー、スマホビューともにフィットさせることができる小技を紹介します。

1レスポンシブのイメージ

どんなのかイメージが湧かない人のためにデモを用意しました。下記がレスポンシブに対応した、Google+とFacebookのウィジェットです。ウィンドウを広げた状態、縮めた状態、それぞれでページを再読み込みしてみて下さい。どちらのウィンドウサイズにも、ウィジェットの横幅がフィットするはずです。

2Javascriptを配布

「これ使ってみてもいいかも…」と思った人のために、その方法を紹介します。実装も取り外しも簡単で、既存のデザインに影響を与えることがありません。気軽に試してみて下さいね。

デモを見る

2-1Javascript

まず、下記のJavascriptを、〜.jsという名前で保存して読み込んで下さい。なお、jQueryを利用しているので別途読み込んでおいて下さいね。すっかりjQueryの虜になっている奴←。

$(function(){
	$('.responsive-widget-syncer').each(function(){
		$(this).children('div').attr({'data-width':$(this).outerWidth({margin:true})});
	});
});

2-2スタイルシート

続いて、下記のスタイルシートを既存のファイルに加えて下さい。

.responsive-widget-syncer{
	width:100%;
	max-width:100%;
}

2-3HTML

最後に、このレスポンシブ化を適用したいウェジェットの埋め込みコードを、responsive-widget-syncerというクラス名が付いたdivタグで囲むだけです。サンプルのように複数のウィジェットをまとめたり、コンテナが何カ所あっても大丈夫です。

	<div class="g-person">〜</div>
	<div class="fb-like-box">〜</div>

3カスタマイズ方法

前章のものでは物足りない人のために、カスタマイズ版を紹介します。Javascriptだけを差し替えて下さいね。

3-1ウィジェットの最大幅を設定したい

通常だと横幅いっぱいにフィットさせる仕様ですが、デザイン上、「最大幅を制限したい」というケースがあるかもしれません。そんな人はこちらをご利用下さい。3〜4行目を設定して下さいね。デフォルトでは最大幅500pxになっています。

デモを見る

$(function(){

	//最大幅を設定
	var MaxWidthWidgeSyncer = '500';

	$('.responsive-widget-syncer').each(function(){
		var WidthWidgetSyncerThis = $(this).outerWidth({margin:true});
		if(WidthWidgetSyncerThis > MaxWidthWidgeSyncer) WidthWidgetSyncerThis = MaxWidthWidgeSyncer;
		$(this).children('div').attr({'data-width':WidthWidgetSyncerThis});
	});
});

3-2Google+のバッジ(ウィジェット)を横幅によって変更する

これはGoogle+のバッジ(ウィジェット)を利用する場合なんですが、PCビューの時はダイナミックな縦型タイプを、スマホビューの時は控えめな横幅タイプを出力することができます。3〜4行目を設定して下さい。デフォルトでは480pxを境に、タイプを変更するようになっています。

デモを見る

$(function(){

	//ブレイクポイントを指定
	var BreakWidthWidgetSyncer = '480';

	$('.responsive-widget-syncer').each(function(){
		var WidthWidgetSyncer = $(this).outerWidth({margin:true});
		var LayoutWidgetSyncer = (WidthWidgetSyncer>BreakWidthWidgetSyncer) ? '': 'landscape';
		$(this).children('div').attr({'data-width':WidthWidgetSyncer,'data-show-faces':'true','data-layout':LayoutWidgetSyncer});
	});
});

4Javascriptをレスポンシブに活用しよう！

元々、ウィジェットはJavascriptを利用して表示するものなので、「ユーザーがJavascriptをOffにしてたら…」なんて考える必要はありませんよね。当ブログでは、今回のように「スタイルシートでは設定できない要素」はJavascriptを使ってレスポンシブ化しちゃってます。…それにしても、各端末がユーザーエージェントなどに機種の横幅、縦幅などの情報を記録してくれたら どんなにweb作成が楽になるか…とか妄想してしまいますよね。