ソーシャルメディア 06
カスタマイズページを応用可能な方法で作る

通常HTMLをiframeアプリで登録すれば簡単に登録できてしまう Facebookページのカスタマイズページ。しかしせっかく作るなら、さまざまなデバイスへの対応も考えて作りたいところだ。

解説／早乙女拓人（株式会社ワークス）　清水豊（株式会社ワークス）　村原郁夫（株式会社ワークス）

レスポンシブWebサイトであることの重要性を考える

Webを見るためのデバイスは、従来のパソコンはもちろん、スマートフォンやタブレット端末など、近年まれに見る勢いで多様化しはじめている。しかもiPhoneとAndroid、スマートフォンとタブレットなど、すべて表示エリアに違いがあるという状態だ。これはWeb制作者としてかなり頭の痛い問題だと感じることだろう。しかも、Facebookへのアクセスは約70％がスマートフォンからであるという調査結果もあり、これらを無視できなくなってしまっているから始末が悪い。

そこでこのレスポンシブWebサイトが威力を発揮する。開いたデバイスの表示エリアを自動認識し、そこに最適なレイアウトを自動表示するレスポンシブWebサイトは制作者にとっても救いの神となるだろう。一つのHTMLとそれをコントロールする複数のCSS＋JavaScript。これを設定してしまえば、すべてのデバイスに対する設定を記述していく必要もない。

Twitter Bootstrapを使ってレスポンシブなWebを構築する

一口にレスポンシブWebサイトを構築すると言っても、その設定には少なからず手間と工夫が必要になる。そこで便利なのがCSSフレームワークの一種であるTwitter Bootstrapを使ったレスポンシブWebサイトの構築だ。2012年5月現在の最新バージョンは2.0.3。あらかじめプロットされたCSS のデザインパーツ「bootstrap-responsive.css」を読み込むことで、ブラウザ・ウィンドウに対応したレイアウトに自動変更してくれる。今回はこれを、Facebookにおけるカスタマイズページのパソコン版とスマートフォン版に応用してしまおうという次第だ。

設定も極めて簡単で、指定のclassを設定するだけでそれなりのデザイン・レイアウトを完成することができる。もちろんCSSがベースなのでカスタマイズも非常に簡単だ。ベースとなるCSSのほかに、Components、Javascript plugins、CSSLESSなど、使えるオプションも数多くあるのもうれしいところだ。詳細はそれぞれ、Twitter BootStrapのサイト【01】にリファレンスがあるので参照してみてほしい。

【01】Twitter Bootstrap公式サイト（http://twitter.github.com/bootstrap/index.html）

Twitter BootstrapとFacebookページ

Twitter Bootstrapは元来、パソコン表示、タブレット表示、スマートフォン表示の3段階を軸に、その間でも何段階かの表示切り替えを自動で行ってくれる機能を持つ。デフォルトとなるパソコン表示はwidth="940px"。タブレット表示で768px、スマートフォン表示では320pxだ。たとえばTwitter Bootstrapのサイトをパソコンで開き、ブラウザの横幅を少しずつ縮めていくと、段階を追って表示要素のレイアウトが変わり、ボタン類のサイズも変化していくのがわかるだろう【02】【03】【04】。このフレキシブルさを簡単に実現できているところがTwitter Bootstrapの素晴らしさだ。

さて、今回制作目標となっているFacebookページのカスタマイズページはwidth="810px"。このウィンドウ・サイズでは、Twitter Bootstrapの768pxの表示CSSが適用される。つまり両脇に21pxずつのマージンができる（実際にはさらにその外側に20pxほどのマージンがある）ことを想定してデザインを考えていくといいだろう。

【02】パソコン表示状態。

【03】Padなどのタブレット表示状態。

【04】スマートフォン表示状態。

Twitter Bootstrapで作ってみる

まずTwitter Bootstrapサイトを開いて、中央付近にあるボタン「Download Bootstrap」をクリック。すると関連ファイル一式をダウンロードすることができる。ダウンロードされた「bootstrap.zip」を解凍すると、CSSとJavaScript、imageフォルダの3つが内包されているのが確認できるだろう【05】。しかしここには元となるHTMLが入っていないので、これを用意し、head内にCSSとJavaScriptの記述を追加。さらに、jQueryに依存しているのでここではCDN版のjQueryを読み込む記述を追加する【06】。

以上がオリジナルで作成する際のスタートアップ手順だが、もっと簡単に、すでに準備されたテンプレートをカスタマイズして利用する方法もある。利用する場合は上部メニューから「Customize」をクリックし、開いた「Customize and download」ページでcomponents やjQueryの要・不要オプションを選択した上でダウンロードするといいだろう。

この設定が面倒であれば、ページタイトルすぐ下にある「Download the full repository」リンクをクリックすると、サンプルページなども含んだフルバージョンをダウンロードすることもできる。ソースコードをコピー＆ペーストして利用する際など非常に便利だ。

