インターネットブラウザってもはやインターネットとは切っても切り離せないアプリケーションになってますよね。
当たり前のように聞こえますが、インターネットブラウザはインターネットが無いと不要のアプリですが、恐らくパソコンで利用する確率の高いアプリケーションはナンバーワンなのだと確信しています。
ビジネスサイドではエクセルやワードが主流ですが、それにも増して何かを調べる時、特定のwebサービスを利用する場合は、専用アプリをインストールする前にインターネットブラウザでサービスのLP（ランディングページ）を閲覧するのも確実なのではないでしょうか？
家庭用ゲーム機などにもインターネットを閲覧する時には、ブラウザ（多分Operaかな・・・？）が起動しますし、もはやインターネットブラウザが無いとインターネットは出来ないのではないかと考えてもおかしくないでしょう。
そんなブラウザで動作するプログラム言語は、Javascriptだけです。
PHPやRubyやPythonなどの言語はサーバーサイド言語なので、正確にはブラウザで動作するわけではなく、サーバーサイド言語で出力したソースコードをブラウザでレンダリングしている事を考えると、レンダリング以降に動作することができるのが
javascriptだけなんです。
これはどのインターネットブラウザでも同じで有ることを考えると、javascriptという言語は、今後インターネットを仕事で行なう際には必須スキルであると考えても言い過ぎではありません。
よく、プログラムに興味があって勉強したい人から「どの言語を学べばいいですか？」と聞かれることがあるんですが、個人的にはHTML,CSS,Javscriptが理解できれば、他の言語も理解しやすくなるので、そのようにオススメしています。
そんなjavascriptはイベント操作というブラウザ言語特有の特性を持っていて、そのイベント操作で行えるキーボード操作について、少し理解出来たことがあったので、備忘録として記事に残しておきます。
キーボードイベント操作はスマホでは使えない・・・?!
iPhoneやAndroidは基本的に物理キーボードが付いておらず、ソフトウェアキーボードという形を取っているものがほとんどです。
でもキーボードイベントって、ソフトウェアキーボードでも動作するのか？という疑問が生まれたので、実際に試してみました。
<html>
<head>
<title>event-check</title>
</head>
<body>
<h1>smartphone-keyboard</h1>
<input type="text" id="test">
<div id="view" style="margin:8px;border:1px solid #ccc;min-height:10px;"></div>
<script>
var test = document.getElementById("test");
test.addEventListener("keydown" , function(e){
document.getElementById("view").textContent += ","+e.keyCode;
});
</script>
</body>
</html>
上記プログラムにスマートフォンでアクセスするとキーボード入力イベントの値を表示するようにしています。
ちなみに、PCでのイベントは以下のようになってました。
結論は、スマホでもちゃんとキーボードイベントを取得できるという事でした。
でも、日本語入力の際の変換モードになっていると、PCでもスマホでも、正確にkeyCodeが取得できなかったので、誤作動しないようにきをつけないといけないということも分かりました。
onkeydownとonkeypressの違い
キーボードを押した時に判定する処理はゲームなどを作る時には必須です。
カーソルキーのどの方向を押したとか、特定のアルファベットキーやスペースバーに対してのイベントなど、用意に想像できますね。
ビジネスサイトでも、入力フォームでenterキーを判定したり、ShiftキーやCommandキーとの組み合わせなど、特定のキーを押した時などのイベントも色々な機能で利用されます。
そもそもkeyイベントって以下のような種類があり、keydownとkeypressの違いがピンと来ません。
onkeydown
onkeyup
onkeypress
どうやら、１回キーボードをクリックした時の処理は、次のような順番で発生するようです。
keydown -> keypress -> keyup
そういえば、似たような件で考えると、マウスイベントのclickとmousedownも順番を考慮して使いますね。
そして、今回気がついた違いとして、２バイト文字入力モードの時に、keydownとkeypressの明確な違いが分かりました。
<html>
<head>
<title>event-check</title>
</head>
<body>
<h1>onkeydown</h1>
<input type="text" id="keydown">
<div id="keydown_view" style="margin:8px;border:1px solid #ccc;min-height:10px;"></div>
<h1>onkeypress</h1>
<input type="text" id="keypress">
<div id="keypress_view" style="margin:8px;border:1px solid #ccc;min-height:10px;"></div>
<script>
var keydown = document.getElementById("keydown");
keydown.addEventListener("keydown" , function(e){
document.getElementById("keydown_view").textContent += ","+e.keyCode;
});
var keypress = document.getElementById("keypress");
keypress.addEventListener("keypress" , function(e){
document.getElementById("keypress_view").textContent += ","+e.keyCode;
});
</script>
</body>
</html>
どうやら、同じキーをタイプしても、取得できるkeyCodeの値が違うようです。
一番最後にenterキーを押してみたところ、これは同じkeycodeということも分かった。
そして、なんと、keypressは、２バイト文字には全く反応しないことも判明しました。
しかし、keypressは先日公開した「tagRegist」というタグ登録の機能で便利に使っています。
入力フォームの際のタグ登録を全角で行った時に、決定をenterボタンにしていたんですが、keydownだと文字列の変換するときのenterキーをクリックした時に判定されてしまい、文字入力で想定した動作ができなかったんですが、keypressにしたところ、変換時には影響されずに変換完了した後でのenterキーに反応してくれたので、想定どおりの動作になりました。
[Javascript] タグ登録機能サンプル「TagRegist
キーイベントについて詳しく知りたい方
意外と奥の深いkeyboardイベントについては、以下のリファレンスサイトに詳しく記述されています。
キーを押しっぱなしにした時に、リピートされる時のイベント発行の順番とか、
イベント発生時に得られる各種情報や、
mac,windows,inuxなどのOSによるkeyイベントの違いなど・・・
エンジニアとしては、これらの動作は抑えておきたいところです。
https://developer.mozilla.org/ja/docs/Web/API/KeyboardEvent
0 件のコメント:
コメントを投稿