[enchant.js] Safari での Sound の扱い

enchant.js でゲームを作る時、効果音やBGMの再生には Sound クラスを使う。音声ファイルは、Gameクラスのpreload関数を使って、ゲーム開始前にダウンロードしておく。例えばこんな感じ。

window.onload = function() {

    var game = new Game( 320, 320 );

    game.preload( "hoge.wav" );         //! game.assets["hoge.wav"] にSoundインスタンスが格納される
    //:

    game.assets["hoge.wav"].play()

    //:

};

しかし、MacのSafariでこのコードを動かすと、game.preload で処理が止まってしまう。Sound.load関数を使ってもうまくいかない。将来的にはSafariもしくはenchant.jsの改善で根本問題が解決するだろうけど、それまで問題を回避しつつ、問題が解決された時に最小のコード変更で対応できるようにしておきたい。Null Object パターン でSafariではSoundクラスのplay()やstop()を呼び出されても何もしないようにしておく。例えばこんな感じ。

DummySound = Class.create( Object, {

    initialize:function() {},

    play:function() {},

    pause:function() {},

    stop:function() {}

} );

var noSound = new DummySound();
function isSafari() {

    var strUA = navigator.userAgent.toLowerCase();

    return ( (strUA.indexOf("safari") != -1) && (strUA.indexOf("chrome") == -1) );

}
function preloadSound( url ) {

    if ( isSafari() ) {

        game.assets[url] = noSound;

    } else {

        game.preload( url );

    }

}
window.onload = function() {

    var game = new Game( 320, 320 );

    preloadSound( "hoge.wav" );
    //:

    game.assets["hoge.wav"].play()

    //:

};

将来、問題が解決された際には preloadSound 関数の実装を書き換えるか、preloadSound関数を使っている部分をgame.preload で置換すればよい。

というわけで、２本目の enchant.js ゲームをアップロードした。数字４つを四則演算で組み合わせて１０を作るゲームだ。ドラッグ＆ドロップで計算式を組み立てさせるための仕様の検討と、解答例を作ることで正解のない問題を出題しないようにしたところが工夫した部分。enchant.jsを使うと作るのは楽チンだから「何を作るか？」がこれからの課題だ。次は洗脳ゲーム テキパキ のクローンでも作ろうかな。

ゲームはこちら
ソースはこちら

enchant.js デビュー

HTML5の勉強をするのに、自分でゲームを作ってみるのが最適なんだろう、と考えてあれやこれや本を読んでみたのだけど、自分で書かなきゃならないコードの量が多くなりそうで、「実際に書くのは時間のあるときにしよう」と、なっていた。忙しさを言い訳にする社会人にありがちな話だ。

そんなある日、『enchant.jsでシューティングゲームを10分コーディングする映像』がすごい・・・ | IDEA*IDEA という記事に紹介されていた動画を見て衝撃を受けた。本当に簡単そうに、サクサクと動くものができていたのだ。書かなきゃならないコードの量も少なそうだ。動くモノを短時間で作れる、というのはヤル気を維持するためにとても大切な要素だと思う。APIも洗練されていて、人間様が書かなきゃならないコード以外は書く必要がないのも素敵。パフォーマンス上のペナルティもなさそう。ゲームに使えるドット絵までも提供されている。まさに至れり尽くせりだ。

興味は持ったものの忙しい社会人の僕としては、ネットよりも本で体系的に勉強したい。さっそく公式のガイドブックを買ってサンプルを動かしてみた。jsdo.itというオーサリングサイトがあり、自分が書かなきゃならないJavaScriptのコード以外は一切書かなくてよいのが、半端なく便利。既存のプロジェクトから新しいものを簡単にフォークできるのも素敵。jsdo.itにあったサンプルゲームを自分用にフォークして、子供達とアイデアを出し合いながら改良してそれなりに遊べる形になったので、9leap.net というサイトに投稿してみた。まさにベーマガの感覚だ。違うのは、必ず採用されて、すぐに他のユーザに遊んでもらえて、ハイスコア競争や感想／バグレポートの交換などもできちゃう点。これは、プログラミングの敷居がほぼゼロになったと言えると思う。

ゲームはこちら
ソースはこちら

ゲームフレームワーク enchant.js 、オーサリングの jsdo.it 、作ったものを共有する 9leap.net この組み合わせの気持ち良さ、世界中の人に知って欲しい。

HTML5とJavaScriptでスマートフォンゲーム作成! ゼロからはじめるenchant.js入門【公式ガイド】

職場で利用するTwitterクライアント『nobitter』

職場での利用に特化したTwitterクライアント『nobitter』をリリースしました。

• 解説ページはこちら
• ダウンロードはこちら
• ソースコードはこちら

