スマートフォン対応

9:携帯

 状態:  閲覧数:675  投稿日:2011-09-14  更新日:
スマートフォン対応についてのメモスマートフォン対応について、
調べている。

XOOPSサイトについては、
スマートフォン専用サイト作成は難しそう、、
レスポンシブWebデザインにするしかないと思っていたら、
下記のようなサイトを発見。
▽iPhoneとアンドロイド携帯に最適化する - XOOPS Cube Legacy カスタマイズ 文系出張所
  http://xoops.kudok.com/branchoffice/index.php?iPhone%E3%81%A8%E3%82%A2%E3%83%B3%E3%83%89%E3%83%AD%E3%82%A4%E3%83%89%E6%90%BA%E5%B8%AF%E3%81%AB%E6%9C%80%E9%81%A9%E5%8C%96%E3%81%99%E3%82%8B


どういう仕組みか分からないのだが、
>プリロード(ryusSetIphoneTheme.class.php)を利用し、iPhoneとPCでテーマ切り替え
って、ことはユーザエージェントで切り替えているのだろうか?
▽osc2010fukuoka-xoops9.pdf (application/pdf オブジェクト)
  http://www.ospn.jp/osc2010-fukuoka/pdf/osc2010fukuoka-xoops9.pdf


そう言えば、携帯への振り分けは、
どういう仕組みになっているのだろうか?

これまで気にしたことなかったなあ…。



とりあえず、眺めていても分からないので、
ダウンロードしてみることにする。

▽XOOPS CubeのiPhone 用テーマを作ってみました! ダウンロード公開中♪ - XOOPS専門-株式会社RYUS
  http://ryus.co.jp/modules/d3blog/details.php?bid=307



コードは何かいてるか分かんないけど、
設置は簡単そう。



エミュレータを立ち上げ、
まずは、導入前の状態を確認。


と思ったら、Androidエミュレータしか、準備出来てない?

まあ、いいや、先に確認してみるも、
PC仕様だと見難いね。

もちろん、携帯画面が表示されるわけでもないわけか…。


ここで、safariを導入して、ユーザエージェントをiphoneへ偽装。
▽スマートフォン/調べた内容メモ | DesignStyle
  http://design.e1blue.net/blog/details.php?bid=84#latterhalf84


で、早速、「ryusSetIphoneTheme.class.php」+「iPhoneテーマ」を導入したところ、
無事、iPhoneエミュレータで表示された。

念のため、Androidエミュレータで確認するも、当然、こちらでは、PC表示のままだ。



ちなみに、初めて、iPhoneエミュレータで変換されたサイトを確認した際は、
そのあまりの出来映えに、ちょっと感動したよ。

オープンソース万歳! とか思ったよ。


で、折角なので、Androidでも表示させてみることにする。


実は、以前、モバイル導入しようとした際、もの凄くしんどくて、
ちょっとしたトラウマだったのだが、
スマフォテーマ導入は、超簡単だった。

最も、モバイル導入の際、テーマ下テンプレートを結構、いじり倒したので、
そこら辺の勘の経験値によるものかもしれないが…。



▽2011.9.15.追記
「iPhone 用テーマ」オレンジと青で、何か影の濃さが違うと思ったら、
用意されていた画像自体のグラデーション具合の差に因るものだった。
てっきり、CSS3で何かグラデ調整とかしてるのかと思って、探し回ったよ。

「iPhone 用テーマ」オレンジがメインで、青は、参考みたい。
青の画像を、上書きしても、ちょっと何か物足らない。

本格的にやっていくんだったら、
iphone/style.css
258行目付近
// under this line not modified //
// todo!
以下も触っていった方がよいと思われ


◆文字化け対策
theme.htmlを日本語表記に変更したら、文字化け発生。
utf8で作成している場合は、シフトjisから要修正


◆エミュレータで、PCからスマートフォン表示も戻せなくなったら
恐らくセッションの問題。
下記URLを指定
▽iPhone(兼Android)表示
/?iphone_to_pc=iphone

▽PC表示
/?iphone_to_pc=pc


◆CSS調整は、FF FireBugが便利
SafariのWebインスペクタを初めて使ってみたけど、
細かいところは、やっぱり、FF FireBugの方が断然便利


◆「iPhone 用テーマ」のテーマ下テンプレート
予め用意されている「iPhone 用テーマ」のテーマ下テンプレートは、あくまで参考。
リンク先の用に、個別にliクラスを追加する際は、
デフォルトに用意されている「テーマ下テンプレート」だけでは、物足りない。

例えば、bulletinの
ulクラス「bulletin_block_category_new」内のliにクラス指定する際は、
xoops_trust_path/modules/bulletin/templates/block_category_new.htmlを、
themes/iphone/templates/bulletin/block_category_new.htmlへ配置して、
そこで、ulクラス「bulletin_block_category_new」内のliにクラスを指定。

凝ったことをしようとする度、段々メンドクサクなるのは避けられない…


◆gnaviD3をカスタマイズしてるとことかのレイアウト崩れが若干発生
ネット情報によれば、エミュレータには、改行等誤差があるため、
最終的には、実機で確認、て書いてあるんだけど、実記ないんだよね。

もの凄くレイアウトが崩れているわけでもなく、
かと言って、許容できるかと言えば、
ギリギリ許容できないか、やっぱちょっとなあ、
って感じの、微妙な表示が悩ましい


◆今後の展開について
どうしようか?
・エミュレータで細かい微調整を継続
・どうせまだスマートフォンからのアクセスはそれ程多くないのだから、ちょっと様子見


う~ん、悩ましい…



◆エミュレータの違い? それともスマートフォンの違い?
何か、いくらやっても、微妙な表示の食い違いが解消できない、
って思ってたら、
「iPhone エミュレータ」と「Androidエミュレータ」で表示が若干違うのね。

例:h1の縦幅が異なるため、line-heightで、両方、真ん中に持ってくることは、絶対にムリ。


で、問題なのは、これがエミュレータ上の問題かってこと。

「iPhone エミュレータ」と「Androidエミュレータ」で、表示に差が出ているのか、
「iPhone」と「Android」で、表示に差があるのか、
実機がないと、これ以上は、ムリ(←さっきからこればっかり)


そもそも、ユーザエージェントで切り分ける際、深く考えずに、
「PC」と「携帯」と「スマートフォン」に分けてるけど、
本当は、「PC」と「携帯」と「iPhone」と「Android」に分けなければいけなかったのではないだろうか?
という気もしてきた。


この辺り、対応ブラウザをどこまでにするか、と同じで、
どこまでやるか、って話なのだろうか?


実機が、実機が…、

どっかテスト用にレンタルさせてくれないかな?


漫画喫茶とかに、スマフォ置いてないかな?

Twitter検索結果。「スマートフォン対応」に関する最新ツイート

中村なむおおお @nkmr___42

携帯テンプレ/2つのサイトで、挙動が異なるため、忘れないうちにメモ