SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

特集記事

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

FlashとPHPで作るアイコンエディタ

  • X ポスト
  • このエントリーをはてなブックマークに追加

ダウンロード ソースファイル (130.3 KB)
ダウンロード 実行ファイル (31.9 KB)

本稿では、FlashとPHPを使って簡易アイコンエディタを作成します。大まかな仕組みは、Flashの描画機能を利用してUIを作成し、PHPの画像処理のライブラリを利用して、作成したデータを画像として保存します。

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 最近では、何事も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を起動したところ
as2editを起動したところ

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

次のページ
Flashでアイコンエディタの外観を作る

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
特集記事連載記事一覧

もっと読む

この記事の著者

クジラ飛行机(クジラヒコウヅクエ)

ソフト企画「くじらはんど」にて、多数のフリーソフトを公開しています。日本語プログラミング言語「なでしこ」、テキスト音楽「サクラ」、日本語Wiki記法が特徴の「KonaWiki」などを公開しています。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/418 2006/06/21 00:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング