ImageMagickのconvertコマンド > polaroidオプション

 
このような画像をポラロイド風の画像に変換する -polaroidオプション。
$ convert -polaroid 10 gijido.png gijido-pola.png
-polaroid の後に傾きを指定する。上記の例の場合、以下のように10度右に傾いた画像になる
+polaroidとした場合は、傾きの値は不要で、-15〜+15度でランダムで傾いた画像になる。

-polaroid angle

simulate a Polaroid picture.
Use +polaroid to rotate the image at a random angle between -15 and +15 degrees.
公式ドキュメント

トイデジ ポラロイド Polaroid a520 トイカメラ トイデジカメ

トイデジ ポラロイド Polaroid a520 トイカメラ トイデジカメ

汎用CSSライブラリ 「CSS Rene(ルネ)」更新:不具合修正 2009/08/31

CSS Reneに不具合があったので何点か修正してドキュメントを更新しました。
  1. 色「bisque」のカラーコードが#ffe4cになっていたので、「#ffe4c4」に修正
  2. IE6の時に読み込むCSSとIEの時に読み込むCSSを分割
  3. padding:autoはCSS validateが通らないので、削除
  4. cssファイルと画像ファイルをまとめたtar.gzへのリンクをドキュメントに追加
  5. rene.cssをcss validateに修正

などです。

汎用CSSライブラリ 「CSS Rene(ルネ)」ドキュメントページ

CSS Reneのドキュメントページを用意しました。

ドキュメント場所が、FC2 Homepageと言う斬新さですが、
自宅でサーバをたてて、、、というよりも
安心して運用できる+そもそも静的なCSSなのでフリーのホームページスペースで十分、
という結論にいたりました。

更新も、
スクリプトで一括FTPアップロードするようにしてあるので、
これからこまめに更新していきたいと思います。

六本木 すし居酒屋 松っちゃん にて、小池栄子・品川・爆笑問題田中を目撃

六本木の格安すし居酒屋松っちゃんにて飲んでたところ、
小池栄子
品川庄司の品川祐
・ 爆笑問題の田中
を目撃しました。


どうやら、何かの打ち上げ飲み会らしく、
テレビ朝日から近いこと+メンバーから推測して、「検索ちゃん」のメンバーと判断。
みんな、楽しそうに 飲んでいました。


小池栄子はすごい背が高く、スタイル抜群でした。
爆笑問題の田中のマネージャーらしき人が
店員さんにまじって、いそがしそうに、お酒や食事を運んでいました。
縦社会ですな。


ちなみに、六本木の格安すし居酒屋松っちゃんは、金曜を除く平日にいくと、
ビール中ジョッキ180円という格安居酒屋。
名前のとおり、すしもあります。

安いからか大量に飲んで悪酔いしてしまいます。

Yahoo!オークショントップの検索窓にサジェスト機能がリリース

Yahoo!オークショントップ画面の検索窓に、関連検索ワードのサジェスト機能がリリースされたようです。
「ipod nano 」「ipod touch」などが提案されています。
マウスでの指定のほか、キーボードの矢印キーでも選択できます。

 スニーカーと検索したときは、それよりもよく検索されてる「ナイキ」「プーマ」が
「スニーカー」 よりも前に表示される仕様なようです。

検索サジェスト機能は、TOPでの検索のほか、
Yahoo!ショッピングでも実装されていますが、
これだけ大きなサイトでサジェスト機能を利用できるようにするって技術的にも
すごいことだと思います。

cpan で perl module install するときに、Enter連打しないようにする設定

まずは、
o confで設定する。

$ sudo cpan
cpan> o conf prerequisites_policy follow
cpan> o commit
これをした後でも、
Is it OK to try to connect to the Internet? [yes]
と聞かれれてしまうのはどうしようもなかったので、
結局、

$ perl -MData::Dumper -e 'warn Dumper(\@INC)'
$VAR1 = [
          '/etc/perl',
          '/usr/local/lib/perl/5.10.0',
          '/usr/local/share/perl/5.10.0',
          '/usr/lib/perl5',
          '/usr/share/perl5',
          '/usr/lib/perl/5.10',
          '/usr/share/perl/5.10',
          '/usr/local/lib/site_perl',
          '.'
        ];
