W3Clove: サイトまるっと文法チェック

Base URLを指定するとそこから一連のURLに対して W3C Markup Validation を適用してくれる中継サイト。なので、MIMEタイプをエージェントチェックで判別して見せている場合には HTTP_USER_AGENT の値が W3C_Validator の場合に application/xhtml+xml で出力してあげれば出力タイプでの警告なしに結果を受け取る事ができます。

因みにこのサイトでは header.php の先頭にスクリプトを書いてMIMEタイプを決定しています。

<?php
$ACCEPT = $_SERVER['HTTP_ACCEPT'];
$UAGENT = $_SERVER['HTTP_USER_AGENT'];
if (eregi("MSIE", $UAGENT)) {
    header ("Content-Type: text/html; charset=UTF-8");
} elseif (eregi("(Another_HTML-lint)|(W3C_Validator)", $UAGENT)) {
    header ("Content-Type: application/xhtml+xml; charset=UTF-8");
} elseif (ereg("application/xhtml+xml",$ACCEPT)) {
    header ("Content-Type: application/xhtml+xml; charset=UTF-8");
} else {
  header ("Content-Type: text/html; charset=UTF-8");
}
echo "<?xml version="1.0" encoding="";
echo bloginfo('charset') . ""?>n";
?>

それで W3Clove を通したら問題ありませんでした。良かった良かった。

via
W3Clove :: site-wide markup validation tool
The W3C Markup Validation Service

RSS広告削除社: フィード掲載広告除外サービス

RSSリーダーでフィードを集めて読んでいると広告が結構な頻度で差し込まれています。1つのフィードに1件か2件なら広告としての効果もあると思いますが、あまり頻繁に差し込まれると単に煩わしいだけのモノになってしまいますよね。そんなわけで「フィード 広告 削除」のキーワードで検索したところ一発で引っかかったのがこのサービスでした。

広告を除外したいフィードのURLを貼り付けるだけで作業は完了。提供URLからフィードを拾うと広告が除外されています。但し、サイトに掲載されているフィルタに限定されますので、それ以外の条件で広告が掲載されている場合には製作サイドに連絡の必要があるようです。

フィード配布元にももう少し工夫をしてもらえると、こういうサービスを使わなくても良くなるのですがね。

via
RSS広告を削除ならRSS広告削除社

LEGOでfavicon.icoを作り直してみた

そういえばこれまでの favicon っていつ作ったんだっけ?と遡ってみたら2005年の1月でした。7年も使っていたらそろそろ自分でも飽きてくるというものです。どんな感じで作ろうかな…と考えていたのですが、LEGOっぽく作る事を考え付き、それっぽいツールがあるか検索。

バーチャルレゴなんてキーで検索したら引っかかりましたよ。LEGO Digital Designer です。無料でダウンロードできるのが嬉しいですね。早速インストールして動かしてみました。直感的に触れるのでこの手のツールに慣れていない人(例えば私)でも問題無しです。

LEGO Digital Designer 操作画面

そして作成したモデルをCtrl+Kで保存する事ができます。後は画像修正ツールで適当な正方形の画像に修正してfavicon.icoを作成すればOK。favicon.icoの作り方はcefa::blog » favicon.ico作成を参照。

via
LEGO Digital Designer : Virtual Building Software

Google URL ShortenerでURLを短く公開

何するものぞ?というサービスですが、要はURLを短縮公開できるように生成しなおすというサービスです。試しに作ってみたこのサイトのURLはこんな感じ。http://goo.gl/He0P

更に更にQRコードの生成機能も持っているみたい。http://goo.gl/He0P.qr

後ろに “.qr” を付与するだけ。こりゃ楽チン♪…なんだけれど何に使おうか。携帯向けサイトなんて作る気ないし。ウェブコンサルやっている人なんかは知っていると良いかも知れないネタかも。

via
Google URL Shortener

Your salary: リアルタイムで計上される賃金を眺める

Your salaryは自分の月給・日給・時給あたりをドルもしくはユーロで入力するとリアルタイムに賃金を計上していってくれるサイトです。業務の開始と同時に実行して就業時にどんな金額になっているのかを確認するとその日の気分に応じて満足度が判るような気がします。あと切ない利用方法として残業開始時にスタートして帰宅時にストップすると、自分が幾ら分サービス残業をこなしたかを確認する事ができます。

モチベーションが低下する事請け合いですね。

via
秋元@サイボウズラボ・プログラマー・ブログ: あなたの時給教えます

Loupe.js: 画像の拡大をしてくれるスクリプト

via
あらゆるページに拡大鏡を追加できる『Loupe.js』 | S i M P L E * S i M P L E

こういうツールが Javascript で提供されるとは素晴らしいです。さて早速動作検証をしました。配布元からの情報も含めて次のような感じです。

  • IEには対応していない Until now it’s not possible to get loupe.js work with IE.
  • application/xhtml+xml では動作しない

Document type の違いによる動作の可否については未だ詳細調べていませんが、動作確認してみたところ間違いなさそうです。一般的なサイトであれば問題なく動作するでしょうが、当サイトでは無理でした。残念。

