Archive for May, 2007

Flickr 風の検索フォーム

Tuesday, May 29th, 2007

searchinput.png

ページ要素を整理すべく、検索フォームの場所を(ヘッダ部分に)移動のうえ、Flickr 風なインタラクションをもったかたちに改良。あわせて input タグに accesskey 属性を追加し、キーボード操作で検索フォームにカーソル移動できるようにした。

HTML は以下のとおり。

<form method="get" action="http://blog.shimazu.org/index.php">
<input type="text" accesskey="f" name="s" id="searchinput" />
</form>

JavaScript コードは以下のとおり。実装において、Yahoo! UI Library (YUI) の yahoo-dom-event.js を使用した。最近よく見る直感的なインタラクションだけど、コードは思いのほか直感的ではない。

(function(){
var defalutvalue = 'Search...';
var edited = false;
var E = YAHOO.util.Event;
var D = YAHOO.util.Dom;
E.addListener('searchinput', 'focus', function(){
    if(this.value == defalutvalue && !edited) this.value = '';
});
E.addListener('searchinput', 'blur', function(){
    if(this.value == '') {
        this.value = defalutvalue;
        edited = false;
    } else {
        edited = true;
    }
});
E.addListener(this, 'load', function(){
    D.get('searchinput').value = defalutvalue;
});
})();

実装途中で気づいたけれど、Firefox の accesskey の操作がバージョン 2.0 から変わった模様。従来、[ Alt + Access Key ] だったのが、[ Alt + Shift + Access Key ] となっている。

かんたんなイントラブログの立て方

Friday, May 25th, 2007

友人から「かんたんにイントラブログを立てたい」という話があり、ざっとまとめた設置手順を転載しておく。あくまでかんたんに、ということで、サーバ環境は、Windows XP 上に XAMPP Lite を使って構築し、ブログソフトウェアには WordPress ME を採用、バージョンは、2007/5/19 時点での最新版を使用した。

注意事項:
XAMPP Lite はかんたんなサーバ環境設置を実現する反面、セキュリティ的に難アリで、インターネット環境でのサーバ利用には向かない。利用には注意されたい。

1. XAMPP Lite のセットアップ

以下 URL から xampplite-win32-1.6.1.zip をダウンロード。
http://www.apachefriends.org/download.php?xampplite-win32-1.6.1.zip

C:\ とか D:\ とかハードディスクの最上位階層でダウンロードファイルを解凍(USBメモリでも可)。C:\xampplite\ といった感じのフォルダができる。C:\xampplite\xampp-control.exe をダブルクリックで起動。

01_01.png「XAMPP Control Panel」が表示される。赤枠・青枠の「Svc」チェックボックスにチェックをいれ、黄色枠「Service Settings」ボタンをクリック。

01_02.png黄色枠「SCM」ボタンをクリック。

01_03.png「Apache 2.2」が選択されていることを確認し、オレンジ枠「サービスの開始」リンクをクリック。

01_04.png「mysql」が選択されていることを確認し、オレンジ枠「サービスの開始」リンクをクリック。

2. WordPress ME のセットアップ

http://sourceforge.jp/projects/wordpress/files/ にアクセス。

02_01.pngむらさき枠「wordpress-me213.zip」リンクをクリック。ミラー選択画面に遷移する。

02_02.pngむらさき枠内のダウンロードアイコンをクリック(どこでも可)すると、ダウンロードが開始される。ダウンロードファイルを解凍。解凍後、できたフォルダ「wordpress」を C:\xampplite\htdocs\ に移動する。http://localhost/phpmyadmin/ にアクセスする。

02_03.pngオレンジ枠「新規データベースを作成する」の箇所にて、「wordpress」という名称にてデータベース作成。http://localhost/wordpress/ にアクセスする。

02_04.png「ウィザード」リンクをクリック。

02_05.png「こちらをクリック」リンクをクリック。

02_06.pngユーザー名に「root」、パスワードを空に設定し、「submit」ボタンをクリック。

02_07.png「WordPress のインストール」リンクをクリック。

02_08.png「First Step」リンクをクリック。

02_09.pngブログ名を適当に入力(あとで変更可)、メールアドレスを入力し、「Continue to Second Step」ボタンをクリック。

02_10.pngセットアップ完了画面に遷移する。表示されたログイン名・パスワードを使って、「ログイン」リンクを押した次の画面にて、ログインを行う。

02_11.pngログイン画面。

02_12.pngログインするとこの画面が表示される。

