れぶろぐ

■ HTML_Emoji で「ここギコ！」さんの絵文字対応表を使えるようにしました

ke-tai.org さんのニュースで知りましたが、 「ここギコ！」さんが、独自に作った携帯絵文字対応表を公開されています。

• ここギコ！: ケータイ国盗り合戦で使ってるケータイ絵文字対応表

この対応表は、絵文字が〓に変換されることがないように作られており、 キャリア標準の対応表を用いるのに比べて良い変換ができそうです。

自由に使って良いようなので、この対応表を HTML_Emoji ライブラリ用に変換してみました。 以下のファイルをダウンロードして展開し、HTML_Emoji のファイルに上書きコピーしてください。

• HTML_Emoji_Kokogiko.zip

あくまでも暫定なので、設定によらず半角カナに変換されるようになっています useHalfwidthKatakana() メソッドで半角カナを使うよう設定した時だけ有効になります。 次バージョンでは、設定で変換テーブルを切り替えたり、全角カタカナに変換したりできるようにする予定です。

なお、「ここギコ！」さんの対応表には、隠し絵文字などの一部の絵文字が載っていません。 その部分については、従来の変換テーブルをそのまま持ってきてマージしたため、 ごく一部の絵文字は〓に変換されます。

Tags: PHP | | | | Permalink

■ Debian lenny に Flex SDK をインストール

Linux で Flash の開発をしてみようと環境構築したので、手順をまとめておきます。 ただし、Windows に FlashDevelop をインストールして使う方が楽そうなので、 Linux とか Vim にこだわらない人にはそちらをお勧めします。

Java のランタイムのインストール

OpenJDK の JRE をインストールします。

$ sudo aptitude install openjdk-6-jre

ほとんどの場合は OpenJDK で問題ないと思いますが、 Sun 純正の JRE を使いたい場合は、 non-free の apt-line を追加した後で次のようにして下さい。

$ sudo aptitude install sun-java6-jre

Flex SDK のインストール

Flex SDK のページからファイルをダウンロードしてきます。 Open Source と書かれたのとそうでないのとがありますが、 Free Adobe Flex SDK と Open Source Flex SDK - てっく煮ブログ の説明によると、大抵は Open Source の方で用が足りそうです。 とりあえず、ホームディレクトリにインストールしてみます。

$ mkdir -p ~/Flex
$ cd ~/Flex
$ unzip flex_sdk_3.4.0.9271_mpl.zip

fcsh などの実行ファイルに実行属性がついていないので、手作業でつけてやります。

$ cd bin
$ chmod 755 *

シェルスクリプトの改行コードが CR+LF になっているので、 例えばこんなコマンドで LF に変換してやります。

$ cp -p fcsh fcsh.orig
$ tr -d '\r' < fcsh.orig > fcsh

~/.bash_profile に以下の設定を追加します。

PATH="$PATH:$HOME/Flex/bin"

rascut のインストール

ActionScript やるなら入れとけ。rascut 導入と使い方。 - てっく煮ブログ を見ると、なんだか便利そうなのでインストールしておきます。

$ sudo aptitude install ruby1.8-dev
$ sudo aptitude install rubygems1.8
$ sudo aptitude install make
$ sudo gem install rascut

Vim の設定

ActionScript 用の設定を追加します。 ~/.vim/ftdetect/actionscript.vim に以下の設定を追加。

au BufRead,BufNewFile *.as set filetype=actionscript

~/.vim/syntax ディレクトリに以下のファイルをコピー。

• actionscript.vim - ActionScript 3.0 syntax file : vim online

~/.vim/after/ftplugin ディレクトリに、以下の内容の actionscript.vim を作成。

set expandtab
set tabstop=4
set softtabstop=4
set shiftwidth=4

ActionScript 3 Omnicomplete - Omnicompletion plug-in for ActionScript 3 : vim online も試してみましたが、登録されているキーワードが足りないのか、 あまり使い物にならない感じがしたので、インストールするのはやめました。

Tags: AS3 | | | | Permalink

