2006-06-28 (Wed)

* robots.txt でロボット避け

この記事の直リンクURL: Permlink | この記事が属するカテゴリ: [ネットワーク] [http] [HTML]

全 UserAgent とサーバの全ディレクトリに対し、ロボットのアクセスを拒否する場合の意思表示をするための robots.txt の例。

2003-06-08 の「ロボット避け meta 要素 <meta name="robots" content="noindex,nofollow">」では html の meta 要素によるロボット避けのみしか書かなかったのでメモ。

- robots.txt の例

robots.txt
User-agent: *
Disallow: /

大文字小文字は関係なし。改行文字は CRLF でも LF でもどちらでも良い。これをサーバのルートに置く。http://sonic64.com/ だったら http://sonic64.com/robots.txt だ。

2006-02-08 (Wed)

* HTML テーブルの枠を色つき表示するブックマークレット

この記事の直リンクURL: Permlink | この記事が属するカテゴリ: [JavaScript] [Bookmarklet] [HTML]

HTML Table の枠を色づけして表示してくれるブックマークレット。

HTML テーブルの枠を色つき表示

javascript:void(d=document); void(cs='http://sonic64.com/dat/tableborders.css'); void(d.g=d.getElementsByTagName);void(l='link');void(H=d.g('head').item(0)); void(c=(d.all)?c=d.all.tags(l):d.g(l)); with(c){for(i=0;i<length;i++){if(item(i).getAttribute('href')==cs)location.reload();}} void(L=d.createElement(l));void(L.s=L.setAttribute); void(L.s('rel','StyleSheet')); void(L.s('href',cs));void(H.appendChild(L));

使い方。
上記リンクを右クリックしてブックマークに入れる。
テーブルのあるページでブックマークを呼び出す。

IE6 でも Mozilla Firefox 1.0.7 でも動いた。Opera はどうだったろう? 当サイト Landscape は Table をほとんど使ってないので、他のページで試すと良い。

結構前から使っているのでどこで手に入れたかはもう覚えてないが、スクリプトから読み込むスタイルシート中に frogdesign.com の sam さん作成と書かれている。彼の作品ということか。自分の管理下に置いておきたいので、スタイルシートの読み込み先は sonic64.com に変更した。

2005-12-25 (Sun)

* Google Analytics のタグ位置が body の末尾に変更

この記事の直リンクURL: Permlink | この記事が属するカテゴリ: [Google] [JavaScript] [HTML]

Google Analytics の解析用タグ (トラッキングコード) の挿入位置が body 要素の内の末尾に変更になっていた。今までは head 要素内に入れることになっていた。

2005-11-17 に書いた「Google Analytics のタグを head に入れる理由は?」で疑問を呈し、
2005-11-19 の「Google Analytics サポートからタグ位置について返答」で Google Analytics サポートから「head に入れてください」という趣旨の回答をもらっていたが、いつの間にか変更になっていたようだ。

Google Analytics - ウェブ サイトにトラッキング コードを追加するにはどうすればよいですか。
https://www.google.com/support/analytics/bin/answer.py?answe ...
このコードをコピーし、解析したい全てのページ下部にある、</body>タグの真上に貼り付けてください。

私は head 要素内にトラッキングコードを配置することを推奨されていた頃から body 要素の末尾にトラッキングコードを配置していた。それで全く問題なく解析できている。

via: しげふみメモ:Google Analyticsのタグ位置が変更
http://blog.livedoor.jp/hakin/archives/50265598.html

- 今度は逆に head 要素に入れておくとどうなるの?

あまのじゃくな考えかもしれないけど、今度は逆に body の末尾にトラッキングコードを配置せずに、head 要素内に配置するとどうなるんだろう? 普通に考えれば、既存の head に配置しているユーザーを切り捨てるわけがないので、head に配置していてもとくに問題なくアクセスをトラッキングできるはず。

2005-11-19 (Sat)

* Google Analytics サポートからタグ位置について返答

この記事の直リンクURL: Permlink | この記事が属するカテゴリ: [Google] [JavaScript] [HTML]

Google Analytics のサポートへ送信した質問に回答があった。意外と早かったね。

ちなみに 2005-11-17 に書いた「Google Analytics のタグを head に入れる理由は?」で送信した質問は以下の通り。
トラッキングコードのインストール位置についての質問です。
質問は二つありあます。

1.
トラッキングコードが JavaScript なのであれば、head 要素以外の場所に
インストールしても動作するのではないでしょうか?

2.
もし head 要素以外の場所にインストールした場合、何か問題はありますか?
たとえば、トラッキングが正常におこなわれない、トラッキングの精度が落ちる、
Google がトラッキングコードを認識しにくくなる、といった不都合はありますか?

以上、よろしくお願いいたします。

Google Analytics サポートからの回答を以下に転載。私の本名の部分は伏せたが、それ以外は原文のまま。

******** *** 様

平素より Google Analytics をご利用いただき、誠にありがとうございます。

このトラッキングシステムは <HEAD></HEAD>タグの間に挿入していただかなければ正常に作動いたしません。
何卒ご理解賜りますようお願い申し上げます。

Google Analytics サポート

ほとんど質問の答えになってない。要するに企業秘密があるので答えられないか、答えたくないか、ヘルプデスク担当者向けマニュアルがないかのいずれかなんだろう。

- 「正常に動作しない」というのはどういうこと? 本当に動かない?

正常に動作しないというのはどういうことだろう? 精度が悪くなる? トラッキングが全くなされない? 「サイトの確認」ができない? 何だろう? ただ、2005-11-17 で書いたように、トラッキングコードを head 要素に入れずに html の一番下の方に配置するように変更したが、問題なくレポートが継続して表示されている。dkiroku さんも私と同様にレポートが表示されているそうだ。

Google Analytics のタグを head に入れる理由は?
http://dkiroku.com/2005-11-18-15.html
で、疑問に思っているのは、なんでトラッキング用のコードのインストール位
置が head 限定なのかということ。

知らなかった。
でもheadに入れてなくてもレポートは出ていますよ。

私と dkiroku さんの2例しかないが、とりあえず解析は可能なようだ。

ただ一つ気になる点がある。私は最初は head 要素にインストールして「サイトの確認」を済ませ、その後疑問に思ってトラッキングコードを html の下の方に移動させた。そうせずに、全く最初から head 要素以外の場所にインストールした場合はどうなるだろう? とりあえず http://sonic64.com/ を解析対象に追加して実験してみることにした。これでいつまで経ってもサイトの確認がなされない場合は、サイトの確認の問題が原因の一つだと推測できる。

追記。
最初から head 要素以外の場所にインストールした http://sonic64.com/ も、レポートが表示されるようになった。とりあえず問題なさそう。

- インストール位置による HTTP トランザクションの中身の変化はない

ふと思ったので、ブラウザが www.google-analytics.com に送信している内容とその応答、いわゆる HTTP トランザクションの中身を比較してみることにした。たぶん違いはないと思うけど。でも、これ載せちゃっていいのかな? 私の環境固有の情報とかかなり入ってるんだけど・・・まあいいか。

