2038年問題とUNIX時間

コンピュータにおける2038年問題をご存知でしょうか？
ちょうど猫さんと鰹くんがコンピュータの日付や時刻に関してお話しているようなので、ちょっと会話を覗いてみましょう。

：

鰹「最近ね、2038年01月19日の日付のスパムメールがよく届くんだけど、どうしてそんな未来のメールが届くの？」
猫「それはね、メールの送信日付（Date:フィールド）をメールの送信者が付けることになっているのを悪用して、スパムメールが常に最新のメールとして上位に表示されるように、故意に未来の値にしているんだね」
鰹「でもなんで、2038年01月19日なんてキリの悪い日付なの？2100年とか3000年の方がキリが良いじゃない」

あれ、鰹くんのいっていることって何処かおかしいですね。
鰹くんと猫さんがお話を続けているようなので、もう少し見てみましょうか。

猫「そうだね。動物の世界では2038年よりも3000年の方がキリが良いかも知れないけど、コンピュータの世界ではそうでもないんだよ」
鰹「それって、どういう意味？」
猫「多くのコンピュータアプリケーションでは、『1970年01月01日からの経過時間』で日付と時刻を表現しているんだよ。そして、2038年01月19日03時14分07秒(UTC)/12時14分07秒(JST)の1秒後は、経過時間が負の値になって正しく日付を処理できないこともあるんだ」
鰹「え？それってまるで2000年問題みたいじゃん」
猫「そうだね。2038年01月19日03時14分08秒(UTC)/12時14分08秒(JST)は、2000年01月01日00時00分00秒と同様に、コンピュータの世界ではとってもキリの良い数字といえるかもね」

UNIXというOSやC言語で書かれたアプリケーションでは、「紀元日時（1970年01月01日00時00分00秒）からの経過時間を示す秒数」で日付・時刻を表現しているのです。
また、UNIX/C言語登場以降の他の処理系（OSやコンピュータ言語）でも、同様または類似した方式を採用しているものも多くあるようです。

そして、経過秒数に32ビット符号付整数を用いると、2038年01月19日03時14分07秒(UTC)が2,147,483,647(0x7FFFFFFF)秒経過した状態であり、その1秒後は経過秒数が-2,147,483,648(0x80000000)という負の値になります。
＃ -2,147,483,648は2の補数表現を用いる処理系の値であり、それ以外の場合はこの限りではありません

勿論、経過時間にミリ秒単位の64ビット符号付整数を用いる処理系や、数値1桁に文字1文字と同じ領域を割り当てる処理系もありますので、全てのシステムやアプリケーションでこの問題が発生する訳ではありません。

例えばHP-UX（32ビット）では、1901年12月13日(金) 20:45:52(UTC)から2038年01月19日(火) 03:14:07(UTC)まで扱えるそうで、経過秒数が32ビット符号付整数の最小値(-2,147,483,648)であれば、1901年12月14日(土) 05:45:52(JST)になるようです。
しかし同じHP-UXでもHP-UX（64ビット）では、1901年12月13日(金) 20:45:52(UTC)から9999年12月31日(金) 23:59:59(UTC)まで扱えるそうです。これは、下限は互換性のためか32ビット版と同じ値に揃え、上限は適当な値として10000年未満に止めているからなのでしょう。

鰹「そうか。日付・時刻を2038年01月19日00時00分位にしておけば、多くのアプリケーションで正しく扱える範囲の未来だから、多くのメールソフトで常に最新メールとして扱われるんだね」
猫「そうだね。経過秒数として32ビット符号付整数が使われているメーラが多いなら、一番安全な未来日時ってことになるね」

gooメールとYahoo!メールでは、2038年01月19日03時14分07秒(UTC)や2038年01月19日12時14分07秒(JST)のメールは、「38/01/19 12:14」とか「2038 1/19(火) 12:14」とかいうように表示され、日時順に並べると最新メールの位置に表示されました。

しかし、gooメールでは、2038年01月19日03時14分07秒(UTC)よりも未来のメールは、「70/01/01 09:00」という紀元日時の表示になり、最も古いメールになりました。
また、Yahoo!メールでは、2038年01月19日03時14分08秒(UTC)のメールが「1901 12/14(土) 05:45」、2039年01月19日03時14分08秒(UTC)のメールが「1902 12/14(日) 05:45」などと経過秒数を負の値として計算した日付に変換され、手元のメールの中では一番古い位置に表示されていました。

あっそういえば、猫さんと鰹くんはまだお話を続けているようです。
＃ 忘れていました（をぃ）

鰹「ってことは、スパムメールの発信者は変なところに気が利くのね」
猫「をぃをぃ。そういうのは、気が利くじゃなくて狡賢いっていうの。自分の利益だけを考えて、相手のことは全く考慮していないんだから！」
鰹「そっか、ごめんなさい。でも、2038年には2000年問題と同じような事態になるのかな」
猫「そうだね。経過秒数にもっと桁数の多い整数を使えばいいんだけど、全てのシステムが2038年問題に対応するまでには時間が掛かるかも知れない。できれば、2000年の苦い経験を活かして早めに対応してもらって、あれほど混乱しないで欲しいね」

