秋元@サイボウズラボ・プログラマー・ブログ

2009年05月15日

Pixel City - 人工の3D夜景を作るチュートリアル&ソース

Pixel Cityは、コンピュータ上で存在しない都市の夜景を、毎回リアルタイムで、ランダムに生成するというプロジェクトで、上記の動画はその作っていく過程と最終的な夜景を収めたもの。

Twenty Sidedというブログで4月から5月にかけて、その手順が詳細に書かれている。

Windows+OpenGLベースで、実際に制作にかけた時間は合計で30時間ということ。以下に各記事を示す。

Part 1: はじめに

Part 2: ビル壁面のテクスチャを作る

Part 3: 新旧デザインのビルを作る

Part 4: 都市計画(街路と大小ビルの配置)

休憩

Part 5: 修正 - 壁面の明かりを調整

Part 6: 空に色をつける

Part 7: 街灯と車のヘッドライト・テールライトをつける

Part 8: 高速化の準備 - ボトルネックを調べる

Part 9: 高速化

Part 10: さらに高速化

Part 11: デモ動画の作成

Part 12: 完成へ - ビルにロゴをつける、街灯の調整、屋上灯やアンテナ塔をつける、スクリーンセーバー化

Part 13: プログラムとソースコードのリリース

Part 14: フィードバックとまとめ

テストの呼びかけ

各ブログ記事には、数十個以上のコメントがついていて、いろんな人が別の技法や改良案、論文の紹介や高速化の提案などをしている。まさに公開しながら学んで成長するという事例にもなっている。

C++(ざっと見た感じでは、better CとしてのC++)のソースコードはこの作者のオリジナルがGoogle Codeで公開されている他、forkしたGithabでも他ユーザの参加で改良が進んでいるらしい。

バイナリは、Windowsのスクリーンセーバー形式のものが公開されていて、ダウンロードして\Windowsフォルダにおき、コントロールパネルの画面からスクリーンセーバーとして登録すると、Windowsマシンで動かすことができる。

最後の記事で呼びかけているように、環境によっては非常に重くなって動かないというバグが出ているようなので、動かしても何も表示されてこないようならプロセスを止めて復旧されたい。僕の場合家のPCでは動いたが会社の方(ちょっと古い)では動かなかった。

投稿者 秋元 : 14:45 | トラックバック

2009年04月29日

Enigma - コンピュータ・サイエンスのパズル30問

インドのBitwise 2009という、アルゴリズムに特化したC/C++のオンラインプログラミングコンテスト、コンテスト自体は終わっているが、そこで企画されたオンラインパズルEnigmaというのが公開されている。

30問の計算機科学に関する用語やトリビアがあり、一問づつ解けたら次の問題が出てくるらしい。らしい、というのは一問目から詰まって先に進めないからだけど…

http://labs.cybozu.co.jp/blog/akky/bitwise-enigma.png">

全部解けるとここに名前が載るらしい。

投稿者 秋元 : 13:32 | コメント (1) | トラックバック

2009年04月20日

グルグル回すグーグルの新CAPTCHA特許

Googleのリサーチブログで紹介されていた、新しいキャプチャ方式の論文[pdf]

こういう画像を、ちゃんと上を向くように直すことで、ユーザが人間であることを確認する、というもの。

なお、Aは人間でもコンピュータでも上がわかるような画像、Cは人間でもコンピュータでも上がわからないような画像、Bが人間だけ簡単に上が判定できる画像、だそうだ。画像にも、上がはっきりしているものと、どちらが上と取れる画像があるので、このキャプチャに向いた画像を選別して使うと書いてある。

3枚ぐらいの判定でよい結果が出たということで、実際に今CAPTCHAがあるようなWebのフォームに適用しようとするとこんなイメージになる。

また、キーを入力するタイプの今主流のキャプチャよりも、キーボードが無くて画面も小さいこういうデバイスで特に有用である、とも言っている。

[追記] ジョェバンニ、じゃなくてamachangが数時間でやってくれました

JavaScript でくるくる CAPTCHA を実装してみる - IT戦記

関連

パズルを使ったCAPTCHA=SLICEYA

子猫認証

猫CAPTCHA

愛を問うCAPTCHA

CAPTCHA絵画

ロシアの人力CAPTCHA破りは日給3ドル?

Codetcha プログラマだけが解けるデバッグを利用したCAPTCHA

CAPTCHA解読ソフトの価格表に見るCAPTCHAのレベル差

英文法CAPTCHA for インターネット

reCAPTCHA - キャプチャを利用した人力高性能OCR

投稿者 秋元 : 11:15 | トラックバック

2009年02月10日

ブログ本文を取り出しやすくするマイクロフォーマットについて(ちょっと)調べてみた

ほんとにちょっとなので期待しすぎないで。

XPathの不便なところ - ぶろぐ。@はてなで、特に意味はないけど(笑)XPathで本文を探しにくいサンプルとしてこのブログが上げられていた(すいませんほんとに)。

そのXPathは、LDRFullFeedで使うことを想定しているということ。見てみたら、WebページのURLから本文を取るためのデータで、そこは参加者が持ち寄って作るデータベースらしい。

LDRがlivedoor Readerだとすると、このブログは全文出してるので本文はそっから取れるのだけれど、このデータはそれに限らずいろいろな本文を取り出すスクリプトで参照されるから、フィードから本文が全部取れるかどうかはまた別の話なのかもしれない。

とにかく、スクリプトに優しくないということなので個別ページのHTMLのソースを見てみた。で、上のページもあわせて読むと、なんとなく不親切な構造なんだろうな、というのは把握した。

で、今の構造はどうしてこうなってるか考えたけど、たぶん最初にMT3をインストールしたときの構造をベースに、弊社のウェブデザイナーにお願いしたんだと思う。もともとMTはこういう構造なんではなかろうか。

microformatsのページで、ブログのマイクロフォーマットはどうあるべきか、というところを読む。

ここでは、Movable TypeやWordPressといったインストール型のブログシステムや、BloggerやLiveJournalなどのブログサービス、CMSや掲示板などの著名なものについて、本文をどう指しているか調べているのだけれど、まとめというか列挙になっていて、各システムでまったく違う構造や(あったとしても)マイクロフォーマットが割り振られているようだ。

ここまで読んで、実際にどう改造すると機械にもやさしいブログになれるのか、ちょっとわからなくなってきた。もしMovable Typeのデフォルトがこれなら、XPathはちょと複雑でも、今のままの形にしておけば「Movable Typeブログ向け汎用SITEINFO」みたいなものがきくのかなあ、などとも思ったり。

MTの構造を残したまま、別のもっとダイレクトな(idを振った)本文のdivを入れるというのが落としどころかもしれない。どうしよう?

参考

ここよりも後でここより前を指定するXPath - 0x廃棄階層 - 統治局

水都大阪のポスターがヤバイ とか(2009/02/09の雑記) - Hinemosu それなのかなあ。でもなんで"center"?

投稿者 秋元 : 14:28 | コメント (2) | トラックバック

2009年01月29日

Twitto: PHP5.3専用最小新フレームワーク

Twittoは、PHPフレームワークsymfonyの中心人物Fabien Potencierさんが(冗談で)作った、新フレームワークだ。

実アプリに決して使わないこと!!!

フレームワークのコードは、twitterの一メッセージに収まるように、140文字以内で書かれている。(twitterでつぶやきたければ改行を取ればいい)

require __DIR__.'/c.php';
if (!is_callable($c = @$_GET['c'] ?: function() { echo 'Woah!'; }))
  throw new Exception('Error');
$c();

サイズ以外の特徴は、デフォルトコントローラのサポート、E_STRICT(PHP5から導入された、より厳しいエラーチェック)に完全対応、存在しないコントローラへのアクセスでちゃんとエラーを出すこと、などだ。

同じフォルダに置いたc.phpにコントローラ関数を定義すれば、パラメータ経由でそのコントローラが呼び出される。

ジョークではあるけど、「PHP5.3専用」とあるだけあって、PHP5.3で新しく入った機能を活用している。

一つは新しい定数 __DIR__ の利用。これは、従来 dirname(__FILE__) と書いていたものを、より簡単に書けるPHP5.3からの機能。

二つ目は新演算子"?:"の利用。これは、この演算子の左右にある二つの式について、空じゃない方を採用するという演算子。上記フレームワーク内では、$cが空だったら右が評価されるのでデフォルトコントローラが呼ばれる。

また、デフォルトコントローラはPHP5.3の無名関数(anonymous function)を使っている。

投稿者 秋元 : 11:40 | トラックバック

2009年01月26日

1972年の絵文字(エモチコン)

Emoticon(エモチコン)、スマイリー(smiley)、絵文字、アスキーアート、いろいろ呼び方はあるけど、コンピュータスクリーン上で文字を使って絵を描くことで感情を表したもの。今ではだれでも、堅苦しくないチャットやメールなんかでは特に、使っているだろう。

":-)"が(横倒しになった)笑った顔を現すというSmileyは、1982年に発生したと言われている。

上の絵文字、イリノイ大学のPLATOという教育用ネットワークシステムでの掲示板で使われていた、おそらく最古のエモチコンだという。時は1972年。

…1972年だよ?

驚きだなあ。そんなに前から掲示板システムというのがあって、その時にはすでに文字で絵を作って遊ぶことも既に始まっていたなんて。

左側にある四角い絵がそれなんだけど、これは当時の文字しか表示できないコンピュータの端末上で、制御文字を使って一文字カーソルを左に戻し、その上に新しい文字を重ねて書くというワザを使うことで、作ったものらしい。

絵文字の右側にある文字列が、その重ね合わせるアルファベットや数字ということ。あくまでもこのフォントで、だけど、右側の文字を全部重ねると、左側のような絵が浮き上がってくる。

投稿者 秋元 : 15:00 | トラックバック

2009年01月16日

パズルを使ったCAPTCHA=SLICEYA

SLICEYA(スライスヤ?)というCAPTCHAの提案をした人が、その実験ページを公開している。

# ソースコードを見てクイズに答えるという変なCAPTCHA、Codetchaと同じ人の作品だ

実験サイトなので、keywordsというパラメータに使う検索ワードをいくつか指定してあげる必要がある。(実際に運用に使うなら、どんなキーワードで突破できるかは知られちゃいけないので、当然ここは隠すところになる)

そうすると、画像検索で持ってきた画像をさらに四分割、場所入れ替えをして、CAPTCHAの問題にしてくれるというわけだ。

このSLICEYA CAPTCHAを突破して人間だと判定してもらうには、マウスでつまんで画像片を正しい配置に戻し、さらに下のボックスに画像を指し示すキーワードを入力しなければならない。

投稿者 秋元 : 12:56 | トラックバック

2009年01月09日

マイクロソフトがQRコード対抗の技術「マイクロソフト・タグ」を公開

どっかで見たようなこの風景。名刺に印刷されている図形が、見慣れたQR Codeとちょっと違う。これは、8日にMicrosoftが発表したMicrosoft Tagという二次元バーコードだ。(Silverlight入れてないと見えない by ID:amachang)

最小の単位が正三角形になっているのと、QRコードなど既存の二次元バーコードが白黒の二色なのに対して4色(と横の白いラインで5色か)を使っているのが違う。解説図によると、

だいたい4分の1のサイズで、同じ情報量(上の図では8ビット)を表すことができるという。QRコード、海外で一部使われているDatamatrix code、そして色つきMicrosoft Tagを比較した図もあった。

FAQによると、ベータの間はこのタグの作成も利用も無料、そのあと二年間も無料、でもその先は決まってない。ということで、まさかとは思うが有料になる可能性も残している。そんなことしたら普及しないだろうなあ、と思うけれど。

さっそく試してみた、けどジェネレータが動かない

Liveアカウントでログインして、いち早く自分のブログのURLのMS-Tagを作ろうとしたのだけれど、エラーになってしまう。しかも一旦エラーになると次回ログインしても最初からエラー画面になってしまうので、あっちが直さない限りコードを生成することができなさそう。

こういうのは自分で作れるからいいんだけどな。

二次元バーコードの普及状況

日本に住んで電車通勤とかしていると、世の中のそこらじゅうにQRコードがあるので、この手の二次元バーコードって世界中にあるのかと思ってしまう。でも、AsiajinとかでQRコードを使った面白いキャンペーンとかを紹介したときの読者の反応を見る限り、アメリカ等ではほとんど普及してないようだ。

iPhoneのQRコードリーダーなどが、普及のきっかけになるかなとも思ったけど、マクロモードがついてないiPhoneのリーダーでは、日本の携帯電話のように快適にはコードが読み込めないらしい。

日本発の規格であるQR Codeもそんなには海外へ出て行ってないし、上でも出てきた競合規格のDatamatrix codeもそんなに話を聞かない。どちらかというと「あまり普及しなかったね」みたいな技術とされているように見える。だからこそ、日本のさまざまなQRコード活用(ビルの壁面の巨大コードとか、電車の中吊りやファッション雑誌の服についたコード)の事例を見て「ほんとに機能している世界があるんだ」と驚くのだと思うけれど。

今回のMicrosoft Tagは、iPhoneやWindows Mobile、Nokiaの携帯電話など向けにリーダーを用意して配っている。推進するにはそれなりに大きな母体ではあるけど、こんどは、大企業同士の駆け引きで規格が乱立してまとまらない可能性もありそうだ。たとえば、Googleはいくつかのサービスで、そこそこQRコードをサポートしている。

日本のQRコードは、色をデザインとして追加したり、誤り訂正の余力を使ってドット絵や文字を入れて遊んだり、という方向ではいろいろとアイデアを出してきたけど、この先Microsoft Tagに普及を阻まれるのか、日本での実績を元にゆっくりでも広まるのか、それとも日本でだけ流行した技術として終わるのか。日本も非接触式のICカードとかがクーポンとかで二次元バーコードの代わりに使われるケースも出てきているので、このTagがどうなるかも全然わからないけど。

via ReadWriteWeb

投稿者 秋元 : 14:22 | トラックバック

2009年01月08日

ボットネット(botnet)の活動を可視化

ウィルス経由でパソコンにプログラムを仕込んで、DoS攻撃やスパムの一斉送信に使うために大量のコンピュータをインターネット越しに組織化したものをボットネットと呼びます。

実際に攻撃者が攻撃の開始を指示するために使うプロトコルは、IRCという昔からあるチャットの仕組みであることが多いといわれていますが、このbotnetが使うIRCのチャンネル群を監視して、ボットネットの活動の活発さを調べたデータがあるということで、それを世界地図上にプロットして可視化した動画がありました。

スクリプトはPython, ログの解析はPyQtライブラリ、IPアドレスから地図上の座標を知るジオコーディングを呼ぶのにMaxmindというパッケージを使って、NASAが配っている世界地図の上にプロットしたということ。地図上に活動をプロットしてアニメーションさせ、それをどうやって見やすく改善したか、というあたりも説明されています。

via Clarified Networks

投稿者 秋元 : 11:34 | トラックバック

2008年10月21日

マイクロソフトのリアルタイム音声検閲特許が成立

ars technicaによると、2004年に申請されていたマイクロソフトの特許がアメリカで成立したという。

その内容はというと、リアルタイムで音声の中から特定の音を見つけ出し、そこを無音化したり、別の音を被せるという技術。つまり「ピー」を自動で入れるソフトウェアである。

# 特定の音を見つける、という技術は、エシュロンとかグレートファイアウォールでやってそうな気もする。まあ当然特許とかには出てこない話だけど。

リアルタイム、ということなので、Fワード等の単語が話し終えられる前に、「ピー」を被せられるということだけど、このへんは、それまで出てきた単語の情報などもあわせて、その話し手が問題のある単語を使いそうかどうか、という確率も加味して閾値を動的に変化させる、というようなことが書いてある。

ars technicaによれば、アメリカの場合、FCC(連邦通信委員会)の規定で、毎日朝6時から夜10時までの間、問題のある表現は「ピー」で置き換えないといけないという法律があるそうだ。そこで、生放送の出演者がうっかり問題のある単語を話さないように、ライブであっても7秒間とかずらした映像・音声を放送し、何かあった場合は監視者が7秒のうちに対策を取るようになっているのだと。

このソフトウェアは、もし額面通り動くなら、そういった生放送が必要な業界や、オンラインゲームの音声チャットでネットワーク越しに相手にひどい言葉を使うユーザへの対策として使われるのではと予想されている。

テキストのウェブでは、だいぶ前から、特定の単語(「死ね」とか)をフィルタする掲示板があったりしたけれど、ネットワークの帯域が広くなって音声がより使われるようになってきたのに合わせて、音声でも同様の技術が必要とされてきたということか。

テキストでも「死ね」→「氏ね」とかの言い換え等で単純フィルタが無意味になったように、音声でも攻撃的な単語の言い換えが増えるかもしれない。

できれば、こういう技術は送信側(テレビ局等)で処理するんじゃなくて、受信側が個別にオンオフできるのが望ましいように思う。誰かが「良くない言葉」を決めて一律に押し付けるのに使われるのではなく、「ピー」を被せるかどうかは受信者が切り替えられて、自分の責任で汚い言葉を聴く自由もある、ということならいいのだけれど。過渡期にはソフトウェアの能力や手間から発信側でのフィルタに使われるのだろう。

投稿者 秋元 : 11:32 | トラックバック

2008年09月29日

jQueryがマイクロソフト及びノキアと提携を発表

人気のあるJavascriptライブラリjQueryが、MicrosoftとNokiaのサポートを受けることが公式ブログでJonh Resigさんから発表された。

マイクロソフトの方はASP.NET開発環境Visual Studioへのバンドルが予定されている。また、jQuery上に画面パーツやウィジェットも開発するそうだ。

ノキアは、世界で一番携帯電話を売ってるわけだけど、その携帯電話でウィジェットを走らせるために搭載されているWebKitベースのWeb Run-Timeに搭載されるということ。Web Run-Timeの開発者はjQueryが常にある前提で携帯電話向けウェブサイトを作れるというわけだ。

Resigさんの説明によれば、両社ともjQueryをそのまま、改変することなく載せるという。

投稿者 秋元 : 10:15 | トラックバック

2008年09月16日

シュレッダーは安全か?

やじうまWatch経由でみつけた、シュレッダーにかけた紙を再現！（気合で）という記事、

# ちなみに、同日のやじうまWatchのもう一つのネタも当ブログで紹介してたりする

記事の要旨は「A4一枚をシュレッダーにかけたものを復元するのに6時間近くかかった、だから復元はできるけどたいへん」ということなのだけれど、たいへんな作業のうち、ちまちまと紙を置いて台紙に貼ったりといった作業は、専用ソフトがあったりする。Unshredderがそれ。

シュレッダーでばらばらになった紙切れをスキャナで取り込んで、Windowsアプリ上で作業ができるというもの。

せっかくのコンピュータなので、切り口の色や形を見て隣になりそうな紙片を見つけてくれたりするといいのだけれど、そこまでいいものではなかった。

イスラエルの企業Safe Guard社の製品で、月額90ドルの購読か950ドルからの買い切り。15日間の無料試用版もあるので使ってみたが、まあこれでもたいへんだろうな、とは思った。

売り文句では、犯罪捜査の証拠集めに最適、みたいな事が書いてあるが、むしろまず犯罪に使われそうな気もしないでもない。

ま、とにかく、シュレッダーも万能ではない、というのは覚えておいてもいいかもしれない。特に価値の高い情報はシュレッダー以上の措置で廃棄するとか。

投稿者 秋元 : 14:27 | コメント (1) | トラックバック

2008年09月03日

Google Chromeに最初の脆弱性発見

早いなあ。

ZDNetによると、Google Chrome公開から数時間のうちに、警告無しにユーザにJavaアプリケーションを実施させる脆弱性を見つけた人がいたようだ。

ブラウザウィンドウの最下部にダウンロードされたjarファイル(Javaアプリケーション)が任意の文字(jarファイルのファイル名)で表示され、そこをクリックするとJavaアプリケーションが実行される。デモも用意されていて、デモではノートパッド風のアプリケーションが起動するが(Jarファイルは警告無くダウンロードされてしまうので注意のこと)、これをユーザが誤認するようなウィンドウとして開けば、そこからまずい操作をさせてしまえる、というもの。

まあ、Chromeのダウンロード結果表示がどんなインタフェースなのか慣れてない今だからこそ引っ掛けられるのかもしれないけど。

同じエンジンを使っているAppleのSafariブラウザでは既に修正済らしい。

