個人用ツール

スマートフォン対応プラグインの作り方

提供: OpenPNE3まとめwiki

2013年8月28日 (水) 17:04時点における61.194.39.26 (トーク)による版

(差分) ←前の版 | 最新版 (差分) | 次の版→ (差分)
移動: 案内, 検索

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

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


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

* jsについては基本的にjQueryを使用 (コアにjquery.min.js が同梱されている)
* テンプレートレンダリングは基本的にjQuery Templateを使用(コアにjquery.tmpl.min.jsが同梱されている)
* アクション側での処理は最小限に抑え、データ取得など時間のかかる処理についてはAPIに回す (データ取得など)
  ※もちろんsymfonyアクションを使用したほうが明らかに早いとかいう場合(たとえばデータ1件だけ取得してくる等)は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ボックスに「新着メッセージが1件あります」とか「新着コメントが1件あります」と表示されていた代わりとなるもので、 現在はスマートフォンのみしか対応していませんが、PC版もいずれはINFORMATIONボックスから通知センターに移行する予定です。 通知系は一括で、opNotificationCenter::notify()を使用してください

1. 通知を追加する

$category = 'link';      // 'link', 'message, 'other'の種類がある
$icon_url = 'hogehoge';  // 通知本文の左に表示されるアイコンのURL
$option   = array ('category' => $category, 'icon_url' => $icon_url);
opNotificationCenter::notify(Member $from, Member $to, $body, array $options = null)


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