2007年12月アーカイブ

Flash でナニカ作ったことのある人はご存じのことですが、Flash はシングルスレッドであり、イベント駆動型です。
これをマルチスレッドっぽくするライブラリを yossy 氏が開発しました。
http://snippets.libspark.org/trac/wiki/Thread
このライブラリを使うと実現出来ちゃうんです!

デフォルトで、直列・並列処理用のライブラリもあるので、それを使うだけでマルチスレッドっぽく作れちゃうんです。
例えば、通信でデータ持ってきている間にそこで処理とめておいて、通信終わったら次の処理を開始する~とか、
●●と○○へ同時に通信し、その2つが終わったら、次へ~とかが出来ちゃうんです。

いやーベンリ便利ベンリィヽ(*´∀`)ノ

え?本当にマルチスレッドっぽく出来るのかよ!!って?
いやいやこれが出来るんですってば。
そんなわけでサンプルを作ってみました。

複数のスレッドがテキストエリアに対してメッセージを追加していく、超てきとーなサンプルです。
(Threadのなかみ時間なくてあんまし見ていないので、使い方を間違っていたらごめんなさい。)
サンプルのダウンロードはここから。
使い方は、テキストを入力して[スレッド作成]ボタンで適当にスレッドをいくつか作ります、
いくつかスレッドを作ったら、[スレッド開始]を押してみましょう。
メッセージがテキストエリアに表示されていくので、マルチスレッドになっているのがわかります。

サンプルの Flash です。

ここにSWFが表示されるようにしております。しかし、もしこの文章が表示されている場合はJavaScriptの使用をOFFにしている可能性があります。SWFの表示にJavaScriptを使用しておりますので、JavaScriptをONにしてください。またはここをクリックして直接SWFを開いてください。


ところで、このライブラリ微妙にバグってますね^^;

[org.libspark.utils.concurrent]パッケージにある[ParallelDelayExecutor]クラスにちょっとしたバグがw

以下3つのメソッドの戻り値が[Void]になっていらっしゃる。
このままでは「ParallelDelayExecutor」を使うと「Adobe Flash CS3 Professional」でパブリッシュできないので注意が必要です。修正が必要なメソッドは
initialize、execute、waitAllThreads
の3つです。(あれ?それともVoidっと大文字でも良かったんだっけ?・・・設定がわるくてパブリッシュ出来ないだけなのか??)

そんな日。

※追記
やヴぇ。このサンプル、スレッドを止めるようにしてなかったorz
まぁいいか。。。

12月22日に MYCOM から AIR のプログラミング本が出るようです。


http://book.mycom.co.jp/book/978-4-8399-2607-6/978-4-8399-2607-6.shtml
目次引用
CHAPTER 01
はじめてのAIRアプリケーションの作成
1-1.AIR
1-2.ActionScriptとJavaScript
1-3.開発ツールの準備
1-4.はじめてのAIRアプリケーションの作成
1-5.既存コンテンツのAIRアプリケーションへの変換

CHAPTER 02
ActionScript 3の文法
2-1.変数
2-2.クラスとオブジェクト
2-3.ループ
2-4.条件分岐
2-5.配列
2-6.クラスの作成
2-7.デバッグ

CHAPTER 03
ActionScriptによるAIRプログラム
3-1.文字列の表示
3-2.図形の表示
3-3.画像の表示
3-4.タイマーの利用
3-5.マウスイベントの処理
3-6.キーイベントの処理
3-7.ビットマップの利用
3-8.動画の再生
3-9.サウンドの再生
3-10.通信の利用

CHAPTER 04
AIRの機能拡張
4-1.ウィンドウの生成と操作
4-2.ファイルの読み書き
4-3.コピー&ペースト
4-4.ドラッグ&ドロップ
4-5.HTMLの表示
4-6.DOM操作とJavaScriptからのイベント受信
4-7.PDFの表示
4-8.SQLiteデータベースの利用
4-9.ネイティブメニューの利用
4-10.ネットワーク接続のモニタリング
4-11.AIRアプリケーションとFlashコンテンツの連携

CHAPTER 05
JavaScriptの文法
5-1.変数
5-2.クラスとオブジェクト
5-3.ループ・条件分岐・配列
5-4.クラスの作成
5-5.スコープとクロージャと匿名関数
5-6.DOMの操作
5-7.CSSの利用
5-8.デバッグ

CHAPTER 06
Ext JSによるUIプログラミング
6-1.はじめてのHTMLアプリケーション
6-2.Ext JS
6-3.ダイアログ
6-4.レイアウト
6-5.フォーム
6-6.メニュー
6-7.ツリー

CHAPTER 07
AIRによるゲームやツールの作成
7-1.シューティングゲーム
7-2.FLVプレイヤー
7-3.テキストエディタ

Appendix
付録
1.コマンドプロンプトの使い方
2.シームレス・インストール
欲しいかも。


以下2つの記事の内容を修正しました。
Flash で Amazon Web サービスを利用してみよう
Flash で Amazon Web サービスを利用してみよう その2

今日は自分が Flash CS3 を使う上で初歩なことをしらんかったことに気がついた日・・・(´・ω・`)
その初歩的なことをしらんばかりに、アホなプログラムになってた・・・恥ずかしい・・・。

