2009.10.31 超！濃ゆい ActionScript の日～つくるために創る！ [Edit]

最終更新日：2013.07.02

demo1「ActionScriptでつくるActionScriptエディター」　吉川佳一
demo2「フレームワーク“の”作り方」　阿部貴弘
demo3「サイトを作るツールを作るでござる、の巻。」　Saqoosha

定員160人で申し込みを開始したところ、3日で満席となった今回のセミナー。運良く、同じ会場でさらに広い定員300人の部屋が空いており、なんとか殺到する希望参加のみなさんのご期待にお応えすることができました。

当日には、248人のご参加をいただき、F-siteセミナー始まって以来の大入りとなりました。ありがとうございました！

セミナーへ参加した方のトラックバックはこちらの記事にお願いします。

demo1:ActionScriptでつくるActionScriptエディター

講師：吉川佳一

BOWでActionScriptのプログラマーを務める吉川さんに、高速で軽量な文字比較ルーチンによってリアルタイムのカラーリングを実現したActionScriptエディター（しかもActionScript製）について語っていただきました。

自作ActionScriptエディターの紹介

  • 2009/3/13 DeskTopLive.asで公開
  • 2009/5/19 Psycodeという名前でSpark projectにコミット
  • 2009/9/28 Wonderflに搭載。ここまで自分用に作っていたため、Wonderflに組み込むのが難しく、ちょっと評判が悪かった。本当はもっと軽快に動作する！
機能一覧

FlexのTextArea（mx.controls.TextArea）をベースに、以下の機能を付け加えている。

  • ActionScriptのハイライト
  • 文字グループの取り扱い変更（単語単位で削除できる）
  • タブインデント
  • 自動インデント
  • 拡張機能として以下の機能も実装。
    • Webサーバ（http）越しにmxmlcでコンパイル
    • Flashパネル（LocalConnection）越しにFlash IDEでコンパイル
    • タイピングを記録/再生

ここまでがバージョン1。バージョン2は、5日前に制作にとりかかり、セミナー当日の朝に完成。

バージョン2の新機能
  • TextField化（Flexライブラリが不要になり、Flashでコンパイルできるようになった）
    • さらにZLib/PNGライセンスにしたいので、スクロールバーを自作
  • 行番号の表示
  • コードヒント
    • リストコントロールも自作
  • 自動import文挿入
  • 複数クラス対応
    • タブビューも自作
  • フィードバックモード
    • DisplayObjectの座標をSWF上で見ながらライブビューで調整できる（Spriteをキーボードで移動すると、コードの座標値も変動する）

コードカラーリングの特徴

  • 複雑な正規表現もハイライトできるのが自慢
  • 数字もハイライトする（整数、実数、16進数など）

文字列比較ルーチンについて

  • 基本は、正規表現で検索して色を変えるだけだが、単純にやるとすごく重い
  • そこで「現在のテキスト」と「前回のテキスト」を比較して、変更箇所を取得
    • 変更を保存することで履歴/記録再生ができる
    • TextFieldの更新範囲を最小化できる
    • Unityサーバに送信する情報も減らせる
  • 現状としては、だいたい1000行くらいまでは重くならずに編集できる
  • TextEvent.TEXT_INPUTイベントでtextプロパティを取得する方法もあるが、日本語入力時、ペースト時、アンドゥ時などは完全にカバーしきれなかった
具体的な実装手法
  • 2つのテキストの共通範囲を計算すると考えてもいい
  • 素朴な実装
    • for文ですべての文字を比較
    • テキストの増大に比例して重くなる
  • 良い実装
    • step（2の累乗倍の数値）を使う
    • 比較するテキストのサイズによってstepのサイズを変える
    • 比較が一致しなかった場合、stepのサイズをビットシフトして小さくする
    • 比較が一致した場合、現在位置をstep分増やして、再度比較する
  • この手法が最も少ない手順で比較できる。前方一致と後方一致の2回分繰り返し、比較を取得！

いろいろ作ってる

マルチユーザーのテキストエディタ
  • やってみるとわかるけど、人にコードをいじられるのですごいムカつく！
  • http://psyark.jp/にアクセス！
3Dのテキストエディタ
  • 意味はない！
  • 具体的にどう使いどころがあるかは、自分でもさっぱりわからない。
Wonderfl版

demo2:フレームワーク"の"作り方

講師：阿部貴弘

先月パブリックベータが公開されたばかりのProgression 4。1年前のF-siteセミナーとは打って変わって、フレームワークの「使い方」ではなく「作り方」について、阿部さんにお話しいただきました。

当日の資料は阿部さんのブログ記事「[イベント] F-site 資料」をご覧ください。

Progressionの現状

  • 2009年7月末で事例数は720件。順調に推移していれば、おそらく現在は1000件以上
  • 2009年10月末でダウンロード数は48,000件（バージョン3.1以降に限る）

フレームワーク開発四ヶ条（フレームワーク開発に必要なこと）

  1. 自分が欲しいという気持ち（完成したら飽きる、完成しない……）
  2. 調子にのせてもらえる環境（ユーザーからのフィードバック「すげえじゃん！」etc.）
  3. 他人に使われるという危機感（実案件で使われるので怖い）
  4. 維持しなければという責任感（サポートなどの体制）