以降、参考までに text/html で動作させた時のセッティングについて。

先ずはダウンロードしたアーカイブファイルを展開して loupe フォルダごと任意のフォルダにアップロードします。今回の場合はブログのカレントディレクトリ直下に hoge というディレクトリがあるものとして説明していきます。

基本的には Setting Up に記載されている通りなんですが、MTに埋め込むように書いてみました。エントリ毎にURLを持つようなサイトの場合 loupePath を必ず記載する必要があります。

<!-- ++ Loupe -->
<script type="text/javascript">var loupePath="<$MTBlogURL$>hoge/loupe/";</script>
<script type="text/javascript" src="<$MTBlogURL$>hoge/loupe/loupe.js"></script>
<!-- Loupe ++ -->

ここさえクリアしてしまえばエントリ中の img タグに id と onload=”initLoupe(this.id);” を記載する事で動きそうです。ああ、あと注意すべくは次の部分。

It’s not advisable to use the script multiple times on the same page.

未だ実用には耐えないのかもしれない。

参考
Loupe.js

ブログバトラーに登録してみた

最近巷でも噂のブログバトラーに登録しました。ところが配布されているスクリプトを見ると object 要素を document.write で書き出そうとしているし。いつもの如くではありますがスクリプトを書き換えました。もしも拙かったら連絡ください。削除します。

配布されるHTMLとスクリプト

<script id="blogbattler" type="text/javascript" src="http://blogbattler.com/js/blogbattler.js#249"></script><noscript><a href="http://blogbattler.com/"><img src="http://blogbattler.com/noscript.gif" height="288" width="140" alt="ブログバトラー"></a></noscript>

ポイントは js/blogbattler.js#249 の部分のIDです。私の場合は249なのでこれを後程スクリプトに使います。

ローカルに設置するスクリプトの作成

if (document.getElementById && document.createElement) {
var blogbattler = new Object();
blogbattler.bbOpenBattle = function(id) {
var bbBattleWin=window.open('http://blogbattler.com/battle.html#home_id=' + id,'bbBattle', 'dirctories=no,width=400,height=350,location=no,menubar=no,resizable=yes,status=no');
bbBattleWin.focus();
};
blogbattler.bbOpenBattleHistory = function() {
var bbBattleHistoryWin=window.open('http://blogbattler.com/battlehistory/index.html', 'bbBattleHistory', 'dirctories=no,width=925,height=400,location=no,menubar=no,resizable=yes,status=no');
bbBattleHistoryWin.focus();
};
blogbattler.bbOpenEditComment = function() {
var bbCommentEditWin=window.open('http://blogbattler.com/chara/edit_comment.html','bbCommentEdit','dirctories=no,width=200,height=200,location=no,menubar=no,resizable=yes,status=no');
bbCommentEditWin.focus();
};
var bb = document.getElementById('bbInsert');
var bbObject = document.createElement('object');
var bbParam = new Array(3);
for (var i = 0; i < 3; i++) {
bbParam[i] = document.createElement('param');
}
bbParam[0].setAttribute('name', 'movie');
bbParam[0].setAttribute('value','http://blogbattler.com/bbparts.swf');
bbParam[1].setAttribute('name', 'wmode');
bbParam[1].setAttribute('value','transparent');
bbParam[2].setAttribute('name', 'FlashVars');
bbParam[2].setAttribute('value','id=249');
for (var j = 0; j < 3; j++) {
bbObject.appendChild(bbParam[j]);
}
bbObject.setAttribute('data',  'http://blogbattler.com/bbparts.swf');
bbObject.setAttribute('type',  'application/x-shockwave-flash');
bbObject.setAttribute('width', '140');
bbObject.setAttribute('height','288');
bb.appendChild(bbObject);
}

具体的には本家から引っ張り出したスクリプトの document.write 云々の部分を書き換えて行く事になります。先程のIDは FlashVars に id=249 という値で渡してあげます。要は object 要素以下をDOM化してあげて id="bbInsert" を指定した div 要素に後述してあげれば良い形にしています。

実装

先程のスクリプトを blogbattler.js として保存した場合下記のように実装します。

<div id="bbInsert"><h2>Blog Battler</h2></div>
<script type="text/javascript" src="http://hoge/blogbattler.js"></script><noscript><a href="http://blogbattler.com/"><img src="http://blogbattler.com/noscript.gif" height="288" width="140" alt="ブログバトラー" /></a></noscript>

インデックスページをご覧頂くとわかりますが、確りと表示・稼動していますのでOKかなと。

参考URL
ブログバトラー [Blog Battler]

続きを読む ブログバトラーに登録してみた

Web Scouter で戦闘力を計測してみた

参照URL
ITmedia Biz.ID:サイトの“戦闘力”を計測する「Web Scouter」

Bookmarklet なのでユーザ側で橙・緑のどちらかを選択するだけで準備完了です。お目当てのURLで発動させるとスカウターが降りてきて戦闘力を計測してくれます。因みに私の点数は 520 で順位は 1937 位。自分の戦闘力の変化を Myスカウター でチェックする事もできますよ。

