ウエブの話 Archive

　最近xreaも枯れてきたのか、落ちたり重くなったりする回数が減ってサーバの乗換えを検討することすらなくなってきていたのだけれど、友人と共同でサーバを借りる案件が出てきたので早速お試し。以前からxreaの上位サービスcoreserverが気になっていたので、申し込んでみた。

　coreserverはコンパネもxreaと似たような感じで、何よりドメインをvalu-domainで管理していることもあって使い勝手自体はほとんど変わらない。ネームサーバも一緒だし。ファイルの移動はあっさり終わって、ドメインの振り分けもなんと言うことも無く完了。ただ一つ引っかかりそうだったのが、ブログのデータを格納しているDBの移行。

　なぜかというと、xreaのSQLはバージョン4.0だったのに対し、coreserveのSQLは5.0で、普通にdumpファイルで保存→復元すると文字化けする可能性が極めて高く、そしてそれは僕の場合もそうだった。色々調べてほとほと困り果てていたら、こんな記事を見つけて万事解決。2008年2月9日現在、本館の移動は終了して新サーバで動いてます。うーん、やはりネームサーバの移動が無いというのは楽チンだな。

　wordpressが流行っているというのは風の噂に聞いていたのだけれど、まあ軽く左へ受け流していた訳ですよ。で、ちょっと時間が出来たのでかるーい気持ちでインストールしてみたらと、これがなかなか面白そう。個人的な好みである動的生成のツールだし、何より一番気に入ったのが、ページ生成という、エントリ以外のページを作成・管理出来る所。

　ツール本体の構成は比較的質素だと思うけれど、ユーザの多さを反映してか、プラグインの数はその全貌を把握しようとするだけで気持ち悪くなるくらい豊富にあるし、テーマファイルの配布も驚くほど。

blognは、個人的に長く使っている事もあって、とても扱いやすいツールなので当面使い続けていく積もりだけれども、ちょっとwordpressに惹かれてもいます。二つブログやっているんだから、片方は置き換えても良いかな。まずはテンプレートの解析から始めてみます。

　何度もしつこく書いている通り、僕はかなりのvalid厨です。＜br＞タグも大嫌いで、出来る限り使いたくないと常々思っております。理由は様々ありますが、lintでお叱りを受けるのもその要因の一つであるし、Rusicaさんも言及されている通り、物理要素っぽい感じがどうも嫌なんですよね。とか言いながらつい最近まで＜hr＞要素を頻繁に使っていたんですけどね。今はもう使いません。

　とまあ、自分でサイトを作る時にはこの感覚をせいぜい反映させ、せこせことHTMLを書いていくわけですが、CGIなどのツールを使いたくなった時にちょっと問題が出てきてしまいます。ブログツールは必死に勉強して、何とかvalidなHTMLを吐き出してくれる様になりましたが、ここ最近何となく掲示板を作りたいなー、なんて考えていて、なかなか良いツールを探し出せなくて鬱々としてました。何故今更掲示板を、という突っ込みはさておき。

　で、発見しました。かなり希望に近いツール。Hiro Konda's Webさんが配布されている「YY-BOARD XHTML Customize Edition」というもの。元々、CGIツール作成の老舗KENTwebさんで配布されていた「YY-BOARD」を改造の上再配布されているもので、HTMLとスタイルの完全分離が果たされています。StrictなHTMLを目指す上で、そして僕の嗜好を満たす上で、避けて通れない＜br＞タグの羅列を無くすという部分も、見事に実現されている素晴らしいスクリプトです（簡単に言えば、書き込みにある連続する改行を、パラグラフへ変換してくれる）。

　デザインも構造もシンプルでかなり好みですし、デザインをサイトに見合う用に手を入れて使ってみようと考えております。別に掲示板で議論を繰り返したいという意図は全くありませんが、設置してみようと考えてから随分長い間スクリプトを探す長い旅路に出ていたので、意固地になっているだけです。

　ウラワマニアの単品ページ（エントリーのパーマリンクを表示するページ）のレイアウトを、1カラムに変更してみた。

　Blognは、基本的に一つのテンプレートを使い回す構造になっているけれど、カテゴリ別にそれぞれテンプレートを指定する事も出来る。そこで、トップページの表示には今まで通りのテンプレートを用いて、カテゴリ別の表示に1カラムのテンプレートを指定する事にした。こうする事で、パーマリンクのページが1カラムで表示される様になり、自分の思った形になったという訳だ。

