<img src="./skins/be_interactive/general_logo.png" width="820" height="100" alt="BeInteractive!">

2010年 07月 02日

「ActionScript3.0ライブラリ入門」予約開始！

一冊まるまる ActionScript3.0 ライブラリのことだけについて書かれた本が発売されます。その名も「ActionScript3.0ライブラリ入門」。僕は企画段階から関わっていたのですが、かなり濃ゆい本が出来上がりました。

第一章では、そもそもライブラリって？というところからはじまり、メリットや注意点、ライブラリの入手方法 (バージョン管理ソフトの解説)、各開発環境でのセットアップ方法を解説。第二章では、様々なジャンルごとに、メジャーなライブラリのチュートリアルと作例を紹介。解説されているライブラリ以外の、同種のライブラリも多数紹介しているので、ライブラリカタログとしても使えます。第三章では、ライブラリに関する FAQ が載っています。

企画当初から考えていたコンセプトは、「ActionScript3.0ライブラリのバイブルとなるような本」。すなわち、「AS3ライブラリについて勉強したいんだけど…」と言われた時に、「とりあえずこれ見とけばおk」と自信を持って渡せるような本です。既にライブラリを使っている人にとっては、新しいライブラリを探したり、未知のライブラリの使い方をサクッと調べるとっかかりになるような本となっています。著者陣も、池田さん、浦野さん、加茂さん、河村さん、小林さん、高輪さん、タロタローグさん、召田さん、森山さん、僕、といったそうそうたるメンバーです。

Amazon では既に予約が開始されていますので、ぜひご予約くださいませ！

2010-07-02 10:53

Comments(1)

TrackBack(1)

2010年 06月 14日

音 x トゥイーン

梅雨入りっぽいですが、皆様如何がお過ごしでしょうか。

さてさて。昨日の「Spark project 勉強会 SP3 – station 5 特別版 Flash Platform で遊んじゃいましたスペシャル！」にお越し下さった皆様、Ust でご覧になった方、どうもありがとうございました！相変わらず濃ゆい集まりでしたね。

見逃した！という方、以下から録画がご覧になれます。

http://www.ustream.tv/recorded/7631517

僕は最後から二番目の発表で、いつかやろうと思っていたネタ「音をトゥイーンさせたらどうなるんじゃ？」をやってみました。結果できたのがこれ。何かキーを押すとマイクの録音を開始し、離すと録音を終了して、再生します。右上からイージングを選べて、なんか面白いことになります。

ソースは全て

http://www.libspark.org/svn/as3/EazedSound/trunk/

以下にコミットしてあります。FlashBuilder4ならプロジェクトとして読み込めます。

ソースの構成は次のようになっています。

EazedSound.as - ドキュメントクラス
org.libspark.media パッケージ
- MicrophoneRecorder.as - マイクの録音を行うクラス
- ISoundSource.as - 音声のソースを定義するインターフェイス
- ByteArraySoundSource.as - ByteArray を音声ソースとして使うためのクラス
- ExternalSoundSource.as - 外部 Sound を音声ソースとして使うためのクラス
- EazedSoundPlayer.as - イージングを付けて音声を再生するためのクラス

解説は、上のビデオやスライドを見てください。

ちなみに BetweenAS3 をもっと有効活用できるように作った FlexibleSoundPlayer ってのも一緒にコミットしておきました。完成度はイマイチなんですが、興味ある人は position を BetweenAS3 でトゥイーンさせてみて下さい。

ではまた！

2010-06-14 22:29

2010年 06月 05日

ArtisticCoding: flashx.undo.UndoManager を使ったアンドゥ/リドゥの実装

あっという間に今年も半分が終わろうとしていますが、皆様如何がお過ごしでしょうか。

最近、仕事でエディタやツール的なものを作ることが多いのですが、いざ作ってみて思うのはイマドキ Cmd+Z が利かない (=アンドゥ/取り消しが出来ない) のはどーなのよ。ってことです。実際、世の FLASHer が Cmd+Enter の前に Cmd+S を押してしまうように、無意識に Cmd+Z を押してる場面も少なくないです。一個前にやっていた仕事ではアンドゥをつけなかったのを微妙に後悔していたりします (後から組み込むのは結構大変…)。

というわけで、今やってる仕事ではアンドゥを付けようと思って、さー UndoManager を書くぞと書き始めたら、補完に flashx.undo.UndoManager っていう、何か既に出来る子っぽいクラスが居るので、3秒で自分で作ったクラスは消しました。オブジェクト指向の奥義、再利用ってヤツです。

