2008年12月30日火曜日

Year end greeting

年の瀬ですね。


僕の方はエンジニアリングは今年は、30 日で終了。

フランスから来たエンジニアの同僚と、最後にご飯食べて、めでたく締めました。
普段は、ソフトウェアのアーキテクチャのコミュニケーションなどで、彼とはよく口論になるのですが (これは僕が未熟なせいですが)、今日は久しぶりに落ち着いて話せました。
博士課程を出ている、彼の時折見せる鋭い指摘はいつも尊敬していたのですが、話してみるとバックボーンが面白いなぁ。きっと彼の冷静かつ鋭い判断力に僕は憧れているのでしょう。それも彼が一生懸命勉強してきたがゆえ。また頑張ろう、という気持ちになれました。


来年はフロントエンドの知識に磨きをかけつつ、エンジニア間でコミュニケーションするためのツールの勉強、テスト工学、リファクタリングとかアルゴリズムの勉強をしよう。新しい言語も学びたいな。




それから、ライブ見てきたり、バンド練習したり、ベースの勉強したり、ギター弾いたり、音楽聴いたり、曲作ったり。
最近は Punk, Hip-hop, Jazz, New Wave, Progressive Rock の音楽からもっと学びたい、という気持ちです。

Robert Fripp (King Crimson) がこんなことを言っていた。
「すべてを学び、すべてを忘れることが重要だ」
うん、少し分かるようになったぞ。

今年最後にこんな良いアルバムに出会いました。




さて年の瀬らしく振り返ってみましょう。

振り返ってみると、ここ 2年間、環境依存の生き方をしてました。
環境に合わせ、自分のアウトプットを最大化する生き方です。
だから、色々な経験を「させてもらった」という言い方が正しいと思います。
悪くないですし、たまたま、周りの人たちが良かったから、それでも多いに勉強させてもらったし、2年前には想像もつかなかったようなものを得られました。ただ、2009 年からは少しずつ、主体性を持ち、経験を「掴みにいく」姿勢に転換すべきときだと思いました。



今年も様々な方にご迷惑をお掛けしてきました。
来年も何卒宜しくお願いします。

それでは良い御年を。

2008年12月24日水曜日

Cooco

相変らず、音楽もやりつつ、Engineering もしつつ。
もはや両方ともライフワークですね。

エンジニアリングの方は、昨日までが一山。
人生史上、最も沢山の JavaScript コーディングしました。
夏休みに学んだ、Design Pattern を活かしたり、Unit Testing、Selenium Testing も導入したり、最近学んでいる Object モデリングも活かしてみたり、自分にとってはチャレンジングな課題を持ってできた気がします。

そして今回は、コードのクオリティを上げることも課題でしたが、チームのアウトプットを最大限上げることも目的にしました。
デザイナーや、チームの人との連携、チーム内に設計方針を伝えることをしっかり考えたのは初めてかもしれないです。

特に、自分以外の人がコードを改善できる環境にするために力を注ぎました。
僕より優秀な人が沢山いる以上、チーム内でコードが共有された方が、チームのアウトプットを考えると良い、と強く思うようになったのです。そこで、他の人がコードに触れ、コードがチーム内でマッシュアップされていくための環境を作り上げることを、個人作業よりも優先しました。要するにチーム内に OSS のエコシステムを導入したかったのです。


もともと個人作業の方が得意な人間ですので、今回こうした課題に取り組んで、終わったときは、それなりに充実していましたが冷静に考えるとまだまだですね。60 - 75 点くらい。

やってみると、頭では理解していても当然すぐにコードに反映されるわけもなく、試行錯誤の連続。
そして、チーム内のコミュニケーションの課題は、思っている以上に非常に奥が深い。
そう簡単にレベルアップするようなものではないです。
自分の考えを 8 割理解してもらうには、コミュニケーションと頻繁な確認が欠かせませんし、説明の技術も絡んでくる。
でもチャレンジする価値があることが良く分かった。
今後も継続してチャレンジしていこうと思いました。




こないだ、Cocco さんを撮影したドキュメンタリー映画、「大丈夫であるように」 を見てきました。

前から Cooco は好きだったのですが、この人は相変わらずとても素晴らしいですね。

僕は何のために、音楽をやったりしているのか、明快な答えを持っている訳ではないです。
直感と惰性とちょっと格好いいから、という理由で続けているわけです。
それも悪くはないと思う。
人の自由だし。

でも、この人は何かを変えるためだったり誰かの為だったり、音楽を作ることが人生であることが、この映画を通して良く分かります。
沖縄やその環境問題にも精力的に取り組みながら、何かを変えようと曲を作り歌う。
その姿勢がとても好きです。
だから、簡単に言ってしまうと、経験と曲が良くリンクしているし聴いていて、嘘っぽさが全くない。とても信じられる。

僕なんかはどちらかというと、学びが先行しすぎていて、頭でっかちなものだから、アウトプットしているものが良いものでは全然ない、ということを認めざるを得ない。

昔は、音楽をやりたいなら、音楽だけをやれば良いと思っていた。
音楽は音楽から生まれるのだし、生まれるべきなんだと思っていた。
一日中音楽のことだけ考えているのが、良い音楽家の条件だと思っていた。
そうじゃない、って言ってくれた人もいたけど、僕にはそれが全く理解できなかった。

でも最近なら少しは理解できる。
曲を作るってのは、そんな単純なものじゃないってこと。

その人のルーツとか色々なことが複雑に絡みあって、曲になるってこと。
そのことを頭にしまいながら、これから丁寧に生き、精進していこうと思った映画でした。


最後に Cocco の映像をのせておきますね。
これ、すっごく良い。

2008年11月30日日曜日

Back to music

