今日はずーっとダイアログのデザインだけに終始してしまった。
デザインというよりは、結局CSSについてのお勉強という感じではあったんだけどね。ダイアログに色々と見た目上の変更を加えたかったので、CSSに色々設定してみたものの、うまく反映されずに時間ばかり経過した…というのが実状。
まず、どう反映されているのか…を確認する為に、ChromeのDevToolsを活用させて頂いた。キーボードでPF12を押下する事で表示させられるが、Chromeメニューのその他のツールの中からも表示させられる。けど、もっぱら該当画面でPF12で表示させる方が簡単だしそうしてる。
そして、該当する項目(段落やボタンなど)を指定して、そこに設定されているスタイルを確認していたのだが、どうにも自分の設定したCSSが反映されてくれない。クラス指定やID指定、その他諸々試してみたもののダメ。何が悪いかわからず、お手上げとなった時に、そういやキャッシュがどうとかと書いてあるサイトもあったな…と思い出す。
常にリロードしてるんだし、それがそこまで影響するもんじゃ無いだろうと頭から除外していたのだけれど、DevToolsを開いている時だけ有効になる、スーパーリロードというものがある事を思い出した。
DevToolsを開いている時に、Chromeの更新ボタンを長押ししていると、メニューが表示されるので、そこからやりたいリロードを選ぶ事ができる。キャッシュ全クリアとかは恐らく必要ないので、２番目の「ハード再読み込み」という奴を選択する。
ちなみに、それが可能なのはDevToolsを開いたタブのみであり、仮にDevToolsが開いていたとしても、関係ないタブでは働かない機能なので注意したい。そしてここまで書いて思ったのだが、ひょっとしたらShift+F5でもCSSの再読み込みだけなら十分だったかもしれない。(試してみると大丈夫だったwうぉいっｗ)
というわけで、次からCSS(style.css)を触った場合には、Shift+F5で再読み込みを実施して、それでもうまく反映されなかったら、ハードリロードを試してみる事にする。くっそｗ
無事CSSが反映されるようになったので、そこからは順調にダイアログの調整もできたのだが、色の反映などがやっぱりうまくいかない。そこでDevToolsで確認してみると、どうやらstyle.cssの後に、テーマのカスタマイズ(20-17のcolors-dark)用のCSSが後から読み込まれ、それで指定したスタイルが上書きされている事が判明。
色々調べてみたが、クラス指定ではどうしてもその優先度を覆せなかった。かといって!importantはあまり使いたくなかったので、ID指定で試して見た所うまく行くようになった。前々回の投稿で、前半CSSの設定がうまく反映されないという事を書いていたのだが、ひょっとしてと思い、そちらもID指定にしたところうまく反映されるようになった。まぁピンポイントで、そこの項目にのみ反映させたいものだったし、これで解決という事にした。
しかし試練は続く。今度はダイアログ中のPタグの下部にある余白がどうにもうざく(文字列とボタンの間が不必要にあいてしまう)、どうにかできないかとPタグに対し、クラスやらIDやら色々セレクタをいじってみたのだが、結局他の外部CSSに優先度的に勝てなかった。仕方が無いので、style句で直接指定する事にして目的通りの表示が得られるようになった。
教訓としては、ピンポイントでそこにしか影響しないスタイルの場合は、下手にstyle.css等の外部CSSに記述するのではなく、差分のみを直接style句で指定するのが一番良さそうだ。すべての外部CSSの読み込み順などを制御できるなら別だけど、そうでないのならそっちの方が結局わかりやすくていいだろう。もう少し広範で影響ありそうなものは、style.cssに書くべきだろうけれど、何やっても優先度で勝てないなら、!importantを使うよりはstyle句を使う方が多分いい。
そんなこんなで、ダイアログは落ち着いた(デザインの変更の仕方は抑えた)ので、想定していた処理の実装へ進む事にした。
ただ、検索画面で選択した行を、ダイアログへ通知し、そこでボタン押下で別画面へ遷移させる際、最初に選択した行をどうやって持ちまわるのかが課題として見えてきた。グローバル変数に持たせておくというので、取りあえずは解決するのだけれど、他にも持ちまわりたいデータがあるのに、それを全部グローバル変数でやり取りするのは美しくないｗ
jQuery UIのダイアログオブジェクトを継承して、自前のプロパティを追加して、そこへ設定…みたいな、Java的なアプローチができない事も無いのだろうけれど、そこまですべきなのだろうか…。あまり変数を多くしても良くなさそうだし、連想配列にでもして受け渡す方がいいのだろうか。それなら、検索結果の配列を保存しておいて、受け渡すのは選択されたindexのみにした方がいいんじゃ無いだろうか？
これを書いている内に色々考え始めてしまったなw取りあえずこれ以上ダラダラ続けても意味が無いので、ここまでにしよう。データの受け渡しはまたちゃんと考えよう。そして今日やれなかった別ページへの遷移までできるといいな。