めでたしめでたし

---

２０３８年からのメール - ぴよこ日和 2005年11月24日23:37
過去からのメール。 - オオカミの遠吠え通信 2006年05月06日12:04
2038年問題 - Wikipedia
2の補数 - Wikipedia
ctime(3C) - HP-UX 11i バージョン 2 リファレンス Vol. 6

色深度24ビットPNG

色深度24ビットPNG

色深度8ビットPNG

色深度8ビットPNG

色深度4ビットPNG

色深度4ビットPNG

色深度1ビットPNG

色深度1ビットPNG

記事のQRコードを作ろう

昨日はgooブログにおける各記事の携帯向けPermaLinkの法則を紹介しましたが、今日は携帯向けPermaLinkをQRコードに変換してみました。
このQRコードを携帯のカメラ（バーコードリーダ）で撮影すれば、簡単にその記事を携帯で閲覧したり、携帯で閲覧する人にメールでお知らせできます。
＃ 読み取るのは、携帯じゃなくてもいいんですけどね

先ずは「携帯向けPermaLink」に載っている法則で、自分の記事のURL（一般向けPermaLink）を携帯向けPermaLinkに変換します。PermaLink変換の法則は非常に簡単なのですが、それでもやっぱり面倒だという人は、あれとかこれとかな方が便利なブックマークレットを作ってくれるまで我慢しましょう（をぃ）たようです。

次に、携帯向けPermaLinkをQRコードに変換します。テキストからQRコードへの変換は、QRコード作成サイトやQRコード作成ツールを使い、QRコードの種類は「フリーテキスト」を選ぶと無難です。
取り敢えず、QRコード作成サイト／ツールを6種類ほど使ってみました。

1. QRコード作成＆活用のススメ
   
   自由テキスト(小) QRコードを作成できるサイト。
   入力形式「自由テキスト」か「URL」が、携帯向けPermaLinkに使用できる。
   大きさやセル色も選択できる。
   出力形式は、JPEG画像。
   お手軽さは、一番かも知れない。
   


2. QR一発作成
   
   サイズ小 QRコードを作成できるサイト。
   入力形式は、「テキスト」のみ。
   大きさを選択できる。
   出力形式は、JPEG画像。
   広告ロゴなしQRコードの作成には、メールアドレスの送信が必要。
   


3. QRコード[二次元バーコード]作成 【無料】
   
   セル倍率2倍 QRコードを作成できるサイト。
   入力形式は、「テキスト」のみ。
   バージョン（セル数）、セル倍率（大きさ）、セル色、背景色などを選択できる。
   出力形式は、PNG画像、JPEG画像、GIF画像。
   「利用回数が多い場合は回数の制限を行う場合がある」という注意書きあり。
   


4. QRWindow Version 2.07
   
   フリー入力(90px) QRコードを作成できるツール（Windows系OSのみ）。
   入力形式「フリー入力」か「ブックマーク」が、携帯向けPermaLinkに使用できる。
   大きさは、300ピクセル以下を1ピクセル単位で指定する。
   複数URLの一括変換もできる。
   出力形式は、ビットマップ画像ファイル。
   「フリー入力」の90ピクセルか135ピクセルがお勧め。
   


5. 2次元コードメーカー
   
   フリー入力(自動) QRコードを作成できるツール（Windows系OSのみ）。
   入力形式「フリー入力用」が、携帯向けPermaLinkに使用できる。
   自動調整の他に、誤り訂正レベルやセルサイズなどの任意調整もできる。
   出力形式は、ビットマップ画像（ファイルまたはクリップボード）。
   「フリー入力用」の自動調整で、147×147ピクセルのQRコードが生成された。
   


6. QRファクトリー Ver.3.2
   
   テキスト(360dpiの小) QRコードを作成できるツール（Windows系OSのみ）。
   入力形式「テキスト」か「ブックマーク」が、携帯向けPermaLinkに使用できる。
   自動調整の他に、誤り訂正レベルやセルサイズなどの任意調整もできる。
   出力解像度は、デフォルトプリンタ（360dpi）、600dpi、1200dpiの何れかを選択。
   出力形式は、ビットマップ画像またはEMF（ファイルまたはクリップボード）。
   印刷に使用できるEMF出力はお勧め。
   


7. QRMillX 1.2a
   QRコードを作成できるツール（Mac OSX 10.3.9以降）。
   入力形式「Free Text」が、携帯向けPermaLinkに使用できると思われる。
   誤り訂正レベルやバージョン（セル数）の調整もできるようだ。
   出力形式は、画像またはPostScriptらしい。
   残念ながら試していないので、サンプル画像はない。
   

ということで、携帯向けPermaLinkの長さにあったサイト／ツールでQRコードを作成して、記事の隅にでも貼り付けてみてはいかがでしょうか？

---