そんな日。
前回からの続きです。
AWSTest.as ファイルのソースコードをざーっと解説します。

package
パッケージとはクラスを分かりやすく機能単位にまとめたり、クラス名の衝突を防ぐための機能です。

import fl.controls.*;
import fl.controls.dataGridClasses.DataGridColumn;
import fl.controls.listClasses.CellRenderer;
import fl.data.DataProvider;
import flash.events.*;
import flash.display.*;
import fl.events.*;
import flash.net.*;
import flash.ui.Keyboard;
importとはクラスを指定します。指定したクラスをこれから利用するという定義です。またパッケージを指定することもできます。パッケージを指定する場合は、パッケージ内のクラスを利用するという定義です。パッケージ内の複数のクラスを利用したい場合などにimportでパッケージを指定します。

/**
 * メインクラス。
 */
「/***/」や「//」はソースコードにコメントを記述するための識別子です。

public
publicはアクセス制御指定子で、どこからでもアクセス可能なことを表します。

publicについてはここを参照してください

class
クラスとはオブジェクトの抽象表現のことです。データとメソッド(データを操作する手順)をまとめたオブジェクトの雛形です。

public class AWSTest
クラスを定義するときはこのように書きます。 ※public、class、などについて詳しく知りたい人は、オブジェクト指向について書かれている書籍を参照してください。


// Amazon Web Service のXMLデータで定義されている名前空間
namespace ns = "http://webservices.amazon.com/AWSECommerceService/2005-10-05";
// 上記で指定した名前空間の利用することを指定
use namespace ns;
XML名前空間とは、XML文書の中で使われるエレメントやアトリビュート名を、URI参照により特定される名前空間に結びつけることにより修飾するための単純な方法を提供します。

取り合えずいま知っていおくことは。ActionScript3.0(以下AS3)においてXMLを利用するときは、名前空間を指定しないと利用できません。これは特にActionScript2.0(以下AS2)でXML利用したことある人は注意が必要です。AS2では特に指定しないでもXMLの処理が出来ました。しかしAS3ではXML名前空間の指定をしないとXMLの処理を行うことが出来ません。ので注意してください。
まず
namespace ns = "利用する名前空定義を指定"
で、名前空間を指定します。次に use namespace ns
で、指定した名前空間の使用を許可します。

※XMLについて詳しい解説は書籍を参照してください。


private const AWS_URL:String = "http://webservices.amazon.co.jp/onca/xml?Service=AWSECommerceService&Version=2005-10-05&AWSAccessKeyId=あなたのアクセスキー&AssociateTag=あなたのアソシエイトID&type=heavy&Operation=ItemSearch&SearchIndex=Books";
今回のプログラムではRESTという方法でAmazonWebServiceを利用します。そのためのURLです。AmazonWebServiceについての詳しい話は次回とします。(次回ってあるのかな・・・遠い目・・・)

/** 指定URLからデータをダウンロードするコンポーネント */
private var loader:URLLoader;
varとは変数を定義するのに用います。
Wikipedia-変数
変数とは、プログラムのソースコードにおいて、扱われるデータを一定期間記憶し必要なときに利用できるようにするために、データに固有の名前を与えたものである。
AS3において変数の定義は
var 変数名:型
と定義します。
型(コンポーネント)についてはlivedocsを参照してください。
URLLoader