まず、当サイト Landscape 流に html の末尾付近に配置した場合。

GET /__utm.gif?utmwv=1&utmn=1809224424&utmsr=1600x1200&utmsc=32-bit&utmul=ja-jp&utmje=0&utmfl=6.0%20%20r29&utmdt=Google%20Analytics%20%u306E%u30BF%u30B0%u3092%20head%20%u306B%u5165%u308C%u308B%u7406%u7531%u306F%3F&utmhn=sonic64.com&utmr=0&utmp=/2005-11-17.html&utmac=UA-54034-1&utmcc=__utma%3D160379711.1091067899.1131959904.1132385137.1132444634.6%3B+__utmb%3D160379711%3B+__utmc%3D160379711%3B+__utmz%3D160379711.1131959904.1.1.utmccn%3D%28direct%29%7Cutmcsr%3D%28direct%29%7Cutmcmd%3D%28none%29%3B HTTP/1.1
Host: www.google-analytics.com
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; ja-JP; rv:1.7.12) Gecko/20050919 Firefox/1.0.7
Accept: image/png,*/*;q=0.5
Accept-Language: ja,en-us;q=0.7,en;q=0.3
Accept-Encoding: gzip,deflate
Accept-Charset: Shift_JIS,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive
Referer: http://sonic64.com/2005-11-17.html
Pragma: no-cache
Cache-Control: no-cache

HTTP/1.x 200 OK
Content-Type: image/gif
Last-Modified: Sat, 19 Nov 2005 14:09:27 GMT
Server: ucfe
Content-Length: 35
Date: Sat, 19 Nov 2005 23:57:30 GMT

Google Analytics の指示通り head 要素内に配置した場合。

GET /__utm.gif?utmwv=1&utmn=1910400003&utmsr=1600x1200&utmsc=32-bit&utmul=ja-jp&utmje=0&utmfl=6.0%20%20r29&utmdt=Google%20Analytics%20%u306E%u30BF%u30B0%u3092%20head%20%u306B%u5165%u308C%u308B%u7406%u7531%u306F%3F&utmhn=sonic64.com&utmr=0&utmp=/2005-11-17.html&utmac=UA-54034-1&utmcc=__utma%3D160379711.1091067899.1131959904.1132385137.1132444634.6%3B+__utmb%3D160379711%3B+__utmc%3D160379711%3B+__utmz%3D160379711.1131959904.1.1.utmccn%3D%28direct%29%7Cutmcsr%3D%28direct%29%7Cutmcmd%3D%28none%29%3B HTTP/1.1
Host: www.google-analytics.com
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; ja-JP; rv:1.7.12) Gecko/20050919 Firefox/1.0.7
Accept: image/png,*/*;q=0.5
Accept-Language: ja,en-us;q=0.7,en;q=0.3
Accept-Encoding: gzip,deflate
Accept-Charset: Shift_JIS,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive
Referer: http://sonic64.com/2005-11-17.html
Pragma: no-cache
Cache-Control: no-cache

HTTP/1.x 200 OK
Content-Type: image/gif
Last-Modified: Sat, 19 Nov 2005 14:09:19 GMT
Server: ucfe
Content-Length: 35
Date: Sun, 20 Nov 2005 00:05:49 GMT

相違点は utmn=1809224424 が utmn=1910400003 になっているところだけ。名前から推察するに、これはタイムスタンプだろう。それ以外はまったく同じだった。

あともう一つ気になったことが、Cookie を使ってないというところ。同じユーザーかどうかを調べるには、Cookie を使うのが手っ取り早い。そうしない理由は何だろう? 他のパラメータ中に GUID みたいなものがあるんだろうか?

- トラッキングコードのインストール位置、どうする?

トラブルを避けたい人は Google Analytics の指示通り設置するのが良い。HTTP トランザクションレベルでは相違点が見つからなかったが、私が何か見落としている可能性もあるし、また今後何か変更が加えられるかもしれないからだ。

トラッキングコードを head 要素に入れるという条件を満たせないためにGoogle Analytics の利用を見合わせている人は、とりあえず試してみる価値はある。解析結果に100% の精度は得られないかもしれないが、参考にはなる。全く利用できないかもしれないが、とりあえず無料なんだし、試すだけなら簡単。アクセス解析で大変なのは、集計よりは結果の分析の方だし。

私はとりあえず傾向がわかればいいというレベルなので、このまま head にはトラッキングコードをインストールせずに、html の末尾に配置しておくことにする。

2005年12月25日追記。
タグ位置が body 要素の末尾に変更になった。2005-12-25 の「Google Analytics のタグ位置が body の末尾に変更」を参照。

2005-11-17 (Thu)

* Google Analytics のタグを head に入れる理由は?

この記事の直リンクURL: Permlink | この記事が属するカテゴリ: [Google] [JavaScript] [HTML]

私は Google が好きなので、御多分に漏れず Google Analytics を導入している。

Google Analytics
http://www.google.com/analytics/ja-JP/

で、疑問に思っているのは、なんでトラッキング用のコードのインストール位置が head 限定なのかということ。導入の説明やヘルプセンターのサポート文書にもすべて、head 要素内の meta 要素の後 に入れるようにと書いてある。

こういうオプション的なものって、私はページの一番下に配置したい。読み込みとかレンダリングのスピードに影響を与えるだろうし、検索エンジンは先頭 n バイトしかキャッシュしないことが多いから。サイドバーを html 的にメインコンテンツの後に置いているのも同じ理由。はてなの Hatena ID Auto-Discovery も html の最後の方に配置してる。

Google Analytics のヘルプを読んでみる。

ウェブ サイトにトラッキング コードを追加するにはどうすればよいですか。
http://www.google.com/support/analytics/bin/answer.py?answer ...
すべてのウェブ ページの <head> タグと </head> タグの間で、<meta> タグの後に次のコードを挿入します。 インクルードまたはテンプレートを共有している場合は、これらのファイルのいずれかに挿入します。

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
  _uacct="UA-xxxx-x";
  urchinTracker();
</script>

やっぱりとくに理由は書いてない。なんでだろう? urtin.js を2分くらい読んだけど、理由になるようなものは見つけられなかった。あ、もしかしてサイト滞在時間とかを厳密に計測するため? それとも Google がトラッキングコードの存在を認識する精度を上げるため?

トラッキングコードの存在を認識する精度を上げるためだったら、認識した後は位置を変えても問題ないんじゃないのかな? 頻繁に再認識してるならダメだけど。

とりあえず試してみるか。「データの待機中: sonic64.com Analytics を正常にインストールし、データの収集を開始しました。 最初のレポートは 12 時間以内に表示できます。」という表示も出たし、レポートも正常に表示されるようになった。この状態で、トラッキングコードを body のかなり下の方に貼り直してみた。さあ、どうなるかな。

考えても埒があかないし、実験だけだと不足なので Google Analytics サポートにも質問を送信した。

トラッキングコードのインストール位置についての質問です。
質問は二つありあます。

1.
トラッキングコードが JavaScript なのであれば、head 要素以外の場所に
インストールしても動作するのではないでしょうか?

