Webデザイン 2009-10-25 Blogger
『「記事とコメントだけを印刷」を追加してみた』は止めにした 2009-07-01 Blogger
再送:「記事とコメントだけを印刷」を追加してみた 2009-06-30 Blogger
reCAPTCHA 2009-05-28 Blogger,自然言語,数学
知らない方がいいこと 2009-05-14 Blogger,Web,個人的な好み,数学
ひさびさにいいこと 2009-04-08 Blogger,CGI,Web
PageRank は有向グラフ 2009-04-04 Blogger
Gordon's Tech: My new number one Blogger request: fix backlinks with whitelisted URLs 2009-04-03 Blogger
地味にバグ取り 2009-04-01 Blogger,Web,自然言語
(続) Blogger のブログリストにサムネイル 2009-03-31 Blogger,CGI
Shell 要らないもんね 2009-03-21 Blogger,CGI,Web,自然言語,数学
Blogger のブログリストにサムネイル 2009-03-20 Blogger,CGI
BDN: Feeds now include Media RSS thumbnails 2009-03-19 Blogger,CGI
フィードが… 2009-03-14 Blogger,CGI,数学
Blogger の機能を増設中 2009-03-10 Blogger,自然言語,اللغة العربية
テンプレート変更 2009-03-09 Blogger


2009-10-25

Webデザイン



とりとめのない話なのだが。

最近、私のまわりで、自分の Web ページをデザインし直す人とか、広告の入るブログサービスに見切りをつけて別に移るとか、そういう人が目立つ。「過渡期」ということなのかもしれない。特に、広告。これはものすごく五月蝿く感じる。

私の blog は Google のやっている Blogger というサービスなのだが、他へ移る気はしない。広告は入れようと思わない限り入らないし、けっこうカスタマイズも自由だ。「日記」という使い方だけでなく、小さな会社なら商品紹介に使っているところもあるようで、もう、昔みたいな「ホームページ」というのを作ることは無くなるのかもしれない。

あと、blog のコメント。これもすごく五月蝿く感じる。とくに、ネガティブな内容のコメントは止めて欲しいと思う。私のメールアドレスは右の段の下の方に晒されているのだから、そちらへどうぞ、と言いたい。誰の言葉かは忘れたが「他人のブログのコメント欄は安全地帯」という名言がある。これは、書き捨てで逃げることが簡単だからだ。書いた物は晒されるわけだし。(まあ、コメントを承認制にするとか、Open ID ないとだめとか制限を掛ければいい話だろうとは思うけど、たとえば、この blog だと「潜水士」のコンテンツはそれでは困る人も多いと思う。)

ま、1ヶ月くらい放置して、コメントは勝手に消しちゃったりしますがね。(笑)

2009-07-01

『「記事とコメントだけを印刷」を追加してみた』は止めにした

昨日のエントリで書いた内容は、

やってはいけない

そういう内容のことだった、と気がついた。

あのボタンは、けっきょく、ブラウザのメニューにある「プリント」と全く同じ機能を持つだけだった。つまり、ボタンなんか存在していなくても、メニューから「プリント」を選べば同じことができた

存在しなくていいものは、存在しないほうが美しい

だから、止めにした。

---

以上で説明は尽きている。以下は、蛇足:

ここを読んでいる人に、こんな2つの疑問が湧かないとも限らない。
  • (1) なぜ、画面の表示と、印刷されたものが違ったのか?なにしろ、ブログのヘッダ、フッタ、サイドバーは印刷されなかったのだ。
  • (2) 昨日のエントリのリンク元のページの著者や、そこへ好意的なコメントを寄せている人々は、本当は何をしたかったのだろうか?
答は、

(1) print 用のスタイルがテンプレートに挿入されたからだ。ボタンの存在とは関係なく、印刷時には print 用のスタイルが使われるのだ。

(2) 本当は。「ボタン」を設けるなら、それを押すと、『印刷結果と同じのが画面に表示されるようなページが開く』のが正しい。そして、 "印刷結果と同じの" は、もっとクオリティの高いレイアウトであるべきだ。画面用のレイアウトから、ヘッダ、フッタ、サイドバーを display:none; にしただけではダメだ。

メニューに既存の無駄なボタンの設置。低品質な print 用スタイルの挿入。

これらは、決してやってはいけない。

---

ということで、1日限りだったあのボタン。また、この blog に出現したとしたら、もっと面白い(はず)。

たぶん、アナウンスしないな。一回失敗したから、懲りた。次回はこっそり。(笑)

2009-06-30

再送:「記事とコメントだけを印刷」を追加してみた

再送: 2009-07-01

以下のような記事をこの日に書いたのだが、止めた。詳しい経緯は、次回のエントリで。。。


----- 以下、「なし」になった内容です。 -----

元記事は、 Amanda さんの 2008-05-28 "How to Print your Blogger Posts Effectively".

Blogger のブログの1つの記事を「プリントアウトして読もう」という人のために、印刷用のフォーマット (CSS) を用意してあげようじゃないか、という話だ。

つまり、ブログの記事に、「お、これは!」と思うものがあったとき、ブラウザの印刷機能では、余計なヘッダやらフッタやらサイドバーやらまでもが印刷されてしまう。だから、それらを消して、

記事本体だけをシンプルに(どうせなら、コメントも)印刷できるように。

というわけで、私の blog に、そんな機能を持ったボタン を追加してみた。ただし、あくまでも余計なものを表示させないだけであって、レイアウトをし直しているわけではない。

---

試してみよう。まず、「記事が1つだけでその記事へのコメントとともに表示されている画面 ("item" 表示)」にする必要がある。そうしないと印刷用ボタンはでてこない。そのためには、記事の末尾にある「コメントを見る」というリンク、あるいは、タイトルの近くに表示されている「投稿時刻 (Posted at)」を叩けばよい。なんなら、ここを叩いてもいい。

