社長BLOG

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

2012-02-08 (水)
社長BLOG
　手嶋守

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

全体構造

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

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

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

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

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

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

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

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