「スマートフォン対応プラグインの作り方」の版間の差分

2012年3月26日 (月) 11:55時点における版

【OpenPNE3.8系対応プラグインについて】

■ スマートフォン対応 OpenPNE3.8系の大きな目玉として、スマートフォン対応するという項目があります。 この章では特に、プラグイン側からのスマートフォン対応方法について、解説していきます。

■ スマートフォン対応の基本仕様

* jsについては基本的にjQueryを使用 (コアにjquery.min.js が同梱されている)
* テンプレートレンダリングは基本的にjQuery Templateを使用(コアにjquery.tmpl.min.jsが同梱されている)
* アクション側での処理は最小限に抑え、データ取得など時間のかかる処理についてはAPIに回す (データ取得など）
  ※もちろんsymfonyアクションを使用したほうが明らかに早いとかいう場合（たとえばデータ１件だけ取得してくる等）はsymfonyアクションを使用しても問題ありません
  (というかここは実装者の考えにもよるかも)

例：タイムラインプラグイン
https://github.com/kashiwasan/opTimelinePlugin

■ 基本プロセス

(GET系) 1. pc_frontendの中にスマホ用のアクション＆テンプレートを記述 　（基本的にはアクションはテンプレートレンダリングの為につかう） 　※とりあえずjQuery template のテンプレートは最初は書かなくていいかも 2. apiの中にデータ・基本情報を取得するためのアクションを記述 3. apiからデータ取得 → jQuery テンプレートでレンダリング するためのJSを記述

(POST系) 1. pc_frontendの中にスマホ用のアクション＆テンプレートを記述 　（基本的にはアクションはテンプレートレンダリング用につかうだけ） 2. apiの中にPOST用アクションを記述 3. apiでポスト送信 → ajax-loading.gif 表示 → 「送信が完了しました」が望ましいかも

■ 詳細な仕様

(アクション系)
* スマホ用アクションはすべてpc_frontendの中に入れる（appsを新たに作らない方式）
* スマホかどうかの判別は、opWebRequest の isSmartPhone()関数を使用
* スマホ用アクションの接頭辞はSmtXXXX（アクション名の接頭辞がSmtXXXXなので、テンプレート名も自然とsmtXXXXSuccess.php等となる）
* pc用のアクションの中にスマホ判別を行い、スマホ用のアクションにreturnする

(アクション記述の例)

26   public function executeIndex(opWebRequest $request)
27   {
28     if ($request->isSmartphone())
29     {
30       return $this->executeSmtIndex($request);
31     }
32   }
33   
34   public function executeSmtIndex(opWebRequest $request)
35   {
36     $this->setLayout('smtLayoutHome');
37
38     return sfView::SUCCESS;
39   }

(レイアウト系) モジュールの中のconfig/view.ymlに

smtXXXXSuccess:
  layout: smtLayoutOOOO

と記述することにより有効化される

■ スマホレイアウトの種類
smtLayoutHome … HOME画面表示用のレイアウト、sf_nav_typeで言うところのdefault系
smtLayoutMember … メンバー画面表示用のレイアウト、sf_nav_typeで言うところのfriend系
smtLayoutGroup …　コミュニティ画面表示用のレイアウト、sf_nav_typeで言うところのcommunity系
smtLayoutSNS … その他の画面表示レイアウト、sf_nav_typeで言うところのdefault系、もしくはnone

* スマホレイアウトの種類により表示が異なる具体的な箇所
* tosakaにあるメンバー画像、メンバーの名前
* tosakaにあるナビゲーション、コミュニティ投稿

　※注意 　smtLayoutMember, smtLayoutGroupを指定した場合、 　アクション側からメンバー情報、コミュニティ情報を指定する必要がある。 　smtLayoutMemberの場合　→　$this->getResponse()->setDisplayMember($this->member); 　smtLayoutCommunityの場合→ $this->getResponse()->setDisplayCommunity($this->community);

(通知系)

OpenPNE3.8系からは新たに「通知センター」というものが実装されました。 これは従来、INFORMATIONボックスに「新着メッセージが１件あります」とか「新着コメントが１件あります」と表示されていた代わりとなるもので、 現在はスマートフォンのみしか対応していませんが、PC版もいずれはINFORMATIONボックスから通知センターに移行する予定です。 通知系は一括で、opNotificationCenter::notify()を使用してください

1. 通知を追加する
opNotificationCenter::notify(Member $from, Member $to, $body, array $options = null)
$option = array ('category' => $category, 'icon_url' => $icon_url);
$category = 'link', 'message, 'other'

2. 通知を消す（既読状態にする）
opNotificationCenter::setRead(Member $target, $notificationId)
 

（APIエントリポイント系）

OpenPNE3.8系からは、同じ内部のAPIを多用するようになります。 APIのエントリポイント名については、予め定義されていて、特にプラグインから提供されるAPIに関してはエントリポイント名は/plugin/から始めるように決められています。。

(参照) https://docs.google.com/a/tejimaya.com/spreadsheet/ccc?key=0AlEj4P9A6aRKdGp5cjFfaER3N1IzdUNhT3RlTmtUdmc&hl=ja#gid=0 ・日記投稿 /plugin/diary_post.json ・日記検索 /plugin/diary_search.json