こんなボタン とこんなボタン が記事の下の方に出てくるはずだ。(前者のボタンについては、既にこの記事の後半に書いたよ。)

で、印刷。出力結果が美しいか、あるいはプレビューが可能かどうかは、ブラウザや環境に依存する。(たとえば、IE だと文字をぶった切って平気でページ送りして印刷してくれちゃうから、ほとんど使い物にならないよ。)

とりあえず、不要な裏紙に、印刷のお試しを。。。ということで。(笑)

(念のため:ボタンが見えてないときに印刷をしても、記事本体部分しか印刷されない。)

---

で、このボタンをご自分の Blogger ブログにも!と思った方。どうか、元記事(英文)を参照してください

というのは、本当に、テンプレート依存性が高すぎる。 CSS を知らずしてただコピペしてインストールの、トラブった人に個別にメールとかコメントで質問されるのは、めちゃくちゃわずらわしいのが見えているので。。。実際、元記事はプチ炎上してるし。(汗)

ところで、印刷してまで読むような記事を、だいたい、おまえ、書いてないだろw?というつっこみは無し。

----- ここまで、「なし」になった内容です。-----

2009-05-28

reCAPTCHA

ブログを書くことと、連絡先を明記することの関連について、ちょっと考えてた:

この blog の私の「詳細プロフィール」(右段下の方から行ける)には、筆者への連絡先として、本物のメールアドレスがさっきまで晒されていた。一応、内容には責任を持ちたいし、間違いがあったときにご指摘くださる方が居られるといいな、と思ったから。匿名でコメントできる、そう設定してるのも、同じ考えでだ。

でも、スパム業者のロボットに、晒しているアドレスが収集されはしないのか、と、ずっと怯えてた。

ふと思い立って、今日、Blogger の「詳細プロフィール」画面 → Contact → Email の部分の XHTML ソースを読んでみた。うわーっ、 Blogger (Google?) さん、ダメだよーこんなんじゃ:ソースコード上では、"blogナマのアドレス.biz" となっており、JavaScript を使って、頭の "blog" と尾の ".biz" をカットしてから閲覧者に見せる(閲覧者のローカルのメーラーを立ち上げる)だけの仕掛けだ。

私がスパム業者なら、 Blogger でブログを書いてて、かつ、「詳細プロフィール」にメールアドレスを晒している人の、生きのいい ( = 更新が頻繁なブログの) メールアドレスだけを収集するのが簡単にできる。やらないけど。


というわけで、もう手遅れかもしれないが、 Blogger の「詳細プロフィール」でメールアドレスを直に晒すのは止めにした。代わりに使ったのが reCAPTCHA (上の画面キャプチャを参照)。メールアドレスを知るためには、歪んだ文字を読む必要があるようにしたのだ。

reCAPTCHA を使ってメールアドレスをロボットから隠すサービスは、元祖 CAPTCHA の発明元の Carnegie Mellon University のもので、無料。なんと太っ腹、すばらしい。

---

(re)CAPTCHA は初期のものは既に自動的に解読できてしまうそうだ。つまり、コンピュータの技術が進歩した結果、ちょっとぐらいなら字が歪んでいても、人間だけでなくコンピュータも読めてしまうようになったというわけだ。そこで、 CAPTCHA にはさまざまな改良が加えられていった。結果として現在は、字の歪みが増大し、読ませる単語が2つになり、綴りの意味が必ずしも無い、というように変化してきている。実際、現在の reCAPTCHA は、コンピュータにはまだ読めないかもしれないが、人間にはすでに読めないことがしばしばある。(笑)

ここで利用した Carnegie Mellon University の reCAPTCHA サービスは、閲覧する人間が読めなかった場合も叱ったり終わったりせず、別の歪んだ文字を出す「不良返品交換」ボタンが付いている (左上の画像のボタン)。これはすごく重要な機能だ。歪んだ字が読めなかった、ってだけで、ほとんどの人がかなりイライラするからだ。日本人の場合は特に、英語にコンプレックスがあったりもするから、イライラは爆発、もうこんなブログなんか読んでやらない、になりそうだ。

というわけで(?)、私のメールアドレスに関しては、とりあえずは安心。

だが、油断はできない。解読する方の技術はどんどん進歩しているのだから。。。

---
関連記事:2008-08-11 CAPTCHA認証は“終わった”技術なのか――有効性を疑問視する専門家たち (月刊 Computerworld 2008年10月号に掲載) の中で紹介の "Quantum Random Bit Generator Service: Sign up" が面白い、いや違う、笑える。

人間にしかできない作業をさせ、スパム業者のロボットを防ぐということで、

三角関数の微分係数とか、多項式の零点とか、整数の四則演算とかの答を要求してくる

のだ。たまに、三角関数を用いて記述された「定数関数」の微分係数が出題されたりもするよ。

正答が絶対値の小さな整数に限られているようなので、コンピュータに対して何の防御にもならないのは確実だ。その一方、人間は高校(今は「ゆとり」の所為で、数学の科目を全部とらないと、弧度法とか三角関数の微分とかは無いんじゃないかな?)で、もし習ってたとしても忘れてるんじゃないかなあ。。。

興味深かったのが、わざと専門家向けの記号を使って問題を困難にするつもりはないはずなのに、ハンガリーのこのサイトは、

1. 1変数関数の導関数も偏微分記号で表す(しかも、演算子記法!)
2. 代入は、制限写像の記号で表す

という流儀だ。つまり、こういう記号で中・高等教育をやってるってこと。合理的、かつ、進んでるなあ。。。

数学記号って、実は全然、世界共通じゃないんですよ。日本人が学校で習っている数学記号は「日本教育用方言」なのでした。(笑)

2009-05-14