(Because the first draft of this entry was written in English, I'm sorry to post this written in English.)



Two months have passed since I started to study music again.
I'm very enjoying myself every day.





It had been passed one and half year since I quit studying music, stop playing the guitar and had started to concentrate on studying technologies on the Internet.
The reason of my quitting was mainly by my laziness.
I gave up to create any songs and stop listening to any songs to forget them.




Time had passed very quickly, and I had experienced many things as the engineer in the very hopeful venture company.
In the time, I kept writing many scripts and learning as much as I can every day from the people I have respects as a beginner of the engineering.





I took a long vacation in September of this year after my project settled in.
In this vacation, I intended to refresh myself and start learning new things.
In fact, I could refresh myself in this vacation, and became want to have another work that I can commit after I come back to home from my day job.





The first catalyst of thinking again about music was inspired by my new colleague from Australia.
He joined our company as a designer in October of this year.

He can look everything with great open mind.
He receives everything as they are, and response to them very flexible.
He can do job very quickly and very creatively.
I was very amazed to his ability and influenced his attitude toward the world.

Also, he is a music junkie.
He has organized the songs from his early stage.
His music library is very huge. (Over 700G !!)
Incredible...
He allowed me to access his music library, and I started to listening to many songs.
It's a great experience to know the many songs and considering about structure of them.





The news also encouraged me.
Flea Uses Red Hot Chili Peppers Hiatus To Go Back To School

I was very amazed from the news.
Flea is a great musician and I respect his attitude toward the music.
He has kept learning as much as he can from session, live, recordings, songs and his life.
He always has the many ideas most of which are inspired by his leanings.
He has an very amazing balance between input and output.

At last, his enthusiasms to the music brought him to kick the entrance of the college. It encouraged me very much.





I got together with a new band and started to go to the studio.
It needs to me practice the guitar to bring my playing ability to the same level when I quit, but it's very fun.

Recently, I have joined to a new band fortunately, and started to play the bass guitar.
To me, it opened a new door.
It made me have a motivation to know how instruments work together to create a beautiful flow of the music, and how base lines support the music.

I want to keep motivating myself.
I hope I'll never give up studying again.
To accomplish this, I was introducing the disciplines:
  1. Listening as many songs as I can listen to.
  2. Keep an open mind to the others and to the world.
    I take care not judging others but just receiving as they are, and find the positive things as many as I can.
  3. Keep studying music.I use all the techniques I learned from WWW community to learn music effectively.






I want the friends who can co-write with me or can play with me.
Please contact me:


I'm now admiring all the musicians in the world and loving all songs.
I appreciate very much to the people who brought me back.
I'll do my best.




Thank you for your reading.

Brief codes to show your Email Address on the web

If you want to provide your email address as a contact infomation to the visitors to your web site but you don't want to provide it to the crawler (because they send you many spam mails), please copy and paste the JavaScript code like below into your html.
<script type="text/javascript">
//<![CDATA[
window.onload = function () {
// Start creating a mail address
var m = 'info';
m += '@';
m += 'ciri.us';
// Insert mail address to your document
document.getElementById('mailto').innerHTML = m;
document.getElementById('mailto').href = 'mail' + 'to:' + m;
};
//]]>
</script>
The example html code is like below.
You should use alink tag and provide it DOM id as "mailto" where you want to insert your mail address.
<p>
Our new web site will be online in early 2009. Stay tuned for updates.<br/>
In the meantime, please visit the <a href="http://www.ciri.us/">Cirius Technologies</a> corporate web site. <br />
Or, contact us at <a id="mailto" href=""></a>
</p>

2008年11月17日月曜日

Great electronic musical instruments

In last two month, I found very exciting instruments for digital music I haven't known before.
They include Tenorion, Monome, Korg MS-10, Kaossilator, and so on.

Today, I introduce some of these for you.

Tenori-on

Tenori-on is the most attractive instrument for me.
This opened my heart to the digital music and take me to the travel of instruments.

Tenori-on is an electronic musical instrument, designed and created by Japanese artist, Toshio Iwai and Yu Nishibori of the Music and Human Interface Group, Yamaha Center for Advanced Sound Technology.
It has a 16x16 matrix of LED switches allows everyone to play music intuitively, creating a "visible music" interface.

Here is an introduction video from YouTube.



As you can see, TENORI-ON is a unique 16 x 16 LED button matrix performance instrument with a stunning visual display.
For DJs & producers it is a unique performance tool enabling them to perform using MIDI and load the TENORI-ON with samples to 'jam / improvise' within their set BPMs.

In Japan, you can touch and experience that great interface at ICC in Opera City.

Monome

A similar cool instrument Monome is there.
To be precise, Monome is not a name of instrument. Monome is a small Philadelphia-based hardware company that makes controllers for electronic music performance and new media art.

Their first product, Monome 40h, sometimes called just "Monome", is an eight-by-eight grid of backlit buttons, which connects to a Mac or PC using a USB cable and the OpenSound Control protocol.
Here is a video of this.



Although it seems quite nice, there is a problem.
Because Monome is very small company, the distribution is very limited.

To get this, you have to participate in the auction.
The start bid is now very expensive.
I hope this instruments to be more and more distributed in the near future.

KORG DS-10, KORG Kaossilator

Japan provides amazing product to the world markets in the very reasonable price.

KORG DS-10 is non-game music making software for the Nintendo DS that emulates a KORG MS-10 synthesizer.
It released on July 24th, 2008 in Japan, on October 10th, 2008 in Europe, and on November 4th, 2008 in the US.



The Korg Kaossilator KO-1 is a portable Dynamic Phrase Synthesizer manufactured by Korg.

It is capable of producing a wide range of sounds and can be tuned to various keys and scales.
Being related to the Korg Kaoss Pads, the Kaossilator is a synth that is played touching a pad that is not unlike a mousepad on laptop computers.

It is truly portable, running off of 4 AA batteries with the dimensions as follows:
106 mm (W) x 129 mm (D) x 29 mm (H) / 4.17" (W) x 5.08" (D) x 1.14" (H).

The Kaossilator features 100 synthesized sounds including acoustic (Guitar, Trumpet and Piano), percussion, and electronic sounds.
Most instruments can be locked into various keys and scales.
The Kaossilator supports 31 different Scale Patterns including Chromatic, Blues and Diatonic scales - as well as more 'exotic' scales such as Japanese and Egyptian.

Here is a cool Demo Video.



The Kaossilator also has a gate arpeggiator and a loop function that allows the layering of instruments to produce loops.

The loop recording function is somewhat limited, as the maximum length is two bars in 4/4 time. Despite this limitation, some artists have recorded full-length albums with the Kaossilator.
You can find many videos in YouTube.
(There is some technique to overcome the 2 bar limit as the KO1 records audio to memory.)

Now, let's start!

With these instruments, you can create music with your own feelings without the limitation of your techniques of instruments.

As you can see, they are very intuitive. Ugly interface has gone.
You can concentrate on expressing your feelings and music ideas.
Do you think it's a great thing?

Just feel and create.
Forget all things you are suffered everyday.

2008年11月14日金曜日

Introduction to JavaScript Documentation by JSDoc

When you create a genuine Web Application and it seems to a lot of JavaScript scripts added day by day, you'll be better to use tools for documentation of them to grasp and understand present situation of your project.

JS Doc is a very helping tool for you in such situation to document source codes written in JavaScript.

Usage

Download the JSDoc tarball from Sourceforge and install it as below:
# Download the latest JSDoc
$ wget "http://downloads.sourceforge.net/jsdoc/JSDoc-1.10.2.tgz"
$ tar xvzf JSDoc-1.10.2.tgz
$ cd JSDoc-1.10.2
Now, you're ready to go.
You can immediately try out JSDoc on the included test.js JavaScript file by going into the JSDoc directory and entering the command:
$ perl jsdoc.pl test.js
This should output a set of HTML files in a directory called js_docs_out.
Go to "js_docs_out/index.html" by your browser, and you can see the documentation about your JavaScript codes.

This documentation tool seems to work when you implement the application along the object oriented notation, otherwise it doesn't work.

I have an error...

If you get an error message right away that looks something like:
Can't locate HTML/Template.pm in @INC ......
Then you will need to install the HTML::Template Perl module.
Open a terminal and run the following command as root:
$ sudo perl -MCPAN -e 'install HTML::Template'

2008年11月13日木曜日

Web Application Frontend Testing by Selenium for the site using Google Maps

Google Maps を利用したウェブアプリケーションのテスト、どう書いていますか??
僕は最近まで、どのように書いて良いかよく分からなかったのですが、色々調査したり、試行錯誤してみたところ、Selenium-Core を利用した良いプラクティスができたので、ここで紹介します。

まずは、今回、実際 Web アプリケーションをテストするデモを以下から確認できますので、見てみてください。
以下のページの右上の方にある、緑色の再生ボタンを押すと、テストが動き出すのが確認できます (今回は初めてデモを用意してみました) 。

Selenium-Core Testing Demo

テスト環境の構築

今回は、サンプルとして、Rails で Google Maps を利用したアプリケーションを作成し、自動テストツール Selenium Core を利用し、実際にアプリケーションのテストをしています。

まずは、Rails を利用して、Google Maps を利用した簡単なアプリケーションを作成しましょう。まずは準備から。
# Create Application
$ rails sand-selenium-core

# Import to your subversion
$ svn import -m "initial commit." sand-selenium-core {YOUR_SVN_SERVER}/sand-selenium-core/trunk

# Clear your source
$ rm -rf sand-selenium-core

# Check out from subversion
$ svn co {YOUR_SVN_SERVER}sand-selenium-core/trunk/ sand-selenium-core
これでアプリケーションの準備が整いました。

次に、Selenium Core をダウンロードして、Selenium Core の環境構築します。今回は Google Maps を利用したアプリケーションをテストするため、Selenium-Core のソースコードを Maps API Selenium Tests の Subversion レポジトリから以下のようにインポートします。
# Make your test directory and move selenium core under to it.
$ mkdir {RAILS_ROOT}/public/tests

# set svn:externals for selenium-core extentions.
$ svn propset svn:externals "selenium-core http://gmaps-api-issues.googlecode.com/svn/trunk/selenium/" .

# Download extentions from external repositories.
$ svn update
$ svn propdel svn:externals
自作アプリケーションのテストをする場合、Google Maps の基本機能をテストする必要はありませんので、余計なファイルを削除しておきます。
$ cd {RAILS_ROOT}/public/tests/selenium-core/tests/
$ rm -rf general examples
$ rm general*.html example*.html test_tags.txt
テスト環境構築完了です。

アプリケーションの作成

まずは、Google Maps を利用した以下のようなアプリケーションを作成してみます。

地図を表示し、中心にマーカーを表示します。
また、地図上をクリックすると、その地点にドラッグ & ドロップ可能なマーカーを表示加える。

このサンプルアプリケーションとそのソースコードは以下に作成しましたので見てください。
Google Maps Application Sample

テストスイートの生成

テストは Selenium IDE などを利用して書きます。このファイルを selenium-core/tests/ 以下に作成したディレクトリ (今回は archives ディレクトリとしました) に保存します。
(テストファイルのサンプルは、こちら: 2008-11-13_test.html)
$ mkdir  {RAILS_ROOT}/public/tests/selenium-core/tests/archives
さて、ここまで来たら、後は、テストの準備。

1. {RAILS_ROOT}/public/tests/selenium-core/tests/test_tags.txt に自分の生成したテストファイルを書きます。

archives/2008-11-13.html
2.ツールを利用して、テストスイートを生成します。 以下のコマンドを順に実行します。
$ {RAILS_ROOT}/public/tests/selenium-core/tools/create_suites.rb 
$ {RAILS_ROOT}/public/tests/selenium-core/tools/parse_suites.rb
$ {RAILS_ROOT}/public/tests/selenium-core/tools/create_test_index.rb
以上!

Rails アプリケーションを起動し、ブラウザから、/test/selenium-core/index.html にアクセスすることで、本記事の最初で取り上げたテストが完成です。

大規模なアプリケーションを構築していると、テスト無しだと、開発の後半でどんどん、デグレードが発生し、とても手に負えなくなってきます。
今回紹介した手法は、本格的なウェブアプリケーションの構築を助けてくれる、最強のツールと言えるでしょう。

2008年10月6日月曜日

QUnit Getting Started!

前回のエントリ JavaScript Unit Testing Frameworks では、JavaScript の Unit テストのためのフレームワークをいくつか紹介しました。今回は、その中から、jQuery 公式の Unit テストフレームワーク、QUnit 利用方法を簡単に紹介します。

QUnit は 2008/5 月に jQuery プロジェクトの top-level のプロジェクトとして開発が進められるようになったプロジェクトです。
QUnit is the unit testrunner for the jQuery project. It got promoted to a top-level project in May 2008 to make it easier to use in other projects, with focus on jQuery UI. Every plugin developer can leverage the testsuite to unit test their code. QUnit - jQuery JavaScript Library
プロジェクト採用されたのは最近ですが、既に jQuery プロジェクトの内部ソースコードのテストでは利用されている Unit Test フレームワークです。

本フレームワークは回帰テストに適しており、バグ報告が上がってきた場合は、そのバグを発生させるテストを書き、テストを通過するコードを書くことで、書き出したスクリプトの品質を向上させることができます。
また、Test Driven Development: TDD を日頃の習慣としているプログラマなら、十分なユニットテストのカバレッジを保証することで、安心してリファクタリングを進めていくことができます。
jQuery を利用する JavaScript プログラマーには大変嬉しい Unit Test フレームワークが登場した、と言えるのではないでしょうか?

jQuery は XUnit 直系のテストフレームワークではありませんが、提供している API の機能は XUnit を意識したものとなっています。QUnit から提供されている API は現在のところ、必要最低限というところですが、その分テストの基本に集中できます。
本エントリでは QUnit の基本的な利用方法を見てみることにします。

環境構築

まず、テストフレームワークを利用するための環境を構築しましょう。以下のコマンドから、testrunner.js 及び、 testsuite.css をダウンロードします。
$ cd public/javascripts
# jQuery をダウンロード (本エントリでは 1.2.6)
$ wget http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js

# testrunner.js をダウンロード
$ wget http://dev.jquery.com/view/trunk/qunit/testrunner.js

# テスト対象となるスクリプトを記述する JavaScript ファイルを生成
$ touch subjected-script.js

# サンプルテストコードを記述する JavaScript ファイルを生成
$ touch testing-example.js

# testsuite.css をダウンロード
$ cd ../stylesheets
$ wget http://dev.jquery.com/view/trunk/qunit/testsuite.css

# サンプルコードを動作させる html を生成
$ cd ../
$ touch unit-test-demo.html

Getting Started!

早速 QUnit を利用してみましょう。 API は QUnit のページ の Documentation から参照することができます。
まず、テスト対象となるスクリプトを、ここでは、 subjected-script.js というファイル名にして記述します。
function Person(name) {
this.name = name;
}
このコードをテストするコードを unit-test-demo.js というファイル名にして、記述します。
$(document).ready(function() {
// テスト対象のモジュールを記述
module("Person Constructor");
// テストする項目を記述
test("初期化時に name がセットされること", function() {
var person = new Person('Naofumi HAIDA');
equals(person.name, 'Naofumi HAIDA');
});
});
最後に、Test を走らせるための以下のような html, testing-example.html を public 直下に記述します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Js Testing Demo</title>
<link rel="stylesheet" href="/stylesheets/testsuite.css" type="text/css" media="screen" />
<script type="text/javascript" src="/javascripts/jquery-1.2.6.min.js"></script>
<script src="/javascripts/testrunner.js"></script>
<script src="/javascripts/subjected-script.js"></script>
<script src="/javascripts/unit-test-demo.js"></script>
</head>
<body>
<h1>QUnit example</h1>
<h2 id="banner"></h2>
<h2 id="userAgent"></h2>
<ol id="tests"></ol>
<div id="main"></div>
</body>
</html>
ここまで来たら、/testing-example.html にアクセスしてみてください。
テストが通っていたら、以下のように表示されます。
Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; ja-JP-mac; rv:1.9.0.3) Gecko/2008092414 Firefox/3.0.3

