Facebookのiframeタブ用ページをモジュール化する: 小粋空間

ナビゲーションをスキップする

Top ＞ Facebook ＞ Facebookのiframeタブ用ページをモジュール化する

Facebookのiframeタブ用ページをモジュール化する

Posted at April 4,2011 2:02 AM
Tag：[Facebook, MovableType]

Movable Typeでiframeタブ用ページを管理する場合のモジュール化について紹介します。

１．モジュール化とは

モジュール化とは「部品化」という意味で、テンプレートで共通的に利用できる部分をMovable Typeのテンプレートモジュールとして切り出し、部品化します。

iframeタブを使ったページでは、HTML5のヘッダ・フッタ部分、JavaScriptの読み込みや「fb-root」のdiv要素など、共通化できる部分があるので、本エントリーではそれらをモジュール化してみます。

２．iframeヘッダーモジュール

まず、次のような「iframeヘッダー」というテンプレートモジュールを作成します。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>foo</title>
<mt:GetVar name="head_css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<mt:GetVar name="head_js" />
</head>
<body style="margin:0; padding:0">
  <div id="fb-root"></div>

head要素と「fb-root」のdiv要素までを設定しておきます。なお、iframeタブごとにCSSや利用するJavaScriptが異なる場合があるので、コンテンツとなるテンプレートに設定したCSSやJavaScriptを埋め込めるように、MTGetVarタグを設定しておきます。

…前略…
<mt:GetVar name="head_css" />
…中略…
<mt:GetVar name="head_js" />
…後略…

３．iframeフッターモジュール

次に「iframeフッター」というテンプレートモジュールを作成します。

<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: '<mt:var name="appID">',
        status: true,
        cookie: true,
        xfbml: true
    });
    FB.Canvas.setAutoResize();
};
</script>
</body>
</html>

iframe用のJavaScript読み込みとbody要素／html要素の終了タグを設定しておきます。関数FB.initにはappIDが必要なので、コンテンツとなるテンプレートから呼び出すときにappIDを取得できるようにしておきます。

    FB.init({
        appId: '&lt;mt:var name="appID"&gt;',

４．インデックステンプレートでのモジュールの利用

モジュール化を行うことで、インデックステンプレートには次のように記述するだけですむようになります。

<mt:include module="iframeヘッダー" />
（iframeタブ用コンテンツ） 
<mt:include module="iframeフッター" appID="xxxxxxxxxxxxxxx" />

実践例として、「Facebookページのiframeタブにタブメニューを表示する」に掲載しているインデックステンプレートは、次のようになります。赤色部分がモジュール化による変更箇所です。

<mt:SetVarBlock name="head_css">
<link type="text/css" href="css/jquery-ui.css" rel="stylesheet" />
<link type="text/css" href="css/styles.css" rel="stylesheet" />
</mt:SetVarBlock>
<mt:SetVarBlock name="head_js">
<script src="js/jquery-ui-1.8.11.custom.min.js"></script>
<script>
$(function(){
    $('#tabs').tabs({
        fx: { opacity: 'toggle', duration: 300 }
    });
});
</script>
</mt:SetVarBlock>
<mt:include module="iframeヘッダー" />
 
<div id="tabs">
<mt:Pages tag="@facebook">
  <mt:PagesHeader>
    <ul>
  </mt:PagesHeader>
      <li><a href="#<mt:PageBasename regex_replace="/\.html/","" />"><mt:PageTitle /></a></li>
  <mt:PagesFooter>
    </ul>
  </mt:PagesFooter>
</mt:Pages>
<mt:Pages tag="@facebook">
<div id="<mt:PageBasename regex_replace="/\.html/","" />">
<mt:PageBody />
</div>
</mt:Pages>
  </div>
<mt:include module="iframeフッター" appID="xxxxxxxxxxxxxxx" />

変数head_cssや変数head_jsに設定する場合は、MTIncludeタグで「iframeヘッダー」を呼び出す前に記述します。

<mt:SetVarBlock name="head_css">
<link type="text/css" href="css/jquery-ui.css" rel="stylesheet" />
<link type="text/css" href="css/styles.css" rel="stylesheet" />
</mt:SetVarBlock>
<mt:SetVarBlock name="head_js">
<script src="js/jquery-ui-1.8.11.custom.min.js"></script>
<script>
$(function(){
    $('#tabs').tabs({
        fx: { opacity: 'toggle', duration: 300 }
    });
});
</script>
</mt:SetVarBlock>
<mt:include module="iframeヘッダー" />

また、appIDは「iframeフッター」を呼び出すMTIncludeタグに、appIDモディファイとして設定します。

<mt:include module="iframeフッター" appID="xxxxxxxxxxxxxxx" />

５．ウェブページテンプレートでのモジュールの利用

iframeタブ用のページをウェブページテンプレートを使ってで作成・管理するのであれば、ウェブページテンプレートを次のように設定しておけばさらに効率良く管理できると思います（実際には通常のウェブページと振り分ける必要があるので、これだけではありません）。

<mt:PageBody mteval="1" />

ウェブページの本文には次のように記述します。

<mt:include module="iframeヘッダー" />
（iframeタブ用コンテンツ）
<mt:include module="iframeフッター" appID="xxxxxxxxxxxxxxx" />

Posted by yujiro このページの先頭に戻る

小粋空間 - a cheap joke and a play on words site