知らない方がいいこと


Google のサービスをいろいろ使っている。この blog (Blogger) もそうだし、Gmail, Google Sites などなど。

それらのサービスの中に Google Profile というのがある。本来の目的は、 SNS のように、名前、出身学校、職場、経歴などで人肉を検索(←中国語風の表現)できるようになのだが、そんなの絶対いやだ。

まあ、 blog で、ちまちま日常のしょうもないことを書きつらねていると、その手の個人情報は記事たちのあちこちに滲み出してしまう。特に、実名を隠して匿名で blog を書こうと思っても、悪意ある多数の人間にかかればあっという間にばれ、無理。だから、この blog は最初から実名は晒して書いている。一般に、「名前」というものは名付けられたものの意志とは無関係(☆)だからそれでいいのだ。(念のため:ハンドル名は名付けた人と名付けられた人が同一なので、☆の例外ではない。)

でも、その他の各種個人情報は、一気に晒すのと、読んでるうちになんとなく分かるのでは、わけが違う。

たとえば、その「人」と「なり」をある程度理解した後で職業や学歴を知るのと、職業や学歴を先に知って先入観をもってその人を見るのは、ぜんぜん別の結果になる。貴方は旅先で出会った人に、いちいち、いきなり履歴書を渡しますか?貴方は偶然 blog を閲覧しに来た人に、いちいち、詳細な profile を見れるようにしますか?

---

おっと、今日の書こうと思っていたネタから話題がずれてきてしまった。閑話休題。

Google Profile の、その人が公開すると決めた情報には「特技/特殊能力」「趣味」などの欄に並んで、

Google を使っても見つけられないもの

という欄がある。

ネットは便利だが、「何でもネットで検索できてしまう」というのは間違いだ。仮にある方法で検索し得るものだとしても、どんなキーワードを使うかという知識や幸運が必要だ。だから「Google を使っても見つけられないもの」も、人にもよるが、もちろん、いろいろある。というわけで、自分の profile のこの欄に何を書いて公開するかは、けっこう奥が深い。

とりあえず、昨日の記事を書いたときに気がついたので、私の Google Profile のこの欄は上の画像のように、ついさっき変更しておいた。

検索に引っかかり、上位にランクされる。そんなことはこの blog を書く目的ではないので、昨日の記事はそれで構わないのだ。(笑)

2009-04-08

ひさびさにいいこと

[2009-04-07T21:46:00+09:00に携帯圏外にて]

思いついた。

---

今、東京・竹芝から父島へ向かう、おがさわら丸の船内だ。

到着まで25時間半かかるので、ずっと眠り続けるわけにもいかず、考え事してた。

「自分のブログの中だけでも、自動的に記事間のクロスリファレンスをしたい」

と何日か前に書いた件だが、できうる最善策をみつけた。

よく見かける、記事のラベル(分類)に頼って関連記事を表示する方法は最初から採用の余地すらなかった。そもそもラベル付け自体、投稿時に手動で行うこと。私は怠け者なので、超いいかげんになってる。だからラベルに頼って「関連」を表示するのは私のブログの場合はほとんど無意味なのだ。

早く、プログラム書きたい。

---

でも、連休明けまで小笠原でダイビング三昧。(笑)

だから、実際にプログラム書くのは帰ってから。

実際に動かしてみないとスピードがわからないが、機能をどこまで盛り込むかで調節できる。

---

帰ってからの楽しみができた。まだ目的地に行ってもないのにね。

(写真は、おがさわら丸Cデッキのず〜っと変わらない風景)


2009-04-04

PageRank は有向グラフ

この blog の昨日の記事を書いてから、少し調べたり考えたりした。

Blogger の backlink が動いていない件について。実は(例によって)簡単な理由だった。私がお馬鹿だった。以下、分かってる人にはあたりまえだったとは思うが、念のためにまとめておく。

決定的な証拠は、かなり古いが phydeaux3 さんの "Beta Tags Evolution" 2006-10-17
の記事。「2006-10-11 頃に Blogger の仕様変更があって、 backlink widget の中身を javascript で完全に置換するようになった」とある。 上の記事に気がついた理由は、私が backlink widget の中身をいじってもブラウザでの表示に反映されなかったからだ。同じ悩みの人がネット上に居ないかと探して、発見。実際、私の使ってるテンプレートの backlink widget がそのまま表示されるとすると、スコープ外の属性値 data:post.backlinksLabel を参照している部分がある。

Blogger の仕様変更の理由は、 link love という馬鹿なことを誰かが言いふらし始めたためだ。

link love というのは「コメントを付けてくれた人、あるいは、リンクを貼ってくれた人に感謝し、お礼でリンクを貼ってあげる」というものだ。 これがなぜいけないかは、検索エンジンの PageRank を上げるためのスパムに使われるからだ。「リンクするのは簡単だが、リンクされるのは難しい」という片方向性を使って PageRank というのがうまく働いている。 link love はそれを根本から壊す。

---

詳しく説明しよう:

2006-10-11 以前の Blogger では backlink の部分のコードがテンプレートに書かれているとおりに動いた。リンク元 (backlink 先) への a タグにデフォルトで付いている rel='nofollow' は、テンプレートをちょっといじれば、誰でも簡単に除去できる状態になっていた。

link love を「良い事だ」と信じた、多くの無邪気な Blogger 利用者が nofollow を外した。 nofollow の外された Blogger ブログをネットの世界から探しだすのは超簡単だ。 nofollow を外すと検索エンジンの送り出すロボットがその a タグのリンクを辿るようになってしまい、 PageRank に影響が出る。