02_13.pnghttp://localhost/wordpress/ にアクセスするとブログの公開用画面が表示される。

以上で設置完了。

The Alternatives to Visio

Sunday, May 20th, 2007

UML やフローチャートが描けるような作図ツールを探している。業務で使うなら Visio だったり、(もはや化石的存在の)Inspiration がそれにあたると思われるが、いずれもそれなりに高額であり、個人用途には手を出しづらい。そもそもウェブ制作者にとっては、(業界標準の)Adobe Illustrator のほかに作図ツールがいるのか?というところもあり、意外に話が難しい。

作図ツールの導入意図として、

  1. 比較的簡単に作図ができるようにすること
  2. 誰もがドキュメント確認のみならず編集もできるようにすること

といったところがあるかと思われる。上記 2 点を踏まえ、以下まとめておく。

1. 比較的簡単に作図ができるようにすること

簡単に作図ができる、ということで、たとえば、基本図形がライブラリとしてまとめられ簡単操作で呼び出せるようになっていたり、図形と図形との線をコネクタとして結べるようになっていたり、とか。

この点、Adobe Illustrator は高機能ゆえに不得手であり、ウェブ制作者としても別のツールを考えてみたくなるところと思われる。Visio はもちろん得意分野だが、次の点が難点となってしまう。

2. 誰もがドキュメント確認のみならず編集もできるようにすること

ドキュメント確認のみなら PDF 形式の書き出しで対応できると思われるが、編集となると、ツールそのものの導入が必要になる。

Visio はここがネックで、作図専用ツールに 3 万円弱( Standard の場合)のコストというのは企業は別にしても、個人では手を出しづらい。自分だけでなく、周囲にもかかるコストであることを考えると、もう少し手軽に導入できるツールを考えてみたくなりそう。

The Alternatives to Visio

Visio に代わる手軽なツールを、ということで、オープンソースのソフトウェアを中心に洗い出してみた。UML つながり?ということで、Java で、特に Eclipse の plugin として Java で書かれたソフトウェアが多かった。

Eclipse の plugin として Java で書かれたソフトウェア

Java で書かれたソフトウェア

その他

個人的には、OpenOffice.org Draw がなんでも機能アリで何も考えずとも手軽に使える感じがして、平凡ながら一番良いように思えた。

なお、今回の洗い出しにあたり、以下サイトが役に立った。商用ソフトウェアに代わるオープンソースソフトウェアを包括的にまとめている感じなので、また何かの機会に使っていきたい。

Open Source Alternative
Find Open Source Alternatives to commercial software

Google AdSense

Sunday, May 20th, 2007

Google Analytics に引き続き、導入。手始めに、サブカラム下に「縦長バナー(120×240)」を設置。Amazon アフィリエイトの結果が芳しくないだけに、期待したいところだが、どうだろうか。

‘Save This Page’ 件数表示の実装

Saturday, May 19th, 2007

今回の 表示機能 の実装は、

  • del.icio.us・はてブ の API をたたき、JSONP (JSON with Padding) 形式のデータを出力する Ruby スクリプト
  • JSONP 形式データを受け取り、整形・表示する JavaScript

の 2 つから構成される。実装にあたり、以下を参考にさせていただいた。

以下、個別にまとめておく。

はてなブックマーク の API をたたくスクリプト

はてなの場合、自分のブログに被ブックマーク数を表示する にあるような簡単な方法があるが、画像形式で表示され、デザインの調整がきかないことから、XML-RPC で API をたたく方法をとった。作成した getHatenaBookmarkCount.rbx の内容は以下のとおり。

#!/usr/bin/ruby -w
require 'cgi'
require 'xmlrpc/client'
require 'json/pure'

cgi = CGI.new
print cgi.header("type"=>"text/html")
end_point = 'http://b.hatena.ne.jp/xmlrpc'

url = cgi.params['url'][0] ? cgi.params['url'][0] : ""
callback = cgi.params['callback'][0] ? cgi.params['callback'][0] : nil

unless url =~ /^http:\\/\\/blog\\.shimazu\\.org\\//
	exit
end

urls = [ url ]
client = XMLRPC::Client.new2(end_point)
begin
	result = client.call('bookmark.getCount', *urls)
rescue XMLRPC::FaultException => e
	data = { 'error'=>e.faultCode, 'detailed'=>e.faultString }
	print data.to_json
	exit
end

data = [ { 'url'=>url, 'total_posts'=>result[url] } ]
if callback
	print callback ,'(', data.to_json ,')'