携帯向けPermaLink
● 携帯向けPermaLink(の記事) 2005年11月14日18:16
● gooBLOG Tips - あれとかこれとか　（Lefty）
● 作ってみよう！自由テキスト - QRコード作成＆活用のススメ
● QR一発作成 - NASCA
● QRコード[二次元バーコード]作成 【無料】 - cman
● QRWindow Version 2.07 - QRコード.org
● 2次元コードメーカー - KDDI au
● QRファクトリー Ver.3.2 - 作ろうiモードコンテンツ - NTTドコモ
● QRMillX - Osamu Shigematsu's PukiWiki

---

● 2005年11月21日追記
早速、便利なブックマークレットを作ってくださったようですので、利用しちゃいましょう！

● TIPS:ケイタイの個別記事URLを作成する - あれとかこれとか　（Lefty）　2005年11月20日23:56

意図した隠蔽：改竄

ブログにおける引用とかリンクとかいうのはご存知でしょうか？
ちょうど猫さんと鰹くんがブログに関してお話しているようなので、ちょっと会話を覗いてみましょう。

：

鰹「犬さんがね、『引用は、（中略）著作権侵害だよ、（中略）無断リンクもね』って言ってたんだけど、猫さんもそう思うよね？」
猫「え、嘘でしょ？あの有名な犬さんのことならよく知ってるけど、そんなことを言うような方じゃないんだけどなぁ。本当に犬さんがそんなこと言ってたの？」
鰹「そうだよ。犬さんに直接聞いたんだもん、『引用は、（中略）著作権侵害だよ、（中略）無断リンクもね』って」


あれ、鰹くんのいっていることって何処かおかしいですね。
猫さんが質問を続けているようなので、もう少し見てみましょうか。


猫「その（中略）ってのがすごく気になるんだけど、犬さんが言ってたことを捻じ曲げていたりはしないかい？」
鰹「そんなことないよ。犬さんが言ったこと全部メモして、その中から要点を抜き出したら『引用は、（中略）著作権侵害だよ、（中略）無断リンクもね』ってなったんだもん」
猫「もしかして鰹くんの解釈、それこそ引用の仕方が間違ってるんじゃないのかな。そのメモがあったら見せて欲しいんだけど、どう？」
鰹「うんあるよ、ここに」

● 盗作って、何ですか？
他人の作品をそのまま書き写すのは勿論、章や節やフレーズだけ入れ替えたり、口調だけ変更した作品を発表すると、盗作（著作権侵害）になる可能性が高いと思うよ。

● 引用しちゃいけないのですか？
実はね、引用は自由にしてもいいんだよ。勿論、作者に連絡する必要もないし。
ただしね、どこからどこまでが引用かハッキリしなければいけないし、出典（もとの作品）もキチンと書かないと駄目だけどね。
つまり、引用した部分を適当にちりばめて全部が自分の作品に見えるようにしたり、それこそ全部書き写して「これ、ボクが作ったの」というのは通用しないから、誤解しないでね。

● Web上での引用や参考ページについて
今までのは、紙で出版する場合のお話に聞こえたかも知れないけど、実はブログで作品を公開する場合も同じようなことが言えるんだ。
例えば、引用した内容とその出典を明確にするために、Webで使用できる引用のためのタグとか、出典のためのタグとか、クリックするだけで出典に辿り着ける仕組み、つまりリンクを張るためのタグがキチンと用意されているんだ。
これは引用の場合だけじゃなくて、紙で言うことの参考文献にあたる場合にも同様で、参考ページへのリンクを張ることができるんだ。
紙の場合は、出典の書名、出版社名、ISBN番号などを引用者が明記して、あとは読者に探してもらうしか手段がないけど、ブログでは出典の記事にリンクを張るだけで簡単に世界中で情報が共有できるから、凄くいいよね。こういった仕組みを作り上げた人たちには、感謝しなきゃね。

● ふつー無断リンク禁止なのですか？
最近は「リンクする場合はブログ管理人の許可を得るのがマナーだ」とか「無断リンクしてはいけないルールです」とかいう人も出てきたみたいだけど、World Wide Webの成り立ちを知っていれば、Web上で引用したり参考にした場合には出典のページにリンクするのが当然だなんだけどね。
結局、「無断リンク禁止」とか「リンクしたら教えてね」ということをブログ閲覧者に「お願い（希望する）」ことは自由だと思うけど、そのお願いの通りにするかどうかは閲覧者が決めることであって、ブログオーナが決めることじゃないんだよね。仮にそれが最近ブログを始めた人であったとしてもね。

犬さんとの談話メモ
赤太字、青太字、緑太字は、引用者による。

もう分かりましたね。鰹くんは、「盗作」とか「引用」とか「リンク（出典に自動的に辿り着くための仕組み）」を混同しているんです。しかも、自分の解釈（主張）にとって都合の良いところだけを抜き出して上手に並べ替えたり、都合の悪いところを隠蔽することで、あたかも犬さんが「引用は、著作権侵害だよ、無断リンクもね」と言ったかのように改竄して、猫さんに質問してしまったんですね。


