NOBODY:PLACE

自アクセスのカウント回避

このサイトのアクセス解析は、自作のソフトを使ってるんだが、意外と重要なのは、自分のアクセスを解析しない、ということ。一日、多くても40アクセスくらい（blog記事に直接飛んでくるから）だし、自分が何度もアクセスするとかなりカウントされてしまう。解析するときに面倒だし。そういうわけで、自分だと思うアクセスを回避するんだけど、情報は、USER AGENTとHOSTしかないわけで。もし、同じ地区の、同じOS＆ブラウザを使ってる人であれば、見分けがつかない。今まではそれで無理矢理やってきたけど…なかなか難しい。仕方がないので、こちらのUAをいじることにした。 Donutや、Sleipnirといった、ブラウザだと、設定でUAをいじれる。要するに、『偽装』ということなのだけど、そこまではやらなくても、たとえば、最後に自分だとわかる文字を付け足してみれば、それを手がかりにできる。

例） Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0;NOBODY)

実際、これで上手くいってるんだけど… サイトによっては、いじったUAでのアクセスを許してくれないサイトもあるので… まぁその辺はIE他でアクセスするしかないね。アクセス解析を行ってる他サイトの管理者に、『こいつ…何やってるんだ？』と思われてるであろうことが若干恥ずかしいが。まぁいいやね。というわけで、メモでした。

ブラウザ対応問題：垂直配置に悩む。

お詫びしておかなければいけないんですが。 MUTTER をCSSに切り替えた結果、IE以外のブラウザに対応できなくなってしまいました。無念。具体的にどこが問題かというと… FireFox/Operaなどで確認すると、 MUTTERのテキストが長い場合に、ページフッタの上に被さって伸びて行ってしまう…のです。 IEでこれを見て問題がないのは、中身の大きさによってブロック要素の高さを勝手に変更してしまうという柔軟だけどある意味お節介すぎる仕様のせいです。本来、親要素の高さ指定を具体的にしていなければ、 IE以外のブラウザでも高さを調整してくれるんですが、 MUTTER にはそうしたくない理由がありまして… ていうのは、左側の文章は、文章が短いときのページ内垂直配置をセンターに持ってきたい、そういう希望があるから。文章自体は改行を含んでいるし、<div>のブロック要素なので vertical-align（垂直配置。HTMLで言うところのvalignだが、インライン要素にしか使えない）は使えない。となると残る方向は、テーブルを組むしかない。出来るだけテーブルは使いたくなかったが、この場合は仕方ない… しかし、ここにも問題があり、テーブルを使って垂直配置する場合には、セルに対して高さの指定が必要。コレを指定しないと、セルの高さは内容物の高さになってしまい、垂直配置どころではなくなる。そしてコレを指定してしまうと、前述のはみ出し問題が発生するわけである。うーむむむ… このまま放置するのも良いんだけど、気付いちゃった以上気持ち悪い。なんとかしたい。方向性としては、４つ。 1) 垂直センター配置を諦める。 2) 文章の行数を計算し、PHPで切り替え 3) overflow:scrollを設定する 4) FireFox 対応を諦める 2) の方法はまだ試していないが、改行（¥n）の数で、文章の行数を割り出し、そこから実際のテキストのおおよその高さを割り出し、或る一定以上の高さ（はみ出しが発生する高さ）の時はテーブルの高さを指定しない、それ未満の時は高さをして垂直に配置する。出来なくはないが…処理が遅くなりそうで嫌だ。 EntryのBodyだけテキストのみで保存している実現は十分可能だが。 3) のoverflowはセルにスクロールバーを付けるというもの。デフォルトでは、overflow:visibleの為、はみ出して見えてしまうが、 overflow:scrollにしてやれば、はみ出た分はスクロールバーで調整可能…なんだけど… ちょっと見栄え悪いよね、やっぱり。ヘッダ、フッタとの整合性がイマイチだし。正直に言うと、垂直配置を諦めてもいいかなぁ…とも思う。右メニューが長くなってきてしまって、文章が短いときにテキストがページの下の方へ行きがちだからだ。ウィンドウサイズが小さいと、アクセス時に読めないこともあるかもしれない。うーん…そうなんだよなぁ… でもその場合、すかすかのテキスト下を何に利用するか、というのもなかなか考えどころ… ただただ、『意図のない空白』になってしまうのはちょっと。むむむ……

バージョンの振り方…

きっと正しいやり方は他にあると思うんだけど人にリリースしてるわけじゃないしいいや、ってんで、個人的なバージョンの振り方を。大体いつも、最初の正式版のバージョンは、『1.00.00』から始まる。とりあえず使えるようになって運用開始した時点でこのバージョン。で、リリースしない関係上、事実上β版は存在しないので、ちょっとした変更や、バグフィクスなんかの場合は、 1.00.00 → 1.00.01 と、一番下を一つあげる。なにか機能を追加して、うし、働いた、というときは、 1.00.01 → 1.01.00 と二番目の桁を一つあげる（事実上のβ）。再設計（システムの大きな変更など）や、リファクタリングなんかのあとは、 1.01.00 → 2.00.00 とメジャーアップ。この仕様のいいところは、自分で働いたな、という気がするところ（笑）日々調整を続けている場合、バージョンが、3.02.23 といった感じになっていて、おーなかなか進んできた、などと感慨に耽るコトしきり。逆に悪いところは、仕様変更が頻繁すぎて、どこで何を足したか、ということがわからず、万が一致命的な欠陥があった場合、どこまで戻って…というのを探しにくい。やー…ちゃんとメモしとけよ俺、ということなんですがね… どうせWEBデザイナーの作るプログラムだし、そこまでの詳細さは求められてないし、何より…ズボラなんでしょうな（苦笑）それほどは、人のソースを開いて精査したりしないので、他の人がどんなリリースノートを書いてるか、意識してみたことはないけど… 一回調べてみても面白いかもなぁ… それとも何か基準があるのかな？

