「スマートフォン対応プラグインの作り方」の版間の差分
提供:OpenPNE3まとめwiki
Kashiwasan (トーク | 投稿記録) 細 OpenPNE3.8系対応プラグインをスマートフォン対応プラグインの作り方へ移動: 名前変更 |
Kashiwasan (トーク | 投稿記録) 編集の要約なし |
||
8行目: | 8行目: | ||
■ スマートフォン対応の基本仕様 | ■ スマートフォン対応の基本仕様 | ||
* jsについては基本的にjQueryを使用 | * jsについては基本的にjQueryを使用 (コアにjquery.min.js が同梱されている) | ||
* テンプレートレンダリングは基本的にjQuery Templateを使用 | * テンプレートレンダリングは基本的にjQuery Templateを使用(コアにjquery.tmpl.min.jsが同梱されている) | ||
* アクション側での処理は最小限に抑え、データ取得など時間のかかる処理についてはAPIに回す | * アクション側での処理は最小限に抑え、データ取得など時間のかかる処理についてはAPIに回す (データ取得など) | ||
※もちろんsymfonyアクションを使用したほうが明らかに早いとかいう場合(たとえばデータ1件だけ取得してくる等)はsymfonyアクションを使用しても問題ありません | |||
(というかここは実装者の考えにもよるかも) | |||
46行目: | 48行目: | ||
26 public function executeIndex(opWebRequest $request) | 26 public function executeIndex(opWebRequest $request) | ||
27 { | 27 { | ||
28 if ($request-> | 28 if ($request->isSmartphone()) | ||
29 { | 29 { | ||
30 return $this->executeSmtIndex($request); | 30 return $this->executeSmtIndex($request); | ||
55行目: | 57行目: | ||
35 { | 35 { | ||
36 $this->setLayout('smtLayoutHome'); | 36 $this->setLayout('smtLayoutHome'); | ||
37 | 37 | ||
38 | 38 return sfView::SUCCESS; | ||
39 } | |||
2012年3月26日 (月) 11:55時点における版
【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. 通知を追加する 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