[追記]

具体的にどうするか、だけど、修正前のChromeを使っている人は、画面最下部に上の画像のようなダウンロードボックスが出てきて、そのボタンに何かクリックを促すメッセージが書いてあったとしても、自分で意識してファイルをダウンロードした記憶が無ければ、押さないこと、かなあ。(違ってたら教えてください)

# 使わずに様子を見る、でもいいけど

早速Googleによるアップグレードがされそうな情勢なので、Chromeの新バージョンはどう通知されて、どう更新されるのかもすぐに見られるのではないだろうか。

Safariより古いWebKitを使ってるという話はdrikinさんのところでも出てる。

via ReadWriteWeb

投稿者 秋元 : 15:47 | トラックバック

2008年08月27日

PHPのエラーメッセージをtwitterに投げるPHP Extention

あんまりつぶやきたいことも無いのだけれど、PHPにはあるかも… - Johannes Schlüterということで、Johannes Schlüterさんが、PHPのエラー情報をフックしてtwitterに投げるという面白いPHP拡張を公開されている。

「ピザを食べるだの食べてるだの食べただの書いてる人はよくわからないけど、エラーメッセージが出たとかエラーを直したとか書いてる人もいるから、興味のある人はいるんだろう。だったら、エラーメッセージを直接PHPに吐かせればいいんじゃね?」ということらしい。

PHP拡張といっても、スクリプト側にデータを戻したりするものではないので、ソースは単純で短い。PHPのエラー処理を横取りするところや、php.iniで設定されたパスワードを読むところ、twitter.comにPOSTするところなどは参考になる。twitterにしてもdirect messageで送るとか、twitter以外のIRCやSMSで送るとか、実用的な改造もありかと。

また、流量制限とかまったくしてないので、大量にエラーが出たらtwitterからユーザ削除されるかもしれない。

自分の書いたスクリプトのエラーがtwitterに流れてると思ったら緊張するだろうなあ。

投稿者 秋元 : 13:59 | トラックバック

2008年08月13日

Yahoo APIのドメイン変更。マッシュアップ作成者は点検を

Yahoo!検索、Yahoo!カテゴリのWebAPIドメイン変更のお知らせ - Yahoo!検索 スタッフブログ

まだ旧ドメイン(一般ユーザがログインするときと同じドメイン yahoo.co.jp)でもアクセスは続けられるということだけれど、そのうち新ドメインだけになると思われるので、YahooのAPIを使っているウェブアプリは順次見直して新URLに置き換えておいたほうが良さそう。

投稿者 秋元 : 13:03 | トラックバック

2008年08月08日

PHP4終了。PHP5.2系以降へ

2007/12/31にサポート終了となっていたPHP4.4系が、本日2008/08/08をもって完全に終了となった。今日から後は、基本的(*1)にPHP4を使うべきではないだろう。新規開発はもちろんPHP5.2以上ではじめるべし。

「残っていた大きな問題に対処した」PHP4.4.9が本日リリースされている。どうしてもPHP5.2.xに移行できないPHP4のサーバがある場合は、せめてこちらへの入れ替えは行なうべき。

'*1) この先PHP4系は処理系に変化が無くなるので、PHP処理系のソースコードに自分で手を入れられるようなヘビーユーザーでない限り

投稿者 秋元 : 14:40 | トラックバック

2008年08月06日

feedburnerの購読者数を好きなだけ増やすハック

バックエンドの集計なんてそんなもんだよね、という話がまた一つ。

RSS/Atomフィードを中継して集計・広告・ブログパーツ(ウィジェット)などの付加サービスを提供する無料サービスFeedburner、特に英語圏で多くのサイトやブログから利用されている。(日本でもサービスはやっている)。Googleに買われたことでも有名だ。

様々なRSSリーダーでフィードを読んでいる人の数を合計して教えてくれるので、ブログを見に来た人のページビューはわかるけど、フィードで読んでいる人数も知りたい、といった需要にうまく答えている。

フィードの購読者数を読者に見せるためのウィジェットも提供されている。たとえばこんな表示。

上記のは個人でやってる英語ブログAsiajinの購読者数。最近ついに2000人を越えた。インチキはしてないよ(笑)

TechCrunchやReadWriteWeb, Mashableなどの大手ブログになると、この購読者数が800K(K=1000)、つまり80万人とかになって、そんなにたくさん読んでるのか、と驚かされることも多い。

「そんなに大勢が読んでるなら、いいブログなのかもしれないな」と読み始める人も多いだろうから、この数字は重要だろう。

今日の話は、そのfeedburnerの購読者数のカウントを騙す方法。

feedburnerは有力なRSSリーダーから、そのフィードを読んでいる人の数を訊いて(これはほとんどのWeb型RSSリーダーで可能)、それを合計している。つまり、どこかのRSSリーダーで自分のブログの購読を多数行なえば、合計の数字も書き換えられるということ。これが解説のビデオ。

Feedburner hacked! from Boris Veldhuijzen van Zanten on Vimeo.

47人しか購読していないあるブログに対して、実験を行い、一晩で購読者バッヂを2500人にしている。

ここで使われているのはNetvibes。2500行のRSSフィードURLを持つOPML(RSSのリストファイル)をテキストエディタで作成し、Netvibesで一気にインポートしている。これだけ。

あとは、Netvibesが2500人増えた購読者数を、feedburnerのクローラーに教えてくれるので、次回は+2500された購読者数が表示される。

投稿者 秋元 : 11:39 | トラックバック

2008年06月26日

ペーパープロトタイピング事例集

実際に動的なウェブサイトを作ってしまう前に、紙上でデザインや部品の配置、画面遷移などを確認するペーパープロトタイピングという設計技法があります。書籍もありますね。

ペーパープロトタイピング 最適なユーザインタフェースを効率よくデザインする

そのペーパープロトタイピングの事例を集めたページというのがありました。たとえば次のこれは、2000年5月31日にスケッチされたtwitterのプロトタイプです。当時はstat.usという仮名で、これによるとtwitterはLiveJounal(ブログサービス)とAIM(インスタントメッセンジャー)から最初の着想を得てから実装まで5年以上の間があったことになりますね。

FlickrのPlacesページやVimeoなどのペーパープロトタイプの写真も紹介されています。

こちらは韓国のポータルサイトDaumのAjaxウェブメール開発時に行なわれた、ペーパープロトタイプ開発の様子を撮影したものだそうです。

via ValleyWag

投稿者 秋元 : 10:34 | コメント (4) | トラックバック

2008年06月23日

ユニバーサル・エディット・ボタン続報

土曜日にご紹介したUniversal Edit Buttonの話、自分のサイトならべて/Narabeに適用したあと、提唱者の一人Mark Dilleyさんとやりとりをしてるうちに、「トップページを日本語にしたいな。訳してくれる?」という話になった。

あっという間にリンクが作られて、Wikiだからあとはよろしく、ということでトップページの解説を日本語にした。

さすがWikiの力、というところか。

そして今日、なにげなくはてなブックマークを見てると、アドレスバーに緑の鉛筆アイコンが。

あれ? と思って押してみると、ちゃんと編集ページに遷移した。はてなブックマークがいつのまにかUEB対応していた。

そしてWikiの方の一覧をもう一度チェックすると、そこにはニコニコ大百科が。

ニコニコの人たちはこういうの素早いねえ。サービスはまだ日本と台湾だけだけど、それは設備的な制限で、技術の取り込みとか海外への紹介とかほんとに早い。

対応するのはheadに案内を一行書くだけなので、ユーザ編集ができるサービスをやってる方(で、ヘッダの一行もパフォーマンス劣化させたくない、とか言わない人)はぜひ対応してみてはどうだろう。

投稿者 秋元 : 14:16 | トラックバック

各ソート技法をアニメーションで表示するAnimated Sorting Algorithm Demo

ソートアルゴリズムのアニメーションデモでは、様々なソート手法(挿入、選択、バブル、シェル、マージ、ヒープ、クイック、三分割クイック)について、ソート対象のデータが完全ランダムの場合、ほぼソートされている状態、逆順にソートされている場合、同じ値のものが多数ある場合のデータをソートする様子を、Javascriptを使ったアニメーションで見せてくれる。

それぞれのソートアルゴリズムがどのようなものか見せるというだけでなく、ソートのアルゴリズムに「常にこれが最適」というものはない、というのを示すのも目的、ということだ。

各アルゴリズムのリンクからは、そのアルゴリズムのコード、特徴や計算量が解説されたページに飛ぶ。

このようなソートアルゴリズムの可視化というテーマ、Javaベースではこういうのやこういうの、こういうのも過去にあった。

via del.icio.us/popular

投稿者 秋元 : 13:43 | トラックバック

2008年06月21日

Universal Edit Button - 「編集可能なウェブ」実現のための新規格

Universal Edit Button(略称 UEB)は、Wikiなどの「ユーザが編集に参加できるウェブサイト/ページ」を普及させようという新しい活動だ。

フィードのアイコン
が「ウェブサイトの新着通知を受け取れるマーク」として普及し、FirefoxやInternet Explorerでも採用されて広まったのと同様に、「編集できるページを示すマーク」を作り、個々のユーザがもっとウェブを編集する世界を実現しようということだ。

公募で集められた様々なアイコン候補の一部はこのようなもので、

そこからグリーンと鉛筆のアイコンがこの活動のアイコンとして選ばれている。

Wikipediaをはじめとして多数のサイトが賛同

Wikipedia, Wikihow, クリエイティブコモンズのWikiページなど、Wiki関連の主要なサイトが既に賛同し、このUniversal Edit Buttonに対応している。

UEBのサイトに対応済のWikiサイトやWikiプログラム、ユーザ編集サービスが多数列挙されていて、これは今も増殖している。

僕がやっているならべて/Narabeも、日本発のサイトとしては初めてこの規格に対応し、一覧に載っている。Other Platformsのところ。

編集可能なページにUniversal Editing Buttonを出すFirefoxアドオン

Firefoxの拡張機能が配布されている。これをインストールした状態で活動に参加しているページに行くと、ブラウザのアドレスバーにUEBアイコンが表示される。

アイコンを押すと、そのページの編集ページに連れて行ってくれるというわけだ。

via ReadWriteWeb

投稿者 秋元 : 14:14 | トラックバック

2008年06月16日

The Happy Web Weekendに行ってきた

マイクロフォーマットなどのHTML/XMLのマークアップ仕様を中心とした一日セミナーThe Happy Web Weekendに行ってきた。

神崎正英氏による、ソーシャルメディアとマイクロブログ

The Web KANZAKIでRDFなどの解説を長くされている神崎さんによる、ソーシャルメディアで提供されているAPIと標準的なAPIの間の変換や、それらを運用して関連付けを行なうための問い合わせ言語などの解説。プレゼン資料が公開されている。

FOAFは知ってたけどSIOCは知らなかった。ショック!

あと、Geohashは、Geohashingとしてここでネタ的に紹介してたけど、org取って真面目な利用もやってるんだということを知った。

John Allsopp氏による、microformats紹介

マイクロフォーマットの現況と、最新の利用シーンの紹介。XFN, hCard, hCalendarなど主要なmicroformatsと、それを活用しているサイトの紹介。

たとえば、XFNによる人間関係の埋め込み。WordPressではデフォルトで埋め込み機能が提供されているし、他のブログシステムでもプラグインがある。XFN+CSSによる、XFN情報に基づいた表示形式の変更(友人へのリンクに特別なデザインを当てるなど)

Yahoo! SearchMonkeyでは、マイクロフォーマット化されたコンテンツをインデックスし、要求したフォーマットで返してくれる。SearchMonkeyは実を言うとよく見てなかったけど、これはちゃんと追った方がいいな、と感じた。全般的にAllsopp氏はGoogleがなんでも(先端的とかオープンとか)一番なわけじゃない、みたいな感覚でいるみたいだな、とも感じた。

マイケル・スミス氏によるHTML5概観

前にどこかでお会いして類似のプレゼンを聞いた気がする。慶應SFCのW3CでHTML5の仕様策定などをしている人。HTML5の「現状のブラウザの動作を追認する」性格や、新しい面白い仕様と各ブラウザの対応状況、モバイルブラウザの現状、などが語られた。

John Allsopp氏による、ウェブを見る環境の多様化

様々なデバイスでウェブを閲覧できるようになったという話と、その多様なデバイスに対してウェブサイト/ウェブアプリケーションを提供するときの考え方、というテーマでの話。

最後に、web directions south(シドニー)、 north(バンクーバー)に続いて web directions east(東京)の開催が予告された。11月開催らしい。今回のお三方の話が面白かったので、より大規模に行なわれるこのイベントも面白そうだ。

投稿者 秋元 : 15:09 | トラックバック

2008年06月06日

fav.or.it創業者による「もしtwitterを作り直すなら」

コメントつきソーシャルRSSリーダーfav.or.itの創業者Nick Halsteadさんが、自分がtwitterのスケーラビリティを直すならこうする、というエントリを書いている。

twitterは今日も「データベースがロストした」とかで落ちていて、不安定さに対する不満の声をそれこそ毎日のように見かけるようになっている。

技術的な興味から、訳しながら読んでみたのだけれど、ほんとうにこれですべてた解決するのか、については僕はわかっていない。わからないものを出すのもどうかと思い数日放置してたんだけど、もっと手の長い人に読んでもらうのも意味はあるかなと思い直し、以下に公開する。

「fav.or.itはこれよりもっと複雑だ」と言ってるけれどfav.or.itはtwitterほどユーザいないし(笑)。

---

前段では有名ブロガーのRobert Scobleさんが、技術的な理解無しにtwitterをMS Exchangeになぞらえたり、改善提案したりしていることに対して「黙れ」と書いている。

Nickさんの設計の基本はShard(シャード)にある。システム中のどのポイントを取ってもスケールするように、台数を増やせば対応できるようにしておけば、スケーラビリティの問題はなくなる、と。

キュー Shard

ユーザIDからハッシュで求まるShardにメッセージキューを持たせる。追加速度が重要なのでオンメモリに置く。

重要な点は、このサーバが日付とつぶやきのidの関係だけを扱うこと。

友達 Shard

ユーザの友人を保持するShard。キューShardより一台あたりより多くのユーザを持てるはず。あるユーザの新着メッセージを受け取ったら、友達リストを返す。

ハッシュを使って、それぞれの友達が存在するキューShardのリストを得る。

これで、たとえScobleさんのように25,000人の友人が居たとても、各キューShardは1000以上のinsertを扱うことはなくなる。

Joiner Shard

新着の(20個とかの)つぶやきを取得するときは、つぶやきのidのリストをキューから取得するだけなので、実際のつぶやきはつぶやきShardから引き出さないといけない。このJoinするShardはたぶんmemcacheを使うことになるだろう(つぶやきShardへのアクセスを減らすため)

もう一つのポイント。キューShardはインメモリなので、正規化を崩されて非効率な形式で格納されている。ディスクに保存しようとしたら重大なオーバヘッドがかかるだろう。JoinするShardはキューShardから一部分だけを取得することでこれに対処し、そのあと正規化されたDBから残りを取得するようにする。

つぶやき Shard

あたらしいつぶやきはつぶやきShardに格納される。ハッシュをつかってこれを複数サーバに広める。古くなったつぶやきは、取り出し速度よりも保存に適した大きなストレージに移動させるようなアルゴリズムを使う。

ウェブ Shard

ここは簡単だ。上記のShardsで複雑なデータベースが動く仕組みはできあがっているので、ウェブShardは実際のAPI/HTTPなどのリクエストの処理をして、リクエストを関連するShardに受け渡せばいい。

特定の(一番よく呼ばれる二つの)処理でどのShardがどう呼ばれるかをいかに説明する。

つぶやく

1. ウェブShardはリクエストを受け、つぶやきShardにメッセージを送り保存させ、そのメッセージに対応するつぶやきIDを受け取る。次に、このメッセージの送り主の友人が格納されている友達Shardを探す。
   1. つぶやきShardはメッセージを受け取り、保存し、新しいIDを発行して返す
2. 友達Shardは、メッセージを受け取る。ユーザのすべての友達のキューが存在するキューShardにシグナルを送る
3. キューShardは自分の担当内の友達リストを受け取り、メッセージIDをそれらのキューに挿入する
4. 正規化されたキューShard、長期保存用の長期アーカイブ(そのかわり取り出しは遅い)に保存する

つぶやきの一覧を作る

1. ウェブShardはリクエストを受け取る。Joiner Shardにユーザのストリームを作るようにリクエストを送る
2. Joiner Shardはデータを探すべきキューShardのリストをルックアップする。そしてつぶやきShardから実際のつぶやきを取得する。両方をまとめてウェブShardに返す
3. つぶやきShardはリクエストされたつぶやきリストを返す

キューShardやつぶやきShardからデータが取れないときは、上記はもっと複雑になる。その場合には、長期保存用アーカイブにデータを見に行くことになる。

結論

これは複雑に見えるが、まあ複雑だ。しかしスケールするアプリケーションを作るという観点からすればかなり単純ともいえる(fav.or.itにはもっと複雑なところが多数ある)。twitterの人々は再設計が許されず徐々に動かしたまま改善しないといけないのでたいへんだろう。幸運を祈る。ところで-よかったら http://www.twitter.com/nickhalstead にフォローするといいかもよ。

---

[追記 2008.06.09] きたきた。期待してます。

投稿者 秋元 : 18:07 | トラックバック

2008年06月03日

ビデオに映る人の顔を判定して隠すプライバシー対策技術のデモ映像

写真イメージから人間の顔を判定して隠してくれる笑い男画像自動作成ジェネレーター、というのが前にあった(今探してみたら最初に話題になったサービスはサイトごと無くなっていた)。

このビデオで紹介されているのは、それの動画版と言っていい。手配中の顔の場合はそのまま録画して、一般人の顔はぼかして録画するという。

監視カメラに映った車やそのナンバー、人物を特定するソフトウェアを作っている3VRが、同じ技術を使って映った人のプライバシーに配慮するシステムをデモしている、ということだ。

加工された顔は、鍵を使うことで元の状態に戻せるが、戻して表示することを一定のルールや令状を必要とすることによって、一般市民のプライバシー保持が向上することを期待しているという。

via Wired via Digg

[関連]

笑い男摸倣ツール Catcher in the Rye 動画の顔を隠すだけだとこれでもできているよう

「笑い男模倣ツール」の模倣ツール

投稿者 秋元 : 23:53 | トラックバック

Safariでページを反転させるブックマークレット

Ajaxianに出てた。Safariブラウザだけの機能。

-webkit-transform に 'rotate(180deg)' を与えると、180度回転したページが表示される。

javascript:document.body.style['-webkit-transform']='rotate(180deg)';

リンク先に、ブックマークレットが置いてある。flip2は確認を挟んで180度回転。

180deg, ってことは任意の角度でもいけるのかな、と20degを入れたら、こうなった

貼り付けたビデオプレイヤーは元の角度のままだったり、範囲選択がなんかカクカクしたりと新鮮で面白い。斜めにすると横幅が広くなるけど、横スクロールバーはでないなあ。

これ少しずつ値を変えたら、ページがぐるぐる廻せそうだね。

投稿者 秋元 : 13:48 | トラックバック

2008年05月09日

inputEx - HTML Form作成Javascriptライブラリ

inputExは、クライアント側だけでバリデーションや入力補助つきのフォームを作成できるJavascriptライブラリだ。MITライセンスで、Yahoo UI libraryのバージョン2.5.1をベースにしている。

サンプルのページからデモを開くとわかるけれど、

JSON形式の短い記述のみで、きちんとしたフォームが使える。一般的なフォーム、URLやメールアドレス、IPアドレスなど特定のフォーマットに従ったフォーム、グループの制約を持つフォームやカラーピッカー、WISYWIGエディタまで、様々なフォームのための部品が提供されている。

ドキュメントもきちんとしているし、GUIでこのJSONデータを作成するためのフォームビルダも提供されているので、使うための敷居は低いだろう。

サーバ側でフォームを書かないため、このライブラリで作ったフォームは、Javascriptがオフになっていると動かなくなる。使いどころとしては、検索エンジンやスクリプトからフォームを辿りにくくするとか、All Javascriptであることからクライアント側のJavascriptだけで動くようなアプリケーション(サンプルのGTDツール)とかになるだろうか。

via del.icio.us/popular

投稿者 秋元 : 14:59 | トラックバック

2008年04月28日

20行のJavascript+canvasでここまでできる

# Internet Explorer不可

