風呂上がりにデコポン+炭酸水

最近は、ネットスーパーで買い物をしているので、
重いものを持って家に帰る、みたいなことがなくなりました。
水ものやお米は特に助かります。

というわけで、最近購入している炭酸水についてご紹介。

1本80円くらいの甘くない炭酸水です。
風呂上りにごくごく飲むのがお気に入り。

今日は、家に余っていたデコポンを軽く潰して入れて
炭酸水をいれて飲んでみました。
さわやか〜な味に一気に飲み干してしまいました。


2010/02/19に jQuery-1.4.2 がリリースされました

http://blog.jquery.com/2010/02/19/jquery-142-released/
2010/02/19に jQuery-1.4.2 がリリースされました

さらに速度改善がされたようです。
グラフはいまいち見にくいですが、すべてのブラウザで
パフォーマンスの向上がされていることがわかります。

パフォーマンス向上の原因は、
Specifically we’ve improved the performance of 4 areas within jQuery:
のようです。
日々パフォーマンス向上のために、努力しているんですな。

そして、例のごとく、Google CDNにもアップ済みでした。
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js




jQuery UI CSS Framework を使ってみる(角丸モジュール編)

角丸のモジュールを作るときも、jQuery UI CSS Frameworkを使えば簡単です。
サンプルは↓
モジュールタイトル
ああああああああああああ
ああああああああああああ
ああああああああああああ

コードは↓
<div style="border: 1px solid #000" 
  class="ui-corner-all">
  <div style="border-bottom:1px solid #000;padding-left:10px;">
    モジュールタイトル
  </div>
  <div>
    <div style="padding-left: 10px;">
      ああああああああああああ
    </div>
    <div style="padding-left: 10px;">
      ああああああああああああ
    </div>
    <div style="padding-left: 10px;">
      ああああああああああああ
    </div>
  </div>
</div>

ポイントは、
  • divタグで囲む。クラスにui-corner-allを指定する。
  • ↑のdivタグに、borderスタイルを指定する(border:1px solid 好きな色、など)
  • ↑のdivタグの中身を自由に記述する。

    • 今回は、中をdivで上下2つに分割し、上のdivにborder-bottomスタイルを指定することにより、モジュールタイトルのような見ためにした
    • border-bottomで指定する枠色は、外側で指定した枠色と同色にする
です。
めちゃめちゃ簡単に角丸モジュールができました。

jQuery UI CSS Framework を使ってみる(エラーメッセージ編)

jQuery UI CSS Frame work を使って、エラーメッセージのような見た目の
モジュールを表示してみる。

サンプルは↓
エラー: 入力値が正しくありません。

コードは、こちら
<div style="padding-left:10px"
   class="ui-state-error ui-corner-all">
  <p>
    <span style="float: left; margin: 0.3em 0.3em 0 0" 
      class="ui-icon ui-icon-alert"></span>
    <strong>エラー:</strong> 入力値が正しくありません。
  </p>
</div>

ポイントは、
  • divで囲む。

    • classにui-state-errorを指定する(枠と背景、文字色を赤くする)
    • classにui-corner-allを指定する(4つ角を丸くする)

  • divの中に中身をpタグで囲み、空のspanタグを入れる

    • CSS Spliteで「!」アイコンを表示させるためのもの
    • classにui-iconとui-icon-alertを指定する。
    • ui-icon-alertをui-icon-infoなどに変えると、別のアイコンになる

  • ↑のspanの後に好きな文言(HTML)を記述する
です。
すべてCSSなので、javascriptがOFFのブラウザでも見れます


jquery ui の themeを変更する方法(Google CDN 編)

jquery ui を使ってちょっとリッチな見た目や機能を提供したい時は、
google.load("jquery", "1");
google.load("jqueryui", "1");
と、Google CDNにあるjqueryとjqueryuiをloadして、
ごにょごにょ実装するのがおすすめです。

また、jquery uiは、CSSだけでデザインの制御をしているので自分が好むtheme CSSを読み込むだけで、
javascriptのコードを変えることなくデザインを変更できます。

