いろいろプログラミングもどきしたメモ †

いろいろ弄った末のガラクタ→Starless And Oriai Black

全体像（クリックして拡大）

やりたかったこと。

1. tumblr にはてなスターをくっつける
2. tumblr にコメント機能をくっつける
   1. moos.net へのリンクを追加する
   2. 各ページにコメント数を表示する
   3. サイトの「最近のコメント」を表示する

Contents

はてなスターをくっつける †

• 参考：はてなスター日記 - はてなスターをブログに設置するには

各ブロック（{block:Regular}＝テキスト投稿、{block:Photo}＝引用、etc）には、Permalink（永続リンク）が割り当てられ、変数「{Permalink}」に格納されている。よって、こいつを 出力して <h3> タグで囲ってあげれば、簡単にはてなスター対応になる。

以下、「引用」ブロックに適用した例。

{block:Quote}
   <div class="quote">
       <h3 class="StarLink">■ <a href="{Permalink}">{Permalink}</a></h3>
       <span class="quote">
           <big class="quote"><a href="{Permalink}">&#147;</a></big> {Quote}
       </span>
       ...

コメントをくっつける †

利用するサイト：MOOOS -Open message boards-。

任意のページにコメントすることができるサービス。・・・こんなサービスないかなあと Google 先生にいろいろお伺いを投げて MOOOS を見つけるまでが大変だったかも。参考：コメントできないサイトに無理矢理コメントできるネットサービス「MOOOS」 - GIGAZINE

さて、コメントページへのリンクを張る。mooos のコメントページは以下のような URL になる。

http://www.mooos.net/entry.php/1/コメント先ページのURL

「コメント先ページのURL」はずばり変数 {Permalink} であるから、以下のようなコードでコメントページへのリンクを張ることができる。下は「Video」ブロックの例。

   ...
   {/block:Caption}
   <p class="comment">
     <a href="http://www.mooos.net/entry.php/1/{Permalink}" target="_blank" >
     comment
     </a>
   </p>
 </div>
{/block:Video}

各ページについたコメント数を取得／表示する †

普通、Blog のコメントリンクって「comment(3)」みたいに件数が併記されているもの。これを実現したい。

設計 †

mooos の、ページ毎のコメントページはこんな感じ。おなじみのオレンジ色した RSS アイコンから、このコメントを RSS で取得できる。一般化すると以下の URL になる。

http://www.mooos.net/rss.php/コメント先ページのURL

こいつを取得すればコメント数が数えられる。具体的には、RSS は以下みたいな構造になっている。「item」要素がコメント１件の情報に相当するので、こいつを数えてあげればいい。

<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0">
<channel>
 ...
 <item>
  <title>mooos - [コメント先ページURL]</title>
  <link>mooos のコメントページのURL</link>
  <description><![CDATA[コメントの内容。]]></description>
  <guid>コメント先ページURL</guid>
  <pubDate>コメントされた年月日時分秒</pubDate>
 </item>
 <item>
 ...
 </item>
 <item>
 ...
 </item>
</channel>
</rss>

あと、mooos が重かったり死んでたりしてページ描画が固まるのはいやなので、コメント件数の取得は非同期で行う。

実装 †

非同期で外部ドメインの RSS を取ってくるのに、Google AJAX Feed API を使うことにしました。

• 【ハウツー】Googleからの新たな贈り物、「Google AJAX Feed API」を試そう | エンタープライズ | マイコミジャーナル
• Google AJAX Feed API - Sign Up

サンプルコードGoogle AJAX Feed API - AJAX Tune Barがとてもとても参考になっていい。ほとんどこいつをぱくって実装する。

サンプルコードの「initialize」関数の部分を以下のように改造。

google.load("feeds", "1");
function loadCoommentFeed(feedUrl, elementId) {
 var feed = new google.feeds.Feed(feedUrl);
 feed.load(function(result) {
   if (!result.error) {
     var container = document.getElementById(elementId);
     var div = document.createElement("span");
     div.appendChild(document.createTextNode(result.feed.entries.length));
     container.appendChild(div);
   }
 });
}

• ポイント
  • RSS はページ内で何度も取得して結果を表示する。よって RSS の URL と、結果表示先エレメントの ID は可変。これらを引数に取るようにする。
  • createElement するのは「div」タグじゃなくて「span」に変更。「div」だと前後が改行されてしまうから*1。変数名がそのまんまなのはカコワルイ。
  • result.feed.entries.length で item 数を取得して上の span の中にぶちこむ。