調べてみると、flashx.undo.UndoManager は、TextLayoutFramework に含まれているクラスのようです。Flex SDK 4 であれば、"frameworks/projects/textLayout/src/flashx/undo/UndoManager.as" に元のファイルを見つけることができます。たぶん、新しいテキストエンジンで色々やるために自前で実装する必要があったんでしょうね。

アンドゥ/リドゥを実現するためには、行った「操作」を覚えておいて、その操作に対する「復元」と「再実行」ができなければなりません。言い換えると、「復元」と「再実行」が出来る「操作」を表現するクラスが必要です。このようなクラスがあれば、操作を行う度に、このクラスのインスタンスを生成して溜め込んでおくことで、必要な時に「復元」を呼び出して、操作を取り消すことができます。所謂 Command パターンですね。

flashx.undo パッケージにも、このような Command クラスを実装するための、flashx.undo.IOperation というインターフェイスが存在します。定義されているメソッドはふたつで、perfomUndo() と perfomRedo() です。それぞれ、これが呼び出された時に「復元」と「再実行」を行えってことです。例えば何かドット絵エディタ的なものを作っているとして、「BitmapData のあるピクセルに色をセットする」という操作に対する IOperation インターフェイスの実装クラスは次のようなものになるでしょう。ちなみに、折角「操作」をクラス化するんですから、操作の「実行」もこのクラスに任せたいので、IOperation クラスを継承して execute() というメソッドを定義した IExecutableOperation を用意して、それを実装しています。

public interface IExecutableOperation extends IOperation
{
    function execute():void;
}

public class SetPixelOperation implements IExecutableOperation
{
    public function SetPixelOperation(bitmapData:BitmapData, x:uint, y:uint, color:uint)
    {
        _bitmapData = bitmapData;
        _x = x;
        _y = y;
        _color = color;
    }

    private var _bitmapData:BitmapData;
    private var _x:uint;
    private var _y:uint;
    private var _color:uint;
    private var _oldColor:uint;

    // 操作の呼び出し
    public function execute():void
    {
        // 元の色を覚えておく
        _oldColor = _bitmapData.getPixel32(_x, _y);
        // 色をセット
        _bitmapData.setPixel32(_x, _y, _color);
    }

    // 操作の取り消し
    public function performUndo():void
    {
        // 元の色に戻す
        _bitmapData.setPixel32(_x, _y, _oldColor);
    }

    // 操作のやり直し
    public function performRedo():void
    {
        // 色をセットする
        _bitmapData.setPixel32(_x, _y, _color);
    }
}

このようにすることで、ある操作に対する「実行」と「復元」と「再実行」の責任をひとつのクラス内にまとめることができました。このクラスを使用して、例えば次のようなコードを書くことで、取り消しが可能な操作を実現することができます。

// クリックされた時のハンドラ
private function clickHandler(e:MouseEvent):void
{
    // カーソル位置の色を選択されている色に変更する操作を生成
    var operation:IExecutableOperation = new SetPixelOperation(_bitmapData, stage.mouseX, stage.mouseY, _selectedColor);
    // 操作を実行
    operation.execute();
    // 取り消し可能な操作として UndoManager に登録
    _undoManager.pushUndo(operation);
}

_undoManager は、もちろん flashx.undo.UndoManager クラスのインスタンスです。こうしておくと、例えば Cmd+Z が押された際に _undoManager の undo() メソッドを呼び出せば、直前の操作を取り消すことが出来ます。勿論、更に undo() メソッドを呼び出せば、それ以前の操作もどんどん取り消されていきます。

ただし、ここで一つ問題があります。普通、undo() をしたら redo() を出来ることが期待されますが、この UndoManager は自動的には redo() をできるようにはしてくれません。この部分は自分で書く必要があるようです。なので、最終的に以下のような OperationManager というクラスを作りました。このようなクラスを一つ作っておくと便利でしょう。

public class OperationManager
{
    private static var _sharedOperationManager:OperationManager;
   
    /**
     * 共有されている OperationManager クラスのインスタンスを返します.
     */
    public static function get sharedOperationManager():OperationManager
    {
        if (_sharedOperationManager == null) {
            _sharedOperationManager = new OperationManager();
        }
        return _sharedOperationManager;
    }
   
    /**
     * 新しい OperationManager クラスのインスタンスを生成します.
     */
    public function OperationManager()
    {
        _undoManager = new UndoManager();
    }
   
    // 内部で使用する UndoManager
    private var _undoManager:UndoManager;
   
    /**
     * アンドゥが可能であれば true, そうでなければ false を返します.
     */
    public function get canUndo():Boolean
    {
        return _undoManager.canUndo();
    }
   
