Webブラウザで動くアイコンエディタの作成

はじめに

　最近では、何事もWebブラウザ上のみで完結してしまうことが多いので、ちょっとしたデスクトップアプリケーションを作っても、なかなかインストールしてもらうことができません。そこで、Webブラウザ上で気軽に使ってもらえるように、FlashとPHPを使ってアイコンエディタ作成してみました。

　現在、アイコンエディタは、ウノウラボのページで公開されています。

　このアイコンエディタを元にしつつ、分かりやすく基本機能だけをもつアイコンエディタを作る過程を紹介します。

対象読者

• Flashでツールを手軽に作ってみたい方
• PHPのGDライブラリの使い方を知りたい方
• Flash ActionScript2が多少分かる方
• PHPが多少分かる方

必要な環境

　本稿の開発には、Flash 8、PHP 5を利用しました。なお、FlashはMX 2004、PHPは4でも動くことを確認しました。

今回作成するツールの概要

　Flashを使って簡単なアイコンエディタを作ります。簡単な描画機能のみを持たせるので、16x16ドットの小さなアイコンを作るだけのものを作ります。

完成したアイコンエディタ

　ここで作成するアイコンエディタは、筆者のページで試すことができます。

　このツールはFlashとPHPを組み合わせて作りますが、それぞれの分担は次のとおりです。

• FLASH（クライアントサイド）
• アイコンエディタでアイコンのデータを作る
• PHPへアイコンのデータを送信する
• PHP（サーバーサイド）
• アイコンのデータを受け取る
• データを元にGDライブラリを利用して画像を描画する
• ファイルへ画像を保存する

Flashだけではできないのか？

　Flashは、ブラウザ上で動くことを目的に作られているので、セキュリティに配慮されており、Flash上で作ったデータを、クライアントのコンピュータに保存する方法は限られています。

　そのため、Flashで作ったアイコンデータを保存するには、一度サーバ側に保存し、ブラウザから画像ファイルとして読み込むようにします。ブラウザ上に画像ファイルが表示されれば、ユーザーはブラウザにある［名前を付けて画像を保存］メニューから、ローカルファイルに保存することができます。

　また、FlashのActionScriptだけでGIFなどの画像ファイルを生成するのは大変なので、PHPに用意されているGDライブラリを利用することで、手軽にBMP/JPEG/GIF/PNG形式の画像を作成することができます。

　ただ、Flash ActionScriptとPHPという2つの言語を使い分けなければいけないので、多少混乱する場合もありますが、うまく頭を切り替えて乗り切ってください。

Flash ActionScript2をうまく活用しよう

　アイコンエディタのようなツールを手軽に作るコツは、Flash ActionScript2で強化された型チェックをうまく使うことです。ActionScriptでは、未定義の変数がundefinedとして表され、綴りミスがあってもエラーが出ないので、簡単なミスを探すのが大変です。

　そのため、筆者は簡単な綴りミスを見つけるために、trace()関数を至る所に埋め込んで、未定義の変数を探すのに苦労した経験が何度もあります。特にムービークリップのパスが複雑に入り組んでいたりすると地獄です。

　そこで、ActionScript2で強化された型チェックをうまく使うと、エラーメッセージが表示され、綴りミスを発見しやすくなります。

　また、ActionScriptでは、クラスを外部ファイルに分けて書くことができるので、インターフェイスだけをFlashの開発環境で作成しておき、クラスファイルを外部エディタで編集することができます。

　本稿でも、Flash 8の開発環境を使って書いたプログラムは、以下の一行だけです。

new IconEditor();

　これは、外部ファイルにある「IconEditor.as」で定義されているIconEditorクラスを生成するという意味になります。

　加えて、Flash 8の標準ActionScriptエディタには、コードの補完機能があるものの、あらかじめFlashに用意されている組み込みのクラスしか補完してくれません。このため、メソッド名を書き間違えたり、ヘルプを何度も引かなくてはならず、開発効率が悪いです。

　私は、自作のActionScriptエディタ「as2edit」を作って活用しています。これは、どうしても自作クラスのメソッドを自動補完する機能が欲しくて作ったものです（フリーのFlashコンパイラ「MTASC」にも対応しています）。

as2editを起動したところ

　他にも、海外製のActionScript専用エディタがあるようなので、そちらを利用するのも良いでしょう。