Google CDNには、このtheme CSSファイルも置いてあり、
以下のpathにあります。
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css" rel="stylesheet" />
↑「redmond」という部分がtheme名を意味しています。
themeには、jquery ui 1.7.2では、以下の種類があります。
  • base
  • black-tie
  • blitzer
  • cupertino
  • dark-hive
  • dot-luv
  • eggplant
  • excite-bike
  • flick
  • hot-sneaks
  • humanity
  • le-frog
  • mint-choc
  • overcast
  • pepper-grinder
  • redmond
  • smoothness
  • south-street
  • start
  • sunny
  • swanky-purse
  • trontastic
  • ui-darkness
  • ui-lightness
  • vader
jquery ui の場合、CSSのクラス名が"ui-" から始まるので、
クラス名がかぶってなければ他のデザインに影響が出ることはないので安心。

サイトのデザインにあわせて気軽に変えられるので非常に便利です。
是非おためしください。

なお、このサイトではredmondを採用しています。

おバカなjquery plugin "Naked Password"について

おバカなjquery plugin "Naked Password"を発見しました。


 このプラグインは、ユーザにパスワードを入力させるフィールドに、
そのパスワードの強度をユーザに知らせるため、
女の人の画像が表示されていて、パスワードの強度が強いほど、
女の人の服が脱げていく、というものです。

デモページはこちらにあるので、お試しください。

アメリカンなジョークプラグインでした。


Flickr

This is a test post from flickr, a fancy photo sharing thing.

jquery ui の dialogでポップアップダイアログを表示する

jquery ui で、ダイアログを表示させてみた。
コードは以下の通り。
<button id="popup">ダイアログをポップアップさせる</button>
<div id="dialog">
<div style="text-align: left;">
先に進む場合はOKボタンを押してください。
</div>
<div style="text-align: left;">
進まない場合はキャンセルボタンを押してください。
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
  var d = $('#dialog');
  d.dialog({
    // 初回時にポップアップさせない
    autoOpen:false,
    // タイトル部分の文言
    title: 'タイトル部分',
    // ポップアップさせた時にポップアップウィンドウ以外の部分を無効にする
    modal:true,
    // 下部にボタンを表示する
    buttons:{
      "OK": function(){
        alert("OKです");
        $(this).dialog("close");
      },
      "キャンセル":function(){
        alert("キャンセルされました");
        $(this).dialog("close");
      }
    }
  });
  $('#popup').click(function(){
    d.dialog("open");
  });
});
</script>

実際に動かしてみた感想は、
  • ポップアップウィンドウの中身が中央寄せになるのが気にくわない
  • autoOpenはtrueがデフォルトだけど、falseの方がいい気がする
というちょっとしたこと。慣れれば大丈夫、かな。
動作サンプルは以下の通り。


先に進む場合はOKボタンを押してください。
進まない場合はキャンセルボタンを押してください。

バレンタイン用に無印良品の「自分でつくるガトーショコラ」を作ってみた

無印良品にふらっと寄ったら、バレンタイン用に手作りお菓子パック
みたいのを売っていたので、値段をみたら600円くらいで安かったので
買ってみました。

で、作って見ました。
Togetter(トゥギャッター) - まとめ「無印良品の「自分でつくるガトーショコラ」を作ってみた」

すごく簡単にできました。
ラッピング袋まで付いてるなんて親切。(自分用なので使わなかったけど)

無印良品は時々すごいいい商品を作るイメージがあるなぁ


jquery ui の slider で 簡単に数値の範囲指定をさせる

jquery ui の sliderを使ってみた。
商品検索の価格範囲指定などのUIに使えそう

サンプルコードは以下
<div id="slider"></div>
<script type="text/javascript">
$(document).ready(function() {
  $("#slider").slider({
    // アニメーションをON
    animate:true,
    // レンジ指定のsliderを表示したい時はtrue。
    // レンジ指定の場合は取手が2つ
    // デフォルトはfalse(取手1つ)
    range:true,
    // sliderの最小値
    min:10,
    // sliderの最大値
    max:30,
    // 最初に取手を配置する値
    values:[15, 20],
    // sliderが変更された時のイベントを登録
    change:function(event,ui){
      // 変更後のスライドの値を知りたいときは以下の用に書く。レンジ指定の場合、戻り値は配列
      var values = $('#slider').slider('option', 'values');
      // values配列、要素0が最小値、要素1が最大値
      alert('changed:min='+values[0]+' ,max='+values[1]);
    }
  });
});
</script>
サンプルは以下。

