個人用ツール

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

提供:OpenPNE3まとめwiki

移動先: 案内, 検索
編集の要約なし
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->isSmartPhone())
  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     $this->baseUrl = sfConfig::get('op_base_url');
  37
  38     $form = new sfForm();
  38    return sfView::SUCCESS;
39    $this->token = $form->getCSRFToken();
  39   }
40     return sfView::SUCCESS;
  41   }





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