　文章がむやみに長いブログなので、単純に1カラムにすると高解像度のモニタを使っている人にとっては、文字列が横へ長く伸びてしまい読みづらくなるだろうから、max-widthに60emという指定を入れてみた。ただ、このプロパティは、IE6以前では対応していないので、大多数の人々には余り意味のない指定であるとも言える。 　Javascriptを使用すれば、IE6でもmax-widthやmin-widthプロパティを擬似的に制御させる事は可能だけれども、面倒くさいからやっていない（ぉぃ。

　ようやく色々一段落して、精神的に少しだけ余裕が出てきたので、サイトいじりにちょこっとだけ復帰。ウラワマニアのブックマークページでは、del.icio.usへブックマークしているものをRSSで引っ張ってきて表示させていて、その表示にはMagpie RSSを利用している。使い始めた当初はなんの問題も無かったのだけれど、いつからか文字化けする様になってしまっていた。気づいてはいたのだけれども、時間がないのと面倒くさいのと、なによりこのページ自体、完全に自分用としてしか存在意義が無かったものだからしばらくの間放っておいた。

　で、久しぶりにMagpie RSSでググってみると、どうやら新しいバージョンが出ていて結構使いやすそうなコメントが見つかったので、早速ダウンロード。文字コードの指定だけ直してアップロードしたら、あっさりと文字化けは解消。さらにtime stampが使いやすくなっていたので、トップページに表示している自サイトの最新エントリにも日時を表示させてみた。

　あと、urawamaniac.comにはfaviconを置いてあって、taidaya.netドメインには置いてなかったから、自らのアイデンティティである“鉄分”を表現するために、東海道新幹線0系のfaviconを作ってみた。何だその大それた表現は。faviconの変換サイトを探していて知ったんだけど、faviconて英語圏では「ふぁぶ・あいこん」と読むのね。知らなかった。ずっと「ふぁびこん」って読んでた。まあ、日本語圏ではそう読むのが普通みたいだけれども。

Rusicaさんの所で5つの質問が出ていたから答えてみた。

HTML文書を制作する際に使用しているプログラムをお答えください。（Webプログラムも含む）

基本はTeraPadのみで手打ち。

採用しているDTDとその理由をお答えください。

XHTML Strict：何となく格好良いから。そしてStrictじゃないと自分が納得出来ないから。あくまでも、自分が。

何故正しくHTMLを書いているのですか？

まず正しく書けているかどうかはおいとくとして。そうしたい理由は、ソースを見たときに自分だけが感じる気持ちよさを追い求めているから。かな。

W3CとWHATWG、どちらに期待してますか？

正直、WHATWGが何だか良く判らないのでW3C（違

あなたにとってHTMLとは何ですか？

うーん、自分が書きたい事などをウエブで表現するために、必要となる言語かな。大事っす。

お粗末様でした。

　川崎のサイトがリニューアルされているけど、これがちょっとやばいくらい凄く良くできてるじゃない。富士通の面目躍如かしらん。浦和も期待してたんだけどなぁ。

　浦和が開幕戦であたる、横浜FCのサイトを眺めていたら結構小綺麗に作られているなと感じ、いつもの様にソースを覗いてみるとあらら良くできているじゃない。と言うわけで、J1クラブの全部lintにかけてみた。

はぁ、まあこれが現実ですわな。横浜FCを除いた他のクラブは、大半が未だテーブルレイアウトで（テーブルレイアウト自体がそれだけで悪いっつー訳じゃありませんよ）、マークアップがきちんとなされていない…。横浜FCは点数こそ低いものの、これはDOCTYPEをstrictとしながらtarget属性を沢山使っているからで、これを止めれば相当高得点になる筈。

というか、見出しタグくらい使いましょうよ。HTMLなんですから。浦和のサイトも酷いなぁ…

追記：改めて調べ直したら、DOCTYPE宣言のないサイトが5つもあった（汗

　この2週間くらい、自分の借りているサーバで動かしてるMysqlが重たくて仕方ないなと思っていて、特に深夜になると落ちてしまう事が度々あった。その際、phpmyadminに表示されるエラーメッセージは'max_user_connections'で、要はDBにアクセスするプロセスが多すぎて、最大接続数に達してしまい接続が拒否されるという症状が出ているという訳。何でだろうと色々考えた結果、恐らくトップページなどで二つのブログのRSSを表示させているのが原因だろうと推測するに至った。

　xreaではデータベースを1アカウントにつき5つまで作る事が出来る。しかしながら面倒くさがりの僕は、一つのデータベースに二つのブログを放り込んで使っていた。その時点では大きな問題は無かったのだけれど、そこへそこそこアクセスの多いウラワマニアの方でRSSを表示させたがために、DBへのアクセスが頻発していたのではないかなと。