jquery ui theme roller ツール停止中

http://blog.jqueryui.com/2010/02/jquery-ui-download-builderthemeroller-status/
ブログのネタにしようかと、jqueryの本家サイトにあるtheme rollerを
見に行ったら、2010/2/10からツール停止中のようです。

Google CDNに入っているzipをダウンロードして使って、という
説明がありますが、theme rollerツールは非常に便利だったので、
急なツール停止に戸惑っているコメントも大量に入ってます。

そのうち待っていれば復活するのかな?

----------

、、、とブログを書いてしばらくしたら、復活してました。
NOTICE: The Download Builder and ThemeRoller have been restored to working order again.  Thank you all for your patience.
いやー、よかったよかった。
jQuery UI - Theme Roller

yomiowatter 2010/01 読了ランキング

yomiowatterにおける2010年01月の読了数ランキングの発表です。
ざっくり集計してます。

10位 38読了
シアター! (メディアワークス文庫)

8位タイ 39読了
「日本で最も人材を育成する会社」のテキスト (光文社新書)
 

8位タイ 39読了
Twitter社会論 ~新たなリアルタイム・ウェブの潮流 (新書y)
 

7位 44読了
使ってもらえる広告 「見てもらえない時代」の効くコミュニケーション (アスキー新書)
 

6位 48読了
ネットがあれば履歴書はいらない-ウェブ時代のセルフブランディング術 (宝島社新書)
 

4位タイ 52読了
人類は衰退しました 5 (ガガガ文庫) 
 

4位タイ 52読了
モテキ 3 (イブニングKC)
 

3位 59読了(ただしほぼボット)
データで斬る世界不況 エコノミストが挑む30問
2位 65読了
もし高校野球の女子マネージャーがドラッカーの『マネジメント』を読んだら
 

1位 66読了
フリー~〈無料〉からお金を生みだす新戦略









はじめて集計してみて、とりあえずランキングを作ってみたけど、
そこそこ傾向が見れるだけのログが溜まっていることが確認できました。

1/14〜1/31の18日で、17223読了コメントを取得できました。
(1日くらい不具合で停止してました)

twitterから拾えただけで、1000読了/dayって感じですね。
みんな本を読んでるんだなー、と思いました。

マツダのカーシェア24に申し込んでみました

車は欲しいのですが、
  • 維持費が高い(燃料+保険など)
  • 平日乗らない
  • 今のところ絶対に車が必要な理由がない、あると便利だな、レベル
という理由で購入は控えてきました。
が、最近車が必要な理由ができたので、
ひとまず、購入はしないで、
マツダのカーシェア24というものに申し込んでみました。

いまのところ、月額も無料のようなので、お試し感覚です。

申し込み手順は
  1. マツダレンタカーの店にいく
  2. 免許証とクレジットカードがあれば申し込みできます
  3. あとは専用のカードが自宅に送られてくるのを待つ(1週間〜2週間)
乗るときは
  1. ネットか携帯からサイトにログイン
  2. 空いてる時間を確認+プラン決定して予約完了
  3. 送付されてきたカードと免許証を持って車が置いてある駐車場にいけばOK
家の近くに車があるかは、申し込み前に確認した方がいいです。
自分の場合、家から10分くらいのところにありました。

感想は、手軽に使えそうでよかったです。

うちの家の近くの車は、競合が少ないのか予約がすかすかだったので、
これからもしばらく使ってみようと思います(少なくても月額無料の間は)

Firefox 3.5.6 から 3.6 にアップデート on Debiann lenny

この前、Debian lenny に Firefox-3.5.6 をインストールしたところ、
なかなか快調だったので、今度はFirefox-3.6にアップデートしてみた。

手順は以下の通り。
  1. Firefox-3.6をダウンロード(~/Downloadsに保存)
  2. firefoxを起動していたら、終了しておく
  3. /usr/lib/firefoxを/usr/lib/firefox-3.5.6にrenameしておく
    • sudo mv /usr/lib/firefox /usr/lib/firefox-3.5.6
  4. /usr/lib以下にfirefox-3.6を解凍
    • sudo cp ~/Downloads/firefox-3.6.tar.bz2 /usr/lib/
    • sudo tar -jxvf firefox-3.6.tar.bz2
  5. 3.6に付いてなかったアイコンをコピーする
    • sudo cp /usr/lib/firefox-3.5.6/icons/mozicon50.xpm /usr/lib/firefox/icons/