OZONE Asylumというフォーラムで出された今月のお題「20行のJavascriptでできるだけ多くのエフェクトを同じスクリーンに出す」に対して出てきたすごい答がこれ。

ソースを見ると、たしかに有効な行は20行しかない。

Opera9.5とFirefox3(どっちもまだベータ)で作者の意図どおり動くとのこと。Firefox2やOpera9でも動き自体は見えるが、Firefox2では光る効果が見えなかったり。

via del.icio.us/popular

投稿者 秋元 : 10:57 | トラックバック

2008年04月22日

Pure Javascript動画プレイヤー

うーん。無駄にすごい

JSONVidというJSONで動画データを表記する形式を自作し、Flashを使わずにJavascriptだけで動画を再生するプレイヤーを書いた人が現れた。Jacob Seidelinさん。

デモ1, デモ2

一時停止機能もある。Flashレスなので音はない。

読み込みにかなり時間がかかるし、非力なPCだと見るのに耐えないけど、それでもよく動いてる。

Jacobさんは他にアニメーションGIFも検討したようだ。ちょうどさっきYouTubeをアニメーションGIFに変換するサービスを個人ブログの方で紹介したけど、そういう作りもあるだろう。というかPure Javascriptでごりごりと描画するよりはまだアリな気がする。

via Ajaxian

投稿者 秋元 : 12:24 | トラックバック

2008年04月21日

lightboxライブラリ37個の比較表

写真などをページ上で強調表示する、いわゆるlightbox効果を実現するJavascript+CSSライブラリを37個も集めて、ライブラリサイズやそれぞれの機能、どのJavascriptライブラリを使っているかなどで絞り込めるようにした比較表が発表されている。

このようなUI系のライブラリを使う際には、自分が普段使っているベースライブラリとの親和性などが重要だと思うので、このような形でまとまっているとdel.icio.usで"lightbox"タグで絞り込む、といった調べ方よりも楽にライブラリが選べていい。

via del.icio.us/popular

投稿者 秋元 : 11:14 | トラックバック

2008年04月16日

バイナリ読み込みAjaxライブラリBinFileReader

サーバ側に置いたバイナリファイルをJavascriptからアクセスして、バイナリ列の任意の場所を好きなバイト数だけ読み込むライブラリがこのBinFileReaderらしい。

BinFileReaderのデモでは、表示したbmp画像の中から、画像のサイズ情報などの部分をJavascript経由で問い合わせることで遅延取得し、表示している。

また、このライブラリと多数の画像を使って、クリックした画像を他の画像のパッチワークで構成するというモザイクビルダーという面白いデモも公開されている。

# 画像の読み込みで一番最初は時間がかかる

モノクロbmp画像を多数用意して、MosaicBuilderのパラメータに指定すれば、自分の画像を使ってこのモザイクデモを設置することもできるそうだ。(解説)

BinFileReaderは、FirefoxとSafari対応に加えて、IE対応のためにはVBScriptを使うことでクロスブラウザ対応をしている。

このBinary Ajaxライブラリ、リモートにある画像や動画ファイルの形式情報なんかを取り出すのに使えるのかなあ。

via Ajaxian

投稿者 秋元 : 00:07 | トラックバック

2008年04月15日

AppDrop - Google App EngineをAmazon EC2に移植

Google App Engineに対する「Googleに囲い込まれてしまうのでは」という意見に対するコードを書く人からの返答がさっそく出ている。AppDropは、Google App Engine SDKをAmazon EC2上に移植したPython実行環境だ。

これを使えば、GoogleのAppSpotで動くPythonのWebアプリを、そのままAmazon EC2上で動かすことができる。

開発環境が手元のLinuxボックス等で動くのだから、ホスティングで動くのも当たり前といえば当たり前。とはいっても、背後にGoogleのBigTableなどがあるわけではないので、このまま使ってもスケールはしない。このあたりは、まあ他のスケールするバックエンドシステムを互換インタフェースで包むとか、そういうことをやる人が出てくる気がする。

# Googleが作った分のソースのライセンスってどうなってるのかな

突貫工事で4日で作られた(改造された)ようなので、メールが使えないとかホスティング上でのセキュリティについてチェックされてないとか利用には注意が必要。

via Waxy

投稿者 秋元 : 11:15 | トラックバック

2008年04月07日

キーストロークダイナミックス

IBM DeveloperWorksで、GNOMEを改造してキーストローク・ダイナミックス認証を行う話が出ていた。

nathanというパスワードを使う人の毎回のキーのリリース時間を調べると、同じ順番の同じキーはだいたい似た時間でリリースしている。

パスワードを打ってる途中で手が止まった場合は、大きく違った時間が出るけど、それは統計時に外すことができる。ということで、単純に打った文字列の合致だけを見るのではなくて、キーをどのように打つかという癖まで活用して本人かどうかの判定に使う、ということだ。

タイミングが違ったからといって直ちにログイン不可にすることはできないと思うが、あまりに異なるタイミングでタイプされたときには別チャネルで警告を発するとか、そういう感じなのかも。

via Slashdot

投稿者 秋元 : 17:30 | トラックバック

2008年03月30日

txt2re 文章から対話的に正規表現を作れる支援サービス

一週間のうちにいくつも正規表現のツールが話題になるのは、正規表現で悩むプログラマが多いということだろう。また面白いサービスが出てきた。

txt2reは、テキストボックスに入れたテキストを分解し、そこからどんな正規表現が作りたいのかを推測して提案してくれるというサービス。

サンプルで入っているテキストでは、日付(の英語表現)のあとに引用文で英文、という入力。

入れたものが要素ごとに分解された上で、まとまった部分が「文字列」なのか「月」なのか「アメリカの州」なのか、といった推測がされて、選択肢としてリンク表示される。

「ここは月のつもりだった」ということでMonthをリンクすると、その部分の正規表現が確定する。

作った正規表現だけ出してくれても役に立つと思うけれど、このサービスではさらに、Perl, PHP, Python, Java, Javascript, ColdFusion, C, C++, Ruby, VB, VBScript, J#.net, C#.net, C++.net, VB.netのソースコードとしても出力してくれる。

月(の英語表現)を選んだときなど、できる正規表現では月の省略形とフルネーム(JulyとJulとか)のどちらにも対応するように書かれていたりと、がんばって生成している。

生成したコードなので、多少甘いところもあるとは思うけれど、それを基にしてチューニングしていけばいいだろう。自分がよく知らない言語で正規表現を扱うことになったときにも、とっかかりとして参考になると思った。

投稿者 秋元 : 10:38 | トラックバック

2008年03月28日

Amazon EC2の新機能ゾーン指定は日本でのサービスの準備となるか?

Amazon Web Serviceのアナウンスで、Elastic Computer Cloud(EC2)の新機能が二つ出てきた。

一つはアカウントに紐づいた固定IPアドレスの提供。これまでインスタンスを再起動するとIPアドレスが変わってしまうため、一般のホスティングに比べると面倒だったけどこの点が解消された。

もう一つはZone(ゾーン)の指定ができるようになったこと。インスタンスを置くEC2サーバのグループ指定ができるようになったため、この前の大規模ダウンのようにAmazon EC2サーバのどこか一箇所が落ちるようなことがあっても、他のゾーンに分散させて配置したインスタンスでサービスの継続提供が可能となる。もちろんそういう風に設計したらの話だけど。Rightscaleブログではさっそく、そのへんを図入りで紹介している。

新しいEC2 API コマンドラインツール(バージョン1.3)を使うと、新コマンドec2-describe-availability-zonesで自分のアカウントが使えるゾーンが見えるようになる。ちょっとした期待を持って自分のアカウントで実行してみたのだけれど、結果はマニュアルと同じでus-east(米国東)が3つ出てきただけだった。

C:\work>ec2-describe-availability-zones
AVAILABILITYZONE        us-east-1a      available
AVAILABILITYZONE        us-east-1b      available
AVAILABILITYZONE        us-east-1c      available

開発者フォーラムでも他の地域が出てきたという報告はないので、ヨーロッパにも日本にも現時点ではサーバは増えていないようだ。まあ、増えていたらPR的にはそれをアナウンスするはずだし。

ただ、この仕組みが提供されたことは(アベイラビリティ向上の話もあるけれど)、将来の欧州やアジアでのローカルサーバに向けた準備という風に見てもいいかもしれない。EC2もアメリカ国内で使ってみたら快適に速かったという話も聞くので、ぜひ日本にもサーバ置いてほしいものだ。

投稿者 秋元 : 11:26 | トラックバック

2008年03月27日

RegExr Flashによる正規表現チェックFlashツール

先に紹介したVisual REGEXPの関係で「こんなのものあるよ」と出てきたのか、Flashでできている正規表現チェッカがdel.icio.us/popularにあがっていた。

RegExr

こちらのは、マッチしているところを青く囲んでくれるだけで、正規表現のどの部分がどこに対応してるかまでは示してくれない。が、入力のしやすさはこちらのほうがいいかもしれない。右側に簡易的な正規表現のマニュアルもついている。

via del.icio.us/popular

投稿者 秋元 : 10:29 | トラックバック

2008年03月25日

テレパシーのように無言で電話に応答できる技術のデモ

NewscientistTechの記事で、ネックバンドで神経信号を拾うことで「しゃべらずにしゃべる」技術の紹介とデモ動画が載っていた。

さすがに使うための訓練は必要らしいが、声を出さなくてもしゃべっているように首を動かす(?)ことで、信号が伝達され、それを基にして音声合成するということ。

口まわりを動かさないと神経は動かないそうで、頭の中で考えたことが勝手に話されたりはしないらしい。タイトルに「テレパシーのように」と入れてしまったが、そういう意味では腹話術を機械化したようなものか。

今は首を動かしてから発話まで時間がかかり、認識できる語彙やフレーズも150程度だということだけれど、そのあたりは改善されていくそう。病気で声が出せない人への適用も検討されているということだ。

僕は、日本の携帯電話でブラウザやメールが普及し、米国では音声による自動応答が普及しているのは、電車などの公共機関で電話で話せないという日本の特殊事情によるものが大きいと思っていたけれど、この技術が実用化されたらそういう違いも減る⇒日本でも音声でのアプリケーションが重要になりうるのではと思った。

via Digg

投稿者 秋元 : 14:07 | トラックバック

Visual REGEXP 正規表現のマッチング確認ができるクライアントツール

Visual REGEXPは、上の段に正規表現を入れて、下の段にいろいろな文字列を入れると、文字列のどの部分が正規表現のどの部分にマッチしているのか、というのを色づけして示してくれるツール。

Tcl/Tk製で、Windows向けのexeパッケージも配布されている。Windows版でためしてみた。

書いた正規表現をいろいろなサンプルで確認する際に楽でいいかもしれない。

ネットがつながっていれば、Rex Vとかでもいいような気はするけど、クライアントツールなのでネットがつながらないところでも使えるのはいいかもしれない。

ただ、文字列群から逆に正規表現案を生成する機能がエラーで動かなかったり、正規表現を書くボックスで外から中へのコピペができなかったり、あまりUIが使いやすくない。このへんは今後に期待か。

via del.icio.us/popular

投稿者 秋元 : 13:29 | トラックバック

2008年03月24日

960 Grid System 固定幅ベースのWebデザイン手法

フレームワークというのは制約を設けることで生成物の最低レベルを上げる効果だとも思うけれど、960 Grid Systemが提唱したのは幅960pxを等間隔で分割することで、方眼紙上でデザインするようにサイトをデザインする手法。

960という数字は、2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480で割ることができるということとユーザのブラウザ環境として幅1024px以上は期待できるということから決まった数だという。

幅何本分、というスタイルが提供されているので、それを指定していくだけで、昔のテーブルレイアウトに似た配置ができるということだ。

これがいいことなのかどうかは、ちょっとわからないなあ。

via del.icio.us/popular

投稿者 秋元 : 19:35 | トラックバック

2008年03月18日

cvi_text_lib ブラウザだけで文字を好きな方向に書けるライブラリ

cvi_text_libは、Javascriptで英数字の文字列をベクター描画するライブラリで、IEではvml、それ以外のブラウザ(Firefox, Opera, Safari)ではcanvasを使い分けることで、主要なブラウザでの動作を実現している。

Javascriptライブラリの中に、san-serifのフォントのベクターデータが含まれていて、英数字・記号についてはそのベクターデータを元に文字を描く。それによって、通常のHTMLと違い、好きな角度でテキストを表示したり、ベクターに沿って文字にいろいろな効果を与えることができる。

サンプルでオンラインエディタも用意されている。このエディタは、Javascriptから動的に文字やその表示方法を切り替えることができる、というそれ自身のよいデモになっている。

ベクタデータを自分で持っていることから、日本語の文字データを全部持たせるのはファイルサイズ的に難しかもしれないけど、任意の文字に対応するのではなくてあらかじめ用意した文字だけを含めるような形式であれば、日本語でも斜め表示や加工表示ができて面白くなるかも。

via Ajaxian

投稿者 秋元 : 16:20 | トラックバック

2008年03月14日

ロシアの人力CAPTCHA破りは日給3ドル?

ニューヨークタイムズのニュースより。

Googleのキャプチャ専門エンジニアとして(非公式に)知られるBrad Taylor氏の、GmailのCAPTCHAはまだ破られていない、地球の別の地域で一つ一つ人力で解かれている、というコメントと、

Websenseが発見したロシア語の文書に書いてあった、一日CAPTCHAを解く労働者への手順書とそこに載っていた「日給3ドルから」という記述の話。

投稿者 秋元 : 11:07 | トラックバック

2008年02月18日

リアルタイム顔認識

スタンフォード大で開催されたメタバースサミット(そんなのやってたのか)で、リアルタイム顔認識技術のseeingmachinesという会社のデモをRobert Scobleが絶賛しているので見てみた。

ノートPC(Mac)のカメラとソフトウェアで、目や口の位置をリアルタイムに追跡して、顔の位置を追っていSeeing Machinesという会社のデモ。

アイトラッキング用の技術は普及しているようだが、まばたきや口の動き、画面を向いているか注意がそれているか、画面はつけているけど別のところ(テレビとか)を見ているとかもリアルタイムで取れるということだ。ウェブサイト上に起こった動きに対して起こる反応や、目と口の位置の変化から感情も取れたりするのかも。

メタバース(セカンドライフに代表される仮想世界)のカンファレンスに来ているということは、カメラで撮った自分の動きを3D内のキャラクターに再現させるような用途も考えているのだろう。サイトにはこういうデモ画像もあった。

ライブラリとしてライセンスもされているということだ。これを使えば、Ustreamで自動的に目線を入れるとか、ヒゲチェンのリアルタイム版とかも作れるのかも。

送った写真を動かすようなものはあるけど、動いているものにそのまま対応するようなサービスってもうあったっけ?

投稿者 秋元 : 09:32 | コメント (1) | トラックバック

2008年01月04日

EditArea ソースコード編集専用のJavascriptエディタ

via Ajaxian

EditAreaは、HTMLフォームでソースコードを編集するためのJavascriptライブラリ。

デモページで使ってみていただくのが一番わかりやすい。

機能リストのところを訳すと、

• スクリプトをインクルードして関数一個呼ぶだけ
• タブが打てる(これはいい)
• 検索と置換
• シンタックスハイライト機能あり。他の言語用にカスタマイズもできる
• オートインデント
• 行番号表示
• 多言語対応。日本語も
• 高速化用に、ライブラリを連結して圧縮(gzip)するPHPスクリプト同梱
• 複数配置可能
• 全画面モード
• プラグイン対応
• 保存や読込時のフックあり
• 動的なコンテンツ管理が可能(?)
• 他Javascriptライブラリと共存可能

主要ブラウザに対応。対応状況はこちらに。

これいいんじゃない? > 西尾さん

投稿者 秋元 : 11:37 | トラックバック

2007年12月20日

mapper.js 地図ハイライトなどに使えるJavascriptライブラリ

via Ajaxian

mapper.jsは、画像上のエリアハイライトを簡単に実現するJavascriptライブラリだ。

Firefox, IE, Opera, Safariに対応している。

手順としては、

• 画像ファイルを一つ用意して、マウスを置いたときに起こしたい効果をクラス名であたえる。
• イメージマップのmapタグ、areaタグでハイライトさせたりエリアを指定する

でおしまい。あとはライブラリがよしなに計らって、マウスを置くとハイライトしてくれる。サンプルから一つを下に貼ってみた。

置換するイメージをたくさん用意する方式とは違うので、任意の別のイメージを表示させたりはこのライブラリだけではできないけれど、このサンプルのような変化で十分な場合には使えるなと思った。

ライセンスは、非商用と個人利用は無料。商用利用は商用ライセンスが別に存在する。

投稿者 秋元 : 16:25 | トラックバック

2007年11月23日

世界初立方体型タッチスクリーンによるルービックキューブ

via ANDREWFENTEM.COM

電子機器のインタフェースについて研究を続けているAndrew Fentem氏の最新作は、立方体に液晶とタッチスクリーンを6面張ったデバイス。いろんなゲームができるということで、ルービックキューブを動かしている。

触って動かすルービックキューブは、これまでのものとかなり操作感が違うかも。

[関連]

4次元、5次元ルービックキューブ

投稿者 秋元 : 12:21 | トラックバック

2007年11月22日

CAPTCHA解読ソフトの価格表に見るCAPTCHAのレベル差

via del.icio.us/popular

Coding Horrorブログの記事Has CAPTCHA Been "Broken"?(CAPTCHAは破られたか?)では、CAPTCHAの解読ツールに値段をつけて売っている中国の業者の価格表を紹介していて、これが面白い。

CAPTCHA用の文字列画像を作るときは、文字を画像化したり、色をつけたり、線を引いたり、無関係な点や図形を足したり、湾曲させたり、と、いろいろな加工で「人には読めるけど機械には読めない」ように作るわけだが、この価格表では、単純なCAPTCHAで彼らの販売するツールで読み取れる可能性が高いものほど値段が安くなっているし、彼らのツールでは読み取れてない場合も多いような難しいものについては、ツールの値段も高くなっている。

この価格表で図らずも、いろいろな大手サイト(主に英語と中国語でのサイト)が使っているCAPTCHA図形がどんなもので、どこのサービスのCAPTCHAを彼らが「組し易し」と見ているか、というのもわかってしまった。

たとえば、こんなCAPTCHAだったら、$1000だせば99%正しく読み取るデコーダを売ってくれるらしい。

コンサートチケット販売の大手チケットマスターで使われているこんなCAPTCHAでも、50%読み取れるものが$6000だそうだ。人間でも読めない場合もあるので、リロードを挟めば50%の成功率でも突破のためには使えるだろう。

表によれば、Googleやhotmail、YahooのCAPTCHAは、「たいへん読み取り困難」で、それらを50%以上正しく読み取れるようなツールの値段はついてない。たぶん現在研究中なのだろう。

これはeBayのもの。これぐらい読みにくくしないと、今の段階でも解こうと思えば解けるようになってきているということか。

[参考]

reCAPTCHA - キャプチャを利用した人力高性能OCR

はてなのCAPTCHAは簡単に破れる

投稿者 秋元 : 00:10 | コメント (1) | トラックバック

2007年11月20日

ゴキブリ対メカゴキブリ

via del.icio.us/popular

機械式のゴキブリロボットを本物のゴキブリの群れに合流させることで、ゴキブリの群れの行動を変える、という研究のニュースが出ていた。

マッチ箱のような形のこのロボットは、光センサや赤外線センサを積んで走り回れるが、写真を見てもわかるようにまったくゴキブリに見えない。しかし、科学的に合成したゴキブリの臭いがついていて、この臭いが「仲間」と思わせるには十分なんだそうだ。

このロボットを紛れ込ませたあとで、ロボットを暗いところから明るいところに移動させると、本物のほうもロボットにつられて、明るいところで群れるようにすることができたそうだ。

ゴキブリを退治するようなことは今のレベルでは難しいようだけれど、鳥や魚のロボットを同様に送り込むことで、生態の研究や管理ができるようになるという未来が期待されているらしい。

投稿者 秋元 : 08:26 | トラックバック

2007年11月11日

htmlのテーブルをtracの表にする

html2wikiで、HTMLソースからwiki記法への変換ができる。

tracに表を貼りたい場合は、16個のWiki方言を選べるようになっているので、[MoinMoin]形式を選ぶ。

上記リンクで公開されているのは、CPANのHTML::WikiConverterを使っているそうだ。

