JeffreyFrancesco.org

前々回・前回の続きになります。今回が最終回。W3C Markup Validator のインストールに入ります。

一応前回分までのリンクを貼っておきます。おさらいにどうぞ…といいつつ上手く目次が作れるかのチェックだったりする。汗

• W3C Markup Validator + Validator.nu をローカル環境で (1)
  1. OpenSP をインストールする。
  2. 必要な Perl Module をインストールする。
• W3C Markup Validator + Validator.nu をローカル環境で (2)
  1. （HTML5 もチェックするのであれば）Validator.nu をインストールする。
     1. Mercurial をインストール
     2. 環境変数 JAVA_HOME を設定
     3. Validator.nu ビルドスクリプトのチェックアウトと実行
     4. おまけ: 起動スクリプトを書いて立ち上げを楽にする

んで、今回の内容は以下の通り。

1. Validator 本体と DTD ライブラリをダウンロード・解凍して、しかるべき場所に配置する。
2. 設定ファイルを編集して、しかるべき場所に配置する。
3. Apache の httpd.conf を、Validator が動作するように編集する。
4. おまけ: チェック用 bookmarklet

では、以下からどうぞ。

Continue reading

前回（W3C Markup Validator + Validator.nu をローカル環境で (1)）の続きです。まずは目次を再掲。

1. OpenSP をインストールする。
2. 必要な Perl Module をインストールする。
3. （HTML5 もチェックするのであれば）Validator.nu をインストールする。(今回の内容)
4. Validator 本体と DTD ライブラリをダウンロード・解凍して、しかるべき場所に配置する。
5. 設定ファイルを編集して、しかるべき場所に配置する。
6. Apache の httpd.conf を、Validator が動作するように編集する。

前回は Perl Module のインストールまでで終わりましたので、今回は Validator.nu のインストールに関して。なおこちらは HTML5 なソースをチェックしたい場合にのみ必要になるものなので、まだまだ主流である HTML4.01 や XHTML1.0・1.1 のソースしかチェックしないのであればインストールは特に必要ありません。

逆に「HTML5のソースをチェックしたい」というのが目的だけなら、実はこの Validator.nu 自体が Web サーバの機能も内包しているので、これだけのインストールでもチェックは出来たりしますが…汗　まあとにかく続きからどうぞ。

Continue reading

すっかり音楽サイトではなく技術サイトになってしまった感のある我がサイトですが、今回も懲りずにそんなネタ。

ウチはご存知の通り（なのか？）Blosxom を使ってサイトの更新をしているので、Mac OS Web 共有を使ってローカル Web サーバを構築しておくとテストに何かと便利（最終的な Web ページとしての出力結果がローカルで確認出来るなど）なのでそうしているのですが、この最終的な出力結果の文法エラーをチェックしようと W3C Markup Validator で確認する際にだけは、一度サイトにアクセスしてページのフッタに置いてある「Valid HTML」をいうリンクからチェックする…という手間を踏んでおりました。

だからどうしても、アクセスログに自分がアクセスした際のログが残ってしまう訳です。ただでさえアクセスの少ないログを私のアクセスで汚してしまう（という言い方が良いか悪いか分かりませんが）ので、なんかアクセス解析を見ても「ああこのうちこのくらいはオレのアクセスなんだろうな…」と思うと、いまいちこれが正確なのかどうなのかが分からないという、何ともスッキリしない気分で過ごしておった訳です。

なのでこの辺も出来ればローカルでチェックして片付けたいなあと思いまして。以前は Another HTML Lint をローカルにインストールしてチェックしてましたが、Another HTML Lint は今のところ HTML5 未対応。ならば W3C の Markup Validator はどうか…と調べてみると、どうやらこちらもソースは公開されているようで、ダウンロードしてインストールさえ出来れば動かせそうな予感。んで、こちらは Validator.nu もインストールすれば HTML5 なページもチェック出来るとな。ふむふむ。

という訳で、思い立ったが吉日と申しますので？早速チャレンジしてみました。

なお、以下の文章は Mac OS X の UNIX 的な部分にある程度精通された方を対象に書いておりますので、作業に必要な Xcode のインストールや Web 共有（Apache）の基本的な環境設定は既に完了しているものとして話を進めています。ご了承下さい。

Continue reading

しました、ハイ。見れば分かりますかそうですか。

背景画像とかやっぱりなんか合わんというか、ごちゃっとし過ぎな感がしたので、さくっと削除。ついでにサイトのロゴもさくっと削除。作り直そうとも思ったけれど面倒くさいのでテキスト。なんでフォントが Palatino なのかは問わないように。

3カラムレイアウトも止めました…で、3カラムっぽく見える1カラムというか、左右の余白を多めに取った1カラムの余白にエントリ情報や広告を配置する、みたいな感じにしてます。エントリ情報部分を左にピタッとくっつけたかったのでセンタリングもやめっと。

配色も今までのはほぼ完全にモノトーンの濃淡でしたけど、やっぱりこれじゃあリンクなどが分かり辛いよなあ…という反省の元、白地に暖色系のグレーというか、微妙にブラウン・ベージュ寄りのカラーを基調にしてみた…つもり（色を言葉で表現するのは難しいものだ）アクセントにダークレッド、リンク色も一般的な青色（通常よりはダーク目ですが）に変更。あと ins にだけやや薄めの黄色を使ってみた…インラインレベルの時は文字背景色に、ブロックレベルの時はブロックの周りのボーダーに。紙の書類で蛍光ペンでラインを引いたり周りを囲ったりしますよね…そんなイメージです。笑

という訳で全体的に余白部分も大きく広げましたので、レイアウト・配色と合わせて以前より読みやすくなったんではないかなあと思います。やっぱり私はこれくらい、すっきりシンプル目な方が好みなのだなあ、とか再確認。