これで完了。3.5.6のとき同様、デスクトップのショートカットは
$ cat /home/satoshi/Desktop/firefox.desktop
[Desktop Entry]
Encoding=UTF-8
Version=1.0
Type=Application
Terminal=false
Name[en_US]=Firefox
Name[ja]=Firefox
Exec=/usr/bin/firefox
Icon=/usr/lib/firefox/icons/mozicon50.xpm
StartupNotify=true
こうなってます。
今度、アップデート用のshellを書いておこうかな。

FirebugのせいでXMLツリービューが表示されなくなった時の対処方法

ひさびさに、XML APIの開発をしようと思って、ブラウザ(Firefox 3.5.6)で
XMLを確認しようとしたらツリービューで表示してくれなくて、
非常にはまったので、メモしておきます。

Firefoxのツリービュー表示は、


こういう状態で表示されることを指してます。
異常時には、

こうなってしまいました。Content-typeは text/xml;charset=utf-8で、
IEなどの他のブラウザでは、ちゃんとツリービューになっていることは確認しました。

色々調べた結果、原因は、Firebugで、
右下のアイコンを右クリック > 「アクティブ化リストをクリア」
で、ちゃんとツリービュー表示されるようになりました。

よかったよかった。

hadoop の examples を動かしてみる @ debian lenny

開発機のDebian lennyにhadoopのセットアップが完了したので、
動作確認をしてみる。動作確認は、
http://oss.infoscience.co.jp/hadoop/common/docs/current/quickstart.html
を参考にやってみた。

準備としては、適当にテキストファイルを用意するだけ。
動作確認のログは以下の通り。
$ mkdir -p hadoop_examples/input
$ cd hadoop_examples/
$ cat input/sample.txt
aaabaaa
bbb
ccc
aaa
bbb
ccc
111
222
333
aaa
dddaaa
$ /usr/bin/hadoop jar /usr/lib/hadoop/hadoop-0.18.3-6cloudera0.3.0-examples.jar grep input output 'aaa'
(略)
$ cat output/part-00000
5       aaa
たしかに、'aaa'という文字列は、5回登場している。
正規表現での指定も可能みたいなので、やってみた。
$ hadoop jar /usr/lib/hadoop/hadoop-0.18.3-6cloudera0.3.0-examples.jar grep input output '[a-z]{4,}'
$ cat output/part-00000
1       aaabaaa
1       dddaaa
というわけで、なんとなく動いていることが確認できました。

jquery ui の accordion で伸縮するメニューを作る

jquery uiのaccordionを使うには、適用したい要素にaccordion()を実行するだけ。
$(document).ready(function() {
    $("#accordion").accordion();
});
要素を指定するところのHTMLの注意点としては以下の通り。
  • h3やh4タグの中はaタグでくくること。href="#"にしておけばOK
  • body部分は<div>でくくること
  • divでくくれば、その中身のHTMLは自由
アコーディオンを適用する部分は、こんな感じのHTMLにするとOK
<div id="アコーディオンを適用したいID">
  <!-- 繰り返し部分はじまり -->
  <h4>< href="#">タイトル部分</a></h4>
  <div>
    <p>コンテンツボディ</p>
  </div>
  <!-- 繰り返し部分おわり -->
</div>
サンプルは以下

Yahoo!

Yahoo!(ヤフー)は、アメリカ合衆国のインターネット関連サービスの提供を行う企業であり、検索エンジンをはじめとしたポータルサイトの運営を主力事業としている。"Y!"と略されるときがある。1994 年、スタンフォード大学のジェリー・ヤンとデビッド・ファイロによってウェブディレクトリとして始められた。2008年1月より、モルガン・スタンレーやノースウエスト航空のボードメンバーを兼任するロイ・J・ボストック(en:Roy J. Bostock)が、取締役会長に就任している。

Google