鰹「そぉかぁ、僕は『盗作』とか『引用』とか『リンク』を混同していたんだね」
猫「それに、引用している部分が飛び飛びじゃない。こんなに長いメモの異なるブロックから言葉だけを取り出して、それを繋げちゃ駄目よ」
鰹「うっ」
猫「もしかして鰹くんがブログで発表した西部劇のシナリオに対して、羊さんがブログで考証してたけど、それが原因なのかな？羊さんのブログには、鰹くんの小説を引用しておかしな点を指摘してあったし、鰹くんの記事に対してもリンクが張ってあったけど」
鰹「実は鮭くんに羊さんのブログの考証記事を教えてもらったので、有名な犬さんの言葉を借りて『引用は、著作権侵害だよ、無断リンクもね』って言いたかったの。でも、大切なことを意図的に隠蔽して犬さんの言葉を改竄したのはまずかったな。犬さんにも謝らなきゃ」


これは、鰹くんの経験不足による「誤解」なのでしょうか。
もしも、猫さんを騙すためにわざと掻い摘んで話したのだとしたら、どうなるのでしょうか。
また、猫さんは鰹くんよりも犬さんのことをよく知っていたから事なきを得ましたが、相手が犬さんのことを全然知らないけど鰹くんとは仲が良い鮭くんだったら、どうなるのでしょうか。
＃ 猫さんや鮭くんが騙されて、犬さんに対する考えさえも…

実は今朝、こんな記事を見かけてこの記事の草稿を書いていました。

他人のブログに引用されるために書いているわけではありません。

『私的使用と言っても、ホームページやブログなどのように第三者への公開が

発生する場合は著作権の侵害になります。

（中略）

第三者から見える／見えないが論点となります。

「自由にリンクしていいよ」と明記されたページ以外へのリンクは、

確認をとっておくのがエチケットでしょう（「とほほの著作権入門」さんより引用）。』

今見たら、削除されていました
太字も改行も（中略）も原文のまま。

この引用は、出典へのリンクもないし、（偶々出典が著名なページなようで出典自体は見つけることはできましたが）一体どこからどこまでを引用したのかもさっぱり分かりませんでした。
仕方がないので、どこをどう引用したのかを考察してみました。

日本国における著作権についての注意点・・・というか、私(とほほ)自身は著作権について、こう解釈しているというものをまとめてみました。
（中略）

■ 私的ホームページでの使用はOK？

いいえ。私的使用と言っても、ホームページなどのように第三者への公開が発生する場合は著作権の侵害になります。第三者から見える／見えないが論点となります。

■ とにかく、自分で楽しむ以外のコピーは駄目なんですね？

いいえ。「引用」であれば無断で行うことができます。引用とは「公正な慣行に合致するものであり、かつ、報道、批評、研究その他の引用の目的上正当な範囲」で行うもので、出所の明示が必要です。「公正な慣行」という表現が曲者ですが、引用する必然性があること。引用されていることが明確であること。引用部が充分短いこと。引用部が周りの文章に対して従の関係にあること。などがあげられます。ただし、絵や短歌などのように、引用部のみが鑑賞の対象になる場合は引用と見なされないかも。

（中略）

■ 無断リンクはOK？

灰色。「このページへのリンクを禁止します」と明記されていても、リンク自体は法律的違反ではないという話を聞きました。ただし、リンク先の内容が自分の著作の一部として誤解されるような形式でのリンクは盗用になります。私自身は「Yahooなどで公開されているURLについては、リンクの確認をとる必要無し」という意見に賛成ですが、そういう考えの人ばかりでもないので、「自由にリンクしていいよ」と明記されたページ以外へのリンクは、確認をとっておくのがエチケットでしょう。（私も昔サボっていました。すみません。）

■ トータルニュース社事件

（以下略）

とほほの著作権入門
赤字、青字、緑字、省略は、引用者による。

まず、出典の方を引用してみました。
＃ この記事では問題箇所や該当箇所（赤字、青字、緑字）を明らかにしたいために、「大胆過ぎる省略」をしていますので、真意を知りたい方は是非原文をご覧ください

先の記事の引用方法には、随分と問題があります。

一つ目は、赤字部分を省略していること。この大切な部分を（意図的に）省略することで、原文では「引用は可」となっているのに、引用（ではなく）改竄文は「引用は不可」であるかのように聞こえます。また「私人の解釈」が「ルールである」かのようにも聞こえます。

二つ目は、異なるブロックの語句を繋げて一つのことのように見せていること。つまり、二箇所の緑字部分の「（他の著作物を）私的使用」することと「リンクを張る」ことを繋げて別の意味にしています。

三つ目は、引用者の大胆過ぎる省略です。例えばこの記事の引用では、いきなり「私的使用はOKか？」ときても、「（中略）」のために何を「私的使用」するのか分からない筈です。