else
	print data.to_json
end

Ruby XMLRPC はてなブックマーク件数取得API というその名もずばりな参考資料があったので、それをベースにしている。

Ruby の json ライブラリは JSON implementation for Ruby から取得でき、rubygems でのインストールも可能。C で書かれたバージョン (json) と Pure Ruby のバージョン (json_pure) があるが、なぜか Debian GNU/Linux (Sarge) に前者 (json) がインストールできず、代わって後者 (json_pure) をインストールした。

del.icio.us の API をたたくスクリプト

del.icio.us / help / json / url にあるとおり、del.icio.us では普通に JSONP 形式の API が提供されてはいるものの、URL の指定に MD5 の暗号化が必要とのこと。Paul Johnson’s implementation of MD5 in JavaScript という凄腕ライブラリはあるものの、クライアント(ブラウザ)での処理は極力減らしたいので、MD5 処理する Ruby スクリプトをはさむかたちとした。作成した getDeliciousCount.rbx の内容は以下のとおり。

#!/usr/bin/ruby -w
require 'cgi'
require 'digest/md5'
require 'open-uri'

cgi = CGI.new
print cgi.header("type"=>"text/html")

api = 'http://badges.del.icio.us/feeds/json/url/data?hash='

url = cgi.params['url'][0] ? cgi.params['url'][0] : nil
callback = cgi.params['callback'][0] ? cgi.params['callback'][0] : nil

unless url =~ /^http:\\/\\/blog\\.shimazu\\.org\\//
	exit
end

request = api + Digest::MD5.hexdigest(url)
response = OpenURI.open_uri(request).read.chomp!

if callback
	print callback ,'(', response ,')'
else
	print response
end

出力結果

両者いずれも URL と callback 関数名 をパラメータ指定して、JSONP 形式のデータを出力するようになっている。出力例は以下のとおり(わかりやすくするため整形済み)。

例:getDeliciousCount?url=http://blog.shimazu.org/archives/95&callback=getDeliciousResponse

getDeliciousResponse([{
	"hash":"f021170bb35f553b70b7f392412babe4",
	"top_tags":{},"url":"http://blog.shimazu.org/archives/95",
	"total_posts":1
}])

例:getHatenaBookmarkCount?url=http://blog.shimazu.org/archives/89&callback=getHatenaBookmarkResponse

getHatenaBookmarkResponse([{
	"url":"http:\/\/blog.shimazu.org\/archives\/89",
	"total_posts":1
}])

なお、http://blog.shimazu.org/ で正規表現をかけているのは、http://blog.shimazu.org/ 以外のドメインでの利用を制限するため( XMLHttpRequest ではないので、クロスドメインでのアクセスが普通にできてしまうがそれを抑える目的)。

JSONP 形式データを受け取る JavaScript

データを受け取る処理を getcount.js としてまとめた。

function getDeliciousResponse(data){
if(!data||!data[0]||!data[0].total_posts){return false;}
var str = data[0].total_posts + (data[0].total_posts==1?'user':'users');
document.getElementById('delicious').innerHTML = '<a href="http://del.icio.us/url/' + data[0].hash + '">' + str + '</a>';
}
function getHatenaBookmarkResponse(data){
if(!data||!data[0]||!data[0].total_posts){return false;}
var str = data[0].total_posts + (data[0].total_posts==1?'user':'users');
document.getElementById('hatenabookmark').innerHTML = '<a href="http://b.hatena.ne.jp/entry/' + data[0].url + '">' + str + '</a>';
}
var el_delicious = document.createElement('script');
el_delicious.src = '/utils/getDeliciousCount?url=' + location.href + '&callback=getDeliciousResponse';
document.getElementsByTagName('head')[0].appendChild(el_delicious);
var el_hatena = document.createElement('script');
el_hatena.src = '/utils/getHatenaBookmarkCount?url=' + location.href + '&callback=getHatenaBookmarkResponse';
document.getElementsByTagName('head')[0].appendChild(el_hatena);

’Save This Page’ 件数表示

Sunday, May 13th, 2007

以前取り付けた ’Save This Page’ Button に「このページは何件ブックマークされているか」を表示させる仕組みをつけてみた。今回も del.icio.usはてなブックマーク の両方に対応している。

savebutton.png

目に見えるものはたったこれだけなのに、実装にやたら時間がかかってしまった。実装方法などについては、追ってまとめることにする。

追記
‘Save This Page’ 件数表示の実装 に実装詳細を記載。

