Web　酒　肴

２１日（土）に開催した勉強会の後、急に忙しくなって報告やフィードバックなど遅くなっております。 来てくれた皆さん、どうもありがとうございました。 簡単に報告をしつつ、次への改善点を整理しておきます。

参加者

約２０人でした。正確な数は受付表を確認すればわかります。（今会社にある）
そして一番の収穫は、ほぼ全員がPC持参したこと。 もともと自分の手を動かすハンズオン形式を取っていたので、PC持参できる人が集まったと言えばそうですが、この形式は今後も続けられそうだと感じました。
また、ざっと見渡したところ未経験者の方がかなり多く見受けられました。詳細はアンケート集計しなければわかりませんが、参加者の構成に合わせた企画を実施していくつもりです。

通信、インフラ

コンセントの数、ギリギリでした。もう１つ２つタップを用意する必要があったと反省。
さらに、この日のためにWiMAXの試用版を用意して社内LANを経由しないインターネットアクセスを提供したのですが、通信できない人が続出。事前準備の至らなさ、WiMAXルータの性能の限界など、色々と要因はありそうに思います。これも反省点。

Flex最初の一歩

Flexの未経験者向けハンズオンセミナー。
とりあえず時間が足りなかった。初めての講師という大役を任されたT-2の経験不足もあるけど、そもそも30分で意味のある内容を詰め込むことに無理があったか。結果としてはT-2が時間延長してでも丁寧に教えてくれたので、未経験者の人にとっては価値あるものになったんじゃないかと思う。結果はアンケート集計してのお楽しみ。

Flex/AIRのお仕事事情

hirossyさん、lecheさんに登壇いただく。
まずは、登壇といっても前で話すスペースが無かった、移動やモニターの切り替えが頻繁に起こって不便、という準備・企画不足は反省点。 内容はFlex/AIRにある程度取り組んでいる人、もしくは他の技術でバリバリやっている人にとってはかなり興味深い話が聞けたと思います。 お二人ともありがとうございました。

課題としては完全な未経験者の人やFlashでデザインはやったけどFlexも触ってみよう、という人にとっては、まだよくわからない話だったかもしれません。 この辺は他の企画にも共通する問題で、ターゲットを明確にすればするほど、それに合わない人をどうするかということを考えていこうと思います。

ライブコーディング

先述の２コーナーで登壇した３名（hirossyさん、lecheさん、T-2）が、その場で明かされた仕様のFlex/AIRアプリケーションを即興で作る、という作らされるほうにしたら鬼のような企画。しかもhirossyさんはコーディング経過をプロジェクターで公開。まさにライブコーディング。いきなりお願いして、よく引き受けてくれたと思います。

結果は見事にhirossyさんが完成させたという、企画者としては胸を撫で下ろす展開！面白かったのはhirossyさんの情報検索術がそのまま見れたこと。ネット上の色んな情報ソースが頭の中で整理されていれば、一つ一つの技術の詳細な中身までは憶えておく必要がないということを見事に体現してくれました。hirossyさんは懇親会に来れなかったのですが、来てたらヒーロー扱い間違いないというほど、この時の話題がよく出ました。

最後に

上記に色々と出てきた反省点・改善点は次回、次々回と回を重ねながら修正していきたいと思います。 言い忘れてましたけど、今後は毎月開催していくつもりです。１２月は皆忙しいと聞いていたのですが、少人数型の企画に変更してでも開催します。よろしければぜひ＾＾

勉強会について、ここでいろいろと思案の過程を書いてきたけども、まずは実施することになりました。 こういうのって考えすぎてその思考に縛られると動けなくなるから、考えた事はそれとして多少の矛盾を抱えても動いちゃったほうがいいと思うわけです。

つーわけで、京都でこれからFlex/AIRを覚えたいって方はぜひ参加してください。 うちの会社で行います。

Flex勉強会第92回@京都 - Flex User Group

前半は比較的初級者向けだけど、ライブコーディングはバリバリとこなしてる人にも参加してもらいたいですね。 集まった人のレベルに合わせてできるように、いくつかの準備はしておこうと思ってますけど。

もちろん興味のあるところだけ参加してもらって結構ですよ。

今までずっとFlex Builderを単体でつかってきたけど、サーバサイド（Java）との連携を考えるとやはりEclipseにプラグインとして入れたほうが早そうだ。 ということで最新版のEclipse（3.5）にFlex Builderプラグインを入れようとしたものの・・・

Eclipse 3.2.2、Eclipse 3.3 または Eclipse 3.4 上でのみサポートされています。