スパム業者はそこに目をつけた。 nofollow の外れたブログに大量にリンクを貼るのだ。すると、自動的に自分が同じ数だけリンクを受けることになる。 始末の悪いことに、標的になった link lover は自分の大昔の投稿に backlink が大量に生じたことに全く気がつかない。コメントに関しては、コメントする側に画像の歪んだ文字を読ませるとか、ブログ管理者にメールで通知するなどのスパム防護処置が可能だが、 backlink spam にはなんの処置もとれない。そもそも Web の構造上、リンクは自由に貼れるものだ。リンクを貼られるたびにいちいちメールで通知されていたらたまらない(スパム業者の標的になったときにめちゃくちゃ大量のメールが届きますよ)。

という事情で、 nofollow が外せないように、ページがロードされたあとテンプレートの該当部分を javascript を使って置き換えるというように、仕様が変更された。

この事件のおかげで、検索エンジンの持つ backlink を公開する機能 (Google や Yahoo! なら link: 演算子) 自体に PageRank を無意味にする可能性がある(☆)ことも分かった。以後、 backlink はほとんど検索できなくなるように、 Google は変更されている。(☆: ブログ業者とスパム業者が結託して、検索エンジンを利用して backlink を実装したら困るじゃないですか。)

---

結論: しょうがない。なんか、今日の記事、ぜんぜん楽しく感じない。暗澹たる、とはこのことか。

2009-04-03

Gordon's Tech: My new number one Blogger request: fix backlinks with whitelisted URLs

I agree with you, John.

Gordon's Tech: My new number one Blogger request: fix backlinks with whitelisted URLs


によると、 Blogger の backlink は動かされていない。 VIP の blog を除いては。

やっぱりね。だって、自分のブログの中で、昔の記事にリンク貼っても、昔の記事のところに backlink が出たことないもの。

他のサイトからどう思われてるかなんて私にとってはどうでもいいので、自分のブログの中での自動リファレンスとして有用な機能だと思ってたのにな。

ちょっと前まで、新しい記事で昔の記事へリンクを貼ったら、昔の記事にも「未来へのリンク」を書くことをしてた。でも、最近は面倒くさいからやってない。 Backlink 機能があるから、 Google さんにまかせて待っていれば、いつの間にか出るだろうと思ってたし。

自分でなんか作って、おのれの blog 内のバックリンクだけは自動化しようかなあ。。。考え中。

2009-04-01

地味にバグ取り

今日は (今日も?) Blogger テンプレートを地味に直した。以下の話はブラウザの環境によってはエイプリルフールのネタにしか見えないが、だからといって嘘ではない。

Archive (このブログで「書庫」と書いてあるところ) の ► と ▼ がなんだか気に入らない。ブラウザによっては、表示が変になるのだ。

原因は明らかで、2つの記号の「素性が違う」から:

Unicode 0x25BA BLACK RIGHT-POINTING POINTER
Unicode 0x25BC BLACK DOWN-POINTING TRIANGLE

だ。POINTERTRIANGLE は素性が全然違うので、向きだけが違うわけではなく、見え方自体が全然ちがってもおかしくない。

残念ながら BLACK DOWN-POINTING POINTER という字はないので、 ► は

Unicode 0x25B6 BLACK RIGHT-POINTING TRIANGLE

でなければならない。

えっ? ► POINTER も ▶ TRIANGLE も同じだよ、

という方、世の中にはこの2つが違うように見える (前者が後者より痩せて見える) 環境があるのですよ。あるいは、この2つが全然違うように見えている方、全く同じに見える環境があるのですよ。

テンプレートから手の届かない場所にハードコーディングされているので、このバグは Blogger の管理者でないと簡単には除去できません。ちなみに、 Google でちょっと検索をかけたら、同じ悩みの外人さんが1人居ました。

---

とりあえず、メジャーどころのブラウザでは変にならないように、 font-family を指定するという姑息な技を使っておいたが、 IE6 以下と Win 版の Opera には効果なし…。ま、些細なことなので、気にしない。

以上のストーリーは、なんだか「波ダッシュ物語」とそっくり: 昔むかし M という大きな会社は Shift-JIS の 〜 WAVE DASH を Unicode の ~ FULLWIDTH TILDE に写像するという非可逆な(!)実装をしていましたとさ。(これは面白い昔話なので、知らない人は Google 先生に訊いてみよう。笑)

---

というわけで、素性の違うものは見え方が違って当然。手の届かないところのバグは触らず放っておく、それがベスト。

2009-03-31

(続) Blogger のブログリストにサムネイル

3月20日のエントリ で、 Blogger のブログリストにサムネイルが付くようにAtom フィードをする CGI を作って、レンタルサーバに設置してみた、と書いた。

今日の記事は、その続編。

Seesaa で公開されているブログにも、私のブログリスト上でサムネイルが付くようにしてみた。とは言え、 Seesaa のこのお方のブログは、もともと RSS 2.0 のフィードがあり、サムネイルへのリンクを img タグに持っている。だから、それをそのまま利用して media:thumbnail タグにするパイプを作った。その仕上がりは、いま現在のこのブログの右段のようになり、予想以上にかっこ良い。

その作業で分かったこと:Blogger のブログリストで表示できるサムネイルのサイズに、制限は無い。もちろん、サイズが大きすぎれば表示しきれないが、Blogger は関与しない。

3月19日のエントリで触れた、 Blogger Developers Network のアナウンスでは、確かに、ブログリストのサムネイルのサイズに言及していない。72 x 72 というのは、 Blogger の各投稿の最初の1画像をサムネイルとして用意する(そして、サムネイルへのリンクをフィードする)ときのサイズだ。  Blogger の外からのフィードの media:thumbnail タグの画像をわざわざ 72 x 72 にリサイズするわけではない

というわけで、サムネイルは 150 x 150 程度になるようにしてみた。写真が美しいブログは、ブログリスト上でも写真が大きい方がいい、と思う。

2009-03-21

Shell 要らないもんね

