Xlune::Blog

PHPからSkypeチャットを送信

Fri, 29 Aug 2008 15:18:08 +0900

RTMのリマインド機能みたいにSkypeメッセージ送りたい

オレオレリマインダー的なものが必要だったので、PHPからSkypeチャットしてみたメモです。

LinuxはD-Bus経由で通信

調べたところ、Linux上でSkypeAPIを利用するには、アプリケーション間でやりとりを行ってくれるD-Busっていうのを使うらしい。
自分の場合は、すでにD-Busのパッケージが入ってたので特にすることはないが、なければ yum や apt-get で簡単に入るようだ。
あともちろん、Linux版のSkypeも必要。

runlevelは5

Skypeはテキストログインでは使えないっぽい。
なので、Linuxはグラフィカルログインである必要がある。
この時点で、ちょっとやる気が落ちてきた。
ちなみに、テキストログインで運用中の場合は、コマンドラインで

telinit 5

と叩くとグラフィカルログインに動的に変更できる。(もちろんグラフィカルログインに必要なパッケージが揃っていれば)

PHP DBus を入れる

スクリプトからD-Busを利用するためには、そのための拡張やライブラリが必要です。Perlの場合は 'Net::DBus' ってのが既にあったので簡単に実装できました。
なので、すっきりしないですが、PHPからPerlスクリプトを叩くって方向でやってたんですが、最近グリー株式会社さんって所が 'PHP DBus'っていうPHP拡張モジュールを作ってくださったので、それをありがたく使わせてもらうことにしました。

さらに、Skype用のラッパークラスまで提供されています。まさに、渡りに船状態
インストール方法など、詳しい情報もこちらに載ってるので、それらを参考に導入しました。

とりあえず、Linuxのターミナル上から実行テスト

まず、Linux上でSkypeを立ち上げて、ターミナルから下記のPHPを叩く。

[skype_sample.php]

<?php
require_once 'Skype.php';
$skype = new Skype("skype_test_app", 5, true); //1.このスクリプトのアプリケーション名, 2.SkypeAPIのPROTOCOLバージョン, 3.デバッグモードスイッチ
if($skype->connect()){
  $chat_id = $skype->invoke("CHAT CREATE hoge"); //SkypeAPIを参照。SkypeID(この場合は'hoge')に対してSkypeチャットを作成する。
  $chat_id = preg_replace('/ .+$/', '', $chat_id[1]); //上の戻り値からChatIDのみを抽出(汚くてゴメン)。
  $skype->invokeChatmessage($chat_id, "メッセージだよ。"); //ChatIDを指定してメッセージを送信。
}

初回は、Skypeがこのスクリプトとの通信許可を求めてくるので許可する。
どうだろう？うまくいけば指定先にメッセージが送信されているはず。

現状、Skype.phpが開発中のもののようで、コンストラクタの引数の後ろ２つはスルーされる。
自分の場合は気になったので、手動で修正したが、そのうち修正されるはずなので問題ないと思う。

外部、及びcronから実行テスト

まず、普通に外部からSSHかなんかで接続して、PHPスクリプトをコンソールから叩くと

Fatal error: Uncaught exception 'Exception' with message 'dbus_bus_get() failed'

な感じでエラーになる。cronの場合も同じだろうと思う。
今現在も、これに対する正しい対処の方法が分からないんだけど、まぁ、環境変数が違うんだろーなと思って、Linux上のターミナルとSSH接続の外部コンソールの環境変数の違いを洗い出したところ、どうやら

DBUS_SESSION_BUS_ADDRESS

という環境変数をセットする必要があるようだ。
セットする値の方は

unix:abstract=/tmp/dbus-XXXXXXXXXX

な感じで、コロコロ変わってしまいそうな値です。
まぁ、再起動とかしなきゃ大丈夫だと思うので、今回はハードコーディングで環境変数セットしてやります。

[skype_sample.php]

<?php

putenv("DBUS_SESSION_BUS_ADDRESS=unix:abstract=/tmp/dbus-XXXXXXXXXX");

require_once 'Skype.php';
$skype = new Skype("skype_test_app", 5, true); //1.このスクリプトのアプリケーション名, 2.SkypeAPIのPROTOCOLバージョン, 3.デバッグモードスイッチ
if($skype->connect()){
  $chat_id = $skype->invoke("CHAT CREATE hoge"); //SkypeAPIを参照。SkypeID(この場合は'hoge')に対してSkypeチャットを作成する。
  $chat_id = preg_replace('/ .+$/', '', $chat_id[1]); //上の戻り値からChatIDのみを抽出(汚くてゴメン)。
  $skype->invokeChatmessage($chat_id, "メッセージだよ。"); //ChatIDを指定してメッセージを送信。
}

これで動くと思います。
必要なのは、Skypeが起動しているところのsessionアドレスなので dbus-launch とかで新規に作っても駄目っぽいです。

まとめ

Linux版のSkypeは現在バージョン2なので、PROTOCOL 5 までしか対応してないけど、そこそこ遊べそう。
ただ、Skypeクライアントを使わず、WebAPIのようなものがあればこんな面倒なことはしなくていいなぁ。どこかやらないかなぁ。
あと、現状では汎用的なものになってないので、今後も調査してみる。

--
もっとシンプルな方法があるはず。

symfony1.1.1 のカスタムタスクでPropelが利用できずに困った

Wed, 27 Aug 2008 19:18:19 +0900

カスタムタスクって何？

symfony 1.1 から導入されたsymfonyをコマンドラインから利用するためのもの。1.1以前のバッチスクリプトのようにsymfonyのライブラリにアクセスできるそうです。

カスタムタスク生成コマンド

symfony generate:task [ネームスペース]:[タスク名]
例)
symfony generate:task hoge:fuga

これで lib/task の中にカスタムタスクが生成されます。
あとは、生成されたファイルの中の '// add code here' ってところに、自分のやりたいこと書いてくだけ。ラクチン。

実行するには下記のコマンドを叩く

