JavaScriptをOFFにしている環境の時に警告文を出す方法をjQueryでやってみる
このブログって実はJavaScriptだらけなんです。というほど高等なものはなにもありませんが。
しかし、ユーザビリティなどナニくそな作りになっていますので、例えばサイドバーなんて表示が崩壊します。メニューバーなんかも機能しません。ツイートしてください!といいながらツイートさせません。とても不親切極まりありません。
今どき JavaScript切ってる人なんて…
とは、ユーザーに甘えています。
棚に上がりながら言いますが、けっして自分のブログを訪れるひとが皆ひとえにJavaScriptはあたりまえに ONになっているとは限らないのです。
例えば 数年前にけっこう流行った ネットブック。小型がウリで、スペックも制限があったりしたので、ちょっとグリグリ動くサイトやフルFlashサイトなんかだと 回線速度うんぬんの前にガッタガタするものもよくあったりします。
当時のは用意が難しいので楽天の現行品です
また、もう一昔まえのWindows Mobile5.5なんかの古いスマホ(当時はスマホとすら呼ばれてなかった品)なんかだと もう普通のサイトを開くだけでいっぱいいっぱい、 肩で息をゼハゼハしてるくらいなものもありました。
当時はこの本を貪りまくってましたw
そんな過去の私は 堪忍袋の尾が短いこともあり、JavaScriptは常時OFFってました。
私のは引っ越した時点でどっかいったようですけど、今現在でも それらを常用する方々ももちろんいるはずです。皆が皆、MacやPCでネットをみる時代ではなく、iPhone4SやiPad新型なんかでサクサクとネットを見に来ていただいているわけではない、ということを頭の片隅に入れておきましょう。僕。
JavaScriptを切っている人には…
理想は JavaScriptが無くても 機能的には問題なく動作し、JavaScriptが効いている環境ならプラスアルファでグリグリっと動いてくれる設計なら ユーザーを選ばずに見せたいコンテンツをそのまま提供できます。
でも、せっかく覚えたJavaScript。あっちにもこっちにも使いたいし、こんなんできるアピールとかも ちりばめてドヤ顔したいのをガマンとかしたいです。ユーザビリティを無視してでも どうしても使いたいことってありますよね?
ならせめて警告文を出しましょう。
せっかくご来訪いただいた方々に対し、設定が合致していないだけでガチャガチャになったサイトを見せるのは失礼。一言だけでも添えるだけで印象って変わりますし、もしそんな方たちに気に入ってもらえたら
「じゃあ こいつのサイトはONにしてやろう」
とかしてくれるかもしれませんので。
そこまで都合よくいかなくても、何もしないよりはしたほうがよいです。ので実装してみました。jQueryでやります。
JavaScriptをOFFにしている方のみに警告を出す
サンプル
このボックスはJavaScriptが
ONだろうが OFFだろうが
消えることはありません。
ただのボックスです。
↓ 実はこの下には JavaScriptが切れているとコンテンツが出ます。
このボックスはJavaScriptが
OFFになると消えてしまいます。
ちなみにこのブログでは
JavaScriptをONにしないと
面白くもなんともありませんよ。
ぜひともJavaScriptをONにしてください!
[html]
<div class="hoge" id="jsOff">
<p>
このボックスはJavaScriptが<br/>
ONだろうが OFFだろうが<br/>
消えることはありません。<br/>
ただのボックスです。
</p>
</div>
<div class="hoge" id="jsOnDelete">
<p>
このボックスはJavaScriptが<br/>
OFFになると消えてしまいます。<br/>
ちなみにこのブログでは<br/>
JavaScriptをONにしないと<br/>
面白くもなんともありませんよ。<br/>
ぜひともJavaScriptをONにしてください!
</p>
</div>
[/html]
[javascript]
jQuery(document).ready(function(){
jQuery("#jsOnDelete").hide();
});
[/javascript]
はい。だけです。すみません。
jQueryで警告文を消しているだけです。
JavaScriptをOFFにしていると、もちろん hide() が利かなくなるので 警告文が消えません。暇な方は試しにON、OFFを入れてみてください。
ちなみにブラウザごとのJavaScriptのON・OFFの切り替えはコチラがわかり易かったです。
以上でした。(=^・ω・^)ゞ