[OpenPNE3]ガジェット対応プラグイン作成の入門(あしあと機能のガジェット化)

カテゴリ: OpenPNE3,php,symfony / author: uechoco / 2009年01月30日 03:54:10
この記事を読む時間：7分55秒くらい

　OpenPNE3では、プラグイン式に機能を増やすことができるようになりました。プラグインで機能を増やした時、実際に画面に表示させる方法としては以下のようなものが挙げられます。

  • 新しくページを作成する・・・(OpenPNE公式Webサイトのブログ記事の「OpenPNE3プラグインの作り方#2」が該当します。)
  • テンプレート拡張を利用する・・・(テンプレート拡張、およびそのサンプルは「OpenPNE3プラグインの作り方#4」にあります。)
  • ガジェットとして追加する・・・ホーム画面（マイホームやフレンドホームなど）やサイドバナー領域は、ガジェットと呼ばれる部品を配置することができます。ガジェットの配置は、管理者が管理画面で変更できます。ホーム画面の検索ボックス、インフォメーションボックス、プロフィール写真、フレンドリスト、マイフレンド最新日記、コミュニティ最新書き込みなど、ほとんどの構成要素がガジェット仕様になっています。目ぼしいサンプルが見当たらなかったので、今回作り方を取り上げたいと思います。

　下図が管理画面のガジェットの配置設定画面です。プラグインなどで提供されたガジェットを自由に追加・変更・削除できます。

pc_frontend_home_gadget

　下図はガジェットが実際に表示されているホーム画面。検索ボックス以下のほとんどのコンテンツがガジェットで作られています。今回入門サンプルとして作成する「最新のあしあと」というガジェットも表示されています。

pc_frontend_home_gadget_view

　さて、今回はこのガジェット対応したプラグインを作成しますが、プラグインをゼロから作ることは本質的でない部分を含みますので、既にプラグインとして機能が完成されているものに対してガジェット対応を試みたいと思います。おそらくガジェットの作成方法を学ぶ方法としては最適だと思います。このような経緯から、今回は「あしあと」機能を題材に取り上げました。

※ここからは、ソースコードを解読して仕様を推測していますので、100%正しいプログラムとは限りません。唯一の保証は、私の環境では動作確認ができたということだけです。

あしあと機能は「/ashiato/list」ページを見ると既に実装されていることがわかります。プラグインとしてはopAshiatoPluginとして実装されています。ここに改造を加えていきます。ソースコードの参考にしたのは、自分の最新ブログを表示するblogHomeUserというガジェットです。

#1 gadget.ymlの作成

　/plugins/opAshiatoPlugin/configディレクトリにgadget.ymlを追加します。このファイルは、プラグイン(opAshiatoPlugin)に含まれるすべてのガジェットの情報を記述するためのものです。

PLAIN TEXT
TEXT:
  1. ashiatoHomeList:
  2.   caption:
  3.     ja_JP: "最新のあしあと"
  4.   description:
  5.     ja_JP: "最新のあしあとの一覧を表示します"
  6.   component: [ashiato, ashiatoHomeList]

  • 冒頭のashiatoHomeListはガジェットの名前です。この名前でOpenPNE3のデータベースに登録されます。暇な人はopenpne3のデータベース内のgadgetという名前のテーブルの中身を見てみてください。多くのガジェットが登録されていますが、nameカラムは個々のガジェット名前を指しています。
  • captionはガジェットの表示名称を示しています。ja_JPですので日本語の表示名称です。最初に使われているところを見るとすれば、管理画面でガジェットを追加しようとした時に見る、ガジェットの日本語名でしょう。
  • descriptionはガジェットの説明を示しています。こちらもja_JPですので日本語表示です。同様に管理画面でガジェットを追加するときに見かけます。
  • componentsはガジェットの実行処理方法を指定しています。ガジェットの実装プログラムは、symfonyのコンポーネント機能で実装します。今回の場合はashiatoモジュールのashiatoHomeListコンポーネントがこのガジェットの実装プログラムです。

#2 コンポーネントの記述

　前述の通り、ガジェットの実装プログラムはsymfonyのコンポーネント機能を用いて記述します。コンポーネントは各モジュールのactionsディレクトリの中のcomponents.class.phpに書くという決まりがあるので、/plugins/opAshiatoPlugin/apps/pc_frontend/modules/ashiato/actionsディレクトリにcomponents.class.phpを追加します。

PLAIN TEXT
php:
  1. <?php
  2. /**
  3.  * ashiato components.
  4.  *
  5.  * @package    OpenPNE
  6.  * @subpackage ashiato
  7.  * @author     uechoco
  8.  */
  9. class ashiatoComponents extends sfComponents
  10. {
  11.  
  12.   public function executeAshiatoHomeList()
  13.   {
  14.     $this->id = $this->getRequestParameter('id', $this->getUser()->getMemberId());
  15.     $this->pager = AshiatoPeer::getAshiatoMemberListPager($this->id, 1, 5);
  16.   }
  17. }

  • ashiatoHomeListコンポーネントの実行メソッド名はexecuteAshiatoHomeList()です。execute+先頭大文字のコンポーネント名です。
  • プログラムの内容は、自分のユーザのmember_idを取得し、そのユーザの最新5県の足跡(ページャ付き)を取得します。基本的にはactions.class.phpのパクリです。

#3 コンポーネントのテンプレート

　コンポーネントにもアクションと同じように実行結果を表示するためのテンプレートが対応しています。ashiatoHomeListコンポーネントのテンプレートとして、/plugins/opAshiatoPlugin/apps/pc_frontend/modules/ashiato/templatesディレクトリに_ashiatoHomeList.phpを追加してください。

PLAIN TEXT
php:
  1. <?php
  2. if (count($pager))
  3. {
  4.   include_parts(
  5.     'AshiatoLatestListBox',
  6.     'ashiatoHomeList',
  7.     array(
  8.       'title' => "最新のあしあと",
  9.       'pager' => $pager,
  10.       'moreInfo' => 'ashiato/list'
  11.     )
  12.   );
  13. }
  14. ?>

  • 最初のif文は、あしあとが取れたときだけ表示するというものです。
  • include_parts関数はOpenPNEのヘルパー関数で、別の場所のテンプレートを呼び出します。今回はAshiatoLatestListBoxという名前のテンプレートパーツを呼び出しています。
  • ユーザホーム・フレンドホームなど、2か所以上で似たような出力をする場合は、このテンプレートに直接HTMLを記述するよりはinclude_partsなどで別のテンプレートパーツを呼びだしたほうが開発者にとって効率的だと思います。

#4 テンプレートパーツの記述

　さきほど呼びだそうとしたテンプレートパーツの本体を記述します。/plugins/opAshiatoPlugin/apps/pc_frontend/ディレクトリにtemplates/ディレクトリを追加し、_partsAshiatoLatestListBox.phpファイルを追加します。これが実際のガジェットのHTML出力部分になっています。

PLAIN TEXT
php:
  1. <div id="<?php echo $id ?>" class="dparts homeRecentList">
  2. <div class="parts">
  3.  
  4. <div class="partsHeading">
  5. <h3><?php echo $options['title'] ?></h3>
  6. </div>
  7.  
  8. <div class="block">
  9.  
  10. <table>
  11. <tbody>
  12. <ul class="articleList">
  13.     <?php foreach ($options['pager']->getResults() as $ashiato) : ?>
  14.     <?php $member = $ashiato->getMemberRelatedByMemberIdFrom(); ?>
  15.     <li><?php echo $ashiato->getUpdatedAt(); ?><?php echo link_to($member->getName(), 'member/profile?id=' . $member->getId()); ?></li>
  16.     <?php endforeach; ?>
  17. </ul>
  18.  
  19. <?php if (isset($options['moreInfo'])): ?>
  20. <div class="moreInfo"><ul class="moreInfo"><li>
  21. <?php echo link_to(__('More info'), $options['moreInfo']) ?>
  22. </li></ul></div>
  23. <?php endif; ?>
  24.  
  25. </tbody>
  26. </table>
  27.  
  28. </div>
  29.  
  30. </div></div>

#5 プラグインの再構成

　今回は新しいDBテーブルなどを追加していないので、「./symfony cc」コマンドでキャッシュを初期化するだけでカスタマイズ部分が有効になると思います。もし、DBを新たに追加するような変更をした場合は「./symfony openpne:install」コマンドですべてのデータベースを再構築してください。

#6 管理画面から、あしあとガジェットを登録

　管理画面にログインし、[デザイン設定]-[ガジェット設定]-[ホーム画面ガジェット設定]にて、適当なところにあしあとガジェットを追加してください。

home-gadget-settings
admin-latest-gadget-add
admin-latest-gadget-set

#7 実際に表示されているかどうかを確認する

　SNS本体に戻って、最新のあしあと5件が実際に表示されているかどうかを確認してください。もちろん、あしあとが既にあるという前提です。

ashiato_gadget_view

終わり

　無事にあしあとの一覧が表示されましたでしょうか？おそらく、ガジェット式のプラグインは今後も増えていくと思います。ガジェットの情報がもっとあるの良いのですが・・・。この記事に関して間違っている点や改良点、アドバイスなどがありましたら、コメントなどでお知らせください。


2件のコメント »

  1. ピンバック by ついっぴーね【仮】の使い方｜SNS構築の手嶋屋 — 2009 年 8 月 12 日 @ 13 : 00 : 53

    [...] した。 [OpenPNE3]ガジェット対応プラグイン作成の入門(あしあと機能のガジェット化) : うえちょこ＠ぼろぐ [...]

  2. ピンバック by OpenPNE3をloahostに入れてみた。 - 百姓と、あきんどのつぶやき at　東彼（とうひ）の波佐見というところ — 2011 年 3 月 21 日 @ 12 : 28 : 04

    [...] http://labs.uechoco.com/blog/2009/01/openpne3-gadget-plugin-introduction.html [...]

この投稿へのコメントの RSS フィード。 TrackBack URI

コメントする

Copyright © 2012 うえちょこ＠ぼろぐ. WP Theme created by Web Top.