レンタルサーバを借りている、という話は、最近、か記事にした。今回はレンタルサーバの話題。

---

「自作の CGI が設置できること」

このたった1つの条件の下、なるべく安いレンタルサーバのプランを探した。そして、見つけた格安サーバと契約した。その時点では、
プログラミング言語は Perl とか PHP とかのスクリプト系しか使えない、だって、 shell (ssh) が使えないから、 ftp しか手がないもんな

と思っていた。

でも、気がついてしまった:なーんだ、ちょっと頭を使えば(使わなくても?私が馬鹿だっただけ?)なんでもできるじゃん。理論的には、値段がかなり高い「shell 利用可能プラン」と完全に同じことができる。違いは、 shell 無しはとんでもなく不便、という点のみ。そういうのは私はむしろ面白いと思うほうなので、我慢して、楽しんじゃう。よかったよかった、 安いプランにしておいて。(笑)

---

手始めに、mathTeX



をレンタルサーバ上にインストールした。 mathTeX は、 数式を画像として表示させる CGI だ。サーバ上の本物の LaTeX と、画像ツール dvipng を動的に実行してくれる。

mathTeX は C で書かれているので、レンタルサーバ上でコンパイルする必要がある。念のため: 自宅とレンタルサーバは環境が違うから、自宅でコンパイルしたバイナリをサーバに持って行ってもダメ、動くわけないからね。

mathTeX のインストールが終わったのを一人で祝して、テストしてみる。 TeX などの数式清書系 (?) では一番最初に書くべきお約束の数式だ (いわば、Hello World! に相当する、かな?)。

わーい!

ちなみに、上の数式は HTML で
<img src="http://myservername/mypath/mathtex.cgi?$$x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}$$">
と書かれている。緑色部分は LaTeX そのもの。(ちなみに、どうせばれるのに隠した部分は qwnp 避け。)

これで、きれいな数式を blog で手軽に使える。実は、他人のサーバにある mathtex.cgi を勝手に使って負荷かけちゃ悪いと、長いあいだ遠慮してたんですよ。ちなみに私のサーバは、えーとえーと…負荷対策で制限かけてます。ですから、他のサイトからは私が今回設置した mathTeX は使えません。ごめんなさい。(この制限をクラックして破るのはほんの一瞬でできますが、ご遠慮ください。自分でサーバ立てましょう。笑)

数式も blog にいっぱい書いちゃうぞ。
CGI だって C で書いちゃうぞ。

2009-03-20

Blogger のブログリストにサムネイル

昨日の記事で書いた、サムネイルが表示される機能。

私が借りたレンタルサーバ上の、 CGI スクリプトの1つにさっそく実装してみた。



ついでなので、公式の The W3C Feed Validation Service で Atom フィードとしてダメですよ、と大量にエラーが出ていた部分も直した (☆)。これで完璧、なはず。。。

この手のことは、できてしまえば簡単。逆に、すぐにできないものはいつまでたってもできない。

でも、実は必要になったので、陰でこっそり、libjpeg だの ImageMagick+PerlMagick だのをソースを拾って来てコンパイルしていた(ソースから始めたのは、安直にバイナリパッケージを拾って来たら動かなかったから)。あははは。最近、画像で遊ぶときには Photoshop でばかりやっていて、自分のマシンにこういう必須アイテムがないのを気づかずにいたとはね。(汗)

Perl で、自動的に画像を弄れるのは楽しい。せっかく CGI を動かせるレンタルサーバを借りたのだから、何か、別の面白いこともやろうかな。
「Blogger のブログリストに表示されるようにサムネイルを送信するということ」は簡単でした

というご報告だけで、詳しい内容の説明はしなくていいでしょ?

Atom フィードの規格が理解できて、閲覧者のブラウザやフィードリーダの攻撃に負けない CGI を書ける人なら、昨日のエントリのリンクを辿るだけで全ての情報にアクセスできて、充分なはず。

あ、プログラミングには自信があるけど英語が読めないって?うーん、強い要望があれば、和訳をやってもいいけど。。。そういう人は、英語の勉強したほうが、将来のためにはいいんじゃないですか?

---

最後に☆の件: <entry> の子要素の <id> の中身が問題だった。フィードの中で一意であればいいのかと、私が誤解していた。ちゃんとした URI である必要があった。まあ、たいていのフィードリーダは良きに計らってくれるから実害はない。

で、<id> に使える、ちゃんとした URI なのだが。

ポピュラーだという点で、世界で日本が一番な、MovableType という「世界標準の CMS プラットフォーム」がある。MovableType が blog エントリの <id> の中身として、 RFC4151tag: で始まる URI を使っている、という話を以前どこかで読んだ。だから、まず、真似をしてみた。

だめじゃんか。上記の The W3C Feed Validation Service には「tag: ってのは正式な URI として認めてあげないからね」って、怒られた。大ショック。大手さんとこ(?)の真似しただけなのに…。というわけで、 "http://怪しいサーバのアドレス/こんな/ディレクトリ/実際には/ないよ" という形式で <id> を付けた。すると、怒られなかった。それどころか「おめでとう!あなたのフィードは完璧です」と褒められたよ。(笑)

五十歩笑百歩じゃないかなあ…。

2009-03-19

BDN: Feeds now include Media RSS thumbnails

Blogger の「ブログリスト」(blogroll とも言う)の関係で、フィードで遊んでいた。設定用画面に



"Thumbnail of most recent item" という怪しいチェックボックスがあるのが気になった。

で、まじめに調べてみた。すると、この記事Blogger Developers Network: Feeds now include Media RSS thumbnails を発見。

おお。面白そう。

自前で立てた Atom フィードサーバに実装しちゃおうかな、っと。

---
今日は、上の情報の在処を忘れないように、 blog をメモがわり。

2009-03-14

フィードが…