DOM に馴染みがないと、かなりイミフなコーディング。要するに以下のようなタグを動的に生成しているわけだ。

<span>数値</span>

• JavaScript DOM リファレンス

で、次は、各ブロックから今の関数を呼ぶようにする。さっきのコメントへのリンクを張った部分は最終的には以下のようになった。

<p class="comment">
  <img src="http://www.mooos.net/favicon.ico" align="middle" alt="mooos" />
  <a href="http://www.mooos.net/entry.php/1/{Permalink}" target="_blank" >
  comment(<span id="comment_{Permalink}" ></span>)
  <script type="text/javascript">
  loadCoommentFeed("http://www.mooos.net/rss.php/{Permalink}", "comment_{Permalink}");
  </script>
  </a>
</p>

取得した件数の書き戻し先を指定する id は {Permalink} を利用して「comment_{Permalink}」としたところがポイント。変数 {Permalink} はとにかく便利。ざ・プライマリーキー。

おまけ †

Firefox の拡張「FireBug」の JavaScript デバッガが素晴らしすぎる件。

• IT戦記 - FireBug に JavaScript デバッガが付いて便利すぎる件について

こいつがなかったら死んでた。

サイト全体の「最近のコメント」を取得する †

RSS の作成 †

こうなったらいわゆるそれがほしい。

さっきの「全体像（クリックして拡大）20070818_all.png」に図示したとおり。

ページ毎のコメントを集約して、「最近のコメント」としたいわけ。mooos は「http://mooos.net/rss.php」に、moos を利用してつけたコメントすべての RSS を配信している。こいつから、「自分のサイトにつけられたコメント」を絞り込んでやればいい。

そこで Yahoo!Pipes。

• Pipes- Rewire the web
• Yahoo!Pipesの使い方（全モジュール解説）
• かんたんすぎ かっこよすぎ Yahoo pipes

というわけで以下のようなパイプをつくってみた。

正規表現で title を加工しているのはちょっとマニアック。

RSS の取得 †

で、さっきの Google AJAX Feed API を使用して、今作った RSS を取得する。

function loadRecentComments() {
 var feed = new google.feeds.Feed(
   "http://pipes.yahoo.com/pipes/pipe.run?_id=CkEaqY9M3BGvADRBAsqenA&_render=rss");
 feed.load(function(result) {
   if (!result.error) {
     var container = document.getElementById("recemt_comments");
     for (var i = 0; i < result.feed.entries.length; i++) {
       var entry = result.feed.entries[i];
       var li = document.createElement("li");
       
       var div = document.createElement("a");
       div.appendChild(document.createTextNode(
       entry.publishedDate.substr(0, 22) + " " + entry.title));

       var a_href = document.createAttribute("href");
       a_href.value = entry.link;
       div.setAttributeNode(a_href);

       var a_target = document.createAttribute("target");
       a_target.value = "_blank";
       div.setAttributeNode(a_target);

       li.appendChild(div);
       container.appendChild(li);
     }
   }
 });
}
google.setOnLoadCallback(loadRecentComments);

DOM プログラミングがうざいのと、変数名がひどいのは見逃してください。publishedDate をもっと見やすくフォーマットしたいなあと思いつつも力尽きて止める。ここでは以下のようなタグを動的に生成している。

<li><a href="コメントページ" target="_blank">コメント日時 コメント先ページ</a></li>

表示先はこんな感じ。やっつけですね。

<div class="side_recent_comments">
<div class="side_header">Recent Comments</div>
  <ol id="recemt_comments" class="side_ol" ></ol>    	
</div>

おまけ †

tumblr の見た目を 2 カラム式に変更。サイドバーは今のところすっからかん。

Web Developer 1.1.2 日本語版／ツール＆ダウンロード − 『infoaxia(インフォアクシア)』

何かを作る人にはおなじみなのかな、firefox 拡張「Web Developper」。

ネット上のサイトの CSS をがしがしいじって表示を確かめられるのが一番大きい。tumblrのテンプレートいじり→反映→ブラウザリロードっていちいちやってられんから。

追記：DOM じゃなくて innerHTML 使えばいいんじゃね？ †

