前回のSafariの:beforeと属性セレクタの組み合わせのバグは、iPadのSafariだと発生しない…、むむむ。
Appleさんのバグチェック体制はどーなってんだー。
とりあえず、アップル - OS X - フィードバックに送っといたぜ。
で、今回は今流行りというかもう定番化したというか、もはやJavaScriptそのものというか、そんな感じのjQueryをやってみようかと思います。
簡単にいうと、jQueryとは「ブラウザ毎に異なるJavaScriptの挙動や仕様を、CSS的なオブジェクト指定記述で統一したもの」のようです。
あと、Ajaxやアニメーション他、いろいろ便利機能付いてます。
JavaScriptを書く時にはほとんど必ず通る「IEとそれ以外で処理を分ける記述」を、書く必要がなくなるというステキライブラリなのです。 JavaScriptがもともと持っているDOMの指定方法は呆れるほど冗長なので、CSS方式指定は記述コードも減って見やすくなって素晴らしいのです。
jQuery入門については、良い記事がゴロゴロあるので、特に書かない。
やはりブラウザ上のFlashがスマートフォン関係では動かないという事で、うちのサイトのインタラクティブフィクションとか、JavaScriptでできそうなんで、練習がてら作ってみようかなと。
ページ全体でキーを受けとるには、$(document).keydown(…てな感じに、documentのkeydownイベントを仕込めばいいっぽい。
ちなみに、documentじゃなくてwindowに仕込むと、動くブラウザと動かないブラウザがあるみたい。
で、受け付けたキーを$("#caret").before(…という形で、キャレット位置の前にくっ付けていくという方式で、CUIっぽいインタフェースのできあがり。
…はたと気づいたわけだけど、スマフォはフツーキーボードないから、キー入力も何もないじゃん。
ゲゲッ、いきなり頓挫!!!
しばらく考えたら、スマフォは入力フィールドにフォーカスしてたらバーチャルキーボード出るじゃん、その時はキー入力取れるんじゃないの?
というわけで、ダミーの入力フィールドを作って、ついでにコンソール部分をタップしたら、入力フィールドにフォーカスするようにした。
そんでもって、別に入力フィールドに文字を入力したいわけじゃないので、keydownイベントの返り値にfalseを送ってやって、キーイベントをストップしてやった。
とまぁ、こんな感じの紆余曲折を経てできあがったのが、以下。
command>_
うーん、入力フィールドが邪魔だけど、CSSのdisplay:noneで消したらフォーカスできねぇ。
このへんは課題として残しておく。
今日はここまで。