nobitterの特徴

• nobitterを利用すると、職場のグループ内での「つぶやき」を暗号化した状態で送受信できます。
• フィルタ機能により、色々な視点でグループ内の「つぶやき」を見ることができます。例えば：
  • グループメンバー全員の最新の「つぶやき」を表示
  • 特定のメンバーの過去4時間分の「つぶやき」を表示
  • 自分宛の「つぶやき」を表示
• キーボードだけで快適に操作できるように様々なショートカットが用意されています
• グループ以外の一般のFollowersには暗号化された「つぶやき」を送信しません

何がうれしいの？
約３ヶ月前のエントリに、↓こんなことを書きました。

『ソフトウェア開発チーム用マイクロブログ』

最近、職場の同僚とTwitterでFollowしあっている。お互い邪魔をせずに相手の状況を把握できてとても便利だ。「他の人に見られているから、ちゃんとやらなきゃ」という気になる、というペアプロと同様の効果もある。

管理者の立場からすると、開発者の邪魔をせずに開発者の状況を把握できる、というのはとても大切なことだ。開発者というのは、トランス状態になると最大の効率を発揮するのだが、トランス状態に入るまでに時間がかかる上に、割り込みが入るとトランス状態から抜けてしまうからだ。トランス状態に入っている開発者は、絶対に中断してはいけない。

開発者の立場からすると、管理者に中断されないというのが最大のメリットだ。それに加えて、他の人の邪魔をせずに、慎ましやかな方法で助けを求めることができる、というメリットがある。助けを求めるメッセージを書いている間に、自分の頭が整理されて自力で解決に至る、といういわゆる「ベアプロ」の効果も期待できる。誰かに質問する前に、クマのぬいぐるみに質問してみろ、というアレだ。

問題は、社外秘情報を書き込めない、ということでした。当初は、RoRの勉強を兼ねて社内利用に特化したマイクロブログのサーバを自作しようかと考えていました。しかし、せっかく作ったものは世の中の人に広く使って欲しい ⇒ サーバを自前で用意するのは面倒くさいだろうな ＆＆ ユーザの立場で安心して使うためには暗号・復号はクライアント・サイドで実行したほうがいい ⇒ オープン・ソースのTwitterクライアントを作ろう、ということになりました。最初のバージョンを作ってから１ヶ月ほど、身内のチーム内で試用しました。大きな問題もなく、チーム内のコミュニケーション活性化に役立っている、と感じています。是非、皆さんの職場でも『nobitter』を使ってみてください。

重要なお願い

現在使用しているアプリケーションアイコンは、著作権的にマズイのです。どなたか、パソコンで絵を描くのが得意な方、「のび太」風の画像を描いていただけないでしょうか？画像のサイズは512x512ピクセルでファイル形式は問いません。一般的な静止画ファイルのフォーマットであればなんでもOKです。色数も自由です。もし、画像を提供してもいい、という親切な方がいらっしゃいましたら、nobukichi@gmail.com宛にご連絡ください。よろしくお願いします。

MacBookを買ってからやったこと

念願のMacBook（黒）が届きました。何より驚いたのが、その動作の速さ。VMWare Fusion用に4Gメモリも購入しておいたのですが、増設しなくてもVMWare上のXPまで含めてサクサク動いています。一応、これまでにやったことをまとめておきます。

1. Firefoxをインストール
2. Google Browser Syncをインストール （この時点で、最低限の生活は可能）
3. Dockから不要なアイコンを削除
4. Spacesを設定
5. ソフトウェアアップデートを実行
6. 二本指タッチ＋クリックで右クリックになるように設定
7. XCode Toolsをインストール
8. Qt 4.4.0 rc-1 をインストール
9. XBench1.3 を実行（後でメモリを増設後、比較予定）
10. subversion-client-1.3.1 をインストール
11. SCPlugin をインストール （subversion-1.4.x を前提としているらしく、動かない。とりあえず放置。）
12. MacPorts-1.6.0 ユニバーサルバイナリ版をインストール
13. boostをインストール （参考：http://d.hatena.ne.jp/akio0911/）
14. NeoOffice をインストール
15. The Unarchiver をインストール
16. Chicken of the VNC をインストール
17. Skype をインストール
18. Gyazo をインストール
19. VMWare Fusion をインストール
    • Windows XP をインストール
    • Ubuntu 7.10 をインストール
20. Macのキーボードの設定を変更 F１、F２などのすべてのキーを標準のファンクションキーとして使用をチェック
21. InsomniaX をインストール
22. Firebug をインストール
23. TwitterFox をインストール
24. capsキーの機能をcontrolキーに変更