public function AWSTest():void
{
  resList.addEventListener( ListEvent.ITEM_CLICK , listClickHandler );
  keyword.addEventListener( KeyboardEvent.KEY_UP , keySearchHandler );
  search.addEventListener( MouseEvent.CLICK , searchHandler );
}
メソッドの定義にはfunctionを指定します。メソッドの定義にはパラメーターも指定することが出来ます。
function メソッド名( パラメーター名:型 )
複数パラメーターを定義する場合は、「,」を使います。
function メソッド名( パラメーター名:型 , パラメーター名:型 )
また、クラス名と同じメソッド名をつけたメソッドのことをコンストラクタといいます。オブジェクト生成時に呼ばれるメソッドのことです。

addEventListenerはイベントリスナーを登録しています。
イベントリスナーとは、あるオブジェクトでブロードキャストしたイベントを別のオブジェクトで受け取れるようにするというものです。イベントが発生する側のオブジェクトをブロードキャスターオブジェクト、イベントを受け取る側のオブジェクトをリスナーオブジェクトと呼びます。ブロードキャスターオブジェクトは、ブロードキャスターが生成したイベントを受け取るリスナーオブジェクトを登録します。
詳しくはここを参照。

private function amazonSearch():void
{
  if ( 0 < keyword.length )
  {
    var request:URLRequest = new URLRequest( AWS_URL + "&Keywords=" + keyword.text );
    loader = new URLLoader();
    loader.addEventListener( Event.COMPLETE, completeHandler );
    loader.load( request );
  }
}
Amazon Web Service へアクセスするメソッドです。

var request:URLRequest = new URLRequest( AWS_URL + "&Keywords=" + keyword.text );
Web サービスへリクエストするオブジェクトを生成します。

loader = new URLLoader();
データをロードをするオブジェクトを生成しています。

loader.addEventListener( Event.COMPLETE, completeHandler );
イベントリスナーを登録します。このイベントは通信が完了したら呼ばれるイベントです。

loader.load( request );
Amazon Web Service への通信を開始します。

private function keySearchHandler( event:KeyboardEvent ):void
{
  if ( event.keyCode == Keyboard.ENTER )
  {
    amazonSearch();
  }
}
TextInput にフォーカス(カーソル)があるときにキーボードで入力を行ったら呼ばれます。そのとき、 Enter キーを押したときのみamazonSearchメソッドを呼び出します。つまり Amazon Web Service へ通信します。

private function searchHandler( event:MouseEvent ):void
{
  amazonSearch();
}
検索ボタンが押されたときに呼ばれます。そのとき、amazonSearchメソッドを呼び出しています。

private function completeHandler( event:Event ):void
{
  var xml:XML = XML( loader.data );

  // データグリッドに表示する情報だけを抜き出す
  var ar:Array = new Array();
  var i:uint = 0;
  for each ( var item:XML in xml.Items.Item )
  {
    var obj = new Object();
    obj.Title = item.ItemAttributes.Title;
    obj.Author = item.ItemAttributes.Author[0];
    obj.Asin = item.ASIN;
    obj.Url = item.DetailPageURL;
    ar[ i ] = obj;
        
    i++;
  }

  // データグリッドに表示
  resList.dataProvider = new DataProvider( ar );
}
通信終了後に呼ばれます。ロードしたデータはloader.dataに入っています。
var xml:XML = XML( loader.data );
dataはオブジェクト型といってどんな型のオブジェクトでも参照させることができる型です。しかしこのままでは面倒なので、XMLへキャストしています。

以下の十数行ではロードしたデータをArrayへ入れるためのデータを抜き出す処理をしています。
var ar:Array = new Array();
var i:uint = 0;
for each ( var item:XML in xml.Items.Item )
{
var obj = new Object();
obj.Title = item.ItemAttributes.Title;
obj.Author = item.ItemAttributes.Author[0];
obj.Asin = item.ASIN;
obj.Url = item.DetailPageURL;
ar[ i ] = obj;
i++;
}
Arrayとは配列を扱うクラスです。
配列についてはここを参照してください。

for eachについてはここを参照してください。