■ IE で Canvas を使えるようにする FlashCanvas を高速化してみました

通常、Internet Explorer で HTML5 の Canvas を使えるようにするには ExplorerCanvas などのライブラリを用いますが、 同じようなライブラリとして、描画エンジンに Flash を用いる FlashCanvas というのがあります。

• GXJones Dev Blog: FlashCanvas
• GXJones Dev Blog: FlashCanvas performance
• Aza’s Thoughts >> Fixing IE by porting Canvas to Flash

上記のページには、遅くて使い物にならないように書かれていますが、 少しいじってみたところ、数ヶ所修正することでかなりの高速化ができました。

比較のためのサンプルを用意しました。 FlashCanvas 0.2 というのがオリジナルで、0.2a というのが改良版です。 Internet Explorer 以外のブラウザでは、ブラウザ内蔵の Canvas の機能を使って表示するようにしてあります。 example1_stress.html のサンプルは、ExplorerCanvas やオリジナルの FlashCanvas では IE が固まることがあったので、リンクを外してあります。

修正したソースコードも含めてまとめておきましたので、欲しい人は持っていって下さい。 ただし、Canvas の基本的なコマンドしか実装されていないので、 現段階では上のサンプルくらいしか動かず、実用性は乏しいです。

• FlashCanvas-0.2a.tar.gz

覚え書きとして、どのような改良を行ったかを記しておきます。

stroke(), fill() のタイミングでデータを送信するようにした

例えば、Canvas で座標 (x0, y0) から (x1, y1) への直線を描くために、

ctx.beginPath();
ctx.moveTo(x0, y0);
ctx.lineTo(x1, y1);
ctx.stroke();

のようなコマンドを実行した場合、 オリジナルの FlashCanvas では、各コマンドごとに ActionScript の関数を呼んでいました。

これははっきり言ってムダなので、 moveTo() や lineTo() のようなコマンドはバッファにためておいて、 stroke() コマンドが実行されたら、それまでのコマンドをまとめて ActionScript 側に送る、 という処理をするように直しました。

座標データを整数に変換してから送信するようにした

オリジナルの FlashCanvas では、例えば、

lineTo, 12.3456789, 98.7654321, ...

のようなデータが JavaScript → ActionScript に渡されていました。 しかし ActionScript の側では、その値をそのまま MovieClip.lineTo() に渡しているので、 JavaScript の側で、

lineTo, 12, 99, ...

のように整数に丸めてしまっても問題ないはずです。 こうすることで、送信データのサイズが半分くらいになりました。

CallFunction() メソッドの利用

FlashCanvas のページにも書かれていますが、 ExternalInterface は、データを XML に変換するなど内部でいろいろな処理を行っています。 多用すると速度低下の原因になるので、

• ArticleFixingFlashExternalInterface - doctype - HOWTO fix issues in Flash's ExternalInterface API. - Project Hosting on Google Code

このページを参考に、CallFunction() という隠しメソッドを用いて、無駄な処理を省くようにしました。

SetVariable() メソッドの利用

ActionScript 3 では使えず、ActionScript 2 でしか使えない方法ですが、 ExternalInterface の代わりに SetVariable() メソッドを用いると、 比較的高速に JavaScript → ActionScript にデータを渡せます。 ただし、SetVariable() で渡せるのは文字列だけで、配列などのデータは送れないそうなので、

• moveTo や lineTo などのコマンドを配列にためていく
• Flash に送る際には、配列を array.toString() のように文字列に変換して送る
• Flash 側では、受け取った文字列を str.split(",") のようにして配列に戻す

のように処理するよう、書き換えました。

(2009/09/30 追記)

ExternalInterface を使う代わりに、 SetVariable() と Object.watch() を組み合わせて ActionScript のメソッドを呼び出すようにしてみました。 watch() は AS3 では使えないし、パフォーマンスが落ちるから避けた方が良いと聞きましたが、 ExternalInterface を使うよりはこの方が少し速いようです。

• FlashCanvas-0.2b.tar.gz

Tags: Canvas | | | | Permalink