上下キーでスクロールバーが動いてしまう
問題
"ul""li"のリストにスクロールバーをつけ、上下Keyでリスト項目の移動をしようとしたが、bodyスクロールバーが動いてしまう問題の調査。
原因
"body"全体でKey検知を行っていたため。
はじめ、上下Keyのスクロールバーが動いてしまうのは、ブラウザのデフォルト機能のため、それを抑止するために、
event.preventDefault()
をしかければいいかと考えたが、これをやってしまうと、"ul"のスクロールもできなくなってしまう。
そのため、event.preventDefault()案は却下。
対策①
・ keyイベントの検知を""ul""にフォーカスがあたった時だけにする
"ul"をフォーカス対象をにする(tabindexを付加する)
"ul"にkeypressイベントをひもづける
・ "li"にtabindexをいれ、上下Key検知でsetFocus()をCall。"ul"内スクロール位置を調整。
対策①結果
"ul"内位置調整はできたが、TabKey押下時に"li"すべてにフォーカスがあたってしまう。
対策②
・ 対策①と同じで、tabindexは削除
・"ul"内スクロール位置を自動調整する。※2018/01/20ではうまくいかない。
See the Pen 上下キーとスクロールバー by satsuki mori (@satsuki) on CodePen.
ブラウザのデフォルト機能の抑止
上下Keyでスクロールバーが動いてしまうのは、ブラウザのデフォルトの機能。
そこで、
- event.preventDefault();
- return false
をひもづけてみた。
event.preventDefault()で、スクロールバーは動かなくなった。
return false;はうごいてしまう。return false;は以降のバブリング処理を無効かするもので、ブラウザのデフォルトの機能を無効かするものではない。
参考サイト
iwb.jp
参考プログラム
See the Pen 上下キーとスクロールバー by satsuki mori (@satsuki) on CodePen.
フォーカスとkeypressイベント
document.keypressでイベントを紐づけた場合、対象要素にフォーカスが当たった状態でkeyを押下しないとイベントは発生しない。
タグはフォーカスがあたらないため、あらかじめ
をつけることで、フォーカス対象とすること。
フォーカスとスクロールバーについて
スクロールバーは、"ul"をフォーカスをあてた状態で上下Keyを押下すると、"ul"のスクロールバーのみが動き、外側のスクロールバーには影響しない。しかし、"ul"のフォーカスが最後まで行ってしまうと、"body"のスクロールバーが動き出す。
DOMアクセス(getElementsByTagName)
DOMアクセス(getElementsByTagName())であらためて
- タグでDOMアクセスするサンプルをくみました。
getElementById()とにたような使い方だろうと思っていましたが、ちがいました。
とれるのは、HTMLCollectionオブジェクトのため、リストでとれます。
そのリストにアクセスするには、**.item(0),**.item(1)とアクセスする必要がありました。。
初心者!?また、検索対処の要素を、親の要素からたどるときは、タグ名から検索しなくても階層がきまっていれば、わざわざgetElementsByTagName()をよばなくても、childrenからアクセスすることができます。
See the Pen DOMアクセス(ul li)-getElementsByTagName by satsuki mori (@satsuki) on CodePen.
フォーカス移動とKey検知
フォーカス移動
タブを押下すると、フォーカスが移動します。 タグに"tabindex"をいれることで、フォーカス移動順を制御することができます。
通常フォーカス対象とならないdivタグにも、tabKey押下でフォーカスをあてることが可能になります。 また、別にdivタグで.focus()をCallすれば、フォーカスを充てることが可能です。
Key検知
tab以外のKeyで、フォーカスをあてたいとすると、keydownイベントを登録する必要があります。
key検知は、通常は画面全体に対して登録することが多いですが、 もしフォーカスが当たっている要素があるときのみKey押下を検知したいのであれば、 その要素を対象に"keydown"イベントを登録するとよいです。
Key検知でフォーカス移動
矢印キーでフォーカス移動させたい時は、画面全体にkeydownイベントを登録し、 個々の要素にfocusとblurイベントをひもづけます。 フォーカス移動をさせたいid名を対象に、リストで制御してみました。 tabキー押下でのフォーカス移動は、tabindex属性でブラウザまかせです。
See the Pen Key検知とフォーカス移動 by satsuki mori (@satsuki) on CodePen.
課題 tabindex属性があるものを対象に、リストを動的に作成したい checkboxの大きさをかえたい
正規表現
正規表現は複雑になると、？になります。
便利サイトないかな～と探してみました。
Regexper https://jex.im/regulex/ →図で結果が出力されるため、わかりやすいです。
Regex Test Drive | 正規表現オンラインテストサイト →自分で作成した正規表現のチェックTestで使えそうです。
本でその場では理解しても、すぐに忘れてしまいます。。 こういうサイトがあると便利ですね。
node.jsのインストール(for windows)
node.jsのインストール
以下のサイトを参考に、簡単にできました。 参考サイト Node.js / npmをインストールする（for Windows） - Qiita
polymer環境の構築
現在、構築中
node.jsのインストール
いまさら聞けない Polymer 入門 - Polyfills は Web Components の夢をみるか - Librabuch
node.jsやらnpmやら
フレームワークを調べるようになって、よくでてくるﾜｰﾄﾞを調べてみました。
* node.js
→当初javascriptはあくまでブラウザで表示するために生まれたものでした。しかし、「Javascript 最高！ブラウザで使うだけではもったいない！汎用言語にしよう！」ということでした。しかし、言語の#includeのように、他のファイルを読み込むことができませんでした。そこで、 他の言語のように、いろいろ仕様を策定していったのが、"CommonJS"。仕様を実現するためのライブラリの一つとしてうまれたのが、"node.js"。こうして、rubyのように実行できるようになりました。
$ node helloworld.js
そして、node.jsでかかれた便利ツールたちが、"npm"というパッケージ管理ツール内に集められ、コマンドラインからそれら便利ツールを使えるようになりました。
- bower
→クライアントサイド用のパッケージ管理ツール(node.jsではなく、ブラウザで動く昔ながらの Javascript のためのパッケージ管理ツール。しかし、bower自体がnode.jsで作られている⇒node.jsを動かすためにはnpmが必要。ということで、bowerを動かすためにはnpmをインストールする必要があります。)
- npm
→サーバーサイド用 のパッケージ管理ツール
- browserify
→node.js として書かれた Javascript はそのままではブラウザで動きません。browserify を使うと、まるでC言語を機械語にコンパイルするように、node.js スタイルで書かれたコードをブラウザ上で動くものに変換 することができます。
そのため、C言語のように高級言語で実装後にブラウザで動くようにす
るためには、以下の手順を行う必要があります。
1. node.js のインストール
2. npm で browserify をインストール
3. CommonJS スタイルでコーディング
4. browserify でブラウザ向けにビルドして表示
browserifyは毎回実行するのが面倒ということで生まれたのは、gulp・gruntの統合環境。 いろんなことを便利にしよ～！として、幾重にもライブラリが積まれているのですね。。
参考サイト qiita.com