以上のプロセスを踏まないと、広く受け入れられるフレームワーク開発は難しい。

必要なドキュメント（優先順）

フレームワークの開発は、ドキュメントの制作と言っても過言ではない。まずはユーザーに使い始めてもらうことが重要。

  1. ゼロから始めるチュートリアル
  2. ActionScript APIリファレンス
  3. 逆引きTips集

“かんたん”の定義

よく「フレームワークを使うと"かんたん"にできますよ」ということを言うが、"かんたん"の定義が重要になる。Progressionの場合は、以下の定義にしている。

×初心者がすぐ作れる
○中・上級者が半分の労力で作れる

Progressionの技術的なポイント

Progression Framework 1
  • コンセプト「Flash版のMXMLを作りたい！」
  • 結果「自分でXMLを書くのが面倒。XMLベースでの開発はめんどくさい」
Progression Framework 2
  • コンセプト「もういっそ全部OOPで！」
  • 結果「バージョンアップのしすぎで実装がほとんど別物に……」
  • 技術的なポイント「バージョン管理をどうするか？」
  • 方法1：Flashのグローバルパス上にコピー
    • 開発者側のバージョン管理が楽
    • ドラスティックな変更をした場合、古いバージョンのデータが書き出し不能になる
  • 方法2：プロジェクトとして書き出す
    • ドラスティックな変更もOK
    • 管理ツールの作成など、とにかくしんどい

特に管理ツールは、作成に時間がかかりすぎる。そのため、Progression以外のフレームワーク、ライブラリなどからもProgressionのプロジェクト機能を利用できるように、Progression 4では自分用のプロジェクト作成機能（阿部さん曰くオレオレプロジェクト作成機能）を用意した。自分好みのフォルダ構成や、外部ライブラリなどでプロジェクト書き出しができる。

Progression 3
  • コンセプト「ver2の最終形を再構成する！」
  • 結果「細かいところのツメが甘い。」
  • 技術的なポイント「バッチ処理を活用しよう」
    • コンポーネント作成をバッチ処理化
    • JSFLをいろんな箇所から実行できるように、AS3ライクにJSFLを記述して実行できるJSFLC（COREXクラス）を作成
Progression 4
  • 少なくとも年内の正式リリースはない。来年以降の予定は未定。
  • 新機能
    • メモリリークをなくした
      • 定数など、インスタンスごとにStringを持たせるのは結構重い
      • StringObjectクラスでオブジェクト化して共通化している
    • スタックオーバーフロー防止
      • PCごとにしきい値は変わるが、だいたい400くらい再帰するとスタックオーバーフローするみたい
      • オーバーフローしそうになると、ディレイをかけて実行するように実装
    • メモリ使用量の減少
      • 例えばツールチップなどは、コンストラクタではなく初回使用時にインスタンスを作成するようになった
      • 機能を使わなければインスタンスは作成しない

質疑応答

abstractとinterfaceについて、工夫したことがあれば教えてください
  • abstract
    • コンパイル時にエラーを出すしくみはできないと思うので、単に例外をthrowしている
    • 例えばCommandListでは、何も継承していなければ例外をthrowする
  • interface
    • Progression 4では、Configという概念で機能を分けて、該当するConfigに実装されたクラス以外は読み込まないようにしている
    • 個人レベルでinterfaceを使う場合は、実装を分けたいけどファイルサイズを小さくしたいときに有効と思う

demo3:サイトを作るツールを作るでござる、の巻。

講師：Saqoosha

Adobe MAX 2009帰りのSaqooshaさんをお招きし、ウェブサイト構築のために制作した各種ツールについて、事例紹介を交えながらご紹介いただきました。

詳しい内容はSaqooshaさんのブログ記事「F-site で話したやつのまとめみたいな。」をご覧ください。

じゃんけん大会

今回も関係者、参加者の皆様からプレゼントをご提供いただきました。たくさんの賞品、ありがとうございました。また、今回をもってF-siteセミナー幹事が交代になるため、新幹事から前幹事へ花束の贈呈も行われました。

（株）ワークスコーポレーション様より

（株）毎日コミュニケーションズ様より

（株）翔泳社様より

  • 『ActionScript 3.0辞典』（11月16日発売予定）

（株）インプレスジャパン様より

アドビシステムズ（株）様より

  • Tシャツ
  • CD『Now Creating...』

（株）ロクナナ様より

（株）ロクナナ 加茂雄亮様より

二次会

前代未聞の100名が2次会に参加！　今回は新宿・歌舞伎町の「酒意」にて行われました。会場にはプロジェクタが用意されており、急遽吉川さんがdemoの続きをやる一幕も。また、セミナー当日が誕生日のA.e.Suckさん、1日違いの阿部さんのために、サプライズでケーキも用意されました。

レポート作成
沖良矢
写真
桜井和貴、小野田智

（敬称略）

コメント

この記事にコメントを書く

記事に対するテクニカルな質問はご遠慮ください（利用規約）。

その他の記事