たまにはウェブのUIでも書くぞーと思って、ひさびさにウェブプログラミングに挑戦してみた。普段はC++ばかり書いているから、こういうのはひさびさだ。
えーっと、このテキストフィールドの下にサジェストの候補を出したいんだけど、どうすればいいのかな。まずは同じようなことをやっているコードをみればいいか。よし、見つけた。こういうときはインスペクタを使って要素のスタイルをみればいいはず。。と思ったが、このサジェストのところ、フォーカスはずれると閉じちゃうじゃん。これじゃあインスペクタで選択できないんですけど。
いやいや、見えなくなっても要素自体は残っているはず。DOMツリーをチェックして。。あ、見つけた。が、これ、周りのdivだけ残ってて中身はもう消えてるじゃん。まあいいか、position をfixed にして、top, left, width とかをセットすればいいのね。
よしよし。こいつらの値はテキストフィールをの要素から適当に計算してやればいいはず。そういうコードは既にあるから難しくないぞ、と。ではキー入力が開始されたたとりあえず、なんかダミーの div でも出してみるところから始めるか。
うお、このテキストフィールド、フォーカスされると横にびよーんと伸びるじゃん。アニメーションはいいけど、これじゃ最初に計算した幅からずれちゃうんですけど。
一体どうやって伸び伸びさせてるのよ。ううむ、:focus のときに違う幅を設定して -webkit-transition でアニメーションさせてるのか。しかし、幅がずれる問題はどうやって直したらいいのか。。おっと、キー入力を開始した段階で幅をとると、新しいサイズがもらえるっぽいから、これでいいか。最初に計算した値は無視、と。
よし、これでダミーの div が表示できるようになったぞ。中身をちゃんと入れないといけないんだけど、ここはまあ非同期でバックエンドからデータをとってくるだけだから、簡単。よし、ゴールは見えてきた！
と思ったものの、よくみると、テキストフィールドより div の方が微妙に幅が広いのが気になるな。。ちゃんとサイズ計算したはずなのに、どうなってるの ？適当にいじくってみるとするか。マイナスのマージンをセットしちゃったりして。。だめだだめだ。直らぬ。これは識者に助けを求めるしかない。ちょっとちょっと。「ああ、それはボーダーの部分がはみ出しているから box-sizing: border-box ってやればいいんですよ」
おお、そうか。そんなのよくすぐわかるね。直った！じゃあこの縦にスクロールバーが出ちゃってるのはなんでなの？「overflow-y: hidden とでも入れて消しとけばいいんじゃないすか」えー、それって正しい方法なの？なんかこれ数ピクセルだけスクロールできるんですけど。ほら、ぐいぐい。なんではみ出しているのよ？「そういうときは外側の要素と内側の要素のサイズを確認しないと。ほら、外側の div は 120 なのに、中身の合計は 25 x 5 で 125 じゃないですか。これが原因ですよ」
確かに。。しかしなんでこうなってるの？あ、よくみると中身の要素は微妙に margin が追加されているような。。そんなことをした記憶はないんだけど。どっからこのマージンやってきてるのよ。うわ、なんかぜんぜん別のところで定義されている CSS のルールにマッチしているじゃん。これは 0px で上書きしないと。。お、消えた消えた。
ふー、だんだんそれっぽく動くようになったんだけど、カーソルキーが正しく動いてくれないなあ。この辺はライブラリがよきにやってくれるはずなんだけど。どうもカーソルキーはちゃんと動いているけど、選択された要素の色が変わらないだけっぽいなあ。えーっと、こういうときは [selected] とか使ってCSSを書けばいいのね。。しかし、動かん。。ちょっとまた助けて。
「あー、そもそも要素に selected 属性が要素についてないじゃないですか」いや、でもカーソルキー自体はちゃんと処理されてるし、その辺もライブラリが面倒みてくれるんじゃないの？「他のところで selected 属性がついているか確認してみましょう」
よし、じゃあさっきのとこ見てみることにするか。。と思ったけど、やっぱフォーカス外すとサジェストが消えちゃうじゃん！ええい、じゃあこの blur イベントの処理をコメントアウトして、フォーカス外しても残るようにしてと。。
ほんとだ。たしかに selected 属性ついてるなあ。この属性はどっからやってきたのやら。。「たぶんこれ普通の div じゃ駄目なんですよ」んー、普通の div じゃ駄目ってじゃあ、どんな div だったらいいのよ？
などなど、格闘はまだ続くのであった。ウェブプログラマへの道のりは遠い。。