日記風味 2006年3月
日記風味2006年2月 < 日記風味index > 日記風味2006年4月
2006年3月30日 XMLのスタイルシート「XSLT」 RSSをブラウザで表示
Webサイトの更新情報を提供する場合などに使われているRSSはなかなか便利で、ブログなどでは標準で用意されていることもあってあっちこっちで見かけます。
ただ、実体はサイトの更新情報が詰め込まれただけで、表示に必要な情報などがまったく無いXMLファイルですから、 ブラウザなどで普通に見てしまうとソースがそのまま見えるだけだったりとかなり悲しい表示になってしまいます。しかし、このXMLファイルにスタイルシートを適用させることで、ブラウザで閲覧可能な文書にすることができます。
XMLは汎用的なデータを扱うためのマークアップ言語なのに対し、HTMLは文書データを扱うことに特化したマークアップ言語です。 ブラウザはこのHTMLを解析し閲覧することを主目的としたソフトウェアですから、XML汎用データをHTML文書データに変換してやればブラウザで閲覧可能になるということになります。 そして、このデータ変換に使えるのがXMLのスタイルシートであるXSLです。
このXSLはスタイルシートとは言ってもHTMLで主流のCSSとは大きく違うものになっていて、テキストの整形や変換などの各種処理が可能な簡易スクリプト言語です。 また、変換部分に特化したものとしてXSLTも存在していて、今はどちらかというとこのXSLTの方が主流のようです。
XMLをブラウザが表示するまでの流れは次のようになります。
まだ細かい部分が出来上がっていませんが、XSLTを使用してRSSをブラウザに表示する例としてウチのサイトのRSSを紹介しておきます。 ブラウザでソース表示などをしてソースを見ると、とてもHTMLには見えないものですがブラウザで正常に表示されていると思います。
ちなみに、このXSLTを使用する最大の利点は、実はRSSをブラウザで表示できるようにすることではなく、Webサイトのメンテナンス性の向上にあります。
基本的にHTMLは文書データを扱うためのものであり、一度HTMLでデータを作成してしまうとそれ以外の形式への応用がしにくい存在になります。 しかし、XMLで汎用的なデータを作成しておき、XSLTでXMLから文書としての体裁の整ったHTMLを生成するようにしておけば、XSLTを新しく書き起こすだけで元となるデータ(XML)を再編集することなくHTML以外の文書形式、 あるいは文書という形にとらわれないファイル形式への変換が簡単に可能になります。
HTML+CSSでは、ファイル数の多いHTMLは変更が容易ではないため、CSSを変更することによる見栄えの変更しか行えませんでしたが、XML+XSLTを使えば、大量のコンテンツデータそのものであるXMLを変更することなくXSLTの変更のみでHTMLの文書構造を変更することができるため、より柔軟な対応ができることになります。 とくに、扱うデータ（コンテンツ）の多いサイトではとても有効な手段の一つでしょうね。
また、元データはXMLなのですから自分の好きなタグを作り、それでマークアップすることでWebサイトを構築することもできます。もちろん、全部自分専用の独自タグでWebサイトを作ってしまうのも可能です。 最終的にHTMLにするのはXSLTですから、HTMLのタグが登場するのはXSLファイルの中だけということですね。
HTMLソースのパクリ禁止とか言ってる人達は実践してみてはいかがでしょうか。素人さんには絶対にパクれないし、XSLTを理解していてパクることができる人達は別にパクろうともしないでしょうし。
もっとも、一般的なブラウザなら問題ないですけど対応していないブラウザや検索エンジンのロボットたちには理解不能なファイルになってしまいますが……
関連記事：XSLTプロセッサ「Xalan」でXMLをHTMLに変換する
2006年3月25日 Windows版 Ever17のムービーを再生する
Ever17 エンディング 年表って実は結構需要があるのですが、誤字がいくつか見つかったのでエンディングムービーを見直してきれいに修正してみた。
今後もまたムービーを見る機会があるかもしれないので、ムービーの見方を自分が忘れないようにメモ書きをしておこう。とはいえ、とても簡単なのですが。
ゲームCD-ROMまたはインストール後にハードディスクに展開されているムービーファイル(拡張子がe17）の拡張子をaviに変更して、バイナリエディタで先頭1バイトの「FF」を「00」に変更する。これだけでWindows Media Playerなどで再生可能になる。
2006年3月18日 Javascriptを使ってツールチップを表示
先日、Javascriptを使ったポップアップで引用元の表示をしたのですが、せっかくなので引用元だけでなく、ブラウザ標準のツールチップ表示の代わりとして表示するようにしてみました。
改良点は以下のような感じです。
- ブラウザによって実装がまちまちなので、FirefoxとIEの場合だけこの機能が有効になるようにonload時にブラウザの判断を行う
- onmouseover時にその要素がツールチップの対象だったらtitle属性の退避をしてブラウザ標準のツールチップが出ないようにする
- ブラウザがIEの場合、IE独自のfilterを使用して半透明表示する
- ブラウザがFirefoxの場合、Firefox独自のmoz-opacityとmoz-border-radiusを使用して半透明表示及びツールチップの枠を丸くする
- ウィンドウの大きさとツールチップの大きさを判断して、右や下にはみ出ないように計算して表示する
詳細は実際にJavascriptファイルを見てもらえば良いと思いますので簡単に説明。Javascriptはごりごりと書いていますのでかなり汚いですケド。そもそもスタイルシートは外だしにするべきだよなぁ。
ブラウザの判断
ブラウザの判断はonloadイベント内で「navigator.userAgent」を使用して判断しています。当然のことながらユーザエージェントを偽称している人は正常に動作しませんが。
if(navigator.userAgent){
ie = navigator.userAgent.indexOf("MSIE 6.0")!=-1 ||
navigator.userAgent.indexOf("MSIE 7.0")!=-1;
ff = navigator.userAgent.indexOf("Firefox")!=-1;
}else{
return -1;
}
マウスイベントの追加
onloadイベント内でHTML文書からツールチップを出したい要素を抽出してイベントの埋め込みをします。これによりHTMLを加工することなくマウスイベントの取得ができます。静的な文書と動的な動きの分離ができますし。
以下の例ではa要素(リンクの部分)にイベントを埋め込みます。
for(i=0;i<document.getElementsByTagName("a").length;i++){
document.getElementsByTagName("a")[i].onmouseover=toolChip;
document.getElementsByTagName("a")[i].onmousemove=mmove;
document.getElementsByTagName("a")[i].onmouseout=closePopup;
}
ウィンドウサイズとマウスの位置を取得
マウスのイベントが発生するたびにウィンドウサイズとマウスの位置を取得します。ウィンドウサイズはのちほどツールチップを表示するときのはみ出し防止に使います。
注意が必要なのはマウスの位置などを取得するときスクロールされていることも考慮しなくてはならない点です。これをしないととんでない位置にツールチップが表示されてしまいます。
マウスイベントで拾えるのは現在画面上に表示されている画面内のマウスの位置ですが、ツールチップを表示するときはスクロールされた分も含めて位置を設定しないといけません。
winw = (window.innerWidth) ?
window.innerWidth : document.documentElement.offsetWidth;
winh = (window.innerHeight) ?
window.innerHeight : document.documentElement.offsetHeight;
if(document.all) { /* IE */
x = window.event.clientX + 5 + document.documentElement.scrollLeft;
y = window.event.clientY + 20 + document.documentElement.scrollTop;
sw = document.documentElement.scrollLeft;
sh = document.documentElement.scrollTop;
} else {
x = ee.clientX + 5 + scrollX;
y = ee.clientY + 20 + scrollY;
sw = scrollX;
sh = scrollY;
}
title属性の退避と表示開始時間の設定
ツールチップを表示する要素にマウスが来たら、ブラウザ標準のツールチップが出ないようにtitle属性を一時的に退避させます。 このとき同時にツールチップを出すまでの時間をずらすためにtimerをセットします。timerセット後もマウスの位置をonmousemoveイベントで随時取得するようにすることで、 ツールチップ表示前にマウスが移動しても追従して表示させます。
また、表示後に別のtimerをセットしてブラウザ標準のツールチップのように一定時間後に自動で消える処理を入れることも可能でしょう。
以下の例ではマウスが該当の要素の上に乗ってから0.7秒後にツールチップを表示します。
dd = this;
timer = setTimeout('toolChip2()', 700);
if(dd.title){
tt = dd.title;
dd.setAttribute('title','');
}
else{
tt = null;
}
ツールチップ表示のためのリストを作成
実際に表示の段階に来たら、まず表示するテキストのリストを作成します。
以下の例では先ほど退避したtitle属性を指定していますが、これ以外にもcite属性やhref属性なども作成しています。
toolChip.toolNode = document.createElement('ul');
if(tt){
e1 = document.createTextNode(tt);
e2 = document.createElement('li');
e2.style.borderBottom = 'none';
e2.style.fontSize = 'small';
e2.style.backgroundColor = 'inherit';
e2.style.color = '#000000';
e2.style.padding = '0px';
e2.style.margin = '1px';
e2.appendChild(e1);
toolChip.toolNode.appendChild(e2);
flag = true;
}
ツールチップの表示
ツールチップの表示ですが、はみ出し防止のために出来上がったツールチップのサイズを知りたいのですが、なぜかIEではうまく取得できなかったので一旦画面外に表示させてサイズの取得を行っています。 その後、はみ出さないように計算を行って表示位置を決定後にその位置に移動という方法になっています。
また、IEでは親要素の表示サイズに影響されて（実際は親要素ではないのですが、親だと誤認しているっぽい）サイズが小さくなってしまうのでサイズの再設定も行っています。
with(toolChip){ // 仮表示
toolNode.style.backgroundColor = '#ffffdd';
toolNode.style.listStyle = 'none inside';
toolNode.style.listStyleImage = 'none';
toolNode.style.position = 'absolute';
toolNode.style.overflow = 'visible';
toolNode.style.left = '0px';
toolNode.style.top = '-1000px';
toolNode.style.zIndex = '100000';
toolNode.style.borderColor = '#ff9966';
toolNode.style.borderStyle = 'solid';
toolNode.style.borderWidth = '1px';
toolNode.style.padding = '0px';
toolNode.style.margin = '0px';
document.body.appendChild(toolNode);
toolNode.style.width = toolNode.offsetWidth;
toolNode.style.height = toolNode.offsetHeight;
}
// はみ出る部分の再計算
var mx;
var my;
mx = winw - (x + toolChip.toolNode.offsetWidth + 40);
my = winh - (y + toolChip.toolNode.offsetHeight + 30);
// 再表示
with(toolChip){
toolNode.style.left = x + ((mx < 0 ) ? mx : 0) + 'px';
toolNode.style.top = y + ((my < 0 ) ? my : 0) + 'px';
}
半透明表示
IEとFirefoxで半透明処理は独自実装になっているため、それぞれ専用の半透明処理を行っています。また、Firefoxは枠を丸くすることができるのでそれも同時に行います。
if(document.all) { /* IE */
toolChip.toolNode.style.filter = 'alpha(opacity=80)';
} else {
toolChip.toolNode.style.MozOpacity = '0.8';
toolChip.toolNode.style.MozBorderRadius = '5px 5px 5px 5px';
}
ツールチップの削除とtitle属性を元に戻す
マウスが他所に移動したら表示を消します。このとき、退避したtitle属性を元に戻すのを忘れないようにします。
if(tt){
this.setAttribute('title',tt);
}
clearTimeout(timer);
if (toolChip.toolNode) {
document.body.removeChild(toolChip.toolNode);
toolChip.toolNode = null;
}
2006年3月15日 ポップアップで引用元の表示
IE7でも「before」や「after」が使えないようなので、IEシリーズでも引用元を表示できるようにJavascriptで実装してみました。
しくみはonload時にblockquote要素を探して存在していたらonmouseoverなどのイベントを埋め込み、イベント発生時にblockquote要素のcite属性を取り出してそれをポップアップで表示するというものです。
blockquote要素とcite属性を正しく書いておけば外部のJavascriptファイルを読み込むだけで動作するのですが、ウチのサイトではJavascriptを使っていなかったので日記風味関連のHTMLすべてにJavascriptの読み込みの設定をしなくてはいけないのがアレです。
FirefoxとIE6でしか動作確認をしていないので、他のUAでどうなるのかはまったく不明ですけど。
以下は動作確認用の引用です。
(=゜ω゜)ノドラです。只今EP4のドロップ率とテーブルが変更してあるそうで、珍しいものが続々発掘されてますお。
2006年3月18日にこの機能のパワーアップをしました。詳細はJavascriptを使ってツールチップを表示を参照してください。
2006年3月14日 らくがき
次期トップ絵を描いていたらなんか行き詰まったので気分転換に椎名さんをらくがき。
2006年3月12日 Internet Explorer 7(IE7) Beta 2 Preview を使ってみた
メディアプレイヤー10と同じくWindows XP SP2専用になってるのですな。仕方がないのでWindows XPの入っているノートパソコンにインストールしてみた。
個人的に注目している点は次の4点。
- ダブブラウズ機能
- Ajaxの標準に準拠
- RSSフィードに対応
- 対応CSSの強化
評価の前に一言。これから出てくる項目や機能などの全てはFirefoxではすでに問題なく動作しているものばかりです。
まずはタブブラウズ機能ですが、まあこれはあって当然の機能ですし使ってみた感じではまったく問題なく使いやすいですな。この機能に関して@ITに変なのが湧いていましたがスルーの方向で。
次にAjax。残念ながら試す環境が無いので評価はできないのですが、とりあえずマイクロソフトの言うことが本当ならかなり良い感じですね。 企業内のWebシステムはAjaxを使ったものが増えるでしょうし、このサイトでも実験的にAjaxを取り入れてみようかと思ってますし。
- Ajax
- 「Ajax」とは「Asynchronous JavaScript and XML」の略で、JavaScriptの通信機能(XMLHttpRequest)とDOMを使ったHTMLの動的書き換えを行うことにより、 Webページのリロードを行うことなくWebサーバと通信を行いその結果をUA(ブラウザ)に表示を行うしくみのこと。IE6まではこの「JavaScriptの通信機能」にActiveXを使用していたため、 他のブラウザと区別をしてAjaxを使ったWebサイトを構築しなくてはならなかった。
RSSフィードに対応に関しては特に問題なしかな。これでわざわざRSSリーダープラグインとかを導入する必要もなさそうです。
最後にCSSですが、背景画像を固定にしても問題なく表示されるようになりました。これでIEの人にも結構面白い物を見せることができそうです。 ただ残念なことに「before」や「after」は相変わらず使えません。当サイトでもこれらを使って引用元の表示などを行っているのですが・・・。
しかし、CSSではないですがabbr要素がサポートされましたね。ただ、IE6以前との互換性のためかデフォルトのスタイルシートでは表示に変化は無いようです。そこで早速、当サイトのスタイルシートを変更してabbr要素の部分が目立って見えるようにしてみた。
まあこれらよりも数倍重要な部分がIE7でもサポートされませんでしたが・・・それはXHTML1.1。「application/xhtml+xml」を理解しないのは相変わらずのようです。XHTML1.1からは「application/xhtml+xml」でないとダメなのにいつまで無視しつづける気なのやら。
こんな調子ですので結論はこのままFirefoxを使っておくのが一番良いということになりました。
2006年3月9日 ウチは閲覧規制対象のサイトです
このサイトは子供には有害なコンテンツがあるらしく、kids gooの閲覧規制対象になっているのは知っていましたが・・・・まさか、今常駐している顧客先のWeb閲覧の規制対象になっているとは知らなかった。
理由はやはり18禁らしい。職場でスタイルシートの例が欲しかったので、ちょっくら自分のところのファイルでも取ってくるかと「mainstyle.css」ファイルだけにアクセスしたのに見事にフィルターに引っかかった。
NTT直系のIT関連企業のくせにIT関連の技術情報を日記などで公開しているこのサイトを規制するとは何事じゃこらぁ〜〜〜〜〜っ！！スタイルシートファイルだけにアクセスしたのに規制に引っかかったということは、 このドメインは丸ごと規制の対象になってますな・・・。
というか、無名な独自ドメインのここがNGってことは、いったいどれだけのサイトが規制対象として登録されているのか興味があります。
2006年3月5日 Google Earth
今更ですがGoogle Earthを使ってみました。
人工衛星から撮影された地球の映像を見ることができるのですが、山などの立体処理もしっかりとやっていて本当に空を飛んでいる感じに見えるのはすごい。しかもかなり細かく撮影されているので、車の存在も十分に確認できる。
早速自分の家を空から見てみたのですが、家の駐車場にあるフィット君までしっかりと見えました。渋滞の様子を見てみるとなんだか笑えるというか頑張れと励ましたくなるというか・・・。しかし、世界中どこでもこのように全部見れてしまうのはなんだかワクワクしますね。
とりあえず、地球と聖地「秋葉原」の写真でも紹介。
2006年3月4日 電気用品安全法
物凄い法律が出来るみたいです。その名も・・・中古電化製品販売弾圧法
そんな法律はありません。「電気用品安全法」です。
参考ページ「電気用品安全法のページ」
ちなみに主旨は規制緩和。簡単に言うと、誰でも電気製品を売れるようにするかわりにちゃんと検査機関を通したものでないとダメですよということです。
あっちなみにこの法律が適応されるのは４月からだそうです。
いえ、すでに施行されています。ただ、経過措置として猶予期間があっただけです。電気製品の種類によって2006年4月から順次期限切れになります。
ちなみに、「適応」ではなくて「適用」。
2006年3月3日 XHTML1.1とコンテントタイプ
実は数日前から新規のURIにコンテントネゴシエーションを使ったファイル拡張子なしのURIを採用しています。
ついでなので、新しい文書コンテンツはXHTML1.1とHTML4.01の二つをコンテントネゴシエーションでUAごとに使い分けようと思っていたのですが、IEがさぼって「Accept: */*」を送ってくるのであきらめました。
実は頑張ればできないこともないけど、IEのためだけにそのようなことをするのは労力に見合わないですから。
HTML4.01のコンテントタイプは「text/html」ですが、XHTML1.1は「application/xhtml+xml」です。UAがFirefoxならAcceptでXHTMLとHTMLの両方を、それもXHTMLの方に高い優先度をつけてリクエストしてきてくれるので、 コンテントネゴシエーションでXHTMLを優先的に返すことができるのですが、IEの場合はHTMLのほかは*/*でまとめられちゃってる上にリクエスト中にコンテントタイプの優先度が設定されていないので、 サーバ側で設定されている優先度にしたがって優先度の高いXHTMLを返すと「application/xhtml+xml」を理解できずにファイルダウンロードダイアログを出してくれます。 コンテンツの種類は何でも大丈夫と宣言しておきながらこの仕打ち、というか「application/xhtml+xml」を見ることができないとは、いや〜、よくできたブラウザですね。
サーバ側でXHTMLとHTMLの優先度を同じに設定すると、XHTMLを優先に使用するとリクエストをしてくれているFirefoxはXHTMLが見られて、なにも優先度の指定のないIEはAcceptに宣言された順番が優先されHTMLが見られるということになるので結構良い感じなのですが、 このサーバ側で優先度の設定というのがコンテンツファイルごとにやらないとダメなので面倒すぎ。IEのためにこんなことをやってられないっての。
2006年3月2日 マランツ(marantz) PM-17SA ver.2 を購入
マランツ(marantz)のプリメインアンプ「PM-88SE」が壊れたのが4年前。それからはずっとパイオニアのAVアンプを使っていたのですが、あまりにも薄っぺらい音に我慢の限界がやってきてしまいました。
というわけでほとんど衝動買い状態ではありますがマランツ(marantz) PM-17SA ver.2を購入。
マランツのアンプの特徴は、コテコテすぎない結構サッパリ＆すっきりサウンドでありながら豊かな低音と、DENON以上に角の丸いやわらかい音というところでしょうか。
それにしても、流石にこのくらいの価格帯になると音の厚みが違いますな。そして定番ではありますが、今まで聞こえていなかった音があちこちから聞こえてくる。次から次へとCDを取り出して聞いてしまったよ。アニメとゲームばかりだけどな〜〜。
そして当然のごとくスピーカーが負け始めました。どうしたものやら。