Google(グーグル)は、アメリカ合衆国のソフトウェア会社、あるいは、同社の運営するインターネット上での検索エンジンである。検索エンジンとしてのGoogleについての詳細はGoogleのサービスを参照。米国Googleは人類が使う全ての情報を集め整理すると言う壮大な目的をもって設立された。独自開発したプログラムが、世界中のウェブサイトを巡回して情報を集め、検索用の索引を作り続けている。約30万台のコンピュータが稼動中といわれる。検索結果の表示画面や提携したウェブサイト上に広告を載せることで、収益の大部分をあげている。

Twitter

Twitter(ツイッター[2])は、個々のユーザーが「ツイート(「つぶやき」[3])」を投稿することで、ゆるいつながりが発生するコミュニケーション・サービス。2006年7月にObvious社(現Twitter社)がサービスを開始した。

Debian lennyに hadoop をインストール

最近、節操なく、いろいろな技術に手を出していますが、
  • jquery
  • lighttpd
  • fastcgi
  • movable type
  • wordpress
  • etc...
ある意味、フロントエンドよりの技術ばかりなので、
ここは、バックエンドというかインフラに近い技術にも
踏み込んでみよう、ということで、hadoopに挑戦。

hadoopで何をするか、なんてまったく考えずに、
とりあえずインストール。やることなんて後で考えるのさ〜。

hadoop install 手順
  1. まずは、curlがなかったので、install [$ sudo aptitude install curl]
  2. 自分のディストリビューションをチェック[$ lsb_release -c]
  3. ブランチはstableにしておく。手順書のDISTRO 部分をlennyに変更して書きこみ[$ sudo emacs /etc/apt/sources.list.d/cloudera.list]

    deb http://archive.cloudera.com/debian lenny-stable contrib
    deb-src http://archive.cloudera.com/debian lenny-stable contrib
  4. 後は手順どおり
いやー、簡単簡単。

というわけで、なにかしら使ってみようと思います。

ブログアクセス 週平均100セッション達成

またブログのアクセス解析ネタです。

8月から毎日更新中のこのブログですが、
2月第1週のアクセスが平均100sessions/dayを達成しました!

また、検索エンジンからの誘導がずっと70%未満だったけど、
最近いっきに伸びて74%になってました。

この原因の1つなのが、
firefox-3.5系をDebian lennyにinstall
という記事です。

あわせて

firefox on debian lenny で flash ページを表示すると落ちる
も書いたんだけど、こっちのアクセスは
install記事の1/3ほど。

1つヒットするとアクセスに大きく影響するなぁ。
でも、書きたいことを書くけどね。

WordPress に Really Static プラグインをインストール

WordPress Really Static Pluginは、Movable Type(MT)のように、
ページを静的に表示するために、HTMLに書き出してくれるプラグイン。

WP Super Cacheプラグインはcacheコントロールをするだけだが、
こっちは完全にHTMLを書き出すのでさらなる高速化が期待できる。

インストールしたバージョンは、
  • wordpress-2.9.1
  • really-static-0.31
インストール設定は以下のようにした
  • /opt/lammp/htdocs/wordpress以下にwordpress本体をinstall
  • /opt/lammp/htdocs/wp以下に書き出した静的ファイルを置くようにする
  1. いつものようにプラグインをダウンロードして、解凍する。
  2. 解凍したディレクトリを、/opt/lampp/htdocs/wordpress/wp-content/plugins/以下にcp
  3. ウェブのWordPress管理画面からプラグインページに移動
  4. 「Really Static」を「使用する」をクリック