四つ目は、出典とは異なる「（中略）」部分です。出典を読めば分かりますが、青字と緑字の間にテキストが存在しないため、「（中略）」は存在できません。それどころか、緑字の二つの文の間に「（中略）」が存在しなければならないのに、どういう訳かありません。
「（中略）」の位置を間違えただけなのかも知れませんが、実に巧みに改竄されています。

ということで、「意図した隠蔽は改竄と言わざるを得ない」と感じました。
まぁ、意図していなくても結果は一緒なんですが、「Q. 闇献金を貰いましたね？ A. 記憶にない」だけは許せませんから（わは）。


あっそういえば、猫さんと鰹くんはまだお話を続けているようです。
＃ 忘れていました（をぃ）


鰹「でも、猫さんはどうやって僕のブログや羊さんのブログを見つけたの？西部劇の記事はここ数日の話だから、検索エンジンにもひっかからないと思うんだけど」
猫「だって、あなたはgooブログにUpdatePingを送信しているじゃないの。gooのブログ検索で西部劇を検索したら、どちらの記事もリストアップされるわよ」


めでたしめでたし

---

● とほほの著作権入門
● Q. 無断でリンクを張ることは著作権侵害となるでしょうか。 - マルチメディアと著作権
● World Wide Web 成り立ち - goo ウェブ検索結果

ブログタイトルをロゴ画像に変更するCSSカスタマイズ

gooブログの「ブログタイトル」って、文字だけなので味気ないですよね？

gooブログアドバンスなら、テンプレート（HTML）編集で{$blogtitle}のモジュールが挿入されている部分をロゴ画像のIMGタグに置き換えてしまえば済む事ですが、gooブログ（無料版）ではHTML編集はできません。

仕方がないので、CSS編集のみでブログタイトルの文字をロゴ（画像）に変更してみました。

カスタムマークの付いているテンプレート（シンプル系18種またはカスタムフリー・カスタムブルー）を使っていればやり方は簡単で、CSS編集で #header、 .bTitle、 .bTitleLink、 .bDesc のセレクタに手を加えるだけいいんです。
＃ ロゴの画像を画像フォルダにアップロードしておく必要はありますが

CSSの修正・追加箇所は、以下の通りです。

/* ヘッダーの指定 */
#header {
		（中略）
  background-image: url(/images/tmp_sm_blue_l/head_bg.gif);
}

/* ブログのタイトル */
.bTitle {
  color: #006699;
  font-size: x-large;font-weight: bold;
  text-shadow: #fff 2px 2px 3px;
  text-align: left;
}

/* ブログタイトルのリンク（<a href="#" class="bTitleLink">で使用） */
.bTitleLink {
  text-decoration: none;
}

/* ブログの概要 */
.bDesc {
		（中略）}

↓

/* ヘッダーの指定 */
#header {
		（中略）
  background-image: url(/images/tmp_sm_blue_l/head_bg.gif);
  /* ヘッダの位置指定 */
  position: relative;
  /* ヘッダの高さ指定 */
  height: 100px;
}

/* ブログのタイトル */
.bTitle {
  /* ブログタイトルの文字をロゴ画像にする */
  /* タイトル文字を非表示にする */
  display: none;
}

/* ブログタイトルのリンク（<a href="#" class="bTitleLink">で使用） */
.bTitleLink {
  text-decoration: none;
  /* タイトルの位置指定 */
  position: absolute;
  top: 10px; /* 上から10ピクセル */
  left: 25px; /* 左から25ピクセル */
  /* ブログタイトルの文字をロゴ画像にする */
  /* ロゴ画像の幅が288px、高さが64pxの場合 */
  width: 288px;	/* ロゴ幅 */
  height: 64px;	/* ロゴ高 */
  /* 背景画像（ロゴ画像） */
  background-image: url("ロゴ画像のURL");
  /* 背景画像の位置：左上寄せ */
  background-position: left top;
  /* 背景画像の繰り返し：繰り返しなし */
  background-repeat: no-repeat;
}

/* ブログの概要 */
.bDesc {
		（中略）
  /* 概要の位置指定 */
  position: absolute;
  bottom: 5px; /* 下から5ピクセル */
  left: 25px; /* 左から25ピクセル */
}

画像サイズ（幅：288px、高さ：64px）は、一例です。実際に使用される画像の縦横サイズの値を指定してください。

指定した位置（ピクセル数やtop、bottom）はあくまでサンプルです。お好みの値に変更したり、10%のような割合を指定することもできます。また、leftの代わりにrightを指定すれば右寄せも可能です。

背景画像（ロゴ画像）の配置は、「左上寄せ（left top）」ではなく「上下左右とも中央寄せ（center center）」にしても良いかも知れません。

このCSSカスタマイズの適用イメージは、以下の通り。

【通常】

はりょ。少子化問題とは関係ありません。
これは付録です。

『子供、いらない』付録GO

↓
【カスタマイズ後】

はりょ。少子化問題とは関係ありません。
これは付録です。