symfony [ネームスペース]:[タスク名]
例)
symfony hoge:fuga

Propel使えないよ

当然のようにPropel使おうとしたんだけど

No connection params set for propel

って怒られました。
なんかググっても要領を得なかったので、素直にソースを調べると "sfGenerateTaskTask.class.php" に生成コードの雛型が入ってました。

どうやら、Propelを利用する場合と、利用しない場合の雛型があるようで、そのスイッチオプションは 'use-database' のようです。

改めて、カスタムタスク生成コマンド

symfony generate:task [ネームスペース]:[タスク名] --use-database=false
例)
symfony generate:task hoge:fuga --use-database=false

これで、Propelが使えるカスタムタスクが生成されます。
なんで、'--use-database=false' なのかは僕にはわかりません。'true'じゃないと気持ち悪いんですがね。
まぁ、問題があればそのうち修正されるんじゃないですか。

こっちを実行するにはアプリケーション名を引数で与える必要があるようです。

symfony [ネームスペース]:[タスク名] [アプリケーション名]
例)
symfony hoge:fuga frontend

生成されたカスタムタスクソース

<?php

class hogeFugaTask extends sfPropelBaseTask
{
  protected function configure()
  {
    $this->namespace        = 'hoge';
    $this->name             = 'fuga';
    $this->briefDescription = '';
    $this->detailedDescription = <<<EOF
The [reminder:get-source|INFO] task does things.
Call it with:

  [php symfony reminder:get-source|INFO]
EOF;
    $this->addArgument('application', sfCommandArgument::REQUIRED, 'The application name');
    // add other arguments here
    $this->addOption('env', null, sfCommandOption::PARAMETER_REQUIRED, 'The environment', 'dev');
    $this->addOption('connection', null, sfCommandOption::PARAMETER_REQUIRED, 'The connection name', 'propel');
    // add other options here
  }

  protected function execute($arguments = array(), $options = array())
  {
    // Database initialization
    $databaseManager = new sfDatabaseManager($this->configuration);
    $connection = Propel::getConnection($options['connection'] ? $options['connection'] : '');
    // add code here
  }
}

--
仕様がコロコロ変わるとつらいなぁ。

【Blogパーツ紹介】サムライウエポン

Wed, 27 Aug 2008 13:08:03 +0900

サムライウエポン

いやー、しばらくチョッカイ出してたら水攻めに遭ったよ。。。

--
ページ全体を使うBlogパーツが増えて面白い。

JavaScriptで迷路生成してみたよ

Tue, 29 Jul 2008 20:01:58 +0900

こんな迷路ができました

サンプルページ

迷路生成・探索サンプル

迷路の生成はクラスタリングで行ってます。
探索も何かアルゴリズム勉強しようと思ったんですが、難しかったので適当に作りました。。。
無駄な動きするけど、ゴールまでは到達するのでよし！

--
いや、ヒマだったんでね。

PC買って組み立てたら筋肉痛になった

Mon, 23 Jun 2008 19:06:58 +0900

購入パーツ

インテル Core 2 Duo E8400 Box (LGA775) 《送料無料》

LGA775対応 Dual-CoreCPU 45nm

商品スペック

CPUコア	Wolfdale	動作クロック	3GHz
対応形状	Socket775	FSBクロック	1,333
L2キャッシュ	6MB	CPUクーラー	○
パッケージ	BOX

ASUSTeK P5K-E

Intel P35 Express搭載 LGA775対応 ATXマザーボード

商品スペック

チップセット	Intel P35 Express	PCI Express x16	2
最大メモリ容量	8GB	メモリスロット（DDR2）	4
メモリスロット（DDR）	0	VGA機能	×
SOUND機能	○	USBポート	12
LAN機能	ギガビット対応（1000M bps）

CFD販売 W2U800CQ-2GL5J

DDR2 240pin DIMM Dual動作確認済セット

商品スペック

対応	PC6400	容量	4GB
ピン数	240ピン	CL	5
ECC	×	パッケージ	簡易パッケージ品

FOXCONN 9600GT-512F OC

GeForce 9600 GT搭載 PCI Express x16(2.0)対応ビデオカードオーバークロック仕様

商品スペック

ビデオチップ	GeForce 9600 GT	搭載メモリ	512MB GDDR III
TV-OUT	○	デジタルDVI出力	○
パッケージ	パッケージ品

HITACHI HDP725050GLA360

3.5インチ内蔵シリアルATA-HDD

商品スペック

容量	500GB	回転数	7200rpm
インターフェイス	シリアルATA 300	バッファ	16MB
パッケージ	バルク品

LITE-ON DH-20A4P

DVD±R DL最大8倍速記録対応 ATAPI接続スーパーマルチドライブ

商品スペック

接続	ATAPI	CD-R書込倍速数	48
CD-RW書込倍速数	32	DVD-RAM書込倍速数	12
DVD-R書込倍速数	20	DVD-RW書込倍速数	6
DVD+R書込倍速数	20	DVD+RW書込倍速数	8

SCYTHE SCY-0311SE-BK

ATX対応ミドルタワーPCケース

商品スペック

電源容量	450W	5インチベイ	4
3.5インチベイ	2	内部ベイ	6
USBコネクタ数	4	IEEE1394コネクタ数	0
Pentium4対応	○

BenQ FP222WH-V2 《送料無料》

22インチワイド液晶モニタ

商品スペック

液晶パネルサイズ	22型ワイド	最大解像度	1680×1050
ドットピッチ	0.282mm	コントラスト比	700対1
幅	518mm	奥行	170mm
高さ	422mm	重量	5.8kg

Logicool Cordless Desktop LX710 Laser (LX-710)

ワイヤレスキーボード＆レーザーマウスセット

商品スペック

接続	USB	ホイール機能	○
コードレス	○	パッケージ	パッケージ品

感想とか