　そこで、新しいDBを作成してこの本館のデータをそっちへ移行した。するとどうでしょう、あからさまにアクセスが快適になって、今のところsqlは快調に動いている。というか、今までより全然反応が良くなった気がする。なんだよ、こんな事なら最初からそうしておけばよかった。ホント、毎度毎度の事でいやになるのだけれど、最初に面倒くさがって後回しにした事は、結局全部自分にしっぺ返しとなって返ってくるんだよなぁ。ま、これが自分らしさだから仕方ないのだけどw

　さらに、ログデータを移す時に失敗をしてしまって、記事のURIが狂ってしまった。つー事は、サーチエンジンのキャッシュも全てご破算w。ひっそりとやっているブログだからどうってことないんだけど。深夜から今日の午前中に掛けて色々作業してたので、もしかしたら閲覧に支障が出たかも知れませんがそのへんはご容赦を。多分、今後は多少なりとも快適になる、といいなぁ。

　先月末にwindows『Vista』が発売になった。自前のPCにこのOSが載るのはまだ当分先の事になるだろうけれど、遅まきながら今のマシンにフォントだけ入れてみた。特にデスクトップを遮二無二改造してやろうとかそんな気持ちは無いから、取り敢えず某所からダウンロードしてきた“メイリオ・バージョン0.99”をフォントフォルダへ放り込んだだけだった。

　それを忘れた状態でブラウジングしていると、いきなりアンチエイリアスが掛かったサイトに出くわし、ああそうか、既にfont-familyにメイリオを設定している人もいるという事がわかった。まあ、当たり前っちゃー当たり前の事なんだけどね。新しいOSは既に商品として出荷されている訳だし。んで、幾つか見て回ったメイリオで表示されるサイトは、それぞれとても綺麗に表示されていて、個人的にもかなり好みのスタイルだったから、いそいそとこのサイトのスタイルシートにも手を加えた。

メイリオを適用すると、こんな感じ↓

因みに、safariTestでキャプチャした、safariでの見え方はこんな感じ↓

　おお、素晴らしい！　windowsでもこんなに綺麗に文字が見られるとは！　おじさんちょっと感動です。ただ、システムフォントを弄ったりするのはちょっと面倒くさいし、逆にこうして少しでも綺麗なフォントを体感してしまうと、余計にMacへ対する思いは強くなり…。ネタフルさんの『「Parallels Desktop for Mac」のCoherenceモード最強！』というエントリは驚愕の一言で、もうこれを見てからは欲の塊。恐らく、僕の家にVistaが来るのは、Intel Macに乗ってだろうな。

　大蔵省（古っ！）から認可を得るのに何年かかるかは判らないけど。

　そう言えば、"urawamaniac.com"のドメインのトップディレクトリは、この2年くらいずっとほったらかしになっていて別段それに何のアレも無かったんだけど、この前久しぶりにソースを見てみたらこれがまた見事なまでのテーブルレイアウトで、昔自分で作った筈なのにちょっとばかし驚いてしまった。当然strictでも何でもなく、たった67行という短いソースコードなのにエラーだらけ。当時Dreamweaver4で一生懸命作ったページだけど、どうにも嫌になってしまい作り直すことにした。作り直すと言っても、とても簡素なものだけれども。で、ついでにちょっとだけ動的な要素を加える事に。

　とは言うものの大した事が出来る筈もなく、以前ネットを徘徊して知っていたMagpieRSSを導入し、運用している二つのブログのタイトル最新10件を表示させる様にしてみた。導入にあたっては既に超詳しく解説して下さっているサイトが幾つもあるのでそれらを参考にして、さし当たりここではサイトのタイトルとURLだけを持ってこられれば良かったのでそれほど難しい事は無かった。以下、弊サイトで使っているコードを。

items as $item ) {$title = $item[title];$title = mb_convert_encoding($title, "UTF-8", "auto");$url   = $item[link];echo "＜li＞＜a href=\"$url\"＞$title＜/a＞＜/li＞\n";}echo "＜/ul＞\n";?>

こんな感じ。URLの部分を入れ替えれば、違うサイトを表示出来る。

　MagpieRSSをダウンロードしてきて解凍し、読み込むファイル（ここではindex.php）と同じディレクトリへアップロード。その後、読み込む側のファイルに上のコードを貼り付ければあら不思議。とっても簡単に外部RSSが表示できましたとさ。因みにこれはトップディレクトリのindexだけでなく、blognplusで運営しているウラワマニアのトップページにも設置してある。「本館の最近のエントリ」という部分がそれで、こちらはblognplus自体がPHPで作られているからなのか、そのままコードを貼り付けるとエラーを起こす（理由はようわかりません）ので、RSSを引っ張ってくる部分を外部ファイルにして、blognplus独自タグのINCLUDEで呼び出している。