この方法で変更できるテンプレート（対象テンプレート）は、以下の通り。

• カスタムフリー　同ブルー（追記をご覧ください）　同メタル（駄目でした）
• クリアオレンジ左右　同左　同右
• クリアグレー左右　同左　同右
• クリアパープル左右　同左　同右
• クリアピンク左右　同左　同右
• クリアブルー左右　同左　同右
• クリアホワイト左右　同左　同右
• クリアミント左右　同左　同右（わは）

カスタムメタルの場合は、この方法を参考にもう一工夫する必要があるようです。

---

タイトル文字の透明化 - goo ブログサークル 2005年10月22日14:18
シンプル系・タイトルと概要の逆配置 2005年07月30日05:15

---

● 2005年10月26日追記
タイトルの位置指定が必須だったため、位置指定のサンプルコードを追加した。
また、カスタムブルーとカスタムメタルのテンプレートに関しては、CSSに#headerのセレクタがない（HTMLにid="header"が指定されたDIVタグがない）ため、このカスタマイズ方法が適用できなかった。

---

● 2005年04月28日追記
同じことをカスタムブルーで実現する記事のトラックバックをいただきましたので、ベーステンプレートがカスタムブルーの方はそちらの記事をご覧ください。

ブログタイトルを画像にするCSS - むっしゅの戯言　SPEC-B3 2006年04月28日14:58

Sleipnir 2.0を使ってみる

Internet Explorerを主レンダリングエンジンに採用しているタブブラウザSleipnir 2.0の正式版が、10月12日にリリースされていました。

先週までは、Version 2.0がβテスト中ということでVersion 1.66を使っていたのですが、まぁ2.00とはいえ正式版ということなのでインストールしてみました。
＃ 取り敢えず、Sleipnir 1.66とSleipnir 2.00の同居も出来るようです

1. ダウンロード
   先ずは、Slepinir 2のダウンロードページで、お好みのパッケージをダウンロードします。
   今回は、Windows XPで使えるインストーラ版を使いました。
   ＃ 知識のある方なら、アーカイブ版でも良いと思います
   
   
2. セットアップの起動
   ダウンロードしたインストーラ"sleipnir200.exe"を実行します。
   「Sleipnirのようこそ画面」が表示されるので[次へ]ボタンを押します。
   
   
3. ライセンス契約セットアップの起動
   表示されたソフトウェア使用許諾書をよく読んで、問題が無ければ「同意する」選択してから[次へ]ボタンを押します。
   
   
4. インストール先フォルダの選択
   Sleipnir 2.00のインストール先フォルダを選択してください。
   なお、インストール先の既定値がSleipnir 1.66とは異なる値になっているため、故意に同じフォルダにインストールしなければ、スムーズにSleipnir 1.66とSleipnir 2.00の同居（同時使用）ができます。
   
   
5. コンポーネントの選択
   
   コンポーネントの選択：RoboFormのチェックは外す 「Geckoエンジン」は（利用者によっては）必要ですが、「RoboForm」の期間限定試用版は今は不要なので、「高性能パスワード・ログインマネージャ[RoboForm]」のチェックを必ず外すしてから、[次へ]ボタンを押します。
   ここで「RoboForm」をチェックしたままインストールしてしまうと、仮に全く使わなくても試用し始めた扱いとなるため30日後には試用できなくなります。
   ＃ この手の期間限定試用版は、本当に試したい場合を除いてインストールしない方が良いでしょう
   
   
6. プログラムグループの選択
   特にこだわりがなければ、既定の状態で[次へ]ボタンを押します。
   
   
7. 追加タスクの選択
   特にこだわりがなければ、既定の状態で[次へ]ボタンを押します。
   
   
8. インストールの準備完了
   
   インストール進捗 インストール先や選択したコンポーネントが表示されますので、問題がないことを確認してから、[インストール]ボタンを押します。
   インストールの進捗が表示され、インストールが終われば自動的に画面が切り替わります。
   
   
9. Sleipnirのセットアップを完了中
   Sleipnir本体のインストールが終わったら、既定の状態で[終了]ボタンを押します。
   「コンポーネントの選択」で「Gecko」をチェックしている場合は、引き続きGeckoエンジンのインストールが始まります。
   
   
10. Geckoエンジンのインストール
    「Sleipnir Geckoプラグインのようこそ画面」が表示されたら、[次へ]ボタンを押します。
    インストール先フォルダを選択して、[次へ]ボタンを押します。
    プログラムグループは、特にこだわりがなければ既定の状態で[次へ]ボタンを押します。
    
    
11. Geckoエンジンのインストール準備完了
    Geckoエンジンのインストール先やプログラムグループが表示されますので、問題がないことを確認してから、[インストール]ボタンを押します。
    
    
12. Sleipnir Geckoプラグインのセットアップを完了中
    
    Geckoエンジンの登録 Geckoエンジンのインストールが終わったら、既定の状態で[終了]ボタンを押します。
    Geckoエンジン(mozctlx.dll)の登録が成功したら、[OK]ボタンを押します。
    