1. Person Constructor module: 初期化時に name がセットされること (0, 1, 1)

JavaScript Unit Testing Frameworks

JavaScirpt の Unit Testing フレームワークを調査してみました。
調査してみると想像以上に、大変沢山あることが分かりました。。

全てを比較している暇はないので、選定基準を設け、有望そうなものをピックアックすることにしました。選定基準は以下のようになります。
  • Intuitive, simple, but enough API support.
  • Easy to introduce.
    • If possible, we don't want to introduce any other run time.
  • Ajax testing support (if possible)
  • Enough matured or active community supports
  • It's more better if the framework have a good compatibility with jQuery.
  • It may be useful also if the frameworks can be scripted, or at least callable fro CLI.
この元では、以下の 3 つが有望そうな JavaScript Unit Testing フレームワークとなります。これらの特徴及び、長所、短所を整理すると以下のようになります。(英語ですみません。。)
  • JsUnit
    • Feature:
      JsUnit is a Unit Testing framework for client-side (in-browser) JavaScript.
      It is essentially a port of JUnit to JavaScript.
      Also included is a platform for automating the execution of tests on multiple browsers and mutiple machines running different OSs.
      This goes a long way to addressing the old problem of inconsistency in JavaScript implementations across browsers.

    • Pros: Very matuared. (Its development began in January 2001.

    • Cons: Now thier community is less active than other frameworks'. (JavaScript and the browser is changing rapidly now, so it's a critical problem.)

  • YUI Test
    • Feature:
      Yahoo User Interface Test: YUI Test is a testing framework for browser-based JavaScript solutions.
      Using YUI Test, you can easily add unit testing to your JavaScript solutions.YUI Test features:

      • Rapid creation of test cases through simple syntax.
      • Advanced failure detection for methods that throw errors.
      • Grouping of related test cases using test suites.
      • Asynchronous tests for testing events and Ajax communication.
      • DOM Event simulation in all A-grade browsers.

    • Pros:
      • YUI Test does derive some characteristics from nUnit and JUnit.
      • Ajax support officialy.
      • Many Documents

    • Cons:
      • Not OSS.
      • Not a direct port from any specific xUnit framework.
      • Althogh this script may have good compatibility with YUI, it's not certain that it also have it with jQuery.

  • QUnit
    • Feature:
      QUnit is the unit testrunner for the jQuery project.
      It got promoted to a top-level project in May 2008 to make it easier to use in other projects, with focus on jQuery UI.
      It's especially useful for regression testing

    • Pros:
      • The community is very active.
      • It must be good compatible with jQuery.

    • Cons: This project started just only month ago.(This script have been being used for jQuery itself since the jQuery project started, though.)

