Pages

2005-09-30

Emacs-w3m のタブの色を変えてみた

これは、もう趣味の問題になると思うのだけど、僕は Emacs-w3m のタブの色使いが苦手。特に、タブが二つある時、どっちのタブが選択されてるか分かんなくなっちゃう。

Emacs-w3m original tabs

選択されてるタブが薄い灰色。非選択は濃い目の灰色。なのだけど、僕の目には濃い目のタブの方が目に入ってきちゃう。

もう、こんな生活は嫌んなった。そこでタブの色をカスタマイズしてみた。

Emacs-w3m costomized tabs

選択したタブは白色。非選択のものは、タブ・メニューの背景色と同じにして目立たなくした。これで、選択してるタブは一目瞭然。

Emacs-w3m with 4 customized tabs

タブの下にはロケーション・バーがあるけど、画面をスクロールさせるとロケーション・バーは見えなくなる。すると、タブがブラウズしてる画面とくっついて、あたかも本物のタブのように見える。このためだけのために、タブの三次元表現 (ボックス) もやめた。

設定

.emacs に以下のコードを追加。

;;
;; tab-color
;;
(custom-set-faces
 '(w3m-tab-selected-face 
   ((((type x w32 mac) (class color))
     (:background "white" :foreground "black"))))
 '(w3m-tab-unselected-face 
   ((((type x w32 mac) (class color))
     (:background "LightSteelBlue" :foreground "Gray20")))))

自分が使ってるのは GNU Emacs 22.0.50 (開発版) なので、 GNU Emacs 21 系じゃ上手く動かないかもしれない。その時は、ご容赦を。

2005-09-29

AUCTeX 11.81 リリース |Emacs|preview-latex|

AUCTeX 11.81 が 2005-09-25 にリリースされた。

3 月頃から、「あと二週間で 11.80 リリース」という話が (何度も) 出てるけど、 未だリリースされず... 今年中のリリースなるか? (きっと無理だな Xp)

なんてことを書いてたその日に 11.81 リリース。穴があったら入りたい ;_;。

それはともかく、11.81 での変更点とリソースを書いとく。

