OpenPNE2スマホ対応の方針
OpnePNE2をスマートフォン向けに対応した際の方針です。
OpenPNE2スマホ対応版を作ったきっかけ - 趣味の延長線の続きです。
ログイン/登録周りについて
先に挙げた、スマートフォン問題の要点は
- ユーザエージェント判別でパソコン扱いとなる
- PC版には携帯メールアドレスでログインできない
この矛盾から来ています。
他にも、ログイン・登録に限らずアクセス全般で、以下等のケースが想定されました。
同様の状況は既に報告されていました。
OpenPNEのスマートフォン対応 | まのたんの実験室
- その他、お知らせメールなどで、携帯アドレスに送信されれば携帯URLに誘導され、PCアドレスの場合はPC版URLに誘導される
総じて言うと
- スマートフォンは、PC版にも携帯版にもアクセスする可能性がある
また、以下も言えます。
つまりストレス無く使用するためには
- スマートフォンでPC版あるいは携帯版にアクセスした場合、適宜振り分ける必要がある
なお、開発構想の当初から、スマートフォンで携帯版にアクセスさせることは考えていませんでした。
スマートフォンで携帯版へのアクセスを許可すると、PCでのアクセスも可能にしてしまうので、セキュリティ上良くない、という理由です。
しかし、OpenPNE2のアクションは多数あるので、スマートフォン版を別途全て作成するのは、手間がかかります。
また、コントローラとバリデーションは、概ねPC版のコピーになる事が予想されました。
同様のファイルが複数存在するのは、管理上あまり良くありません。
そこで以下の方針を取ることにしました。
- スマートフォンでPC版を、支障なく実行できるようにする。
これで、コントローラとバリデーションなど、多くのファイルを共通化できます。
携帯側URLにアクセスした場合は、対応するPCのURLへ振替えるようにしました。
スマートフォン向け画面
PC版を使用して、画面表示だけをスマートフォン向けに変更する方法は、
- CSSによる表示切替
OpenPNE をCSSで簡単にiPhone(スマートフォン)対応化する方法 - LIQUID BLOG
- テンプレートでの振り分け
OpenPNE v2.14 をスマートフォンに対応させる : プログラマに復帰するぞ！
などの報告がありましたが、前者は自由度が低く、後者は振り分け共通化の方法が難しいと感じました。
テンプレートは改修範囲が広くなると予想されたこと。
そして画面作成にスマートフォン向けのフレームワークjQuery Mobileを使いたいとも考えていたため、
テンプレートとCSSは、PC版と完全に独立で作ることにしました。
OpenPNE2では、テンプレートディレクトリは1箇所で決定されています。
- webapp/lib/controller.php
switch ($type) {
case 'page':
$smarty = new OpenPNE_Smarty($GLOBALS['SMARTY']);
$smarty->templates_dir = $module . '/templates';
(以下略)$moduleにはpc/ktai/adminなどが、URLに応じて自動的に設定されます。
- $moduleがpcであり
- スマートフォンの場合
$smarty->templates_dir = 'smart' . '/templates';
をセット。
webapp/modules以下に、smart/templatesというディレクトリを作成して、対応するテンプレートを置けば、
コントローラとバリデーション、その他各種ライブラリは共有しつつ、
テンプレートのみスマートフォン用の物で表示することができる…という設計です。
スマートフォン判断は、携帯用URL→PCへの振替えなど、もともとコントローラ側で必要な機能なのでオブジェクト化。各所で使用します。