2008年10月2日木曜日

Books I read during my summer vacation

夏休みだったのですが、2 冊、大変面白い本に出会いました。
その 2 冊が、 "Pro JavaScript Design Patterns (Recipes: a Problem-Solution Ap)"、 それから、"My Job Went to India: And All I Got Was This Lousy Book (Pragmatic Programmers)" です。

Pro JavaScript Design Patterns は、Yahoo や Google のフロントエンジニアが著した本です。

モバイルでも利用できることもあり、 JavaScript の利用拡大は近年ますます加速しています。(Google がその性能をより向上させるため、Google Chrome では JavaScript の VM を新規開発した、というのは一部の人にとっては大きなニュースでした。)

今や JavaScript を利用した、インタラクティブなユーザインターフェースの実現というのは、良いサイトには当たり前のものとなって、ビッグビジネスを展開しているサイトほど、JavaScript の利用をシビアに考え、様々なテクニックを駆使しながら、ユーザの操作性を向上させています。平均的なサイトと技術の差は拡大していく一方です。

この原因のひとつとして、言語としては JavaScript は未成熟な故、様々な書き方ができるため、学習しづらい、というものがあります。(トライアンドエラーで独自にノウハウを貯めるしかないんですよね。。)

本書では、 JavaScript (prototype は使えるけれども) について、効率の良くソフトウェアデザインをするためのデザインパターン (定石のようなもの) を書き出したものです。

もともと僕は本格的に Design Pattern の勉強をしたことがなかったのですが、本書では、Design Pattern を丁寧に解説し、また豊富な例を掲載してくれていて、大変勉強になりました。
僕のオススメ JavaScript 本中で、"Pro Javascript Techniques (Pro)" と並び、Top 2 入りです。

Private 変数の作り方、クロージャを利用したオブジェクト指向の実現、プロトタイプベースの継承、インターフェースの使い方、などなどなど。読みながら、"Wow! How cool!" って何回も思いました。



それから My Job Went to India もタイムリーだった。

経済が下降し、職はインドなどのオフショアへ移行していく。
さらにエンジニアにとっては、技術は現在進行形で変化していくものです。
オフショアに職が移行し、ほぼ仕事を失いつつあるエンジニアは、この全く予測のできないマーケットの中で、如何に生きるべきか、が書いてあります。

この本は、以下の 6 セクションから成り立っています。
  • Choosing Your Market
  • Investing in Your Product
  • Executing
  • Marketing... Not Just for Suits
  • Maintaining Your Edge
  • If You Can't Beat 'Em
これらのテーマについて、エンジニアが持つべきマインドセットを述べてくれています。
さて、著者が、良く生きたいと願うエンジニアに対し、この本の中で、伝えようとしたことは、恐らく以下の 3 つです。
  • 良い選択次第である。
    • フォーカスすべきテクノロジーと、マスターすべきビジネスドメインを決定すること。その上で自分の時間とエネルギーをその正しい(と思われる)エリアに集中させること。
  • スキル次第である。
    • 低コストのオフショアの技術者や、高コストの自国の技術者と競い合っていくために、自分のスキルを高めていくための、体系だった計画を立てていく必要があります。
    • またオフショアでコモデイティ化した技術でなく、高い需要ののある技術を学んでいく方法を学ぶ必要があります。
  • マーケティング次第である。
    • あらゆる製品や、サービス同様、もし誰も自分のことを知らなければ、誰も自分を買わない。どのようにして自分を会社に、その業界に売り込んでいくべきかを学ぶ必要があります。
僕は最近、
  • やりたいことは他にもあるけれど、エンジニアリングは技術の終着がない点でキリがない。(だから面白いのだけれども)
  • 同僚にも外国人が何名かジョインして、英語でコミュニケーションをする機会も増えてきて、オフショア、という言葉を意識するようになった
という理由もあり、時間を能動的に振り回しながら、より沢山のことを学び、アウトプットしてくためには、どうしたもんか、と考えていたこともあり参考になりました。
もはや座右の書ですな。

ちなみに、上記 2 冊は洋書なのですが、洋書だと、本の内容が仮に駄目でも、最悪英語の勉強にはなる点で、時間投資しやすいという利点がありますね。また、日本では書籍化されていない情報も、洋書なら手に入ることが多いのも利点です。
今回ここで挙げた 2 冊は、内容も素晴しく、かつ英語の勉強にもなる点で、特した気分です。

僕の本はもはや赤線だらけで、とても人に貸せる代物ではないですが、興味が沸いた方は、購入して読んでみてください。

2008年9月13日土曜日

Inheritance on JavaScript

しばらく夏休みなので、以前から読みたかった、Pro JavaScript Design Patterns を読みながら、JavaScirpt の勉強をしてます。

これまでこのブログでも何回か JavaScript の継承について書いてきたのですが、とにかくややこしい印象でした。

JavaScript の継承は、大きく分けて
  • Classical Inheritance
  • Prototypeal Inheritance
の 2通りで実現できます。

今回の記事では、この 2通りのパターンをもう一度おさらいしてみます。

Classical Inheritance

一般的に継承というと、Super Class 作って、それを継承する、というパターンを想像します。
Classical Inheritance では、その方法を JavaScript なりに実現します。

例として、Person というクラスを作成して、それを継承する Author というクラスを作成します。
/* Class Person */
function Person(name) {
this.name = name;
}

Person.prototype.getName = function() {
return this.name;
};

/* Class Author */
function Author(name, books) {
Person.call(this, name);
this.books = books;
}

Author.prototype = new Person(); // Set up the prototype chain
Author.prototype.constructor = Author; // Set the constructor attribute to Author
Author.prototype.getBooks = function() { // Add a method to Author
return this.books;
};
以下の例で、継承が実現されているのが分かります。
var author = [];
author[0] = new Author('Larry Wall', ['Perl']);
author[1] = new Author('Yukihiro Matsumoto', ['Ruby']);

author[1].getName(); // 'Yukihiro Matsumoto'
author[1].getBooks(); // ['Ruby']
この例から、以下のような extend 関数を定義しておけば、Classical Inheritance のパターンを汎用的に利用できることが分かります。
/* Extend function. */
function extend(subClass, superClass) {
var F = function() {};
F.prototype = superClass.prototype;
subClass.prototype = new F();
subClass.prototype.constructor = subClass;

subClass.superClass = superClass.prototype;
if (superClass.prototype.constructor == Object.prototype.constructor) {
superClass.prototype.constructor = superClass;
}
}
この extend 関数を以下のように利用することで、継承を簡単に実現することができるようになります。
/* Class Person */
function Person(name) {
this.name = name;
}

Person.prototype.getName = function() {
return this.name;
};

/* Class Author */
function Author(name, books) {
Author.superClass.constructor.call(this, name);
this.books = books;
}

extend(Author, Person);

Author.prototype.getBooks = function() {
return this.books;
};

Prototypal Inheritance

Prototypal Inheritance とは、プロトタイプとなるオブジェクトを作成し、それを clone (複製) したものにメソッドを追加しながら、継承を実現するものです。

※ clone で生成されるのは deep copy ではないので注意してください。

Prototypal Inheritance は、JavaScript の prototype チェーンの性質を最大限に活用することによって実現します (ただし、実装自体は非常にシンプルなものです) 。