ここからは、Really Staticの設定
  1. Source
    1. url to wordpressinstallation [http://localhost/wordpress/]
    2. url path to the actuall used templatefolder [http://localhost/wordpress/wp-content/themes/default/] 
  2. Destination
    1. を選択
    2. internal filepath from to cachedfiles [/opt/lampp/htdocs/wp/]
    3. Domainprefix for your cached files [http://localhost/wp/]
    4. Url to the templatefolder[http://localhost/wp/wp-content/themes/default/]
  3. Settings
    1. I want that Really-Static try to handle with the ? in the urlを選択
  4. Manual Refresh
    1. write all filesを押して全ページ書き出し
  5. CSSファイルにリンクする
    1. sudo ln -s /opt/lampp/htdocs/wordpress/wp-content /opt/lampp/htdocs/wp/wp-content
これで、http://localhost/wpをブラウザでみれば、静的なページがみれる。

設定についてはもう少し見直してみる。

性能は、
Concurrency Level:      15
Time taken for tests:   0.205 seconds
Complete requests:      100
Failed requests:        0
Broken pipe errors:     0
Total transferred:      578345 bytes
HTML transferred:       549814 bytes
Requests per second:    487.80 [#/sec] (mean)
Time per request:       30.75 [ms] (mean)
Time per request:       2.05 [ms] (mean, across all concurrent requests)
Transfer rate:          2821.20 [Kbytes/sec] received
文句なし!WP Super Cacheよりも断然早い。
あとはページが増えたときの書き出し速度が問題だな、と。

この機能があれば MT < WordPress だな。自分の中では。

WordPress に WP Super Cache プラグインをインストール

WordPressの記事をcacheするためのプラグインである、
WP Super Cacheをインストールしてみた。

http://wordpress.org/extend/plugins/wp-super-cache/
http://ocaoimh.ie/wp-super-cache/

インストール手順は、ダウンロードしてきたzipファイルに
同梱されているreadme.txtを参照にすすめた。

1. プラグインのzipをダウンロードする
2. 解凍
3. 解凍したディレクトリをまるごとコピー
 $ sudo cp -R wp-super-cache /opt/lampp/htdocs/wordpress/wp-content/plugins/
4. cacheディレクトリを作るため一時的にディレクトリ権限変更
 $ chmod 777 /opt/lampp/htdocs/wordpress/wp-content
5. WordPress管理画面にログインして、ナビにある「プラグイン」ページへ移動
6. wp-super-cacheを「使用する」
7. /opt/lampp/htdocs/wordpress/wp-config.phpに以下の行を追加
  define('WP_CACHE', true);
8. 管理画面から「WP Super Cache Manager」で設定
9. 権限を元に戻す
 $ chmod 755 /opt/lampp/htdocs/wordpress/wp-content

これで終了。

abで性能を測定してみたら、

Concurrency Level:      15
Time taken for tests:   3.036 seconds
Complete requests:      100
Failed requests:        0
Broken pipe errors:     0
Total transferred:      632094 bytes
HTML transferred:       593028 bytes
Requests per second:    32.94 [#/sec] (mean)
Time per request:       455.40 [ms] (mean)
Time per request:       30.36 [ms] (mean, across all concurrent requests)
Transfer rate:          208.20 [Kbytes/sec] received

早いような、遅いような。

lighttpd で dispatch.fcgi を用意してcgiを動かす

この前、Debian lennyに lighttpd をインストールしたので、
今度はcgiを動かしてみる。手順は以下の通り。

1. aptitude install
$ sudo aptitude install libfcgi
2. /etc/lighttpd/lighttpd.confを編集

# mod_fastcgiをコメントアウトする
server.modules = (
    "mod_fastcgi", 
(略)
# fcgiを追加
static-file.exclude-extensions = ( ".php", ".pl", ".fcgi" )
(略)
fastcgi.server = ( ".cgi" =>
                     ( "localhost" =>
                         (
                           "min-procs" => 2,
                           "max-procs" => 3,
                           "socket" => "/tmp/lighttpd.socket",
                           "bin-path" => "/var/www/dispatch.fcgi",
                           "bin-environment" => ( "MT_HOME" => "/var/www/mt" )
                         )
                     )
                 )
3. lighttpdを再起動
$ sudo /etc/init.d/lighttpd restart
3. dispatch.fcgiを/var/www/に用意する

#!/usr/bin/perl
use strict;
use CGI::Fast;
use Embed::Persistent;
{   
    my $p = Embed::Persistent->new();
    while (new CGI::Fast) {
        my $filename = $ENV{SCRIPT_FILENAME};
        my $package = $p->valid_package_name($filename);
        my $mtime;
        if ($p->cached($filename, $package, \$mtime))
        {   
            eval {$package->handler;};
        }
        else
        {   
            $p->eval_file($ENV{SCRIPT_FILENAME});
        }
    }
}

4. cgiスクリプトを用意する(test.cgi)

use strict;
use warnings;
use Data::Dumper;
use CGI;

my $q = new CGI;
print $q->header('Content-Type: text/plain;');
print Dumper(\%ENV);

なんか手順が漏れてる気がするので、まちがってたら修正します

性能を測ってみたら以下の通り。


$ ab -n 300 -c 15 http://localhost:10083/test.cgi
(略)
Time taken for tests:   1.281 seconds
Complete requests:      300
Failed requests:        0
Broken pipe errors:     0
Total transferred:      856500 bytes
HTML transferred:       807600 bytes
Requests per second:    234.19 [#/sec] (mean)
Time per request:       64.05 [ms] (mean)
Time per request:       4.27 [ms] (mean, across all concurrent requests)
Transfer rate:          668.62 [Kbytes/sec] received

まあまあ早い気がします。

究極のドキュメント管理を考える その5 rst機能のプレビュー

reStructuredTextは、
reStructuredTextソースコードの状態で高い可読性を持つように設計された軽量マークアップ言語。reStructuredText パーサは テキスト処理フレームワークである Docutils のコンポーネントのひとつで、Python で実装されている。
で、wikiに似た文法である。

慣れるとreStructuredTextをみるだけで、
脳内HTML置換が働いて、HTMLにみえてしまうものだが、
慣れるまでは、以下のJavascriptが便利そう。

http://attacklab.net/showdown/

一部Headerとして認識してくれない文字がある気がするが、
見た目に関しては、CSSをいじるだけで、デザインをいじれそう。

自分でreStructuredText形式のWikiを作るときに使ってみよう。

jquery ui の datepickerでカレンダーから日付選択

jquery ui の datepickerは、日付入力のときに手入力ではなく、
カレンダーから日付を選択するだけで入力できる機能です。
非常に便利。

サンプル:












コード:
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/redmond/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1");
google.load("jqueryui", "1");
$(document).ready(function(){
  $("#datepicker").datepicker();
});
</script>
<input id="datepicker" type="text" />
jquery uiもgoogle cdnに入っているので、気軽に使えますな。

 

Twitterのつぶやき内容からコンテンツマッチする 正規表現ver.

現在Twitterのつぶやき内容から判断して、
本とマッチングさせるYomiowatterを開発中ですが、
その中で使っているコンテンツマッチ部分のコードをさらします。

コメントにあるように、複数の条件を優先順位をつけて
判定しています。

sub match {
    my ($self, $text) = @_;
    my $result  = {};
    my $matched = 0;

    # exact match
    # URLが存在する and ASINを含む
    if($text =~ m|(http://[\d\w\/\.]*)| ){
        my $url = $1;

        # short urlを元に戻す
        if($url =~ m|(http://bit\.ly/([\d\w]*))| ){
            $url = $self->bitly()->expand($1, $2);
        }

        # ASINが含まれたURLである
        if($url =~ /asin=([\d\w]*)/i ||
           $url =~ m|http://www.amazon.co.jp/gp/product/images/([\d\w]*)| ||
           $url =~ m|http://www.amazon.co.jp/gp/product/([\d\w]*)| ||
           $url =~ m|http://www.amazon.co.jp/dp/([\d\w]*)|){

            my $item = $self->amazon()->lookupItem($1);
            if($item){
                $result->{score} = "exact";
                $result->{item}  = $item;
            }
        }
    }
    # maybe match
    # 「」『』【】[]で囲まれた文字列がある
    if(!defined $result->{score}){
        if(($text =~ /「(.*?)」/ ||
            $text =~ /『(.*?)』/ ||
            $text =~ /【(.*?)】/ ||
            $text =~ /\[(.*?)\]/
           )){
            #warn "probably word is ".$1;
            my $found = $self->amazon()->searchItemByTitle($1);
            if($found){
                $result->{score} = "probably";
                $result->{item}  = $found;
            }
        }
        # 読了の前にある文字列を本のタイトルと大胆予想
        elsif($text =~ /^(.*?)読了/){
            #warn "maybe word is ".$1;
            my $found = $self->amazon()->searchItemByTitle($1);
            if($found){
                $result->{score} = "maybe";
                $result->{item}  = $found;
            }
        }
        else{
            #warn "no pattern:". $text;
        }
    }
    # nomatch
    if(!defined $result->{score}){
        #warn "nomatch";
        $result->{score} = "nomatch";
    }
    return $result;
} 

本当は、形態素解析でちゃんとコンテンツマッチ
したいところですが、これでもかなりの割合で
本とマッチングすることができています。

Debian lennyに lighttpd をインストール

もろもろの理由で、lighttpdをインストールしたくなったので、
インストールしてみた。

port80で起動しているwebサーバがいないことを確認して、
$ sudo aptitude install lighttpd
でインストール完了。
$ sudo emacs /etc/lighttpd/lighttpd.conf
でserver.portを好きなポートに書き換えて、
$ sudo /etc/init.d/lighttpd restart
で再起動すればOK

調べてみたところ、
今開発機にインストールされているwebサーバは、
  • apache(ソースからビルド) port:10081
  • apache2(aptitude install) port:10082
  • nginx(aptitude install) port:10080
  • apache2(lampp同梱) port: 80
  • appengine開発用Webサーバ port: 8080
  • lighttpd(aptitude install) port:10083
で、合計6つでした。

中国にいってきた その1 インターネット事情

China Blocks Twitter (And Almost Everything Else)
http://mashable.com/2009/06/02/china-blocks-twitter-and-almost-everything-else/
the Chinese authorities have blocked internet access to Twitter, Flickr, Bing, Live.com, Hotmail.com and several other sites. Wordpress, YouTube, Blogger are also blocked.
先週は中国にいってきました。
中国では、特定のドメインはブロックされて閲覧ができない、
と聞いてはいましたが、実際に目の当たりにすると、
強大な力を感じてしまいます。

bloggerもブロック対象なので、ちゃんと更新できているか
心配でしたが、無事に動いていたようで、よかったです。

ブロックされてなくても、閲覧に時間がかかるドメインもありました。
# Yahoo! Japanのサービスなど

旅行の際はご注意ください。

Yahoo! JAPANからの挑戦状!キミは何問解けるか? に挑戦

Yahoo! JAPANからの挑戦状!キミは何問解けるか?
に挑戦してみた。

結果は70%(10問中7問正解)でした。

Yahoo! Japanの歴史のみならず、
インターネットの移り変わりを感じられる
いい問題だと思います。

まだ受けていない人はぜひ。

WordPress と Movable Type の機能比較

WordPressとMovable Typeをインストールしてみて、
簡単に機能比較をしてみる。

WordPress
長所:
  1. インストールが楽
  2. PHPで動いているので一般受けがいい
  3. プラグインが豊富
  4. 再構築というステップがない
  5. ツールが軽い
  6. フリー
短所:
  1. 表示時にDBからデータを取得し動的にページを表示する
  2. 投稿URLがデフォルトで、「?page_id=***」となる(SEO的に弱い)

Movable Type
長所:
  1. 再構築というステップを踏むことにより、表示はすべて静的なHTMLの参照のみとなり、極めて軽量
  2. タイトルからページ名をつけてくれるので、SEOに強い
短所:
  1. ツールがもっさり
  2. perlで書かれているので一般受けはよくない
  3. フリーじゃない
とまあ、検索すればすぐにわかるないようなので、
わざわざまとめる必要もなさそうだが、
個人的な意見としては、
Movable Typeの方がよさそうな気がする。

その理由は、なんといっても、
表示時に静的なHTMLであるので、表示性能が高いことが大きい。
完全に静的なHTMLの表示と、PHPをかませたページの表示は
10倍くらい表示速度がちがう、という印象。

開発機にMTをいれて、書き上がったら、 レンタルサーバに
HTMLディレクトリをrsyncで反映すれば、
しょぼいレンタルサーバでも
そこそこのアクセスを食えるのかな、と。
 自分がperl使い、ってのもあるんですが :)

というわけで、時間を見つけてMT5をもうちょっと
いじり倒して見たいと思います。

XAMPP(LAMPP)にWordPress(wp)をインストール

ちょっと動作を確認してみたくなったので、
XAMPP(LAMPP)にWordPress(wp)をインストールした際のメモ

まずは、
http://ja.wordpress.org/からtgzをダウンロード。

tgzを解凍して出来たディレクトリを、
/opt/lampp/htdocs/wordpressにmvする。

wp-config-sample.phpをwp-config.phpというファイル名で
コピーをして、中のDBの設定値部分を編集。

編集した内容で、MySQLにdatabaseとユーザを用意する。

これで、完了。
5分くらいでインストール完了しました。