    /**
     * リドゥが可能であれば true, そうでなければ false を返します.
     */
    public function get canRedo():Boolean
    {
        return _undoManager.canRedo();
    }
   
    /**
     * アンドゥを実行して直前の操作を取り消します.
     */
    public function undo():void
    {
        // アンドゥできる状態でなければ何もしない
        if (!canUndo) {
            return;
        }
       
        // アンドゥ対象の操作を取得
        var undoOperation:IOperation = _undoManager.peekUndo();
        // アンドゥを実行
        _undoManager.undo();
        // リドゥできるように登録
        _undoManager.pushRedo(undoOperation);
    }
   
    /**
     * アンドゥを実行して直前に取り消した操作を再実行します.
     */
    public function redo():void
    {
        // リドゥできる状態でなければ何もしない
        if (!canRedo) {
            return;
        }
       
        // リドゥ対象の操作を取得
        var redoOperation:IOperation = _undoManager.peekRedo();
        // リドゥを実行
        _undoManager.redo();
        // アンドゥできるように登録
        _undoManager.pushUndo(redoOperation);
    }
   
    /**
     * 指定された操作を実行し、取り消し可能なよう登録します.
     *
     * @param    operation    実行する操作
     */
    public function execute(operation:IExecutableOperation):void
    {
        // 操作を実行
        operation.execute();
       
        // アンドゥできるように登録
        _undoManager.pushUndo(operation);
        // 新しい操作を実行した際はリドゥはもういらない
        _undoManager.clearRedo();
    }
}

このクラスを使用する場合、先ほどのコードは次のようになります。

// クリックされた時のハンドラ
private function clickHandler(e:MouseEvent):void
{
    // カーソル位置の色を選択されている色に変更する操作を生成
    var operation:IExecutableOperation = new SetPixelOperation(_bitmapData, stage.mouseX, stage.mouseY, _selectedColor);
    // 操作を実行
    OperationManager.sharedOperationManager.execute(operation);
}

自分で operation の execute() メソッドを呼び出す代わりに、OperationManager に渡して実行をしてもらいます。このあと、OperationManager の undo() を呼び出せば、操作が取り消されます。続けて redo() を呼び出せば、取り消した操作が再実行されます。何度か undo() を呼び出して、redo() を呼び出さずに execute() で新しい操作を実行すると、undo() した分の redo() はクリアされて再実行できなくなります (大抵のアプリケーションを観察するとこのような実装になっているのが分かるでしょう)。めでたく、いい感じにアンドゥ/リドゥが実装出来ました。

ちなみに、AIR でメニュー項目と関連づける場合は、次のようにすると、アンドゥ/リドゥ可能かによってメニューの有効/無効も切り替えることができます。

// アンドゥメニュー
var undoMenu:NativeMenuItem = new NativeMenuItem('Undo');
undoMenu.label = '元に戻す';
undoMenu.keyEquivalent = 'z'; // Cmd+Z or Ctrl+Z
undoMenu.addEventListener(Event.DISPLAYING, willDisplayUndoMenuHandler);
undoMenu.addEventListener(Event.SELECT, undoMenuSelectHandler);

// リドゥメニュー
var redoMenu:NativeMenuItem = new NativeMenuItem('Redo');
redoMenu.label = 'やり直し';
redoMenu.keyEquivalent = 'Z'; // Cmd+Shift+Z or Ctrol+Shift+Z
redoMenu.addEventListener(Event.DISPLAYING, willDisplayRedoMenuHandler);
redoMenu.addEventListener(Event.SELECT, redoMenuSelectHandler);

// メニューが表示される直前に呼ばれる
private function willDisplayUndoMenuHandler(e:Event):void
{
    var undoMenu:NativeMenuItem = e.target as NativeMenuItem;
    undoMenu.enabled = OperationManager.sharedOperationManager.canUndo;
}

// メニューが表示される直前に呼ばれる
private function willDisplayRedoMenuHandler(e:Event):void
{
    var redoMenu:NativeMenuItem = e.target as NativeMenuItem;
    redoMenu.enabled = OperationManager.sharedOperationManager.canRedo;
}

// メニューが選択されると呼ばれる
private function undoMenuSelectHandler(e:Event):void
{
    OperationManager.sharedOperationManager.undo();
}

// メニューが選択されると呼ばれる
private function redoMenuSelectHandler(e:Event):void
{
    OperationManager.sharedOperationManager.redo();
}

それではまた！

2010-06-05 03:00

2010年 06月 01日

Spark project 勉強会 SP3 – station 5 特別版 Flash Platform で遊んじゃいましたスペシャル！参加受付