2.
もし head 要素以外の場所にインストールした場合、何か問題はありますか?
たとえば、トラッキングが正常におこなわれない、トラッキングの精度が落ちる、
Google がトラッキングコードを認識しにくくなる、といった不都合はありますか?

以上、よろしくお願いいたします。

回答待ち。

追記。
Google Analytics サポートから返答が来た。詳しくは 2005-11-19 の「Google Analytics サポートからタグ位置について返答」を参照。

2005年12月25日追記。
タグ位置が body 要素の末尾に変更になった。2005-12-25 の「Google Analytics のタグ位置が body の末尾に変更」を参照。

2005-10-30 (Sun)

* はてなダイアリーでロボット避け meta タグを設定

この記事の直リンクURL: Permlink | この記事が属するカテゴリ: [HTML] [Google]

http://d.hatena.ne.jp/sonic64/ に当サイト Landscape の目次を置くようにしてみた。別件ではてなダイアリーについて調査してたんだけど、せっかく作ったアカウントを死蔵するのはもったいないと思ったため。たつをさんがやってる http://nais.to/~yto/clog/2005-05-09-1.html の真似。ちなみにページ名は「Landscape - エンジニアのはてな」にしておいた。

ただ、置いているのはあくまでも目次。検索エンジンでは目次よりも本文がヒットして欲しいし、同じコンテンツがたくさんあるとユーザを迷わせるかもしれないので、目次にはロボット避けを設定したい。

- はてなダイアリーでロボット検索避け

ロボット避けは 2003-06-08 で書いたように、meta 要素か robots.txt で設定するのが一般的。robots.txt はそのドメインの管理者向けなので、はてなダイアリーでは meta 要素くらいしか使えないだろう。HTML としては meta 要素はhead 要素内に書かなければならない。でも、はてなダイアリーでは html のうち書き換えられる部分は body 要素など一部だけで、head 要素には手が出せない。どうすればいいんだろう?

何度か検索を繰り返したら、はてなダイアリーでロボット除けをする方法が見つかった。

http://d.hatena.ne.jp/keyword/%a4%cf%a4%c6%a4%ca%a5%c0%a5%a4 ...
Q:ロボット検索を避けたい。

A:ダイアリーやアンテナの管理ツール画のヘッダー部分に、

<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
を設定します。

その他、サーチエンジン対策のための様々なメタタグ(META要素)については、

Google ページの削除‐個々のページを削除する http://www.google.co.jp/intl/ja/remove.html#exclude_pages
などを参考にしてください。

※META要素はHTMLの本来の書き方としてはHEAD要素に書き込まねばなりませんが、はてなダイアリーでは個々のユーザがスタイルシート以外のHEAD要素を設定することが出来ないため、あくまでも便宜的にMETA要素をBODY要素内の「ヘッダ」に書き込むことでロボットに認識させるという手段をとっています。

そうなんだ。たいていの検索エンジンは body 中の meta 要素も検出してくれるということか。知らなかったよ。

管理画面で <meta name="robots" content="noindex,follow"> を設定して完了。確認にためにもう一度表示させてみる。

<meta content="noindex,follow" name="robots">

あれ? なんか name と content の順番が逆になってる。ひょっとして、はてなダイアリーではアルファベット順に属性をソートしてるのかな。まあ問題ないだろうけど。

追記。
設定を入れてしばらく経ってから http://d.hatena.ne.jp/sonic64/ を検索してみると、ちゃんと消えてる。よしよし。
http://www.google.co.jp/search?hl=ja&lr=lang_ja&ie=e ...

- 本文にロボット避けを仕込んで、スパムサイトを検索から締め出せないかな

でも、本文中のロボット避けを解釈するってことは、html のサニタイズが甘いとロボットの制御権を奪われかねないな。

たとえば、最近よくある RSS から勝手に本文を抽出し、そのキーワードのまとめサイトみたいのを作ってるスパムサイト。有用な Planet や RSS 検索ではなく、単なる広告目的なやつ。RSS の本文中に meta 要素でロボット避けを入れておけば、そういうサイトを検索エンジンから消滅させることができるかも。・・・と思ったけどダメかな。サニタイズってライブラリでやってるだろうし、そのライブラリは使える要素を個別に指定できるタイプだろうからなあ。そんな甘い作りにするわけないか。

2005-01-09 (Sun)

* favicon.ico が bloglines で表示されない理由

この記事の直リンクURL: Permlink | この記事が属するカテゴリ: [HTML] [RSS]

当サイトの favicon は なぜか bloglines では表示されない。過去に bloglines に質問メールを送ったことがあるが、修正されないままになっている。favicon については 2004-04-11 の「favicon.ico を作る」の説明を参照。

- bloglines で favicon が表示されるサイトと表示されないサイト

X *ole.net : フォーラム
http://blog.xole.net/forum/topic.php?tid=6
ところでBloglinesでは、特にRSSにfavicon埋め込まなくても表示できたりするはず。
でも表示できるblogとできないblogがあって、そろそろ探らないとなー、と思いつつめんどくさい・・・。

私も過去にこの疑問を持ったことがあり、bloglines のサポートに問い合わせたことがある。以下にそのメールを転載。

- bloglines のサポートに送った質問メール

From: sonic64@example.com
Subject: Web Form: [Feeds]
Date: 10 Aug 2004 06:17:15 -0000


Hello I am Saito Hiroaki, bloglines user and I provide RSS in my website.

I made favicon.ico and upload it, but I can not browse that favicon.ico
in the bloglines.

My website URL: http://sonic64.hp.infoseek.co.jp/
favicon.ico URL: http://sonic64.hp.infoseek.co.jp/favicon.ico
RSS URL: http://sonic64.hp.infoseek.co.jp/cl.xml

