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

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

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

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

1.モジュール化とは

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

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

2.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" />
…後略…

3.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;',

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

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

<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" />

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

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

<mt:PageBody mteval="1" />

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

<mt:include module="iframeヘッダー" />
(iframeタブ用コンテンツ)
<mt:include module="iframeフッター" appID="xxxxxxxxxxxxxxx" />
関連記事
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)