つれづれなるままに

_ [日記] まったり

ゆうべはかなりのんびりしていたので、今日は昼まで寝ていました。

で、とにかくHPいじりしていました。

夏休みも明日で終わりです。

まったりいかんと。

_ [PC] フローティングウィンドウ

ようやっと解決しました。

散々悩んで参考書やらWebやらを検索して調べていたのですが。

Visual Studio Express 2012 Webのログをよく見たら、エラーメッセージが出ていました。

HTMLとCSSの括弧が閉じてなかったり、色々とタイプミスがあることが判明しました。

まぁ、バグなんてそんなもんですよね。

元々、サンプルコードが正しく動作することは確認していたので、原理的には動作するはずなわけだったわけで。

気になるのは今回jQueryをわざわざ読み込んでいること。

ただでさえ、日本語フォントやらMathJXやらを読み込んでいてかなり重くなってきているところに、さらにjQueryを読み込まなくてはいけないわけで。

一応、今までもフリーのJavascriptコードをひろってきて使っているわけではあるのですが、まだjQueryは読み込んでいなかったんですよね。

実際のところ、表示がなんか遅くなってるような気がするし。

一応、スクリプトをローカルに読み込んでしまえば、いくらCSSの要素を動的に書き換えているとはいっても、サーバーにアクセスするわけではない*はず*なので、サーバーには迷惑をかけてないはずなんですが。。。

そこらへんはちゃんと構造を理解してやってるわけではないので。

一応、理論的にはFirefoxとかはオープンソースだから、やる気がある人はその動作を追うことができるのでしょうけど、私はそんな時間も気力もないですわ。

ただ、Web fontにしたおかげで、IEとFirefoxでのローカルの設定にあまり影響受けない程度に同じ表示になる*はず*になったわけなのですが。

あー。CSSの設定が甘いので、ローカルの設定で縮小表示とか拡大表示していたりすると、表示が崩れるかも。。。

ちなみに、フローティングウィンドウの技術としては、早い話が同じHTML画面の中でフローティングウィンドウ部分を重ね書きするように表示すること。

そのために、コードそのものは親画面と同じhtmlファイルに書かれています。で、その箇所全体をdivタグでくくって、以下の設定でこっそり表示画面のところで表示しないようにして設置してあります。

#floatWindow {
   display: none;
   position: absolute;
   width: 500px;
   height: 300px;
   top: 5%;
   left: 5%;
   border-color: black;
   border-style: solid;
   border-width: 1px;
   background: rgba(204, 255, 204, 1.0);
   backface-visibility: hidden;
   z-index: 9999;
}

(実際はかなり省略してます。)

widthとかheightとかは中見の分量で調節します。

元の資料では、このひとつ下の階層で画像ファイルを表示しているのですが、そこまでする必要はないから、boxを不透明にしてボーダーに線を引いて処理しています。

ここでミソはx-index要素。これ、悩んだんですよね。調べ方が足りないせいだと思うのですが、CSS3で許容されている表現かよくわからない。(違うっぽい。)

でも、他によい方法を思いつくでもなく、えいや、と使ってしまいました。

で、display: none; になっているので、idがfloatWindowの要素は最初は表示されません。

で、表示元のクリックする要素をaタグでくくって、そこに上のfloatWindowのアンカータグにリンク。

で、jQueryの機能を使って、このアンカーに関連付けてあるwhatyutopiaというidがクリックされたときに上の隠された要素が表示されるようにします。

   $("#whatyutopia").click(function () {
       $("#floatWindow").fadeIn("fast");
       return false;
   });

あとは、フローティングウィンドウの上部をクリックしてドラッグすることでウィンドウを移動させたり、閉じるボタンでウィンドウが閉じるようにするような処理を付け加えただけですが、ここらへんは参考書のままです。

ウィンドウを移動させる過程で、マウスの現在位置を毎回検知してCSSの内容を動的に書き換えるようになっています。それが処理を重くしてるんだろうなぁ。

一応、本当は過去の旅行記とかもこんな感じで表示しようと思っていたのですが、これはあまりにも無駄が多いので、他の方法を考えなきゃ。

で、一応、最終目的はメルフォ用のフローティングウィンドウを作って、inputタグの内容をperlのスクリプトで読み取ってメール送信するようにすることです。

とりあえず、今度時間があったら、メルフォの実験からはじめないといけないなぁ。

先は長い。。。

_ [アニメ] アルドノアゼロ

落ち着きすぎている主人公。

アホすぎる敵方の騎士たち。

そして敵方に囲われていたもうひとりの主人公(？)が次から合流するっぽい展開。

さて。

見せ方はかなりうまいですよね。

_ [アニメ] イリヤ2wei

先週のですが。。

なんか色々とはしょっちゃってるようで。

それに、原作ってこんなに風呂シーン多かったっけ？？

このところずっとwebにかかりっきりだったので、アニメがたまりすぎているーー。