ハードは素人なんだけど、動いてよかった。
クアッドコアにしとけばよかったな～とも思うけど、今のところストレスは感じてないのでよし。
組み立て終わった後に、マザーボードの付属部品を見つけたんだが、気にしない。
グラフィックボードは新しいのに限る。
ディスプレイ２枚買ったんだが、デカ過ぎ、ワイドだし。机ギリギリ。でも慣れるとたまんない圧迫感。
内蔵ハードディスクも２個(RAID構成じゃないよ)買ったんだけど、データ移行したらすでに半分いった。次はテラだな。
面倒なので電源付きのミドルタワーケース買ったんだが、電源壊れないか心配。(壊れた前例あり)
電源入れたら、ミドルタワーケース付属のファン部分で、LEDが青く煌々と輝きだした。予想外。
無線マウスは使い勝手はいいんだが、たまに制御不能になったり、イベント取れなかったりしてイラッとする。

まとめ

とりあえず、初期不良はなかったのでよかった。
前のPCは4年ぐらい使ってたんだけど、今回のPCもそれぐらいもってくれるといいなぁ。
サクサク動くマシンって、ただそれだけで素敵です。

--
いや、なぜか筋肉痛なのよ。マジで。組み立てただけなのに。。。

「TextAreaの高さを入力にあわせて調整する」を作っとく

Tue, 20 May 2008 18:21:38 +0900

あったらあったでいいレベル

テキストエリアの動的な調整は、マウスでドラッグするやつも含めると、チラホラ見るようになってきた。
ユーザ視点においては、無いと困るというレベルではなく、あれば便利というもの。

下記のような記事を見たので、自分も自分なりにちゃんとストックしておこうと思った。

textareaのサイズを入力にあわせて調整するJavaScript (イラストdeブログ開発記)
javascript - 勝手に添削 - textareaの高さを自動調節 (404 Blog Not Found)

追記：
実際にこういう機能が欲しい場合は、jQueryとjQueryプラグイン使った方がラクチン。

さくっとサンプル

へるぷみ｜

JavaScript コード

/* setup */
var FormUtil = FormUtil || {} ;
FormUtil.TextArea = FormUtil.TextArea || {} ;

/* config */
FormUtil.TextArea.conf = {
	resizeClass: "auto-resize",
	resizeMin: 1,
	resizeMax: 30
};

/* resize func */
FormUtil.TextArea.autoResize = function(e){
	var conf = FormUtil.TextArea.conf;
	var textarea = e.target || e.srcElement || e;
	var rowCount = textarea.value.split("\n").length;
	rowCount = Math.min(conf.resizeMax, Math.max(conf.resizeMin, rowCount));
	textarea.setAttribute("rows", rowCount);
};

/* init event */
FormUtil.TextArea.init = function(e){
	var textarea = document.getElementsByTagName("textarea");
	var className = FormUtil.TextArea.conf.resizeClass;
	var regex = new RegExp("(^|\\s+)" + className + "($|\\s+)");
	for(var i=0,max=textarea.length;i<max;i++){
		var tmp = textarea.item(i);
		if(!(tmp.getAttribute("class") || tmp.getAttribute("className") || "").match(regex)) continue;
		if(window.addEventListener){
			tmp.addEventListener("keyup", FormUtil.TextArea.autoResize, false);
		} else if (window.attachEvent) {
			tmp.attachEvent("onkeyup", FormUtil.TextArea.autoResize);
		}
		FormUtil.TextArea.autoResize(tmp);
	}
}

/* onload event */
if(window.addEventListener) {
	window.addEventListener("load", FormUtil.TextArea.init, false);
} else if (window.attachEvent) {
	window.attachEvent("onload", FormUtil.TextArea.init);
}

"FormUtil"ってのを持ってるわけではない、これを期にフォーム関連の細かいコードを整理しようと思っただけ。
追記：scrollHeightとか読んでwrapにも対応したほうがいいよね。

まとめ

自分がJavaScriptを書くと、何か冗長な感じになってしまう。
もっと良い書き方を覚えたいので、質のいいライブラリでもながめよう、放置の可能性が高いが。。。

--
JSは上の人のレベルが高すぎ、格差社会だ。

Passenger(mod_rails)をインストールしてApache2+Railsをシンプルに行こう

Thu, 17 Apr 2008 21:27:53 +0900

Passengerって何？

mod_rails って言えば大体役割は伝わります。Apache2上で Ruby on Rails を動作させるためのApacheモジュールです。
今まで、Apache+Railsの実現には mod_ruby や Fast CGI などが使われてきたようですが、設定がやや面倒という印象がありました。
Passengerはその面倒さを和らげてくれるありがたいモジュールを提供してくれます。

Passengerをインストール

前提として Ruby と RubyGems、Rails がインストールされている状態とします。
さっそく下記コマンドで passenger をインストールしましょう。(インストールの仕方はPassengerのページで説明されています)

gem install passenger

インストール権限があればこのコマンドだけでインストールできます。途中、依存関係にあるライブラリのインストールも求められた場合は一緒にインストールしましょう。

Apache2モジュールのインストール

Passengerをインストールしたら、Apache2モジュールをインストールします。
まずは、どのApache2に対してモジュールを生成するか指定しましょう。

export APXS2=[APACHE_ROOT]bin/apxs

指定したら、あとは下記コマンドでインストールするだけです。

passenger-install-apache2-module

コマンドを実行するとテキストベースのインストーラーが立ち上がりますので、Enterを押してステップを消化していきます。
インストールが成功すると、「Apacheの設定ファイルに下記のような設定を追加してね！」的なメッセージが出ますので、さくっと設定ファイルにコピペしましょう。
(環境によってパスが異なります)

LoadModule passenger_module /usr/local/lib/ruby/gems/1.8/gems/passenger-1.0.1/ext/apache2/mod_passenger.so
RailsSpawnServer /usr/local/lib/ruby/gems/1.8/gems/passenger-1.0.1/bin/passenger-spawn-server
RailsRuby /usr/local/bin/ruby