MUTTER – INDEX

現在、NOBODY:PLACEもCSSへの切り替えを検討中なのですが、なかなか難しい。それでも一応形にはなったので報告まで。【現在のテストバージョン】 index_css.php※ 若干、デザインの相違はありますが、それはまぁそれとして、ほぼ同じ形にまでできあがってます。ただ、CSSでは、<div>などブロック要素内の垂直中央に要素を指定することが出来ないので、エントリの本文の記述部分は、仕方なくテーブルを使用しました。 1セルなので、アクセシビリティ的にも特に問題はないかな…と。やれば出来るもんですねぇ…そのうち切り替えます。

CSS – とりあえず作業完了。

まだ公開は出来ないけど、CSSを使って作ってたページがほぼ、完成しました。一応、WinIE6/Opera7/FireFox/MacIE5.2/Safari1.2 で確認、出来るハズ… そうは言ってもコレは一つの作業と言うよりは、自分のウェブデザインの中の一つの流れであって、いままで思いっきり無視してきた方向へ、今後一気に流れてく可能性がある…いやむしろ決定、かな。エンジニア的視点で眺めれば、やはり、構造と装飾とが分離されてるサイトってのは扱いやすい。仕事では、大体どちらも中途半端なスキルなんだけど事実上兼ねてるから、どちらも分かる、デザイナー的には、一つのファイルで直感的に分かりたいし、エンジニア的には、修正するべき部分がなるべくわかりやすい方がよい。もしCSSに習熟してソースから直感できるなら… それはやっぱり分離する方が便利だろうね。コレは結構、オブジェクト指向に似た感じのような気がする。 PHPにもSmartとか、PEARとかあるけど、それらも含めて、道具と、処理、という分離の仕方がこれから必要になってくる。や、本当は何年も前からそう言われ続けてきたんだけどようやく、認知度が高まってる感じを受ける。ブラウザの対応も含めて。今後、仕事でも、NOBODY:PLACEでも、その他のサイトでも、徐々にその方向に切り替えていくつもり。仕様、バグが混在してて、本当に混乱するけど（苦笑）コレまでが、IEに頼りっきりの手抜き工事だったってだけだわな。ひとつの区切り、ということで。

<form>タグ前後の空白を消す

今までこの仕様にどれだけ悩まされてきたことか… apeskin作成、フォームプログラムのデザイン、その他諸々。もう半ば諦めてて、<form>使うときはtable併用がデフォルトになってました。そうしたら…うお、コレってCSSで回避できるの？？ table使わずにCSSで全て記述、っていってもこれだけはどうしようもないだろうなぁ…と思っていたから驚き。方法は簡単で、<form>に対して、margin:0px;を指定してやるだけ。

form {margin:0px;}

な、なんてことだ…こんなに簡単だったなんて。目鱗。多分、今日から、関係してるサイト全てで、この設定がされることでしょう。古いブラウザ（IE3,NS3,4）では回避できないてってそんなこと知るか！ tableで挟むのもね、悪くはないんだけど、どうやらXML的判定では不整合ってことで弾かれちゃうみたい。（XHTML化なんて面倒すぎてまだやる気ありませんけどね）それに、ソース的に見たって、囲むべきところをきちんと<form>~</form>で囲まないと、意味が分からないもんなぁ… つうか、なんでブラウザがこの仕様ほっといてるのか理解に苦しむけど（何か意味があったんだろうか？）回避できるようになったってことで…一安心。 THANKS!! 【参考】 HTML,CSSバグ＆回避法リスト : 2. HTML関連 http://www.keynavi.net/ja/bugh/html.html#_title_2_2

今日の目鱗。【refactoring】

リファクタリング【refactoring】読み方：リファクタリングプログラムの振る舞いを変えることなくソースコードを変更すること。ソフトウェア開発では、ソースコードの作成が進むにつれて、中途での設計変更やバグフィックスなどでプログラムは冗長で汚いものとなっていくことが多い。これらの問題点を解決し、将来の仕様変更に柔軟に対応できるようソースコードの手直しを行なうことを「リファクタリング」という。

あーなるほど！なんでもかんでも横文字を使うのはPC用語の悪いところでもあるけどでもコレって俺が言いたかったことを実に端的に表現してくれてる。自分はひとりで開発してるんだけど、それでもこういうこと、頻繁にあるよね…

CSS – スクロールバーに関する設定に関する注意

IE拡張として、スクロールバーに色を付けられる仕様がありますが、これをHTML向けと同じように記述しても、MTでは反映されません。というのも、MTでは厳密に言うとHTMLではなく、XHTML1.0 を採用しており、 XHTMLではモードにより、<body>へのスクロールバーへの指定が無効になってしまいます。その対策として、対象を<html>へ変更すれば、反映されます（->..:. La Franc .:..: スクロールバー変更）が、今度は、IE5.5以前のブラウザでは無効になってしまいます。そのため、確実に設定を反映させるためには、 <body><html>両方への設定が推奨されています。

html{ scrollbar-base-color:#214573; scrollbar-shadow-color:#666666; scrollbar-darkshadow-color:#999999; scrollbar-highlight-color:#CCCCCC; scrollbar-arrow-color:#ffffff; } body{ scrollbar-base-color:#214573; scrollbar-shadow-color:#666666; scrollbar-darkshadow-color:#999999; scrollbar-highlight-color:#CCCCCC; scrollbar-arrow-color:#ffffff; }

参考：CYBER@GARDEN > CSS Tips > スクロールバーのデザインを変える