出席者は制作とかデザイナの方が多かったんだろうな。スーツ姿はゼロだったし、女子率50%くらいだったし、技術系の勉強会とはちょっと雰囲気違いました。始まった直後にワークショップがあったのですが、「某航空会社の集客率（搭乗率）を上げ、売り上げをアップさせるためのバナー広告デザインを考えよう」というもので、なかなかパッとイメージができなかったのですよ。「うわぁ、制作の方々はこういうオーダーと日々格闘しているのだよなぁ」となんとも当たり前なことに改めて気付かされたりもして。

山口さんは個人で「Fireworksマニア」というサイトを持っていて、よく参考にさせてもらっているのですが、非デザイナなぼくでさえ「これなら自分でもできそう」というアイデアを紹介してくれるんですよ。今回のデモでもそんなTipsが満載で、非常に参考になりました。開発者同士だと「ペアプログラミング」がありますが、デザインにおいても、実際にアプリを操作してデザインを作り上げていくところを見るのはいろいろと勉強になりますねー。これからもFireworks使っていろいろデザインしたいと思います。

執筆された本にサインいただきました。ありがとうございましたっ

海外から来日して活躍されているCookpadの方や、通販サイトを作られている方、個人でiPhoneやAndroidアプリを作られている方など、いろんな方々が集まった会になり、とても嬉しく思いました。

Keep
•準備を進める中で、自分の頭の中を少しは整理できた
•参加された方がどんな部分で詰まっているか知ることができた

Problem
•ゴールの定義が曖昧だったかもしれない
•実例が少なかった
•自社の会議室でやったのだが、前の会議が長引いて参加者をお待たせしてしまった

Try
•需要がありそうなら懲りずにまた開催してみる
•そのときには操作デモをもう少し増やしてみる

使用したスライドをアップしておきます。（背景などを少し変えました）

【補足：スライドに引用させていだいたもの】
•ペーパースーパーマリオ – nintendo.co.jp
•icloudのアイコンに隠れた美しさの法則。 – DESIGN ARCHIVE
•色のいろいろー色彩調和 – キレイのためのカラー情報京都より

欧文印刷社 NUboard

ひとりブレストをする時にぼくはホワイトボードをよく使います。
ホワイトボードは（当然ですが）書いて消せるのがいいです。書き間違いを気にすること無く、思うままに「書いては消す」を繰り返すうちに、自分の考えがまとまっていきます。書いて消す行為はストレス解消にもなっている気がします。

また、ホワイトボードが無い部屋での打ち合わせのとき、これまでは自分のノートにペンで図を書きながら、お客さんに「こんな感じですか？」と確認したりしていたのですが、「そうじゃなくてここはこうで…」といった議論になると、どの文字や線がイキで、どれが消したものなのか、後で見返したときにわからなくなることがあるんですよね。その点、このNUboardは「持ち運べるホワイトボード」なので、そういった場でも活躍してくれます。

ホワイトボードは全部で8面。書いた内容を保存する場合は、普通にコピー機でA4コピーすればOKです。このあたりもノートタイプの利点ですねー。便利。

で、以下は本来の使い方ではないのですが…

SHOT NOTEというノートがあります。
専用のスマートフォンアプリでノートを撮影すると、ノートに書いた番号や日付をOCR処理してくれて（文面は無理）、属性情報とともにノート画像を保存できるほか、EvernoteやDropboxにも画像を転送できたりするのですが、このアプリを使って、NUboardの内容を保存してみました。

SHOT NOTEをA4サイズに拡大したものを半透明シートに挟んで…

SHOT NOTEのアプリでパシャっと。
半透明シートを撮影するので、蛍光灯などの光がなるべく映り込まないようにして写すと認識率が上がります。

そして、SHOT NOTEのアプリ処理後はこんな感じ。

NUboardとSHOT NOTE、かなり相性がいいと思うので、うまいことコラボしてもらえると素敵かもしれません。

さて、Amazon EC2でKanonを使う方法については、こちらのサイトで虎塚さんがUbuntu版を公開してくださってますが、個人的によく使ってるのがCentOSなので、このエントリではCentOS5でKanonをセットアップする手順をご紹介。

1. インスタンス作成
1-1. AWSの管理画面からEC2のダッシュボードを開き、「Launch Instance」をクリックして作成します。なお今回リージョンはUS Eastを使うことにします。

1-2. 使用するAMIを選びます。今回は、RightScaleから提供されているCentOS5.6のAMIを使いました。AMIのIDは「ami-3fe42456」です。

1-3. 虎塚さんも書かれていますが、Kanon独自のセキュリティグループを作った方がいいと思います。インスタンス起動後、接続元IPの制限を行うなどの設定も忘れずに。

1-4. Elastic IP Addressとの紐付け
インスタンスを作成したら、固定IPをインスタンスに紐付けます。EC2のダッシュボードの左メニューから「Elastic IP Address」を選び、「Allocate New Address」でIPアドレスを取得して、「Associate Address」で今回作ったインスタンスとの紐付けを行います。

2. インスタンスにKanonをインストール
2-1. 1で作成したEC2インスタンスにSSH接続します。今回使用したAMIでは、rootユーザーでログイン可能です。ユーザー名＋鍵認証でログインします。

2-2. Kanon Conductorをダウンロードします。今回は tar.gz ファイルをDLしました。

