社長BLOG

HOUOUスマートフォン対応の解説

現在開発中のOpenPNEのスマートフォン対応の方法について解説する。

全体構造

スマートフォンでは、ガラケーと違ってHTML5,CSS,JavaScriptが使える。
これらを駆使して、シンプルで使いやすい構造にする。
通常のOpenPNEでは、MVCの全体をPHP側(symfony)で行っていたが、VとCの要素をWEBクライアント側(JavaScript)に移動させる。symfonyはHTML、JavaScript、テンプレートをブラウザに送り出すことと、APIを通じてモデルを操作することに専念させる。

◆スマートフォンアクション全体図

1−1ブラウザからOpenPNEにリクエスト
http://openpne.jp/member/12 のように、パソコン版と同じURLにアクセスする。
アクセスされたPC版のアクセス内でスマートフォンの判定をし、スマートフォンからアクセスされた場合は、smtを頭につけた、アクションにフォワードする。PCでhomeActionならスマートフォンでsmtHomeAction となる。

1−2ブラウザにHTMLセットをレスポンス
フォワードされた、smtHomeAction内では、WEBクライアントで利用する初期HTML表示、データをコントロールするJavaScript、スマートフォンAPIから返ってきたJSONデータを整形するテンプレートの3つのセットをレンダリングし、
ブラウザに送り返す。

ここまでで、初期のHTMLを表示するリクエストとレスポンスが完了する。

2−1 jQueryでAPIアクセス
次にAJAXを使って、実際のデータを取得するAPIアクセスを行う。
ロードされたJavaScript(jQuery)によって、ブラウザのロードや、特定のボタンにひもづけられてデータ取得用の動作を行う。

スマートフォンAPIを通じてOpenPNEから取得する。この時HTML内に埋め込まれているapiKeyを使ってスマートフォンAPIを動作させる。apiKeyはSNSにログインしている限り、全ページに埋め込まれる。
※apiKeyの利用方法はMediaWikiの方式を参考にした。セキュリティ上の安全性確認はリリースまでに行う。

2−2 JSONデータをレンダリング
スマートフォンAPIからJSON形式でデータを受け取り、テンプレートに流しこんでHTMLをレンダリングする。

自分でつくるには?

OpenPNEコアに含まれるデータベース(モデル)の操作は、HOUOUで作っているAPIを使うことができる。
使い方のリファレンスはhttp://houou.github.com/api.php/ここで書き進めている。全体が完成ししだいOpenPNE公式サイトに設置する。

コアに含まれない独自プラグインのデータにアクセスするためには、/plugins/diary_list.json のような例を参考にしてOpenPNEを独自に拡張することになる。

OpenPNE3.8の正式版がリリースされた4月以降にhttps://github.com/openpne/OpenPNE3/ここから、ソースをフォークし、独自APIを付け足せばよい。

※とってもいいプラグインとAPIができたら、OpenPNEプロジェクトAPIをPullRequestしてください。

OpenPNE�~�蓈���񋟃T�[�r�X�̂��m�点

  • ��K�̓z�X�e�B���O
  • �Z�p�T�|�[�g
  • �J�X�^�}�C�Y
  • OpenPNE Manager
  • ���q���܃T�|�[�g

ページの先頭に戻る