private function listClickHandler( event:ListEvent ):void
{
  // URL を開きます。
  var url:URLRequest = new URLRequest( event.item.Url );
  navigateToURL( url );
}
データグリッドをマウスでクリックしたときに呼ばれます。
var url:URLRequest = new URLRequest( event.item.Url );
リクエストするオブジェクトを生成しています。

navigateToURL( url );
指定のURLへアクセスします。ブラウザで開きます。

ざーっと解説しましたが、もっと詳しくはこちらの書籍を参照してください。他にも色々書籍があるみたいですが、CS3についての入門書ではAmazonではこの書籍が一番の人気のようです。


そんな日。
たまには自宅でも Flash で何か作ってみようということで、
Flash で Amazon Web サービスを利用するプログラムを作ってみました。

このプログラムを作るのに利用した私の開発環境は
以上2つのソフトを使ってプロ グラミングしました。
Flash CS3 は Flash 開発用の Adobe 社のオーサリングツールです。
FlashDevelop はフリーのFlash開発ツールです。ActionScript でプログラミングするのに利用しました。
※FlashDevelop のインストール方法はこちらのページを参照してください。

今回作成した Flash は記事の一番最後に貼ってあります。
さて、では今回は Amazon Web サービスについては省きます。次回以降にでも書こうかと思います。
気になる人は「俺流amazonの作り方―Amazon Webサービス最新活用テクニック」というタイトルの書籍を参照してください。僕もこの本で調べましたので^^

今回作ったプログラムをZipファイルでUPしましたので欲しい人はダウンロードしてください。 AmazonWebServicesTestKai.zip

まず画面の説明。

検索キーワード入力用にテキストインプットを配置、入力したキーワードもとに検索を行うボタンを設置。
そして検索結果をリストで表示するように、データグリッドを配置しました。
簡単にサクっと作るために画面はシンプルに。

img1.jpg

画面の作り方
(Flash がわかる人はこの辺は読み飛ばしてください。)

まず FlashCS3 を起動します。
起動したら、[新規作成]→[Flashファイル(AS3)]を選び作成するバージョンを指定します。

そして上記の画像のようににコンポーネントを3つ配置します。

配置したら各コンポーネントに名前をつけます。

TextInput:keyword
Button:search
DataGrid:resList

そして最後にFlaファイルにドキュメントクラスを「AWSTest」と設定すれば完了です。

ASファイル

AWSTest.as ファイル

Amazon Web Service へアクセスするプログラムを記述しています。

AWSTest.as ファイルは長いので、その2で解説します。

フリーの Flash 開発環境 FlashDevelop 導入

フリーな Flash 開発環境を ActionScript エディタとして自宅で導入しましたので、そのメモ書きです。
公式サイトはこちら:FlashDevelop
このツールは ActionScript2.0 や ActionScript3.0 に対応し、補完機能もある、使いやすいツールです。

インストール
  1. Micosoft .NET Freamworkのインストール
    WindowsUpdateもしくはこちらからダウンロード(インストール)してください。
  2. FlashDevelop公式サイトからアプリケーションをダウンロード
    こちらからダウンロードできます。
    「Release」を選択し、最新版をダウンロードしてください。
  3. ZIPファイルを解凍後、好きなフォルダに入れる
    僕は「C:\App/FlashDevelop/」に入れました。
フォント設定
※必要な人だけ。環境によってはデフォルトの設定では日本語が化けるらしいです。
  1. FlashDevelopを起動
  2. メニューから「Tools」→「Application Files...」を選択
  3. エクスプローラーが起動したら「Settings」フォルダを選択
  4. 「ScintillaNET.xml」ファイルを開く
    メモ帳でも何でも良いので編集できるツール。ブラウザ等の見るだけのビューアーだと編集出来ないのでそれでは開かないでください。
  5. 16行目あたりの<value name="default-font">Courier New</value>を自分の好きなフォント名に書き換えます。
    たとえば「MS Pゴシック」にするなど。
    <value name="default-font">MS Pゴシック</value>
  6. FlashDevelop再起動(起動していた時のみ

メニューの日本語化
http://flan495.net/proj/FlashDevelop-ja/
このページを参考に自己責任で宜しくお願いします。僕は日本語化していませんので責任は持ちません。

新着記事

    戯言ブックマーク