では例を見てみましょう。
/* Person Prototype Object. */
var Person = {};
Person.name = 'default name';
Person.getName = function() {
return this.name;
};

/* Author Prototype Object */
var Author = clone(Person);
Author.books = [];
Author.getBooks = function() {
return this.books;
}

var author = clone(Author);
author.name = 'Yukihiro Matsumoto';
author.books.push('Ruby');

author.getBooks();
このとき利用されている clone 関数は以下のような定義です。
/* Clone Function */
function clone(obj) {
var F = function (){};
F.prototype = obj;
return new F;
}

Classical and Prototypal Inheritance の比較

この 2 つの 継承パターンの pros & cons は以下の通りになります。

Classical Inheritance については、
  • (Pros)JavaScript やプログラマのコミュニティにて理解しやすい
  • (Cons)クラスベースの継承だが、object に prototype を結びつけるので混乱しやすい
Prototypical Inheritance の方は、
  • (Pros)メモリを効率的に利用できる
    ※ prototype chain の性質上、全ての clone オブジェクトは、プロパティやメソッドを上書きしない限り、ひとつのオブジェクト (プロトタイプとしたオブジェクト) の属性またはメソッドを参照するだけで済むからです。
  • (Cons) prototype の概念に慣れていないプログラマには理解されづらい
となります。

Mix-in

継承のおまけとして、Mix-in を実現することもできます。
ここでは Classical Inheritance パターンの場合にどのように Mix-in を実現するかを見てみます。

※ Prototype Inheritance を利用する場合、Mix-in は Prototype Object の prototype にメソッドを実装すれば良いだけなので省略します。

オブジェクトをシリアライズするクラスを、任意のオブジェクトに実装することを考えてみましょう。

まず、任意のオブジェクトをシリアライズのメソッドは以下のように書けます。
/* Mix in class implemented to any other object. */
var Mixin = function() {};
Mixin.prototype = {
serialize: function() {
var output = new Array();
for (key in this) output.push(key + ': ' + this[key]);
return output.join(', ');
}
};
このクラスを Author クラスに以下のように Mix in します。
augment(Author, Mixin);
var author = new Author('Larry Wall', ['Perl']);
author.serialize();
結果、以下のようなシリアライズされた出力を得ることができます。
"name: Larry Wall, books: Perl, constructor: function Author(name, books) { Person.call(this, name); this.books = books; }, getBooks: function () { return this.books; }, serialize: function () { var output = new Array; for (key in this) { output.push(key + ": " + this[key]); } return output.join(", "); }, getName: function () { return this.name; }"
ここで利用された augment 関数は以下のようになります。
/* Augument function */
function augment(receivingClass, givingClass) {
if (arguments[2]) {
for (var i = 2, len = arguments.length; i < len; i++)
receivingClass.prototype[arguments[i]] = givingClass.prototype[arguments[i]];
}
else {
for (methodName in givingClass.prototype) {
if (!receivingClass.prototype[methodName])
receivingClass.prototype[methodName] = givingClass.prototype[methodName];
}
}
}

2008年9月6日土曜日

Cybozu2ICal.ja_JP をレンタルサーバで

僕の知り合いの多くは会社のスケジュール管理として、Cybozu Office を利用しているようです。
Cybozu Office は高機能で、社内スケジュール管理などには不足ないのですが、
  • スケジュールデータを他デバイスでサブスクライブして外出先で参照
  • 会社のスケジュールを個人カレンダーとマージ (1 日の個人スケジュールをトータルで管理できる)
などと考え出すと、途端に途方に暮れてしまいます。
これを解決する手段として、Cybozu2ICal.ja_JP (以下 Cybozu2ical と略記) という素晴しい perl モジュールを公開してくださっている方がいます。
サイボウズオフィス6以降のカレンダーアイテムを取得して、iCalendar形式に変換するコマンドラインプログラムです。このプログラムを利用することで、サイボウズのカレンダーを、iCalendar形式をサポートするアプリケーション(Microsoft Outlook, Apple iCal, Google Calendarなど)に簡単に統合できます。Cybozu2ICal.ja_JP - Ogawa::Code - Trac Description

Cybozu2ical を利用したスケジュール管理

Cybozu2ical は以下の簡単なコマンドで、Cybouzu Office を利用している会社のスケジュールを iCal 形式にして出力してくれます。
./cybozu2ical --conf config.yaml
このコマンドを会社のイントラサーバに仕掛けておいて、定期的に出力するようにすれば、様々なデバイス、アプリケーションで自分のスケジュールを管理することができるようになります。

例えば、
  • 出力フィードを Google カレンダーにサブスクライブさせ、携帯から参照
  • Mac の iCal に取り込んで iPhone に同期。

レンタルサーバで Cybozu2ical

Cybozu2ical の本質とは全く関係ないのですが、この便利ツールを利用するのに、例えば、営業さんは、自分で perl モジュールをインストールする自前サーバを持ってないことが多いでしょう。

僕の知人は、「外出先からスケジュール確認したいんだけど、レンタルサーバを借りたので、Cybozu2ical をインストールしてくれませんか?」と依頼してきました。

さくらインターネットのような格安だけれど、管理者権限を持てないようなレンタルサーバに、 Cybozu2ical のような CPAN モジュールをがんがん利用するモジュールをインストールするのは少しだけ工夫が必要でしたので、ここにインストールログを残しておきます。

ルート権限を持たないサーバでの CPAN の設定

今回利用したのはさくらインターネットのレンタルサーバで、シェルは cshell。perl は 5.8.8 を利用しています。
レンタルサーバで CPAN を利用するには、ホームディレクトリ以下に CPAN モジュールをインストールするように設定するのがポイントです。
$ cd mkdir ~/perl
$ mkdir -p ~/.cpan/CPAN/
$ touch ~/.cpan/CPAN/MyConfig.pm
MyConfig.pm を以下のように書き替えてください。
$ CPAN::Config->{cpan_home} = undef;
$ CPAN::Config->{makepl_arg} = 'PREFIX=/home/umemac/perl LIB=/home/umemac/perl/lib INSTALLMAN1DIR=/home/umemac/perl/man/m
an1 INSTALLMAN3DIR=/home/umemac/perl/man/man3';
$ CPAN::Config->{histfile} = "$ENV{HOME}/.cpan/histfile";
1;
さらに、ライブラリのパスを環境変数として設定します。
$ vi ~/.cshrc

setenv PERL5LIB /home/USERNAME/perl/lib:/home/USERNAME/perl/lib/perl5/site_perl/5.8.8:/home/USERNAME/perl/lib/perl5/5.8.8
※ USERNAME は適宜変更してください。
次に cpan を起動し、初期設定開始。
$ perl -MCPAN -e shell
質問に対して Enter キーの連打で OK ですが、CPANミラーサイトの選択だけは、お住まいの地域に合わせ、設定してください。
(1) ...
(2) Asia
(3) ...
(4) ...
Select your continent (or several nearby continents) [] 2

(1) ...
(2) ...
(7) Japan
(8) ...
Select your country (or several nearby countries) [] 7

(1) ftp://...
(2) ftp://...
(3) ftp://...
Select as many URLs as you like (by number),
put them on one line, separated by blanks, e.g. '1 4 5'
(or just hit RETURN to keep your previous picks) [] 1 4 5
これで準備完了です。Cybozu2ical に必要なモジュールをインストールしていきましょう。
cpan> install Text::CSV_XS
cpan> install DateTime
cpan> install LWP::UserAgent
cpan> install Class::Accessor::Fast
cpan> install Data::ICal
cpan> install YAML
※一部上手くいかないときは cpan> force install <モジュール名> を試みてください。

Cybozu2ical の設定