と、脳内 上野樹里から指摘を受けたので、修正しました。

   google.load("feeds", "1");

   function loadCoommentFeed(feedUrl, elementId) {
     var feed = new google.feeds.Feed(feedUrl);
     feed.load(function(result) {
       if (!result.error) {
         var container = document.getElementById(elementId);
         container.innerHTML += result.feed.entries.length;
         
       }
     });
   }

   function loadRecentComments() {
     var feed = new google.feeds.Feed("http://pipes.yahoo.com/pipes/pipe.run?_id=CkEaqY9M3BGvADRBAsqenA&_render=rss");
     feed.load(function(result) {
       if (!result.error) {
         var container = document.getElementById("recemt_comments");
         for (var i = 0; i < result.feed.entries.length; i++) {
           var entry = result.feed.entries[i];
           container.innerHTML += 
               "<li><a href='" + entry.link + "' target='_blank'>" +
               entry.publishedDate.substr(0, 22) + " " + entry.title +
               "</a></li>";
           
         }
       }
     });
   }
   google.setOnLoadCallback(loadRecentComments);

チカッパ！ブログをローカルで動かす手順メモ †

チカッパ！ブログをローカルで動かしたくなったので取り組んでみる。

レイアウトをいじる程度ならともかく、ロジックに手を入れたのをいきなりサーバーで動かすのははやり恐ろしい。実際、weblog/2006-09-11/チカッパ！ブログのサイドバーに最近のエントリーを表示させるの作業中に無限ループ引き起こして冷や汗かいたし。

さて、ローカル環境の構築には予想通りトラブルの連続でへこたれる。以下、その過程メモ。ここには書いていない細やかなトラブルもあったが一部割愛した。その割愛したところでハマった人にはこのページが役に立たなくてお気の毒である。

検証環境 †

• Windows XP
• Apache 1.3.35
• PHP 4.4.4（インストールフォルダ C:\php ）

前提として、Apache + PHPがインストール済みで、Webブラウザからphpinfo()を確認しているものとする。mbstringの設定もテキトウにやっているものとする。

資材の入手 †

FTPでブログディレクトリをまるごと落としてくる。【業界】では、プログラムやそれを動作させるためのもろもろの設定ファイルなどを「資材」と呼ぶことがあります。

で、さっそくWebブラウザからアクセスしてみる。