2010-06-01 15:27

2010年 05月 18日

NTT DoCoMo SH-07B 待受アクセサリ

本日 NTT DoCoMo から夏に向けた新製品の発表がありましたが、その中の一つ、シャープ株式会社より発売される「SH-07B」の「待受アクセサリ」という機能の実装を僕と CD-IM の中原さんとで担当しました。ディレクションは Rightninc, Inc の美馬さんです。FITC Toronto 2010 の最後にちょっと話したのはこれのことでした！

製品情報のページの下の方にちょっとだけ書いてありますが、「待受アクセサリ」は、待受画面に自分の好きなように機能を追加したり削除したりレイアウトしたりして、カスタマイズ出来るというものです。ブックマークやカレンダーの表示、マナーモードのON/OFFなどの機能があります。色も変更出来ちゃいます。電話とメールには、アクセスしやすい新着リストが用意されていて、短縮登録なども出来ます。

正直、それほど目新しいものではありませんが、BeInteractive! が実装しているということは、そう、Flash (FlashLite) で作られています。待受画面用に特別にカスタマイズされた FlashLite エンジンの上で実行されています。「Flash で UI が作れれば、色々出来るんじゃね？」を、実際にやってみた第一弾、といったところです。

日本の携帯はスペックが高いにも関わらず、UI で損している部分が多々ある気がするので、そういうのが少しずつ改善すればいいなプロジェクト、だと勝手に思ってます。また、このプロジェクトは、端末を使うユーザーだけでなく、世の Flash 開発者にとっても面白いことになる可能性を秘めていると個人的に感じています。

もしドコモショップに行く機会があればぜひ触ってみてください〜。

2010-05-18 16:12

2010年 05月 14日

ArtisticCoding: オブジェクト指向のそもそも

先月や先々月は鼻から DisplayObject がパーティクルの如く吹き出そうなぐらいバリバリ実装をしていた反動か、今月は設計やデザインに食指が動く今日この頃です。というか、現実問題として実装前フェーズの案件が沢山あるってだけなんですけどね。

そんで色々考える訳なのですが、ふと、「オブジェクト指向そのもの」についてきちんと勉強したことが無い気がしてきました。これはいけません。なんかバイブル的なものってあるんでしょうか。

で、インターネッツを漂流していたらオージス総研さんの「オブジェクトの広場」にいい感じのまとめをいくつか発見しました。

で、気になったのが以下。

オブジェクト指向入門第二版

こいつがラスボス (いきなり) っぽい。入門書にしてバイブルなんですと。 (レビュー)

Booch法: オブジェクト指向分析と設計第2版

スリーアミーゴ (とか初めて聞いた…GoF みたいな) のお一人である Booch さんの本らしい。 (レビュー)

ソフトウェアアーキテクチャソフトウェア開発のためのパターン体系

POSAってそういえば聞き覚えある。GoF のデザパタ本よりもソフトウェア全体の設計について言及してるのかな。 (レビュー1, レビュー2, レビュー3)

デザインパターンプログラミング

なんか「メタパターン」というのについて書かれたものらしい。 (レビュー)

アンチパターン

アンチパターンもそういえば読んだことない。べからず集ですな。 (レビュー)

ケント・ベックの Smalltalk ベストプラクティス・パターン — シンプル・デザインへの宝石集

ケントベックと言えばXPとかアジャイルとかテスト駆動開発とかとかですな。コーディング作法が色々、みたい。 (レビュー)

実装パターン

ケントベックの Wikipedia 見てたらついでに見つけた本。上の本が1996年に書かれたものなのに対してこっちは2007年。進化版っぽい？ (レビュー)

うーん、いっぱい。最後の方は「オブジェクト指向そのもの」と関係なくなってきてるし。ただ、iPad を二台予約したワタクシは最近読書欲が高まってる (全部 iPad にぶっ込みたい) のでコツコツと吸収していきたいですね。これを読んでる FLASHer の方々は全く興味無いと思われますが、そもそもここまで読み進める前にブラウザや RSS リーダーを閉じているかもしれませんが、なんかしら得るものがあったら随時フィードバックしていきたいと思っております。

ちなみに既に持ってる本は↓

オブジェクト指向における再利用のためのデザインパターン

言わずもがな。

増補改訂版 Java言語で学ぶデザインパターン入門マルチスレッド編

そうめんをよく使う人にもオススメ。

J2EEパターン第二版

なぜ持っているのか謎。でも一通り読んだ記憶はある。

リファクタリング - プログラムの体質改善テクニック

リファクタリングのバイブル。

テスト駆動開発入門