次に、Cybozu2ical をダウンロードします。
$ mkdir ~/src
$ cd ~/src
$ /usr/local/bin/wget "http://code.as-is.net/public/attachment/wiki/DownloadableFiles/cybozu2ical-0.31.zip?format=raw" -O cybozu2ical-0.31.zip
$ unzip cybozu2ical-0.31.zip
$ cd cybozu2ical-0.31
自分のサイボウズの設定をモジュールに教えるために、 config.yaml を用意します。
$ cp -p config.yaml.sample config.yaml
$ chmod 0600 config.yaml
$ vi config.yaml
以下の、デフォルトの設定を、自分の設定に書き替えて保存してください。
cybozu_url: http://www.example.com/cbag/ag.cgi
calname: Your Calendar Name
username: user
#userid: XX
password: pass
time_zone: Asia/Tokyo
tzname: JST
input_encoding: shiftjis
output_encoding: utf8
#calendar_driver: SyncCalendar
calendar_driver: ApiCalendar
date_range: 30
ここまできたら、Cybozu2ical モジュールがきちんと動くか試してみましょう。
$ ./cybozu2ical --conf config.yaml
BEGIN:VCALENDAR
CALSCALE:GREGORIAN
METHOD:PUBLISH
.....
iCal 形式のスケジュールが表示されたら成功です。

Crontab の設定

ここまできたらもう一息。Crontab で、上記のコマンドを定期的に実行するように設定し、出力結果を www (公開) ディレクトリ以下に置いておけば、いつでも、iCal 形式のほぼ最新のスケジュールが 様々なアプリケーションから参照できるようになります。

Cybozu2ical の定期実行用に、以下のような簡単な shell スクリプトを用意します。
$ touch cron.sh
$ vi cron.sh

#!/bin/csh

# Crontab 用に環境変数を設定
setenv PERL5LIB /home/USERNAME/perl/lib:/home/USERNAME/perl/lib/perl5/site_perl/5.8.8:/home/USERNAME/perl/lib/perl5/5.8.8

cd /home/USERNAME/cybozu2ical-0.31/

./cybozu2ical --conf config.yaml>/home/USERNAME/www/s5gI6e2kp3XQ6t9N73Fk2
※USERNAME や 出力ファイル名 s5gI6e2kp3XQ6t9N73Fk2 は適宜変更してください。

出力ファイル名は、複雑にしておくことをお勧めします。Strong Password Generator とかで生成すると良いんじゃないかな。必要に応じて、公開ディレクトリの HTTP プロトコルを変更したり、認証方式を工夫したりして、スケジュールの安全性を確保してください。

最後に Crontab に登録して完了!
*/3 * * * * csh /home/umemac/cybozu2ical-0.31/cron.sh
こうして一度、Cybozu Office に入ったスケジュールを、様々なアプリケーションからサブスクライブできるようになると、もう手放せなくなりますよ。

2008年8月20日水曜日

Mixi が OpenID に対応

mixiOpenID に対応しました。早速、利用してみました。

今回 mixi が対応した OpenID のバージョンは 2.0 とのこと。
つまり、ユーザは URI を入力することなく、 OpenID 対応のサイトから
  • mixi.jp と入力する
  • 「mixi アカウントでログイン」というボタンを押す
のどちらかでサードパーティサイトにログインすることが可能になります。
※試してみたい方は、例えばhttp://twitwi.tw/ から mixi.jp と入力してみてください。

ちなみに、OpenID の URI は、
https://id.mixi.jp/{ユーザID}
のようになっており、Yahoo よりは、分かりやすい形になっています。 (が、前述の理由で、ユーザはこの URI を覚える必要はありません。)

mixi の OpenID はサードパーティに、OpenID に付随する属性情報を公開する仕組み (OpenID Extentions) という仕様を採用しています。 mixi の OpenID では、OpenID の持ち主のニックネームを公開している模様です。サードパーティは OpenID でログインしたユーザのニックネームをサイト上で利用できることになります。
これは、Yahoo の OpenID がサードパーティに個人特定情報を一切解放していないのとは対照的です。

今回のリリースに関連して、mixi は 以下のページを公開しました。これらを見ていると、個人的な印象ですが、 mixi はサードパーティに対して加速度的にオープン化していくことを伺わせます。

また、サードパーティのサイトから mixi での OpenID 認証のために、mixi にリダイレクトしますが、この際、広告のある、 mixi の認証ページを挟んでいます。これにより、広告のインプレッションも増加するでしょう。

2008年8月18日月曜日

Merb ことはじめ

Ruby には、Rails 以外にも様々な Web Application フレームワークがあります
今回はその内のひとつ、 Merb を試してみました。

Merb とは?

Merb (Mongrel + Erb) は Ruby で書かれた MVC フレームワークです。

「規約と DRY」の Rails は、何でもできる一方で、コアが必要以上に大きいフレームワークとなっています。このため、あるプロジェクトでは Rails は冗長すぎる可能性もあります。

一方、Merb が目指したのは「疑わしきは入れず」。
コアはあくまでシンプルに。必要なものを必要に応じて追加していくイメージのフレームワークです。
この点で、Merb の本家サイトではその特徴として、
  • Faster
  • Lighter
  • More Agile
を謳っています。

Welcome!

以下では、Merb 0.9.4 及び、ランタイムとして Ruby 1.8.6 を利用します。
まず、以下のコマンドでインストールをします。
$ sudo gem install merb --include-dependencies
続いて、Merb アプリケーション、hello_merb を生成します。
$ merb-gen app hello_merb
Generating with app generator:
[ADDED] hello_merb/test/test_helper.rb
[ADDED] hello_merb/public/stylesheets/master.css
.......
[ADDED] hello_merb/app/views/layout/application.html.erb

$ cd hello_merb

merb は以下のコマンドで一発で起動します。
$ merb
これで、http://localhost:4000/ にアクセスすると、Welcome! のページが表示されるようになります。

Hello, Merb!

次に Controller を利用して、Hello, Merb の文字列を表示させてみます。Merb には generator が装備されています。以下のコマンドから、hello コントローラを生成します。
$ merb-gen controller hello
Generating with controller generator:
[ADDED] app/controllers/hello.rb
[ADDED] app/views/hello/index.html.erb
[ADDED] spec/controllers/hello_spec.rb
[ADDED] app/helpers/hello_helper.rb
[ADDED] spec/helpers/hello_helper_spec.rb
Rails と異なり、Controller の名前の後ろに _controller はつきませんので注意。Hello, Merb を表示する方法は次の 2 通り。
  • app/views/hello/index.html.erb に文字列 Hello, Merb! と記述。
  • Hello Controller の index アクションを、以下のように変更
    class Hello < Application
    # ...and remember, everything returned from an action
    # goes to the client...
    def index
    "Hello, Merb!"
    end

    end
2 番目の方法において、アクションの実行結果のオブジェクトが HTTP レスポンスボディになることを利用しています。

これらの作業により、http://localhost:4000/hello/ にアクセスすると、"Hello, Merb!" が表示されます。

DataMapper を利用する

Merb のデフォルトの Object Relational Mapper: ORM は Rails と同じく ActiveRecord です。しかし、Merb の性質上、他の ORM を利用することができます。せっかくなので、今回は、ActiveRecord とは別の ORM、DataMapper を利用します。

DataMapper は、
  • 高速
  • スレッドセーフ
  • 高機能
を目標とした、Ruby で記述された ORM です。

まず、DataMapper の インストールです。
Merb 上で利用する場合、Edge DataMapper が必要です。
Edge DataMapper を以下のコマンドからインストールします。
$ sudo gem install addressable english rspec
$ mkdir -p ~/src
$ cd ~/src
$ sudo gem install sake
$ sake -i 'http://github.com/dkubb/dm-dev/tree/master/dm-dev.sake?raw=true'
$ sake dm:clone
$ cd dm
$ sake dm:install
※ 以下のコマンドでも DataMapper 自体インストールできます。 ただ、 Edge DataMapper をインストールしないと、Merb 上では DataMapper が上手く動作しませんでした。
$ gem install data_objects do_sqlite3 do_mysql dm-core 
さて、次に、 DataMapper を利用したアプリケーション、 dm_test を作成することにします。
先程作成した、hello_merb ディレクトリから一旦抜けてください。

