画面サイズ取得について

アクセスされた際の端末の画面サイズ取得方法について教えてください。

私の調べた限り、携帯以外では直接サイズを取得できる環境変数もないようなので、その他の方法としてJavascriptを使用して画面のサイズを取得するのが一番かなと思いました。

そこで色々検索したところ、perlで使用された変数をJavascriptで使用するといった内容のページはいくつか見つかったのですが、逆に、Javascriptで取得した変数をperlで使用する方法がなかなか見つかりませんでした。実際そのような事が出来るのかも分かりません。。。
locationで変数を送ればとも思いましたが、今回の場合訳があってlocationが使えないので、その他の方法で何かないかと…。

どなたかそのような方法について分かる方は教えていただけないでしょうか。
出来れば詳しく書き方なども教えていただけるとありがたいです。

よろしくお願いします。

No.5 ベストアンサー 回答者： LancerVII 回答日時： 2012/03/22 11:32

こんにちは。

No2の方法になります。

画面を表示後、非同期(裏側で)取得した画面サイズをサーバ側にpostします。
サーバ側で値を受け取ったあとその受け取った値に基づいて処理をして結果を返します。
その結果を画面で受け取って画面書き換え等の処理を実施します。

==== 動作サンプル
http://hppg.moe.hm/okwave/qa/q7373761/

上記ソースを見てもらうと
<div id="result"></div>
というエリアのみですが画面サイズ等表示されていると思います。

これは画面表示後にdisplay.phpに送信し、display.phpでHTMLを出力します。
それを<div id="result"></div>に反映させています。
disoplay.phpでは送られてきた値を使って自由にHTMLを出力することが可能です。

※例はPHPですがperlでも同じです。(サーバ側は何でも良い)

この回答へのお礼

ありがとうございます。

これまで教えていただいた事と教えていただいたサイトを参考にして、自分なりに変更を加えたところ、なんとか希望通りの動きが出来るようになりました！
若干まだ小変更は必要ですが、だいたい出来上がりうまくいけそうです。

とても丁寧に、詳しく教えていただき本当にありがとうございました。
今回がきっかけでjavascriptについて調べる事になり、javascriptでは色々奥が深く利用できる方法も多いので、今後色々調べて色んなところで利用出来ればと思います。

この度は本当にありがとうございました。
まだまだ未熟な為、今後まだ質問させていただいた際はよろしくお願いします。

ありがとうございました。

お礼日時：2012/03/22 20:13

No.4 回答者： taloo 回答日時： 2012/03/21 16:00

本来のHTML（というか理想）は、どんな画面でも問題なく表示できるように作るべきですし、

そういう仕組みを備えています。

たとえばCSSのfloat:leftとしておけば、一定サイズ以上であれば横に並び、一定以下であれば縦に並ぶようになります。
JavaScriptを使えば、DOMを使用してドキュメントそのものを書き換えてしまうこともできます。
（これはこれで本来のHTML（＝JavaScript未使用環境で閲覧できないのはダメ）ではないのですが。）

いずれにしても、サーバーサイドの技術ではどうしようもありません。


改めて書く必要もないと思いますが、
携帯電話に限れば、環境変数（ブラウザ種別）から携帯電話の機種が推測できますから、
サーバーサイドでも、ウインドウサイズやディスプレイサイズ（携帯電話ではイコールになります）を判断できます。
（ブラウザだけを再インストールしたり、アップデートできない機種に限る。現行のすべての携帯電話にそういう機能はないと思います。）

アンドロイドスマホなどはブラウザだけのアップデートができない（または制限がある）ので、ある程度推測ができると思いますが、
ソフトウェア環境とハードウェア環境がイコールでないPCでは無理ですね。

この回答への補足

回答ありがとうございます。

一番ベストなのは携帯のように環境変数から判断出来るのがベストですが、PCやスマホの場合そのような環境変数がないようで、JavaScriptでの対応を検討してみました。
ただ、JavaScriptとcgiの連携がよく分からなかったので、今回質問させていただいた次第です。