あとは、バーチャルホストの設定などをしてApacheを再起動すればRailsアプリがすぐに動きます。
(実はモジュールインストール時、aprが古いとか、RubyGamsが古いとか、新しくしたらメソッドねーよとか、色々もてあそばれましたが、普通の環境なら大丈夫だと思うので省略します)

Fastladderを入れてみる

せっかく環境が整ったので、Fastladderを入れて遊んでみる。

svn co http://fastladder.googlecode.com/svn/trunk/fastladder/ fastladder

まずはsvnリポジトリからソースをチェックアウト。
あとは、"INSTALL.txt" に書いてあるものをインストールする。

gem install rfeedfinder
gem install feed-normalizer
gem install opml
gem install mongrel
gem install sqlite3-ruby

FreeImage っていうライブラリも必要らしいので入れる。

wget http://jaist.dl.sourceforge.net/sourceforge/freeimage/FreeImage3100.zip
unzip FreeImage3100.zip
cd FreeImage
make
make install

これで必要なものは全部揃いました。

Fastladderのセットアップ

バーチャルホストの設定(サンプル)

<VirtualHost *:80>
  ServerName www.yourdomain.com
  DocumentRoot [設置パス]/fastladder/public
  <Directory "[設置パス]/fastladder/public">
    Order allow,deny
    Allow from all
  </Directory>
</VirtualHost>

DBの初期化とクローラーの起動

cd [設置パス]/fastladder
RAILS_ENV=production
rake db:migrate
script/crawler > /dev/null &

これでセットアップ完了です。

Fastladderプレビュー

→Fastladder(注：プレビューなので真面目に使わないようにしてね)
うまく行ったようです。よかったよかった。
ちなみに、ものすごく重いですが、Passenger が悪いわけではなく、テストサーバが低能なだけです。あしからず。
でも実際 Passenger の処理能力は気になるところ。早く運用実績が公開されるといいですね。

まとめ

導入ハードルを低くする事が普及への近道ってのはもっともな話しで、エライ方々に定期的に叩かれてるPHPがあれだけ普及してるのは、まさに導入が「ラクチン」だったからに他ならないと思う。
そういう意味では、その評価ほど普及率が高くないRails(ruby)もやっと裾野を広げるチャンスが巡って来たのでは？

--
はい、実はRails真面目に使った事ありません。

クライアントサイドだけで画像が生成できるそうなのでデモっておく

Wed, 16 Apr 2008 18:01:52 +0900

情報元とか

→Saving canvas data to image file
→Tanablog: サーバを経由せずに Flash の内容を画像に変換する
前に Tanablog さんの記事を読んでたはずなのに "Saving canvas data to image file" でもう一回「へぇ～」と思ってしまった。これはイカン。
要は「dataスキーム使えば便利」って話なので、もう忘れないようにDEMOっておく。

DEMO

Size: 0
Alpha: 0
Color: 0

メモ

上のボックスが描画ボックス(swf)、その右が描画オプション。
赤枠点線のボックスがdataスキームによる描画クローン。
青枠点線のボックスがサーバスクリプト経由の描画クローン。
IEでdataスキームを利用できるのはバージョン８以降らしい。
IE8 bata1/Firefox2/Safari3 で一応、動作確認はした。

まとめ

ASによる画像作成・編集能力は非常に高いので、クライアントサイドに出力機構が備わっているというのは良いことだと思う。
まだブラウザ対応してねーとか、dataスキームってセキュリティ的にどーよ、とか色々目にするけど、便利な物は便利。

--
詳細を記憶する必要はないが、関連インデックスを思い出さないのはイカン。

RE:スクリプト無しで実装する、タブが重なり合うナビゲーション

Thu, 10 Apr 2008 16:25:19 +0900

タブが重なり合うナビゲーション

コリスさんというブログで「スクリプト無しで実装する、タブが重なり合うナビゲーション」っていう紹介記事があった。
ちなみに紹介先はコチラ→henryhoffman.com

なんか"span"がもっさり

「へぇ～」と思ってみてたんだけど、なんか"span"が二重になってて、"class"がポコポコ貼り付いてるんで、どーにも落ち着かない。
なので、"span"を使わない方法を考えてみた。

ゼロにはできませんでした。。。

[選択済みなし]

[選択済みあり]

けっこー考えたんだけど、やっぱ IE6以下が "a"タグの":hover" にしか反応してくれないので、"span"を一個使っちゃいました。残念です。
一応、下記のブラウザで正常に表示されるのは確認しました。 (IE5.5/IE6/IE7/IE8bata1/Firefox2/Safari3.1/Opera9.26)

ソースコード

汚いですが、CSSコードとHTMLコードです。
肝は ":hover" 擬似クラスに定義してある "border: 0;" です。
これがないとIEで ":hover" による "z-index" の値が反映されません。

[CSS]

.tab-menu {
	display: inline-block;
	list-style-type: none;
	height: 32px;
	margin:0 0 0 20px;
	paddin:0;
	font-size: 12px;
}
html[xmlns] .tab-menu {
	display: block;
	padding: 0;
}
* html .tab-menu {
	height: 1%;
}
.tab-menu:after {
	display: block;
	visibility: hidden;
	height: 0;
	content: ".";
	clear: both;
}