cd /tmp
wget http://kanon.ultimania.org/hg/KanonConductor/archive/tip.tar.gz

2-3. tar.gz ファイルを展開して、展開したディレクトリの直下にあるインストーラを起動します。

tar zxvf tip.tar.gz
cd KanonConductor-2e944b83b5f6
./kanon-setup

2-4. いくつか質問が出ますので、yかnかで答えます。回答が終わるとインストールが始まります。

RHEL 5.x / CentOS 5.x / OEL 5.xが検出されました。

このコマンドはKanonをインストールするよ。
既にkanonインストールされている場合は、上書きされて消えちゃうの。
Kanonをインストールする?(y/n) y

KanonではJava開発のためのビルドツールとてMavenをインストールして
利用することができます。ユーザが個別にインストールしたMavenを利用することもできますが、
ここでインストールするとJenkinsのデモを設定なしに利用することができます。
Mavenをインストールしますか?(y/n) y

Kanonは継続的インテグレーションツール(CIツール)として
Jenkinsを統合して使うことができます。
Jenkinsをインストールしますか?(y/n) y

2-5. インストールが始まるので気長に待ちます。下記のメッセージが出たら終了です。

Kanon Team Conductorのインストールが完了しました。
/opt/kanon/bin/kanon-create-project コマンドでプロジェクトを作成してください。

2-6. Apacheの設定ファイルに、mod_wsgiの設定を追記します。（これをやらないと2-8で503エラーが出る）

vi httpd.conf
WSGISocketPrefix run/wsgi ←これを追記

2-7. Apacheを起動します。

service httpd start
Starting httpd:                                            [  OK  ]

2-8. インストールの際に自動で作られるサンプルプロジェクトに接続してみます。http://{紐づけたElastic IP Address}/trac/SampleProject で、サンプルプロジェクトに接続します。

Enjoy Kanon!

こちらのサイトで紹介されているように、「Simple jQuery Spy Effect」というJSがあるので、基本的にはこれを使うとよいです。

ただ、このスクリプトにはちょっと難点があって、1つの項目を表示する欄の高さが一定になっています。基準となるのは、先頭の項目の表示高さです。
Twitterのつぶやきの長さは一定ではないので、表示に必要な高さも一定ではないのですが、スクリプトをそのまま使うと、2つめ以降の表示が途中で切れたり、余白ができたりしてちょっとカッコ悪いです。

ということで、ちょっと修正して、欄の高さを可変にしてみました。

表示サンプル

JavaScriptサンプル

$(function () {
    $('ul.twitter').simpleSpy();
});
(function ($) {
$.fn.simpleSpy = function (limit, interval) {
    limit = limit || 5;
    interval = interval || 5000;
    return this.each(function () {
        // 1. setup
            // capture a cache of all the list items
            // chomp the list down to limit li elements
        var $list = $(this),
            $list2 = $('ul.twitter-dummy'),
            items = [], // uninitialised
            currentItem = limit,
            total = 0, // initialise later on
            height = '300px';
        // capture the cache
        $list.find('> li').each(function () {
            items.push("<li class='update clear clearfix'>" + $(this).html() + "</li>");
        });
        total = items.length;
        $list.find('> li').filter(':gt(' + (limit - 1) + ')').remove();
        // 2. effect
        function spy() {
            // insert a new item with opacity and height of zero
            var $insert = $(items[currentItem]).css({
                height : 0,
                opacity : 0,
                display : 'none'
            }).prependTo($list);   

            // get real height
            var $insert2 = $(items[currentItem]).css({
                opacity : 0,
                display : 'none'
            }).prependTo($list2);
            height = $list2.find('> li:first').height();

            // fade the LAST item out
            $list.find('> li:last').animate({ opacity : 0}, 1000, function () {
                // increase the height of the NEW first item
                $insert.animate({ height : height }, 1000).animate({ opacity : 1 }, 1000);
                // AND at the same time - decrease the height of the LAST item
                // $(this).animate({ height : 0 }, 1000, function () {
                    // finally fade the first item in (and we can remove the last)
                    $(this).remove();
                // });
            });
            currentItem++;
            if (currentItem >= total) {
                return;
            }
            setTimeout(spy, interval)
        }
        spy();
    });
};
})(jQuery);

HTMLサンプル

<ul class="twitter">
<li class='update clear clearfix'>つぶやきつぶやき</li>
<li class='update clear clearfix'>つぶやきつぶやき</li>
<li class='update clear clearfix'>つぶやきつぶやき</li>
<li class='update clear clearfix'>つぶやきつぶやき</li>
<li class='update clear clearfix'>つぶやきつぶやき</li>
</ul>
<ul class='twitter-dummy'></ul>

概要としては以下の通り。

1. 表示に必要な高さを得るために、表示場所と同じスタイルが適用されるulオブジェクトをもう１つ作ります（サンプルでは「twitter-dummy」というのを作ってます）［HTMLサンプル8行目］
2. そのオブジェクトに対してアイテムを追加します［JavaScriptサンプル34行目～］
3. ダミーのオブジェクトはheightを指定しないようにして、表示に必要な高さを取得します［JavaScriptサンプル38行目］
4. その高さを、本来の表示場所の表示高さに指定します［JavaScriptサンプル43行目］

そうするとキレイにできますよ、と。