UTCからローカルタイムへの変換

Qtで日時を扱う場合、QDateTimeクラスを使うと便利です。UTCからローカルタイムへ変換するにはtoLocalTime関数を使います。その際、QDateTimeのインスタンスにはtimeSpecプロパティとしてあらかじめ、Qt::UTCを設定しておく必要があります。デフォルトではQt::LocalTimeが設定されてしまうので、注意が必要です。

例えば、Twitter APIで取得した時刻データ（UTC）をローカルタイムに変換する場合、以下のように書きます。

inline QDateTime twitterTimeToLocalTime(const QString& twitterDateTime)

{

    //! Twitter returns date and time in a format like this:

    //!     "Tue Feb 19 20:56:22 +0000 2008";

    //!       0   1  2     3       4    5      <- index  

    QStringList stringList = twitterDateTime.split(" ");

    if (stringList.size() == 6) {

        QDate date(stringList[5].toInt(), engMonthToInt(stringList[1]), stringList[2].toInt());

        QTime time = QTime::fromString(stringList[3], "hh:mm:ss");

        QDateTime dateTime(date, time, Qt::UTC); //! Qt::UTCを指定するのを忘れずに

        return dateTime.toLocalTime();

    } else {

        //! oops the given string is in unexpected format

        return QDateTime::currentDateTime();

    }

}

これを以下のように書くと期待通りには動きません。

        //! 期待通りにうごきません。マネしちゃだめよ。

        QDateTime dateTime(date, time);

        dateTime.setTimeSpec(Qt::UTC);

        return dateTime.toLocalTime();

Twignatureを作ってみた

Twignature を使って、Twignature（＝Twitterへのリンクボタン）を作ってみた。

このボタン画像の生成とリンクの生成を自動でやってくれるパーツがあればいいのに、と思ったけど、はてなハイクと競合してるから、そこまで細かく面倒はみていただけないのですね。了解です。

全人類必読 [書評] 2日で人生が変わる「箱」の法則

中間管理職になってから、色々な人間関係の問題があった。部下との関係、上司との関係。自己啓発系の本をたくさん読んだ。リーダーシップ、コーチング、ＥＱなどなど。どの本も「納得」できる内容だったが、人間関係は改善されなかった。それどころか、知識を得たことによって、身の回りにいる人を批判するネタが増えた。上司たるもの、本来なら＊＊であるべきなのに、できていない。これじゃあ、仕事がうまくいかないのも当然。あの部下は、ビジネスマンとして最低限＊＊すべきなのに、それすらできていない。これじゃあ、管理できるハズがない。などなど。自分が変わっても、周りの人間が変わらないんじゃ意味ないよ、と、ある意味あきらめかけていた。

ふとしたきっかけで、『2日で人生が変わる「箱」の法則』を読んだ。本当に2日で人生が変わった。その効き目を実感できるレベルで。

ボクが感じた要点は↓こんな感じ。

1. 身の周りの人を「モノ」ではなく「人間」として見ろ。話はそれからだ。
2. 相手を「モノ」として見ている状態で、何かを伝えようとしても、反発されるだけ。
3. 相手の状態によらず、相手を「モノ」として見るか「人間」として見るか、の選択肢は常に自分にあるのだから、相手が自分を「モノ」として見ているか「人間」として見ているかは重要ではない

要点１・２を説明している文章を読んで「そういえばそうだよなぁ」と思った。ボクが救われた気分になったのは、要点３。「周りの人間が変わらないんじゃ意味ないよ」と悩んでいたこと自体が無意味であることに気づかせてくれた。自分が変わるだけで、ネガティブスパイラルをポジティブスパイラルに変えることができる。自分の意思で直接変えられることを変えるだけでいい。それなら実践できるかもしれない、と思って、「人間として見る」を心がけるようにした。効き目があった。

そもそも「相手を人間として見る」って、特に頭に血がのぼってるときには、難しい。ボクにとって有効だったのは、その相手が家族と団欒している場面を想像すること。家族と一緒にクリスマスを祝っている場面や、子供と公園でバドミントンをやっている場面を想像する。相手の喜び・悩み・苦しみ、をリアルに想像できるようになる。

同書は『自分の小さな「箱」から脱出する方法』の続編である。同一の世界の異なる人物が主人公で、お互いにリンクしている。フォーマットも内容もほぼ同じ。『〜方法』本は、若干ビジネスよりの視点で、『〜法則』本はどちらかというと、家庭内の人間関係よりの視点で書かれている。どちらも同じ内容を同じレベルの説得力で説明してくれているので、どちらか一冊読めば十分かも。

自分の小さな「箱」から脱出する方法

2日で人生が変わる「箱」の法則