.tab-menu li {
	float: left;
	height: 32px;
	margin:0 0 0 -20px;
	padding:0;
}
.tab-menu a {
	cursor: hand;
	display: inline-block;
	height: 32px;
	outline: none;
	padding-right: 31px;
	color: #555555;
	text-decoration: none;
	background-image: url(http://blog.xlune.com/2008/04/10/up_images/menu_right_off.gif);
	background-repeat: no-repeat;
	background-position: right top;
	position: relative;
	z-index: 0;
}
html[xmlns] .tab-menu a {
	display: block;
}

.tab-menu a span {
	display: inline-block;
	height: 32px;
	line-height: 32px;
	padding: 0 1em;
	background-image: url(http://blog.xlune.com/2008/04/10/up_images/menu_back_off.gif);
	background-repeat: no-repeat;
	background-position: left top;
	white-space: nowrap;
	position: relative;
	z-index: 0;
}
html[xmlns] .tab-menu a span {
	display: block;
}

.tab-menu a.active {
	color: #FFFFFF;
	background-image: url(http://blog.xlune.com/2008/04/10/up_images/menu_right_on.gif);
	z-index: 500;
}
.tab-menu a.active span {
	background-image: url(http://blog.xlune.com/2008/04/10/up_images/menu_back_on.gif);
	z-index: 500;
}

.tab-menu a:hover {
	color: #FFFFFF;
	background-image: url(http://blog.xlune.com/2008/04/10/up_images/menu_right_on.gif);
	border: 0;
	height: 32px;
	z-index: 1000;
}

.tab-menu a:hover span {
	background-image: url(http://blog.xlune.com/2008/04/10/up_images/menu_back_on.gif);
	border: 0;
	z-index: 1000;
}

[HTML]

<!-- 選択済みなし -->
<ul class="tab-menu">
	<li><a href="#"><span>メニュー</span></a></li>
	<li><a href="#"><span>なが～いメニューです</span></a></li>
	<li><a href="#"><span>Menu</span></a></li>
	<li><a href="#"><span>メニュー</span></a></li>
</ul>

<!-- 選択済みあり -->
<ul class="tab-menu">
	<li><a href="#"><span>メニュー</span></a></li>
	<li><a href="#" class="active"><span>なが～いメニューです</span></a></li>
	<li><a href="#"><span>Menu</span></a></li>
	<li><a href="#"><span>メニュー</span></a></li>
</ul>

まとめ

直感では"span"全部消せる！と思ったんだけど、気のせいでした。
やっぱ、1つの要素に複数の背景を指定できる機能(Safari3.xにはあるらしい)がないと、"span"使わざるを得ないよね(？)。

--
絶対、もっといい方法があるはず

FontStructがおもしろいので5分でフォント作ったwww

Tue, 08 Apr 2008 12:40:10 +0900

FontStruct

ホームページを作る人のネタ帳でfontstructってフォントジェネレートサービスが紹介されてたんだけど、これがまた、良く作りこんであって面白かった。

さっそくフォント作った

はい、汚いです。。。ゴメンナサイ。
まぁ、結果はこんなんですが、これほど気軽にフォントを作成できる fontstruct は素晴らしいですね。

作成時のツールレイアウトやショートカットキーの割り当てなどもちゃんとしていて、久しぶりに良いものを見ました。

--
日本語版は人海戦術の要素を組み込まないとフォントが完成しない。

Flashゲーム「Red Bull Flugtag Flight Lab」を紹介してみる

Thu, 27 Mar 2008 17:03:31 +0900

http://www.redbull.com/flightlab/

ヒコーキを作って飛ばせるゲーム。鳥人間コンテストを(ry

今日の EDGE Now!

EDGE Now!

このマスク・・・進化しやがる！

--
すでにAAAランクのマスクになってる方もいらっしゃるwww

学習ゲームコンテンツ「Questionaut」を紹介してみる

Wed, 26 Mar 2008 09:52:31 +0900

http://www.bbc.co.uk/schools/ks2bitesize/games/questionaut/pop.shtml

学習ゲームコンテンツらしい。英語です。

ついでに EDGE Now! 試してみた

EDGE Now!

やり方が間違ってなければ、この記事で推薦した「Questionaut」が EDGE Now! にエントリーされるはず。。。

--
現在、EDGE Now! の参加ブログ数が少ないのでチャンスかも！？

お使いのブラウザは優秀ですか？Acid3テストしてみたよ。

Thu, 06 Mar 2008 13:21:16 +0900

Acid3とは？

ACID3テスト登場、最初にクリアするブラウザは?
Acid3試験はとくにWeb 2.0ダイナミックコンテンツに関する仕様をチェックすることを目的としており、ECMAScript 262やDOM2の実装上の潜在的欠陥を明らかにすることを目指している。

CSSの仕様だけじゃなくて、ダイナミックコンテンツに関する仕様もチェックしてくれるらしい。
すべてのブラウザが互換性の向上に尽力してくれると、一ユーザとしてはありがたいなぁ。(描画やスクリプト実行の信頼性以外の部分でブラウザ選択が可能になる)

どんなテスト？

テストしたいブラウザで、acid3テストページにアクセスするだけでテストが開始されます。
100ポイント(100ステップ)が最高点で、テストをクリアすると下記のような表示になるようです。

今回は、自分の環境で出来る範囲でテストしてみました。

Firefox 2 (Windows)
Firefox 3 Beta 4 (Windows)
Internet Explorer 5.55 (Windows)
Internet Explorer 6 (Windows)
Internet Explorer 7 (Windows)
Internet Explorer 8 Beta 1 (Windows)
Opera 9.26 (Windows)
Safari 3.0.4 Beta (Windows)
Firefox 2 (Mac)
Safari 2.0.4 (Mac)
WebKit r30790 (Mac)

Firefox 2 (Windows)

49ポイント
完成形の面影はあまりないですね。

Firefox 3 Beta 4 (Windows)

59ポイント
Firefox2と10ポイントしか違いませんが、かなりいい表示になりました。

Internet Explorer 5.55 (Windows)

13ポイント
最初の方で止まってしまいました。

Internet Explorer 6 (Windows)

11ポイント
なぜかポイントがIE5.5より低くなってしまいました。

Internet Explorer 7 (Windows)

12ポイント
・・・IE8に期待。

Internet Explorer 8 Beta 1 (Windows)

17ポイント
やったー、最高記録だ！(IEの中では的な意味で)、わーい。

Opera 9.26 (Windows)

46ポイント
Acid2はもちろん通ってるし、早い時期にクリアしそうですね。

Safari 3.0.4 Beta (Windows)

39ポイント
Operaには及びませんでしたが、こちらも今後期待できます。

Firefox 2 (Mac)

50ポイント
なぜかWindows版より１ポイント高かったです。

Safari 2.0.4 (Mac)

?ポイント
ポイントが表示されませんでした。表示されなかったのか、何かの要素に隠れているのか。

WebKit r30790 (Mac)

87ポイント
Safari 2.0.4 (Mac) のポイントが表示されなかったので、最新の WebKit(r30790) で試したところ、本日の最高得点を叩き出しました。
ちなみに、Windows版のWebKit(r30768) も同ポイントでした。

まとめ

もう全ブラウザ WebKit 採用すればいいじゃんって思いますが、そうも行かないのでしょう。
もしクリアするブラウザが出てくるとして、自分の中ではOpera、Safariあたりが一番早い感じがします。
ただ、IE8にも期待ですし、やっぱりFirefoxが大好きなので頑張ってほしいですね。

--
将来的に意味のないことをしてしまったな。

追記１：誤字修正。
追記２：IE8 Beta 1 を追加

Apatna Jaxer を自分のサーバに入れてみる

Wed, 27 Feb 2008 18:07:17 +0900

Apatna Jaxer とは？

サーバサイドJavascriptを実現するアプリケーションサーバ。
Apatna社自身は Ajaxサーバと表現しているようです。
構成としては、Apache と Ajaxサーバを個別に稼動させ mod_jaxer というモジュールで連携させる感じ。

Firefox3と同じエンジンを利用していて、JavaScriptの標準に準拠。
サーバサイドの処理においてもDOM操作が可能で、protptype.jsやjQueryなどもサーバサイドで利用可能です。
さらに、Jaxer Framework というAjaxサーバで使える関数群が用意されていて、ファイル操作やMySQLなどのデータベース接続もJavaScriptで行えます。

とにかく、JavaScriptです。
Perl,Ruby,PHP,Python,etc...なんて使いたくないって人には最適です。

Apatna Jaxer のダウンロード

Download Aptana Jaxer(Aptana Jaxer ダウンロードページ)
Windows版、Mac版、Linux版がそれぞれ用意されてます。

これらのパッケージにはApache2.2もバンドルされていて、本来は事前にApacheを用意しておく必要はない。
しかし、今回は既に構築済みのApacheにJaxerを入れようと思ったので、そのように環境を設定していこうと思います。

自分のサーバはLinuxなのでLinux版をソースディレクトリにダウンロードしておきます。(この時点での最新は Jaxer for Linux build 0.9.3.2156 でした)

Apatna Jaxer の設置

まず、ダウンロードしたファイルを展開します。 unzip Jaxer_package_withApache.zip すると、AptanaJaxer というフォルダにファイルが展開されます。
(もし、バンドルされているApacheを利用する場合はこのAptanaJaxerを '/opt' に配置すれば簡単な設定で、すぐに利用可能です)
次にAptanaJaxerをソースディレクトリから設置箇所に移動します。
私の場合はApacheディレクトリと同じ階層に設置しました。
以後、このディレクトリパスを [APP_PATH] 、Apacheディレクトリパスを [APACHE_PATH]、AptanaJaxerディレクトリパスを [JAXER_PATH]、公開トップディレクトリを [DOCUMENT_ROOT] と記述します。

mod_jaxer.so の設置

'[JAXER_PATH]/jaxer/connectors' の中に mod_jaxer.so というApacheモジュールが入っているので、それをApacheモジュールディレクトリにコピーします。
cp [JAXER_PATH]/jaxer/connectors/mod_jaxer.so [APACHE_PATH]/modules/mod_jaxer.so コピーしたら httpd.conf に、 LoadModule jaxer_module modules/mod_jaxer.so という記述を追加して mod_jaxer.so を読み込む設定にします。

Apache の設定

'[JAXER_PATH]/jaxer/confs' の中に jaxer-linux.httpd.conf というlinux用の設定ファイルがあります。
これを下記のようにコピーします。 cp [JAXER_PATH]/jaxer/confs/jaxer-linux.httpd.conf [APACHE_PATH]/conf/extra/httpd-jaxer.conf
コピーしたら httpd.conf の最後に、 Include conf/extra/httpd-jaxer.conf という記述を追加して、httpd-jaxer.conf をhttpd.confにIncludeします。

httpd-jaxer.conf の修正

httpd-jaxer.conf 内に記述してあるパス等を、自分の環境に書き換えます。
今回は下記のように書き換えました(コメントは削除してあります)。

<Directory "[JAXER_PATH]/jaxer/aptana">
    Order Deny,Allow
    Allow from all
</Directory>
Alias /aptana [JAXER_PATH]/jaxer/aptana

<IfModule jaxer_module>
  JaxerWorker localManagerWorker 127.0.0.1 4327
  <Location "/jaxer-server">
    SetHandler JAXER
  </Location>
  <Directory "[DOCUMENT_ROOT]">
    DirectoryIndex index.php index.php3 index.html index.htm index.html.var index.html.var index.html.redirect
    
    JaxerFilter localManagerWorker .html
    JaxerFilter localManagerWorker .xhtml
    JaxerFilter localManagerWorker .htm
    JaxerFilter localManagerWorker .php

    Order Deny,Allow
    Allow from all
  </Directory>
  <Directory "[JAXER_PATH]/jaxer/aptana">
    JaxerFilter localManagerWorker .html
    JaxerFilter localManagerWorker .xhtml
    JaxerFilter localManagerWorker .htm
    JaxerFilter localManagerWorker .php

    Order Deny,Allow
    Allow from all
  </Directory>

  <LocationMatch "/jaxer-include/">
    JaxerPassThrough
    Order Deny,Allow
    Allow from all
  </LocationMatch>
  
</IfModule>

まぁ、大体こんな感じなんだけど、この設定だと全体に影響を及ぼすので、バーチャルホストを利用して専用のドキュメントルートを設定するなり、Directory指定で部分的に JaxerFilter を適用する設定にしたりする必要がありそう。

なのでドキュメントルート直下に"jaxer"というフォルダを作成して、その中で"JaxerFilter"を設定した。(.htaccessで設定を上書きできれば一番良いのだが、JaxerFilterの上書き許可の指定方法がわからん)

<Directory "[JAXER_PATH]/jaxer/aptana">
    Order Deny,Allow
    Allow from all
</Directory>
Alias /aptana [JAXER_PATH]/jaxer/aptana

<IfModule jaxer_module>
  JaxerWorker localManagerWorker 127.0.0.1 4327
  <Location "/jaxer-server">
    SetHandler JAXER
  </Location>
  <Directory "[DOCUMENT_ROOT]/jaxer">
    DirectoryIndex index.php index.php3 index.html index.htm index.html.var index.html.var index.html.redirect
    
    JaxerFilter localManagerWorker .html
    JaxerFilter localManagerWorker .xhtml
    JaxerFilter localManagerWorker .htm
    JaxerFilter localManagerWorker .php

    Order Deny,Allow
    Allow from all
  </Directory>
  <Directory "[JAXER_PATH]/jaxer/aptana">
    JaxerFilter localManagerWorker .html
    JaxerFilter localManagerWorker .xhtml
    JaxerFilter localManagerWorker .htm
    JaxerFilter localManagerWorker .php

    Order Deny,Allow
    Allow from all
  </Directory>

  <LocationMatch "/jaxer-include/">
    JaxerPassThrough
    Order Deny,Allow
    Allow from all
  </LocationMatch>
  
</IfModule>

Jaxer の起動スクリプトの修正

'[JAXER_PATH]/scripts' の中にJaxerの起動/停止スクリプトが入ってるので環境に合わせて修正する。

[start.sh]

##3行目辺り
export JAXERBASE=/opt/AptanaJaxer
↓
export JAXERBASE=[JAXER_PATH]

##6行目辺りをコメントアウト
sleep 3
$JAXERBASE/scripts/startApache.sh
↓
#sleep 3
#$JAXERBASE/scripts/startApache.sh

[startJaxer.sh]

##76行目辺り
export JAXER_LOGFILE=file://$JAXERBASE/logs/jaxer.log
↓
export JAXER_LOGFILE=$JAXERBASE/logs/jaxer.log

[stop.sh]

##3行目辺り
export JAXERBASE=/opt/AptanaJaxer
↓
export JAXERBASE=[JAXER_PATH]

##6行目辺りをコメントアウト
$JAXERBASE/scripts/stopApache.sh
↓
#$JAXERBASE/scripts/stopApache.sh

Jaxer の起動と停止

Jaxerの起動: [JAXER_PATH]/scripts/start.sh Jaxerの停止: [JAXER_PATH]/scripts/stop.sh 上記のコマンドで、Jaxerの起動と停止が行える。

Jaxerを起動したらApacheの再起動が必要なようなので、忘れずにApacheを再起動させる。

Jaxer の動作確認

Jaxerを起動し、Apacheを再起動したら、 http://[YOURDOMAIN]/aptana にアクセスしてみよう。
こんなページが表示されます

うまくページが表示されましたか？
ページ左側に "Build: 0.9.3.2156" とBuild番号が表示されたらスクリプトも正常に動作していると思います。

サンプルの実行

Jaxer の動作確認がうまくいったら、サンプルページを表示させてみよう。
ドキュメントルート直下に用意した"jaxer"ディレクトリの中に下記を記述した index.html を作成する。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP" xml:lang="ja-JP">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="ja" />
<title>Jaxer Sample</title>
<script runat="server">
  function init(){
    document.getElementById('build').innerHTML = "Build:" + Jaxer.buildNumber;
  }
</script>
</head>
<body onserverload="init()">
<div id="build"></div>
</body>
</html>

準備が出来たら、 http://[YOURDOMAIN]/jaxer/ にアクセスしてみる。

うまく動作すれば"Build:0.9.3.2156"のようにBuild番号が表示されるはず。
→サンプル

表示されたら、ブラウザからソースを表示してみよう。
ちゃんと指示通りにDIVタグの中に文字列が挿入されているのが見てわかると思います。
ただ、htmlヘッダがグチャグチャにされて、xhtmlがValidじゃなくなってるのが残念。

まとめ

勢いで書いたので解りづらい説明になってしまいましたが、実際はほとんどサーバ設定をせずに動作させるようなパッケージになっています。
なので気軽に試せるのは間違いありません。
自分はあまりさわってませんが、サンプルソースとかAPIを見るとちょっとワクワクしますよ。

--
楽しそうなことはたくさんあるんだけど、気力がついていかねぇー。

XRDSを設置して自分のドメインをOpenID(2.0対応)として使う

Thu, 21 Feb 2008 22:03:55 +0900

XRDSって何？

ぶっちゃけ、よく知りません。
OpenID Provider の情報を記述したXML形式のファイルだと思います。

XRDSってどう使うの？

＠ITに記事があるよ。
・・・まぁ、説明はこれで済んでしまうんですが。。。

一応、導入ログ書きます。

XRDSファイルを作る

とりあえず、Yahoo!、はてな、openid.ne.jp の OpenID Provider を記述したXRDSファイルを作る。

<?xml version="1.0" encoding="UTF-8"?>
<xrds:XRDS
  xmlns:xrds="xri://$xrds"
  xmlns:openid="http://openid.net/xmlns/1.0"
  xmlns="xri://$xrd*($v*2.0)">
  <XRD>
    <Service priority="0">
      <Type>http://specs.openid.net/auth/2.0/signon</Type>
      <URI>https://open.login.yahooapis.jp/openid/op/auth</URI>
      <LocalID>##Yahoo!から発行されたOpenID##</LocalID>
    </Service>
    <Service priority="1">
      <Type>http://openid.net/signon/1.0</Type>
      <Type>http://openid.net/signon/1.1</Type>
      <Type>http://openid.net/sreg/1.0</Type>
      <URI>https://www.hatena.ne.jp/openid/server</URI>
      <openid:Delegate>##はてなから発行されたOpenID##</openid:Delegate>
    </Service>
    <Service priority="2">
      <Type>http://openid.net/signon/1.0</Type>
      <Type>http://openid.net/signon/1.1</Type>
      <Type>http://openid.net/sreg/1.0</Type>
      <URI>http://www.openid.ne.jp/user/auth</URI>
      <openid:Delegate>##openid.ne.jpから発行されたOpenID##</openid:Delegate>
    </Service>
  </XRD>
</xrds:XRDS>

こんな感じ。
##～##の部分は自分で取得したOpenIDに置き換えてください。
あと、はてなのXRDSが見つからなかったので、はてなの設定はopenid.ne.jpのをコピった。
一応、priority 順に認証チャレンジするみたい。
でもたまに、ランダムじゃねーか？と思うことはよくある。

XRDSファイルの設置

設置方法は複数考えられます。
XRDSは出力の際 Content-Type: application/xrds+xml をHTTPレスポンスヘッダに付与する必要があるので、

HTTPヘッダーを書きかえれるスクリプト言語を利用して出力
MIMEタイプに application/xrds+xml を登録

とりあえず、このどちらかの対応が必要になると思います。

スクリプト言語を利用して出力するパターン

これはサーバサイドのスクリプト言語であれば、ほとんどの場合いけるはず。
ここでは PHP でのサンプルです。

<?php
header('Content-Type: application/xrds+xml');
echo "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n";
?>
<xrds:XRDS
  xmlns:xrds="xri://$xrds"
  xmlns:openid="http://openid.net/xmlns/1.0"
  xmlns="xri://$xrd*($v*2.0)">
  <XRD>
    <Service priority="0">
      <Type>http://specs.openid.net/auth/2.0/signon</Type>
      <URI>https://open.login.yahooapis.jp/openid/op/auth</URI>
      <LocalID>##Yahoo!から発行されたOpenID##</LocalID>
    </Service>
    <Service priority="1">
      <Type>http://openid.net/signon/1.0</Type>
      <Type>http://openid.net/signon/1.1</Type>
      <Type>http://openid.net/sreg/1.0</Type>
      <URI>https://www.hatena.ne.jp/openid/server</URI>
      <openid:Delegate>##はてなから発行されたOpenID##</openid:Delegate>
    </Service>
    <Service priority="2">
      <Type>http://openid.net/signon/1.0</Type>
      <Type>http://openid.net/signon/1.1</Type>
      <Type>http://openid.net/sreg/1.0</Type>
      <URI>http://www.openid.ne.jp/user/auth</URI>
      <openid:Delegate>##openid.ne.jpから発行されたOpenID##</openid:Delegate>
    </Service>
  </XRD>
</xrds:XRDS>

これを xrds.php とかの名前で保存して、Webの公開領域に設置します。

MIMEタイプを登録するパターン

AddType application/xrds+xml xrds 上記の記述を Apache の設定ファイルに書くか、XRDSを設置するディレクトリまたは、さらに上位の公開ディレクトリに .htaccess を作ってそこに記述する。
この操作は、環境、権限によっては許可されないので、自分の環境を良く確認しましょう。

XRDSファイルは index.xrds などの名前にして公開領域に設置します。
ちなみに、XRDSファイルの拡張子が xrds で正しいかどうかは解りません。＞＜

公開確認

スクリプト版、MIME登録版ともにURLを叩いてアクセスできることを確認します。
環境によると思いますが、ブラウザでアクセスするとXRDSファイルをダウンロードしようとするはずです。

XRDSファイルのURLを通知する

自分のドメイン(例:hoge.com)を使って認証する場合、OpenIDクライアントはドメイン直下のインデックスファイル(例:http://hoge.com/index.html)を見に行きます。
なので、この段階でXRDSファイルのURLをOpenIDクライアントに対して明示すれば、OpenIDクライアントはXRDSファイルを見つけ出し、その中に指定してある OpenID Provider に認証を要求することが可能となります。

XRDSファイルの通知方法としては、

インデックスファイルのHTTPレスポンスヘッダに "x-xrds-location: ##XRDSファイルのURL##" を設定する。
インデックスファイルのページヘッダに meta 要素で指定する。
そもそも、インデックスファイル自体がXRDSファイルだ。

がある。
１番目のやり方は、"スクリプト言語を利用して出力するパターン"でのやり方と同じく、スクリプトでヘッダを出力する。
３番目のは、そもそも中継をしない。まぁ、こんな状況はまず無いと思うけど、mod_rewrite でリクエスト環境ごとに応答ファイルを切り替えるというのがスマートかもしれない。

だが、おそらく最もシンプルな方法は２番目の meta 要素で指定する方法だと思う。
単純にインデックスファイルのHTMLヘッダに下記を追加すればいい。 <meta http-equiv="X-XRDS-Location" content="##XRDSファイルのURL##" /> これだけ。

たとえば、XRDSファイルのURLが http://hoge.com/index.xrds の場合、

<html>
<head>
<title>hoge.com</title>
<meta http-equiv="X-XRDS-Location" content="http://hoge.com/index.xrds" />
</head>
<body>
fuga
</body>
</html>

こんな感じで書けばいい。

OpenID認証を試してみよう

OpenIDクライアントのサンプルを用意しました。
上記の設定がうまく行っていれば、このクライアントで認証に成功するはずです。
ちなみに、「認証に成功しました」の右に表示されるIDが自分のドメインになっていることも確認しましょう。

OpenID 2.0 では、とってもシンプルなURL(あるいはXRI)での認証が可能になっています。
もし自分でドメインを持っていなくても、Yahoo!でOpenIDを取得すれば "yahoo.co.jp" と入力するだけで認証確認することが出来ますよ。
Yahoo! OpenID 持っている人はOpenIDクライアントのサンプルで試してみてください。

まとめ

OpenIDはとっても便利なので、早く広まってほしいなぁ。
Webサービスごとに、会員登録したり、そのIDとPASSを覚えなきゃいけないなんて、面倒だよね。

--
Yahoo!カテゴリに登録されてるOpenID対応サイトのOpenIDクライアントは、半分ぐらいまともに動かない。
・・・どういうこと？