Fatal error: main() [function.require]: Failed opening required 'DB.php' 
(include_path='.;c:\php\includes;c:\php\pear:c:/apps/internet/server/apache/
apache/apache/htdocs/e:/webroot/00homepage/chicappa/public_html/memolog/class') 
in c:\php\includes\Model.php on line 3

こんなエラーで撃沈。とりあえずここでは、チカッパ！ブログのindex.phpにアクセスできることが確認できればよい。

「DB.php」は、調べてみるとPEARというライブラリ管理ツールから入手しなくちゃいけないらしい。ではPEARをインストールしましょう。

PEARのインストール †

PEARは、PHPインストールフォルダに入っている go-pear.bat というバッチファイルでインストールするらしい。

php.exeへのパスを通す †

では、コマンドプロンプトを開いて、php.exe へのパスを通す。

C:\>set PATH=%PATH%;C:\php\cli

ちゃんと通ったか、以下のコマンドで確認。

C:\>php -v
HP 4.4.4 (cli) (built: Aug 16 2006 01:17:55)
opyright (c) 1997-2006 The PHP Group
end Engine v1.3.0, Copyright (c) 1998-2004 Zend Technologies

よし、go-pear.bat を叩くぞ！

C:\php>go-pear
Welcome to go-pear!
...
Bootstrapping: Archive_Tar............(remote) ok
Bootstrapping: Console_Getopt.........(remote) ok
PHP Fatal error:  Undefined class name 'pear' in C:\php\PEAR\go-pear.php on line
 747
続行するには何かキーを押してください . . .

なんだか分からんが失敗した。

最新版のPEARを入手 †

hamatyaの日記 - PHPを使うことが多くなりそうなので今後のためのちょっとしたメモによると、結論を言えばpearモジュールの最新版をDLして"phpインストールフォルダ"\PEAR\go-pear-bundleに上書きすれば動作しました。とのことなので、それに従って、PEAR Package PEARから最新版をダウンロード＆インストール。

よし再開！

pear/PEAR can optionally use package "pear/PEAR_Frontend_Gtk" (version >= 0.4.0)

PHP Warning:  sortpackagesforinstall(Structures/Graph.php): failed to open strea
m: No such file or directory in C:\php\temp\gop2E.tmp\PEAR\Downloader.php on lin
e 1175
PHP Fatal error:  sortpackagesforinstall(): Failed opening required 'Structures/
Graph.php' (include_path='C:\php\temp/gop2E.tmp') in C:\php\temp\gop2E.tmp\PEAR\
Downloader.php on line 1175

エラー！

最新版 go-pear.php の入手 †

PEAR Manual パッケージマネージャの取得を参照し、

PEAR インストールのアップデートを go-pear.org を用いて行うこともできます。 http://go-pear.org/ をブラウザで表示し、出力をローカルファイル go-pear.php に保存します。そして次のコマンドを Windows のコマンドプロンプトで実行してください。

php go-pear.php

これで、更新処理が開始されます。

これに従う。

C:\php>go-pear
Welcome to go-pear!

Go-pear will install the 'pear' command and all the files needed by
it.  This command is your tool for PEAR installation and maintenance.

...

* WINDOWS ENVIRONMENT VARIABLES *
For convenience, a REG file is available under C:\php\PEAR_ENV.reg .
This file creates ENV variables for the current user.

Double-click this file to add it to the current user registry.


C:\php

おめでたい！

PEAR DB のインストール †

PEARのインストールが無事終わると、pear.bat というバッチファイルができる。こいつをつかって PEAR DB を入手する。

C:\php>pear install DB
WARNING: channel "pear.php.net" has updated its protocols, use "channel-update p
ear.php.net" to update
downloading DB-1.7.7.tgz ...
Starting to download DB-1.7.7.tgz (128,353 bytes)
.............................done: 128,353 bytes
install ok: channel://pear.php.net/DB-1.7.7

C:\php>

おめでたい。一応、以下のファイル＆フォルダが存在していることを確認。

C:\php\PEAR\DB.php
C:\php\PEAR\DB

Smarty のインストール †

チカッパ！ブログは、Smartyというフレームワークを使用しているので、これをインストールする。Love Tokyo smartyインストール（windows）に従って、 Smarty Downloadsから入手＆インストール。

1. smarty.php.netより最新アーカイブをダウンロード
2. 解凍したディレクトリのうちlibsをsmarty等に変更しコピー（c:\php\smarty等）
3. php.iniのinclude_pathに上記ディレクトリを追加

C:\WINDOWS\php.ini の include_path はこんな感じになった。

include_path = ".;c:\php\includes;c:\php\PEAR;C:\php\Smarty\libs"

SQLite のインストール †

チカッパ！ブログは、データベースに SQLite を使用している。こいつにPHPから接続するためのライブラリをインストールする必要がある。以下の手順でどうぞ。（SQLiteとは PHPとSQLite rakutoネット改）

1. SQLite Download Pageから、Precompiled Binaries For Windows の最新版を落とす。現時点では sqlite-3_3_11.zip。
2. アーカイブを展開すると入っている php_sqlite.dll を、C:\php\extensions に放り込む。
3. C:\WINDOWS\php.ini に以下の1行を追加。

   extension=php_sqlite.dll

4. phpinfo() を確認して無事インストールされたことを確認。下みたいな感じ。
   sqlite

   SQLite support	enabled
   PECL Module version	1.0.3 $Id: sqlite.c,v 1.62.2.29 2004/12/12 15:10:58 stas Exp $
   SQLite Library	2.8.14
   SQLite Encoding	iso8859

SQLiteは、サーバー不要ってのがすばらしい。データベースファイル（チカッパ！ブログでは blog.sqlite ）と、ライブラリだけあればいいのだもの。参照：SQLite - Wikipedia

動作確認 †

やたー。

補足：文字化けする場合 †

ちなみに PukiWiki に合わせて環境を EUC-JP で構築していたら、日本語が化け化けになってしまった。この場合は、めんどくさいから php.ini をひっくり返してまるっと UTF-8 に切り替えたら直った。いじった箇所は以下の3行。本当に3行ともいじる必要があったのかは、よく分からない。動いたらそれが正義。

default_charset = "UTF-8"
mbstring.internal_encoding = UTF-8
mbstring.http_output = UTF-8

以上。

ネクター事件メモ（１） †

ネクター事件、ここまでのメモ。マスコミ型「正義感」のいやらしさ。あるいは、陰謀説。

前提

σ(-＿-)はネクター超ラブである。正直、正義感からこのメモを書き起こしているのではない。単純に、ネクターがなくなってしまうかもしれない不安をマスコミという巨大なサンドバッグにたいしてぶつけているだけなのだ。

自販機からネクター、レスカが消える:nikkansports.com †

ことの発端。

不二家が消費期限切れの食材を使用していた問題で、同社製飲料の全面委託販売先であるサッポロ飲料は１７日、同社の自動販売機などから不二家製飲料を撤去する動きが全国で広がっていることを明らかにした。

サッポロ飲料によると、不二家の企業イメージ悪化を背景に、不二家製飲料を自販機から撤去するよう求める個人商店が増加。このため、順次、サッポロ飲料製の飲料への切り替え作業を進めているという。

サッポロ飲料では、不二家による悪質な問題が今後、さらに発覚した場合、同社からの委託販売の解消も含めて検討する可能性もある。

「不二家製飲料を自販機から撤去するよう求める個人商店」とはどこのドイツだ！今すぐ焼き討ちしてやるヽ(`Д´)ﾉ 自分で不二家を叩いてイメージを悪化させといて自作自演かよ！

とメロスなみに激怒したのでした。

メディア・不二家事件：報道姿勢は不愉快 †

んむ。よくゆった。失業者うんぬんのくだりは論点がぼやけちゃうのでいまいちだと思いましたが、全体としてはとてもよくゆった。

マスメディアによる不二家への集団リンチという観がある。

不二家はそれほど許せないことをしたのだろうか。ひとりだって中毒者を出したわけではない。

だが不思議なことにこの事件では食品の専門家が出てこない。なぜだろうか。

雪印乳業の社長の当初の態度が気に入らなかったため、マスメディアは敵意を含んだ報道をやったとも言われている。自らの影響力を誇示したかったという動機もあるだろう。そうしておけば、マスメディアの立場はより強いものになるからだ。泣く子と記者には勝てぬと。

はてなブックマークに、こんなコメントが書かれていた。

2007年01月19日 reitoki 時事, メディア 雪印のときのことを思い出していた。社長に厳しい口調で詰め寄る記者の「過剰な正義感」にはもううんざり。

「正義感」という単語を目にしてピンときた。とあるエントリーを思い出した。

２ちゃんねる型「正義感」のいやらしさ - 絵文録ことのは:2007/01/13 †

とても重要な分析なのでさらっと全文目を通すと面白いのだけど、ひとまず冒頭にびしっと簡潔的確に要約がアブストラクられているのでまるっと引用する。

　ドメイン差し押さえが報じられている２ちゃんねるであるが、２ちゃんねらーが様々な騒動を起こすとき、そこには「正義に基づく暴走」がみられるように思う。

　彼らは、正義の旗の下に「悪人」を糾弾し、正義の旗の下に「善意」を喧伝する。今なお続くmixi乗っ取り犯による自己正当化の発言を見ている限り、彼らはあくまでも自分たちの行動が正しく、それに反するものをすべて敵と見なす。

　自分たちは正義である――だから何をやっても正しい、逆らう奴が悪い。そんな意識が２ちゃんねらーには見え隠れしている、と私は感じている。

（ここで言う「２ちゃんねらー」の定義は後述する）

「社会正義」の名の下に、ちょっと会計が不透明な難病救済の募金活動を袋叩きにする「２ちゃんねらー」。実質的な健康被害を起こしていない企業の管理問題を、経営が困難になるまで加熱報道する「マスコミ」。ここに似たよーな構造が見て取れないだろうか。見て取れるというか透けて見えるというか幻覚みちゃったというか。とにもかくにも、マスコミのネクター叩きは、社会正義の名の下に炎上している２ちゃんねらーに類似している。

私は「罪なきものは石もてこの女を打て」を思い出した。私は信者ではないが、聖書にある有名な一節である。この言葉の後、女を打てるものはいなかった、という記述が続く。しかし、ワイドショーのおっさん達は正々堂々と石を投げる。きっと罪のないご立派な人たちばかりなのだろう。（前掲 メディア・不二家事件：報道姿勢は不愉快より）

「ワイドショーのおっさん達」たちと、「mixiコミュニティ乗っ取り犯たち」たちの、何が違うのだろうか。

（つづく）