スマートフォン対応についてのメモスマートフォン対応について、
調べている。
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」に分けなければいけなかったのではないだろうか？
という気もしてきた。
この辺り、対応ブラウザをどこまでにするか、と同じで、
どこまでやるか、って話なのだろうか？
実機が、実機が…、
どっかテスト用にレンタルさせてくれないかな？
漫画喫茶とかに、スマフォ置いてないかな？
調べている。
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」に分けなければいけなかったのではないだろうか？
という気もしてきた。
この辺り、対応ブラウザをどこまでにするか、と同じで、
どこまでやるか、って話なのだろうか？
実機が、実機が…、
どっかテスト用にレンタルさせてくれないかな？
漫画喫茶とかに、スマフォ置いてないかな？