以上で、インストールは完了です。
早速Sleipnirを起動してちょっと使ってみたところ、問題が2点程ありました。

1. ブックマークの不具合
   
   .xmlで終わるURLをRSSと誤認 .xmlで終わるURLをブックマークすると、通常のブックマークではなくRSSだと思い込んでしまう。
   例えば、JVMのテストページ (http://www.java.com/ja/download/help/testvm.xml)をブックマークしても、ブックマークは開けずに「RSSサイトの下位ページ」の位置に「通信エラーが発生しました」などといらぬ表示をしてくれます。
   
   
2. Geckoエンジンを使うと言語が米国英語に
   使用するレンダリングエンジンをGeckoに変更すると、HTTP_USER_AGENTが"Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.12) Gecko/20051002"になり、言語も米国英語になってしまう。
   また、フォントもserif（ＭＳ Ｐ明朝）が優先されてしまうので、個人的にはちょっと気持ち悪い。
   Geckoの設定を変更したくてもSleipnirのメニューからはどうしようもないので、Sleipnir Wiki Geckoにあった「Gecko使用時のフォントをIE風に変更」を参考に、MozillaControlのprefs.jsに、以下の内容を追加した。
   

   prefs.jsへの追加内容
   // prefs.jsはUTF-8で保存すること // User-Agentの変更 // Mozilla/5.0 (Windows; U; Windows NT 5.1; ja-JP; rv:1.7.12) Gecko/20051002 Sleipnir/2.00 user_pref("general.useragent.locale", "ja-JP"); // ロケール user_pref("general.useragent.vendor", "Sleipnir"); // ベンダ名をSleipnirに変更 user_pref("general.useragent.vendorSub", "2.00"); // Sleipnirのバージョンを指定 user_pref("general.useragent.vendorComment", ""); // 既定コメント(ax)を削除 // 言語設定 user_pref("intl.accept_languages", "ja, en-us, en"); // 文字セット設定 user_pref("intl.charset.default", "Shift_JIS"); user_pref("intl.charset.detector", "ja_parallel_state_machine"); // フォント設定 user_pref("font.default", "sans-serif"); user_pref("font.minimum-size.ja", 12); user_pref("font.name.sans-serif.ja", "ＭＳ Ｐゴシック"); user_pref("font.name.serif.ja", "ＭＳ Ｐ明朝"); user_pref("font.size.fixed.ja", 16); user_pref("font.size.variable.ja", 16); // 背景色設定 user_pref("browser.display.background_color", "#CCCCCC");

   ただし、prefs.jsをUTF-8で保存しないと、font.name.sans-serif.jaとかfont.name.serif.jaとかに指定したい漢字（英数字以外）を含むフォント名が効かないので、注意が必要。
   

   ファイルのパス（格納場所）は、Windows XPの場合は以下の通り。
   %APPDATA%\MozillaControl\profiles\MozillaControl\自動生成された値\prefs.js
   

   %APPDATA%はエクスプローラのアドレスバーに入力したり、コマンドプロンプトで「echo %APPDATA%」のコマンドを実行すれば、そのユーザの具体的な値を調べることができ、多くの環境では以下の通り。
   C:\Documents and Settings%\ログオンユーザ名\Application Data
   

   なお、User-Agentの変更や言語設定・文字セット設定だけをprefs.jsに残し、ユーザ設定であるその他の内容（フォント設定・背景色設定など）をuser.jsとして独立する（prefs.jsと同じフォルダにuser.jsで保存する）こともできます。
   

とまぁこんなところです。

使い込めばもう少し分かるんだろうけど、別にメインブラウザを変更するわけじゃないので、そんなに使い込まないような気もする（わは）。

---

Gecko - タブブラウザ Sleipnir Wiki
Firefox 1.0.7日本語版リリース 2005年09月22日19:37

---

● 2005年11月18日追記
2005年11月16日にSleipnir 2.10がリリースされました。
Sleipnir 2.10リリース 2005年11月17日23:24

---

● 2005年12月14日追記
2005年12月13日にSleipnir 2.21がリリースされました。
Sleipnir 2.21リリース 2005年12月14日28:37

---

● 2006年01月26日追記
2006年01月25日にSleipnir 2.30がリリースされました。
prefs.jsは、"general.useragent.vendorSub"を"2.30"に変更しましたが、基本的にそのまま使用できました。
Sleipnir 2.30リリース 2006年01月26日00:25

カテゴリ記事数の色を指定するCSSカスタマイズ

去る2005年8月25日から、gooブログの「カテゴリ(CATEGORY)」にリンクされたカテゴリ名に加えてそのカテゴリに属する記事数が追加されました。
しかし、カテゴリ記事数って味気ない色（黒）ですよね？

ということで、カテゴリ記事数の色を指定してみましょう。 カスタムマークの付いているテンプレート（シンプル系18種、カスタム系3種）を使っていればやり方は簡単で、CSS編集で .catLink のセレクタに手を加えるだけいいんです。また、今回はついでにカテゴリ名とその記事数の間に余白を設け、不要な下線も消してみます。
＃ カテゴリの記事数を消したい場合は「カテゴリ記事数非表示のCSSカスタマイズ改」を、単に隙間を設けたい場合は「カテゴリと記事数に隙間を設けるCSSカスタマイズ」を参照のこと

CSSの修正・追加箇所は、以下の通りです。

/* カテゴリー（category）のリスト */
.catLink {
  color: ;
  font-size: ;
  text-decoration: underline; /* シンプル系の場合 */
}

↓

/* カテゴリー（category）のリスト */

/* カテゴリー（category）の名称 */
A SPAN.catLink {
  text-decoration: underline; /* 下線付き */
  margin-left: 0em; /* 左隙間なし */
}
/* カテゴリーのリンク（まだ見ていない状態） */
A:link SPAN.catLink {
  color: blue; /* #0000FF */
}
/* カテゴリーのリンク（マウスポインタを乗せた状態） */
A:hover SPAN.catLink {
  color: olive; /* #808000 */
}
/* カテゴリーのリンク（クリックされた状態） */
A:active SPAN.catLink {
  color: gold; /* #FFD700 */
}
/* カテゴリーのリンク（すでに見た状態） */
A:visited SPAN.catLink {
  color: purple; /* #800080 */
}

/* カテゴリー（category）の名称・記事数 */
.catText,
.catLink {
  color: lime; /* #00FF00 */
  font-size: ;
  text-decoration: ; /* シンプル系の場合はunderlineを削除 */
  margin-left: 0.3em; /* 左隙間0.3文字分 */
}

セレクタ .catLnik は「カテゴリ記事数」と「カテゴリ名称」の両者に影響し、セレクタ A SPAN.catLink は「カテゴリ名称」のみに影響します。
色指定（color:）の値（blue, olive, gold, purple, lime）や左隙間（margin-left:）の値（0.3em）は、一例です。indigo、#4B0082、0.5em など、お好みの値を指定してください。
また、「カテゴリ記事数」のために catText というクラスを新設していただけることを信じて .catText のセレクタも記述しています。

このCSSカスタマイズの適用イメージは、以下の通り。

【通常】

カテゴリ

Moblogs(25)
BaseNotes(10)

↓
【カスタマイズ後】

カテゴリ

Moblogs(25)
BaseNotes(10)

なお、対象がFirefoxやOperaのようなプロパティの値に inherit が使えるまともなブラウザであれば、もっと簡単です。その場合のCSSの修正・追加箇所は、以下の通りです。

/* カテゴリー（category）のリスト */
.catLink {
  color: ;
  font-size: ;
  text-decoration: underline; /* シンプル系の場合 */
}

↓

/* カテゴリー（category）のリスト */

/* カテゴリー（category）の名称 */
A SPAN.catLink {
  color: inherit; /* 親要素から値を継承 */
  text-decoration: underline; /* 下線付き */
  margin-left: 0em; /* 左隙間なし */
}

/* カテゴリー（category）の名称・記事数 */
.catText,
.catLink {
  /* 本当はここに記事数の色を指定したいが、inherit を認識しない
  ブラウザではカテゴリ名称も着色されちゃうので不可 */
  color: ;
  font-size: ;
  text-decoration: ; /* シンプル系の場合はunderlineを削除 */
  margin-left: 0.3em; /* 左隙間0.3文字分 */
}

/* カテゴリー（category）の記事数色 */
.catText,
SPAN[class=catLink] {
  /* タグ[属性=値] のセレクタを認識するブラウザは、inherit も
  認識すると思うので、ここで記事数に色指定する */
  color: lime; /* #00FF00 */
}

プロパティの値に inherit が使えないブラウザ（Internet Explorer）は、痛すぎです。しかし、それらを無視する訳にもいかないので、記事数着色の恩恵を受けないだけで実害はない内容にしてみました。

この方法で変更できるテンプレート（対象テンプレート）は、以下の通り。

• カスタムブルー　同メタル　同フリー
• クリアオレンジ左右　同左　同右
• クリアグレー左右　同左　同右
• クリアパープル左右　同左　同右
• クリアピンク左右　同左　同右
• クリアブルー左右　同左　同右
• クリアホワイト左右　同左　同右
• クリアミント左右　同左　同右（わは）

なおこのブログは、記事数を期間限定で太字に（してFirefoxやOperaなら更に色も）変更してみました（わは）。また、指定されているクラスが catText に変更されれば記事数の色がグレイになる筈です。

● カテゴリーの横に記事数を表示しました - gooブログ スタッフブログ 2005年08月25日18:24
● カテゴリ記事数非表示のCSSカスタマイズ改 2005年09月15日00:01
● カテゴリと記事数に隙間を設けるCSSカスタマイズ 2005年10月13日23:11

---

トラックバック送信しました。
● テンプレートをファインチューン - tawa Heavy Industries Ltd. 2005年10月12日23:49