投稿者 秋元 : 03:01 | トラックバック

2007年10月25日

PHPでメッセージキューを使う

先週、株式会社ノッキングオンの会議室で行なわれた第28回PHP勉強会で、飛び入りで10分ほど発表させていただいた話をこちらに起こすことにした。

発表の題は「PHPでメッセージキューを使う」。10分の発表なので一番基本的なサンプルまで。

もともと、Perl系の人たちが「TheShwartzいいよ」と盛り上がっていた夏頃に、ちょっとうらやましくなってPHPでメッセージキューを扱うソリューションを調べたもの。数ヶ月放置してたが、個々一番さんが「最近気になってる」というので、はなはだ初歩的なところまでしかわかってないけど説明した。

TheSchwartzのように、スクリプト言語とDBサーバでキューを実現するという意味だと、PHPではPEAR::Mail_Queueがメールのバッチ送信に特化しているけど近いみたい。ただこれは使ったことないので質については不明。

今回デモしたのは、メッセージキュー自体はJavaのオープンソースサーバを利用するというもの。

道具立てとしては、

• Apacheが出しているJMSの実装ActiveMQ
• CodehausのPHP版Stompライブラリ

の二つ。ActiveMQは、デフォルトでStompプロトコルもサポートしているので、Stompを話すコードを書くか、自分の使っている言語でStompライブラリを探せばよい。

Stompライブラリのほうは、SubVersionでのみ公開。一ファイルだし中身もとても短いが、PHPからActiveMQを(というかStompプロトコルに対応したサーバを)呼び出すことができるライブラリ。

ActiveMQのインストールと実行

Windowsの場合を書く。すごい簡単。

• Javaが入ってなければインストール
• ActiveMQダウンロードサイトから最新版(4.1.1)をダウンロード。zipを適当な場所に展開。(例: C:\work\apache-activemq-4.1.1)
• コマンドプロンプトで、展開した場所へcd
• cd bin
• activemq.batを実行 (Windowsの通信ブロック解除ダイアログが出たら解除)

これで、設定ファイル conf/activemq.xml の設定でActiveMQが動く。ローカルで実験するだけならそのままのactivemq.xmlでも動いた。

PHP Stompライブラリの準備

php.ini の以下を有効にしてsocket関数を使えるようにしておく。

extension=php_sockets.dll

PHP5だったら、SubVersionから取ってきたままのStomp.phpでは古い書き方のせいで警告が出る箇所が有るので、それらは3箇所の "&$" を "$" に置き換えれば消えると思う。

あとは、Stomp.phpをinclude_pathに置くなどして、requireできるようにしておく。

PHP Stompライブラリを呼び出す生産者スクリプトを書く

ライブラリファイルStomp.phpが呼べる状態になっているとして、Publisher側はこんなコード。

<?php

/** キューの生産側サンプル */

// ライブラリ読み込み
require_once 'Stomp.php';

// ローカルホストのStompサーバに接続
$connection = new StompConnection("localhost");
// TBA: エラー処理。ライブラリ中でdieしてるのでライブラリも要修正

// 接続パスワードは今は何でも通し
$handler = $connection->connect("akky", "dummypassword");
// TBA: エラー処理
//print_r($handler);

// メッセージを作る
$message = "Hello World! The time is " . date("h:i:s");

// キューの識別子を与えて、メッセージを送る
$connection->send("/queue/miaumiau", $message);

echo "I've sent [$message]!\n";

// 接続を切る
$connection->disconnect();
?>


これを、

• php Publisher.php

と実行すると、キューにメッセージを投げる。2回呼べば2つ投げる。

PHP Stompライブラリを呼び出す消費者スクリプトを書く

消費側はこんな感じで。

<?php

/** キューの消費側サンプル */

// ライブラリ読み込み
require_once 'Stomp.php';

// ローカルホストのStompサーバに接続
$connection = new StompConnection("localhost");
// TBA: エラー処理。ライブラリ中でdieしてるのでライブラリも要修正

// 接続パスワードは今は何でも通し
$handler = $connection->connect("akky", "dummypassword");
// TBA: エラー処理
//print_r($handler);

// キューの識別子を与えて、メッセージを受ける
$connection->subscribe("/queue/miaumiau");

// 無限ループで受信を続ける
while (true) {
    // キューから一個取得
    $gottenFrame = $connection->readFrame();
    //print_r($gottenFrame);

    if (array_key_exists('message-id',  $gottenFrame->headers)) {

        // 受け取り確認を発行

        $connection->acknowledge($gottenFrame->headers["message-id"]);

        echo "Received [" . $gottenFrame->body . "]\n";

    } else {

        // 何かが変

        echo "invalid frame\n";

        break;

    }

	// サンプルはぐるぐる回してもいいけど、まあ適当な間隔で処理するイメージ

    sleep(1);

}

// 接続を切る
$connection->disconnect();
?>

こっちを、別のシェル/コマンドプロンプトを開いて、

• php Subscriber.php

と実行すると、キューにメッセージがあれば取り出して表示する。Subscriber.phpを起動したままでPubslisher.phpを起動すれば、キュー経由でメッセージが届いていることも確認できる。

実運用では、エラー処理をして、アクセスに認証をかけ、キューのIDを分けることでたくさんのキューを同時に扱い、localhostじゃなくて別サーバに分けて、みたいにいろいろとやることはあると思う。

CodehausのStompプロトコルのサイトでは、Codehausのものや他のものも含めて、いろいろな言語でのStompクライアントライブラリの情報が載っている。C/C++/C#&.NET/Delphi/Flash/Java/Perl/PHP/Pike/Python/Ruby/Smalltalkなど。

なので、Webアプリケーションの場合でも、ユーザからの入力によって発生したバックエンド側への指示をメッセージとしてActiveMQに投げることで、まったく別の言語のバックエンドと連携させることができそうだ。キューサーバーは別マシンにも置けるので、複数台に処理を分散させるときにも使える場合があるだろう。

僕は職業Javaプログラマじゃなくなってから何年も経っているので、ActiveMQという選択が今妥当なのか、ActiveMQの実運用性とかどこまで捌けるのか、とかはわかってない。Javaの詳しい人の突っ込みをお待ちしている。

ActiveMQは出力をRSSにしたりという機能もあるようで、

また、PHP勉強会での発表後に、興味あるのでうちでも遊んでみる、という声も聞いたので、負荷実験とか実サービスへの適用試行とかやってくれれば、僕もぜひ、どんなもんか聞きたいと思っている。

[参考]

Javaの理論と実践: 次期エンタープライズ・アプリケーションにJMSの採用を

メッセージキュー自身の解説と、使いどころの例示がある。

PHPからAmazon Web ServiceのSQSを使う

有料だけど自分でメッセージキューサーバの管理しなくて済む。

投稿者 秋元 : 15:16 | トラックバック

2007年10月23日

ビデオ情報革命 information R/evolution

del.icio.us/popularで見つけたが、POLAR BEAR BLOGのakihitoさんがすでに日本語字幕まで作成されていた。

POLAR BEAR BLOG: 情報革命が5分で分かる - information R/evolution

とても良かったのでお時間のある人はぜひ。

投稿者 秋元 : 13:27 | トラックバック

BitTorrent Conference 2007へ行ってきた

BitTorrent Japanというのが設立されていたようで、BitTorrentのクライアント網をビジネス向けコンテンツ配信に使うというエンタープライズ向けのビジネスを日本で開始しているようだ。

そのBitTorrent Japanが、プロトコル設計&実装者のBram Cohen氏も呼んで説明会をする、という話が知り合いから来たので、聴きに行ってきた。

BitTorrent Conference 2007

新聞社やオンラインメディアの記者さんたちがたくさんいたので、ニュースでも出ているとは思う。

何をどうやってビジネスにするのか、自分でも疑問だったので、理解した範囲でまとめると、

• BitTorrentのネットワークは、BitTorrentユーザのPCや帯域を集めて、コンテンツをユーザの近くにキャッシュでき、その結果巨大なファイルの配布が高速になる。コストも安い
• BitTorrentユーザに便利な、BitTorrentクライアント内蔵のルータやNASを周辺機器メーカに作ってもらう(展示で各社出していた)
• 動画や音声などサイズの大きなコンテンツを売るコンテンツベンダーに使ってもらう

ということ。米国などではユーザ数が多くてネットワークも大きいのだけれど、日本ではWinnyとWinny事件の影響(メディアや一般の人のP2P嫌い)があるとも。そのへんは遵法のトラッカーサイトを作ったりして普及に努めるそうだ。

P2Pによる分散ネットワークは、技術的にも面白いし、Skypeのように競合他社に対して優位性を実際に出している実例もある。現在のP2Pアレルギーは残念だが、P2P技術自体に問題があるわけではないし、これはこれで、あってもいいサービスだなと感じた。

懇親会で、Bram Cohenさんと一緒に写真撮ってもらって、サインも貰った(ミーハーだ)。なんといっても、技術で世界を変えようとしている一人だもんな。

あと、カレンの四家さんに会場で紹介いただいた、BitTorrent Japanの戦略顧問の古株さんという方がすごいパワフルな人だった。パワフルさはなかなか伝えにくいけど、あとで四家さんと古株さんの対談のリンクをもらったのでご紹介しておく。

カレン次世代ビジネスリサーチ室ブログ | MarkeZineでJストリーム古株均さんと対談しました。

ストリーミングのサーバ側の裏事情や歴史ってほとんど知らなかったので、長いけど面白かった。3回目の広告モデルの話とか、これだけ長年いろいろとやってきている人がニコニコ動画を絶賛したりとか。本当に面白いものが好きな人なんだなあ、と。

[追記] カンファレンスを受けて出たこの解説記事が面白かった。

早熟の天才プログラマ、ブラム・コーヘン
BitTorrent、立ち上がる商業P2Pネットワーク（前編）

投稿者 秋元 : 10:43 | トラックバック

2007年10月22日

phpspotの件のまとめ

phpspot開発日誌のKJさんからメールがあり、この週末にメールにて議論を行なってきた。お互いのブログに対する考え方が違うという結論についは合意できたので、ここでそれぞれの見解をまとめてこの件については終わりとしたい。

メールでの議論の内容については、KJさんの希望により、非公開とする。

合意の内容は以下のとおり。

• 議論の結果、お互いのブログの運営で、間違いの指摘に対する考え方が違うことがわかったとし、それぞれの考え方を説明する。

ブログで書かれた間違いの指摘や、その真偽に関する議論についての秋元の考え方は、以下の通り。

秋元は、ブログの間違いの指摘は公開コメントやブログで行い、間違いかどうかの議論などは他のブロガーやブックマーカーも含めて衆目の中全員で検証する、のがいいと思っている。

KJさん側の考え方は、最後に秋元がまとめた時点では以下だが、

KJさんは、ブログの間違いの指摘は(あればコメントで、コメントがなければ)メールで行い、メールで反応がない場合でも相手を尊重してブログでの指摘はしない、のがいいと思っている

KJさんが自分の言葉で書かれたものが公開されたので、以下も参照されたい。書かれる予定になっている。それが出たらここからその記事にリンクを張る。

(リンク予定)phpspot開発日誌 KJさんの、ブログの間違いの指摘についての考え

[関連]

訂正：実用的なPHP用の正規表現ｘ８

phpspotの人は正規表現について語らないほうがいいのでは

phpspotの件の続報 (リンクミス修正)

投稿者 秋元 : 09:27 | コメント (3) | トラックバック

2007年10月18日

phpspotの件の続報

phpspotの人は正規表現について語らないほうがいいのではを読まれたようで、記事の更新をされたようだが、まさに予想したとおりのphpspotメソッドとなっている。

僕が気づいた範囲での修正箇所は以下のとおり

• タイトル先頭に「訂正:」を追加
• 動作確認はしなかったが目視は行なった。目視ではわからなかったという弁明の追加
• 紹介された元の英語記事へのリンクの削除
• ソースコードに取り消し線
• 以前いろいろ言われた正規表現の解説ページに、注意書きと他サイトの解説へのリンク
• 問題の指摘はフォームから受付けるという告知

まず、元英文記事へのリンクを消した理由がわからない。元記事が読まれると何か不都合でもあるのだろうか。

元記事の人もコメント欄でいろいろ叩かれているけど、それに答えてスクリプトを手直ししたりしている。一旦何かについて「知っている」と書いたのであれば、それが正しくなるように努力するのが始めた者の責任ではないか。

あと「目視のチェックをした」というのは本当なのか。そんなこと明言して大丈夫なんだろうか。あれを目で見て何も違和感を感じなかった人が、正規表現の解説ページを書いているというのは問題。好意的にみれば、昔は理解できていて今はわからなくなった、という可能性もあるけど。

結局、今回の訂正でなにか正しさに近づいた点といえば、「PHP 正規表現 メール」の検索で出てくる正規表現解説というページに、 「下記、正規表現は本当に簡単なチェックで、厳密なチェックをしたい場合は別途検索エンジンなどで調べた方がいいでしょう。」と追記されたのと、別の解説へのリンクを二つ追加したこと。

この簡単なチェックもかなり間違ってると思うけれど、この間違った解説をたとえ「本当に簡単なチェック」と添えようと、phpspotのような影響力のあるページで出し続けることは問題だろう。以前も多くから突っ込まれているはずなのだが。そういうところが指摘を受付けないと書かれるゆえんではないか。どうしても自分のページで紹介しないといけないのなら、リンク先を勉強した上で自分なりの「厳密なチェック」を紹介すればいいのに。

末尾の「尚、サービスとして公開する際には実際にメールが届くかどうかをチェックするなどしてメールの存在有無を確かめましょう」もわからない。メールアドレスの形式チェックをするために実際にメールを送信しろと言っている?

phpspotメソッドにこういう指摘がある。

間違っていた部分は残さない．可能な限りうまく帳尻合わせてエントリを修正すること

• 場合によったらスミの方に情報先URLを掲載する程度で具体的に何が間違っていたのかなどは書かずにライトな対策で済ます

phpspotのKJさん、元の正規表現はどこがどう間違っていたんですか? 解説が正確じゃないことを認めてもその情報を載せ続けるのはなぜですか? 検索エンジンで上位に出てきてアクセスが多いページだからですか? たくさん人が見に来れば情報の真偽はどうでもいいの?

過去に間違いを指摘した人たちも、こんな感じで適当に流されてしまい、指摘を続ける気力をなくしたんだろうと思うし、こんな揉め事誰だって(もちろん僕だって)関わりたくないと思うけれど、これは書かずにはおれないよ。

自分の面子やアクセス数だけじゃなくて、それを読んだ読み手がどういう影響を受けるかも考えるべきなんじゃないかなあ。

なお、今も注釈つきで載り続けているコードはこれ。使っちゃだめよ。

$text = "mail@mail.com";

if (preg_match('/^[a-zA-Z0-9_\.\-]+?@[A-Za-z0-9_\.\-]+$/',$text)) {

    echo "正しいメールアドレスです";

} else {

    echo "正しくないメールアドレスです";

}


?> 

投稿者 秋元 : 15:00 | コメント (21) | トラックバック

Amazonのワンクリック特許が再審査に

via digg

ars technicaのAmazon's 1-Click patent picked apart by US Patent Officeによると、アマゾンの"1-Click"特許に関して、アメリカ特許庁は26の請求項のうち21個までを「要再審査」と決定したということ。

これはニュージーランドの個人が、ブログで裁判費用の寄付を募りながら起こしてきた再審査請求の結果らしい。その人のブログでも報告されているが、再審査とされた特許の2/3は修正か破棄につながっているそうで、アマゾンのワンクリック特許も無効となるかもしれない。

上記ニュースによれば、Appleが(音楽ダウンロードで?)この特許に使用料を払っているし、オンライン書籍販売でのライバルバーンズ&ノーブルとの特許紛争にも当然影響が出るということ。

「ワンクリックで購入できるという仕組み」がアマゾンによって押さえられていたことには長らく不満を持つところが多かったので、この特許が無効になればオンラインショッピング業界への影響は大きいのではないだろうか。

# 米国でのこういう動きが日本とどう連動してるかはわからないので、詳しい人教えてください

[追記]

日本では既に拒絶されていたんですね。このページを教えてくださったkwmrさん、ありがとうございます。アマゾンに恨みはないけど、特許庁Good Job!

[追記]

Long Tail Worldでこの偉業を成し遂げたPeter Calveleyさんのことなどもっと詳しい情報が紹介されている。

投稿者 秋元 : 08:56 | コメント (1) | トラックバック

2007年10月17日

phpspotの人は正規表現について語らないほうがいいのでは

「実用的なPHP用の正規表現ｘ８」というphpspot開発日誌という記事で、

8 Practical PHP Regular Expressions - Web devlopment blogという、今日del.icio.us/popularに出ていた記事の紹介がされている。このサイトの記事はいつもそうだけど、はてなブックマークでも人気で、既に50名を越えるユーザにブックマークされているようだ。

1 メールアドレスチェック
$string = "first.last@domain.co.uk";
if (preg_match(
'/^[^0-9][a-zA-Z0-9_]+([.][a-zA-Z0-9_]+)*[@][a-zA-Z0-9_]+([.][a-zA-Z0-9_]+)*[.][a-zA-Z]{2,4}$/',
$string)) {
echo "example 3 successful.";
} 

これは、"example@so-net.ne.jp"とか"example+tracer@gmail.com"をメールアドレスではないと判定する。この簡単さだと、メールアドレスじゃないものを通してしまう取りこぼしも多いはず。

2 IPアドレス
$string = "255.255.255.0";
if (preg_match(
'/^(([0-2]*[0-9]+[0-9]+).([0-2]*[0-9]+[0-9]+).([0-2]*[0-9]+[0-9]+).([0-2]*[0-9]+[0-9]+))$/',
$string)) {
echo "example 5 successful.";
} 

これなどは、サンプルの"255.255.255.0"が既に動かない。どういうこと?

さらに言うと、以下のようなケースも通してくれる。

• "999999999999.255.255.10"
• "000.255.255.10"
• "11111111111.22222222222.33333333.44444444"

チェックになってない…

この人、以前にも正規表現のいいかげんな記事を書いていろいろ突っ込まれている。

• はてなブックマークの反応

メールアドレスのチェックってそんな簡単なものじゃないはず。

• PHPが嫌われながら生き残る3つの理由
• re: PHPでメールアドレスかどうか調べる方法
• PHPでメールアドレスを確認する「正しい方法」(Linux Journal誌の記事より)

突っ込まれた肝心の記事は見つからなくなっている。でも依然として「PHP 正規表現」で検索すると当該のURLが上位に出てくるので影響は大きい。

これは提案なんだけど、突っ込まれたらちゃんと勉強しなおして正しい記事にするか、手に負えないと思ったらせめてより正確な記事を紹介するのがみんなのためなんじゃないかな。

Diggのトップページやdel.icio.us/popularで表示されたページの概要を訳しているだけなんだから、せめて自分で確かめてから紹介しようよ。僕も正規表現は苦手だけど、今回のはコピーして動かすだけでおかしいとわかるじゃない。(得意な人なら動かさなくてもわかりそうだが)

まあ、このエントリもphpspotメソッドで対処されそうな気もするけど。

[参考]

phpspotメソッド

[2007.10.22 追記]

phpspotの件の続報

phpspotの件のまとめ

投稿者 秋元 : 14:40 | コメント (27) | トラックバック

2007年10月10日

Milescript 静的型付けのJavascript(ECMAScript)生成コンパイラ

via del.icio.us/popular

Milescript