ORM に DataMapper を利用したアプリケーション、 dm_test を以下のコマンドから作成します。
$ merb-gen app --orm datamapper dm_test
Generating with app generator:
[ADDED] dm_test/test/test_helper.rb
[ADDED] dm_test/public/stylesheets/master.css
[ADDED] dm_test/config/init.rb
....
[ADDED] dm_test/app/views/layout/application.html.erb
更に、config/database.yml.sample を生成します。
rake dm:db:database_yaml
これをコピーし、config/database.yml とし、データベースを環境に合わせ、以下のように設定します。
# This is a sample database file for the DataMapper ORM
development: &defaults
# These are the settings for repository :default
adapter: mysql
database: dm_test
username: dm_test_user
password: secret
host: localhost
次に、モデルを生成します。
$ merb-gen model user
Generating with model generator:
[ADDED] spec/models/user_spec.rb
[ADDED] app/models/user.rb
生成されたモデルを以下のように編集します。
class User
include DataMapper::Resource
property :id, Integer, :serial => true
property :name, String, :nullable => false
end
そして migrate。
rake dm:db:automigrate
ここまでできたら、merb -i (Rails での script/console) で model を操作してみます。
$ merb -i
~ Loaded DEVELOPMENT Environment...
~ Connecting to database...
~ loading gem 'merb_datamapper' ...
~ Compiling routes...
~ Using 'share-nothing' cookie sessions (4kb limit per client)

# User を生成
irb(main):001:0>user = User.new(:name => "Naofumi HAIDA")
=> #<User id=nil name="Naofumi HAIDA">

# 保存
irb(main):002:0> user.save
=> true