　これでRSSの呼び出しは完成。念願叶ってトップページにRSSを表示する事が出来るようになった。ホントは、概要を表示させたりとか色々やりたいし、トップページの作りもシンプルに過ぎるかなと思っているので、おいおい適宜弄っていきたいなと考えたりしている。

※参考リンク

MagpieRSS - PHP で使える RSS パーサー。

nJOY BLOG::MagpieRSS を応用すると色々出来る

　僕は所謂valid厨であり、ほんと毎日のようにanother-html-lintに顔を出しては、自分のサイトや人様のサイトのソースをgatewayに通し、どうすれば高い点数をたたき出せるかという事に血眼になっている。個人サイトを運営しているだけだから（そこに営利目的は存在しない訳だし）、はっきり言ってそうする事の意味は殆どないのだけれど、出来るだけ綺麗なマークアップを目指すのが、浦和に次ぐ趣味と化してきているので仕方ないと半ば諦観し、余分な時間をそこに注ぎ込み続けている。

　ただそうしたいと思う事とそれが実現するのはまた別の話で、人にはそれぞれ力量というものが明確に存在するから、果てしなく時間を掛けて頑張ったとしても、上手いこと綺麗なソースを作り出せるとは限らない。そして、それにブログツールなどが動的に吐き出すソースが混じっていたら尚更、文系の僕には手も足も出ないという事もままある。

　このサイトやウラワマニアで使っているblognplusもまた、そうしたブログツールであり、スキンを弄るレベルならば何とかvalidなソースを書けるようになったのだけれど、やはりスクリプトの本体を弄らないと実現できない場所に関しては放置するしかなかった。でも、そこを気にしだすとどうにも身体のむず痒さが治まらなくなるのも事実で、ある意味僕はビョーキだ。

　で、その引っかかっている場所は、コメント欄に並ぶ＜br＞タグ。エントリの文章自体は、自分でマークアップして書けるので殆ど問題は出ないのだけれど、頂戴するコメント欄に関してはそうもいかず、改行が沢山入るとそのまま＜br＞タグがどんどんと羅列されてしまい、another-html-lintに注意を受けてしまう。確かに、レイアウトのために＜br＞を大量に使うのは良いことは到底言えず、以前からどうにかしたいなと考えていたのだけれど、どうやってもスクリプト本体に手を入れなくては駄目で、大袈裟に言えば途方に暮れていた。

　そこに射した一筋の光は、なんの事はないblognのユーザーフォーラムだった。業を煮やした僕は、この掲示板にどうにかなりませんかと泣き言を書いてみた。ホント戯言の類だから誰も相手にしてくれないだろうなという想定の下書いたのだけれど、予想外に、その日の内にC.J.さんが返事というか、見事な回答を入れておいてくれた。世知辛い世の中なのに、こんなに親切な人が居るとは思わなかったし、当人にしてみれば何て事はない簡単な事なのかも知れないけれど、僕にとっては魔法を掛けられたかの如く。

　なんというか、嬉しいことってこういう事だよね。

　一応、前のエントリで人柱宣言をしましたので、blogn公式で本日リリースされたバージョン2.4.0を早速導入してみました。admin.phpを見ていくと、結構イロイロ細かく変わってます。

　まずは新規投稿の部分。ここでは、改行を自動的に＜br /＞に変換して投稿するというチェックボックスが増えています。勝手な事を言えば、段落を＜p＞タグで囲ってくれるようになるとなお良いとは思うのですが(^^;)　そして、独自タグの[LOG]に新機能が追加され、指定した記事を表示できるようになっているみたいです（まだ試してません）。

　続いて記事編集。ここは大幅にリニューアルされていて、記事削除と更新が一括で出来るようになっています。またカテゴリやタイトルの変更なども、いちいち記事を選択せずとも出来るようになりました。これはかなり使い勝手が上がったかも。特に一括でカテゴリ変更したい時などは、重宝するかも知れません。

　次はカテゴリ管理のところ。管理自体は以前と変わっていませんが、ブログのサイドバーなどに表示・非表示を切り替えられる機能が追加されました。果たして使える機能なのかは今のところ微妙です。

　初期設定の部分にも、少しだけ改良が加えられています。許可するファイルの種類と、有効にするHTMLタグという設定部分が、従来はテキストボックスにカンマ区切りで入力していたのに対し、新バージョンでは、フォームで追加・削除が出来るようになりました。以前のバージョンだと、有効にするタグを増やせば増やすほど、テキストボックスが右に長く延びていって使いづらかったですからね。

　そして、表示スキン設定の部分。ここは、新規での機能追加というより、管理方法の変更といった感じでしょうか。以前は（ジャンル別表示の場合）、表示するグループ毎にスキンを当てはめていきましたが、今回のバージョンでは、一つずつジャンルを選んでスキンを追加していくという感じです。言葉で説明するのが面倒くさいので、画像をご覧下さい。