AUCTeX 11.81 の変更点

  • preview-latex が AUCTeX に統合された。
  • インストール・プロセスが書き直された。
    • make contribmake に一本化された。
    • (require 'tex-site) から (load "auctex.el" nil t t) に変更。
  • 日本語 fill コードが新規に書き直された (11.55 で入った fill のバグも修正された)。
  • Folding がマウス・オーバー・ツールチップを採用。
  • preview-latex と folding が競合するバグが修正された。
  • font-latex のカスタマイズ変数が変更された (from font-latex-title-fontify to font-latex-fontify-sectioning)
  • 日本語 TeX モードなら mode name に japanese- を加えるようになった。
  • Beamer 関連のコードが充実 (テーマが補完できるようになったとか (\usetheme))。
  • amsmath 関連のバグ・フィクス (ラベル周りの修正と未サポートの数式環境の追加)
  • その他、沢山のバグ・フィクスと機能拡張

11.55 を使っている人には、特に日本語改行 (fill) のバグ修正が大きいと思う。

preview-latex も一年前に比べれば格段にインストールが楽になった。TeX-fold との競合バグもなくなったので、是非、preview-latex + TeX-fold な世界を楽しんでもらいたい。これは、スゴイの一言ですよ!!

リソース

AUCTeX
AUCTeX の本家ウェブページ
AUCTeX in Japanese
日本語 AUCTeX の情報サイト
TeX Wiki AUCTeX
同じく、日本語 AUCTeX の情報サイト
clmemo@aka: preview-latex のインストール (2005/9)
開発版 AUCTeX における preview-latex のインストールについて (11.81 でも変わらない)
clmemo@aka: AUCTeX のインストール 2005/9
開発版 AUCTeX のインストールについて (11.81 でも変わらない)

2005-09-28

FeedBurner に登録した

Textocean さんの記事Okanomail.com さんの記事に触発されて、 FeedBurner に登録した。何に魅かれたって、Feed のアクセス解析ができるってことと他の Ping サーバーに Ping が打てるってところ。 BloggerWeblogs.com にしか Ping を打たないから、 Ask Jeeves のブログ検索に引っかからない。これで、 Ask Jeeves のブログ検索にも引っかかるようになるはず。ところで、 Ask Jeeves はどこの Ping サーバーを見てるの? (それが分かんなきゃ、ダメじゃん Xp)

閑話休題。新しいサイト・フィードが出来たので手数ですが新フィードの登録をお願いします。もちろん、 FeedBurner なフィードを使いたくない人は、旧来の Blogger のフィードをお使い下さい。

先日導入した、 solosub からも feed 登録できるので、お試しあれ。solosub は右カラム一番上の About セクションの中にある。

Firefox -- タブ関連のショートカット

firefox って Ctrl+TAB で隣のタブに移れるのだね。 ALT+TAB しようとしてタイポしたら、タブが切り替わったのでびっくりした。せっかくなので、 firefox のヘルプでタブ関連のショートカット・キーを調べてみた。

Ctrl+T
新しいタブを開く
Ctrl+W
現在開いているタブを閉じる
Ctrl+TAB (or Ctrl+PageDown)
次のタブに切り替える
Ctrl+Shift+TAB (or Ctrl+PageUp)
前のタブに切り替える
ALT+1..9
1 (から 9) 番目のタブに切り替える。

ちなみに、中クリックでリンクを新しいタブで開ける。これはツールバーの「戻る」や「ホーム」とかブックマーク・ツールバーとかでも使える。かなり重宝。

.

2005-09-27

Emacs-w3m で見てるページを firefox の新しいタブで開く

Emacs-w3m で閲覧中のページを firefox で開くには、 Emacs-w3m の中で M (M-x w3m-view-url-with-external-browser) を押す。firefox は、 Emacs-w3m で見ていたページを開く。ただし、今まで firefox で見ていたページは上書きされる。

もし、 Emacs-w3m のページを新しくタブを開き、その中で見るようにしたければ次の設定をする。

;; browse-url-firefox
(setq browse-url-browser-function 'w3m-browse-url)
(setq w3m-content-type-alist
      (cons
       '("text/html" "\\.s?html?$"
  (lambda (url) (browse-url-firefox url browse-url-new-window-flag)))
       w3m-content-type-alist))
(setq browse-url-new-window-flag t
      browse-url-firefox-new-window-is-tab t)

ただし、上の設定は開発版 Emacs の場合の話。最新開発版の browse-url.el は次の所で手に入る。Emacs 21.4 で動くかどうか、分かんないけど...

via

ref

TypePad のデザイン・テンプレートを見る |Movable Type|

TypePad も 1.6 にバージョン・アップして、デザイン・テンプレートの数が増えた。ところで、他のデザインに変える時、デザインのテンプレートをどこで見ている?

ほとんどの人が、 TypePad の管理画面から「デザイン」の「テーマを変更」を選んでるのでないかしらん。そんな人達には、 Six Apart が提供している、こんなサイトがお勧め。

これは、 Movable Type 用のスタイル・ライブラリー。なのだけど、 TypePad でもデザインのプレビューとして使えてしまう。「Vicksburg Variations」というカテゴリーだけ、 TypePad で提供されていないのでご注意を。

Style Library では、デザイナーのブログへのリンクとか、同一デザイナーによるデザインの一覧表示だとか、同系色のデザインの一覧とかを見ることができる。操作性も TypePad の管理画面よりいい。ここで、好みのデザインを見つけてから、改めて TypePad の管理画面に入るのはどう??

2005-09-26

SoloSub を使ってみた |Blogger|Atom|

百式で紹介されてた SoloSub というサービスを使ってみた。SoloSub は、複数の RSS アグリゲーター登録用ボタンを表示させる代わりに、登録ページへのリンクを一つだけ貼りましょう、というアイデアをサービスにしたもの。

右カラムにある [ Site Feed ] ボタンをクリックすると、RSS アグリゲーターの登録ページにジャンプする。現在、サポートされているのは、

  1. Bloglines
  2. MyYahoo
  3. NewsGator
  4. Rojo
  5. My MSN
  6. feed:// protocol

の六つがサポートされてる。まだ はてな RSS はない。ちょっと残念。

テンプレートの編集

SoloSub サービスを使う方法は簡単。 Solosub.com に行って、 Generate SoloSub Button に、自分の Site Feed のアドレスを入力するだけ。HTML が生成されるから、テンプレートにコピペする。

Blogger の人だったら、URL は直接入力しないで、 <$BlogSiteFeedUrl$> を使う方がよいかもしれない。この変数タグは、 Blogger の Atom Feed のアドレスに変換される。もし、 Blogger のサービスが変わって、Atom Feed のアドレスが変更されたとしても自動的にフォローしてくれる。僕は、次のようなコードをテンプレートに書いた。

<a href="http://solosub.com/sub/<$BlogSiteFeedUrl$>" 
   title="Subscribe to this Feed">
  <img src="http://images.solosub.com/feed_button.gif" alt="Subscribe to this Feed" />
</a>

2005-09-25

preview-latex のインストール (2005/9) |AUCTeX|

preview-latexGNU Emacs の TeX 入力支援ツールの一つで、数式やアクセント記号を画像で表示する ( See screenshot)。 AUCTeX のメンテナーである David Kastrup 氏を中心に開発が進められ、今年始めに AUCTeX プロジェクトに併合された。現在、preview-latex を配布に含めた AUCTeX をバージョン 11.80 としてリリースするため作業中。3 月頃から、「あと二週間で 11.80 リリース」という話が (何度も) 出てるけど、未だリリースされず... 今年中のリリースなるか? (きっと無理だな Xp)

さて、preview-latex の正式最新版は 0.9.1 (2005-04-03)。だけど、 AUCTeX にマージされてから、いくつかの (重要な) バグ・フィクスが入ってるので、開発版 AUCTeX のインストールの仕方を書いてみる。なお、開発版 AUCTeX 単体のインストール方法は AUCTeX のインストール 2005/9に書いた。preview-latex のインストールに躓いたら、 AUCTeX のインストールそのものに失敗してないか、まず確かめて下さい。

せっかち者のための Quick Start

インストールの流れは、 AUCTeX のインストールと全く同じ (楽になったものだ ^^)。

$ cvs -z3 -d:ext:anoncvs@savannah.gnu.org:/cvsroot/auctex co auctex
$ cd auctex
$ ./autogen.sh
$ ./configure
$ make
# make install

.emacs ファイルに、次のコードを入れる。

(load "auctex.el" nil t t)
(load "preview-latex.el" nil t t)

preview-latex は、バックエンドで TeX を走らせ DVI ファイルを得る。その DVI ファイルから数式などを画像に変換している。この時、デフォールトでは Ghostscript が使われるが画像の生成スピードが遅い。もしか dvipng がインストールされていれば、次の設定を .emacs に足そう。体感スピードが上がるはず。

(setq preview-image-type 'dvipng)

なお、dvipng のインストール方法については dvipng 1.6 を使ってみる を参照のこと。

preview-latex を使ってみる

ちゃんと動くか試してみましょ。サンプルのソースは下記のものを使う。ファイル名は foo.tex。

\documentclass{jarticle}
\begin{document}
\section{preview-latex のテスト}
有名なピタゴラスの定理は、三角形の長辺 $x$ の (以下略)
\begin{equation}
 x^2 = y^2 + z^2
\end{equation}
\end{document}

foo.tex のバッファーで C-c C-p C-d

Cache preamble? (y or n)

と聞かれるので、 y と入力。すると、次のように、数式とセクション部分が画像でプレビューされる。日本語も OK。

カーソルを画像部分の中に入れると、ソースが表示される。そのまま色の変わった部分から、カーソルを外に出すと、また画像に戻る。

ソースを編集したら、 C-c C-p C-p でその場所だけ preview-latex を実行する。

プレビューを解除するには、 C-c C-p C-c C-d

古い preview-latex は tex-fold と競合して Emacs を殺してくれたが、開発版では修正されてる。また、もっと古い preview-latex だと、 \usepackage{preview} という一文が必要だったが、それも要らなくなった。

残念なことに、開発版の preview-latex は YaTeX と一緒に動かない。preview-latex 0.9.1 もどうだろう? preview-latex と同じようなツールに XSymbol があるので、 YaTeX 使いはこちらを使うとよいかも。ただし、開発版の GNU Emacs と相性が悪い気がするので僕はもう XSymbol は使っていない。

Emacs-w3m でタブ・ブラウジングを活用する。

Emacs-w3m はテキスト・ブラウザーのくせにタブ・ブラウジングをサポートしている。リンクを辿る時に、 Shift-RETURN すると、新しいタブを開く。若しくは、 M-n ( M-x w3m-copy-buffer) で新規タブを作ることができる。

タブに関するコマンドは、以下の通り。

C-c C-t
新しいタブを作る ( M-n に同じ)。
C-c C-n
次のタブへ移る。
C-c C-p
前のタブへ移る。
C-c C-w
現在のタブを閉じる。

browse-url との連携

パッケージ browse-url を使えば、 GNU Emacs の他のバッファーから簡単に Emacs-w3m に入れることは 以前書いた (本題は firefox だったけど Xp)

さらに、次のような設定にすると、browse-url した時に新しいタブでそのページを開いてくれる。

;; Emacs-w3m を browse-url のデフォールト・ブラウザーにする
(setq browse-url-browser-function 'w3m-browse-url)
;; 新規タブで browse-url する
(setq browse-url-new-window-flag t)

2005-09-24

dvipng 1.6 を使ってみる |AUCTeX|LaTeX|

dvipng は、TeX の DVI ファイルから PNG (or GIF) 画像を生成するコマンド。今回は簡単な使い方を書いてみる。

先に書いておくけど、dvipng 1.6 はまだ日本語に対応していない。

インストール

インストール方法は、普通の GNU 方式。通常、以下の操作で OK なはず。

$ ./configure
$ make
# make install

必須のパッケージは、 gd と libing, libz, Texinfo。gd 以外、ほとんどのシステムでデフォールト・インストールされてるはず。

dvipng を使ってみる

こんな TeX ソースを試してみよう。

\documentclass{article}
\begin{document}
This is a test of dvipng.
\newpage
\pagestyle{empty}
\begin{equation}
1 + 2 + \cdots + 10 = \sum_{i=1}^{10} i = \frac{10(10-1)}{2}
\end{equation}
\end{document}

ファイル名を dvipng.tex とする。コンパイルは次の通り。

$ platex dvipng.tex
$ ls
dvipng.aux  dvipng.dvi  dvipng.log  dvipng.tex

出来上がった DVI ファイルを dvipng にかけてみよう。

$ dvipng dvipng.dvi
$ ls
dvipng.aux  dvipng.dvi  dvipng.log  dvipng.tex 
        dvipng1.png  dvipng2.png

      

dvipng1.pngdvipng2.png というファイルが出来た。このように、dvipng は、1 ページごとに PNG 画像を生成し file#NUM.png という名前で出力する。

PNG ファイルの中身を見てみよう。

dvipng1.png は、縦長の画像になった。dvipng は基本的に、文字が表示された範囲だけを PNG にする。この場合、ページ番号がページ下にあるため縦長の画像になってしまった。

dvipng2.png は数式の画像。ページ番号を出力させないよう \pagestyle{empty} という命令を使った。今回、サンプルということで改ページ後に入れたけど、本来、このコマンドはプリアンブルに入れるもの。

dvipng のオプション

よく使いそうなものだけ、ピップアップ。詳しいことは、info を読んで下さい。

-T tight
dvipng2.png を見れば分かるが、左上に空白部分が残っている。このオプションを指定すると、できる限り空白部分を除くようになる。
-bg transparent
背景部分を透明にする。
-fg 'rgb 1.0 0.0 0.0'
前景色 (文字の色) を指定する。
--gif
PNG 画像の代わりに GIF 画像を出力する。
-pp firstpage-lastpage
firstpage から lastpage までを dvipng する。

さっきの dvipng.dvi の 2 ページ目を赤色で出力してみませう。

$ dvipng -T tight -bg transparent -fg 'rgb 1.0 0.0 0.0' -pp 2:2 dvipng.dvi

dvipng2.png Webpage やプレゼンなんかで、TeX の数式を PNG で貼り付けたくなることがあると思う。そんな時、dvipng は役に立つ。

ref

Blogger で Tag Cloud を表示する |JavaScript|

気付いてる人もいるかもしれないけど、このブログの右カラム一番上「About」セクションに Tag Cloud を付けた。今回は Blogger で、Tag Cloud を表示させる方法を書いてみる。

Tag Cloud とは

Tag Cloud は、よく使われているタグほど大きなフォントで表示するタグの見せ方。 はてなブックマークFlickr なんかで見かけることができる。

Blogger では、Tag Cloud どころかタグ (カテゴリー) すらサポートされていないので、まず「 関連情報をエントリーの外に表示させる (3)」のやり方でタグ (カテゴリー) を付ける。次に、JavaScript で同じページに表示されてるタグを集めて、タグの出現回数ごとに (フォントを大きくするよう) CSS を指定する手順を踏む。

そんなわけで、この Tag Cloud は複数の記事が載ってるページ (インデックス・ページと月別アーカイブ・ページ) でしか表示されない。個別ページでこの記事を読んでる人は、 インデックス・ページを見て下さいな。

準備

まず、タグ (カテゴリー) を挿入するコードだけど、それは前の記事 ( 関連情報をエントリーの外に表示させる (3)) の設定が必要。

次に Tag Cloud を表示させたい所に、次のコードを入れる。

<MainOrArchivePage>
  <div id="TagCloud"></div>
</MainOrArchivePage>

MainOrArchivePage で囲むのは、個別ページだと Tag Cloud がちゃんと動かないから。

Source Code

//
// User options
//
var hatena = 'http://b.hatena.ne.jp/at-aka/';

//
// Main function
//
function outEntry ()
{
  var divs = document.getElementsByTagName('div');
  var length = divs.length;
  for (var i=0; i<length; i++){
    printCategory (divs[i]);
//    printAmazon (divs[i]);
  }
  printTagCloud ();
}

//
// Utility functions
//
function gid (id){
  return document.getElementById(id);
}

function getNum (e)
{
  return (e.className=='post') ? e.getAttribute('id') : getNum(e.parentNode);
}

//
// Functios
//

var tag_list = new Array();
var tag_cloud = new Array();
function printCategory (e)
{
  if (e.className == 'category'){
    var num = getNum(e);
    var txt = '<br />Category: ';
    var tag = e.getAttribute('title').split(',');
    for (var j=0; j<tag.length; j++){
      var t = tag[j];
      tag[j] = '<a href="' + hatena + t + '/" class="tag">' + t + '</a>';
      // for Tag Cloud
      if (tag_cloud[t]){
        tag_cloud[t].num++;
      } else {
        tag_list[tag_list.length] = t;
        tag_cloud[t] = new TagCloud (tag[j], 1);
      }
    }
    txt += tag.join(', ');
    gid('category_'+num).innerHTML = txt;
  }
}

function TagCloud (name, num)
{
  this.name = name;
  this.num  = num;
}

function printTagCloud ()
{
  var div = gid ('TagCloud');
  if (div){
    tag_list.sort(compareNames);
    for (i=0; i<tag_list.length; i++){
      var tag = tag_list[i];
      var span = document.createElement ("span");
      var space = document.createTextNode (" ");
      span.innerHTML = tag_cloud[tag].name;
      span.className = "tag_cloud_" + tag_cloud[tag].num;
      div.appendChild (span);
      div.appendChild (space);
    }
  }
}

function compareNames (a, b)
{
  var nameA = a.toLowerCase();
  var nameB = b.toLowerCase();
  if (nameA < nameB) return -1;
  if (nameA > nameB) return 1;
  return 0;
}

      

前回のコードと比べると、色を付けた部分が変更されている。それから、新しい関数 TagCloud, printTagCloud, compareNames が加わった。

CSS の編集

関数 printTagCloud によって、Tag Cloud 内のタグには次のようなクラス名が付寄される。

tag_cloud_#num

つまり、1 回しか使われなかったタグは tag_cloud_1。5 回使われたタグは tag_cloud_5 というクラス名を持つ。

これに CSS で適当なフォント・サイズを指定すればいい。僕は次のような CSS を書いてる。

.tag_cloud_1  { font-size: 80%; }
/* .tag_cloud_2  { font-size: 100%; } */
.tag_cloud_3  { font-size: 120%; }
.tag_cloud_4  { font-size: 144%; }
.tag_cloud_5  { font-size: 173%; }
.tag_cloud_6  { font-size: 200%; }
.tag_cloud_7  { font-size: 220%; }
.tag_cloud_8  { font-size: 230%; }
.tag_cloud_9  { font-size: 240%; }
.tag_cloud_10 { font-size: 250%; }

ここら辺、上手くいってるかどうか自信がない。見易いかなぁ? 各自、好みで変えて下さい。

.

2005-09-23

自分のウェブページに、ブログへの入り口を作る |Blogger|はてな|RSS|

ぼくは Pièce de l'Ensemble というウェブページを持っていて、自作プログラムやテキストを公開している。ただ、最近はブログの方が書き易いことから、ウェブページの更新が滞りがち。閑を見て、ブログに書いた事をウェブページに清書するつもりではいるけれど、その間、ウェブページを見に来た人に「情報無し」は如何なものかと思った。

丁度よいことに clmemo@akaはてなブックマークでタグ付けをしていて、タグ付けさえ間違っていなければ関連情報のトップページを簡単に作れる。

ChangeLog メモの場合

ChangeLog メモに関する情報は、タグ「 ChangeLogメモ」が付いている。そこで、 ChangeLog メモのウェブページに次のように書いた。

<p>ブログ clmemo@aka でもChangeLog メモに関するコラムを書いたり、コードを公開している。</p>
<ul>
 <li><a href="http://b.hatena.ne.jp/at-aka/ChangeLog%e3%83%a1%e3%83%a2/">clmemo@aka の「ChangeLogメモ」に関するエントリー</a></li>
</ul>

AUCTeX の場合

AUCTeX のページでは、 はてなブックマーク「AUCTeX」タグのページにある RSS から Feed2JS で JavaScript を出力させた。詳しいやり方は、「 はてなブックマークの「注目」エントリーをサイドバーに」を参照されたし。

ChangeLog メモのページも、 AUCTeX のページも 30 Visits/day なので、十人に一人がリンクを辿ったとして一日 6 pageview 増えるかな?

ちなみに、 ChangeLog メモ のページに Feed2JS を使わなかった理由は、 ChangeLog メモ のページが Texinfo からの自動生成だから。 Texinfo だと Unicode が扱えない。そして、Feed2JS は Unicode しか扱えない。そんなわけで、Feed2JS の利用は諦めた。

2005-09-22

カテゴリーを「はてな」以外のタグにする |Blogger|JavaScript|Tag|

[2005-09-15] 以降、 clmemo@aka では 記事の末尾に「カテゴリー・タグ」を付けるようにしている。このタグは はてなブックマークのタグを利用したもの

さて、 はてなブックマークのタグを、 他のサービス (Technorati とか del.icio.us とか) のタグに置換する bookmarklet を先日書いた。これらを組み合わせると、このブログの ( はてなブックマーク による) カテゴリー・タグを他のサービスのタグに切り替えるコードを書けることに気付く。

記事を読んで興味を持ったら、好みのサービスでタグ検索をしてみては如何?

フォーム

ブログ右カラム一番上に「About」というセクションがあって、その中に次のような form がある。

Category by My はてな All はてな del.icio.us Flickr Technorati

ラジオ・ボタンを押して好みのサービスを選ぶと、記事下のカテゴリーがそのサービスのタグへとリンクする。

Source Code

コードは bookmarklet と同じ JavaScript コード。

<script language="JavaScript">
<!--
function tagReplace (url, space){
  var a = document.getElementsByTagName('a');
  for (var i=0; i<a.length; i++){
    if (a[i].className.match(/^tag/)){
       a[i].setAttribute('href', url+a[i].innerHTML.replace(' ',(space)?space:'%20'));
    }
  }
}
// -->
</script>
<form>
  <span>Category by</span>
  <input type="radio" name="t" onClick="tagReplace('http://b.hatena.ne.jp/at-aka/');" checked="checked" />My はてな
  <input type="radio" name="t" onClick="tagReplace('http://b.hatena.ne.jp/t/');" />All はてな
  <input type="radio" name="t" onClick="tagReplace('http://del.icio.us/tag/');" />del.icio.us
  <input type="radio" name="t" onClick="tagReplace('http://www.flickr.com/photos/tags/');" />Flickr
  <input type="radio" name="t" onClick="tagReplace('http://technorati.com/tag/','+');" />Technorati
</form>

この手のコードを書く時は、サービスに寄って空白の扱いが違うので注意が必要。例えば、 はてなブックマーク はスペースを %20 にするけど、 Technorati+ 記号を使う。なお、コードをコピペする時は、 My はてな の URL が僕の はてなブックマークへのリンクになってるので各自直して下さい。

.

2005-09-21

クリボウさんがお引越

Blogger の情報を中心に記事を書いていた クリボウの Blogger Tips がお引越。といっても、 Blogger でブログを書くのを止めるわけではない。レンタル・サーバーを借りて、ドメイン・マッピングするとのこと。ブログの名前も変わらない。新アドレスは以下の通り。

クリボウ氏のページには、色々とお世話になってきた。引越先では、CGI やら SSI やら、 Blogger だけでは出来ないことも試すらしい。楽しみにしてるので、頑張って下さい!

.

はてなブックマークのタグを他のサービスのタグに変える bookmarklet |Tag|

はてなブックマークのタグ一覧を Technorati のものに変えてしまう bookmarklet を 先日書いた。今日はその続き。タグを使ってるサービスは、 はてなブックマークTechnorati だけじゃないから、同じようなブックマークレットを沢山作ってみた。

各種 bookmarklet: from はてな to ...

firefox だったら、 ブックマーク・ツールバーにフォルダーが作れるので、 はてなブックマーク変換用 bookmarklet を一つに集めて入れてみてはどうだろう。

ソースコード

bookmarklet のソースを一応公開。見易いように、インデント付。

u = 'http://technorati.com/tag/';
a = document.getElementsByTagName('a');
for (i=0; i<a.length; i++){
  if(a[i].className.match(/^tag-/)){
    a[i].setAttribute('href',u+a[i].innerHTML);
  }
}

一行目の変数 u で変換後のタグへの URL を定義してる。タグを持つサービスは他にもあるから、好みの URL を指定して下さいな。

.

2005-09-20

Emacs から firefox を呼び出す

GNU Emacs から外部ブラウザーを起動するコマンドに browse-url というのがある。実行すると、URL を聞いてくるので入力。するとウェブ・ブラウザーが起ち上がり、入力した URL を開く。メールや README の中に URL が書いてあった時に重宝する。

起動するウェブ・ブラウザーは、OS (Windows/Mac/Linux) によって変わる。Linux なら、mozilla かな?

URL の入力は面倒なので、関数が幾つか用意されてる。代表的なものは二つ:

browse-url-at-point
ポイントの下にある URL をブラウザーで開く
browse-url-at-mouse
マウスの下にある URL をブラウザーで開く

設定は、例えばこんな感じ

; デフォールト・ブラウザーを mozilla に設定
(setq browse-url-browser-function 'browse-url-mozilla)
; 
        C-c u でブラウザー起動
(global-set-key "\C-cu" 'browse-url-at-point)
; 中クリックでブラウザー起動
(global-set-key [mouse-2] 'browse-url-at-mouse)

      

firefox をデフォールト・ブラウザーに

mozilla じゃなくて、 firefox を使いたい。ぼくもその一人。起動するブラウザーは変数 browse-url-browser-functionbrowse-url-something という関数名をバインドして指定する。mozilla の場合、 browse-url-mozilla なので、 firefox なら browse-url-firefox... かと思いきや、そんな関数は用意されてない。

自作しなければ駄目なのか、というと、そうでもなくて... firefox は mozilla プロジェクトから生まれたソフトだから、ほとんど mozilla と同じ。だから、 browse-url-mozilla をそのまま使えばいい。替わりに mozilla の実行コマンド名を firefox に変更する。

(setq browse-url-mozilla-program "firefox")

browse-url-firefox

といった所で、お茶を濁そうとしたのだけど、最新の browse-url に browse-url-firefox があった Xp。確認したのは、Emacs CVS に付いてくる browse-url.el。ChangeLog に由ると、[2005-06-18] に新しく作られたとある。

最新の browse-url.el を使っている人は、下のコードで十分。

(setq browse-url-browser-function 'w3m-browse-firefox)

Emacs-w3m と一緒に使う

僕のデフォールト・ブラウザーは Emacs-w3m なので、上の設定はしていない。代わりに、 Emacs-w3m の外部ブラウザー ( Emacs-w3m で見れないページあった時に使う代わりのブラウザー) として firefox を呼び出すようにしている。設定は次の通り。

(setq browse-url-browser-function 'w3m-browse-url)
(setq w3m-content-type-alist
      (cons
       '("text/html" "\\.s?html?$" browse-url-firefox) w3m-content-type-alist))
.

2005-09-19

はてなブックマークのタグ一覧を Technorati タグに |Bookmarklet|JavaScript|

はてなブックマークは、右カラムにタグ一覧を表示している。タグをクリックすると、同じタグのついた、その人ブックマークを見られる。ところでタグと云えば、ブログ検索エンジン Technorati も独自のタグ付けを行っている。そこで、 はてなブックマークについてるタグを Technorati のものに変換する bookmarklet を書いてみた。

上の bookmarklet をブラウザーに登録して、 はてなブックマークのページで実行すると (見た目は変わらないけど) 右カラムのタグが Technorati へのタグ・リンクに変わる。

制限: はてなのタグを探すのに、 class="tag-[hogehoge]" を見ているから、はてなブックマークのページ以外では使えない。はてなのタグに戻すには、ページを再読み込みする。

.
.

2005-09-18

カテゴリー検索を Blog Search に変更 |Blogger|Google|

このページのトップ、navbar の下にあったカテゴリー検索を

  • Google 検索から Blog Search に変えた。
  • ページのトップからサイドバー「About」に変えた。

Blog Search は、やはり Google がブログ用にチューンしているだけあってヒット率が高い。同じキーワードで検索しても、 Google だとインデックスされてないページがあった。 Blog Search は、6 月からのインデックスを取っているとのこと。このブログを書き始めたのが、4 月後半だから、ほとんどの記事はインデックスされてるはず。一年も前からブログを書いてる人は、自サイトの検索を Google から Blog Search に変えるのは、まだ冒険なのかな?

ちなみに、ここでいう「カテゴリー検索」は 九十九式に触発された、「タイトル検索による擬似カテゴリー検索」のこと。詳しくは下の ref をどうぞ。

ref

?
?

Emacs-w3m で Blog Search の「次」ページを簡単に |Google|

Google が始めた Blog 用検索エンジンには二種類のインターフェースがある。

  1. http://search.blogger.com/
  2. http://blogsearch.google.com/

1. が Google のブログ・サイト Blogger 風のインターフェース。2. が Google 検索のトップページを継承したインターフェースになっている。 firefox で見た限り、 Blogger 風の方がオプションが選びやすくて好み。 Google 風はシンプルに過ぎる。そういうわけで、 前に書いた記事でも Blogger 風インターフェースの紹介だけをした。

ところが、 Emacs-w3m で検索すると Blogger 風インターフェース には思わぬ弱点がある事に気付いた。 Emacs-w3m には SPC キーを押し続けることで、検索ページの一番下までページ・スクロールした後、次の検索結果ページに移動する機能がある。同様に、検索ページのトップで BackSpace を押すと前の検索結果ページに戻る。 Blogger 風インターフェースには、困ったことに「前」の検索結果へのリンクがない。一方、 Google 風インターフェースにはある。

Emacs-w3m で検索するのにインターフェースの違いは気にならない。というわけで、( Emacs-w3m の) blog 検索には http://blogsearch.google.com/ を使うが得策かと。

検索用の設定

(add-to-list 'w3m-search-engine-alist
   '("blog"
     "http://blogsearch.google.com/blogsearch?q=%s&lr=lang_ja&oe=utf-8&ie=utf-8"
     utf-8))
(add-to-list 'w3m-search-engine-alist
   '("blog-en"
     "http://blogsearch.google.com/blogsearch?q=%s&oe=utf-8&ie=utf-8"
     utf-8))

「前・次」ページ移動用の設定

(eval-after-load "w3m"
  '(progn
    (setq w3m-relationship-estimate-rules
   (cons `(w3m-relationship-simple-estimate
    "\\`http://blogsearch\\.google\\.[^/]+/blogsearch"
    ,(concat "<a href=" w3m-html-string-regexp
      "><img src=nav_next\\.gif")
    ,(concat "<a href=" w3m-html-string-regexp
      "><img src=nav_previous\\.gif")
    nil nil)
       w3m-relationship-estimate-rules))))

ref

.
.

2005-09-17

Google Parsonalized Home 正式公開

Google Personalized Home が正式公開なそうな。

で、 Gmail Maniacs さんの記事

個人的な予想としては、近いうちにここにRSSリーダー機能が追加されるのではないかと。

とあるけれど、左上の「Add Content」をクリックして左サイドバーの一番下「Create a Section」に RSS の URL を入れれば、RSS リーダー機能になる気がする。

関連情報をエントリーの外に表示させる (3) printCategory |Blogger|JavaScript|はてな|

昨日の printAmazon の説明に引き続いて、 printCategory の説明を書いた。

目的

投稿にカテゴリー・タグの情報を埋め込み、記事のフッター部分にカテゴリー・タグを表示させる。

ソースコード

var hatena = 'http://b.hatena.ne.jp/at-aka/';

function gid (id){
  return document.getElementById(id);
}

function getNum (e)
{
  return (e.className=='post') ? e.getAttribute('id') : getNum(e.parentNode);
}

function outEntry ()
{
  var divs = document.getElementsByTagName('div');
  var length = divs.length;
  for (var i=0; i<length; i++){
    printCategory (divs[i]);
//    printAmazon (divs[i]);
  }
}

function printCategory (e)
{
  if (e.className == 'category'){
    var num = getNum(e);
    var txt = '<br />Category: ';
    var tag = e.getAttribute('title').split(',');
    for (var j=0; j<tag.length; j++){
      tag[j] = '<a href="' + hatena + tag[j] + '/">' + tag[j] + '</a>';
    }
    txt += tag.join(', ');
    gid('category_'+num).innerHTML = txt;
  }
}

テンプレートの編集

Blogger のテンプレートを編集する。

  1. 上記ソースコードを outEntry.js という名前で保存し、適当な場所にアップする。
  2. outEntry.js を head 要素でロードする。
  3. 関数 outEntry を body 要素から onload する。
  4. ブログの投稿部分を class="post" id="<$BlogItemNumber$>" な div 要素で囲む。
  5. フッター部分に、 id="category_<$BlogItemNumber$>" な空の span 要素を追加する。
<html>
 <head>
  ...
  <script type="text/javascript" src="http://path.to/your/outEntry.js"></script>
 <head>
 <body onload="outEntry();">

 <BlogDateHeader>
  <h2 class="date-header"><$BlogDateHeaderDate$></h2>
 </BlogDateHeader>

 <div class="post" id="<$BlogItemNumber$>">
   <BlogItemTitle>
    <h3 class="post-title"><$BlogItemTitle$></h3>
   </BlogItemTitle>
   
   <div class="post-body">
    <$BlogItemBody$>
   </div> <!-- post-body -->

   <div class="post-footer">posted by <$BlogItemAuthorNickname$> at ...
    <span id="category_<$BlogItemNumber$>"></span>
   </div>
 </div> <!-- post -->
 </body>
<html>

      

ファイルが表示された後 (onload 後)、関数 outEntry が実行される。 outEntry は、エントリーごとにカテゴリー情報をスキャンして、フッター部分に反映させる。

printAmazon だと Amazon の情報はサイドバーの一か所に反映させればよかった。だから、簡単に id を指定することができた。でも、カテゴリーはエントリーのフッターに付けるから、(個別ページならまだしも) インデックス・ページやアーカイブ・ページでは ID 名が重ならないように工夫しなくちゃいけない。そこで、 Blogger が提供する <$BlogItemNumber$> を使うことを思いついた。

<$BlogItemNumber$> はブログの記事ごとに固有の番号を返す Blogger の変数タグ。カテゴリー・タグの展開先に、 category_ とこの変数タグをくっつけた ID を用意する。これで一意な ID が手に入る。カテゴリー・タグの情報からは、この変数タグの数値は知りようがないので、JavaScript で数値を手に入れる。

変数タグの値を確実に手に入れるため、投稿記事を囲む div を用意させた。それが post というカテゴリーを持った div。投稿記事のどこにカテゴリー・タグ情報を埋め込んでも、 parentNode を繰り返せば、必ず div.category に辿り着く。あとは、変数タグの値からカテゴリー・タグの展開先に、「 はてなブックマークを利用したタグへのリンク」を追加するだけ。

今回は、ブログ記事の特定に <$BlogItemNumber$> を使ったけど、permalink でも大丈夫だと思う。

エントリーを書く

エントリー内に次の一行を埋め込むと、フッターに情報が反映される。

<div class="category" title="category1,category2,category3"></div>

クラス名は category、title 属性にカテゴリー・タグの情報を書く。複数のカテゴリーを指定する場合はカンマ区切りで繋ぐ。

注意。 Blogger に ATOM API 経由でポストすると問題がある。上のコードの場合だと次の様に書き換えられちゃう。

<div class="category" title="category1,category2,category3"/>

firefox は div の閉じタグがないと思うので、メチャメチャになる。

とりあえず、div 要素の中にピリオドを打って逃げてる。

.

あとがき...

printCategory は、フッターだけでなく、ヘッダーでも使える。ただし、エントリーの中で使うんだったら、こんなに面倒なことをせずに、もっとスッキリに書ける。タグ情報を展開したい場所に置いて、JavaScript で置換すればいい。サイドバーに表示するなら、ID 値は一つに決まるから問題が少ない (printAmazon と同じ)。

エントリーの中じゃない。でも、エントリーの遠くでもない。エントリーのすぐ外に情報を書き出したい時に、この関数は威力を発揮する。もちろん、それはカテゴリーでなくったっていい。そんなニーズは、あるかしらん。何か思いついたら、トラックバックを下さい ;)

darcs で補完入力を使う |zsh|

バージョン管理システム darcs をコマンドラインで使う時の usage は次の通り。

$ darcs COMMAND OPTIONS ARGUMENTS ...

一般的な shell なら、 darcs までは補完が利く。でも、そこから先の COMMANDOPTIONS にも補完が利くと嬉しい。

僕が愛用してるのは zsh なので、zsh に darcs の補完機能を加える設定方法を書いてみた。

なお、zsh に限らず、bash や tcsh の補完についても Wiki (英語) に情報があるので参照されたし。

設定

以下のサイトの Zsh Completion の項から、 zsh completion newをダウンロード。

ダウンロードしたファイルを _darcs というファイル名に変更後、zsh の私的 completion 用ディレクトリーに入れる (ここでは ~/etc/zsh/ としよう)。

.zshrc を開いて、次のコードを追加する。

fpath=(~/etc/zsh $fpath)
autoload -U ~/etc/zsh/*(:t)
autoload -U compinit && compinit

zsh を起動し直せば、設定が反映されてるはず。

darcs の補完も、次期 zsh では標準として組み込まれるそうな。

2005-09-16

関連情報をエントリーの外に表示させる (2) printAmazon |Blogger|JavaScript|

昨日の エントリーを読み返して、 printAmazonprintCategory の説明を一気にやったのはまずかったなぁ、と反省。改めて printAmazon の説明だけを書いてみる。

目的

エントリー内に Amazon の情報を埋め込み、サイドバーに反映させる。

ソースコード

var amazon = 'http://www.amazon.co.jp/exec/obidos/ASIN/';
var ama_id = 'clmemoaka-22';
var amaimg = 'http://images.amazon.com/images/P/';
var amajpg = '.09._SCTHUMBZZZ_.jpg';
var a_list = new Array();

function outEntry ()
{
  var divs = document.getElementsByTagName('div');
  var length = divs.length;
  for (var i=0; i<length; i++){
    printCategory (divs[i]);
    printAmazon (divs[i]);
  }
}

function gid (id){
  return document.getElementById(id);
}

function printAmazon (e)
{
  if (e.className == 'amazon'){
    var title = e.getAttribute('title').split(':');
    var asin = title.shift();
    title = title.join(':');

    // Check duplicate ASIN
    if (a_list[asin]) return;
    a_list[asin] = asin;

    var url = amazon + asin + '/' + ama_id;
    var img = amaimg + asin + amajpg;
    var li = document.createElement("li");
    var ul = gid ('bb');
    li.innerHTML = '<a href="'+ url +'"><img alt="" src="'+ img +'"/>'+ title +'</a>';
    ul.appendChild (li);
  }
}

テンプレートの編集

Blogger のテンプレートを編集する。

  1. 上記ソースコードを outEntry.js という名前で保存し、適当な場所にアップする。
  2. outEntry.js を head 要素でロードする。
  3. 関数 outEntry を body 要素から onload する。
  4. サイドバー部分に、 id="bb" な空の ul 要素を追加する。
<html>
 <head>
  ...
  <script type="text/javascript" src="http://path.to/your/outEntry.js"></script>
 <head>
 <body onload="outEntry();">

 <div id="sidebar">
   ...
   <ul id="bb"></ul>
 </div>
 </body>
<html>

      

ファイルが表示された後 (onload 後)、関数 outEntry が実行される。 outEntry は、各々のエントリーから Amazon 情報をスキャンして、bb という ID を持つ ul 要素に情報を追加していく。ここで、 bb は便義上の使用したに過ぎない。変える場合は、 printAmazon 関数内の gid(bb) という部分を変更されたし。

PS. 重複した asin は無視する仕様です。

エントリーを書く

エントリー内に次のコードを埋め込むと、サイドバー内に情報が反映される。

<div class="amazon" title="ASIN:memo"></div>

クラス名は amazon、title 属性に amazon の情報を書く。書式は、ASIN 番号とメモをコロンで繋ぐ。memo 部分には、書名とか CD のタイトルとか入れるとよいかな? memo 部分にコロンが入っても問題ない。

一つの div 要素に、一つの Amazon 情報しか書けない。複数個の商品へリンクを張る場合は、一つ一つ div 要素を書く。

<div class="amazon" title="ASIN1:memo1"></div>
<div class="amazon" title="ASIN2:memo2"></div>

注意。 Blogger に ATOM API 経由でポストすると問題がある。上のコードの場合だと次の様に書き換えられちゃう。

<div class="amazon" title="ASIN:memo"/>

firefox は div の閉じタグがないと思うので、メチャメチャになる。

とりあえず、div 要素の中にピリオドを打って逃げてる。

CSS

見栄えを良くするために使ってる CSS のサンプルです。

#sidebar li img { float: right; }
.amazon { display: none; }

一行目の設定は、 Amazon から取ってきた画像ファイルの周りに文字を回り込ませるためのもの。

二行目は、div 要素内にあるピリオドを表示させないためもの。ま、こっちはほとんどの人には意味ないでしょう。

あとがき...

何度紹介してもしたりない本がある。例えば、outEntry.js を書くのに参考にした「JavaScript & DHTML クックブック」。CSS の本もそうだし、Amazon の本もそう。一回こっきりの商品リンクなら、 G-Tools で十分だけど、二度三度紹介する本ならデータベースを作って簡単にリンクを張れたら、と思ってた。

title 属性に書く Amazon の情報は一行だから、テキスト・ファイルに保存して grep なんかで検索がかけられる。

4774106224:スタイルシート Web デザイン -- CSS2 完全解説, すみけんたろう (著)
4873111811:Amazon Hacks 世界最大のショッピングサイト完全活用テクニック 100 選, Paul Bausch (著)
4873111692:JavaScript & DHTML クックブック -- Web エキスパート必携テクニック集, Danny Goodman (著)

メモ情報は自分で好きに書けるし、生成される HTML も printAmazon をいじれば自由に変えられる。それに、 Amazon のデータベースを全部検索するわけじゃないから、ノイズが少なくてすむ。手間は、ASIN を調べることとメモを書くだけ。それは、 G-Tools なんかを活用すれば、すぐに調べられるよね。

テンプレートを編集できるブログなら、printAmazon はどこでも使えるんじゃないかしらん。

.
.

darcs quick start

GNU Archどうなるか分からない ので、バージョン管理に darcs の勉強も始めた。そこで、 GNU Arch quick start みたいに darcs の quick start をメモしてみる。書くのは、昨日作った JavaScript outEntry.js を例に、 darcs でファイルを新規管理する時の手順。

新規にプロジェクトを立ち上げる

カレント・ディレクトリーにファイル outEntry.js があるとする。これを darcs で管理し始める手順は次の通り。

$ darcs initialize                             ; _darcs ディレクトリーの作成
$ darcs add outEntry.js                        ; ファイルをレポジトリーに登録
$ darcs record --all                           ; 登録を反映
What is the patch name? Initial revision.      ; パッチの名前をつける
Do you want to add a long comment? [yn] n      ; コメントをつけるなら y
Finished recording patch 'Initial revision.'   

以上で準備はお終い。複数のファイルを登録する時は

$ darcs add outEntry.js ChangeLog README README.*

のようにする。

darcsGNU Arch と違いレポジトリーを集めて管理したりしない。同じ、分散型バージョン管理といっても、毛色が違うみたい。どちらかというと RCS に近く、 RCS ディレクトリーに当たるのが _darcs になる。

RCS と同じようにレポジトリーをフロッピーで運べる気軽さはあるものの、レポジトリーごと rm -rf してしまう怖さがある。

メール・アドレスの設定

何の設定もなしに darcs record --all を実行すると、 darcs は log に付けるメール・アドレスを (初回のみ) 訊いてくる。

Darcs needs to know what name (conventionally an email address) to use as the
patch author, e.g. 'Fred Bloggs <fred@bloggs.invalid>'.  If you provide one
now it will be stored in the file '_darcs/prefs/author' and used as a default
in the future.  To change your preferred author address, simply delete or edit
this file.
What is your email address? at-aka@email.address

これを止めさせるには、環境変数 EMAILDARCS_EMAIL を設定するか、 ~/.darcs/defaults に author の設定をする。

defaults ファイルの書式は次の通り。

ALL author  Masayuki Ataka <at-aka@email.address>

はじめの一歩

ファイルを変更したら、変更個所を確認。

$ darcs whatsnew                               ; 最新リビジョンとの差分を表示
{
hunk ./outEntry.js 7
+function gid (id){
+  return document.getElementById(id);
+}
+
hunk ./outEntry.js 36
-    document.getElementById('category_'+num).innerHTML = txt;
+    gid('category_'+num).innerHTML = txt;
hunk ./outEntry.js 50
-    var ul = document.getElementById ('bb');
+    var ul = gid ('bb');
}
      
        

問題がなければ、commit。

$ darcs record
hunk ./outEntry.js 7
+function gid (id){
+  return document.getElementById(id);
+}
+
Shall I record this patch? (1/3) [ynWsfqadjk], or ? for help: y
hunk ./outEntry.js 36
-    document.getElementById('category_'+num).innerHTML = txt;
+    gid('category_'+num).innerHTML = txt;
Shall I record this patch? (2/3) [ynWsfqadjk], or ? for help: y
hunk ./outEntry.js 50
-    var ul = document.getElementById ('bb');
+    var ul = gid ('bb');
Shall I record this patch? (3/3) [ynWsfqadjk], or ? for help: y
What is the patch name? New function gid.
Do you want to add a long comment? [yn] n
Finished recording patch 'New function gid.'
      
        

darcs のチェック・インは面白くて、修正部分の小さな固まりごとに これは今回のパッチに含めるか?と聞いてくる。コーディング中に typo を見つけた時なんか、この機能は便利。typo 部分だけ commit することができる。

いちいち聞かれたくない時は、 -a オプションを付ける。

修正が終わったら、ログを見ましょ。

$ darcs changes
Sat Sep 17 00:47:40 JST 2005  Masayuki Ataka <at-aka@email.address>
  * New function gid.
Sat Sep 17 00:07:00 JST 2005  Masayuki Ataka <at-aka@email.address>
  * Initial revision.
      
        

-s オプションで、詳しいログが見れる。

$ darcs changes -s
Sat Sep 17 00:47:40 JST 2005  Masayuki Ataka <at-aka@email.address>
  * New function gid.
    M ./outEntry.js -2 +6
Sat Sep 17 00:07:00 JST 2005  Masayuki Ataka <at-aka@email.address>
  * Initial revision.
    A ./outEntry.js
      
        

Blogger のテスト用ページを作った |Blogger|

Blogger は、複数のブログを作ることができる。そこで、テスト用のブログを作ってみた。

ブログのテンプレートの編集や CSS の修正なんかでヘマをしても分からないように。それから、ATOM API での投稿テストなんかに使うつもり。特に、 昨日の記事みたいに JavaScript をガンガンと使ってテンプレートを編集する時には便利。

テンプレートを共有するよい方法がないので、一旦、ローカルにテンプレート・ファイルを落としてコピペする。 Blogger は、テンプレートを「新しく選択」すると上書きする仕様だから、事故でカスタマイズしたテンプレートを失いかねない。少し手間だけど、危機管理のためにもローカルにテンプレートを持っておくのはよいと思う。ぼくは、ローカルのテンプレートを更に RCS でバージョン管理して万全を期してる。

テスト用サイトは人目に触れさせたくない。だから、アクセス制限がかけられればいいのだけど、今の Blogger にそういう機能はない。せめて、[設定] -> [公開中] の「Weblogs.com の通知」を「いいえ」にしとく。

.

2005-09-15

関連情報をエントリーの外に表示させる |Blogger|JavaScript|HTML|

ブログとはよくできたものだと思う。書きたいことだけ書いて投稿すると、綺麗な体裁のウェブページを作ってくれる。ヘッダーとかフッターとかサイドバーのような、定型部分をユーザーは気にかけないでいい。ブログの成功は、ユーザーが書く部分とコンピューターが自動生成できる部分の分離に寄るのではないかと思う。このブログがほぼ毎日続いているのも、定型部分を気にせず、エントリーだけに集中できているのが大きい。

でも逆を返せば、ブログではエントリー部分しか編集できない。つまり投稿する時に、フッターやサイドバーの内容は書き替えられない。

特に Blogger ではその制限が厳しい。

そこで、投稿記事に div 要素を埋め込んで、フッターやサイドバーに反映する JavaScript を書いてみた。

サンプル

記事には、次のコードを埋め込んだ。

<div class="category" title="Blogger,JavaScript,HTML"></div>
<div class="amazon" title="4873111692:JavaScript &amp; DHTMLクックブック -- Webエキスパート必携テクニック集"></div>
<div class="amazon" title="4774106224:スタイルシートWebデザイン -- CSS2完全解説"></div>
<div class="amazon" title="4873111811:Amazon Hacks 世界最大のショッピングサイト完全活用テクニック100選"></div>

最初の一行は、フッター部分に はてなブックマークを利用したカテゴリー・タグを表示させる設定。今回は BloggerJavaScriptHTML のタグを付けた。

二行目〜四行目は、サイドバーに Amazon へのリンクを表示させる設定。この記事を書くのに参考にした本の情報を書いた。

JavaScript `outEntry'

今回使った JavaScript outEntry.js のソースは以下の通り。

var hatena = 'http://b.hatena.ne.jp/at-aka/';
var amazon = 'http://www.amazon.co.jp/exec/obidos/ASIN/';
var ama_id = 'clmemoaka-22';
var amaimg = 'http://images.amazon.com/images/P/';
var amajpg = '.09._SCTHUMBZZZ_.jpg'

function getNum (e)
{
  return (e.className=='post') ? e.getAttribute('id') : getNum(e.parentNode);
}

function outEntry ()
{
  var divs = document.getElementsByTagName('div');
  var length = divs.length;
  for (var i=0; i<length; i++){
    printCategory (divs[i]);
    printAmazon (divs[i]);
  }
}

function printCategory (e)
{
  if (e.className == 'category'){
    var num = getNum(e);
    var txt = '<br />Category: ';
    var tag = e.getAttribute('title').split(',');
    for (var j=0; j<tag.length; j++){
      tag[j] = '<a href="' + hatena + tag[j] + '/">' + tag[j] + '</a>';
    }
    txt += tag.join(', ');
    document.getElementById('category_'+num).innerHTML = txt;
  }
}

function printAmazon (e)
{
  if (e.className == 'amazon'){
    var title = e.getAttribute('title').split(':');
    var asin = title.shift();
    title = title.join(':');
    var url = amazon + asin + '/' + ama_id;
    var img = amaimg + asin + amajpg;
    var li = document.createElement("li");
    var ul = document.getElementById ('bb');
    li.innerHTML = '<a href="'+ url +'"><img alt="" src="'+ img +'"/>'+ title +'</a>';
    ul.appendChild (li);
  }
}

テンプレートの修正

head 部分
<head>
 <title>clmemo@aka</title>
 <script type="text/javascript" src="http://pop-club.hp.infoseek.co.jp/prog/outEntry.js"></script>
</head>
<body onload="outEntry();">

関数 outEntry がロード時に実行され、記事の中の category / amazon 情報を展開する。

カテゴリー・タグ用の設定

post クラスを持つ div 要素に次のような ID を付ける。

<div class="post" id="<$BlogItemNumber$>">

そういうコードがなければ、ブログの投稿部分を上記の div 要素で囲む。

そして、category を表示させる部分に次のコードを入れる。

<span id="category_<$BlogItemNumber$>"></span>

category クラスを持つ div 要素が、カテゴリー・タグに展開されるというわけ。

Amazon 用の設定

Amazon 用には次のコードを入れる。

  <ul id="bb" class="body_shown">
  </ul>

id="bb" を持つ ul 要素の中に、 Amazon へのリンクが追加されていく。

解説

getElementsByTagName で div タグを集め、 className == 'category' ならカテゴリーの情報を className == 'amazon' なら Amazon の情報を getAttribute('title') で手に入れる。

printAmazonAmazon 用のコード。title 属性に ASIN と書名をコロン区切りで情報を入れておいて、そこからリンクと li 要素を作る。 Amazon のアフィリエイト・リンクの作り方は、 Amazon Hacks を参照。その li 要素を bb という ID を持つ ul 要素に入れていく。

printCategory はカテゴリー・タグ用のコード。カテゴリー・タグはエントリーごとにあるので、カテゴリーとエントリーの対応を考えなくちゃいけない。エントリーを区別するのに $BlogItemNumber$ を使った。もちろん、permalink でもよいと思う。 $BlogItemNumber$ を手がかりに、カテゴリーを展開する場所を探す。

PHP とか使わないでも、JavaScript だけでこれだけできるので面白いんじゃないかと思う。

.
.
.
.

2005-09-14

Emacs-w3m で Blog Search を使う

Googleブログ用の検索エンジンを出したので、 Emacs-w3m で動作確認。 Google 検索同様、シンプルながらテキスト・ブラウザーでも視認性が落ちない。ここら辺が、 Ask Jeeves との違いだなぁ、としみじみ思う。

恒例のことながら、 Emacs-w3m の検索エンジン候補に Blog Search を含める方法。.emacs に以下のコードを追加する。

(add-to-list 'w3m-search-engine-alist
   '("blog"
     "http://search.blogger.com/?q=%s&lr=lang_ja&oe=utf-8&ie=utf-8"
     utf-8))
(add-to-list 'w3m-search-engine-alist
   '("blog-en"
     "http://search.blogger.com/?q=%s&oe=utf-8&ie=utf-8"
     utf-8))

注意。サイト上からは、日本語が上手く通らない。検索ボックスに日本語文字列を入れると、ヘッダーが ISO-8859-1 を返す関係で文字化けしてしまう。上の quick hack にはその対策も入ってる。 ieoe (input encoding と output encodeng) を utf-8 に指定しているのがソレ。そんなわけで、Emacs が Unicode に対応してないと、このコードは使えない。そういう人は、こっちをどうぞ。

(add-to-list 'w3m-search-engine-alist
   '("blog"
     "http://search.blogger.com/?q=AUCTeX&lr=lang_ja&oe=Shift_JIS&ie=Shift_JIS"
     shift_jis))
(add-to-list 'w3m-search-engine-alist
   '("blog-en"
     "http://search.blogger.com/?q=%s"
     utf-8))

多少も文字化けは起きるかもしれないけど、動くはず。

ref

Blog Search beta |Google|Blogger|

ブログを編集しようと Blogger のダッシュボードを見てみれば、右カラムに青色で「ブログ検索」の文字がっ! 自分のブログの検索ができるのかな? それとも、 Blogger 全体を検索できるのかな? でも

Google ブログ検索

って何だろう? そう思いながらリンクを辿って...

Blog Search

Google が、ブログ専用の検索サービスを始めたという事を知った。サービスの名前は「 Search Blog」。そのまんまだし... Blogger の記事はもちろん、 はてなダイアリーの記事も見つかった。日本語も OK。さすが Google。下のスナップショットは「Use search options」をクリックした所。

Blog Search using option

検索するブログを限定したり、日付を指定したり、ブログにリンクしているサイトを探したりできる。日付を指定した検索は Google では (表だっては) できないので、いいかも。

先だって、 Ask Jeeves がブログ用の検索サービスを始めたばかりだけど、使ってみたらこのブログは見つからなかった。もしかしたら、 BloggerAsk Jeeves にインデックスされてないのかも。 Google, Ask Jeeves, Technorati、どのブログ検索のインデックスが一番多いかな。とにかく、これからのブログ検索が楽しみ。

2005-09-13

AUCTeX のインストール 2005/9

開発版の AUCTeX で、インストール方法に手が入った。11.55 よりインストールが楽になったので、是非試して欲しい。

せっかち者のための Quick Start

新規インストールは、以下のコマンドで...

$ cvs -z3 -d:ext:anoncvs@savannah.gnu.org:/cvsroot/auctex co auctex
$ cd auctex
$ ./autogen.sh
$ ./configure
$ make
# make install

.emacs ファイルに、次のコードを入れる。

(load "auctex.el" nil t t)
(load "preview-latex.el" nil t t)

contrib ターゲットが消えた

Makefile から contrib ターゲットが消えた。

AUCTeX の日本語用コードは tex-jp.el というファイルに入っている。11.55 では、tex-jp.el のコンパイル/インストールを、 make contrib ( make install-contrib) ターゲットで実行していた。ChangeLog によると [2005-07-21] の変更で、contrib ターゲットが廃止され、 make 一発でコンパイルできるようになった。

contrib ターゲットでは、tex-jp.el の他に、font-fptex.el や bib-cite.el などもコンパイルされていたが、これらも make 一発でコンパイルされるようになっている。

tex-site.el を呼ばなくなった

AUCTeX のシステム初期化ファイル tex-site.el を呼ばなくなった。つまり、今まで .emacs に

(require 'tex-site)

と書いていた所を、次のように書く。

(load "auctex.el" nil t t)

特に、古い AUCTeX から移行する人は書き直すのを忘れないように。

# 後方互換のため、tex-site.el を require してもエラーにはならない。

ref

2005-09-12

TypePad 1.6 が出た!

僕が書いてるもう一つのブログ「 life@aka」で利用しているブログ・サービス TypePad のバージョンが上がった。

使い勝手やら何やらが改良されてる。面白いと思ったのは Mark Paschal 氏が開発したという「TypeList メモ」。サイドバーに自分の好きなメモを書けるというもの。メモだけでなく、HTML のコードや JavaScript も書いてよし。つまり、Banner やカウンターといったコードをも埋め込める。

今まで、そういったコードをサイドバーに埋め込むには「上級テンプレート」を自分で編集するしかなかった。そして「上級テンプレート」を使うと、デザインのテーマ変更とかサイドバー項目をドラッグ & ドロップで移動する、なんて事ができなくなっていた。つまり、「上級テンプレート」を使うほど難しいことはしたくないけど、バナーやカウンター程度はサイドバーに置きたい、というニーズに応えてくれるわけ。

life@aka は「上級テンプレート」を使っていたけど、それはアクセス解析をするのが目的。そこでアクセス解析用の JavaScript コードを TypeList メモに入れて、上級テンプレートはやめ、 TypePad 1.6 で新しく追加されたデザイン・テーマに変更してみた。色はシルバーを連想させるもの。ついでに、サイドバーの項目もいろいろ動かした。今までより、かなり見栄えが良くなったと思うのだけど、いかが?

ref

2005-09-11

はてなブックマークのタグ

アクセス解析を見ていたら、 はてなブックマーク「Blogger」というタグのページから来ている人がいた。このページは、 はてなブックマークに「Blogger」というタグを付けた全てのブックマークを一覧表示している。

はてなブックマーク[2005-09-07] の更新で全てのタグ (とキーワード) の一覧表示をサポートするようになった。

はてなブックマークにキーワード一覧とタグ一覧ページを追加いたしました。

一定期間ごとに更新され、最近よく利用されているタグやキーワードが表示されます。

これで全てのはてなブックマーカーが興味を持ってる「タグ」が分かるというわけ。

ところで、今 そのページを見てみると、「blogger」というタグは見当たらない。で、ブラウザーのロケーション・バーに次のアドレスを入力して、直ジャンプしてみる。

すると、一覧にない「blogger」タグのページもあることが分かる。

勘のいい人なら、面白い遊びができることに気付くでしょう。そう、

foo の部分に好きなタグ名を入れて、色んなタグの注目のエントリー情報が見られる。

アクセス解析を見ていて気付いたことでした。

2005-09-10

Grep in JavaScript

高林氏の JavaScript でインクリメンタル grep 検索を使って、インターフェースを作ってみた。

URL ボックスに grep するファイルの URL を入れて Load ボタンを押す。すると「Grep」の下にファイルが読み込まれる。あとは、「Grep」の中に検索文字列を入れるとインクリメンタルに検索が実行される。

やってることは、高林版で grep の対象に埋め込んでた </span><span class="line"> を自動で入れるようにしただけ。あと、タグを quote することくらい。

ファイルのロードは Ajax だから、同一サイト内のファイルしか grep できない。このサイトで遊ぶなら、このブログの permalink で試すとよいかな... まぁ、皆さんが使う時の参考にでもなればという軽い気持ちで作ったものなので、自由にコピーして使って下さい。ライセンスはオリジナルの高林さんと同じということで。

オリジナルのソース・ファイルも用意した。ファイルを取ってくなら、下記からどうぞ。

本当にやりたい事は、もう少し先にあるので、暇を見て続きのコードを書くつもり。

grep in javascript

URL:
Grep:
  

2005-09-09

Texinfo マニュアルの縮少印刷に難 |PostScript|

GNU 関連のマニュアルは Texinfo という TeX の方言で書かれてる。例えば、Texinfo 自身、GNU EmacsGNU wget、autoconf、gcc、screen、などなど。

いざマニュアルを印刷しようとすると、そのページ量に圧倒される。GNU Emacs のマニュアルなんて 800 ページを越えている。いくら僕の面の皮が厚いからって、そんなに印刷機を動かす勇気はない。そこで psnup コマンドを利用して 1 枚に複数ページを印刷してる。

$ psnup -4 -m0.5cm manual.ps | lpr

-4 オプションで一枚に 4 ページ印刷。両面印刷が可能なら、一枚の紙に 8 ページ分印刷できる。つまり、800 ページのマニュアルを 100 枚の紙で印刷できる計算。これ位いなら、人目を忍んでちょっとやってみようかな... という気になる。ちなみに、-m0.5cm は、紙のふちに 0.5cm のマージンを取る設定。そうしないと、パンチ穴を開けるスペースのないマニュアルが時々ある。

さて、そうやって印刷したものを読んでると、文字が汚いと思うことがある。e の横棒が消えそうになってたり、t の横棒が見えにくかったり。

Texinfo は TeX ベースだから高品質。だから、問題はプリンターの方にあるんだろう、と思ってた。実はそれが大間違い。TeX から作った PS ファイルでは、アウトライン・フォントじゃなくてビットマップ・フォントが使われてる。ビットマップ・フォントを 1/4 に小さくすれば見難くなるのは道理。

LaTeX だと PSNFSS のお蔭で、簡単にアウトライン・フォントの一種である PostScript フォントが使えるけど、Texinfo は LaTeX ベースじゃなくて TeX ベース。PS フォントを使うためには、TeX ファイルのソース、つまり texinfo.tex をいじらなくちゃいけない。

というわけで、texinfo.tex で PostScript フォントを使う pstexinfo.tex なんてのが色んな人達の手で書かれていて、Texinfo ML にも投稿されてるけど、本家ではメインの開発が忙がしくて取り込む気配がない。原因も解決策も分かってるのに、そこから先に進まない。世の中、上手くいかないものだ。

2005-09-08

HaloScan の文字コード

HaloScan は、ブログにコメントとトラックバックを付けるためのサービス。Blogger は、コメントをサポートしてるので、専らトラックバック用に活用している。この度、HaloScan のページが utf-8 ベースになって使い易くなった。

HaloScan では、トラックバックを打つ時、「表示」エンコーディングを utf-8 にしないと、トラックバックが文字化けする問題があった。ところが、HaloScan のヘッダー指定は iso-8859-1 なため、われわれ日本人はブラウザーの「表示」メニューからエンコーディングを指定していた。この手間が嫌でしょうがない。とくに、エンコーディングを指 定し忘れて、後から変更すると、それまでの入力文がキャンセルされてしまう。これは粗忽者の僕には痛かった。

その HaloScan のデフォールト・エンコーディングが utf-8 になったということで、トラックバックを打つのが、少し楽になる。よかった、よかった。

2005-09-07

はてなブックマークの「注目」エントリーをサイドバーに |Blogger|JavaScript|

このブログの注目のエントリーをサイドバーに表示してみた。手順は以下のとおり。

  1. なにを「注目」とするかは、はてなブックマークの「注目」のエントリーを利用
  2. はてなブックマークは RSS も配信してるから、それを Feed2JS > Build で JavaScript に変換
  3. 生成した JavaScript をサイドバーで表示するように、Blogger のテンプレートを編集

ほとんど、クリボウの Blogger Tips: Feed2JS を活用するを参考にした。

以下、Feed2JS の自分用覚書メモ

Show channel?
no
Show/Hide item descriptions? How much?
0
Show item posting date?
no
UTF-8 Character Encoding
checked (チェックしないと日本語が化ける)

2005-09-04

firefox の起動時に複数のタブを開く

昨日買った「firefox hacks」で、早速試した事をメモ。

http://www.google.co.jp|http://at-aka.blogspot.com/firefox を起動した時に開くページを『ホームページ』と呼んだりするけど、デフォールトでは一つのページしか開けない。そこで、起動時に複数のページをタブで開く ようにする Tips。方法は簡単。firefox 設定画面で「全般」から「ホームページ」の URL をパイプ or 縦棒 (|) で区切って入力する。僕は、Google自分のブログサイトを起動時に表示するようにした。

これは、Hack #33「ブックマークの多彩な機能」で解説されてる。なのでブックマークの URL でも同じように使えるのかと思いきや、そうではなかった。ホームページの設定なのだから、ブックマークの説明ページに書かなきゃいいのに。

Firefox Hacks―次世代ブラウザ徹底活用テクニック 4873112419 Nigel McFarlane dynamis 池田 譲治 Amazonで詳しく見るby G-Tools

2005-09-03

「firefox hacks」を衝動買い

今日、紀伊國屋によって Gimp の本を物色してたら面白い本を見つけた。その名も「Firefox Hacks」。O'REILLY の Hacks シリーズの一冊。初版発行は 2005 年 8 月 29 日。出たばっかりじゃないですか。結局、Gimp の本は買わずに、Firefox Hacks をお買い上げ。

内容は、訳者が firefox 1.5 について訳注を入れているのがいい感じ。索引を見る限り、Greasemonkey にページは割いていない。まぁ、当然か? ゲームのページも紹介してたので、これから遊んでみやう。

実 は、もう一冊面白そうな本があった。「Google Hacks 第二版」。初版が出て、もう二年になる。その間に出てきた Gmail やら AdSense やらの話題が載ってるそうな。二冊同時に買うほどお財布に余裕も無く... Firefox Hacks を選んだ理由は「Google Hacks の初版を持っているから」という消極的なもの。もし、これが「Google Hacks Vol.2」だったら、結果は違っていたかも。

三菱の液晶ディスプレーを買った

液 晶ディスプレーは、やはり壊れたようだった。仕方が無いので新しい機種に買い替え。今まで使っていたのは iiyama の TXA3813MT。15 インチ。最大解像度 1024x768。もう狭い画面は嫌だ。ということで、狙うラインは 17 インチ、1280x1024。結局、眼鏡に適ったのは三菱の Diamondcrysta RDT1711V だった。

前のディス プレーに比べると、背の高さを変えられる。電源ボタンがディスプレーの前面にあって、オン・オフが切り替えやすい。液晶の周りの枠が狭くてデザインがい い。ディスプレーの底面が回転テーブルのようになってるらしく、小さな力で左右に首を振れる (正確には台座ごと回ってる)、そして、デジタル入力に対応している、といい事尽くし。

ただ一つ、ディスプレー側じゃなく Windows 側に問題があった。前のディスプレーが壊れたとき、ドライバー周りをいろいろいじったのだけどその影響が出たのだろう、DVD を再生するとビデオの部分だけ色の位相がずれてしまった。つまり、黄色が青、青が赤、赤が黄色になった。黒と白はそのまんま。もちろん、DVD 再生部分以外の色は問題ない。

結局、Windows の設定を、先代ディスプレーが壊れた日より前に戻して解決。なんとも、歯切れの悪い結末。理由を思いつく方、いらっしゃったらコメント下さい。

2005-09-02

SiteMeter に Night and Day!

SiteMeter の最新情報はブログで手に入る

なんて書いてブロ グを覗いたら、「Day/Night」ボタンを見つけてしまった。どういうものかというと、訪問者履歴を表示している世界地図に、昼の部 分を日中の衛星写真で明るく、夜の部分を夜間の衛星写真で暗く表示するというもの。夜の部分は、街の光が点のように映し出されてる。こんな下らない事に力 をそそいでていいんですか? SiteMeter! でも、面白いから、許す。

蛇足だけど、地図に表示されるのは最近 100 人の情報だった。リンクは、200 から 500 まであるように見えるけど、それはプレミアム版を使っている人の特典。以前、200 人リンクが辿れないから、このサービスが始まったのは、平均訪問者数から逆算して、なんて書いたけど的外れもいいところ。ブログによると World Maps は [2005-08-15] から始まっていたそうな。

2005-09-01

SiteMeter に訪問者位置情報

訪問者の来た場所を世界地図で表示する機能がついたと思っていたら、今度は訪問者一人一人の位置情報をリストにする機能が付いた。前回、世界地図に関する 記事を書いたとき、この機能はなかったはず。なんか、最近アクセス解析に使ってる SiteMeter の機能追加が激しい気がする。それとも、今まで SiteMeter の事なんて気にも留めていなかったのがいけないんだろうか。

い ままでの地図情報だと、一番小さい区域が「アジア」な ので、日本のどこから人が来たのか分からなかった。というか見えなかった。リスト情報は県の名前まで分かる。だから何? という突っ込みはある。まあ、地域ネタを振るとき、どんな人が興味を持っているのか調べるのに使えるかも。

ところで、SiteMeter の最新情報はブログで公開されていた。気づかなかったのは迂闊。RSS を登録しておくことにしよう。

つぶやき

「あなたの夢は何ですか?」
「昨日の『夢』を現実にすることです。」