リファクタリングにも欠かせない TDD のバイブル (かは定かではないけどケントベック先生著なので鉄板)。

どれも数年前に読んだっきりなので、これらの本も (iPad で) 改めて読み直したいところ。

2010-05-14 04:25

2010年 05月 10日

ArtisticCoding: Cocoa の NSCharacterSet の話

残念ながら(?)、いきなり Cocoa の話です。が、Cocoa のビルトインクラスやフレームワークはなかなか面白いデザインが多いです。設計した人の、プログラミングも beautiful じゃなきゃ boom! みたいなこだわりを随所に感じます。今日は、なるほどと思った部分をひとつ紹介します。

Cocoa の文字列クラスである NSString のメソッドの一つに、「stringByTrimmingCharactersInSet:」というものがあります。これは、文字列の先頭や最後にある空白を削除した文字列などを作るためのメソッドです。ただし、NSCharacterSet クラスのインスタンスを引数として取るのが面白い所です。同じようなメソッドは他の言語でもよく見掛けます (例えば Java の String クラスの trim メソッド) が、引数を取るものはあまり見掛けません。

NSCharacterSet は、文字列のセット (集合) を表現するためのクラスです。例えば、空白文字のセットや、英数字のセットなどです。stringByTrimmingCharactersInSet: メソッドはこのセットを引数にとり、セットに含まれる文字列をトリミングしてくれるのです。NSCharacterSet には「whitespaceCharacterSet」(空白)、「whitespaceAndNewlineCharacterSet」(空白と改行)、「alphanumericCharacterSet」(アルファベットと数字)といったセットが予め静的メンバとして用意されており、柔軟なトリミングが行えます。更に、NSCharacterSet のサブクラスを作成することで、任意の文字列のセットを独自に作ることができます。NSCharacterSet のサブクラスでは、その文字がセットに含まれるかどうかを判定して返す「characterIsMember:」メソッドだけをオーバーライドすれば OK です。ここから想像すると、トリミングメソッドの中では各文字に対して characterIsMember: メソッドを呼び出して判定を行っているんでしょうね。

Java の trim メソッドでは決めうちの空白文字しか削除出来ないのに対して、Cocoa では、削除する文字の判定を別オブジェクト化することで、柔軟性が高まっているのが分かりますね。このように動作を変えたい部分を別のクラスに切り出して、組み合わせて使うのはオブジェクト指向においては重要な考え方ではないかと思っています。Strategy パターンっぽいですね。動作を変えたい分だけ、「stringByTrimingWhitespaceCharacters」とか「stringByTrimingAlphanumCharacters」とかメソッド増やしていくのは美しくないです。というか、他の文字セットに対応しようとしたらそれどーすんの？って感じです。

NSCharacterSet は NSString の他のメソッド、例えば「componentsSeparatedByCharactersInSet:」などでも有効に活用されています。応用範囲が広いですね。このようにクラス化しておくことで、色々な場面で再利用出来そうです。単なるデータ (文字列) ではなく、クラスなので、複数の NSCharacterSet をまとめてひとつの NSCharacterSet に見せる CompositeCharacterSet なんてのも簡単に作れそうで良さげです。

それではまた！

2010-05-10 18:55

Comments(1)

ArtisticCoding: はじまり

みなさまこんにちは。すっかりお知らせブログになってしまってる BeInteractive! ですがもう少し技術的な話を復活させようってことでこの連載をはじめてみることにしました。連載といっても不定期なんですけどね！

一昔前は beinteractive といえばバイナリの人とか SWF ファイルを直接弄くり回す人みたいな謎のイメージがありましたが、最近はおぶじぇくと指向とか、せっけいとか、らいぶらりを作るとか、そういう話が趣味なので、要するにコーディングにまつわる普段思ってることとか好きな話をつらつら書いていこうかなと思ってます。

記事は「ArtisticCoding」カテゴリに入る予定です。どうぞよろしく！

2010-05-10 18:53

2010年 04月 24日

FITC Toronto 2010 いってきます (喋ってきます)

去年に引き続き、今年も行って参ります。FITC Toronto 2010。ありがたいことに今年もスピーカーとして招待されました。現地時間27日の12:10ぐらいから、fladdict 深津さんと日本の Flash こんなんだぜワッハーみたいなことを喋ったり喋らなかったりしてきます (喋ります)。

明日24日出発28日帰国って感じです。それではいってきま。

# ところで仕事が忙しすぎてプレゼン資料が全く完成していないうえ、深津さんも悲惨なこと(ブログ参照)になっており二人してホテルに籠ってシコシコと準備することになりそうでハッピートロント。

2010-04-24 01:24