前の投稿(2009年3月10日)で「フィードがどうの」と調べたおかげで、フィードがない日記風のサイトが気になりだして、JavaScript でいろいろ遊んでいた。

確かに自分の blog に「おすすめ blog」としてリストアップしている脇に個別の最新の情報がちょびっと記されるのは素敵だ。

---

フィードがないサイトをフィードに変換するというサービスを調べてみた。検索をかけたらすぐに、「RSSを配信していないサイトをRSSリーダで読む方法」と題する blog の記事がヒット。でも、この人、列挙してるだけで技術的な説明が全然ないよ。営業の人なのかな?

そこで挙げられている4つのサービスのうち、サーバを自前で持たずに使えるのは3つ。そのうちで、東京工業大学の奥村研究室以外の2つ (MyRSS, goo フィードメーカー) は、ほぼ同じ方法だ。以下、いいかげんに説明する:

あるページ(goo の場合は div ブロックでも可)をユーザが指定する。するとサーバは、指定された範囲内の A 要素をなるべく頻繁に監視する。ただし、 A 要素を踏んだ先のページは見に行かない。 監視範囲内で、 A タグ href 属性の右辺 "RCDATA" の変更、あるいは A タグの増加(実は両者は区別できない)があったら、それに気がついた日時とともにリストアップして保存する。細かいことだが、既にリストアップされていた "RCDATA" を持つ A タグが消滅した場合、リストからは消去する。そうやって作った「新着リスト」は、ユーザが訊けば、フィードという形式で(最大15件とか24時間以内の全てとかを)教えてくれる。 ちなみに、ユーザが何回訊いたって、「新着リスト」自体が更新されてなければ同じリストしか返ってこない。

[goo の場合は、「監視」して(その必要があれば)リストを更新するという作業は1日おきだが、お金を払えば30分おきになるというあざとい商売もやっている。そもそも、goo では指定ブロックの中から特定のタグを監視除外に指定できる機能があるんだけど、これはよく考えれば(★)仕様自体がバグ。無料の場合は指定できるブロックの総数に制限があり、お金を払えば緩和されるので、それと関連付け誤解させようというあざとい手口だ。]

東工大奥村研の方法は全然違う。日記風の1ページが対象だ。指定されたページから、まず、年月日の情報らしきパターンとそれに伴う本文らしきテキストを自動的に抽出する。ユーザが訊くと、抽出された日記情報のリストを、フィードの形式にして教えてくれる。なかなかのすぐれものだと思う。しかし、ここは学術的な実験サーバである。だから、指定されたページの情報を、直後の30分間、保持してくれるにすぎない。もし30分以内に日記に変更があったとして、ユーザが訊きかえしても、「抽出」の作業を繰り返したりはしない。つまり、実用には全然使えない

ちなみに、MyRSS は10日、 goo は3ヶ月、ユーザが訊かずに放置すると、「監視」すること自体をやめる。長期で僻地へ旅行してフィードが読めなかったというような場合、帰ってきたときこそ「新着」が読みたくなりそうだが、そういう用途には全く向かない。もし、自分は読まないけど、監視はやめさせたくないなら、たとえば、blog のサイドバーの中で MyRSS や goo で作ったフィードを使うとよい。すると、誰かが blog を訪れるたびにサイドバーからフィードが参照され、放置にならない(厳密にいうと、 Blogger のシステムの場合はページの表示を速くするために Blogger 自身がキャッシュしている気配があるが)。あ、 FeedBurner を使うという手もあるな。

---

「RSSを配信していないサイトをRSSリーダで読む方法」という上の blog のタイトルで、もっとすごい技術のように誤解してしまった。これは私が悪いんだろうな。ごめんなさいね、お馬鹿で。

というわけで、これだけコンピュータの性能が上がったのに、もし有料ならせこいサービスかも、と思ってしまった。

まあ何にせよ、クライアント側で blog に埋め込まれた JavaScript が動いてやる作業ではあり得なかった。(笑)

---
2009/3/17 20:31 追記: けっきょく、 blog 風のページだけど既存のサービスではフィードにできない、そういうページに関しては、 Perl で CGI を書いて個別に Atom フィード対応した。それをこの blog で受け取って右段に表示してある。 CGI が設置できるレンタルサーバってけっこう安いし、 CGI 書くのも難しくなかった。(フィードの元のページのデザインが変わると、CGI をそれに合わせるというメンテナンスが必要、というのが大問題だけど…。)

★: 自然数 (時刻) t で定まる集合 A(t) とする。 A(t+1) と A(t) の「新着」とは差集合 A(t+1)-A(t) だ。オプション「時刻 0 での A(0) の要素 x は新着から除外する」が意味をもつのは、 t=0 より後に x がいったん A(t) に含まれなくなり、訊いた時刻 (にもっとも近い監視時刻) に含まれた場合のみだ。そもそも、「除外する」というユーザの希望をサーバは永遠に保持するのか?3ヶ月で忘れたりしないのか?それに、消滅した A タグが復活する(そしてそれは新着から「除外」したい)というページ範囲は、おそらく、ユーザが「除外」したくなるような A タグが他にも 消滅/復活 を繰り返す性質を本来持っているのではないか。だから、今は存在してないけど、将来、現れたときにいちいち「除外」という希望を新規設定しに goo にログインするの?それでは自動でも簡単でもなんでもなくて、面倒くさすぎ。フィードじゃなくて、元ページを自分で巡回したほうがいい。完全に不要な機能だと思う。

2009-03-10

Blogger の機能を増設中

Blogger のテンプレートを玩んでいた。

---

まず、フィード関連。

気分屋なので「チェックしてないと気が済まない」という物事はこの世に存在しない。ニュースだってテレビだって全然見ないときは見ない。というわけで、フィード関連は、これからも自分では使わない。と思う。