JavaScript: How to build and deploy

Sunday, May 13th, 2007

1万行を超える比較的長大な JavaScript コードを deploy する際、どのような点に気をつけておくべきか、当たり前なこともあるけど、包括的にまとめている資料が見当たらないので、自分でまとめておく。

ファイルの統合

長大な JavaScript を書く際、機能別にファイルを分けることは、他の言語同様、有効な管理方法のひとつであるが、production 環境において同じファイル構成をとっていると、それが通信上のボトルネックになることがある。理由は、ページローディングの際に、大量の Request/Responce が発生するため。自分で計ったわけではないが、同じコード量でも、複数ファイルに分かれているよりも、単一のファイルにまとまっていたほうが、一回の Request/Responce で済み、処理が早いという。なので複数ファイルで構成される JavaScript の deploy にあたっては、事前にファイルの統合を行うことが望ましい。

コードの圧縮化・難読化

比較的長大な JavaScript コードは、圧縮化・難読化を行うことがよいとされている。圧縮化とは、コードの改行・インデント・コメント・余分なスペースをカットして、その名のとおりファイルサイズを圧縮することを指す。難読化とは、ファイル圧縮に加え、変数名の省略化(例えば A、B、C… といった文字に置換される)を行うことで、処理内容を読みづらくすることを指す。ツールを探すと、いくつか候補があるようで、すべて検証できたわけではないが、何点か掲載しておく。

検証済み

未検証

Build

JavaScript は interpreter 言語であり、当然 compiler は通常存在しないが、比較的長大な JavaScript コードを扱う際には、Linux/FreeBSD といった環境上で GNU make を使った build 環境を用意しておくと便利といわれている。理由は、上記に挙げた「ファイルの統合」「コードの圧縮化・難読化」を自動化させるため。ファイル修正のたびに手作業で行うのは、可能であるにしても、あまり効率的とはいえず、C/C++ や Java などと同様、Makefile というかたちで、必要な処理をまとめて自動化するほうが効率的で間違いがないとされている。

jsbuild.png

Build 環境の作り方

Debian GNU/Linux を前提に記すが、他の Linux あるいは FreeBSD ならば大差はないと思われる。圧縮化ツールには、jsmin (written by C) を使用した。

開発ツールとライブラリヘッダをインストール

# apt-get install gcc g++ make libc6-dev

開発者のサイトからソースコードをダウンロードする。(2007/05/13現在の最新版は、2007/03/27であり、比較的こまめに更新されていると思われる)

# wget http://www.crockford.com/javascript/jsmin.c

コンパイル

# gcc -o /usr/local/bin/jsmin jsmin.c

Makefile の作成

# vim Makefile

以下記述例

SRC = is1.js is2.js
COMP = is.compressed.js
COMB = /tmp/tmp.js
COMMENT = "Copyright (c) 2007 Yuki SHIMAZU. All rights reserved."
all: $(COMP)
$(COMB): $(SRC)
	cat $(SRC) > $(COMB)
$(COMP): $(COMB)
	jsmin < $(COMB) > $(COMP) $(COMMENT)

以下コマンドにて、必要な処理(ファイル統合・コード圧縮化・コード難読化)が行われたファイル(is.compressed.js)が生成される。

# make

以上でファイル生成が完了。このファイルを deploy することで、通信上の効率性を改善できると思われる。

参考ページ

VPS! (2)

Wednesday, May 2nd, 2007

前回の調査 から半年あまり、再度探してみたところ、他にもいくつか見つけることができた。自分が普段利用している Debian GNU/Linux が使えるか否か、という観点で探すと、ほとんどの日本語圏のサービスは選外になってしまうが、英語圏でいくつか選択肢が増えたのはうれしい。詳細は以下のとおり。

Debian GNU/Linux に対応する VPS

Debian GNU/Linux に対応しない VPS (CentOS, Fedora, RHEL などに対応)

日本だと、SAKURAロリポップ みたいに「通常のホームページスペース+ブログが動かせる最低限の環境(Perl, PHP, MySQLなど)」といったかたちでサービス提供されているのが主流だけど、いずれは root 権限があり、DNS の制御も可能な VPS も人気になりそうな気がするがどうなんだろうか。

heteml みたいに「容量 3GB」「Flash Media Server・Coldfusion に対応」といった異色な?サービスもあっておもしろいけど、root 権限などいくつかの機能がないことに変わりなく、普段サーバ管理とかしてるような人には物足りない気がする。