ECMAScriptに似た、しかし型チェックがある言語を使って開発したコードを、Javaで動くコンパイラで(ドキュメントにはC#環境でも、と書いてある。そっちもある or やるのか)、ECMAScriptに変換することで、Javascript(ECMAScript)の開発を行なう新言語、だそうだ。

Javaで動的なJavascriptアプリケーションを開発できるGoogle Web Toolkitとは違うんですよ、とも。目的が違う、とか、言語仕様がJavascriptベースのままであることとか。

投稿者 秋元 : 22:40 | トラックバック

2007年10月04日

eZ Publishのセミナーに行ってきた

eZ Publishは、ノルウェイ発の、PHPで書かれたオープンソースCMSだ。

はじめてその存在を知ったのは4,5年前だったか。eZ Componentsという形で要素機能をライブラリとして出しているので、サイボウズ ガルーンのPHP移行時に調査した記憶がある。eZ Componentsはあくまで「フレームワーク」とは名乗ってないので、フレームワーク比較とかではあまり出てこないんだよね。

ドイツを中心にヨーロッパではPHPの人気が高く、eZ Publishも一定の勢力を確保しているのは知っていたけど、日本語の情報はとても少なかった。

今回、日本語化・日本対応の取り組みを紹介するというセミナーがあることを見つけたので、聞きに行ってきた。

CTOのBård Farstad氏に、国際展開担当者と、ノルウェー在住で日本担当の日本人社員、の3人が来日され、eZ社製品の普及度合いや実際の導入例、編集デモなどを説明された。

eZ Publishは、GPLの下で全部公開されていて、自分でがんばれば無料でもサイトを作って運用できる。サポートは有料で買えて、これがeZ社の収益らしい。オープンソース版(といっても製品版もまったく同一らしいが)で普及を図るモデルはMySQLなんかと同様か。よく考えたらどちらも北欧の会社だ。

ヨーロッパを中心に、新聞や雑誌社のウェブサイトに導入されているようで、大量アクセスを捌く実績もあるようだ。検索や携帯電話対応も含めての日本語化が進行中らしいので、期待したい。

投稿者 秋元 : 12:04 | トラックバック

2007年10月01日

Yahoo UI Library(YUI)のサンプルをビデオ化したブログ記事

Yahoo!が開発し、フリーで提供、ホストまでしてくれているJavascriptライブラリ+ウィジェット集であるYahoo UI Libraryの、主要なコンポーネントを動かした様子を撮ったビデオが多数公開されている。

Introducing YUI - The Rising Giant (YUIの紹介 - 上り調子の巨人)

開発者ページのサンプルページから自分で触れば試せるんだけど、それすら面倒な人はいるだろうから、こういう普及促進もあってもいい。これなら百聞は一見にしかずで、YUIでどんなことができるかが英語無しでわかるかも。

[関連]

Yahoo UIライブラリの各ファイルがYahooから直接ホストされるように

Yahoo! UI Library はすごいね

投稿者 秋元 : 22:40 | トラックバック

MashupChallenge(マッシュアップチャレンジ)コンテスト開始

本日、全世界対象のマッシュアップコンテスト MashupChallenge のサイトが正式にオープンになった。

締め切りは今年2007年の12月31日、過去に発表されていない作品であること、提示された5つのAPIのうち2つ以上を使うこと、応募ソースがMITライセンスで公開されることに同意すること、などが参加条件。

賞品のほうは「栄誉」と、あとまあWiiとかいくつか用意してるみたいだけど。基本的には栄誉と宣伝力かな。

登録するといきなり5つ、ランダムなAPIが出てきて、そこから選ばされた。不正を防ぐため、この選択で作ったマッシュアップを提出しないと、別の応募はできない。そりゃ、アカウント別に作れば回避はできそうだけど。

ということで、世界にマッシュアップ力を示したいマッシュアッパーの人は応募してみてはどうだろうか。

投稿者 秋元 : 16:47 | トラックバック

サイボウズ本社のMySQLプレゼン資料が公開されている

ご紹介が遅くなったが、MySQL Users Conference Japan 2007で講演された、サイボウズ本社のMySQL利用に関してのプレゼン資料が公開されている。

パッケージでのMySQL(やその他のオープンソースソフトウェア)の利用には、サービスとはまた異なる苦労点がたくさんある。一番大きな違いは、ユーザによってばらばらな下位層の環境に対応して動くようにしないといけないところだろう。

サービス運営するだけなら、同じスクリプトがLinuxでもWindowsでも(SolarisでもFreeBSDでもAIXでもHP-UXでも…このへんは製品ごとにサポート範囲は違うけど)動くように努力する必要はない。同じLinuxといってもバリエーションは多数あるし、カーネルのバージョンの違いもある。同じ製品を数千・数万の異なるサーバで同じように動かすためには、それに対応した技術力が必要なのはわかっていただけると思う。

技術に詳しくないユーザでも簡単に設定・運営していけるようなレベルまで運用を噛み砕かないといけなくて、サーバの追加やキャッシュ、シャーディングなども、環境をこちらで指定するわけにはいかない分、汎用的な設計にするのが大変だったりする。

サイボウズ本社の開発部は、そういうところの技術を苦労して蓄積してきているので、興味ある人はもっといろいろ尋ねてみると、今後も何か出てくるかもよ。

投稿者 秋元 : 16:29 | トラックバック

Skype Developer Conferenceの二回目が開催

7月に続いてSkypeの開発者セミナーの2回目が開催される。申し込み済。ちょっと他で忙しいけどいけるといいな。

Skype Developer Conference 2nd
『Skype のマッシュアップ戦略 ～ Skype 本社 エグゼクティブ・メンバーによる説明会』

今回は英語中心?

投稿者 秋元 : 16:23 | トラックバック

2007年09月27日

Excel 2007で結果が65535, 65536になる計算が100000と表示されるバグ

via MSDN Excel Team blog

Excel 2007を持ってないので自分では試してないのだけれど、公式ブログでの解説なので実際に起こっているのは間違いないと思う。

# Excel使ってないのかって? 全マシンOpenOfficeしか入れてない。

Excel 2007で(バージョン2007だけ)、計算結果が65,535か65,536になるような計算、たとえば= 77.1 * 850 を入れると、結果が "100,000"となってしまうバグが報告され、確認されたそうだ。

表示だけのバグだそうで、この結果を元にさらに別の計算をした場合、その計算の結果は合っているもよう。

ただ、当該ブログのコメント欄では、"それに+1足すと65537じゃなくて100001になるぞ""65535に+1して65536"だったという報告もあるので、本当に表示だけなのかどうかそれなら説明の範囲内だ。まあ今頑張って直しているそうなので、65535, 65536が違うと重大な結果になりそうなExcel 2007を使ってる人は、とりあえず古いバージョンのExcelを使うとかOpenOfficeなり他の表計算ソフト使ってみるとかしてはと思う。

[追記]

10年以上前にExcelのコードを触っていたというJoel Spolskyがバグの原因を予想している。

[追記 2007.10.10]

バグ修正版が作成された。Microsoft Updateでも更新されるとのこと。Excel 2007ユーザもこれで一安心か。

投稿者 秋元 : 09:45 | トラックバック

2007年09月10日

1967年に想像された1999年のパソコンライフ

via Digg

1967年に作成された未来予想映画の抜粋だそうで。1999年にはコンピュータのおかげでこんな生活になってるよ、というもの。

オンラインショッピング、ホームセキュリティ(家内監視カメラ)、オンラインバンクによる支払い、納税、eメールなどができるようになりますよ、というこの予想、30年先の予想としてはかなり当たってるのでは。あとトリプルディスプレイがステキ。

このビデオを投稿した PALEO-FUTURE というブログは、こういう、「昔の未来予想」を探してきて紹介することに特化したブログのようだ。予想がされた年代別のアーカイブなどもあっておもしろそう。

投稿者 秋元 : 20:53 | トラックバック

2007年09月06日

WordPress用Gopherサーバ wp-gopher

via 忘れた

一週間ほど前に見つけて、「Gopherなんて古くて伝わらないだろう」とスルーしてたのだけれど、なぜか突然Gopherが熱くなってるようなので紹介。

wp-gopherは、PHPによるブログシステムWordPressのデータにgopherプロトコルでアクセスさせるためのGopherサーバ。Pythonで書かれている。

Firefox2ならまだgopher:プロトコルが見えるので、Firefoxの人はこのデモにアクセスすれば、このスクリプトを書いたhttp://✎.net/, Five Minutesのブログが、Gopherで読める。(それにしても、なんていうドメイン名だ)

この作者、さらにIPv6でもこのGopherサーバにアクセスできるようにした(おそらくネット唯一のIPv6対応Gopher Serverだって)そうなので、アクセスできる人はそちらもどうぞ。

サーバのコードは短く、SQLで読んだデータを整形してるだけなので、MTなど他のブログのデータをGopherで提供することもできるだろう。

[追記] Gopherサイトの情報はGopher用ソーシャルブックマークサービスGopherSnakeに集まってるらしいよ。

投稿者 秋元 : 12:12 | トラックバック

2007年08月28日

究極の.htaccess?

via del.icio.us/popular

Apacheのフォルダローカルな設定ファイル.htaccess で使いそうな設定をかたっぱしから書き込んだファイル。

メイン、スクリプト関連、ヘッダ(キャッシュや最速化)、URL書き換え、認証、SSL、開発中サイト、というようなジャンルごとに、よく使われそうなディレクティブがずらずらと並んでいる。PHPの設定、cool URLの設定、エラーページ、認証の掛けかた、などなど。

書き換えるべきところは英単語で何を書くのかわかるようになっているので、コメントとあわせて思い出しながらコメントを外していくとそれなりに使えそうな .htaccess が作れるかもしれない。僕なんかは細かい設定方法すぐ忘れてしまって検索することが多いので、これで楽になりそう。

# 本当に不要なものはコメントにせずファイルから消すべきだし、安定運用に入ったら.htaccessじゃなくて本体の設定に移すべきだけど

これも入れるべき、というのがあればぜひ連絡ください、ということだ。

投稿者 秋元 : 12:52 | コメント (2) | トラックバック

2007年08月22日

Seam Carving - 自然な画像リサイズを動的に行なうソフトウェア

via Digg

Siggraph2007で発表されたというSeam Carving技術。そのSeam Carving for content-aware image resizingという動画で解説されているのは、画像内のひとまとまりの図形・物などの形を維持したままで、不要な部分を削って縮めることができるという技術。(論文 pdf)

説明がわかりにくくて申し訳ない。見てもらったほうがぜったい早い。

オリジナルのQuickTime動画はこちら

これを使うと、写真の中の鍵となる写真や人物を常に保存しつつも、見ているPCや携帯端末の画面サイズに合わせてイメージを縮めることができるという。

このSeam Carvingを搭載した画像ツールのデモでは、縮めてみておかしくなったら、ここは元の状態を保ってね、みたいな指定を赤ん坊の顔にすることで自然に写真の不要な部分をカットしたりもしている。

デモの中では、6人が砂浜に並んでいる写真から、人をマウスでおおまかに指定するだけで5人、4人と減らす様子などが写されている。どのデモもとても簡単にできているようで、こんな機能が家庭で使えるようになれば素晴らしいと思う。

二人の思い出の写真が、

あっという間にこんな風に

これはすごい。

で、この研究者の所属がなんとMERL(三菱電機米国研究所)だったりする。MERLといえば最近こんな記事を見たけど…

[2007.08.25 追記]

O'Reilly Radarでも紹介された。「この技術が本物で、Firefoxのアドオンで使えるようになるといいね」だって。

投稿者 秋元 : 18:32 | トラックバック

2007年08月20日

[追記あり] Skypeの大規模ダウンの原因はWindows Updateだった

とは、Skype Blogでの釈明。

マイクロソフトからのパッチ適用後に再起動を要請された(あるいは、一定時間後自動で再起動させられた)世界中のウィンドウズマシンが、次々とSkypeへのログインを行おうとしたり、P2P網を維持するだけのネットワークリソースを欠乏させたりした、んだそうだ。

この崩れたP2Pネットワークを自己修復する部分に、これまで知られていなかったバグがあったことで、大多数のユーザがほぼ2日間Skypeを使えなくなってしまったという。すでに改善を続けていて、同じ問題が再現しないようにしているとのこと。

過去4年間、ほとんどトラブルがなかったということもこのブログでは述べている。たしかにその通りで、これまでずっと安定していたことで今回の停止が目立ってしまったけれど、とてもすばらしい運用がされてきていたし、これからも一ユーザとして期待したい。

[追記] Skype日本語ブログで全訳が先に出てた。

[2007.08.21 追記]

Skypeの説明が理屈に合わないとする指摘もいろいろ出ている。Windows Updateでリブートなんて、今回がはじめてだったわけではない、とか、障害がはじまったのはWindows Updateのタイミングからかなり遅れてのことだった、とか。

Skype側にさらに問い合わせた人の結果と、マイクロソフトによる毎回のアップデートと何も変わったことはしていない、との表明

投稿者 秋元 : 23:07 | コメント (1) | トラックバック

2007年08月15日

Linux十戒

via del.icio.us/popular

Linux10の掟 (まあ異論はあろうけど)

1. 汝、rootで作業するべからず
2. 汝、可能な限りパッケージマネージャーを利用せよ
3. 汝、コミュニティの一員たれ
4. 汝、ドキュメントとmanページを読むべし
5. 汝、サポートシステム(メーリングリスト、フォーラム、etc.)を利用せよ
6. 汝、(過去ログなどを)検索せよ
7. 汝、(オプションなどを)探索せよ
8. 汝、コマンドラインを利用せよ
9. 汝、Windowsを再現しようとするべからず
10. 汝、諦めることなかれ

投稿者 秋元 : 11:39 | トラックバック

ブラウザでGooglebotの振りをする方法5つ

via del.icio.us/popular

Googleで検索すると抜粋が出てくるのに、行ってみたら有料の会員ページで読めなかった、ということがままある。なんで検索結果には出てくるか、というと、客寄せのためにわざと検索エンジンのボットにだけはコンテンツをクロールさせているからなんだけど。

User-AgentをGooglebotと同じにすれば読めるよ、という話は前から出ているが、それではチェックがUAだけの場合しか通用しない。それだけじゃだめな場合、どうやってGooglebotに近づくか、というtips。

一つは、Google翻訳を噛ます。Googleに翻訳させればGoogleのIPアドレスからのアクセスになるので、IPアドレスの範囲でチェックしていた場合、見えるかもしれないということ。英語のページでも、「スペイン語から英語」など適当な翻訳を選んでおけばよい。

# Google Translateとbotのアドレス範囲が違ってたらそれを避けるようにブロックされたりしないのか?

FirefoxのアドオンUser Agent SwitcherでUAを変えるのは既出

FirefoxのアドオンWeb Developer ToolでJavascriptとCookieを切る

FirefoxのアドオンRefControlでリファラーを切る

しかし、これ全部入れて、いつも行ったら見えないと思っていたウェブサイトに行ってみたけど、だめだった。まあ、まだブロックする方法はいろいろあるし。単純にやっているところには上記で効くかもしれない。

投稿者 秋元 : 11:25 | トラックバック

2007年08月05日

Blueprint CSSデザインのためのオープンライブラリ

via del.icio.us/popular

Blueprintは、複数人で開発されているCSSライブラリだ。

マルチカラムレイアウトを簡易なclass指定で実現するのが目玉機能らしい。

ブラウザ間のデフォルトスタイルの違いをリセットしたり、印刷用のスタイルを提供したりという機能も。

Yahoo UI libraryのCSSセットと共通するところが多いと思ったが、マルチカラムの指定方法はこちらのほうが直感的かなとも思う。

投稿者 秋元 : 11:00 | トラックバック

2007年08月04日

Unix基本のキ

via del.icio.us/popular

コマンド、デバイスファイル、ログファイル、設定ファイルなどの代表的なものを分類して、それぞれに最低限の説明を加えている。

投稿者 秋元 : 12:07 | トラックバック

Javascriptでできた倉庫番

via del.icio.us/popular

うむ。これはすごい。Sokoban en JavaScript

Javascriptでゲームを作ること自体は、以前ほどの驚きはなくなってきたし、日本語でも倉庫番の実装はいくつかありそうだ。

ただ、この人たちは問題を1000面以上(現時点で1115面だそうだ)用意したり、スキンを8種類用意したり、スクリプト自身の解説をしたり、問題の作成方法を解説したり、サイトやブログに貼れるようにしたり、と、倉庫番に対する情熱が半端じゃない。

またマニアックに難しいんだこれが

投稿者 秋元 : 01:22 | トラックバック

2007年08月03日

Scrollovers リンクに新しいホバリングスタイルを

こんな風なリンク効果を実現するJavascriptのライブラリ

リンクにクラスを指定するだけ。

投稿者 秋元 : 18:22 | トラックバック

2007年08月01日

Googleマップがマイクロフォーマット(hCard)に対応

Google Developer Blogで、Google MapsのhCard対応が発表された。

Googleマップの「お店やサービスを検索」で出てきた検索結果のそれぞれに対して、microformatsの中のレビュー用フォーマットhCardのクラスが付与されている。

FirefoxのアドオンTailsなどを使えば、ページ中の住所や電話番号を簡単に一覧することができる。テキストとして取り出したり、他のサービスへの入力に流すことも可能だ。

Firefoxにはその他のmicroformats用のアドオンが多数あるし、IEやSafariでもブックマークレットである程度使うことができる。

Google Mapsの作り上、(あとたぶんデータ保護の観点からも、)Javascriptで処理された後のHTMLソースでないとhCardの要素やデータは見えてこない(ブラウザの「ソースを見る」ではなく、Web Developerアドオンなどを使って描画後のソースを見ないと見つからない)。

描画終了状態からJavascriptでいろいろとデータの再利用をしてみるのが、このhCardのメインの活用方法となりそうだ。

投稿者 秋元 : 10:43 | トラックバック

2007年07月28日

Kameraflage カメラにだけ映る隠し画像

via reddit.com

カメラフラージュという技術が、8月6日サンディエゴのSIGGRAPHで公開されるというニュース。

デジカメの撮影素子と人間の眼の特性の違いを利用して、デジカメのファインダーを通したときだけ見えるような文字や画像を描く、というものだそうだ。服の模様にこれを使うと次の写真のようになる。

この他に、映画にファイダーを通したときだけ見える字幕や追加情報を入れたり、絵画の説明を普段は隠しておいて見たい人だけ(自分の携帯電話のカメラを使うなどして)読む、といった応用例が紹介されている。

投稿者 秋元 : 11:43 | トラックバック

2007年07月25日

YSlow for Firebug ページのチューニングを助言してくれるFirefoxアドオン

via Ajaxian

Yahoo! Developer NetworkからリリースされたYSlowは、Firefox+Firebugのアドオンとして、ページの表示速度の改善点を列挙してくれるというツールだ。

ここのところ、ウェブサイトのパフォーマンス改善で積極的に資料を公開しているYahoo!が、ツールも出してきた。今日のOSConにて発表されたもののようだ。

アドオンをインストールして任意のページを開くと、Firebugのメニューの中にYSlowが追加される。Performanceのタブには、パフォーマンスの点数(下記では「C(71)」)と、13の項目のそれぞれについてパフォーマンス対策がされているかどうかを、A～Fのグレードで表示してくれる。

それぞれの指摘をクリックすると、Yahooの解説ページに飛んで、何がパフォーマンスの障害になっているのか、何をどう直すと改善されるのか、が読めるというわけ。

上のスクリーンショットのように、恥ずかしながら大量に指摘されてしまった。もちろん「CDNを使え」なんていうのもあってそれはちょっと手が出ないわけだけど、Expireヘッダがついてないファイルとか、gzip圧縮できるファイルとかの指摘はすぐに対応できるものだ。

13個の改善点についても、Yahoo! Developer Networkのブログで逐一解説されてきたもののようだけど、誰かこれ訳してるかな?

こんな風に実際のページに対して指摘がされるというのは非常に良いと感じた。

[2007.07.29 追記] パフォーマンスチューニングBlogさんで翻訳が開始されたようなので、YSlowの判定結果と翻訳を付き合わせれば日本語でも改善作業ができるようになるかも。

投稿者 秋元 : 20:04 | トラックバック

2007年07月23日

Javascriptでブロック崩しを作る手順が全公開

via del.icio.us/popular

Javascript Gamerで、BrickslayerというJavascriptで作ったブロック崩しゲームの作り方が公開されている。

開発環境は Firefox + Firebug + お好みのエディタ。

Javascript本体は、prototype.jsベースで、スプライト表示、アニメーション処理、キーボード入力、当たり判定、(Flash経由で)効果音などについてそれぞれソースつきで解説されている。

また、ハイスコア記録のほうはPHPによるサーバ側のスクリプトがちゃんと用意されている。

まだアルファリリースということだけれど、ページ上ではブロック崩しゲームがちゃんと動いている。ソースを一括してダウンロードすることもできる。

投稿者 秋元 : 19:06 | トラックバック

2007年07月14日

プリンターが印刷する隠し追跡コードの問題

via del.icio.us/popular

プリンターによっては、印刷した際に肉眼では見つけづらい黄色の点を勝手に印字することで、その紙に印字したプリンターのメーカー名や機種名、プリンターのシリアルナンバーや印刷日時までが読み取れるようになっているらしい。

顕微鏡で拡大したイエロードットの写真

この件自体は、2005年に一度話題になっていた。

スラッシュドット ジャパン | Xeroxプリンタの印刷物に追跡コード

HotWired Japan ユーザーの知らぬ間に「追跡コード」も印刷

最初聞いたときは頭の悪い陰謀論みたいな話だ、と思ったけど、これを調べて注意を呼びかけているのはEFF(電子フロンティア財団)だし、実際に打ち出された黄色いドットから隠されている情報を再構築もできているようなので、どうも本当の話のようだ。アメリカ政府とプリンターメーカーとの契約によって、ニセ札の作成者を追跡するために組み込まれている機能だ、ということは確認されているという。

今回の話は、プリンターメーカーに対して「このドットを描画しないようにするにはどうしたらいいか」という問い合わせをした人のところに、数日後にシークレットサービスのエージェントが訪問してきたという話が発端らしい。

seeing yellowというサイトで、プリンターメーカーに対して監視コードを勝手に印字しないように文句を言おう、という呼びかけをしていて、すでに250人以上が行動しているということ。

行動したらシークレットサービスに監視されるのがわかっていて抗議する人がそれだけいるところも、アメリカらしいなあ。

「ニセ札の追跡」と言っているけど、もっと他にもいろいろ監視しようとしてるんじゃないか、というEFFらの懸念が妄想でもなさそうだ、ということか。

EFFでは、この機能を持っているプリンターのリストというのを作って公開している。

表の"Dots?"のところが"yes"になっているものがそれ。"Comments"のところで"EFF test"とあるのはEFF自身が確認したものということらしい。

それなりにコストがかかるのか、あとは本来のニセ札追跡機能であれば性能の悪いプリンターは気にしなくていいからか、主にハイエンドのプリンターにしか搭載されていないということだけれど、非常に多くのプリンターベンダーがこのプログラムに参加しているということになる。

日本メーカーのプリンターも多い。アメリカ輸出向けにわざわざ仕様を変えているかどうかわからないので、日本で売ってるプリンターもひょっとするとこの黄色いドットを打ち出しているのかもね。

それを日本の警察が活用してるなんてこともありうるのだろうか。

# 数日後にサイボウズ・ラボに誰か来たりして…

黄色いドットは、高性能のスキャナでその紙を読み込んだ上で、グラフィックソフトで色調を変えたり拡大したりすると見つかるらしい。あと暗室で青色LEDを使うと見える、というのもあるけど。ちょっと僕の環境では試せないな(プリンタも7000円で買ったプリンタだし)

[2007.07.17 追記]

みんなにプリンターメーカーへの問い合わせを勧めるMITの意図は、人力DoS、つまりシークレットサービスが監視しなきゃならん人数を莫大にすることで、この監視を意味の無いものにしようということだ、という解説が出ていた。(via Digg)

投稿者 秋元 : 11:52 | コメント (2) | トラックバック

2007年06月20日

gotapi 様々な言語のマニュアルを修正したアグリゲーションサイト

via del.icio.us/popular

様々なプログラミング言語やツールのAPIなどを一箇所に集めて、Ajaxによってインクリメンタルサーチを提供していたgotapi.com が、Widgetによる検索ボックスの提供を開始した。

widgetで自分のサイトに特定の言語の検索ボックスを貼り付けることができる。複数貼ることはできないようだ。

Widgetの提供は今風と言えるかもしれない。いわゆるウィジェットベイト。

[関連]

phpFunctions

投稿者 秋元 : 09:08 | トラックバック

2007年06月11日

世界最大の"Hello, world!"

via digg

ドイツの学生が作った、世界最大の二次元バーコード(Semacode, 日本のQRコードのような規格)で"Hello, world!"を表示するプログラム。

# プログラム? データ? バーコードはプログラムなのだろうか。

コーディングは芝刈り機で。

flickrにはそれ以外にも作業中のいろいろな写真がある。

投稿者 秋元 : 15:22 | トラックバック

2007年06月07日

Photosynthのデモ。ユーザの写真を大量につないで空間を再構築する

以前にマイクロソフトのPhotosynthについて紹介したのは一年近く前になる。

アーキテクトのAguera y Arcas氏が3月にTED 2007カンファレンスで発表したPhotosynthの最新状況がYouTubeに上がっていた (via del.icio.us/popular)

前半は、シームレスにイメージを拡大縮小できる表示技術。本一冊の画像を全文から一文字まで拡大していくデモ、新聞を見たいところだけどこまでも大きくしても読める、世界地図から道路一本までの拡大など。

3:00頃からは、高解像度の画像処理機能に、画像と画像をつなぎあわせてそれらを自由に拡大縮小して見ていくデモがはじまる。

3:50からノートルダム大聖堂を使って実際に建物の詳細を拡大して見ていくというデモ。Flickrから集められた多数の写真が、共通点を見つけて重ね合わせられている。

5:20 ポスターの前に立つ男性、の写真から寺院にダイブしていく。同じ建造物という共通点を使って仮想空間のリンクが自動的に作られるようなイメージになる。

後半、Aguera y Arcas氏は、多数のユーザがカメラや携帯電話で撮った写真から作ることで、機械的にリアルな仮想空間が実現できると述べている。「メタバース」という単語も出てくるので、「手で頑張って作った仮想空間」(*1)に対する優位性も意識してるのではないだろうか。

WikiのWiki nameやはてなキーワードのように、文章中の単語に自動的にリンクを張って作るように、多数の写真にリンク関係が作られ、またそれを使って機械的に仮想空間(それも、セカンドライフなんかとは比べ物にならないほどリアルな)ができるというのはすごいと思った。

たぶんデータの処理速度とかに課題があるんじゃないかなと思うが、今後の研究の進展に期待したい。

(*1) セカンドライフの東京タワーとか、先日発表された東京を再現するmeet-meとか、ユニバーサルセンチュリーとか。

投稿者 秋元 : 13:28 | トラックバック

2007年06月06日

温度で色が変わるカップ蓋

via geekologie

熱くて危険な飲み物が、ひと目でそれとわかる使い捨てのフタ smart lid system。

温度で模様が変わるマグカップとかはあったと思うけど、使い捨てでやるにはコストダウンの努力があったんだろうね。

投稿者 秋元 : 11:34 | トラックバック

2007年05月31日

Google GearのWebアプリオフライン化

あたらしく発表されたGoogle Gearだが、ネットワークにつながっていないときでもローカルに置いたDBにデータが保存できるようにするというアプリケーション。

Zimbraのオフラインサポートや次のFirefoxの機能とぱっと見同じかなあ。デモも同じようなものだし。

どんなときにオフラインでのWebアプリが必要になって、そこではどんなデータがキャッシュされているといいのか、というのは、オフラインサポートをした実用的なアプリケーションが出てこないとわからないだろうな。

投稿者 秋元 : 11:53 | コメント (2) | トラックバック

2007年05月29日

PHP date()関数用指定子ジェネレータ

via reddit

PHPのdate()関数では、日時をいろいろな形式に変換することができる。ただ、「いろいろな形式」がたくさんあるので、何かやろうとするとマニュアルを見ることになる。

このジェネレータでは、左側の説明を元に、その場で現在時刻や指定日時を元にフォーマット変換した結果を得ることができる。

また、変換された文字列のどの部分がどの指定子にあたるかもツールチップ表示される。

PHP Date Generator

日時の表示で試行錯誤するときに使うとちょっと便利かもしれない。

しかし、

• 左側の説明が英語
• 日本語が通らない
• ページ遷移しないと変換結果が試せない

ので、だれか日本語化+Javascript化しないかなー。

投稿者 秋元 : 17:53 | トラックバック

2007年04月29日

viマグカップ

via del.icio.us/popular

2年前にスラッシュドットジャパンで別バージョンが紹介されてたみたいだけど、それとはまた異なるデザインで、viのコマンド一覧を印刷したマグカップというのがあった。

印刷されているリストの一部も大写しになっていた。

いつも手元にあるものにチートシートがついていると、ちょっとしたときに役に立つのかもしれないね。

投稿者 秋元 : 12:30 | トラックバック

2007年04月26日

Yod'm 3D - Windows XP/2000でも3Dデスクトップ

via del.icio.us/popular

Yod'm 3Dというアプリケーションをダウンロードして実行すると、Windows XPでも下のような回転するデスクトップマネージャーを使えるようになる。(Vista, 2000でも。Direct X9が必要)

これでMacOSXやLinux Desktopを見てもうらやましい点が一個減ったか?

投稿者 秋元 : 10:31 | コメント (2) | トラックバック

2007年04月23日

世界最大のコンピュータ・ディスプレイ

via digg

ドイツのビルの窓を使って作られたPCディスプレイだそうで。窓ごとにスクリーンを張って、その後ろから投光するデバイスを配置、それぞれはケーブルでPCにつなげられて制御される、ということのようだ。

単色で、解像度もガラスの枚数ではあるけど、かなり大きなディスプレイではある。

動作期間中は、解説ページで示された電話番号に電話してプッシュ音で指定することで、Pongやパックマンを表示させ、さらに移動もプッシュ音で伝えて遊ぶこともできるということ。ウェブカメラとあわせれば、日本からこのゲームを遊んでる様子をドイツで大映しできるのかも。

ビルでクリスマスツリーを表示したりするのがあるけど、あれは人力っぽいし変化もしなさそうだからこの「最大」という触れ込みはあってるのかな。

投稿者 秋元 : 11:13 | トラックバック

2007年04月20日

Yahoo! JAPAN WEB APIコンテスト締め切りまであと10日

締め切り10日前なのでリマインドしてみる。

Yahoo! Japan Web APIコンテストの応募締め切りは4月30日（月・祝）

前に紹介した際のエントリはこちら

APIとマッシュアップに関してなにか面白いアイデアがある人はぜひ参加されたし。

投稿者 秋元 : 13:56 | トラックバック

スマートミラー 洗面台がコンピュータに

via haha.nu

ウォータールー大学で開発されたSmartMirrorというタッチスクリーンを鏡に組み込んだ製品のビデオがあった。

洗面台で歯をみがいたり、顔を洗ったり、ヒゲを剃ったりしながらも情報を得たい、という人はいるようでｓ、調べたら過去にもフィリップスや日立が「鏡+テレビ」的なものを出していた。

今回のは受動的なテレビではなく、タッチスクリーンでインタラクティブに操作できるパソコンになっているところが違うということか。

天気、ニュース、株価などについて知りたいところを選んで詳細を見ることができる。音声認識でのBGMの変更もデモしている。

鏡のタッチしたりスクロールしたりしたところに石鹸とかたくさん付くような気もしないでもないけど、コストが下がってこんな鏡が普通に家につくようになったらいいなあ。

投稿者 秋元 : 12:11 | トラックバック

2007年04月19日

マウスをブルブルさせるUSBツール

via The Raw Feed

すごいことを考える人はいるもんだ。

Mouse Jiggler Simulatorは、USBポートに指しておくとマウスカーソルをブルブルと震わせてくれるというステキアイテム。

これを使えば、コンピュータが勝手にスクリーンセーバーを起動したり省電力モードに移行したりしない、ってオイ。

セキュリティ規約で、PCを離れたら画面が必ずロックされてしまうような設定になっている企業などでも、画面がロックされてイライラすることはなくなります、とかユースケースに書いてある。そもそも、そんな企業だったらこんな変なUSBデバイスを挿すことも許してないのでは、という突っ込みは野暮なんだろうなあ。

大きく震える高速版と、小さく震える低速版の二種類が用意されている。WindowsにもMacOSXにも対応し、今ならたったの$29.95で買えるということ。冗談と思ってたら本当に売ってるし。

投稿者 秋元 : 18:03 | トラックバック

2007年04月16日

Linuxディストリビューション進化図

via digg

このディストリビューションはあのディストリビューションの流れを汲む、とかそういうのがわかる、タイムライン上に書かれたLinux派生の系統図があった。

とはいってもPlamoとかVineとかもないし、特定用途向けやローカルに勢力のあったものとかも含めるとこんな数ではおさまらないんだろうな。

[参考]

Unix全体に関する同様のもの。もっと長くて広くなる。

投稿者 秋元 : 18:39 | コメント (1) | トラックバック

2007年04月14日

データ構造とアルゴリズムの解説ブログ

via del.icio.us/popular


datastructures は、データ構造とアルゴリズムに関するトピックを、図解(動くものや動画のものもある)とC++/Cのコードで解説するブログだ。

ハッシュ表、二分木探索、ハフマン法、各種ソートアルゴリズムなどをわかりやすく解説している。Wikipediaとかでもカバーされているとは思うけど。

投稿者 秋元 : 10:00 | コメント (2) | トラックバック

2007年04月12日

Firefoxの中のFirefox

via reddit.com

Firefox Inside Firefoxで、FirefoxのアドレスバーにFirefoxブラウザ自身のxulを指定することで、内側にブラウザを表示するというのが紹介されていた。

Firefoxのアドレスバーに入れるのは

chrome://browser/content/browser.xul

何回もやるとこんな感じになった。

大事なものを開いてるときは試さない方がいいかと。

投稿者 秋元 : 19:38 | トラックバック

2007年03月28日

第一回天野カンファレンスに参加してきた

国内有数の天野さんを集めた天野カンファレンスの記念すべき第一回に行ってきた。

僕はオブジェクト倶楽部のニュースレターはずっと購読してるのだけれど、あまりイベントには参加できていなかった。しかし今回のように、天野さんと天野さんと天野さんが集まって話される機会もそうはないし、これはぜひ聞かねば、と思った次第。

写真入りのレポートはこちらなどで。一言だけ感想を書くと、これまでもやもやしていた「天野」に対する理解が少し深まったような気がする。

オブジェクト倶楽部は6月20日(水)に有料イベントを開催されるということ。XPやオブジェクト指向に興味のある方はニュースレターの購読をオススメする。

投稿者 秋元 : 23:44 | トラックバック

2007年03月23日

Elastic List(エラスティック・リスト)

via del.icio.us/popular

Elastic ListsというFlashによる新しい可視化デザインのデモ

このデモでは、ノーベル賞受賞者を、分野・性別・出身国・受賞年代・受賞年の5つで選択できるようになっている。

それぞれについて、数の大小で表示エリアのサイズに差がつけられていたり、明るさの違いで性質の違い(具体的にはよくわからなかったが)が表現されていたりする。

上の例だと「物理学賞」「男性」「日本」を選んでいて、選ばれている箇所は黄緑色になっている。

下は、その条件に応じた受賞者の詳細や顔写真が出てくる、というわけ。名前はあってるけど写真はどうみても日本人じゃないが、これはデモだからだろう。写真はかなり適当に出てくる。

[追記] コメント欄の指摘を受け、デザインの作者がMoritz Stefaner氏であることを確認したのでこちらに追記させていただく。

投稿者 秋元 : 20:35 | コメント (2) | トラックバック

JavascriptによるC系ソースコードのハイライトライブラリgoogle-code-prettify

via del.icio.us/popular

google-code-prettifyは、Javascriptによるソースコードの色づけライブラリ。

HTMLの中に含まれた、C, Java, Python, Bash, SQL, HTML, XML, CSS, Javascript, Makefileなどのソースコードコメントや文字列、予約語を色つきでハイライトしてくれる。それ以外でも、Ruby, PHP, Awkや一部のPerlコードでも動くだろうということ。

使い方はこちら。jsとcssをインクルードして、bodyタグに onload="prettyPrint()"を追加。コードはpreタグかcodeタグでclass属性"prettyprint"をつけるだけ。

テストコードを兼ねたサンプルがここにある。

ハイライトの色などは別途CSSで指定できるので、自分のこのみの表示形式にすることができるだろう。

投稿者 秋元 : 01:00 | トラックバック

2007年03月16日

Google Hacking Database - ハック向けGoogleキーワード集

Googleの検索キーワードを工夫すると、サイトの持ち主が意図していなかった隠れたデータを探せる、というのはたびたび話題になる。

Googleを使ってサイトのセキュリティテストをするという著書もあるJohnny Long氏による、既知のそういったキーワードのデータベース Google Hacking Database のURLが変更されたようだ。(データの更新は2006年で止まったままのようだが)

Google Hacking Database

いろいろなカテゴリーの検索キーワードがある。いくつかカテゴリーを紹介すると

• すでに知られているセキュリティホールで放置されているものを探す
• エラーメッセージに出さなくてもいい情報まで表示されているものを探す
• 重要な情報、ユーザ名、パスワードなどを検索する
• 商品やオープンソースアプリのログイン画面を検索する
• ファイアウォールやサーバのログファイルを探す
• プライバシー情報、顧客リストなどを探す
• ネットに接続しているプリンターやカメラなどのハードウェアを探す

などなど。それぞれのカテゴリに大量の実例が載っていて、これらの検索キーワードを考案した人たちのアイデアの豊かさには驚かされる。大量にありすぎて、わが身を振り返ってチェックするのはたいへんだが、勉強になることは間違いない。

[GHDBについて過去に日本語で解説されているページ]

ITMedia: Googleハッキング

Geekなページ: クラッカーがGoogleを使って脆弱なサイトを探す方法の例

投稿者 秋元 : 10:21 | コメント (2) | トラックバック

2007年03月09日

<canvas>タグをつかった3D表示ajax3d

FirefoxとOperaのみ対応だが、<canvas>タグを使って3D表示をするオープンソースプロジェクトajax3dのデモが公開されている。

遊び方は、左クリックで飛び、右クリックで撃つ。

それにしてもこのデモ、難しすぎる…

投稿者 秋元 : 20:00 | トラックバック

2007年02月28日

Yahoo! UI LibraryによるJavascriptゲームのサンプル集

Yahoo! UI ライブラリを使って、テトリス(Yetris!)、15パズル、スペースインベーダー、ソリティアなどを作って公開しているKris Cieslakという人のインタビューが、Yahoo User Interface BLOGに出ていた。

それぞれのゲームについては、Javascriptでも昔からそれなりのものはあっただろうと思う。テトリスについては、何年も前にすごい方法で作ってた人もいるし。ソリティアがしたければWindowsについてるやつを起動すればいいでしょ、という話はある。まあ、これらの目的は技術力のデモ的なところがあるのだろう。

ライブラリを活用し、ゲーム本体のJavascriptファイルはどれも非常に小さい(10KBとか20KB)ところがこれらのデモの肝かなあと思う。

これで、Yahoo UIライブラリの各ファイルはYahooにあるものを呼べるようになったことをあわせると、Javascriptでいろんなものが動いたり動かせたりするページも、より軽く作れるようになってきたということじゃないだろうか。

インタビューでは、それぞれのゲームの開発時のエピソード(大晦日にパーティーにも行かずに作ってた、とか)や苦労したところ(どうやってJavascriptだけで一枚画像を分割したか、とか)、なども語られている。

投稿者 秋元 : 17:52 | トラックバック

2007年02月23日

Yahoo! JAPAN WEB APIコンテスト

11月にPHPxAPIの本を出した関係か、Yahoo! Japanさんよりお声をいただき、Yahoo! JapanのWEB APIコンテストに審査員として参加させていただくことになった。

本日から応募開始となっている。

優秀作品はYahoo! JAPANのサービスとして採用される可能性も!

ということなので、日本でのYahoo! JAPANのシェアを考えると、本採用されるようなサービスを作ったらすごいことになりそうだ。

また、そこまでいかなくても、次の文も注目だろう。

受賞作品はYahoo! JAPANや各種雑誌・ウェブサイトで紹介されます。また、優秀作品はYahoo! JAPANのサービスとしての採用も検討されます。

何が大きいって、入賞するとYahoo! APIを使ったアプリケーションとしてYahoo! ディレクトリに載るそうなのだ。Yahoo! ディレクトリの掲載価値を考えるとこれもすごいと思う。

Yahoo! JAPANのAPIと他社のAPIを絡めたマッシュアップもOKということなので、かなり自由度も高いと思う。いいアイデアのある方はぜひ応募してはと思う。

投稿者 秋元 : 23:57 | トラックバック

2007年02月02日

Vistaの音声認識セキュリティホールに思う

via Vistaで勝手にファイルを削除されるセキュリティホールが見つかる など

たとえば「ファイルを削除」といった音声をMP3ファイルに録音し、友達に送ります。それを友達が再生すると、マイクが認識してしまえばそのとおりに作動してしまいます。

マイクロソフトから、このセキュリティホールの存在を認めたという返事を貰ったというGeorge Ouの話では、この問題は

• マイクとスピーカーがつながって
• 音声認識機能がオンになっている

という状況でのみ発生するらしい(そりゃそうだ)。とりあえずの回避策は、

• マイクやスピーカーを切れば、このセキュリティホールは発動しない。
• コマンドを実行するような音楽ファイルを開いてしまったら、メディアプレイヤーを閉じ、音声認識機能をオフにして、コンピュータを再起動するべきということ。(間に合うのだろうか)

いろんなところで、「良くないコマンドを実行させる音声ファイルを送りつけて」みたいに書かれているけど、そんなことしなくても、開くと音が鳴るウェブページに誘導するとか、YouTube等に最初は魅力的な動画で、途中でいきなりコマンドを喋る動画をアップロードするとか、任意の音を鳴らすだけならいろいろありそうな気がする。

# これまで、その手のいたずらは起こってないのかな。動画の途中からいきなり不快なものを挿し込むとか。

MSの回答はもちろん今危険にさらされている人のための暫定的な対策で、今後ちゃんとした対策を考えるのだと思うけど、音声認識機能をあきらめる、という以外の解決法ってどういうものだろう?

OSが音楽を鳴らすときに、「これはOSが鳴らしてる音だよ」みたいな識別信号を(人間に聞こえない周波数で)混ぜたりするのかなあ。しかし、単純なものならそれを含めて音声を作ればいいわけで、そうすると識別信号に時間情報やシステム固有のキーを入れるとか…

それか、自分の出した音をちょっとだけ覚えておいて、それを入力の音声から差し引くとか…

なんにしてもリソースを喰いそうだなあ。CPUベンダーとかハードベンダーが喜ぶかも。

投稿者 秋元 : 10:56 | コメント (5) | トラックバック

2007年01月22日

舌で見るカメラ

目の不自由な人でも、舌を使ってものが見えるようにするための研究、というのがあるそうな。

このブレインポート(Brainport)というシステム、カメラで撮影した風景を入力とし、信号を変換して舌に刺激を与えるデバイスで出力する。

舌からのシグナルを景色として認識できるように脳を訓練することで、通路やオブジェクトを認識できるようになるということだ。ビデオに出てきた男性は、パッカーズのチームロゴまでわかるようになっている。

将来はもっと解像度を上げて、より多くの情報が舌からわかるようになるということ。とても期待できる技術だと思った。

投稿者 秋元 : 12:26 | コメント (4) | トラックバック

2007年01月15日

Wiiのもらえるトイレ我慢大会で水中毒死者が

カリフォルニア州サクラメントで、水を飲んでいちばんおしっこを我慢した人は任天堂の新ゲーム機Wiiをもらえるというラジオ局のコンテストに参加した女性が、帰宅後に死亡したというニュースが。(CNN, YouTube)

# Wiiとおしっこ(Wee)をかけた大会らしい。なんかアメリカっぽいコンテストだな

死因は「水中毒」ということらしい。水だって飲みすぎれば中毒死してしまう、ということか。

毎週毎週、「ナントカを食べれば体にいい」みたいなテレビを見て、次々と別の食品に群がってる人たちがいるみたいだけど、水ですら取りすぎで死ぬんだから、何だって集中して摂取しちゃ体に悪いよなあ。など思ったり。

[追記 2006.01.16] BBC Newsで、水の過剰摂取でどんな問題が起こるのか、なぜこの女性は死に至ったのか、が解説された

[追記 2006.01.17] いろんなところで報道されてるようだが、このラジオ局が事件に関連して10人の局員を解雇したとのこと。

投稿者 秋元 : 00:26 | トラックバック

2007年01月14日

"Google"を打ち間違えただけで起こる悲劇

PCを起動し、IEから"google.com"を"goggle.com"と打ち間違えただけで、どんなひどいことが起こるか、というのを見せる映像。

とはいっても、Windows XPをアップデートしてないとか、IEで開くとかいろいろな条件が必要で誰でもこうなるわけではないみたいだけど。

google.comに似たドメイン名を取得し、そこにウィルスをばらまくようなページを設置して、ミスタイプするユーザを待ち構える人がいる、ということだろう。google.comぐらいになると、ミスタイプする人だけで毎日かなりの数いるに違いない。

アップデートしてないWindows XPなんてものが手元には無いので、どこまで再現するかは試してない。

あと、「ご家庭では試さないでください」、「この映像を作成するにあたって、どんな動物も犠牲になっていません」とかのちょっとしたジョークも面白い。

Windows Updateをかけてない人は決して真似しないように。というか、すぐ更新したほうがいいよほんと。

[2008.02.27 更新]

元の動画がYouTubeから消えていたので、同じ内容のものを探して差し替えました。コメントの方ありがとうございました。

また、Windows Vistaで同じサイトにアクセスした場合に、警告が出たりして、致命的なことにはならないようになっているよ、という比較動画もみつけました。

投稿者 秋元 : 20:57 | コメント (2) | トラックバック

2007年01月13日

スキャナで奏でるエリーゼのために

via del.icio.us/popular

動画が見られる人は見てもらうのが一番早い

スキャナのヘッドが「エリーゼのために」を演奏している。

どんなスキャナでもこれができるというわけではなくて、HPのスキャンジェット4c/4pというスキャナに搭載された隠し機能を、さらにソフトウェアを書いて呼んでいるそうだ。ソースも公開されている。

スキャンジェット4c/4pは日本でも売られていたようだ。もう10年以上前の機種だからあまりないかもしれないけど、もし職場にあったら、突然スキャナで音楽を鳴らしてみるイタズラも楽しいかもしれない。

投稿者 秋元 : 15:03 | コメント (2) | トラックバック

2007年01月07日

プログラミング2.0

Programming 2.0 from O'Reilly Rader

O'Reillyが、送られてきたメールに書かれていたプログラミング2.0の定義を紹介している。

Programming 2.0

1.0	2.0
バイナリ	テキスト
コンパイル	プラグイン
書く→コンパイル→実行→テスト	書く→テスト→実行
周期的なリリース	リアルタイムの更新
エンドユーザによるベータテスト	ユーザ作成のライブラリ
ベンダー制御	エンドユーザ制御
遅い	速い
中央集中/プロプライエタリ	分散/オープン
生産に注力	創造に注力
手続き	オブジェクト指向
コードのカスタマイズ	カスタマイズできるコード
壊れやすい	アジャイル
「社外ライブラリを信用しない症候群」	「ちょっと友達に手伝ってもらった」
一枚岩	モジュール構造
大きなことが強み	小さなことが強み

O'Reillyも、上記の全部に賛成しているわけではないが。おおまかには、さまざまなプログラミングの現場で、あるいはプログラマーの意識における優先順位において、上記のような変化が起こり、続いているところはあると思う。

投稿者 秋元 : 05:10 | トラックバック

2007年01月06日

Wiiの次にくる?インタフェース

センサーを組み込んだコントローラで、実際のスポーツの動きに近い入力ができるWiiが評判になっているが、もっと自由なインタフェースを試しているデモの動画があった。

声を上げるとパワーが溜まったり、好きな武器を使うとそのままゲーム画面に出たり、ジャンプなど実際のプレイヤーの動きよりも誇張された技が出たり、というもの。

両側にゲーム画面があるのは、プレイヤーがどちらを向いていても遊べるようにするためだろう。理想的には四方や上方にもディスプレイが必要なのかもしれない。

最後の方の二人プレイは、さすがに無理がある。プレイヤー同士が現実世界で干渉してしまうからね。

投稿者 秋元 : 20:31 | トラックバック

2006年12月30日

会社で見るとヤバイページへのリンクを弱めるFirefox Extension NSFW

via digg

NSFW(Not Safe|Suitable For Workの略)、つまり「会社では見ない方がいいよ」という注意書きで書かれているタイトルやリンクがたまにある。主に品の無い画像・動画を含むようなページを紹介するときのマナーとして書いている人もいるのかもしれない。

普通は、リンクやその周辺のテキストに書くような参考情報だけれど、リンクに付随する情報として、属性を作ればいいんじゃないか、というブログでの提案がまずあった。これが12月29日。

とりあえず、rel="nsfw" とか、 class="nsfw"で表記することでどうか、という提案と、モダンブラウザでそれらの強調をするためのスタイルが提示されている。

NSFW Extensionは、それを見て作成された、上記のタグがあったらリンクを区別(具体的には薄く表示)してくれるFirefox拡張ということだ。

もちろん、みんながこの属性を使わないと意味はないわけで、仕組みの提案はいいけどこの先どうするの、という話はある。rel="nofollow"がこれだけ広まったのは、SEOというウェブサイト製作者の関心に直結していたことや、ブログシステム側の更新で比較的簡単に普及させられたからというのがあるし。

最初の提案エントリのコメント欄には、マイクロフォーマットの規格を多数提案しているmicroformats.orgの人から、「それmicroformatsでできるよ。rev使おうよ」という逆提案も出ているのだが、これはスルーされている。そんなに需要の高いフォーマットかどうかわからないし、やるんだったら協力してほしいが。

たまに、(音が出ます、注意)(リンク先ページはブラウザサイズを変えます)とか書くことはあるけど、こういうのも注意書きとして統一したフォーマットで書けるといいかもしれないね。

投稿者 秋元 : 15:15 | トラックバック

2006年12月29日

動画修正はここまでできる

動画といっても、ここまで合成や修正ができるようになってるんだ、というビデオ。

静止画の改竄はそれほど驚かなくなったけど、動いているものを動いているままここまで変化させられるのか、というのがよくわかるビデオ。

まったく違う車内と風景を合成したり、女性の髪の色は自由に変えられる。別々に撮った同じ場所の必要部分を合わせたり、まったく異なる複数のシーンをつなげて、まったく別の場所で起こったことのように見せることもできている。女優のアップはどれも問題のあるところがキレイに修正されている。

これぐらいできてしまうということは、ビデオがあったとしても簡単にそれを証拠とはできないということじゃないだろうか。加工する隙や時間があれば、そこにいないはずの人を持ってくる、なんてこともできるわけだし。ビデオが加工されていないかどうかをチェックする技術も重要となるだろう。

投稿者 秋元 : 21:54 | コメント (2) | トラックバック

2006年12月26日

無重力化での水滴を使った実験の動画

via digg

水滴というか水玉。ISSでのNASAによる実験のビデオ。

実験は3つのパートにわかれている。

水玉に空気をぶつけて、水玉全体の動き、波の伝播を見る

水玉の内側に空気の玉を作り、さらにそこに小さな水玉を入れる。水玉同士の衝突による軌道の変化。

アルカセルツァー(バファリンみたいなもの)を溶かして、泡の変化を見る。大きめの泡が他の泡を併合していき、両極の大泡、さらに一つの大きな泡となる様子

投稿者 秋元 : 10:55 | トラックバック

2006年12月21日

写真レタッチによる人物修正の妙技

via del.icio.us/popular

写真のレタッチ技術で、どれほどすごい修正ができるのかを表したビデオ。いろいろな顔の修正前、修正後が見られる。

これもいろんなところで既出だけど、レタッチといえばDoveのCMやレタッチの前後をマウスを載せる動作で確認できるサイトも必見。(via 上記動画にいち早くブックマークしていたnoshukeさんのコメント)

こうやってみてると、写真の証拠能力なんてものは、どんどん無くなっていくのかもしれないなあ。そして動画もそれに続くんだろう。

投稿者 秋元 : 11:39 | トラックバック

2006年12月19日

本当に使える10個のWebサービスAPI

via del.icio.us/popular

LinuxWorldの記事で、10個のWebサービスAPIが解説と共に紹介されている。

1. Google Maps API
2. Geonames.org
3. OpenID
4. Amazon S3
5. Amazon EC2
6. Atom API
7. OpenSearch
8. Open Media Profile
9. MediaWiki API
10. JS-Kit

特定のサービスを便利に使うためのAPI(Flickr APIとか。あれはあれでよくできているけど)ではなく、実際の問題を解決するために使える10個を選んだ、ということだ。

1, 4, 67は「PHPxWebサービスAPIコネクションズ」でも扱っている。2番も同じものではないが日本で使えるものを紹介した。

上記のリストには、日本向けに出てないものもあるし、日本語の解説がまだまだ少ないものも多い。全部が伸びるかどうかはわからないけれど、面白いセレクションだと思うので、今から手をつけて見ておくといいかもしれないなと思った。

ちなみに、僕個人としては、面白いと思ったから本で紹介したので、本にあるのはまあおすすめとして、Amazon EC2やOpen Media Profileもよさげ、と思っている。

投稿者 秋元 : 11:30 | トラックバック

エッチなファイルを隠す方法

via del.icio.us/popular

"How to hide porn"とはまたダイレクトなタイトルだが、他人に見られたくないファイルはどうやって隠せばいいか、という記事。

はしょって結論のところを訳すと、

「リモートにあるコンピュータ上の、隠されたユーザアカウントで、ドットのついたフォルダー(記事はMaxOSXでの方法)に暗号化されたディスクイメージを作り、そこに入れておく。誰かが何も入ってないと勘違いして隠しユーザアカウントを消したりしないように、ユーザ削除権限は他の人には与えない」

だそうだ。

記事には、上記を実現するためのMaxOSXの機能やソフトウェアについても詳しく書かれている。IMAPサーバとかiPodなども候補として検討されている。何か大事なデータを隠したい人には参考になるのではないか。

投稿者 秋元 : 10:23 | トラックバック

2006年12月13日

GoogleがAjaxフレームワークのGWTをオープンソース化

Google Web Toolkit(GWT)の公式ブログで、GWT1.3のリリース候補版がApache 2.0ライセンスになってリリースされたことがアナウンスされた。

バージョン1.3は、前の1.2から機能が増えたわけではなく、バージョンを上げた最大の理由はオープンソースライセンスへの変更にあるということ。

JavaだけでAjaxアプリケーションを開発できるGWTは、Javascriptに詳しくなくてもサーバ側の言語を知っているだけで開発できることや、ブラウザ互換性の吸収、デザインやデバッグの簡易化などの利点がある。

GWTについて、詳しくは弊社の親会社であるサイボウズの開発部が調査しているのでそちらを参照されたい。

GWTはWebアプリケーションを作成するJava使いにとっての一つの大きな助けではあったが、これまではGWT本体の内部がGoogle外に公開されていなかったため、無料ではあるもののツールの内部まで追うことができなかった。

今回のオープンソース化で、外部の開発者による改善、たとえばGWTでサポートされていないブラウザやOSへの対応が進んだり、Googleが自社の開発には必要としていない部分の機能が改善されたり、というのが期待できるかと思う。

投稿者 秋元 : 09:50 | トラックバック

2006年12月12日

PEARライブラリ作者地図

PHPxWebサービスAPI本でも多用していたPHPの公式ライブラリPEAR。そんなPEARのライブラリ開発者を地図上にプロットしたページがPEAR公式サイトに登場した

PEAR Developer's locations

投稿者 秋元 : 13:01 | トラックバック

Java SE 6出た

Java SE 6, JDK6が正式にリリースされたようだ。

Java Web Startを使ったオンラインインストールが、なぜか手元ではエラーになったので、昔ながらのオフラインインストールを実施。

いつものように、新たにインストールしたjava, javacの有りかにパスを通して。

今回の目玉としては、やっぱりスクリプトエンジンかなあ、ということで、Javascriptをためしてみた。いやまあ、ほとんどSunのマニュアルを追っただけなんだけど。とりあえずこんな感じ。

import javax.script.*;

public class JsTry {

    public static void main(String[] args) {

        // Javascript用のエンジンを取得

        ScriptEngineManager manager = new ScriptEngineManager();

        ScriptEngine jsEngine = manager.getEngineByName("JavaScript");

        // 実行

        try {

            jsEngine.eval("println('Hello, world!')");

            jsEngine.eval("println(365*24*60*60)");

        } catch (ScriptException ex) {

            ex.printStackTrace();

        }

    }

}

> javac JsTry.java

> java JsTry

Hello, world!

31536000

# ブログにコードを貼り付ける方法で悩むの巻を参考にしてみた。というかスタイルをそのまま使わせていただいた。

投稿者 秋元 : 12:29 | トラックバック

2006年11月30日

伝説のマシンAltairが通販で買える

アルテア8800の「新品」を通販しているサイトがある。

アルテア8800、僕は見たことないんだけど、ビル・ゲイツがBASICを開発し、マイクロソフトの歴史を始めた、1975年発売のキット・パソコンだ。

現在入手できる部品を使っての勝手クローン復刻、ということになるのかな。復刻されたマニュアルに、この売主による追加ガイドもついている。

1台が既に売れていて、2台は予約済、あと2台がeBayにてオークション中。注文から3,4週間で届けられるそうだ。

eBayオークションのは今20万円ぐらい。バイナリアンの人、リビングに一台どうだろう。

投稿者 秋元 : 13:34 | トラックバック

2006年11月29日

ダブルマウスによるマウス移動記録

via del.icio.us/popular

PCでの作業中のマウス移動を記録し、アプリケーションのインタフェースや機能、作業効率を振り返るというのはよくあるけど、ni9e.comではきわめて単純な方式が提案されている。その名も「2XMOUSE(ダブルマウス)」

いやもう、みたまんまなんだけど。

マウスケーブルを二つに分岐させて、二台のPCに挿せば二台同時にあやつれて便利じゃね? という、なんともおバカな発明だ。

一台を作業用、一台をマウス移動記録用(!)にしておけば、一日の仕事が終わったときにはマウスで書いた絵もできあがっている。なんの意味があるんだ。

投稿者 秋元 : 09:57 | コメント (2) | トラックバック

2006年11月26日

超スモールサイズLinuxパソコン

via del.icio.us/popular

linutopは、ネットサーフィンに必要なソフトを組み込んだ、ディスクレスの軽量linuxマシン。

ディスプレイ、キーボード、マウスについては出先にあるものを使い、本体だけを持ち歩く、ということもできそう。この小ささ(280グラム)だったら持ち運びは苦にならなそうだ。

投稿者 秋元 : 17:33 | コメント (1) | トラックバック

2006年11月20日

世界最高のウェブサイト

via digg

世界で最高、つまり最も高いウェブサイトだ。(なんか違う)

種明かしはといえば、divに18939emという値を入れているだけのようだけど。これがブラウザの受け付ける最高値ということなのか。

解説によれば、Firefox系では、ページの高さを18.939583キロメートル(!)以上にしようとすると、かえって縮んだり崩れたりするということ。

IE系では、指定の結果、実際の高さが18キロに達しているかが不明ということ。(ちょっと説明の意味がわからなかった)

CSSを使ってレンダリングの限界を試したということで、意義はない、こともない、かもしれない。限界値テストはMSもMozillaもやってるとは思うけど。

エレベータ(直接リンク)もついてるので、延々スクロールさせなくても末尾に簡単に移動することもできる。

それと、printメディアタイプが指定されているので、間違って印刷ボタンを押しても安心。

投稿者 秋元 : 10:55 | トラックバック

2006年11月17日

世界の電圧・周波数地図

via Make:

Electricity around the worldというページに、コンセントの電圧と周波数を色分けした世界地図が載っていた。

東日本は、マダガスカルとだけ一致してる、4種類の中でも最もマイナーな組み合わせなんだね。

他は、まだらになってる南米、国内でボルトが統一されてないというブラジルなんか、すごいことに。

それから、サウジアラビア、リベリア(?)、台湾、韓国、フィリピンあたりが、まわりからういてる感じ。台湾は日本統治の影響だと思うけど、それぞれ電化の経緯で何かありそうだ。

日本の東西で規格が別なのは、ドイツとアメリカからそれぞれ導入したから、ということだけど、ドイツ方式の電圧については何があったのかね。

投稿者 秋元 : 16:45 | トラックバック

Flashによる複数ファイルアップロードライブラリSWFUpload

via Ajaxian

SWFUploadというFlashのライブラリがAjaxianで紹介されているが、これけっこういいのではないか。

• ファイルダイアログで表示される拡張子を指定できる
• 複数ファイルを、CtrlやShiftで選択できる
• イベント毎にJavascriptのハンドラを呼べる
• アップロード開始前にファイルの情報がわかる
• プログレスバーが表示できる
• ページ全体のリロード無しにアップロードされたファイルを表示できる
• Flashの動く環境すべてで動く
• FlashやJavascriptが使えない環境でも、通常のフォームアップロードになる

最後の項目は重要だろう。

リンク先でデモを試せる。"Try it out!"ボタンを押して、適当なファイルを複数選び、アップロードすると、ファイルサイズやプログレスバーが表示される。

複数アップロードは、Webアプリでよく要望されて困るところだし、プログレスバーもできなくはないけど、簡単にできるなら助かるだろう。

MITライセンスというところも嬉しい。

投稿者 秋元 : 01:09 | トラックバック

2006年11月16日

テーブルUIによるクールな新電子楽器rectable

reactableは、バルセロナにあるPompeu Fabra大学での研究。

ブロック上の機器をテーブルの上で配置していくことで、電子音楽を鳴らすという楽器。テーブル上に置いたブロックが、シンセサイザーの各パーツとなる。

それらの場所、向き、どの面を下にするか、他の部品との角度、などを元に、シンセサイザーのパラメータが変わる。

また、そのパラメータがテーブルの上に投射されることで、演奏者へのフィードバックにもなっている。

なんとか説明しようとはしたけれど、動画を見てもらうのが一番てっとり早そう

動画に出てきたのは、以下のようなブロック

• ジェネレータ
• フィルタ
• 正弦波発信機
• サンプラー
• メトロノーム
• シーケンサ
• ハーモナイザ

角度を変えたり、指で操作したりして、周波数や音量を調整する。近づけたり、並びを変えたりすることで効果が変わる。

もう一つ

そのほかにも、カンファレンスで来場者(子供にも)にも作曲してもらったりと、多数のデモビデオがこちらにある。

TUI(Table-based Tangible User Interface, テーブル上で触れるUI)を実現するために、テーブルの裏からパーツ配置を撮影し、それを解析するためのソフトウェアがオープンソースとしても提供されている。

なんとなく、「電子ブロック」を思い出した。ブロック上の電子回路を組み立てていくと回路が完成するというオモチャだ。一定以上の年齢のGeekなら懐かしいと思うことだろう。

投稿者 秋元 : 02:14 | トラックバック

2006年11月14日

Macノートの光センサでジェスチャー入力するソフト

Macintoshのノートは、液晶を閉めると自動的にスリープするらしいが、閉めたかどうかの判定には、どうも光センサを使っているようだ。

liltというソフトウェアは、この光センサを使ってユーザのモーションを検知し、ジェスチャーによる入力を可能にするもの。

光センサはスピーカグリルの下のほうにあるそうだ。この上あたりで手のひらを動かすと、その変化によって、アプリケーションを起動できたりするという。

ダウンロードして実行するだけで動くらしい。正式版では5ドルのシェアウェアになる予定ということだ。

MacにはUniMotionというライブラリがあって、これを呼び出せば自分で光センサを使ったアプリケーションも書けるそうだ。

[参考]

ジェスチャーによるウィンドウ切り替え、without マウス

2006年5月に紹介したこちらは、急な移動でハードディスクを止めるモーションセンサーを使ったアイデアだった。

叩く、というのは副作用が怖いし、光センサのほうがありがたい。しかし、精度については不明だ。

投稿者 秋元 : 11:31 | コメント (2) | トラックバック

最近Web2.0で流行るフォント

Great Fonts for Web 2.0では、最近ロゴをよく見かける、Web2.0なサイトを参考に、それらのフォントとそのフォントの特徴を説明している。

たしかに、アルファベットだと数千個のフォントがあるから、選ぶのはたいへんだろうけど。

投稿者 秋元 : 02:40 | トラックバック

2006年11月13日

100までの素数を求めるPHPスクリプト

元ネタはこちら。PHP 5.2.0リリース記念

for($i=2;$i<100;$i=gmp_intval(gmp_nextprime($i)))echo "$i ";

ワンライナーはあんまり好きじゃない。プロとして仕事で書くならこんなの。

$next = 2;

while ($next < 100) {

    echo "$next ";

    $next = gmp_intval(gmp_nextprime($next));

}

うーん、やっぱPHPって便利だ

前提条件: PHP5.2.0 gmp拡張をオン(Windowsの場合、php.ini に extension=php_gmp.dll )

投稿者 秋元 : 09:47 | トラックバック

2006年11月07日

当ブログ右側にある「人気エントリー」の作りかた

サイドフィードの赤松さんのブログで引き合いに出されていた、このブログ右側のサイドバーに置いてある「人気エントリ」。

> 要は「はてなブックマーク」でブクマされた数が多い順にエントリを貼り付けているのですが

む、なぜバレたんだろう。いや、見ればわかるか。

過去に話題になったエントリを、新しく来た人にも読んでもらいたいな、ということで、「過去に話題になった」を何かで順位づけないといけなかったんだけど、はてなブックマークの被ブックマーク数が多い順でいいかな、と思ったしだい。はてなブックマークの数は、はてなユーザの嗜好に偏ってるとは思うけど、他にいい指標もないし。

他所からとってきたRSSを加工して表示する方法としてMovable Typeのプラグインを使う手もあったんだろうけど、Perlは苦手なのでPHPのライブラリを使った。RSSをJavascriptに変換するfeed2jsというライブラリを別途設置して、MovableTypeのテンプレートからはそこで作ったJavascriptを読み込ませている。

表示させてみると、うちでは各エントリのタイトルにブログのタイトルも入れているので、そのままRSSを表示させると全部のリンクにブログタイトル(「秋元@サイボウズ・プログラマー・ブログ - 」)が入ってしまう。これを除去するコードをfeed2js.phpに書いて完了。

ということで、簡単にやるにはレビューポスターでいいんではないかな。

余談だけど、右側の人気エントリーは、ブックマーク数が100を越えるようなトップよりも、2,30個ぐらいのエントリーに面白いものが埋もれているかと本人は思っている。

投稿者 秋元 : 11:15 | トラックバック

飛行機の飛行データを可視化したムービー

アメリカ上空を飛んでいる旅客機のデータをプロットしたムービー。

東海岸から順番に夜が明けて、どんどん飛行機の密度が高まり、それが西海岸、ハワイへと移動していく様子が見える。

リンク先には他にも表現形式ごとにいろいろなムービーがある。

Quicktimeが再生できなくて、画質落ちてもとりあえず見たい人はYouTubeをどうぞ。

投稿者 秋元 : 00:00 | トラックバック

2006年11月06日

色で書くプログラミング言語Piet

Piet は、色の変化でインストラクションを表す、スタック言語だ。

プログラミング言語といえばまずこれだろう。言語作者本人による、"Hello, World"。

コードの実行は左上から開始され、同じ色で塗られた領域のピクセル数が数値に、次の領域での色相と明度の変化がインストラクションになる。

また、次の実行方向を制御するための黒色と、何も行なわない(NOP)白色もある。

その他のサンプルプログラムはこちら。"Hello, World"をいろんな人が違うやり方でコーディング(ペインティング?)しているけど、中にはハノイの塔やフィボナッチ数列を求めるプログラムもある。よくやるなあ。

そして、この言語の発想の基となり、言語名の出自でもある、Piet Mondrianの作品っぽく見える"Hello, World"も。

この人は、Esoteric Programming Languages(秘伝的プログラミング言語)というページで、他にもいろいろな変態的プログラミング言語を作成・紹介している。オランウータン用言語とか、東洋哲学言語とか、ゾンビ遣い用言語とか。

投稿者 秋元 : 15:08 | トラックバック

2006年11月01日

Javascriptで三角形を動かす

Javascriptだけでぐるぐる回る三角推というデモを見つけた。IE6では動かないがIE7やそれ以外のブラウザで動く。

borderを使ってHTML+CSSだけで三角形を書くテクニックは、前にどこかのブログでやってたと思うけど、それを応用して、これだけ複雑な立体を描き、さらに動かすことに成功している。大きな三角形は、水平や垂直線で小さな三角形(実際にはborderをいじったdivタグ)に分割している。

デモでは、Q,W,E,A,S,Dの6つのキーで、回転の方向を自由に変化させることもできる。

投稿者 秋元 : 15:56 | トラックバック

2006年10月30日

ページ上で花火を表示するfireworks.js

Fireworks.js、名前だけ見て、Greasemonkeyのスクリプトか、Javascriptのイベントハンドリングでもするライブラリかと思ったら、直球で「花火を表示するライブラリ」だった。

リンク先ではライブラリを使ったデモも置かれていて、スライダーでいろいろなパラメータを変え、そのページ上で花火を打ち上げる[Fire!]ことができる。

# Blast Radius(半径)とParticles(粒子の数)を大きくすると派手になると思う

その下には、いくつかリンクが並んでいて、プリセットの花火を見てみることも。

打ち上げの音はどうしてるのかなと思ったら、Javascriptから隠しFlashを呼び出してFlashで音を鳴らす、というライブラリもここで提供しているようで、それを使ってる。

配布物には、爆発音、上記の音声ライブラリ、デモも含んでいるので、置いてみていじればいろいろ試せるだろう。花火の表示自体は、関数一個の呼び出しでできるし。

投稿者 秋元 : 10:57 | トラックバック

2006年10月22日

CSSウェブデザインに関する情報ポータルmost inspired

via digg

ニュースサイトのRSSを集積したpopurlsみたいなもので、CSSとウェブデザインに関する著名なブログやギャラリーサイトのフィードを一箇所にまとめて表示しているのが、most inspired。

こういうのって、最初にやったもの勝ちだね。でも、セレクションが良ければいいのかもしれない。

投稿者 秋元 : 11:12 | トラックバック

2006年10月19日

IE7でたね

Internet Explorer 7 Download

インストール完了。

文字はキレイになった、というかIE6とあきらかに違う。

タブがFirefoxのようだ。

Homeやお気に入りの場所が変わったのでまだ慣れない。

地域をJapanにすると、デフォルトの検索ボックスはYahoo!ジャパンになった。MSN Searchじゃないんだね。

IEアイコンをクリックするとIE7が立ち上がる。IE6は見当たらない。

ベータ版と同じく、アンインストールしてIE6に戻すこともできた(インストール/アンインストール共にMS-Windowsの再起動が必要)。

アンインストールの手順は[コントロールパネル]-[プログラムの追加と削除]-[Windows Internet Explorer 7]を選択して[削除]

IE6に戻すことはできたんだけど、IE6のアドレスバーに直接URLを入力すると、なぜかそのページがFirefoxで開くようになってしまった。仕方がないのでIE6に戻すのやめて再度IE7をインストール。

投稿者 秋元 : 14:04 | コメント (2) | トラックバック

2006年10月17日

jpegの中に別のファイルを隠す方法

といっても、画像の背景に隠すとかじゃなく、きわめて原始的なやつ

jpeg形式のファイルの後に、rar(圧縮形式の一つ)を単純につなげると、普通に開くと画像が表示されて、rarの解凍ツールで開くとrarの部分が解凍できるファイルが作れるということだ。

動画のチュートリアルつきで解説されているe。

理屈だけど、jpegの表示はファイルの先頭から必要なものしか見てないということなのかな。rarの方は、ファイルの途中からアーカイブがはじまってもそれを見つけられる仕様? よくわからないな。

画像を交換しているフリをして何か他のものを交換したい人(どんな状況だよ)は試してみては如何。

[追記] その筋ではポピュラーなデータ偽装運搬手法だったようだ。弾さんのブログで偽装を見破るPerlスクリプトも紹介されている。後ろにつけたrarがそのまま開けるのは、最初からこういう使途を想定して解凍ソフトが対応してるということかな。

投稿者 秋元 : 13:01 | トラックバック

2006年10月10日

ブログのコメントを文章の一部分につけられるAjaxシステム

via Ajaxian

Jack Slocum's Blogで、フリーのブログシステムであるWordPressのコメント機能の面白い改造が公開されている。

そのブログに言ってみて、触ってもらうのが一番だと思うが、要はブログ本文のタイトル・パラグラフ・図などのそれぞれに対して、コメントをつけることができる、というものだ。

既にコメントがついている箇所があれば、コメントの数がブログの左側に数字で表示されている。また、左側のバーで何もないところを選ぶと、その場所にコメントを書くことができる。

また、コメントの閲覧や追加は、Ajaxによってページ遷移なしに実現されている。

実装は、Yahoo! UI ライブラリを使って、一日仕事で完了したということだ。Jack Slocum氏の書いたコードの部分も、BSDライセンスで自由に使ってくれ、と書いてあるので、Javascriptの分は流用できるだろう。

コメントが記事のどこについてるか、という情報は保持しないといけないだろうから、WordPress側にも改造が必要なはずだが、その部分のコードについては公開されていない。でもまあ、コメントテーブルに一カラム増やすぐらいの改造ではありそうだ。

ブログのコメントがパラグラフにつけられるべきかどうか、はよくわからないけど、コメント中で「『…』のところで『○○』と書かれてますが、」といった書き方をすることもあるだろう

悪く活用されると、「ここはあなたの主観なんだから、『思う』と書くべきでは?」とか、「ここ誤字ですね?」みたいな揚げ足取りコメントがあちこちについたりするのかもしれない。

ブログのスタイル、たとえば長文が多いブログとか、読者と一緒に議論を詰めていくようなタイプによってはいいかもしれない。

投稿者 秋元 : 00:02 | トラックバック

2006年10月08日

ページ中の画像群で遊ぶJavascript

via digg

ロシアからのJavascriptネタ。

Google Imageの検索結果など、画像がたくさんあるページで、アドレスバーに以下のJavascriptをペーストして実行すると、おもしろい効果が出る。


javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.images; DIL=DI.length; function A(){for(i=0; i<DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=Math.sin(R*x1+i*x2+x3)*x4+x5; DIS.top=Math.cos(R*y1+i*y2+y3)*y4+y5}R++}setInterval('A()',5); void(0);


とりあえず動く様子を見てみたい人は、YouTubeに載せた人がいるのでこちらを見てみるといいかも。

diggのコメント欄では、オレもオレも、とバリエーションが多数投稿されている。大丈夫だとは思うけど、画像のポジションを変える処理に見えないコードが入っていて、それが何をやってるかわからないという場合はそのコードは避けたほうがいいかと。

もちろん、これらのコードはあなたのウェブページにも貼って動かせるけど、デフォルトでこんな動きをされてもどうかとは思う。まあ何か役に立つケースもあるかもしれないが。

[追記] この記事を読んだ方が、同じ方向性でウゴウゴ・ブックマークレトという面白いスクリプトを作られたようだ。ウゴウゴルーガ、たしかにこんなかんじだった。

投稿者 秋元 : 18:04 | コメント (2) | トラックバック

2006年10月06日

書いたものが物理法則に従い動くホワイトボード(動画)

物理の授業で良く出てくるような、ボール、車、ねじや重力の方向などを書いたホワイトボードだが、そのまま実行することができる、という技術の動画。

MITのMulti-Domain Sketch Recognitionという研究らしい。オリジナルの動画はこちらのページでダウンロード可能。他に振り子を書いた様子の動画もある。

物理法則通りに書いたものを動かすアプリケーションの方は以前からあって、この研究はホワイトボードの入力インタフェースのところが肝らしい。

投稿者 秋元 : 14:55 | コメント (7) | トラックバック

2006年09月29日

Snippy - 自由曲線で切り出せる画面キャプチャツール

SnippyはWindows用の画面キャプチャツール。

配布されている.exeファイルをダウンロードして実行すると、タスクトレイにハサミのマークが出る。

ハサミのマークをクリックしてから、自由に画面上でマウスを動かすと、動かした形に切り取ってキャプチャをしてくれる、というもの。早速やってみたのが下の図。

それにしてもセンスの無い切り取り方だけど、できることはわかってもらえたかと思う。

シフトを押しながら使うと長方形でもキャプチャしてくれる、ということなので、普通の用途でも使えそう。

投稿者 秋元 : 20:47 | コメント (2) | トラックバック

複数のIEをまとめてインストールするパッケージ

Install multiple versions of IE on your PCで、IE3からIE6までの異なるバージョンのIEを選んでインストールできるインストーラというのが配られている。

IE4やIE5を単体で動く形で配布しているサイトは前からあった。まあこれでもいいんだけど、インストーラのほうは複数バージョンが組み込まれていて、どれを入れるか選択できて、ショートカットも生成できるということでさらに楽になってる。

もちろん、改造されたバイナリの非公式な配布なので、このインストーラや入れたIEに何か変な仕掛けがあるということもあるかもしれないが。

IE7との共存のほうはこっちの記事に書かれている。

# どちらにしても、単体で動かす別バージョンのIEでは、いろいろ不具合や動かない機能があるようなので、単純な画面描画のチェックぐらいにしか使えないだろうとは思う。

[参考] IE7ベータを入れたらIE6が上書きされてしまった

投稿者 秋元 : 20:34 | トラックバック

2006年09月25日

iHack - 脆弱なHTMLフォームの突破ゲーム

脆弱性のあるHTML Formをゲームとして公開している

「このフォームを突破してもハック(クラック?)したことにはならないよ」とのこと。安心してアタックされたし。

さっそく遊んでみたが、レベル3で既に悩んでしまい停滞。そんなわけで先がどれぐらいの難易度なのかはまったく不明。我ながら才能無いなあ。

猛者がいるサイボウズ・ラボの社内掲示板に紹介しておいた。

# くれぐれも、解いて進んだ先のURLを直接紹介しないこと、との注意書き。ゲームがつまんなくなるんでね。

[追記] ということで社内の猛者達が全6問を解き終わった。

レベル3は「そりゃないんじゃないの」に近い仕掛けだった。技術じゃない。このへん関連のニュース、「よく使われるパスワード」みたいなのを漁るのかこれ。

投稿者 秋元 : 15:11 | コメント (7) | トラックバック

2006年09月07日

フィリップス研究所の発表した発光する生地

ドイツの展示会で発表されたばかりの新技術らしい。

次の写真は、この生地で作ったTシャツを着てる様子。

Phillips Research のサイトに、他のいろいろな衣類や家具への応用の写真が載っている。

次は展示会での様子の動画

投稿者 秋元 : 10:47 | トラックバック

2006年09月05日

SEO対応Javascriptニュースティッカー

Accessible JavaScript Newsticker

複数のニュースを、一個ずつ順番に表示させるギミック。サンプルはこちら。

何が"Accessible"かというと、Javascriptがオフの時でもニュースが一覧でHTMLソースに存在する、つまり、検索エンジンから認識される、ということだろう。JavascriptやCSSを使ってdegradableな階層メニューを作るような話題とこのあたりは同じ。

逆に、ページに表示されるけれど検索では引っかからない、ような表示内容にしたければ、ニューステキストをJavascript側で処理して表示させるようなものを作ればよい。

[追記] 百式の田口さんがほぼ同時に別のJavascriptティッカーを紹介されていた。Javascriptでお手軽ティッカーを実現

投稿者 秋元 : 15:17 | トラックバック

訪問者が入れているFirefox extensionを検知するJavascript

chrome:プロトコルで Firefox Extension が持っている画像などをアクセスすることで、その Firefox である extension がインストールされているかどうかを判定できるらしい。

実際のデモはこちら(自分の使ってる拡張機能を知られたくない人は押さないこと)

著名な extension ごとのチェック対象画像のリストを整理している人もいた。

リンクが訪問済かどうかをCSSの属性からチェックする技法がちょっと前に話題になったけど、いろいろ考えるもんだ。

# こちらは、
あなたのWeb2.0度判定テストやHatebu::Addiction(はてブ中毒度)などで使われている。

投稿者 秋元 : 12:42 | トラックバック

2006年08月18日

CSSの圧縮サービス比較記事

CSS Optimization: Make Your Sites Load Faster for Free というブログのエントリで、CSS の圧縮サービスの比較をしている。

空白や改行を除去したり、無くても同じ結果になる重複を省いたりすることで CSS のサイズをコンパクトにしてくれるサービスは、ウェブページの表示速度改善(や、帯域削減やサーバの利用効率向上)を目的としたものだ。

この記事では、4つのブラウザから使える無料サービスを使って、Digg や Slashdot といった著名なサイトの CSS を実際に圧縮し、圧縮率を比べている。

比較された4つのサービス、今回の測定対象では、Icey Compressor、Clean CSS、CSS Optimiser、Flumpcakes という順で成績が良かったということ。

圧縮率の高さもそうだが、整形・圧縮をかけた結果、元の表示と違ってしまうというケースも多いようで、再現性の高さも重要だということだ。

この記事では紹介されてなかったが、こういうサービスは多くて、他には、 CSS Formatter and Optimiser、csstweak、などもあり、Haskellで書かれたFactor CSSなんかも、サービスとして公開されているしソースも入手できる。

投稿者 秋元 : 10:55 | トラックバック