　あとは、ログアウトの時にアラートが出るようになったりとか、細かい変更は結構ありそうです。まだ全然試せておりません(^^;)

　んで、最後に。気になるモジュールの対応具合。…えー、あんまり芳しいとは言えない状況ではないでしょうか。取りあえずモジュールには手を触れずバージョンアップしたところ、殆どのモジュールでエラーメッセージが出現し（僕が無茶苦茶活用している、njoyさんのところのコメント・トラックバックスパム対策や、お知らせ表示モジュールなど）、使える状態になってません。まあ、このあたりは知識のある方だとすぐに対応できるのかも知れませんが、僕には無理です。待ってますw　パンくず表示モジュールは普通に動いているみたいです。

　取りあえず、人柱１号のお知らせでした。あんまり時間がないのでこの辺で。人柱になってくれる方、引き続きお願いします(^^;)

　どうやら、クリスマスにblognplusの新バージョンが発表される模様（2.3.2→2.4.0へ）。僕も、怠惰屋本舗本館とウラワマニアの二つでこのスクリプトを動かしているので、かなり気になるクリスマスプレゼントとなりそう。

今回のバージョンアップでは大幅な修正・追加が入っています。 主な変更点 ・ジャンル別スキン表示処理の仕様を変更 ・指定記事表示タグ{LOG 1,2,3,・・・}を追加 ・記事の複数編集（タイトル＆カテゴリー）、複数削除に対応 ・コメントの複数削除に対応 ・トラックバックの複数削除に対応 ・表示スキン設定の仕様を変更 ・カレンダーモジュールに祝日設定の追加

僕は、両サイト共に沢山モジュールを入れていて、スクリプト自体の改変も結構しているからすぐにバージョンアップするのは怖いんですが、本館の方で先に試してみてバージョンアップの人柱になろうかと思ってます。まあ、思っているだけですが。

　blogn+でサイトを構築するようになって1年半くらいが経過した。今は二つのサイトでこのスクリプトを使っていて、本館の方ではゲットネットさんの記事を参照に、静的生成もどきに見せるための改造をしている。詳細はリンク先の記事を見て頂く事として、その目的は多少なりともSEO対策になれば良いな、というところ。

　色んな場所で“動的生成のページは検索エンジンにクロールしてもらいにくい”、なんていう記事を目にしているから、じゃあそれは本当なのだろうかとこの半年くらいテストをしてみた。まあテストという程大がかりなものじゃなくて、単純に二つ運営しているブログの片方を静的生成もどきの改造を行って、もう片方は動的生成のままにしておくというだけの事なんだけど。

　そして出てきた結果がこちら。

• ウラワマニアのインデックス数
• 怠惰屋本舗＠本館のインデックス数

いずれもgoogleにインデックスされているページ数なのだけれど、これはもう歴然というしかない結果が現れた。googleの場合、その都度繋がるサーバが異なってインデックスされているページは変化するみたいなのだけれど、今日探ってみたところ、ウラワマニアのインデックス数は192ページしかないのに対し、本館の方は233ページもインデックスされている。

　大きな差は無いじゃないか、と思われるかも知れないが、ウラワマニアの方はエントリー数が285、総コメント数が412件あるのに、本館の方はたった27件のエントリと78件のコメントしかないのだ。にも関わらず、インデックスされているページは本館の方が多い。どうやら、本当の静的生成でなくとも（もどきでも）SEO的な観点から見ればやった方が良いというのが結論になると思う。

　あと、付帯する条件も同時に書き記しておく。両方とも、blogn+のバージョン2.3.2で生成していて、データはSQLに保存している。置いてあるサーバも同一であり、更にnJoyさん作成の「Google Sitemap 生成スクリプト」を使わせて頂いて、同じようにgoogleサイトマップへアップロードしてある。

　ただ、ドメイン自体は本館の方が1年くらい古く、本館はトップディレクトリで運営しているのに対して、ウラワマニアの方はトップから一つ下の階層で運営しているという二つの部分が、もしかするとクロールに影響を与えているかも知れないが。もうちっと、検証を進めてみたいと思っている。

　なかなか鉄道系のネタが書けない（ウラワマニアの更新も…）のはご愛敬。最近はまたblogツールいじりにはまり込んでしまっていて、趣味に使う思考回路がそこに独占されてしまっているので、しばらくはこの流れが続きそう。