【05】Twitter Bootstrapのディレクトリ構成。

【06】

フルバージョン・ダウンロードでのセッティング

それでは前出のフルバーション・ダウンロードで作ってみよう。

Twitter Bootstrap 公式サイトの「Customize and download」のページを開き、「Download the full repository」をクリックしダウンロードする。

解凍されたフォルダの中にあるdocsフォルダ内のすべてのファイルを、今回Facebookのカスタマイズページを設置するサーバの、そのコンテンツのルートにアップロード。ここにあるindex.htmlを編集していくことでページを作っていく。

Twitter Bootstrapの使い方とカスタマイズページ作成のコツ

まず今回の制作目的がFacebookページのカスタマイズページであることを再度意識する。

カスタマイズページは、Facebookのiframe アプリによって表示されているiframeページなので、もしその中で、ページを超えたリンクを普通に作成すると、そのページの中で画面遷移してしまう。もし外部サイトへのリンクを設定し、そのサイトがwidth="810px"以上の横幅を持っている場合、そのサイトは中央の810px部分だけが切り取られて表示されてしまうので、リンクには必ずtarget=_"top"を設定する、810pxのページを複数作成し、あえてiframeの中で画面遷移を作っていくという手法も有効ではあるが、ここでは原則として、一つのHTMLでページ内リンクによって推移するナビゲーションを想定してみた。よって構造を、ヘッダナビゲーション、メインコンテンツ、サブコンテンツ1、サブコンテンツ2とした【07】。

【07】

ヘッダナビゲーション

ここで使用したドロップダウンメニューを使用するのも簡単だ。Twitter Bootstrap サイト上部メニューから「Javascript plugins」をクリックし「Javascript for Bootstrap」に入る。「Dropdowns」をクリックして開いたページにあるソースをコピー＆ペーストするだけで使用可能になる。

ドロップダウンメニューを増やしたい場合も簡単。ドロップダウン表示させたいaタグに「data-toggle="dropdown"」を追加し、内包するulリストにプルダウンメニューを入力すると、そのテキストがプルダウン表示される。

また、メニューを見やすくするためにプルダウンメニューに区切り線を入れたい場合は、リスト項目として「＜liclass="divider"＞＜/li＞」を挿入するだけで罫線表示が可能になる。さらにはアイコン付きのリストを表示することも可能。「＜i class="（あらかじめプロットされているclass名）"＞＜/i＞」というように i タグにclassを指定するだけでいい。class名は、サイト上部メニュー「Base CSS」のサブメニュー「Button」の欄を参照し、一覧から対応するclass名をコピー＆ペーストしよう【08】。

【08】

メインコンテンツ

サンプルでは横幅600pxの画像を使用。imgタグにはwidth、heightの指定を入れないのがコツだ。こうすることで、スマートフォンなどで表示した際、その横幅に合わせて縮小表示されるようになる。

ボタンのカスタマイズも容易。白いボタンはaタグに「class="btn btn-large"」を指定。たとえば、もっと目立たせたければ、「class="btn-primary"」を追加すれば青いボタンになる。青いボタンはaタグに「class="btn btn-primary btn-large"」を指定する【09】。

また、aタグに「class="twitter-followbutton"data-show-count="true"」でTwitterアカウントのフォロワー数付きのフォローボタンをつけることも可能。【10】と記述すれば、ツイート画面を簡単に表示することもできる。

【09】

【10】

サブコンテンツ

ここで採用しているグリッド表示。これを一からレスポンシブ対応にするのはなかなか難易度が高い。しかしTwitterBootstrapを使用すれば、そんな段組も簡単に実現できる。

まずは http://twitter.github.com/bootstrap/scaffolding.html#grid System のソースを参照してみよう。非常にシンプルに書かれていることがわかるだろう。3段組みを作りたい場合は、3つのdivタグに「class="span4"」を【11】、4段組みを作りたい場合は、4 つのdiv タグに「class="span3"」【12】を指定するだけでいい。

しかも、中に画像を入れても、カラムサイズに合わせて縮小表示される優れもの。前述同様、width、heightの指定をしないことがコツだ。区切り線 hr も、「class="soften"」を指定するだけで、左右に消えていくラインを入れることができる【13】。

【11】

【12】

【13】

[目次に戻る]

【本記事について】
2012年7月28日発売のweb creators特別号「新世代Web制作テクニック総特集」から、毎週記事をピックアップしてご紹介! スマートフォンサイト特集ではデザインのルールとコーディングのポイント、ソーシャルメディア特集では従来のWebサイトとの違いと有効な活用方法、WordPress特集ではサイト構築に必要な機能と役立つプラグインなど、基本的な知識と必須テクニックを網羅した内容になっています。

※本記事はweb creators特別号『新世代Web制作テクニック総特集』からの転載です。この記事は誌面でも読むことができます。