Continue reading

前回書いた通り、zenback を入れてると Lightbox 2 が permalink で動作しなかった訳ですよ。

で、理由はおそらく Lightbox 2 に必要な prototype.js と、zenback が読み込む jQuery の衝突だろう…という結論。

色々調べて prototype.js と jQuery の衝突を回避する方法があるのは分かりましたが、zenback のスクリプトは提供元の方でコーディングされてますので、コチラが手を加えるのは不可能。あるのかもしれませんが、おそらく私の手には負えません。涙

という訳で、Lightbox 2 の利用は諦め、同様の機能を持つ代替スクリプトを探す事に。もしかして同じ jQuery を利用する jQuery lightBox plugin であれば動作するかも? という甘い期待の元、ダウンロードして試してみる事に。

でも、これも調べてみるとどうやら一筋縄では行かなくて、今度はサイトの方で読み込む jQuery と、zenback が読み込む jQuery が衝突するらしい。回避する方法としては「zenback が読む jQuery より後に自前の jQuery を読み込ませる」らしいのですが、そのようにやってもやっぱり動作しない。うむー困った。汗

しかし、試行錯誤の結果、何とか動作させる事に成功いたしましたので、ココにご報告いたします。ついでに、jQuery + lightBox plugin ではグループセットを作ることが難しい（スクリプトに手を加える必要がある）という情報が多かったのですが、その辺りを回避というか、場合によっては工夫すれば、スクリプト自体に手を加えなくてもグループセット（もどき）は作れるよ、という方法がありますので、その辺りの解説も。

つか、そもそもこの組み合わせで他のところは特に手を加えなくても問題なく動いてるのかどうなのか、その辺は全く不明なのですよ…ネットを調べ回ってもその辺の情報が全く出てこないんですよね。だから解決に手間取った訳でもあるのですが。まあ余談はさておき続きをどうぞ。

Continue reading

入れてみたのでテストエントリ。

Movable Type でおなじみのシックスアパート社さんが、zenback という新サービスを開始されております。どのようなものかというのは、以下 http://zenback.jp/ より引用。

zenbackは、ブログ記事のテンプレートにスクリプトコードを埋め込むことで利用できます。ブログの記事の下や横に、

• その記事に関係する自分のブログ記事
• その記事に関係する他のzenbackユーザーのブログ記事
• その記事についての最新のTwitterのつぶやき
• その記事についてのはてなブックマーク
• その記事の最新のアクセス元（リファラ）

を表示します。

発表とほぼ同時にベータテストの申し込みをしていたのですが、この度利用準備が整ったという事で、早速導入してみました。

サービスが利用できるブログの条件も、基本的には以下の二つだけ。

1. 個別記事表示用テンプレートの HTML をカスタマイズできて
2. テンプレートに JavaScript のコードを貼ることができる

まあウチは blosxom などという（今や誰も選択肢として考えないような…汗）ブログツールを使っておりますが、かなり自由度は高いツールなので当然上の二つはクリアできてるし大丈夫。若干工夫が必要ですけど、その辺りも含めて簡単に設置方法の説明を。

Continue reading

CSS てのは弄り始めたらなかなか止まらないもので(汗)先日から立て続けに色々なところを細々と変更しておるのでございます。

いちおう前例に倣って(?)先日までからの変更点を箇条書き。

• さりげなく背景右側に Organ の画像を置いてみた。ウチにある XK-3 を撮影して加工したもの。
• 背景画像が見えつつテキストが読みづらくならぬ程度に opacity プロパティ使ってサイドバーをほんの少し透過。
• Firefox でもメニューのタブが角丸になるように -moz-border-radius プロパティを入れた。
• ページの一番上に戻るリンクの場所とデザインを調整。
• 他いろんなところの margin, padding を微調整。

そんなところ…だと思います(笑)細かくメモ取ってなかったから、ところどころ忘れてる気がしますが。

ご覧になって分かる通り opacity とか border-radius とか CSS3 的なプロパティを使っておりますので、Windows の IE では意図した通りに表示されませんが、知った事ではなく(笑)とはいっても一応 Parallels Desktop 上の Windows7 + IE8 で確認は取っておりまして、見たところとりあえず閲覧に支障を与えるような崩れ等は発生してなかったし、問題ないでしょうその辺。

でも実は IE8 について、一つどうしても謎なことがあったのでございます。それは…次回に続く。単純に私が IE8 の設定の変なところを弄ってしまってた事による勘違いでした…よって次回に続くはありません。汗

勢いで立て続けに変更。まあ半分くらいは既に出来上がってたものを本 CSS に書き足すだけなので簡単でしたが。

ちう訳で、以下箇条書き。

• Header と Footer にバックグラウンド画像（パターン）を敷いた。
• Header 下の Navigation をタブっぽくしてみた。-webkit-border-radius とか初めて使った。
• あとはその部分の color 調整を細々と。

ていうか明日は27日の発表会のリハで大阪行きなので、早く寝なくては…

暇を持て余していたので色々変えた。以下、箇条書き。

• ふと思い立って Google AdSence を縦長バナー（160×600のもの）にしてみた。
• そのままではサイドバーがものすごく長くなってしまうので、レイアウトを3段組に変えた。
• エントリ ID がページによって全然違うものを吐いてたので(汗)プラグインの該当部分を修正した。
• 自分の Twitter アカウントへのリンクを付けた。アイコンは貰ってきたやつだが、どこからか忘れた…
• サイドバーのラベル部分のフレーズをちょっと考えて書き直した。
• フォントサイズを一回り大きくした。

以上。それだけ…