リダイレクト スマートフォン編
スマートフォンのサイトを構築する際にPCサイトにアクセスした際に自動的にスマートフォンサイトに遷移させる必要がある。いくつか方法があるので、まとめた。
主な方法としては、
- .htaccessを使う
- javascriptを使う
- サーバサイド系の言語で処理する(PHP,Rubyなど)
1,2を扱ったのでそれらを作業記録として残しておく。
.htaccessを使う
参考
下の例でRewriteEngine On-->redirect機能を使うことを宣言。これを利用するにはhttpd.confをいじる必要がある。ちなみにCentOSはデフォルトでこの機能が使える。
RewriteCond {HTTP_HOST} ^google.com
RewriteRule ^(.*)$ http://www.google.com/$1 [R=301,L]
#例えばwwwつきのドメインと、そうでないドメインどちらに統一するか？など指定したい時に使う
上の例はgoogle.comをwww.google.comに統一している。よく知らないけどSEO的に効果はあるらしい。
RewriteCond {HTTP_REQUEST} ^.*/index.html
RewriteRule ^(.*)index.html$ http://www.google.com/$1 [R=301,L]
#上はindex.htmlにアクセスした場合にgoogle.comに遷移させる。
#これをドキュメントルートに保存する。rails使ってるならpublicに置くし、普通なら/var/www/とかだろうか。
肝心のスマートフォンのリダイレクトだが、下記のように書く
RewriteCond %{HTTP_USER_AGENT} iPhone
RewriteRule ^.*$ ドメイン [R]
RewriteCond %{HTTP_USER_AGENT} iPad
RewriteRule ^.*$ ドメイン [R]
RewriteCond %{HTTP_USER_AGENT} iPod
RewriteRule ^.*$ ドメイン [R]
RewriteCond %{HTTP_USER_AGENT} Android
RewriteRule ^.*$ ドメイン [R]
とはいえ、実際自分も試してみたけどどうも上手く動かなかったので、結局ruby側で動かした。
あんまりなんでもかんでも.htaccessで処理するのは良くないらしい。
javascriptで動かす
サーバサイド側の言語で処理するのは、PHPとかだと拡張子を.phpとかにする必要がある。
だからjavascriptでほいっとやるのも手ではある。
(基本的にパクリで)すまんな
<script type="text/javascript">
var agent = navigator.userAgent;
if(agent.indexOf('Linux; U; Android ') != -1 ||
agent.indexOf('iPhone; U') != -1 ||
agent.indexOf('iPod; U') != -1||
agent.indexOf('iPad; U') != -1){
location.href = 'ディレクトリ or ドメイン';
}
</script>AndroidとかiPhoneとかはこれで飛ぶことが出来る。
色々端末が増えているので、自信が無かったら、
window.alertとかで逐一ユーザーエージェントをチェックしてやる必要があるかもしれない。
おまけ
スマートフォンのページにIEで閲覧しようとすると基本的に見れない。
したがって、これもリダイレクトしてやる必要がある。
<script type="text/javascript"> <!-- var agent = navigator.userAgent; if(agent.indexOf("MSIE") != -1){ location.href = 'http://www.nabetsuneshine.com';//ここには飛びたいURL window.alert("なんでや！IE関係ないやろ！");//ここにお詫びの言葉「IEサポートしてません」とか。 } --> </script>
こういうのをhtmlファイルに書いてやればいい。
indexOfは、引数に取った文字列が存在したら、その文字がどこにあったかを教えてくれる。
無かった場合は-1を返すのでif文の中でユーザーエージェントを取得したものの中に
"MSIE"(IEのユーザーエージェント)があったらリンク先に飛ぶということを指定してやる。
参考
なんでや！阪神関係ないやろ！
すまんな
jquery mobileの数値のみ入力フォーム
jquery mobileでフォームに数値のみ入力したい場合
<li>number:<input type="number" name="number" id="number" step="5"></li>
input type ="number"にすればいい。
WEBアプリなどで見ると、自動的にデフォルトの入力が数字にしてくれる。
フォームに数値を入力することが多い場合は、これを指定しているか否かでは
エンドユーザの使用感に大きく関わってくる。
これは基本的に最新バージョンのjquery mobileをインクルードしていれば問題無いけど
前のバージョンだと出来ない場合がある。
したがってちゃんと最新バージョンを呼んできましょう。
jquery mobileのテンプレ
<html> <head> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" /> <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script> </head> <body> <!--page--> <div datarole="page"> <!--header--> <div data-role="header"> <h1>エリスグリ<h1> </div><!--header--> <!--pagecontent--> <div data-role="content"> <p>page content goes here</p> </div><!--pagecontent--> <div data-role="footer"> <h4>page content<h4> </div> </div> <!--page--> </body> </html>
sshのセッションが切れてもプロセスが殺されない
自分が契約しているVPSで、sshがたまに無線の不安定などで
セッションが切れる。
セッションが切れるだけならばまだ良いのだが、
再ログインした際にsshdのプロセスがkillされていないことが多い。
このVPSは仮想ターミナル(screenとか)の数に制限があって、
その数は
$sudo cat /proc/user_beancounters
held maxheld
~~~~~~~
numpty 3 6 8 8 8こういうパラメータが見ることが出来て、heldの数が8になると、セッションを張れなくなったり、screenが出来なくなったりする。
その時は、
$ps ausf| grep (user-name) $kill pid
とかでシコシコプロセスを殺していたが、
流石に面倒くさいので、sshd_configに何か書くことにした。
ClientAliveInterval 3600
を追加。
30分操作しないとタイムアウトするように設定した。
これで良いのか分からんけど、多分プロセスが粛清されることを祈る。
セレクタで全ての子要素を選択する(jQuery)
id:Aに対して以下のように書く
$("#A").contents().remove();
$("#A > *").remove();
JQuery mobile-Loading Error Page-
JQuery mobileのページ作ってたら、Loading Error Pageって出る。
ググッてみたらヒットした。どうやら複数症状があるらしい。
↑こんな感じ。
WEB上には、
"HAHAHA,ローカルじゃそうやって出るけど、ちゃんとHTTPでは動くから安心しな!!"
http://www.doeswhat.com/2011/03/08/jquery-mobile-error-loading-page/
え、自分、Httpで見てるんですけど,,,,,