　さて、本館の方でやりたい事が幾つか出てきたので、自分で忘れないようにメモをしておく。自分がいつも見ているサイトに、ADPさんがあるのだけれど、ここでやられているマークアップが凄くて、完全にスタイルシートでデザインされているのにもかかわらず、一つのdivタグも使われていない。リンク先でも言及されているように、SEOとして最も優れた方策の一つだと思うので是非真似てみたいなと。 また、マークアップをやり直すんだからデザインも変えたい。トップページにはログのタイトルだけを表示させたりだとか。それに伴って、divタグを一つも使っていないテンプレートを汎用に使える様にして、配布出来たら良いなとか。

　あと、所謂個別記事ページのテンプレを変更したい。blogn+は、設定画面に個別記事のテンプレートを定める場所が無いのだけれど、ネットを徘徊していたらこちらの記事を目にして、出来るという事を知った。どうやら、カテゴリ別に設定したテンプレが個別記事表示に対応するようで。ウラワマニアの方では早速取り入れたんだけど、本館では、より簡素なテンプレにしてみたいなと考えている。トップページのみ2カラムでそれなりに情報を入れて、下層ページは1カラムにしたりとかね。取り敢えず、そんな所です。

　先日、ウラワマニアをリニューアルしましたが、その際、かなり大がかりにマークアップをやり直しました。それまでのテンプレはdiv厨と言われてもなんら可笑しくないほど無意味なタグが多くありました。んで、another-html-lintで得点が稼げるように無理矢理手直しを繰り返していましたが、それが故に随分とSEO的には厳しいマークアップになってました。今回はそれを打破すべく、イチから構造を見直して、更にXHTML-strictでvalidとなる様に、珍しく(w自分に厳しくやってみますた。

　取りあえず2カラムでfloatを使ったレイアウトに変更は無く、divタグはレイアウトのみに使うよう心がけました。基本的にはul要素とdl要素を用いてまして、実は本文までdl要素でマークアップしてあります。これはどうなのかなと考えたりもしましたが、dt要素がエントリのタイトル、dd要素がそれに対応する本文と思えばまあ良いかなと。 （div厨に関してはこのサイト「div病」を参照の事）

　んで、個人的に半ば意固地になっているのが、another-html-lintでの点数アップ。僕が使っているブログツール「blogn+」でこれを果たすために必要な事を、以下自分のためにメモっておきます。まずXHTMLとして構築するとなると、真っ先に問題となるのがツールから吐き出される空要素タグの存在です。blogn+では、改行タグがhtml4.01用の＜br＞になっているため、これを＜br /＞になるようにindex.phpを改造します。260行付近にある

// brタグの後ろに改行コードを入れる
$blogn_skin = eregi_replace("＜br＞", "＜br＞\n", $blogn_skin);

ここの場所を、こう

// brタグの後ろに改行コードを入れる
$blogn_skin = eregi_replace("＜br＞", "＜br /＞\n", $blogn_skin);

書き換えます。

　次にやらなくてはならないのが、name要素しか付随しないフォームやアンカーに関する場所を一つ一つ探し出してid要素を振っていく作業。自分でもどこをどう直したか既に忘れているので全部を書く事が出来ませんが、しつこくねちっこくやる事が重要です。コメントへのアンカーや、LOGMOREへのアンカーなどは単純にidを振るだけでは足りず、空のアンカーが出来てしまうので、そこを＜p＞や＜dd＞で括ってその中にテキストを入れ、更にそのテキストをスタイルシートで飛ばす、という事をやってます。index.phpの、1030行目とか1160行目とか1300行目あたりの話です。

　基本的にはこれでほぼvaildにはなる筈ですが、より精緻を極めたいと思うとまだまだ全然足りません。formにtabindexとaccesskey属性などを振ったり（ただこの作業が必要かどうかは判りません。UAによっては誤作動を引き起こしたりする事がありますし、点を取りたいがためだけにやるのは愚の骨頂かと。まさしく僕がそうですがw）、action属性を付加したり、＜input type="text"＞にvalue属性として初期表示するテキストを指定したりとやる事は多岐に渡ります。

　スクリプト自体の改造はこのあたりでオッケーだと思います。あとはテンプレートをゴリゴリと書き換えていく作業です。

　formにvalue属性のテキストを指定するのもテンプレで行う作業でして、僕の場合、テキストをformにそのまま表示させるとユーザーの方が一々そのテキストを消す作業が発生してしまうので、それを避けるべく、javascriptを用いてフォーカスが当たったときに表示されたテキストが消えるようにしてあります。例えば、ウラワマニアの検索窓やコメントの記入欄はそうした形になってます。

　テンプレも勿論そうなんですが、エントリを書く時も完全にXHTMLに即した書き方をしなくてはなりません。画像を挿入する時はimgタグを閉じるとか、＜p＞と＜blockquote＞の入れ子関係を間違えない様にするとか。まあ、このくらいやるとblognでも信じられないくらい高い点が取れる様になります。果たして意味のある事なのか、それは深遠なる疑問ではありますが、素人が趣味で楽しむレベルですからね。ハナからそんな事を考えずに済む、完全にvalidなソースを吐き出してくれるp_blogというツールもありますが、個人的にはblogn+の軽快な使い心地がとても気に入っているので、今後も使い続けると思います。テンプレの配布なんかもやってみようかなぁ。

※今回のエントリは、思いっきりスクリプト改造の事を書いてますが、もし試そうなどと思われる方がいらっしゃった場合、言うまでもありませんが自己責任でお願いしますね。それでブログがぶっ壊れたとか、エントリが消えた（こんな事はまずありませんが）とか言われても、絶対に責任は取れませんので。あしからず。

　かなり強引に、ぶろぐん＋で構築しているウラワマニアのブログ部分を、validなタグが吐き出されるように変更してみた。元々ぶろぐん＋というスクリプトは、お世辞にも綺麗なタグを吐き出す仕組みにはなっておらず、HTML 4.01 Transitionalと宣言しておきながら閉じタグが< />と表示されたり（後のバージョンアップで訂正）、何も考えずに使っているとtarget属性が付加されたりと、HTML-lintでは怒られっぱなしだった。

　ただほとんどの部分では、所謂スキンテンプレートの変更だけで何とかなるんだけど、スクリプト本体が吐き出す部分に関しては手も足も出なくて歯ぎしりしていた。それでもまあ、やるんだったらとことんやろうと一念発起、スクリプト本体に手を加えて書き出すタグを制限する様にして、現在ではほぼvalidな表現が出来るようになった。

　テンプレートの修正に関しては、出来る限り綺麗なソースになるように、尚かつ正しくマークアップされたものを目指したのだけれども、デザインとの兼ね合いもありそうしたセンスの欠落している僕がやると、やはりdiv厨と呼ばれてしまうソースができあがっていた。しかも、一度XHTMLでマークアップしたのにxml宣言の事を忘れていて、出来上がったデザインをお馬鹿なIEで見ればいとも簡単にレイアウトが崩れ去っていたから、もはやデザインをやり直す気力は無く、頭を垂れながらHTML4.01でマークアップし直し、更に手を加えていたスクリプトをもう一度手直しして、ようやく今の形になった。

　一度はまり出すと血眼になってしまうのはヲタクの性だから仕方のないところで、何度もHTML-lintと睨めっこしながら試行錯誤を重ねた結果、トップページでは100点を取れる様になった。エントリの個別ページでは、コメントやトラックバックに対するアンカーと「続きを読む」のリンクが空タグになってしまうのと、頂いたコメントに＜br＞が複数使われていた場合にそれを直す手だてが今のところ思いつかないので、数点のマイナスになる。これをどう直すかを今後は考えていきたいなと。

　何故そこまでvalidにこだわるのか自分でも判らず、モダンブラウザの力を考えればそこまで綺麗なソースじゃなくてもエラーが多くても表示されるのは重々承知している積もりだし、にもかかわらずお金にもならないのに必死になってやるのはたぶん趣味だからでしょうね。いや、学生時代に積み重ね続けた赤点がトラウマになっているからかも知れませぬ。

Continue reading

　今日は、“超”初心者が始めるスタイルシートによるリキッドレイアウトについて書いてみる。リキッドレイアウトとは、ウエブページの左右幅をブラウザの表示範囲に依存させるもので、ごく簡単に評してしまえば、閲覧者の環境に影響を受けづらいと言えるレイアウトだ。ウエブページは判型が決まっている書籍や雑誌などと違い、閲覧者の使用するモニタの解像度によって画面に表示できるサイズが変わってくるから、それを考えたデザインをしなくてはならないと言われている。

　最近では800×600の解像度を持つモニタを使用する人口は減ってきていると思うけれど、全くゼロでは勿論無いし、その範囲内で見られるページを作るのが基本のようで、ウエブページの横幅はおおよそ760ピクセル以下で作られる事が多い。ただ、近年液晶モニタの急速な低価格化によって高解像度のモニタが容易く入手できる様になり、その解像度を守って作ると、解像度の高いモニタで見るとコンテンツ以外の場所に広大なスペースが感じられるようになったりするから、意外にウエブページのデザインは難しい。

　僕がリキッドデザインを取り入れた理由は簡単で、ユーザー側に自由度があるという事だ。これはレイアウトだけではなくて、例えばリンクのtarget属性やフォントサイズの指定などにも当て嵌まる。

　例えば文章を読むのに、“ブラウザの左右幅が余りにも大きいと文字の折り返しが長くなって読み辛くなるから、固定幅のデザインを使う”というのは広く流布されている言説だ。ただ逆に言うと、ユーザーは自分の好きな幅にブラウザをリサイズ出来る訳だから、それに追随出来るデザインであれば良いとも言えるだろう。同じように、フォントサイズをピクセルで指定するとＩＥでは文字のサイズ変更が出来なくなる（慎重に言えばユーザースタイルシートを使えば変更出来るけれど、ユーザースタイルシートを利用しようとするシェアを考えればそれは無きに等しい）ので、もし字が小さくて見づらいと思ったとしてもユーザーの側で変更出来ないという不自由さがある。

　また、リンクのtarget属性で"_blank"という指定をするのも、特にリンク集のページなどではよくある事だ。リンクをクリックすると、ユーザーの意志とは無関係に新しいウインドウが開き、リンク先を表示するというもの。これもまたここまで書いてきた内容と同様の理由で、ユーザーの自由度を奪っていると言える。shiftキーを押しながら、もしくはウインドウズであればリンクを右クリックしてポップアップメニューから、などという方法でリンクを新しいウインドウで開く方法は存在していて、逆にリンクを同じウインドウで開く方法は皆無と言って良い。

　コンテンツの幅やフォントの大きさが固定されていた方がデザインしやすいし、別サイトへ飛ぶリンクは別窓で表示したいというのも良く判る。僕もつい数ヶ月前まで同じような思考回路でいて、そうやって自分の趣味ページを作っていた。ただそれはあくまでも作っている側の論理だけでしかなく、ユーザー側の意向は余り汲まれていない。確かに、自分が使うときには感じていない事でも、他の人だと気になる部分というのは沢山あるのだろうし、そうした時にユーザー側の選択肢は多ければ多いほど良いと、最近考えるようになった。

　数ヶ月前まで固定幅のデザインに固執していた僕が、ひょいとその考えを翻してリキッドレイアウトに入れ上げている。固定幅のデザインはやはりDTP的であり、グラフィックソフトなどを使ってかっちりと作る事が出来るから作りやすい事には間違いなく、可変幅のレイアウトは慣れていないせいもあるのか奥が深く感じるし、ある程度どんなサイズのウインドウで見られても大丈夫なように設計しなくてはならないから、面倒な事も多い。次からは、リキッドレイアウトの細かな部分を書き記していきたい。

　という訳で、浦和鉄研はリニューアルされ、怠惰屋本舗本館として生まれ変わりました。ってそんなにご大層なものでも無いですが。呆れるほど低い更新頻度でブログの体を為していなかった今までの惨状を鑑み、折角独自ドメインを運用しているのだから放っておくのも勿体ないかなという貧乏性が顔を出し、今後は色々個人的に気になる事ならば何でも書いてやろうというスタンスで運用していこうと考えています。ちょっとばかしmixiにも飽きてきた部分もあるので。

　基本的に何でも知りたがって手を出し、結局どれも確固たる知識として身に付かないという悪癖がデフォルトの管理人なので、興味の対象だけは幅広くあります。最近熱中しているのは、ウエブアクセシビリティや正しい構造を持ったHTMLなどの小難しい話です。ネタがネタだけに、ウエブを検索すればそれはもう沢山の情報が落ちてはいるのですが、こちとらバリバリの文系で体系立った専門的知識が皆無の素人ですから、それらを参照しても理解するのに莫大な時間が掛かります。かといって興味はあるから始末に負えず、深夜まで延々モニターと睨めっこする時間が日に日に増えて困ります。

　しかも、記憶中枢に問題を抱えているのか、折角莫大な時間を使って理解した事柄でも数日経つと嘘のように忘れてしまっていたりする事が多々あって「嗚呼、あの時間の積み重ねは何処へ？」なんて事もざらにあるので、それならば理解した端から文系の自分でも分かる様に書き記しておけばよいかと考えるに至り、今後この場所はそうした事柄にも利用していこうかなと思ってます。今回のリニューアルでも、色んな所から情報を仕入れてリデザインしているのですが、それも忘却の彼方へと飛び去っていく時が刻々と近づいてきているので、早い内に何とかしないと。

　勿論、鉄研ネタも随時やります。随時、という表現が微妙ですが。今年とある鉄道関係の書籍にちょっとだけ関わり、必要に迫られて鉄道系の文献を読み漁ったりしたのですが、その際に改めて鉄道の持つ面白さや奥深さを再認識させられ、忘れていた知識が呼び起こされ、今までとはちょっとだけ違った視点で鉄道を見直す事が出来るようになりました。ま、ヲタの戯れ言であるのには変わりませんがね。

　とまあ、まったりとやっていきますので、よろしくお付き合い下さい。