スマホとPCについて、ユーザーエージェントで判別をすればサイズの対応表でも自作して…と思いましたが、ユーザーエージェントの偽装なんて簡単ですのでスマホとPCの判別も難しいと思ってそれも意味ないかと。。。

私が無知な分、当初は簡単に考えておりましたが、なかなか難しい方法だったのだと実感してます。

補足日時：2012/03/21 20:40

No.3 回答者： LancerVII 回答日時： 2012/03/21 13:48

こんにちは。

お役に立てなくて申し訳ございませんが知っている限りではJavaScript以外での取得方法はわかりません。

JavaScriptで値を取得する＝一度ブラウザにJavaScriptをロードさせる
ということになりますので、どうしても1アクション入ります。

どういった用途かはわかりませんが、非同期で画面サイズを送信して、返ってきた値でページを構成するなりすれば、見た目的には1アクション挟んだようには見えないと思います。

この回答への補足

ありがとうございます。

お役に立てないなんてとんでもございません。
とても丁寧に回答いただき、感謝いたしております。

非同期で…とありましたが、こちらは以前教えていただきましたサイトのNo.2の内容でしょうか。
私はちょっとやった事がない方法だったのでまだ詳しくは理解出来ていないのですが…。

もしそちらと違う方法でしたら、非同期の内容について教えていただけないでしょうか。

質問ばかりお手数をおかけして申し訳ございませんが、よろしくお願いします。

補足日時：2012/03/21 20:27

No.2 回答者： LancerVII 回答日時： 2012/03/21 06:44

こんにちは。

JavaScriptを利用した場合はどうしても画面表示後になりますので1アクションはさむ必要があります。


対象のcgiを呼ぶ前に画面サイズを取得しておくか、画面サイズを取得する画面を挟んであげるしか無いと思います。

この回答へのお礼

ありがとうございます。

やはり、JavaScriptを利用した方法では難しいみたいですね…。
教えていただいたサイトの内容を参考に変更を加えてなんとか出来ないかと色々と試行錯誤しておりますが、根本的に画面が表示されない限り今回の方法では難しいんですね。

何か他に方法はご存知ないでしょうか？
JavaScript以外の方法でも構わないので、もし参考になる方法等ご存知でしたらよろしくお願いいたします。

よろしくお願いいたします。

お礼日時：2012/03/21 13:18

No.1 回答者： LancerVII 回答日時： 2012/03/20 19:55

こんにちは。

ちょっと前に私が回答した内容ですがいかがでしょうか。

http://oshiete.goo.ne.jp/qa/7278429.html
No.4の方法でサーバ側に画面サイズを渡しています。

わからないことがあったら補足してください。

この回答への補足

回答ありがとうございます。

教えていただきましたサイトを見させていただきました。
PHPとの連携でしたが、基本的に同じ内容なので1つずつ見させていただき、テストさせていただきましたが、まだ私の希望しているのとは少し違っております。。。
元々私が希望している方法が実際に出来る事なのかも不明ですが、出来るだけ詳細に説明させていただきますので、もし可能であればご教授いただけないでしょうか。

スクリプトを詳しく書くと長くなるので、簡単に分かりやすく書かせていただきます。

--test.cgi--
if($cg{'id'}==123){
　　　(1)----------下の$wは取得したい画面の横のサイズです。
　　　if($w<1000){
　　　　　$top=1;
　　　}else{
　　　　　$top=2;
　　　}
}else{
　　　if($cg{'passwd'} eq 'xyz'){
　　　　　$top=3;
　　　}else{
　　　　　$top=4;
　　　}
}

上記のスクリプトにhttp://○○○.jp/test.cgi?id=123&passwd=abcでアクセスした際に(1)のところで画面のサイズを取得して、そのサイズで判別したいと思ってます。
取得の方法として環境変数で出来れば簡単なのでしょうが、出来ないみたいなのでjavascriptで取得して判別するしかないのかなと考えておりました。

私の希望する内容の説明がうまく伝わるといいのですが、よろしくお願いいたします。

補足日時：2012/03/21 00:18