# 取得
irb(main):003:0> User.all
=> [#<User id=1 name="Naofumi HAIDA">]

# id 1 のユーザを取得
irb(main):004:0> User.get(1)
=> #<User id=1 name="Naofumi HAIDA">
このように、ユーザモデルを操作できるようになりました。同様にコントローラからモデルを操作することにより、アプリケーションができていきます。

DataMapper の repository 機能

DataMapper では複数の Database を簡単に使い分けることができます。先程の config/database.yml ファイルの repositories の項目に以下のように記述を追加します。
# This is a sample database file for the DataMapper ORM
development: &defaults
# These are the settings for repository :default
adapter: mysql
database: dm_test
username: dm_test_user
password: secret
host: localhost

# レポジトリの設定
repositories:
common:
adapter: mysql
encoding: utf8
database: dm_test_common
username: dm_test
password: dm_test_user
host: localhost
共通で利用する DB が別にある場合を想定して、common という名前の DB を設定してみました。これを以下のように利用できます。
# デフォルトで利用する DB からデータを取得
user = User.first
# 共通データベースからデータを取得
admin = Admin.first(:repository => repository(:common))
モデル単位でどこのリポジトリを使うか、を設定できますので、上記のように、普通のデータはデフォルトの DB に入れ、あるモデルは :common から取得する、という使い方もできます。

まとめ

本記事のように、Merb では必要に応じ、必要なライブラリを使いながらアプリケーションを構築していくことができます。また、Rails ライクにアプリケーションを作成できるので、Rails からの乗り換えもそれほど大変ではないかと思います。


※ 参考記事

2008年8月17日日曜日

RSS に広告が表示されます

RSS 広告と言えば、日本では RSS 広告社 が有名です。

しかし、この度、というリリース。
このブログの RSS にも広告が入るかな、と思い、早速試してみました。

これまで、このブログではデフォルトの RSS へのアクセス (http://purple-skys.blogspot.com/feeds/posts/default) を Feed Burner の作成する RSS にリダイレクトすることで、FeedBurner の持つ、レポート機能など、便利な機能を利用していました。

ところで、Google は FeedBurner を買収しています ので、今回のリリースにより、 FeedBurner で作成した RSS に、広告を表示するオプションがつくのかな、と思いきや??
Adsense アカウントと FeedBurner アカウントへのインテグレートは作業中、とのことです。

仕方なく、アドセンスで、新規に Haida's weblog というフィードを作りました。
このフィードを、利用している RSS リーダにアグリゲートさせると、広告が表示されるようになります。
※ 今のところ挿入される広告は、バナー広告とテキスト広告の組合せとなっているようです。

やるなぁ、Google。。
このシステムにより、Google はブログのフィード、という巨大なメディア媒体を Ad Network 化することになる訳です。

さて、今までこのブログをフィード登録してくださっていたみなさま、是非この機会に、こちらのフィード → Haida's weblog に切り替えてみては??笑

※ FeedBurner で作成した RSS を、新規に作った RSS にリダイレクトすれば良いという話もあります。しかし、 FeedBurner では、RSS をさらにリダイレクトさせる機能は見当たりませんでした。

2008年8月1日金曜日

Ext JS 勉強会メモ

最近 ExtJS という JavaScript ライブラリが注目されています。
開発者は、このライブラリを利用することで、簡単に Windows ライクな UI を実装することができます。例えば Feed Viewer とか、Web Desktop とか。
最近、日本でも Ext Japan が設立され、勉強会が行われるようになりました。

29/07/2008 @ 青山 で開催された、第 2 回 ExtJS/ExtGWT 勉強会 (Powered by Ext JAPAN) に参加してきましたので、そのメモを残しておきます。今回の参加者は 20 名。

※ ちなみに API Document (日本語) もあります。

ExtJS を利用したアプリケーションの作り方


参考: http://www.xenophy.com/
ExtJS を利用したアプリケーション作成では、以下の手順はほぼ必ず踏むことになる。

1. 3 ファイルを読み込む
- ext-all.css, ext-base.js, ext-all.js

2. ソースを書く

- DOM ロードを待って実行するソースコードを記述
Ext.onReady(function() {
});


- レイアウトを記述するコードを書く
良く利用される border レイアウトの例
Ext.onReady(
function() {
new Ext.Viewport(
{
layout: 'border',
title: 'Sample Codes',
items: [
{
region: 'north',
height: 100,
title: 'North Area'
},
{
region: 'west',
width: 100,
split: true,
title: 'West Area'
},
{
region: 'east',
title: 'East Area'
}
],
renderTo: Ext.getBody()
}
);
}
);

- アプリケーションのためのクラス設計
Ext JS でクラスを作成するには、Ext.util.Observable を継承すること

- 名前空間の定義 (Packaging)
Ext.ns('Ext.app');


- 継承の例
// App という名前空間を定義
Ext.app.App = function(cfg) {
// config 適用
Ext.apply(this, cfg);

// 親コンストラクタ呼び出し
Ext.app.App.superclass.constructor.call(this, {
});
};


// Ext.app.App を Ext.util.Observable というクラスを継承させる
Ext.extend(Ext.app.App, Ext.util.Observable, {
init: function() {
new Ext.Viewport(
{
layout: 'border',
title: 'Sample Codes',
items: [
{
region: 'north',
height: 100,
title: 'North Area'
},
{
region: 'west',
width: 100,
split: true,
title: 'West Area'
},
{
region: 'east',
title: 'East Area'
}
],
renderTo: Ext.getBody()
}
);
}
});

- extJS はまだクロスブラウザで挙動が安定しないこともあるらしい


OpenSocial で作る Ext アプリケーション



田中洋一郎様 発表

OpenSocial とは?


Facebook ショックが発端。

1.開発者がアプリケーションを自由に登録できる (Facebook Platform)
→ 会員は登録された多くのアプリケーションを利用できる

2.SNS アプリケーションの登場
  • 会員情報を利用する
  • 友達関係を利用する
  • SNS が提供する Web ページに統合される
  • アプリケーションの利用状況が共有される
  • SNS 外のデータを利用できる
3. Facebook アプリケーション利用による利害関係

SNS 利用者
  • 次々と新しい APP を得られる
  • 常に新鮮な気持ちを持って SNS を利用できる

運営者
  • 自ら機能追加をしなくて済む
  • APP がコンテンツを生みだしてくれる

開発者
  • ユーザ獲得の手間がない
  • 広告をアプリ内に入れればマネタイズ可能


※ Facebook アプリケーションの弱点
→ 他の SNS に移植する手間がとてもかかる
→ OpenSocial (= Learn once, Write anywhere.) の登場

OpenSocial アプリケーションの作り方



標準技術の適用により学習コストが低い
  • HTML + JavaScript + REST + OAuth
  • Web アプリ開発者の日常使用技術
  • 例えば、HelloWorld なら以下くらいのソースコードを書くと良い
<?XML version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="Hello">
<Require feature="opensocial-0.7" />
</ModulePrefs>
<Contents type="html"><![CDATA[
Hello, world
]]></Contents>
</Module>

OpenSocial API


1. People & Friends の情報取得

2. Activities
アプリケーションの利用状況を公開 & 共有

3. Persistence
標準で提供されるデータ格納領域

Ext.js と OpenSocial


OpenSocial が html や JavaScript といった Web 標準技術を利用しているため、相性は良い。上記の例の content タグ内に、 普通に ExtJs のアプリケーションコードを書くだけ。

OpenSocial の現在のステータス


OpenSocial ver 0.8。ver 1.0 の登場も間近


Ext GWT で作成する GWT で作成する iPhone ウェブアプリ



GWT とは??

  • Google 発 Java → JavaScript コンパイラ
  • GWT Hosted Browser ← 書いたコードをテストする専用ブラウザ
  • JRE emulation library
  • GWT WebUI class ライブラリ
  • サーバ側も Java でそのまま記述

ExtGWT を利用するにあたり、インストールするもの

  • Exlipse 3.4 + WTP
  • Cypal Studio for GWT RC8
  • GWT 1.5
  • GXT 1.0.1
  • Apache tomecat 5.5.6
  • JDK

Ext GWT で作成する iPhone ウェブアプリ



スクリーンキャスト (Jingを利用) があるが、後日アップロードされる
  • panel の横幅 は 320px
  • viewport メタタグ
  • windowResizeListner でイベントをキャッチ



その他



勉強会は来月 (8月) もあり
  • extjs.co.jp から資料辿れる
  • extjs 2.0 は来月 (2008/8 月)リリース予定


GPL ver3 に準拠するアプリケーションならばオープンソースとして利用できる
※商用な用途のものは商用ライセンスを購入する
  • チームライセンス, ワークグループライセンス
  • ライセンスは EXT JS LLC 米国からライセンスを買う
  • Ext Japan は販売代行であり、Ext Japan はサポートで稼ぐ
※ ライセンスに関しては最後の質疑応答で頻繁に質問されていました。

マッシュアップキャラバンでも利用したらどうか、とか。

その他参考になりそうな記事


IBM Developer Networks 内にいくつかExtJS 関連の記事がありました。

2008年7月31日木曜日

第 2 回ジオメディアサミット



2008/7/30 に、第2回ジオメディアサミット が開催されました。

今回のイベントでは、シリウスも運営として主体的に動き周ったせいもあり、大変印象的なイベントでした。

「ジオメディア」という言葉自体は造語で、位置情報を利用したインターネットメディア、という意味。ジオメディアサミットは、ジオメディアを運営している方を招き、プレゼンテーションしてもらう、という内容で、今年の 3 月に第 1 回を開催して以来の取り組みでした。

企画自体は 3 ヶ月くらい前からあり、いつの間にか Yahoo! の会場を借りることが決まり、Yahoo, Google, Koozit, ロケーションビュー、など、日本で今、有名なジオメィアの中に入る方々が参加する、という、できすぎっぷりイベントに。
参加者の数も Yahoo! のセミナールーム 3 部屋分のスペースが一杯になるくらい大変な人の入りで、ジオメディアに対する注目の高まりを改めて感じました。



今回のテーマは「ジオメディアの未来について考える」で、前述の企業の方々に取り組み状況や、ジオメディアの今後について語って頂きました。

個人的には第一登壇者として講演して頂いた Koozyt の Location Amplifier というコンセプトが興味深かったなぁ。本イベントでの、講演、ライトニングトーク、そして懇親会でもライトニングトークがあり、昨日は全部で 15 名程度の発表を聞くことができました。

イベントのテーマ設定の影響もあるのかもしれないけれど、どの講演者からも、未来を作るんだ、という意気込みが感じられ、熱い気持ちなりました。

懇親会では会社の垣根関係なく参加者がジオメディアについて語る姿が印象的でした。
素敵じゃない?

とは言え、日本のジオメディアの道はまだまだ始まったばかり。
今後もその発展に貢献し、人々の生活をより便利にすることに貢献できるよう、頑張っていきたい。

最後にイベント運営者の皆様、参加して頂いた皆様、どうもありがとうございました。
※ ジオメディアサミットのその他の写真
GeoMedia Sumiit vol2 - a set on Flickr

フロントエンジニアに必要な素質は何か

自社の Web サイト上でビジネスを展開する企業にとって、フロントエンジニアの存在は重要だ。ここで、フロントエンジニアとは、以下のように定義している。
JavaScript, CSS, HTML, Ajax などの技術により、反応の良い、エレガントな UI を持つソフトウェアを書くスペシャリスト。
例えば、米 Yahoo には 600 人以上のフロントエンドエンジニアがいる、というし、Google のジョブボードにも勿論、Front Engineer という職種がある。

どんなエレガントなロジックも、フロントエンジニアの作成したインターフェースを通してユーザに提供される以上、フロントエンジニアの力量はサイトの力量に直接影響する。

フロントエンジニアに必要な素養とは次のようなものであろう。
  • サーバサイド技術の開発経験
  • Ajax/HTML/CSS 経験及び UI デザインへの興味
  • OOP な JavaScript 技術
  • ウェブアプリケーション開発経験
  • XUL, Flex, XAML などの UI フレームワーク の知識
  • クロスブラウザプラットフォームにおける経験
  • コンピュータサイエンスの知識
これを踏まえ、フロントエンジニアの面接には、一般のエンジニア用の面接問題に加えて、以下のような面接問題が有効だと思われる。
UI が優れていると考えている Web サービスをひとつ挙げ、その理由を教えてください。
(目の前でサイトを開いて論じてもらう)
デザイン が優れていると考えている Web サービスをひとつ挙げ、その理由を教えてください。
(目の前でサイトを開いて論じてもらう)
会社のブレインストーミング用の部屋をデザインしてください。
デザインするにあたり、必要な情報は適宜聞いて頂いて構いません。
mixi のような SNS サイトを作成するプロジェクトに参加することになりました。
会員登録ページを作成することが最初の仕事です。
あなたの出番はどこですか??
開発者と連携する必要がある場合は、その様子を教えてください。
今から 15 分で、以下のようなモバイルページをデザインし、デザインにあたり、注意した点を教えてください。
モバイルデバイスは日本の 3G 携帯とします。
※ 画面内に必ず表示したい情報は以下です。必要な情報は適宜追加してください。
- 地図
- 友達の位置 (5人)
- 表示されている地図内に店舗のある広告
HTML, CSS, JavaScript 以外にも、注目しているメディア技術があれば教えてください。

2008年7月28日月曜日

シリコンバレー 2

休日に弦さんにナパバリーに連れていってもらった。
ワイナリは初だったけれど、ワインがあんなに素晴らしい環境で作られているということを知ることができて感動しました。


View Larger Map

そのときの写真が Flickr にあります
IMGP1680

写真は休日に撮影したものばかりなので、何だか遊びに行ってたみたいですがw

2008年7月21日月曜日

シリコンバレー

2 日くらい前から、1 年ぶりにシリコンバレーに来ている。

現地で働く人と会話をしながら、この土地の人特有の、スケールが大きく、ど真ん中な発想に、とても刺激を受ける。
作り手として、もっともっと頑張らなきゃなぁ、と気が引き締まる思いと共に、アウトプットの質を上げるためにも、情報収集の効率改善が必要だと感じている。

正直、こっち来てからほとんど寝ていない。
あと 3日、こちらにいる間、頑張ろうと思います。

写真もそのうちアップロードします。