しかし、もちろん自分の好みは関係がない。

他人が便利に見てこその blog なので、フィード関連を充実させてみた。ラベル毎の投稿フィードを自動的に作成する JavaScript がクリボウさんのところにあった。おお、これはすばらしい!ありがとうございます、使わせていただきます。

でも、せっかく JavaScript の関数 encodeURIComponent() を使うのだから、 Unicode で表せる言語は全てサポートしたい。つまり、左→右と左←右のように書字方向が異なる言語が混在していても大丈夫にしないと。そして、例えばアラビア語で blog をやってる人にも使えるようにしないと。

そのためには以下のように、 data:blog.languageDirection に関連する2ヶ所(本質的には1ヶ所)を変更するだけで良い。

<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
(<data:label.count/>)
<script type='text/javascript'>
var icon = &#39;src=&quot;http://sites.google.com/site/onecotravel/icons/icon_feed12.png&quot;&#39;;
document.write(&#39;&lt;a title=&quot;Posts feed on this category&quot; &#39;);
document.write(&#39;href=&quot;/feeds/posts/full/-/&#39; + encodeURIComponent(&#39;<data:label.name/>&#39;) + &#39;&quot;&#39;);
document.write(&#39; target=&quot;_blank&quot;&gt;&#39;);
document.write(&#39;&lt;img width=&quot;12&quot; height=&quot;12&quot; &#39; + icon + &#39;/&gt;&#39;);
document.write(&#39;&lt;/a&gt;&#39;);
</script>
</li>
</b:loop>
</ul>


この変更をしないとき、何が起こるかは次を見ればわかる。先に、blog のデフォルトの書字方向が ltr の場合の例をあげ、次に rtl の場合の例を掲げる。none は何も対処しないとき、 data:blog.languageDirection は対処したときの表示だ:
    none
  1. 日本語اللغة العربية (123)
  2. اللغة العربية日本語 (123)
    data:blog.languageDirection
  1. 日本語اللغة العربية (123)
  2. اللغة العربية日本語 (123)
    none
  1. 日本語اللغة العربية (123)
  2. اللغة العربية日本語 (123)
    data:blog.languageDirection
  1. 日本語اللغة العربية (123)
  2. اللغة العربية日本語 (123)
[ヒント: マウスで文字列をいろんな始点からいろんな方向へドラッグしてなぞってみると、どういう順に字が繋がっているかがわかるよ。それから、アラビア語でも数字は左→右に書く。]

実は、私の使っているテンプレートにはこの多国語対応は実装されていた。しかし、余計なところで書字方向を指定するというバグ入りだったからそれは除去してある。このバグは、「書字方向によって括弧のグリフは自動的に反対向きになる」という知識のない人の仕業だった。「なぜ同じ向きの括弧が2つ現れるのか」を、かわいそうに、悩んだに違いない。ほらほら、日本語だって、横書きと縦書きで、テキストデータそのものは同じなのに、括弧(や、句読点などの約物)のグリフだけは自動的に置き換わるようになってるでしょ?

(日本語ブログに於ける需要、少なからむ…。)

意味があるんだかないんだか。(笑)

---

次に。

テンプレートを読んでいたら、それぞれの投稿 post 毎に data:post.timestampISO8601 という属性が参照できることが分かった。

上と同じクリボウさんのところに、投稿とか更新の時期で絞ってフィードを受けるパラメータが書いてあった。なるほど、 Blogger は ISO8601 での時刻表記を検索キーにしていたんだね。(書いたあとでわかった:実は、世の中のフィードと言われるもの全般がそうみたい。なにせ RFC3339 がある。汗)

さて、Blogger にはコンテンツの表示方法が3通りある。簡単に説明しておこう。

(1) index 表示: 「ホーム」、あるいは、「ホーム」から「前の投稿」「後の投稿」だけを踏んで辿り着く表示。コメントとバックリンクの内容は表示されない。この状態で「前の投稿」「後の投稿」を踏むとオーナーの設定した記事数で機械的に index 表示される。 (注: Blogger 関連の古い文献では index ではなく main 表示という名で同じものを呼んでいる。)

(2) item 表示: 1つの投稿への permalink (別のサイト上に書かれたリンクなど)、または、記事の最後にある「Links to this Post」とかいうやつ、「アーカイブ」の特定の1つの投稿へのリンク(オーナーが HIERARCHY モードに設定している場合に限って存在)のいずれかを踏んだ直後の表示。1つの投稿だけが表示され、コメントとバックリンクの内容が表示される。この状態で「前の投稿」「後の投稿」を踏むと1つの投稿だけが item 表示される。

(3) archive 表示: 「アーカイブ」「ラベル」の中から投稿の集合(実際には要素が1つかもしれない)を表すリンクを踏んだ直後、あるいはそこから「前の投稿」「後の投稿」だけを踏んで辿り着く表示。コメントとバックリンクの内容は表示されない。この状態で「前の投稿」「後の投稿」を踏むと元の分類になるべく沿って archive 表示される。

以上により、大昔の投稿を index 表示させるには「ホーム」から延々と遡る以外に方法は存在しないことが分かる。多大な努力が必要だ(笑)。他の表示にはどの表示からも、より簡単に辿り着ける。つまり、index 表示は他の表示の上流にある

今日は、その上下関係も解消してみた。

具体的には、 item 表示のみに存在する部分(コメントとバックリンクの内容の部分)の直上にを追加した(この素敵なアイコンそのものはヒトミンさん作成の素材だ。ありがとうございます)。このボタンは、 現在の item 表示を index 表示に切り替える機能を持つ。パッと見にはコメントとバックリンクの部分が縮むだけ(この blog に限っては一番上にもちょっと変化がある)。しかし、縮んだ後で「前の投稿」「後の投稿」を踏むと、 item 表示と index 表示では挙動が違う。

試してみよう: 場合1: この記事の直後にが見えているとき。あなたは今 item 表示だ。ボタンを押してみよう。 index 表示になり、ボタンが消える。

場合2: 記事の直後にボタンが無いとき。あなたは今 index か archive 表示だ。記事の上下にある投稿時刻、あるいは、記事の下の 「Backlinkとコメントを見る」を叩いてみよう(これは Blogger にもともとある機能だ)。 item 表示になり、ボタンが出現。

場合 1, 2 のそれぞれで、「もっと古い記事へ」とか「もっと新しい記事へ」というリンクも踏んでみると、違いがもっとよく分かる。

以下、プログラミングの細かい話。

このボタンを実装する際には「±1秒で挟んで自分自身を検索する」という方法をとった。 JavaScript で ISO8601 の時刻の加減算ルーチンを書く必要があったのだが、ぶいてくさんのところが参考になりました。ありがとうございました。

Blogger では投稿時刻を「分」の単位までしか指定できない。それにもかかわらず、検索のキーは「秒」の精度をもつ。これはおそらく、複数の投稿が同一時分になることがあると考えた仕様だ。だから、この部分で手を抜いて max-results=1 とやってはいけない: index 表示に変更したときに自分自身が検索結果から抜け落ちる可能性があるからだ。というわけで、実際のコードは以下だ。

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div>
<script type='text/javascript'>
var msToISO8601 = function (m) {
var sprintf = function (s) {
return (&#39;0&#39; + s).replace(/.*(..)/, &#39;$1&#39;);
}
var d = new Date();
d.setTime(m);
return (&#39;000&#39; + d.getUTCFullYear()).replace(/.*(....)/, &#39;$1&#39;) + &#39;-&#39; + sprintf(d.getUTCMonth() + 1) + &#39;-&#39; + sprintf(d.getUTCDate()) + &#39;T&#39; + sprintf(d.getUTCHours()) + &#39;%3A&#39; + sprintf(d.getUTCMinutes()) + &#39;%3A&#39; + sprintf(d.getUTCSeconds()) + &#39;Z&#39;;
}
var newdate = Date.parse(&#39;<data:post.timestampISO8601/>&#39;.replace(/^(\d{4})-(\d{2})-(\d{2})T(\d{2}:\d{2}):(\d{2}|\d{2}\.\d+)([+-Z])(.*)$/, &#39;$1/$2/$3 $4 UTC&#39;)) + 1000*RegExp.$5;
if (RegExp.$6 != &#39;Z&#39;)
newdate -= Date.parse(&#39;1970/01/01 &#39; + RegExp.$7 + &#39; UTC&#39;)*parseInt(RegExp.$6 + &#39;1&#39;, 2);
document.write(&#39;&lt;a href=&quot;/search?&#39;);
document.write(&#39;updated-max=&#39; + msToISO8601(newdate + 1000));
document.write(&#39;&amp;&#39;);
document.write(&#39;updated-min=&#39; + msToISO8601(newdate - 1000));
document.write(&#39;&quot;&gt;&#39;);
document.write(&#39;&lt;img src=&quot;http://sites.google.com/site/onecotravel/icons/shut_01.gif&quot;/&gt;&#39;);
document.write(&#39;&lt;/a&gt;&#39;);
</script>
<span style='font-size:x-small;color:#999999;'>この下を閉じる</span>
</div>
</b:if>


(ソースコードを HTML 化するにあたり、 Peter Palfrader さんの Code to HTML converterの出力を現代風(?)に加工して使いました。特記して謝意を示します。Special thanks to Peter!)

これをテンプレートの
<b:includable id='post' var='post'>
の閉じタグ
</b:includable>
の直前にコピペすればよいはず。

この機能も需要が少なそう。でも、どっかから大昔の記事に飛んで来た人を、それに近い日付の記事たちにも手早く誘導できるのは確かだ。

index, item, archive の表示の仕方の区分は、実は、この作業が終わるまでぼんやりとしか理解してなかった。でも、分かってしまうと、仕様がよく練られているなあと、感心。 Blog にカレンダー(と、関係ないが、トラックバック機能も)は要らない。創造性豊かな Blogger の開発者たちに大拍手!

---
2009年3月11日14:24デバッグ: IE の JavaScript では substr() の引数に負数が使用できないことが判明 (IE7でもダメ)。しょうがないので、たとえば substr(-2) と書きたいところを replace(/.*(..)/, '$1') にした。
2009年3月13日16:02デバッグ: Unicode の正しい対応に誤りがあった。記事中の解説もそれに合わせて変更した。
2009年3月15日22:22デバッグ: UTC の地域で Blogger は data:post.timestampISO8601 に +00:00 を表す Z を使っていることが判明。正規表現を手直しした。

2009-03-09

テンプレート変更

この blog の見栄えを変更してみた。

ネット上には Blogger 用のテンプレートがたくさん公開されている。でも、自分で手を入れることを考えて、Blogger 自身が公式にメンテナンスしている比較的単純なやつにした。作業をしたのは昨日と今日だけなのでまだ終わってない。画像やアイコン関連をもう少し弄るつもり。

テンプレート変更のついでに、 Google AdSense で (1) 他社の広告が右段の下の方に出るようにしてみた。それともう1つ、この blog の中の全文検索に関して、 (2) 右段にボックスを追加してみた。 設置者である私は (2) での検索は禁止という約束だ。憶測だけど、左上に最初からある検索機能のほうが、この blog 内の全文検索には何かと便利かも…。

(1) も (2) もコンテンツ(やキーワード)に合わせた広告が出る。いったい何の広告が選ばれるのだろう?実は、それが楽しみ。「合わせきれない」と Google AdSense が判断すると公共広告になるようだ。

どんどんクリックしてやってください。(笑)