I subscribe my RSS ( http://sonic64.hp.infoseek.co.jp/cl.xml ) myself in
bloglines, but I can not see it
in blosliens "My feeds" list ( http://www.bloglines.com/myblogs?mode=2 ).

How can I browse my favicon.ico in bloglines?
I searched http://www.bloglines.com/help/faq ,
but I can not find answer.

If bloglines RSS crawler check favicon.ico only once,
would you change that methods?
For example, crawler check favicon.ico every new subscribing.

Thank you.

私の英語は拙いので、質問したかったことを日本語でも書いておく。

From: sonic64@example.com
Subject: Web Form: [Feeds]
Date: 10 Aug 2004 06:17:15 -0000

こんにちは。saito hiroaki と申します。
私は bloglines ユーザーで自分のサイトでも RSS を提供してます。
favicon を作ったのですが bloglines で表示されません。

My website URL: http://sonic64.hp.infoseek.co.jp/
favicon.ico URL: http://sonic64.hp.infoseek.co.jp/favicon.ico
RSS URL: http://sonic64.hp.infoseek.co.jp/cl.xml

自分のサイトを bloglines に登録していますが、"My feeds" で
favicon が見られないんです。

FAQ を見ましたが答えは見つかりませんでした。

もし bloglines の RSS クローラーが一度しか favicon.ico を
チェックしないんだったら、チェック方法を変えて頂けませんか?
たとえば、新規の購読ユーザーが増えるごとにチェックするとか。

ありがとうございました。

・・・こうして読み返すと日本語にしても意味不明な部分があるな。技術系の質問メールなんだから最後のチェック方法云々は余計だ。「どうなってほしいか」、「問題は何か」、「私が何をしたか」だけ書いた方が簡潔だったな。あとタイムスタンプ見ると朝の6時。本当にそんな時間に送ったのかなあ?

- bloglines サポートからの返信

で、もらった返信。

From Bloglines Customer Support Thu Aug 12 13:01:56 2004
X-Apparently-To:  sonic64@example.com via web605.mail.yahoo.co.jp; Thu, 12 Aug 2004 13:00:29 +0900
Return-Path:  <bounce-66-8348@trustic.trakken.com>
Received:  from c6.neotonic.com (66.7.159.76) by mta23.mail.mci.yahoo.co.jp with SMTP; Thu, 12 Aug 2004 13:00:28 +0900
Received:  by c6.neotonic.com (Postfix, from userid 5701) id 31EB22FCFB; Wed, 11 Aug 2004 21:01:57 -0700 (PDT)
Date:  Wed, 11 Aug 2004 21:01:56 -0700
From: "Bloglines Customer Support" <support@bloglines.com>
To: sonic64@example.com
Subject:  Re: [#8348] Web Form: [Feeds]
Message-ID:  <#42.209c.3393b35b.411aebb4.2@trustic.trakken.com>
MIME-Version:  1.0
Content-Type:  text/plain; charset="iso-8859-1"
In-Reply-To:  <1092118635.647710170.31911.sendContact@bloglines.com>
User-Agent:  Neotonic Trakken/2.11.2
Content-Length:  564


Hello,

I've reset the database for that blog, and the icon will be crawled within
a couple of days.

Thanks,Mark
--
Mark Fletcher
Bloglines
http://www.bloglines.com

日本語にするとこんな感じか。and って「そうすれば」とか「その結果」って訳すのが適切なのかな?
あなたの blog のデータベースをリセットします。そうすればアイコンは一両日中に再クロールされるでしょう。

返信をくれた Mark Fletcher 氏は bloglines の創設者で CEO のとのこと。マジで? 私なんかの質問メールに答えてていいの? もっとやらなきゃならないが仕事あるでしょうに。まあ CEO 名義でサポート担当がメールを返信してるだけなのかもしれないけど。

そういえば、ある小学生が任天堂のディスクシステムのディスクカードを壊してしまってダメもとで任天堂に送ったら、マリオを作った宮本さんが丁寧な返事をくれて、しかも小学生なので修理代をとらなかったという話をどこかで読んだな。あと、「D の食卓」を作ったワープという会社では社長の飯野賢治氏がユーザーサポートの電話対応をやってたとかいう話も聞いたことがある。ロマンシングサガ2のアヴァロン皇帝みたいに、偉い人ほど前線に出たがるものなのかな。

話がそれた。CEO から返事をもらったので一安心して favicon が表示されるのを待ってたが、結局一週間くらい経っても favicon は表示されるようにはなりませんでしたとさ。

- しょうがないからテストしてみたわけですよ

仕方がないので 2005-01-08 の 「サイト名簡易表記は favicon.ico でいいじゃん」で書いた「RSS でも favicon」の記述を追加してさらに待ってみたがダメ。
<image:favicon rdf:about="http://sonic64.hp.infoseek.co.jp/favicon.ico"
  image:size="small">
  <dc:title>Landscape - エンジニアのメモ</dc:title>
</image:favicon>

favicon.ico ファイルのタイムスタンプを更新してもダメ。別の favicon.ico ファイルに差し替えてもダメ。

で、http://sonic64.hp.infoseek.co.jp/cl.xml 以外の URL に全く同じ内容の RSS を置いてみて、それを bloglines に新規登録したら、新規登録した分については表示された。でも、元の方は変わらない。ダメだー。

- 何が明暗を分けたんだろう?

当サイトが favicon を用意したのは 2004-04-11 の「favicon.ico を作る」の時から。bloglines はその数か月前から使っていたし、自分のサイトを bloglines に登録したときには、登録者が数人いたことも覚えているので、Landscape の RSS が bloglines に登録されたのは favicon を用意するよりかなり前だ。

以下、推測。

bloglines に登録される前から favicon を用意しているサイトは問題なく favicon が表示される。
でも、bloglines に登録されたあとに favicon を用意したサイトは、favicon が表示されないことがある。
いくつかのサイトでは favicon をあとから用意しても見事に表示されてる例があるので、100% 表示されないというわけではない。

- さあどうする?

RSS の URL を変えればたぶん favicon は表示されるようになる。でも、そんなことはしたくない。せっかく読んでくれてる人に RSS の登録 URL 変更という手間をかけさせたくない。でも、bloglines で favicon が表示されれば視認性が高まる。うーん、どうしよう? そのうちまた bloglines にメールしてみる?

2005-01-08 (Sat)

* サイト名簡易表記は favicon.ico でいいじゃん

この記事の直リンクURL: Permlink | この記事が属するカテゴリ: [HTML] [RSS]

記事の先頭に [N] とか [を] とか [徳] といったサイト名を短縮したような簡易表記があれば、タブブラウザのタブとか検索エンジンの検索結果一覧とか RSS リーダーなどでサイトを識別しやすくなるという主張がある。[を] 自分のサイトの簡易表記 http://nais.to/~yto/clog/2005-01-04-4.html などが発端。

- favicon でいいじゃん

私はこういう用途こそ favicon が適していると思う。画像なので表現力も段違いだし。

favicon は 2004-04-11 の「favicon.ico を作る」で書いた http://www.chami.com/html-kit/services/favicon/ などのサービスを使えば簡単に作れる。Firefox や Mozilla を使っているのであればタブやアドレスバーに favicon を表示してくれる。Landscape の記事はすべて favicon 入りなので、Firefox や Mozilla を使うと全ページで http://sonic64.com/favicon.ico が表示されてるはず。IE で上記リンクを見ても真っ黒な画像しか表示されないかもしれないけど、Landscape をお気に入りに入れればちゃんと favicon として見られる。

- RSS でも favicon

RSS で favicon を指定することもできるそうだ。

hail2u.net - Weblog - RSSにfavicon
http://hail2u.net/blog/rss/favicon_in_rss.html

Landscape の場合はこんな感じ。
<image:favicon rdf:about="http://sonic64.com/favicon.ico"
  image:size="small">
  <dc:title>Landscape - エンジニアのメモ</dc:title>
</image:favicon>

以前は RSS に上記の記述を入れていたのだが、RSS Validator などでエラーになるので外してしまった。そもそも解釈してくれるクライアントってあるのかな。2004-12-08 に書いた「RSS に image rdf:about でサイトのロゴを埋め込む」は解釈してくれるクライアントは結構あるけど、上記の favicon の指定を解釈してくれるクライアントって見たことない。

- テキストによる簡易表記の利点と欠点

簡易表記の利点はテキストで表現しているのでいろんな所に埋め込めるという点。たとえば Sleipnir 1.66 は タブに favicon を表示する機能がないが、タイトルに埋め込んでおけば必ず表示される。RSS リーダーでも無問題。テキストの強みだ。

でも、短縮表示してるとそのうち重複してきて混乱しそう。「ネタフルにあやかりたいし、Netscape ユーザなので私のサイトでも [N] にしました」とかいうわけわからないことが起きたりして。で、本家では類似サイトとの差別化を求めてよくわからんアラビア文字とか使うようになり、アラビア文字を読める人なんて日本では少ないからサイトの識別に使えなくなったりしそう。

2004-12-14 (Tue)

* Landscape 流ウェブデザイン

この記事の直リンクURL: Permlink | この記事が属するカテゴリ: [HTML] [CSS]

少し前に、とある方から 「Landscape のデザインが好き」というメッセージを頂いた。すごくうれしい。Landscape のデザインがなぜ現在のかたちになっているのか、何を重んじ、何を捨てているか。根本にあるのは、以下で述べる制約だ。

- 制約と誓約

デザインはサイト作成における楽しみの一つだが、悩みどころでもある。これはサイトを作ったことがある人ならわかる。ウェブサイトデザインは少し勉強すると定石が見えてくる。しかし、それをつかんでいない場合や完全に趣味で作ってる場合、あれもこれもと欲張りになりがちになる。結果、芯のない散漫なサイトデザインになってしまう。

マリオを作った任天堂の宮本茂氏は「ファミコンはハードウェアの能力に制約があったからよかった。」と言っていた。制約があったからこそ、ゲーム性の追求に注力できたという。そこで私も制約を課すことにした。

・シンプルにすること。
・仕事場でアクセスしても違和感のない落ち着いたデザインにすること。
・長文記事と短文記事、どちらも読みやすいようにすること。
・必要十分なサイトナビゲーションを設置すること
・迷ったときは、エンジニアらしいかどうかを判断基準にすること。

他にもいくつかあったような気もするけど、大まかな制約としてはこのくらいだ。この結果できたのが今の Landscape だ。配色やレイアウトなどの細かい点についてはまた後日。

2004-08-24 (Tue)

* Link 要素にサイトナビゲーションを記述

この記事の直リンクURL: Permlink | この記事が属するカテゴリ: [HTML]

当サイト Landscape はまだま改善の余地がある。少しずついじっていこう。
まずはより快適にブラウズできるように、メタ情報を html に埋め込んでみる。

HTML - link要素の使い方
http://www.kanzaki.com/docs/html/link.html
link要素は文書全体についての情報を記述するhead要素の中に置かれ、HTML文書を前後の文書、スタイルシート、スクリプト、代替文書などの様々なリソースと結びつける働きをします。ブラウザなどのユーザーエージェントは、これを使ってナビゲーション・パレットを表示したり、自動的に正しい順番でファイルを印刷したりといった応用が可能です。

- link 要素によるサイトナビゲーション

リンクタイプの深淵 [QUIA]
http://www5d.biglobe.ne.jp/~quia/tech/html/linktype.html
A, Link 要素の rel/rev 属性はリンクタイプを値としてとります。リンクタイプとは,当該 A / Link 要素によって示される文書間関係に一定の意味を与えるものです。

以前作ったサイトでは、ほぼすべてのページに Link 要素によるサイトナビゲーションを埋め込んでいた。しかし、この情報を解釈できるブラウザはほとんどなかったため、最近ではおそろかにしていた。最近は link 要素を解釈するブラウザを使うこともあるし、html lint で「<HEAD>〜</HEAD> 内に <LINK REL="NEXT" HREF="〜"> などのナヴィゲーション用のリンクが含まれていません。」と毎回指摘されるのも美しくないので、これを head タグ内に埋め込むことにする。

<link rel="top" href="/" title="Landscape トップページ">

Mozilla では上記の記述がある html だと、サイトナビゲーションバーを使ったページ移動ができるようになる。サイトのレイアウトに左右されずにページ間の移動ができるのでかなり便利だ。

ではテストしてみよう。Firefox を立ち上げて html をブラウズしてみる。あれ? サイトナビゲーションバーを表示するオプションってどこにあるんだろう? Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7) Gecko/20040803 Firefox/0.8 では どうやってこの Site Navigation Bar を表示させるのかがわからない。うーん、どうしよう。

Google で Site Navigation Bar を検索してわかったが、FireFox からは削除されている機能のようだ。エクステンションを入れれば使えるそうだが、手間だな。確か古い Mozilla をアンインストールせずに残しておいたはずなので、こっちを使おう。

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.6) Gecko/20040113 か。かなり古いのでウェブの大海原に乗り出すならセキュリティアップデートもたくさん必要になるだろうが、ローカルでテストするだけならこのままでも問題ないでしょう。html を読み込ませると、問題なくナビゲーションバーが表示された。TOP を押すとトップページを表示してくれる。いいぞいいぞ。

- Opera は複数のリンクタイプを解釈できない

リンクタイプの深淵 [QUIA]
http://www5d.biglobe.ne.jp/~quia/tech/html/linktype.html
また,半角空白で区切り並置することによって複数のリンクタイプを指定することも許されています。たとえば,<LINK rel="help copyright" href="./help-and-copy.html"> のように記述することができます。

<link rel="top home" href="/" title="Landscape トップページ">
つまり上記のように記述できるということだ。しかし、Mozilla は上記の記述で問題なく動作したが、Opera 7.53 Build 3864 はこの記述を受け付けず、top も home のどちらの値も未設定になってしまう。仕方がないので以下のような冗長な記述になった。

<link rel="top" href="/" title="Landscape トップページ">
<link rel="home" href="/" title="Landscape トップページ">
<link rel="index" href="all_category_article.html" title="すべての記事の見出し (カテゴリ別表示) ">
<link rel="contents" href="all_category_article.html" title="すべての記事の見出し (カテゴリ別表示) ">

これなら Opera でも Mozilla でも問題なく表示された。

2004-08-10 (Tue)

* ASP.NET でも html エスケープは必要

この記事の直リンクURL: Permlink | この記事が属するカテゴリ: [.net] [HTML] [C#]

html では、& " < > を直接記述することはできない。文法上意味を持つ文字だからだ。この文字そのものを表現したい場合は、それぞれ &amp; &quot; &lt; &gt; にエスケープする必要がある。これを怠るとセキュリティホールの原因となったり、表示が崩れたりする。ウェブアプリケーション作成の基礎であり、欠かせないものだ。

私は今回、この html エスケープについて失敗をしてしまった。今回は ASP.NET でシステムを作ったのだが、まだ ASP.NET に慣れていなかったことと、テストの時間を十分にとれなかったことが失敗の原因だ。

- DataGrid は html エスケープが必要

具体的に何をやったかというと、ASP.NET の Label コンポーネントの text プロパティに値を代入するときや、DataGrid コンポーネントにデータバインドするときに html エスケープをしなかったのだ。html エスケープは ASP.NET が勝手にやってくれると思いこんでいたからだ。

確かに、ASP.NET の TextBox コンポーネントなどであれば、value プロパティに代入した文字列の html エスケープは ASP.NET フレームワーク側で面倒を見てくれる。しかし、前述の Label や DataGrid をはじめとする一部のコンポーネントにおいては、html エスケープは自動で行われない。プログラマが責任を持ってエスケープする必要がある。

「自分のソースコード中で生成したデータで、エスケープする必要が100%ない場合はやらなくても良い。それに当てはまらない場合、出力するデータは必ず html エスケープしなさい。」とイルミ・ゾルディックくらい口を酸っぱくして後輩たちに言ってきた私がこの体たらく。実に恥ずかしいというか情けない。

ASP.NET の中でも、とくに DataGrid には注意が必要だ。DataGrid は他のコンポーネントに比べ、自動化・ウィザード化が進んでいる。DataGrid を使うと、簡単に DB にクエリを投げてそれを html テーブルとして出力する準備を整えられる。面倒な部分は Visual Studio と ASP.NET がやってくれるので、自分は SQL やストアドを書いてデータアダプタを作成し、DataGrid プロパティビルダで出力時の見栄えを整えさえすればいいと錯覚しがちだが、そうではない。html エスケープもやらなければならないのだ。

- C# で html エスケープするには

C# で html エスケープ をするには、System.Web 名前空間の HttpUtility.HtmlEncode() メソッドを使うのが簡単だ。

以下のように .aspx ファイルのデータバインド時に呼ぶようにする。
<%# HttpUtility.HtmlEncode(DataBinder.Eval(Container, "DataItem.subject").ToString()) %>

もしくは、.aspx.cs でデータソースからデータを取り出した後、DataBind() を呼ぶ前にデータセットの各レコードのカラムを HttpUtility.HtmlEncode() する。DataGrid のプロパティに html エスケープするか否かを設定できるオプションなどがあっても良さそうなものだが、見つけることはできなかった。カスタムコントロールを作ればいいんだろうけど、標準で用意しておいて欲しかった。

System.Web.HttpUtility.HtmlEncode()
http://www.microsoft.com/japan/msdn/library/ja/cpref/html/fr ...
空白や区切り記号などの文字が HTTP ストリームで渡される場合、それらの文字は受信側で誤って解釈される可能性があります。HTML エンコーディングは、HTML では使用できない文字を等価の文字エンティティに変換します。HTML デコーディングはエンコーディングの逆の変換を行います。たとえば、テキスト ブロックに < および > という文字が埋め込まれている場合、これらの文字は HTTP 伝送用に &lt および &gt としてエンコードされます。

HttpServerUtility クラスにも同名のメソッドがあるが、ヘルプを読む限りこちらは URL エンコード用のメソッドだ。

System.Web.HttpServerUtility.HtmlEncode()
http://www.microsoft.com/japan/msdn/library/ja/cpref/html/fr ...
[Visual Basic, C#, JScript] 文字列を HTTP で送信できるようにエンコードする例を次に示します。"This is a <Test String>." というテキストを格納する文字列 TestString をエンコードし、その文字列を "This+is+a+%3cTest+String%3e." として文字列 EncodedString にコピーします。

- テスト

自分のコードが生成していない文字列を出力する部分は、以下の2つの文字列を入力してエスケープしていることを確認する。
<s>ESCAPE TEST</s>
javascript:alert('ESCAPE TEST')

<s> タグは打ち消し線を表示する。javascript:alert() はメッセージダイアログを表示する。もしこれらが機能してしまった場合、エスケープされていないことになる。

いつもはこの2つの文字列を表示させるテストを必ず行う。しかし、今回は開発に十分な時間がとれなかったこと、作ったものがアルファ版ということ、ASP.NET を過信したということが重なって失敗してしまった。

- 実際はタグを入力されると例外を出してエラー終了する設定になっていた

ここまで html エスケープについて述べてきたが、実際にはユーザ入力によるクロスサイトスクリプティングの心配はほぼ無かった。というのは、ASP.NET が持つ機能のおかげで危険な文字が入力されるのは防げていたからだ。

@ Page
http://www.microsoft.com/japan/msdn/library/ja/cpgenref/html ...
ValidateRequest
要求の検証を行うかどうかを示します。true の場合、要求の検証では、危険性のある値のリストと照合して、すべての入力データをチェックします。一致するものがあった場合は、HttpRequestValidationException クラスがスローされます。既定値は true です。
この機能は、マシン構成ファイル (Machine.config) で有効にします。この機能を無効にするには、アプリケーションの構成ファイル (Web.config) またはページで、この属性を false に設定します。

メモ  この機能を使用すると、単純なページや ASP.NET アプリケーションに対するクロスサイト スクリプト攻撃のリスクを軽減できます。ユーザー入力を正しく検証できないアプリケーションは、クロスサイト スクリプティング攻撃や SQL Server への注入攻撃など、多くの種類の不正な入力攻撃を受ける可能性があります。アプリケーション内のすべての入力フォームを慎重に評価し、検証またはコーディングが適切であることを確認したり、データを操作する前やクライアントに情報を返す前にアプリケーションが退避していることを確認したりすることが重要です。クロスサイト スクリプティングの詳細については、http://www.cert.org/advisories/CA-2000-02.html を参照してください。

ただし、この機能が働いたときは例外を出してしまうので、悪意のないユーザが html タグに似た文字列を入れることもできなくなってしまう。ValidateRequest を無効にするには、web.config で設定する。もちろん無効にした場合はアプリケーションで完璧にサニタイズしなければならない。

<!-- 危険なリクエストのチェックをしない。アプリケーション側でサニタイズする。 -->
<pages validateRequest="false"/>

validateRequest を true にしていても、エスケープは必要。データベースから取得した文字列などは、必ずエスケープしてから表示しなければならないからだ。

2004-04-11 (Sun)

* favicon.ico を作る

この記事の直リンクURL: Permlink | この記事が属するカテゴリ: [HTML]

当サイト Landscape の favicon を作ることにした。

- favicon.ico って何?

favicon.ico というのは、そのサイト独自のアイコンのこと。

IE だと「お気に入り」に追加したときにアイコンがそのサイト独自のものになるが、それが favicon だ。mozilla だったらタブやアドレスバーの脇に出るので目にする機会も多いだろう。favicon を用意しているサイトはたくさんあり、http://www.debian.org/http://www.mozilla.org/ などで見ることができる。

当サイトをお気に入りに入れればすぐ見られる。ぜひお気に入りに入れてみよう (PR)。

- favicon.ico の作り方

要するに Windows icon ファイルを作ればいい。
まず、元となる画像を作る。ビットマップでも png でも何でもいい。次に、icon 形式に変換できるツールを使うか、Chami.com の "FavIcon from Pics" のような変換サービスを利用するなどして icon ファイルを得る。

Chami.com FavIcon from Pics
http://www.chami.com/html-kit/services/favicon/

簡単に作るのであれば上記サービスを利用するのが良いが、今回はエンジニアらしく一手間かけて自分の納得のいく favicon を作ることにする。まず元となる画像を作り、それを縮小、減色し、icon 形式への変換ツールで favicon.ico ファイルを作るという流れだ。

2002-09-30 では favicon は png で作成すると良いと書いたが、IE でも見られるようにしておきたいので、今回は windows icon 形式で作成することにする。Firefox なら png でも favicon にできるんだけど、IE ではできないからね。

- まずは favicon のデザインを決める

うーん、どんな favicon にしよう? Landscape の L 、副題である エンジニアのメモ の engineer の e あたりを使おうか。よし、背景はやわらかいブルーで、そこに白の L を浮かべた画像にしよう。これを作るとなると画像編集ソフトが要るな。でも Photoshop は仕事場にしかないから、無料のフォトレタッチソフトである Gimp で作ろう。確か最近 2.0 がリリースされてたはずだし。フリーソフトはこういう時にも重宝するね。

- 画像製作ソフト Gimp と GTK2 のダウンロードとインストール

GIMP - Windows installers
http://gimp-win.sourceforge.net/

上記ページからWindows 版の Gimp 2.0 と GTK2 をダウンロードできる。GTK はGIMP を動かすために必要なライブラリ。2004-04-11 現在の最新版は Gimp が 2.0.1、GTK2 が 2.2.4 だったが、2004-11-04 現在の最新版は Gimp が 2.0.5、GTK2 が 2.4.10 だ。配布サイトも sourceforge に移転している。

以下の URL にアクセスすると、sourceforge のミラーサイトの一覧が出る。日米間の回線は大容量らしいので、North America のどれかからダウンロードすると良いのではないだろうか。

Gimp2.0
http://prdownloads.sourceforge.net/gimp-win/gimp-2.0.5-i586- ...

GTK2
http://prdownloads.sourceforge.net/gimp-win/gtk%2B-2.4.10-20 ...

それぞれダウンロードしたら、GTK からインストールする。GIMP を先にインストールしようとすると 「GTK 入れてね」という意味の警告が出る。インストールは「次へ」や「Yes」を連打すれば終わるだろう。勝手に画像ファイルを関連づけしたりすることもないので安心。

- Gimp2 を起動して favicon の元になる画像を作成

インストールはあっという間に完了し、マスコットのウィルバー (Wilber) くんのアイコンをダブルクリックして起動。おおっ、何もしてないのに全部日本語化されてる。素晴らしい。では制作開始。ある程度大きな画像を作って、それを縮小して使おう。256 * 256 で背景を作成。テキストレイヤを作成して、L の字を入力。e の字はレイアウトを思いつかなかったので使うのはやめた。

script-fu でドロップシャドウを掛けて、完了。うん、簡単にできた割にはなかなか良いぞ。ここでマスターとして GIMP xcf ファイルを保存しておく。xcf のレイヤを統合して bmp で出力して一丁上がり。Gimp 2.0 は Celeron 500MHz のマシンでも十分良い働きをしてくれた。

- 減色して縮小して ico に変換 - favicon.ico ファイル完成

2004-02-16 にも書いた減色ツール padie で 1677万色から256色に減色。これをさらに btj32 というツールで 32 * 32 と 16 * 16 に縮小。これで素材は揃った。bmp から ico への変換は、@icon変換 というツールを使った。16 * 16 と 32 * 32 の両サイズを一つの ico に格納してくれる優れものだ。

@icon変換
http://www.vector.co.jp/soft/win95/amuse/se201729.html

@icon変換に読ませて、マルチプルアイコンとして保存してできあがり。今回は手間をいろいろ手間を掛けて作ったけど、Chami.com FavIcon from Pics http://www.chami.com/html-kit/services/favicon/ のような png をアップロードするだけで簡単に favicon を作成してくれるサービスを利用するともっと簡単に作れる。減色やサイズ調整とかも全部やってくれるし。

- html ヘッダに favicon への参照を追加

完成した Landscape の favicon
http://sonic64.com/favicon.ico

ico ファイルは作成したし、サーバにもアップロードした。あとは html のヘッダに favicon を参照する記述を追加すれば作業完了。html ヘッダに記述を追加せずにサーバの /favicon.ico にファイルを置いておくだけでもいいらしいが、ブラウザによっていろいろと挙動が異なるようなので、可能なら両方やっておくと良いだろう。

以下の記述を html の <head> タグ中に追加。このページのソースを見てもらった方が早いかも。
<link rel="shortcut icon" href="favicon.ico">

MIME タイプを指定する場合は以下のようにするが、これを追加したところ Mozilla Firefox で favicon を表示してくれなかったので指定しないことにした。
type="image/vnd.microsoft.icon"

- Unix で favicon を作る

unix 環境で favicon を作るツール。16 * 16 と 32 * 32 の両方を含む favicon を作れる優れもののようだ。試していないけど。

ToICO
http://wizard.ae.krakow.pl/~jb/toico/
Toico converts PNG, GIF, TIFF, BMP and XPM files to Windows icon format (ICO). It is possible to create multi-image icon. Program compiles on Linux, FreeBSD, Solaris, HP/UX and CygWin, maybe more.

Usage example:

toico icon-16x16.png icon-32x32.png -o favicon.ico

2004-01-23 (Fri)

* 日本語ドメインのサイトにリンクを張る html

この記事の直リンクURL: Permlink | この記事が属するカテゴリ: [HTML]

JWord のプラグインが2004年2月1日から日本語ドメインに対応するとのこと。

一挙に1320万人が日本語ドメインを利用可能に : IT Pro ニュース
http://itpro.nikkeibp.co.jp/free/NC/NEWS/20040122/138611/

ふと疑問に思った。html で日本語ドメインのサイトにリンクするとき、そのまま書いて良いんだろうか?
<a href="http://セガ.jp/">セガの日本語ドメインサイト</a>
とか書くんだろうか? それとも、何かエンコードした文字列を書かなければならないんだろうか?

- 日本語ドメインの実例と仕組み

!JP 日本語ドメイン名特集
http://mitsuketa-nihongo.jp/
日本語ドメインのリンク集がある。ソースを見ると、ごく当たり前のように http://闘魂.jp/ とか http://アスキー.jp/ と a 要素の href 属性に書いてある。Netscape は日本語ドメイン名に対応しているとのことなので、 Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.7a) Gecko/20040116 で http://アスキー.jp/ にアクセスしたところ、ごく普通に http://www.ascii.co.jp/ に接続できた。

!JP 日本語ドメイン名について
http://jprs.jp/info/notice/idn.html

正規化・ACE変換
http://www-serv.jprs.jp/ace_chk/index_mini.html
日本語ドメインの動作について体験できる。

セガ.jp を入力した場合
http://www-serv.jprs.jp/ace_chk/index_mini.html?text_field=% ...
http://セガ.jp/ は http://xn--mck3a.jp/ に変換されることがわかる。

- そのための日本語ドメインです

日本語ドメイン名の一覧を見てると、href 属性として日本語ドメインを使うことにあまり意味を感じない。
<a href="http://藤井フミヤ.jp/">藤井フミヤ</a>
と書くよりも、最初から
<a href="http://www.ffm.co.jp/">藤井フミヤ</a>
って書けばイイじゃん。余計な変換の仕組みも入らないし。あ、でも http://www.ffm.co.jp/ を覚えなくていい、というのが日本語ドメインの利点なのか。コンピュータは技術の力で少しずつ人間の感性に歩み寄りながら発展してきたわけだから、これで良いんだろうな。でも、途中まで漢字変換をオンにしてドメイン名を入力し、そのあと漢字変換をオフにして .jp とか入力するのは美しくない。だったら最初から Google に会社名を検索させた方が早そう。そもそも、ほとんどの初心者ってピリオドや jp も全角で入力しちゃうんじゃないか?

- 「また騙されたのね」が増える?

ところで、読売新聞と讀賣新聞って別ドメインになっちゃうのかな。高島屋.jp と高嶋屋.jp とか。渡辺.jp と渡邊.jp と 渡邉.jp とか。騙される人とか出るんだろうなあ。類似サイトがたくさん出現しちゃって、どのサイトが正しいかよくわからないので、結局 Google で検索して PageRank が一番高いサイトを本物とみなす、とか。だったら日本語ドメインなんか使わずに、最初から Google 使えばいいじゃん、とかいうことには・・・ならないか。でも、やっぱり個人的には Google に会社名入れて検索した方が早いと思う。

2003-08-15 (Fri)

* HTML,CSSバグ&回避法リスト

この記事の直リンクURL: Permlink | この記事が属するカテゴリ: [HTML]

http://www.keynavi.net/ja/bugh/
中身は見てないが、何かの役に立ちそうなのでメモ。
他のサイトのコメントを見ていると、「場当たり的で美しくない解法ばかり」
という意見が目立つけど、仕事ではそうも言ってられないときもあるからなあ。

2003-06-14 (Sat)

* 特殊な実体参照・ドクロとか

この記事の直リンクURL: Permlink | この記事が属するカテゴリ: [HTML]

2003-06-08 (Sun)

* ロボット避け meta 要素 <meta name="robots" content="noindex,nofollow">

この記事の直リンクURL: Permlink | この記事が属するカテゴリ: [HTML]

ロボット避け。

- meta 要素でロボット避け

いわゆるメタタグロボット避け。

HTML Author's Guide to the Robots META tag.
http://www.robotstxt.org/wc/meta-user.html
Some examples:

<meta name="robots" content="index,follow">
<meta name="robots" content="noindex,follow">
<meta name="robots" content="index,nofollow">
<meta name="robots" content="noindex,nofollow">

Note the "robots" name of the tag and the content are case insensitive.

name と content の中身は case-insensitive。つまり、大文字小文字を区別しない。

- robots.txt でロボット避け

html に埋め込む meta 要素じゃなくて robtos.txt でサーバ全体を設定できる。

A Standard for Robot Exclusion
http://www.robotstxt.org/wc/norobots.html
robots.txt によるロボット除けの解説。

- ロボット避け? ロボット除け?

「避け」の表記には「ロボット避け」と「ロボット除け」の二種類あるけど、どっちが主流なんだろう? どっちも読み方は「ろぼっとよけ」で良いんだよね? 「ろぼっとさけ」って呼んでる例は聞いたことないし。

2002-10-24 (Thu)

* a 要素の href 属性に使って良い文字

この記事の直リンクURL: Permlink | この記事が属するカテゴリ: [HTML]

href の中身は URI を書く。URI に使って良い文字は ASCII。
引用符で括られた値は CDDATA (厳密には RCDATA) なので、まず html エスケープする。そのあと URI エスケープする。

2002-10-22 (Tue)

* Perl で HTML エスケープ

この記事の直リンクURL: Permlink | この記事が属するカテゴリ: [Perl] [HTML]

perl で HTML エスケープする方法。大崎さんのperlメモから。

Namazu でインデキシングする HTML の場合、< > & ” “ もエスケープすること。
Namazu が奇妙な変換をするため。http://www.namazu.org/ml/namazu-users-ja/msg02528.html 参照。
# HTML エスケープする
sub HtmlEscape {
  my $content = $_[0];
  my $eucpre = qr{(?<!\x8F)};
  my $eucpost = qr{
      (?=
      (?:[\xA1-\xFE][\xA1-\xFE])* # JIS X 0208 が 0文字以上続いて
      (?:[\x00-\x7F\x8E\x8F]|\z)  # ASCII, SS2, SS3 または終端
      )
  }x;
  my @escape_from = qw(& > < " ');
  my @escape_to = ('&amp;', '&gt;', '&lt;', '&quot;', '&#39;');
  for (my $i = 0; $i <= $#escape_from; $i++) {
    $content =~ s/$eucpre\Q$escape_from[$i]\E$eucpost/$escape_to[$i]/g;
  }
  return $content;
}

2002-09-30 (Mon)

* favicon (ファビコン、サイトアイコン) を表示する

この記事の直リンクURL: Permlink | この記事が属するカテゴリ: [HTML]

ブラウザにサイトアイコンを表示させるための手順。favicon (ファビコン) やサイトアイコンとも呼ばれているようだ。

16x16 のサイズで画像を作成する。png がよいだろう。色数の最大値は不明。
まあ16*16なんだから、いっぱい色を使ったとしても256色程度には収まる。

画像を作ったら、<link rel="icon" type="image/png" href="/images/favicon16.png" title="Hiroaki icon"> と html のヘッダに記述すればよい。Mozilla 1.2a では アドレスバー、タブ、ブックマークなどに指定した画像が表示された。
残念なことに IE5.0SP2 は未対応のようで、一切表示されなかった。

追記。2004-04-11 に「favicon.ico を作る」という記事を書いた。

すべての記事の見出し (全1029件)
全カテゴリの一覧と記事の数
カテゴリごとに記事をまとめ読みできます。記事の表題だけを見たい場合は、すべての記事の見出し (カテゴリ別表示) へ。

直近30日分の記事
2007-04-23 (Mon)
2007-03-07 (Wed)
2007-02-27 (Tue)
2007-01-17 (Wed)
2007-01-15 (Mon)
2007-01-14 (Sun)
2007-01-08 (Mon)
2006-12-01 (Fri)
2006-11-22 (Wed)
2006-11-20 (Mon)
2006-11-19 (Sun)
2006-09-30 (Sat)
2006-08-29 (Tue)
2006-08-04 (Fri)
2006-07-27 (Thu)
2006-07-23 (Sun)
2006-07-17 (Mon)
2006-07-10 (Mon)
2006-07-06 (Thu)
2006-07-03 (Mon)
2006-06-29 (Thu)
2006-06-28 (Wed)
2006-06-27 (Tue)
2006-06-25 (Sun)
2006-06-19 (Mon)
2006-06-18 (Sun)
2006-06-15 (Thu)
2006-06-11 (Sun)
2006-06-01 (Thu)
2006-05-30 (Tue)
プロファイル
斎藤 宏明。エンジニアです。宇都宮市に住んでいます。
リンク
RSS
スポンサードリンク
Powered by
さくらインターネット

© 斎藤 宏明 Saito Hiroaki Gmail Address
Landscape - エンジニアのメモ http://sonic64.com/
Landscape はランドスケープと読みます。
ひらがなだと らんどすけーぷ です。