Blogn（ぶろぐん）関連 Archive

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

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

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

　僕は所謂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