デザイン試行錯誤

 当初のフレームじゃない検索画面のイメージはこんな感じ。



 でもねー、検索メニュー項目のリンククリックによる実行だとGETだから、再表示時に入力状態を復元できないんだよね。もちろんJavaScriptを使えば可能だけど、それは避けたい。
 で、スタイルをリンクっぽくしたSUBMITボタンで代用できないかと試してみたものの。

 borderなし、text-alignはleft、vertical-alignはmiddle、paddingは0px、background-colorはtransparent等々と指定したら、IE8.0だと何とかそれっぽくはなりました。もちろん訪問済みリンクの色を変えるなんて芸当は不可能だけど。
 下図は、上の「PC向け」のみSUBMITボタン、その他、つまり「HTML」と下の「PC向け」がリンクです。



 うん、なんかそれっぽい――けど。実体はボタンだから、実際にクリックしようとして点線で表示されるボタンのoutlineからすると、領域がかなり広いことがわかります。となると、もっと長い文字列だと横サイズが広がりますね……。うーん。



 次はFirefox3.5.11。
 まず、リンクとボタンのフォントが変わってしまうのが一点(下図の1)。スタイルではフォントを指定していないため、ブラウザの設定に依存しているんですが、そうするとこうなっちゃう。



 あと、実はメニュー項目それぞれの領域にfocusとhoverを指定してあり、IEでは動作しないけどFirefoxではちゃんと動きます。ボタンの場合、親要素ではなく自身もhover時の前景色を指定する必要がありますが(上図の2)。
 しかし……同じ親要素の下にあるチェックボックス上にマウスポインタを移動させると、当然ながらボタンの前景色が戻っちゃう(上図の3)。

 結論。諦めてフレームにしましょう……。

検索系とヘルプ系を分ける

 試行錯誤の結果、検索系はこんな画面で行くことに。



 検索系は必ず左に検索メニューがあるけど、ヘルプ系は非フレーム、または異なるフレームにしようかと。

 さて検索ロジック自体は出来てるし、あとはどうやってHTML化して見せるかだけだから、そろそろ肝心の認証に手をつけようっと。こっちはロジックがどうこうより、単純に画面数が多い上に更新処理があるから何かとめんどいけど。
 ちなみに認証はセッションを使うけど、そもそも通信がHTTPSじゃないので真似事みたいなもの。

2010/09/11 11:34:24更新
最終更新:2010年09月11日 11:34