こちらのディレクトリから、CPAN.pmをさがして、

$ diff -cw /usr/share/perl/5.10.0/CPAN.pm /usr/share/perl/5.10.0/CPAN.pm.org
*** /usr/share/perl/5.10.0/CPAN.pm      2009-08-24 22:01:32.000000000 +0900
--- /usr/share/perl/5.10.0/CPAN.pm.org  2009-08-24 22:18:48.000000000 +0900
***************
*** 4030,4037 ****
                                           $file,
                                           join("",map { " ".$_->text."\n" } @CPAN::Defaultsites),
                                          );
!                 #my $answer = CPAN::Shell::colorable_makemaker_prompt("Is it OK to try to connect to the Internet?", "yes");
!                 my $answer = "yes";
                  if ($answer =~ /^y/i) {
                      $connect_to_internet_ok = 1;
                  } else {
--- 4030,4036 ----
                                           $file,
                                           join("",map { " ".$_->text."\n" } @CPAN::Defaultsites),
                                          );
!                 my $answer = CPAN::Shell::colorable_makemaker_prompt("Is it OK to try to connect to the Internet?", "yes");
                  if ($answer =~ /^y/i) {
                      $connect_to_internet_ok = 1;
                  } else {
 こうしました。
参考にしたページはこちら(英語)

もっといい方法はないのかしらん。

Google Feedburner で RSSリーダーでも広告表示する

Google FeedBurnerは、RSSリーダでのサイトアクセス状況を知るためのサービス。

FeedBurnerという会社をGoogleが買収して行ってるサービスなので、
Googleが提供する他のサービスとの連携が簡単である。

中でも、Adsenseとの連携が強力。

Google FeedBurnerのサービスを使うことで、
RSSリーダでFeedを購読しているユーザに対して、
広告を配信することが出来る。

Google FeedBurnerは以下の手順で設定可能。

1. Google FeedBurnerで、オリジナルのBlogに対して、統計情報を取得するためのBeaconが埋め込まれたwrapperのFeed URLを作成する
2. Adsenseで、「フィード向け広告配信」から広告を設定し、1.で設定したGoogle FeedBurner のURLを登録する
3. Blogspotのサイトフィード設定画面で、Google FeedBurnerのURLを設定すれば、RSSリクエストがFeedBurnerにリダイレクトされるようになる

これで、すでにRSSリーダーを登録済みの人も、
リダイレクトされるので、そのままの設定で広告表示されたRSSが
表示されるようになる。

富豪の道も一歩から。

ImageMagickのconvertコマンド > drawオプションの使い方 > 線の太さを変える(-strokewidth)

線の太さをかえるときは、-strokewidthオプションを使う

$ convert -size 50x50 xc:transparent -stroke "#0000ff" -strokewidth 10 -draw "line 0,0 50,50" blue.png


まぎらわしいのが、
-strokeオプションで線の色を指定してから、
-strokewidthオプションで
太さを変える必要があります。

-fill '#0000ff' -strokewidth 10 だと太さは変わりません。

複数指定する場合は、-stroke -strokewidthを並べる
$ convert -size 50x50 xc:transparent -stroke "#0000ff" -strokewidth 10 -draw "line 0,0 50,50" -stroke '#ff0000' -strokewidth 5 -draw 'line 0,50 50,0' blue_and_red.png



* 関連記事
ImageMagickのconvertコマンド > drawオプションの使い方 > 線に色をつける
ImageMagickのconvertコマンド (drawオプションの使い方)

ImageMagickのconvertコマンド > drawオプションの使い方 > 線に色をつける

線に色をつける場合は、-fillオプションでカラーコードを指定する 。
convert -size 50x50 xc:transparent -fill '#ff0000' -draw "line 0,0 50,50" red_line.png
 
red_line.png

それぞれの線で色を変えたい場合は、 -fill -drawを並べていく。
convert -size 50x50 xc:transparent -fill '#ff0000' -draw "line 0,0 50,50" -fill '#0000ff' -draw "line 50,0 0,50" red_and_blue.png
 
red_and_blue.png

-fillオプションは、-drawオプションの前に指定したものが有効になる。
以下のコマンドでは指定した(つもりの)色は無効となる。
convert -size 50x50 xc:transparent -draw "line 0,0 50,50" -fill '#ff0000' failed.png

 
failed.png

* 関連記事
ImageMagickのconvertコマンド (drawオプションの使い方)

色見本 カラーサンプル DICカラーガイド フランスの伝統色

色見本 カラーサンプル DICカラーガイド フランスの伝統色

ImageMagickのconvertコマンド (drawオプションの使い方)

ImageMagickの使い方について、google先生に聞きつつ、
作業ログとしてBlogを書いていますが、
ちゃんと理解するには、公式のドキュメントを読むのが
一番だな、という結論に達しました。
# 今までは、英語のドキュメントを読む気力がわかなかった。

というわけで、まずは、
-drawオプションについて、調査してみた。
公式ドキュメントはこちら

$ convert -size 50x50 xc:transparent -draw "line 0,0 50,50" foo.png
$ convert -size 50x50 xc:transparent -draw "line 0,0 50,50" -draw "line 0,50 50,0" bar.png
これで、背景を透過させた幅50px、高さ50pxに線がかける。
複数の線を描きたい場合は、-drawオプションを重ねればOK

foo.png
 bar.png

今度、この画像をbackground-imageに使って、
背景に斜をかけたHTMLページを作ってみようと思う。

ImageMagickのconvertコマンドで文字を画像に書き出す

何パターンか試したので、ログを残す
satoshi@debian:~/$ convert -size 320x85 -font /usr/share/fonts/truetype/ttf-japanese-gothic.ttf -pointsize 72 label:@utf8.txt bar.png
satoshi@debian:~/$ cat utf8.txt
あいうえお(utf8) 
日本語フォント指定で、utf8.txtの内容を画像に書き出す。
pointsizeは効いてないっぽい。画像背景は「白」
satoshi@debian:~/$ env | grep -i lang
LANG=ja_JP.UTF-8
GDM_LANG=ja_JP.UTF-8
LANGはUTF-8の状態で、コマンドラインで文字を指定

satoshi@debian:~/$ convert -size 320x85 xc:transparent -font /usr/share/fonts/truetype/ttf-japanese-gothic.ttf -pointsize 72 -draw "text 0,60 'あいう'" foo.png
 
わかりにくいが、こちらの背景は透過になっている

自由が丘情報 Donuts Plant

ニューヨークスタイルのドーナツ屋さん。
ケーキタイプとベーカリータイプの二種類から選べます。
飲み物付きで500円から、という価格設定です。
向かい側に"はらどーなつ"がありますが、
ヘルシー思考のはらどーなつに比べて、
アメリカンでリッチなDonuts Plant。
どちらを選ぶかは、あなた次第です

Donuts Plant
「はらどーなつ」 について

ドーナツ!ドーナツ! 人気のドーナツを家で! おいしい+揚げない=50レシピ   [本]

ドーナツ!ドーナツ! 人気のドーナツを家で! おいしい+揚げない=50レシピ   [本]

css splite用の1枚画像とそれに対応するCSSを作成するperl スクリプト(垂直or水平方向に任意に画像連結)

こちらのエントリーをうけて、
css splite用の1枚画像とそれに対応するCSSを作成するperl スクリプトを改良しました。

水平方向に結合したい場合は、
cat 16x16_icons.tsv | ./get_icons.pl -css=icons.css --img=icons.png


垂直方向に結合したい場合は、
cat 16x16_icons.tsv | ./get_icons.pl -css=icons.css --img=icons.png --vertical

とする。

CSSも、画像連結方向にあったCSSを吐き出す。

githubにコードをアップしました

[optipng] CSS spliteの画像は縦に並べるか、横に並べるか

なんかタイトルが某映画のタイトルみたいになってしまいましたが、

打ち上げ花火、下から見るか?横から見るか? Third Edition(DVD) ◆22%OFF!

打ち上げ花火、下から見るか?横から見るか? Third Edition(DVD) ◆22%OFF!


CSS sprite の画像を作成する時に、縦にするか、横にするかは
どうでもいいけど、ちょっと悩んでしまいます。

Yahoo!のフロントエンド・エンジニアNate Koechleyが@media 2008で講演したときに使ったスライド
CSS Sprite

* 画像の敷き詰めは水平方向にする。
o 上下方向よりもサイズが節約できる、ことが多い


本当なのか、とりあえず、自分で画像を作成し、
optipngで圧縮してみた。

1. 水平方向


OptiPNG 0.6.1.1: Advanced PNG optimizer.
Copyright (C) 2001-2008 Cosmin Truta.

** Processing: ./css/icons.png
1008x16 pixels, 4x16 bits/pixel, RGB+alpha
Reducing image to 4x8 bits/pixel, RGB+alpha
Input IDAT size = 45231 bytes
Input file size = 45422 bytes
Trying:
zc = 9 zm = 8 zs = 0 f = 0 IDAT size = 27378
zc = 9 zm = 8 zs = 1 f = 0 IDAT too big
zc = 1 zm = 8 zs = 2 f = 0 IDAT too big
zc = 9 zm = 8 zs = 3 f = 0 IDAT too big
zc = 9 zm = 8 zs = 0 f = 5 IDAT too big
zc = 9 zm = 8 zs = 1 f = 5 IDAT too big
zc = 1 zm = 8 zs = 2 f = 5 IDAT too big
zc = 9 zm = 8 zs = 3 f = 5 IDAT too big

Selecting parameters:
zc = 9 zm = 8 zs = 0 f = 0 IDAT size = 27378

Output IDAT size = 27378 bytes (17853 bytes decrease)
Output file size = 27557 bytes (17865 bytes = 39.33% decrease)



2. 垂直方向


OptiPNG 0.6.1.1: Advanced PNG optimizer.
Copyright (C) 2001-2008 Cosmin Truta.

** Processing: ./css/icons.png
16x1008 pixels, 4x16 bits/pixel, RGB+alpha
Reducing image to 4x8 bits/pixel, RGB+alpha
Input IDAT size = 43963 bytes
Input file size = 44154 bytes
Trying:
zc = 9 zm = 8 zs = 0 f = 0 IDAT size = 26818
zc = 9 zm = 8 zs = 1 f = 0 IDAT too big
zc = 1 zm = 8 zs = 2 f = 0 IDAT too big
zc = 9 zm = 8 zs = 3 f = 0 IDAT too big
zc = 9 zm = 8 zs = 0 f = 5 IDAT too big
zc = 9 zm = 8 zs = 1 f = 5 IDAT too big
zc = 1 zm = 8 zs = 2 f = 5 IDAT too big
zc = 9 zm = 8 zs = 3 f = 5 IDAT too big

Selecting parameters:
zc = 9 zm = 8 zs = 0 f = 0 IDAT size = 26818

Output IDAT size = 26818 bytes (17145 bytes decrease)
Output file size = 26997 bytes (17157 bytes = 38.86% decrease)


今回の画像では、垂直方向の方が、若干サイズを抑えることが出来た。

css spriteの目的は、1つの画像になっていることが大切なので、
この程度のサイズの差なら、あまり気にする必要はないかもしれない。

css spriteは、手動で画像をつなげてcssを書き出して、、、とかやってると
時間がいくらあっても足りないので、スクリプトにするのが必須と考えている。

そのスクリプトを、起動オプションによって、
画像を垂直に並べるか水平に並べるかを指定して、
それに応じたCSSも出力できるようにするのがよい、ですな。

ImageMagickのconvertコマンドで特定の色を置換する

このような画像があったときに、

赤の部分を特定の色(例えば緑)に変えたい、と思ったとする。

赤:#ff0000
緑:#00ff00
なので、

convert -fill '置換後の色' -opaque '置換対象の色' 変換前画像ファイル 変換後ファイル名




若干赤が残っているので、-fuzzオプションを指定して、
convert -fuzz 50% -fill '#00ff00' -opaque '#ff0000' icons.png i.png

とすると、きれいに置換できた。

ImageMagickのconvertコマンドでcheckerboard模様の画像を作成する

convert -size 200x200 pattern:checkerboard bar.png


これで、

という画像ができる。

標準でこちらのパターンが用意されている

メールからの Blog 更新のテストです。

これで、更新頻度を上げることができるでしょうか?

意外と知らないYUI CSS Builderの使い方と利点

YUIというと、Javascriptライブラリ鵜というイメージを持つ人も多いかもしれないですが、
ページレイアウトを簡単に変更できるCSSライブラリも提供しています。

YUI Grid CSS Document(英語)
にドキュメントは公開されているので、読めばわかるはずですが、
何分英語なので、とっつきにくい部分があると思います。

というわけで、初めての人は、YUI CSS Grid Builderというツールがあるので、
こちらをまず触ってみるのがおすすめ。

YUI CSS Grids Builderツールは、
HTMLページを作る際に必要な、以下の2つのことを決定するためのツールです。

1. ページ全体幅の決定
2. カラム数とナビの固定幅の決定

ページ全体幅は、
- 750px固定幅
- 950px固定幅
- 974px固定幅
- 100%幅
- カスタム幅固定
という選択肢があります。カスタム幅固定があるので、
ページ幅としては、必要なパターンが全てあると言えます。

カラム数やナビ幅は、
右、左ナビを自由に選択でき、かつ、そのナビの幅を
右は160px, 180px, 300px
左は180px, 240px, 300px
の中から選択することが出来ます。

YUI CSS Builderツール上は、
左右ナビの3カラムのページ、という選択肢がないように見えますが、
Body Columns → 「No columns」以外を選択
Split Content → 「2 Columns(25/75)」などを選択
することにより、擬似的に3カラムのページも表現できます。

ナビ幅は、ページ幅と違って、カスタム幅がないので、
細かいレベルでなんでも実現できる、という訳では無いですが、
事実上、上記のパターンでほぼ満足できるのではないかと思います。

で、一通り、好きなページ構成をこのツールで選択した後、
「show code」をして出てきたコードを「view plain」から
コピーして使えば、簡単に、好きなレイアウトでの
HTMLページの雛形を作ることができます。

現場のプロから学ぶXHTML+CSS   [本]

現場のプロから学ぶXHTML+CSS [本]


この時に重要なのが、2点あります。

まず1点。
レイアウトについて記述されているCSSファイルが、Yahoo!のサーバ上にあること。

「show code」を見て分かる通り、CSSのリンク先は
<link rel="stylesheet" href="http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css">

となっています。
これは、自分の管理してあるサーバではなく、
Yahoo!が保持するサーバにあるCSSファイルを自由に参照してよい、
という意味なので、開発者にとっては、導入するハードルが低い、と言えます。

次に、ページ全体幅やナビ幅を変更するときに、実際変わるHTMLコードは、
<div id="doc2" class="yui-t5">

の、idとclassの部分を
<div id="doc3" class="yui-t2">

と変えるだけで、変更可能、という点です。

これは、最近流行っている、css frameworkという考え方で、
あらかじめ利用しそうなCSSのクラスをすべて定義したCSSファイルをHTMLから読み込み、
HTMLのクラス名やID名を変更することにより、適用するデザインをかえて、
見た目を変更する、といった設計のCSSのことです。

このような設計のCSSは、デザインを変更したい時に、
いちいちCSSファイルの修正をする必要が無く、HTMLの(クラス名、ID名だけの)変更だけで
済むので、非常にエンジニアにとって直感的に理解しやすい、と言えます。

以上、2点が、自分がYUI CSSを利用している大きな理由です。

使ったことが無い人は、ぜひ、一度 YUI CSS Grid Builderを使ってみて、
体感し、実際に使ってみることをおすすめします。

YUI CSS wrapper という位置づけの CSS Rene[ルネ]

初めてのオープンソースPJ

CSS Rene

github コード置き場

使い方は、
1.0.0/css/rene.css
1.0.0/css/*png
1.0.0/css/grad-none.css
を同一ディレクトリに置いて、
HTMLからインクルードするだけ。

詳しい使い方は後で書く。

ちゃんとしたテストはまだしてない。

background-imageを指定した場合の読み込みについて

ふと、動作確認中にlivehttpheadersを見ていて気がついたのでメモ。

CSSで以下のように記述しているときに、
.grad200{
background:url(200.png) repeat-x;
}
.grad100{
background:url(100.png) repeat-x;
}
.grad50{
background:url(50.png) repeat-x;
}

HTMLでgrad200クラスしか使用していなかったとき、
読み込まれるのは、200.pngだけ、である。

つまり、ブラウザは、
読み込まれたCSSでbackground-imageで画像ファイルを指定されていても、
HTMLでそのクラスが指定されていない限り、
画像ファイルは取得しにいかない。

動作確認は、firefoxでのみ、確認。
IE系ではどうなってるのは、わからない。

ミッドタウンで「骨展」にいってきました



前々から気になってた「骨展」@ 東京ミッドタウン・ガーデン内 21_21 DESIGN SIGHT
ワーカー割引で800円、一般は1000円。

人工物、工業物の骨格や生物の骨格に焦点を当てた展示。

これからも気になる展示があるので、また時間を見つけて参加してみようと思います。

imagemagickのconvertコマンドで透過pngを作る

色々迷ったけど、結果的に単純でした。
以下コマンド

/usr/bin/convert -size 50x50 gradient:#ffffffaa-#ffffff00 bar.png


RGBA(A=アルファ値)にすればOKらしい。

この画像を使ってCSSでBackground Imageに指定すると
以下のようになる

上からそれぞれ、
1. 透過png利用する、背景色navy、文字色:白
2. 透過png利用しない、背景色navy、文字色:白
3. 透過png利用する、背景色pink、文字色:黒
4. 透過png利用しない、背景色pink、文字色:黒
のfirefoxでのスクリーンショット

この透過pngを1つもってるだけで、
立体感のある背景が実現できるが、
IE6だと透過pngが使えないようなので
http://blog.chibatch.jp/javascript/ie6png.html
などで解決するらしい。

css splite用の1枚画像とそれに対応するCSSを作成するperl スクリプト

最新記事はこちら




まず、
famfamのアイコンから、
自分が使いたいアイコンをピックアップ、
設定ファイル(16x16_icons.tsv)を作成

以下のようにスクリプトを起動
cat 16x16_icons.tsv | ./get_icons.pl -css=icons.css

これで、設定ファイルのURLからアイコンがダウンロードされ、
1枚画像とCSS(icons.css)を作成される。

使い方は、icons.cssとicons.pngを同一ディレクトリにおいて、
HTMLからicons.cssを読み込んで、
<p>OK<span class="icon cart"></span>OK</p>

と、spanタグにクラス名を指定すればOK
# icon に続いて、表示したいアイコン名を設定する。アイコン名は設定ファイルで設定した名前

githubにあるicons.pngで問題ない人は、
- icons.png
- icons.css
をダウンロードすればそのまま使えます。
アイコンを追加/削除したい場合は、
get_icons.pl, 16x16_icons.tsvをダウンロード、編集して
ご利用ください

githubコード置き場

参考:CSS Spriteの流派をまとめるの方法8を採用

gitのpagerをcatにする

git status で less が起動するのが使いにくいので、
pagerをcatに変更

git config --global core.pager cat


参考:http://d.hatena.ne.jp/uneasy/20081225/1230212101

好きなアイコンをダウンロードし、css splite用の1枚画像を作るスクリプト

以下の記事は古いです。最新スクリプトはこちら




Perl コード

使い方は、
satoshi@debian:~/git/sample-codes/css_splite$ cat 16x16_icons.tsv
#
# comment line
#
hot http://images.shopping.yahoo.co.jp/img/promotion/ic/hot_ic_1616.gif
food http://images.shopping.yahoo.co.jp/img/component/common/ic/ct_food.gif

satoshi@debian:~/git/sample-codes/css_splite$ cat 16x16_icons.tsv | ./get_icons.pl
(略)
satoshi@debian:~/git/sample-codes/css_splite$ ls -la icons.png
-rw-r--r-- 1 satoshi satoshi 524 2009-08-13 23:59 icons.png


次は、CSSも一緒に吐き出すようにコードを修正してみる予定。

ImageMagickのconvertコマンドでグラデーション画像を作成する

以下のコマンドで作成可能

/usr/bin/convert -size 200x200 gradient:#000000-#ffffff foo.png


上部に#000000
下部に#ffffff
のグラデーション画像(幅:200px、高さ:200px)が作成できる



グラデーションの方向は、
/usr/bin/convert -size 200x200 gradient:#000000-#ffffff -rotate 90 bar.png

で横方向にすることが可能



マクドナルドで開発

最近のマクドナルドは、
・飲み物100円〜(オレンジジュース、ジンジャーエール、など)
・小腹がすいたらポテトでも
無料電源
・無線LAN有り
(別途Yahoo! 無線LANスポット申し込む必要有り)
という開発にうってつけの環境。

日曜日は、二子玉川のマクドナルドで2時間開発。

唯一問題があるとすれば、椅子の座り心地がいまいちなので、
長い間開発はできないかな。腰痛に注意。
ちょっと集中したい時に行くにはベストと思う今日この頃。

といいつつ、最近はロッテリアの絶妙バーガーを食べてみたい今日この頃。

optipng

optipngは、png画像のサイズをコマンド1発で最適化してくれる

* インストール方法
sudo aptitude install optipng


* 使い方
/usr/bin/optipng [最適化したい画像ファイルパス]

でOK

* サンプル

Yahoo! Japan Tech Blogにある、この画像を最適化してみる。

satoshi@debian:~/tmp$ wget http://i.yimg.jp/images/tecblog/2009Q1/20090608.png
--2009-08-10 23:07:29-- http://i.yimg.jp/images/tecblog/2009Q1/20090608.png
i.yimg.jp をDNSに問いあわせています... 202.93.69.243
i.yimg.jp|202.93.69.243|:80 に接続しています... 接続しました。
HTTP による接続要求を送信しました、応答を待っています... 200 OK
長さ: 17164 (17K) [image/png]
`20090608.png' に保存中

100%[===================================================================================================================>] 17,164 --.-K/s 時間 0.1s

2009-08-10 23:07:30 (152 KB/s) - `20090608.png' へ保存完了 [17164/17164]

satoshi@debian:~/tmp$ ls -l 20090608.png
-rw-r--r-- 1 satoshi satoshi 17164 2009-06-03 11:09 20090608.png
satoshi@debian:~/tmp$ optipng 20090608.png
OptiPNG 0.6.1.1: Advanced PNG optimizer.
Copyright (C) 2001-2008 Cosmin Truta.

** Processing: 20090608.png
468x343 pixels, 3x8 bits/pixel, RGB
Input IDAT size = 17070 bytes
Input file size = 17164 bytes
Trying:
zc = 9 zm = 8 zs = 0 f = 0 IDAT size = 14479
zc = 9 zm = 8 zs = 1 f = 0 IDAT too big
zc = 1 zm = 8 zs = 2 f = 0 IDAT too big
zc = 9 zm = 8 zs = 3 f = 0 IDAT too big
zc = 9 zm = 8 zs = 0 f = 5 IDAT too big
zc = 9 zm = 8 zs = 1 f = 5 IDAT too big
zc = 1 zm = 8 zs = 2 f = 5 IDAT too big
zc = 9 zm = 8 zs = 3 f = 5 IDAT too big

Selecting parameters:
zc = 9 zm = 8 zs = 0 f = 0 IDAT size = 14479

Output IDAT size = 14479 bytes (2591 bytes decrease)
Output file size = 14573 bytes (2591 bytes = 15.10% decrease)

satoshi@debian:~/tmp$ ls -l 20090608.png
-rw-r--r-- 1 satoshi satoshi 14573 2009-08-10 23:08 20090608.png


というわけで、15%のサイズ削減ができた。
最適化後の画像は以下。見た目には劣化はわからない。

※ Blogにuploadしたら勝手にリサイズされてしまった。orz


css spliteの画像など、単純な画像ほど、最適化したときのサイズ減少が著しい。

お手軽なので、ぜひお試しあれ。

github 環境設定

* blog公開用リポジトリ作成

blogspotは、コードの貼り付けたときの
デザインがいまいちなので、
(自分の設定が悪いのかもしれないが)
gitの勉強もかねて、
githubにコードを上げて、
blogからリンクを張ることにする。

sudo aptitude install git git-core git-svn

で環境をセットアップしてから
gitにアカウントを作れば、
HOWTOが表示されるので、
迷うことはなさそうだが、
日本語で知りたい人は、
以下のBLOGを参照。
とっても優しい github の使い方

ちょっとハマったのは、
public_key関係。
Permission Deniedが出る。
ヘルプページ
結局1からkeyを作り直して、再度UPして
つながるようになりました。
DSA認証認証の設定方法

これから、ばしばしコミットして、
Wikiも利用していこうと思う。
# git使いに煽られないように

tanarky's github sample-codes repository

軽量 web server "Nginx"をインストール

* Debian lenny に 軽量 web server "Nginx" をインストールした時のメモ
aptitude install nxinx libfcgi libfcgi-dev libfcgi-perl


* config
events {
use epoll;
}
http {
sendfile on;
server {
listen 8080;
location / {
root /opt/lampp/htdocs;
index index.html;
}
}
}


* 起動
sudo /usr/sbin/nginx -c nginx.conf


* 性能測定
** 条件
シンプルでスタティックなHTMLファイル

** 結果
1. lampp同梱のapache
Requests per second: 679.50 [#/sec] (mean)

2. nginx
Requests per second: 2986.20 [#/sec] (mean)

早い。
次は、fastcgiとの連携でCGIを動かしてみる

stow + tokyocabinet + tokyotyrant

基本的に以下のサイトの手順で可能だが、
- tokyocabinet/tokyotyrant
[Perl] Tokyo Cabinetのインストール手順〜テーブルデータベースを試す

stowを使うことにより、一部簡略化した
不要なパッケージを完全に削除できるインストーラー

- install
wget http://tokyocabinet.sourceforge.net/tokyocabinet-1.4.30.tar.gz
wget http://tokyocabinet.sourceforge.net/tyrantpkg/tokyotyrant-1.1.33.tar.gz
wget http://tokyocabinet.sourceforge.net/tyrantperlpkg/tokyotyrant-perl-1.15.tar.gz
tar xvzf tokyocabinet-1.4.30.tar.gz
tar xvzf tokyotyrant-1.1.33.tar.gz
tar xvzf tokyotyrant-perl-1.15.tar.gz
cd tokyocabinet-1.4.30/
./configure && make && sudo make install prefix=/usr/local/stow/tokyocabinet
cd ../tokyotyrant-1.1.33/
./configure && make && sudo make install prefix=/usr/local/stow/tokyotyrant
cd ../tokyotyrant-perl-1.15/
perl Makefile.PL
make && sudo make install
cd /usr/local/stow
sudo stow tokyocabinet
sudo stow tokyotyrant

(ただし、tokyotyrant-perlはstow対応外でした)

- tokyotyrant server 起動
sudo /usr/local/sbin/ttservctl start

-- envの設定はなし

動いた。よかった

POEサーバの性能

ショッピングモールのようなサービスをC向けに公開出来るように
基本的な機能をAPIとして提供するプラットフォームを構築しようと考えている。

基本的な機能とは、例えば、
1. 商品登録/参照
2. カート機能
3. 注文情報変更/参照
などを意味する。

今は
これらの基本的な機能をXML(or JSON) HTTP APIとして公開しようとしたときに、
httpdをどうしようか、迷っている。

1. 普通にapache + PHP (+ MySQL?)
2. その他、奇抜な方法?

2.の選択肢として、当方Perl使いなので、POEを候補として、
本当に1.よりも優位性があるのか、
まずは、1.と2.の性能差を調べてみた。

1. lampp同梱のapache+php環境
2. POE prefork server
http://poe.perl.org/?POE_Cookbook/Web_Server_With_Forking

測定方法
ab -n 1000 -c 20
POEは10プロセス prefork

環境
Linux debian 2.6.26-2-686 #1 SMP Sun Jun 21 04:57:38 UTC 2009 i686 GNU/Linux
hp2133 2Gメモリ

結果
1. Requests per second: 571.17 [#/sec] (mean)
2. Requests per second: 133.24 [#/sec] (mean)

思ってたより早くないじゃん。POE

普通にapache+phpで作るのが正解なんだろうか。
PHPはどうしても抵抗を感じるなぁ。