とのこと。 それならってことでEclipse3.4のAll-in-oneパッケージをダウンロードしたものの、なぜかインストールに失敗する。 どうも同様の現象は多数報告されているようだ。

Tipset » Eclipse 3.4.2にFlex Builder Plug-inを入れる

ここを参考にうまくいった手順を残しておくとする。

環境： WindowsXP / Flex Builder3.0.2

1. Eclipse Packages | Eclipse Packagesから Eclipse IDE for Java EE Developersをダウンロードし適当な場所に解凍（eclipseというフォルダが作成される）。ちなみに日本語化は念のため最後に行う。

2. Adobe - Flex 3から体験版としてFlex Builder Plug-inをダウンロード（バージョンは3.0.2）

3. Flex Builder Pluginをインストールし、途中でEclipseの場所を聞かれるので上記のeclipseフォルダを指定。正常に完了したら次へ。（うまくいかないときは「Eclipseのconfigurationフォルダが必要です。」みたいなメッセージが表示される。）

4. eclipseフォルダ内のeclipse.exeを実行し、左のプロジェクト・エクスプローラー上で「New」→「Project」としてFlex Builderの項目が存在することを確認する。確認できたらEclipse終了。

5. NTTデータグループ・オープンソーススクエア - nttdatagroup-oss-square Wiki - nttdatagroup-oss-square - SourceForge.JP からNLpackja-eclipse-jee-ganymede-SR2-blancofw.zipをダウンロードし、2と同じ場所で解凍。

6. 再度Eclipseを起動し日本語化されていたら完了。

どうも色んなプラグインが最初から入っていると失敗しやすいようなので、日本語化も最後に行った。Tomcatなど必要なプラグインは別途インストールする必要があるが、とりあえずこれで成功した。

FlashとFlexの区別がなかなかつかなかった僕ですが、その原因の一つはまさにこれだった。

Flex Builder “Gumbo” is Being Renamed Flash Builder | Ryan Stewart - Rich Internet Application Mountaineer

Flex Builderという名前をFlash Builderに改める予定とのこと。

僕がなぜFlexとFlashの区別がつけられなかったかというと、それはFlashの文化を知らずにFlex Builderを触ったから。 Flex BuilderはFlex SDKを使ったアプリケーションを手軽に構築できるが、Flex SDKを使わないFlashアプリケーションも作成できる。でもFlex Builderと言うからには、これを使って作ったアプリケーションは全てFlexじゃないの？なんて思ってた。

そこが違った。

Flex Builderを使ってもFlex SDKを使わなければそれは単なるFlashアプリケーションなのだ。 じゃあ自分の作ったアプリケーションがどれほどFlex SDKに依存しているのかは、それまでFlashの経験がない自分には区別が難しい。 さすがにMXMLとか使ってたら、ああこれはFlexだと思うが、AcstionScriptのみで作成したアプリケーションが内部的にFlex SDKで提供されているクラスを参照している場合なんかもあるのだろう。

ここから先は知識を増やして憶えていくしかないのだろうけど、今回の名前変更で最初の誤解をする人が減るのはいいことだと思う。

先日作ったライブラリを利用すると以下のようなことができます。

画面内でマウスをクリック＆ドラッグしてください。 線分同士の交点を表示します。

そんなに大したことはしてませんが、あえてLineクラスの特徴をあげるとするならば線分、半直線、直線に対応していることか。 多くの場合は線分同士の交点を求めればいいのであまり使わないけど。

Lineクラスは以下のように使用します。

//Lineインスタンスを２つ作成
var line1:Line = new Line(new Point(x1, y1), new Point(x2, y2), Line.TYPE_SEGMENT); //Line.TYPE_SEGMENTは線分
var line2:Line = new Line(new Point(x3, y3), new Point(x4, y4), Line.TYPE_HALF); //Line.TYPE_HALFは半直線

//交点の座標を取得
var p:Point = line1.getIntersectionPoint(line2);

交点がない場合は null が返ります。

Lineクラス内では交点を求める以外にもいくつかのチェックなどしていますが、実際に交点を求めるところのアルゴリズムだけを抜き出すと以下のようになります。

// a1,a2を通る直線とb1,b2を通る直線をあらわすベクトル作成（a1, a2, b1, b2は全てPointオブジェクト）
Point a = a2 - a1;
Point b = b2 - b1;

//crossは２つのベクトルの外積を計算するメソッド
return a1 + a * cross(b, b1-a1) / cross(b, a);

参考にしたのはここ。 平面幾何におけるベクトル演算 » 直線と線分

Lineクラスのソースコードは以下。

Line.as