順位は兎も角 520 の戦闘力といえばサイヤ人襲来編がスタートした当初の悟空の戦闘力(416)より上です。やるな私。このブログを高重力フィールドに叩き込んでおけばパワーアップできるかも…なんてね。

[amazonjs asin=”B000FI7IDY” locale=”JP” title=”ドラゴンボールZ Sparking!NEO”]

参考URL
Web Scouter – inspect yatsu’s media power – FIGHT!

Litebox 1.0を導入

参照URL
小粋空間: Litebox 1.0 をブログに適用する

7月にマーキングしたまま放置していたLiteboxですが、漸く導入したので導入時の作業内容を覚書。以前のLightbox JS v2.0を導入してみたの他には注意するところも無いのですが、document.writeでの記述が無くなっているのがありがたい。スクリプトの修正を行うことなくストレートに導入できました。

提供されたソースの修正

とりあえずディレクトリの配置とかは個人の趣味なので置いておくとして、オリジナルのソースを書き換えた部分を差分にするとこんな感じです。

$ diff litebox-1.0.js.org litebox-1.0.js
23,24c23,24
< var fileLoadingImage = "images/loading.gif";
< var fileBottomNavCloseImage = "images/closelabel.gif";
---
> var fileLoadingImage = "http://cefa.sakura.ne.jp/pixmaps/litebox-1.0/loading.gif";
> var fileBottomNavCloseImage = "http://cefa.sakura.ne.jp/pixmaps/litebox-1.0/closelabel.gif
";

物理配置したオブジェクトの呼び出し時にフルのURLで記述しておかないと、呼び出し元が変動する場合(例えばブログであればインデックスとパーマネントとアーカイブで階層が異なる)には一定の動作が保証されません。

$ diff lightbox.css.org lightbox.css
48c48
<       background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing
hover */
---
>       background: transparent url(../../pixmaps/litebox-1.0/blank.gif) no-repeat; /* Trick
IE into showing hover */
53,54c53,54
< #prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 1
5% no-repeat; }
< #nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right
15% no-repeat; }
---
> #prevLink:hover, #prevLink:visited:hover { background: url(../../pixmaps/litebox-1.0/prevl
abel.gif) left 15% no-repeat; }
> #nextLink:hover, #nextLink:visited:hover { background: url(../../pixmaps/litebox-1.0/nextl
abel.gif) right 15% no-repeat; }

一方CSSはそれ自体が物理的に固定した位置に存在しますので相対指定でOKです。

テンプレートの修正

基本的にはUsageの通りです。

body要素の属性に onload="initLightbox()" を追記します。但し個別エントリーアーカイブに追加する時には、コメント呼び出し様の関数呼び出しがありますので次のようにします。

<body onload="individualArchivesOnLoad(commenter_name);initLightbox();">

Lightbox JSを組み込んだのだけれどでのindividualArchivesOnLoad呼び出しタイミングの問題は、Litebox 1.0組込みの際には該当しないようです。

次にhead要素の中に次の記述をします。lightbox.cssの呼び出しはメインで使っているCSSより後にしましょう。パスは私の設定内容をそのまま記述しているので人によってそれぞれです。

<link rel="stylesheet" type="text/css" href="<$MTBlogURL$>styles/litebox-1.0/lightbox.css" media="screen" />
<script type="text/javascript" src="<$MTBlogURL$>scripts/litebox-1.0/prototype.lite.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>scripts/litebox-1.0/moo.fx.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>scripts/litebox-1.0/litebox-1.0.js"></script>

後はimg要素記述時にrel属性を付けてやって…という部分ですが、基本的にはLightbox JSを組み込んだのだけれどと同じモディフィケーションで問題ありません。タイトルを付ける場合にはtitle属性を付けてやるだけでOKです。

サンプル

オフィシャルのサンプルをそのまま転載してみます。

参考URL
Litebox- Same great taste, less calories

「NHK時計」を表示したいのだけれど

参照URL
ブログツール「NHK時計」 (小粋空間)

懐かしいですね。これ。NHKがCGを駆使するようになってからは見かけなくなってしまいましたが、昼のニュースの時などはこの時計が表示されたものでした。私もサイト上で表示したい!…と設置してみましたがブラウザには出現せず。

提供されたストリングから参照しているスクリプトを参照してみると、天敵の document.write の姿。当サイトでは基本的には application/xhtml+xml でXHTMLを配信しています(IEでのブラウンジングに対しては text/html での出力という例外処理を行っていますが)。この application/xhtml+xml での出力では document.write をサポートしていない為、このようなスクリプトは処理できません。

というわけでなんとか出力する為の方法を考えてみたいと思います。

正規のスクリプトで表示できなくて残念です。ツールの開発をされている方々には是非ともDOMでの記述をお願いしたい今日この頃でした。

参考URL
NHKオンライン「ラボブログ」:NHKブログ | blog tools | ブログツール「NHK時計」