テンプレート利用ガイド

OpenPNE3.8ではJavaScriptのテンプレートエンジンとしてjQueryTemplateを利用しています。 これを利用することで、APIを通じて受け取ったJSONから簡単にHTMLを加工することができます。

jQuery.tmpl()

jQuery.tmpl()はjQueryのプラグインとして提供されているテンプレートエンジンです。 ※今後、より優れたテンプレートエンジンが登場したら変更する可能性があります。

OpenPNEでの動作フロー

• 

  動作フロー

  1:OpenPNEがHTMLの土台をレンダリングする
  2:JavaScriptからスマートフォンAPIを呼び出す
  3:APIから取得したJSONをテンプレートに流し込む
  4:できあがったHTMLを、jQuery.appned()などで出力する
  

メンバー検索ページのサンプル

この動作を示すために、一番簡単な例としてスマートフォンのメンバー検索ページに注目します。

• 

  4x4アイコン

  検索結果を表示。メンバーの顔写真のアイコンが橫4列ずつ表示される。

ソースコード解説

検索ページを実現する ソースコード一式

◆テンプレート

<script id="friendListTemplate" type="text/x-jquery-tmpl">
  <div class="span3">
    <div class="row_memberimg row"><div class="span3 center"><a href="${profile_url}"><img src="${profile_image}" class="rad10" width="57" height="57" /></a></div></div>
    <div class="row_membername font10 row"><div class="span3 center"><a href="${profile_url}">${name}</a> (${friends_count})</div></div>
  </div>
</script>

4x4の１つ分のマス目を表現するテンプレートです。4列で自動的に折り返すようになっているので、 段落切り替えのためのテーブルは必要なく、シンプルな構造になっています。

◆JavaScript

<script type="text/javascript">
$(function(){
  $.getJSON( openpne.apiBase + 'member/search.json?apiKey=' + openpne.apiKey, function(json) {
    $result = $('#friendListTemplate').tmpl(json.data);
    $('#memberFriendList').html($result);
    $('#memberFriendList').show();
    $('#memberFriendListLoading').hide();
  });
  $('#memberFriendSearch').keypress(function(){
    $('#memberFriendListLoading').show();
    $('#memberFriendList').hide();
    $('#memberFriendList').empty();
  });
  $('#memberFriendSearch').blur(function(){
    var keyword = $('#memberFriendSearch').val();
    var requestData = { keyword: keyword, apiKey: openpne.apiKey };
    $.getJSON( openpne.apiBase + 'member/search.json', requestData, function(json) {
      $result = $('#friendListTemplate').tmpl(json.data);
      $('#memberFriendList').html($result);
      $('#memberFriendList').show();
      $('#memberFriendListLoading').hide();
    });
  });
});
</script>

検索フォームの文字列処理と、検索結果を表示するコントロール部分はJavaScriptで書かれています。

◆HTML

<hr class="toumei" />
<div class="row">
  <div class="gadget_header span12"><?php echo __('Search Members') ?></div>
</div>
<hr class="toumei" />
<div class="row" id="memberFriendSearchBox">
<div class="input-prepend span12">
<span class="add-on"><i class="icon-search"></i></span>
<input type="text" id="memberFriendSearch" class="realtime-searchbox" value="" />
</div>
</div>
<div class="row" id="memberFriendList">
</div>
<div class="row" id="memberFriendListLoading" style="margin-left: 0; text-align: center;">
<?php echo op_image_tag('ajax-loader.gif') ?>
</div>

検索フォームや見出しなどのHTMLはあらかじめHTMLでレンダリングされています。