package
{
    import flash.geom.Point;

    public class Line
    {
        /* ２点を通る直線（終端はない） */
        public static const TYPE_STRAIGHT:String = "straight";
        /* p1からp2の方向に延びる半直線 */
        public static const TYPE_HALF:String = "half";
        /* p1, p2間の線分 */
        public static const TYPE_SEGMENT:String = "segment";

        public var p1:Point;
        public var p2:Point;
        public var type:String;

        public function Line(p1:Point, p2:Point, type:String=TYPE_STRAIGHT)
        {
            this.p1 = p1;
            this.p2 = p2;
            this.type = type;
        }

        /**
         * 2つのLineインスタンスの交点を表わすPointインスタンスを取得する
         * 交点がない場合はnullを返す
         * @param line
         * @return 
         * 
         */
        public function getIntersectionPoint(line:Line):Point{
            var vector1:Point = this.getVector();
            var vector2:Point = line.getVector();

            if(cross(vector1, vector2) == 0.0){
                //2直線が並行の場合はnullを返す
                return null;
            }

            // 交点を this.p1 + s * vector1 としたとき
            var s:Number = cross(vector2, line.p1.subtract(this.p1)) / cross(vector2, vector1);
            // 交点を line.p1 + t * vector2 としたとき
            var t:Number = cross(vector1, this.p1.subtract(line.p1)) / cross(vector1, vector2);

            if(this.validateIntersect(s) && line.validateIntersect(t)){
                vector1.x *= s;
                vector1.y *= s;
                return this.p1.add(vector1);
            }else{
                return null;
            }
        }

        public function getVector():Point{
            return p2.subtract(p1);
        }

        /**
         * 交点までのベクトルを p1 + n * (p2 - p1) であらわしたとき、
         * nが適切な値の範囲内かどうかを判定する。
         * 
         * 直線の場合：nはどの値でもよい
         * 半直線の場合：nは0以上である必要がある
         * 線分の場合：nは0以上1以下である必要がある
         * @param n
         * @return 
         * 
         */
        private function validateIntersect(n:Number):Boolean{
            if(this.type === TYPE_HALF){
                return (0 <= n);
            }else if(this.type === TYPE_SEGMENT){
                return ((0 <= n) && (n <= 1));
            }else{
                return true;
            }
        }

        /**
         * 2つの2次元ベクトルの外積を返す
         * @param vector1 2次ベクトルを表わすPointインスタンス
         * @param vector2 2次ベクトルを表わすPointインスタンス
         * @return 
         * 
         */
        private function cross(vector1:Point, vector2:Point):Number{
            return (vector1.x * vector2.y - vector1.y * vector2.x);
        }

        public function toString():String{
            var str:String = "";
            if(type === TYPE_STRAIGHT){
                str += "---> ";
            }
            str += "(" + p1.x + ", " + p1.y + ") ---> (" + p2.x + ", " + p2.y + ")";
            if(type === TYPE_STRAIGHT || type === TYPE_HALF){
                str += " --->";
            }

            return str;
        }
    }
}

久しぶりにこれに取り掛かれる。 5/30のFlex3勉強会第70回＠京都までに完成させなくてはいけないので、のんびりしてられないわけだけど、ここにきてまたバンド組んだり知り合いのＨＰ頼まれたり、会社で大がかりな組織変更があってその対応とか、しばらく大変そう・・・。

このエフェクトをきれいにライブラリ化するために、どうしても２つの線分の交点を求める処理が必要になってくる。 どうせならこれも汎用的に使えるようにしようと思って、以下のようなLineクラスを作ることにした。

Lineクラス概要

• Lineクラスのインスタンスは一つの直線・半直線・線分を表わす
• （半）直線または線分上にある２つの座標(x1, y1) と (x2, y2)によって初期化される
• 初期化時のパラメータにより、直線・半直線・線分のいずれかを指定することができる
• 別のLineクラスのインスタンスを引数に取り、お互いが交差している座標を返すgetIntersectionPointメソッドを持つ

これを作成するにあたり、線分の交点を計算するアルゴリズムをいろいろ調べた結果、今回はここを参考にするのが一番目的にあっていそう。

平面幾何におけるベクトル演算 » 直線と線分

あと、今更ながら知って驚いたこと。

ActionScript3ではコンストラクタを複数定義できないっぽい

ちょっと残念。

テーマは開発環境ということで、Flex Builderの紹介とお勧めをしてきました。 プレゼン資料は以下。

ということでよろしくお願いしますｗ

Adobe Flex Builder Standard 3.0 日本語版 Windows/Macintosh版