FlexのStateの遷移によって表示するUIを変更することで、簡潔に画面遷移を実現する。その際のTransition効果(フェード)を付与する。今回はログインフォームを例に採り、ユーザーのログイン画面と新規登録画面の2つの状態をStateによって切り替えるmxmlソースを下記に紹介する。

実行結果

下記のリンクをご参照。

ログイン・登録フォーム

ソースコード

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   currentState="Login">
	<!-- 初期状態は"Login" -->

	<!-- 状態遷移エフェクト -->
	<s:transitions>
		<s:Transition fromState="*" toState="*">
			<s:effect>
				<s:Parallel targets="{[registerLink, registerButton, loginLink, loginButton, confirm, email]}">
					<s:children>
						<s:Fade alphaFrom="0" alphaTo="1"/>
					</s:children>
				</s:Parallel>
			</s:effect>
		</s:Transition>
	</s:transitions>

	<!-- 状態 -->
	<s:states>
		<s:State name="Login"/>
		<s:State name="Register"/>
	</s:states>
	<fx:Declarations>
		<!-- 非ビジュアルエレメント (サービス、値オブジェクトなど) をここに配置 -->
	</fx:Declarations>

	<!-- ログイン用パネル -->
	<s:Panel title="Login" id="loginPanel" includeIn="Login" horizontalCenter="0" verticalCenter="-2">
		<mx:Form id="loginForm">
			<mx:FormItem label="Username:">
				<s:TextInput/>
			</mx:FormItem>
			<mx:FormItem label="Password:">
				<s:TextInput/>
			</mx:FormItem>
		</mx:Form>
		<s:controlBarContent>
			<mx:LinkButton label="Need to Register?" id="registerLink"
						   click="currentState='Register'"/>
			<mx:Spacer width="100%" id="spacer1"/>
			<s:Button label="Login" id="loginButton"/>
		</s:controlBarContent>
	</s:Panel>

	<!-- 新規登録用パネル -->
	<s:Panel title="Register" id="registerPanel" includeIn="Register" horizontalCenter="0" verticalCenter="-2">
		<mx:Form id="registerForm">
			<mx:FormItem label="Username:">
				<s:TextInput/>
			</mx:FormItem>
			<mx:FormItem label="Password:">
				<s:TextInput/>
			</mx:FormItem>
			<mx:FormItem id="confirm" label="Confirm:">
				<s:TextInput/>
			</mx:FormItem>
			<mx:FormItem id="email" label="E-Mail:">
				<s:TextInput/>
			</mx:FormItem>
		</mx:Form>
		<s:controlBarContent>
			<mx:LinkButton label="Return to Login" id="loginLink"
						   click="currentState='Login'"/>
			<mx:Spacer width="100%" id="spacer2"/>
			<s:Button label="Register" id="registerButton"/>
		</s:controlBarContent>
	</s:Panel>
</s:Application>

※余談：
フォルダを整理していたら古いFlexコードが出てきたので、この度当サイトに転記したもの。基本Tips系のコードはブログに載せてローカルには保存しないようにする予定。どうせその類のコードは一週間後には読まなくなるし、それ以降はソースの保管場所さえ忘れてしまう恐れもある為。

何かご質問等ありましたら、お気軽にコメントを頂ければと思います。

関連すると思われる記事：

• AIR: テキストファイルを非同期に読み込む – openAsync()、readMultiByte()
• AS3でお絵かきFlashを作る (2)ボタン作成 – Flexコンポーネントの導入
• AIR: テキストファイルに書き込み – openAsync()、writeMultiByte()
• 解決例: 「ファイルから操作とエンティティを取得できません」 – Autoloader.php
• AmazoCluster: 一発で納得のいくものができればいいけれどね・・・

Flex: State、Transitionによる画面遷移 – ログイン画面 is a post from: Yukun's Blog

事象

Flex Builder 4でPHPとのデータコネクション設定を行う際に上図のエラーが発生。
使用したサンプルチュートリアル：
connect to data – Flex Test Drive | Adobe Developer Connection

エラーメッセージ

Zend Framework が正しくインストールされていて、プロジェクトの出力フォルダーにある amf_config.ini ファイルでパラメーター "amf.production" が true に設定されていないことを確認してください。
Warning: Error parsing C:\Program Files (x86)\VertrigoServ\www\TestDrive\TestDrive-debug/amf_config.ini on line 5 in C:\Program Files (x86)\VertrigoServ\www\TestDrive\TestDrive-debug\gateway.php on line 12

Warning: require_once(Zend/Loader/Autoloader.php) [function.require-once]: failed to open stream: No such file or directory in C:\Program Files (x86)\VertrigoServ\www\TestDrive\TestDrive-debug\gateway.php on line 27

Fatal error: require_once() [function.require]: Failed opening required 'Zend/Loader/Autoloader.php' (include_path='.;C:\Program Files (x86)\VertrigoServ\Smarty;C:/Program Files/ZendFramework/library') in C:\Program Files (x86)\VertrigoServ\www\TestDrive\TestDrive-debug\gateway.php on line 27

amf_config.ini

[zend]
;set the absolute location path of webroot directory, example:
;Windows: C:\apache\www
;MAC/UNIX: /user/apache/www
webroot =C:/Program Files (x86)/VertrigoServ/www

;set the absolute location path of zend installation directory, example:
;Windows: C:\apache\PHPFrameworks\ZendFramework\library
;MAC/UNIX: /user/apache/PHPFrameworks/ZendFramework/library
;zend_path =

[zendamf]
amf.production = false
amf.directories[]=TestDrive/services

gateway.php

<?php
ini_set("display_errors", 1);
$dir = dirname(__FILE__);
$webroot = $_SERVER['DOCUMENT_ROOT'];
$configfile = "$dir/amf_config.ini";

//default zend install directory
$zenddir = $webroot. '/ZendFramework/library';

//Load ini file and locate zend directory
if(file_exists($configfile)) {
	$arr=parse_ini_file($configfile,true);
	if(isset($arr['zend']['webroot'])){
		$webroot = $arr['zend']['webroot'];
		$zenddir = $webroot. '/ZendFramework/library';
	}
	if(isset($arr['zend']['zend_path'])){
		$zenddir = $arr['zend']['zend_path'];
	}
}

//
// Setup include path
	//add zend directory to include path
set_include_path(get_include_path().PATH_SEPARATOR.$zenddir);
// Initialize Zend Framework loader
require_once 'Zend/Loader/Autoloader.php';

include_pathの’.;C:\Program Files (x86)\VertrigoServ\Smarty;C:/Program Files/ZendFramework/library’から、’Zend/Loader/Autoloader.php’を開けませんというエラー。

include_path 先のフォルダ構成を確認すると確かに’Zend/Loader/Autoloader.php’がないのでエラーが発生するのは分かる。

解決法

amf_config.iniファイル中のwebrootパラメータをコメントアウトすると正常に設定が完了。
変更前

webroot =C:/Program Files (x86)/VertrigoServ/www

変更後

;webroot =C:/Program Files (x86)/VertrigoServ/www

原因

本来はC:/Program Files (x86)/VertrigoServ/www/ZendFramework/library/Zend/Loader/Autoloader.phpを参照をすべき所を、C:/Program Files/ZendFramework/library/Zend/Loader/Autoloader.phpを参照しようとしてエラーとなった。
webroot =C:/Program Files (x86)/VertrigoServ/wwwのはずが、どこで書き換わったのかな？

今回はサンプルを走らせるのを優先したので、原因究明はここで止めています＞＜；

追記 – 2010/07/26

以下のようなエラーメッセージが出力された場合も、上記の原因と同一である場合があります。

Send failed
Channel.Connect.Failed error NetConnection.Call.BadVersion: :
url: 'http://localhost/TestDrive_add_charts_PHP/gateway.php'

ご参考まで。

関連すると思われる記事：

• ActionScript: 画像ファイルをダウンロードして表示 – Loaderクラス
• AIR: テキストファイルを非同期に読み込む – openAsync()、readMultiByte()
• Flex: State、Transitionによる画面遷移 – ログイン画面
• AIR: テキストファイルに書き込み – openAsync()、writeMultiByte()
• AS3でお絵かきFlashを作る (4)塗りつぶしと簡易レイヤーの操作

解決例: 「ファイルから操作とエンティティを取得できません」 – Autoloader.php is a post from: Yukun's Blog

ソースコード

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
  applicationComplete="startup()">
  <mx:Script>
    <![CDATA[
    import air.net.SocketMonitor
    import air.net.URLMonitor;
    import flash.net.URLRequest;
    import flash.events.StatusEvent;

    private var SERVER_URL:String = "http://www.yukun.info/";
    private var SOCK_ADRR:String = "yukun.info";
    private var PORT:int = 6667;
    private var INTERVAL_TIME:int = 3000; // ms
    private var serviceMonitor:URLMonitor = null;
    private var socketMonitor:SocketMonitor = null;

    private function startup():void {
      var endpoint:URLRequest = new URLRequest(SERVER_URL);
      serviceMonitor = new URLMonitor(endpoint);
      serviceMonitor.addEventListener(StatusEvent.STATUS, onStatusEvent);
      serviceMonitor.pollInterval = INTERVAL_TIME;
      serviceMonitor.start();

      socketMonitor = new SocketMonitor(SOCK_ADRR, PORT);
      socketMonitor.addEventListener(StatusEvent.STATUS, onSocketStatusChange);
      socketMonitor.pollInterval = INTERVAL_TIME;
      socketMonitor.start();
    }

    // ネットワークサービスの状態の検知
    private function onStatusEvent(e:StatusEvent):void {
      var date:Date = new Date();
      trace(date.toLocaleTimeString());
      trace(SERVER_URL + "に" + (serviceMonitor.available ? "接続可" : "切断中"));
    }

    private function onSocketStatusChange(e:StatusEvent):void {
      trace(SOCK_ADRR + "のポート" + PORT + "は" +
        (socketMonitor.available ? "接続可" : "切断中"));
    }
    ]]>
  </mx:Script>
</mx:WindowedApplication>

実行結果

http://www.yukun.info/に接続可

yukun.infoのポート6667は切断中

URLMonitorはネットワーク状況を検知する為にサーバへGETリクエストを送出して、レスポンスのステイタスコードを確認して判断しているようです↓。

リファレンス

• URLMonitor – ActionScript 3.0 言語およびコンポーネントリファレンス
• Adobe AIR 1.1 * ネットワーク接続の監視

関連すると思われる記事：

• Java: インターフェースとローカルのIPv6, IPv4アドレスの取得 – NetworkInterfaceクラス
• AIR: SQLiteでデータの挿入と検索 – SQLConnection、SQLStatementクラス
• AIR: テキストファイルに書き込み – openAsync()、writeMultiByte()
• AIR: テキストファイルを非同期に読み込む – openAsync()、readMultiByte()
• Java: TCP Socket Echo Server/Client サンプル

AIR: Webサーバ、Socketの接続状況を検知 – URLMonitor、SocketMonitorクラス is a post from: Yukun's Blog

1. SQLConnection#openAsync(＜Fileオブジェクト＞, ＜モード＞)でDBに接続
2. SQLStatement#textプロパティにSQL文を代入しexecute()で実行
3. その際、フィールド値はSQLStatement#parameters["@＜定義されたパラメータ＞"]で代入する
4. SELECT文の検索結果データははSQLStatement#getResult()で取得
5. 結果データの型はSQLResultで、データそのものはdataプロパティ(Array型)に入っている。e.g. ＜SQLResult＞.data[i].＜フィールド名＞

下のプログラムはDBに接続してテーブルの作成、レコードの追加、検索を行うサンプルです。

ソースコード

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" creationComplete="dbConnect()">
<mx:Script>
  <![CDATA[
  import flash.data.SQLConnection;
  import flash.filesystem.File;
  import flash.events.SQLErrorEvent;
  import flash.events.SQLEvent;

  private var conn:SQLConnection;
  private var dbFile:File;
  private var sql:SQLStatement;

  // DBに接続
  private function dbConnect():void {
    conn = new SQLConnection();
    conn.addEventListener(SQLEvent.OPEN, onDBOpen);
    conn.addEventListener(SQLErrorEvent.ERROR, onDBError);
    dbFile = File.desktopDirectory.resolvePath("test01.db");
    trace("フィアルは存在" + (dbFile.exists ? "します。：" : "しません。") + dbFile.nativePath);
    conn.openAsync(dbFile, SQLMode.CREATE);
  }

  // 接続完了
  private function onDBOpen(e:SQLEvent):void {
    trace("Connect DB");
    conn.removeEventListener(SQLEvent.OPEN, onDBOpen);
    conn.removeEventListener(SQLErrorEvent.ERROR, onDBError);
    createTable(); // テーブルを作成
  }

  private function onDBError(e:SQLErrorEvent):void {
    trace("Can't connect DB: " + e.error.message);
    trace("Error detals: " + e.error.details);
  }

  // テーブルを作成する関数
  private function createTable():void {
    sql = new SQLStatement();
    sql.sqlConnection = conn;
    var sqlTxt:String = "CREATE TABLE IF NOT EXISTS addresses " +
        "(id INTEGER PRIMARY KEY, name TEXT, age INTEGER)";
    sql.text = sqlTxt;
    sql.addEventListener(SQLEvent.RESULT, onCreate);
    sql.addEventListener(SQLErrorEvent.ERROR, onCreateError);
    sql.execute();
  }

  // テーブル作成完了
  private function onCreate(e:SQLEvent):void {
    trace("Can create table");
    sql.removeEventListener(SQLEvent.RESULT, onCreate);
    sql.removeEventListener(SQLErrorEvent.ERROR, onCreateError);
    insertData(); // データを挿入
  }

  private function onCreateError(e:SQLErrorEvent):void {
    trace("Can't create table: " + e.error.message);
    trace("Error details: " + e.error.details);
  }

  private function insertData():void {
    sql = new SQLStatement();
    sql.sqlConnection = conn;
    var sqlTxt:String = "INSERT INTO addresses (id, name, age) " +
      "VALUES (@id, @name, @age)";
    sql.text = sqlTxt;
    sql.parameters["@id"] = 1;
    sql.parameters["@name"] = "名無し";
    sql.parameters["@age"] = 18;
    sql.addEventListener(SQLEvent.RESULT, onInsert);
    sql.addEventListener(SQLErrorEvent.ERROR, onInsertError);
    sql.execute();
  }

  // データ挿入完了
  private function onInsert(e:SQLEvent):void {
    trace("Can insert data");
    sql.removeEventListener(SQLEvent.RESULT, onInsert);
    sql.removeEventListener(SQLErrorEvent.ERROR, onInsertError);
    selectData(); // データを検索
  }

  private function onInsertError(e:SQLErrorEvent):void {
    trace("Can't insert data: " + e.error.message);
    trace("Error details: " + e.error.details);
  }

  private function selectData():void {
    sql = new SQLStatement();
    sql.sqlConnection = conn;
    var sqlTxt:String = "SELECT * FROM addresses";
    sql.text = sqlTxt;
    sql.addEventListener(SQLEvent.RESULT, onSelect);
    sql.addEventListener(SQLErrorEvent.ERROR, onSelectError);
    sql.execute();
  }

  // 検索結果を取得完了
  private function onSelect(e:SQLEvent):void {
    trace("Can select data");
    sql.removeEventListener(SQLEvent.RESULT, onSelect);
    sql.removeEventListener(SQLErrorEvent.ERROR, onSelectError);
    var result:SQLResult = sql.getResult();
    var num:int = result.data.length;
    var id:int;
    var name:String;
    var age:String;

    for (var i:int = 0; i < num; i++) {
      var row:Object = result.data[i];
      id = row.id;
      name = row.name;
      age = row.age;
      var str:String = "id=" + id + ", name=" + name + ", age=" + age;
      trace(str);
    }
  }

  private function onSelectError(e:SQLErrorEvent):void {
    trace("Can't select data: " + e.error.message);
    trace("Error details: " + e.error.details);
  }

  ]]>
</mx:Script>

</mx:WindowedApplication>

実行結果

フィアルは存在しません。/Users/yukun/Desktop/test01.db
Connect DB
Can create table
Can insert data
Can select data
id=1, name=名無し, age=18

リファレンス

• Adobe AIR 1.5 * ローカル SQL データベースの操作
• Adobe AIR 1.5 * データベースへの接続

関連すると思われる記事：

• AIR: テキストファイルを非同期に読み込む – openAsync()、readMultiByte()
• AIR: テキストファイルに書き込み – openAsync()、writeMultiByte()
• AIR: Webサーバ、Socketの接続状況を検知 – URLMonitor、SocketMonitorクラス
• MySQL: データ検索クエリの基本 – SELECT文、WHERE句、LIKE、IN、BETWEENキーワード
• Python: SQLiteにデータを格納、検索、出力 – pysqlite

AIR: SQLiteでデータの挿入と検索 – SQLConnection、SQLStatementクラス is a post from: Yukun's Blog

AIRコンポーネントではローカルのファイルにアクセスすることができます。下記のコードは日本語を含むマルチバイトの文字列をテキストファイルに書き込む処理をします。

処理の手順

1. FileStream#openAsync()かopen()メソッドの引数にFileインスタンスとFileModeのプロパティを設定して実ファイルのパイプに接続
2. FileStream#writeMultiByte()でファイルに書き込み
3. FileStream#close()でストリームを閉じる

ソースコード

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" title="シンプルテキストメイカー">
<mx:Script>
  <![CDATA[
  import mx.controls.Alert;

  private var choDir:File = File.documentsDirectory; // ダイアログの初期ディレクトリ
  private var saveFile:File;
  private var stream:FileStream;

  private function onSaveFileBut():void {
    choDir.addEventListener(Event.SELECT, onSelectSaveFile);
    choDir.browseForSave("テキストファイルに保存");
  }

  private function onSelectSaveFile(e:Event):void {
    saveFile = e.target as File; // 選択されたファイル
    choDir.removeEventListener(Event.SELECT, onSelectSaveFile);
    try {
      stream = new FileStream();
      stream.addEventListener(IOErrorEvent.IO_ERROR, onIOErrorWriteFile);
      stream.openAsync(saveFile, FileMode.WRITE); // 書き込みmodeで開く(フツーのopen()でもOK)
      var str:String = txtArea_.text;
      // 改行文字と文字コードをOS標準のものに置き換えて書き込み
      str = str.replace(/\n/g, File.lineEnding);
      stream.writeMultiByte(str, File.systemCharset); // 実際に書き込み
    } catch (err:IOError) {
      progLab_.text = "IOError : " + err;
    } finally {
      if (stream != null) {
        stream.close();
      }
    }
  }

  // ファイル書き込みに失敗した場合
  private function onIOErrorWriteFile(e:IOErrorEvent):void {
    Alert.show("ファイルの書き込みに失敗", "エラー", Alert.OK, this);
    if (stream != null) {
      stream.close();
    }
  }
  ]]>
</mx:Script>
  <mx:VBox x="0" y="0" height="100%" width="100%">
    <mx:HBox width="100%">
      <mx:Button label="ファイルに保存" id="saveBut_" click="onSaveFileBut();"/>
      <mx:Label id="progLab_"/>
    </mx:HBox>
    <mx:TextArea width="100%" height="100%" id="txtArea_"/>
  </mx:VBox>
</mx:WindowedApplication>

リファレンス

• Adobe AIR 1.5 * ファイルシステムの操作
• Adobe AIR 1.5 * ファイルの読み取りと書き込み

関連すると思われる記事：

• AIR: テキストファイルを非同期に読み込む – openAsync()、readMultiByte()
• Python: テキストファイルに書き込み – write()、writelines()メソッド
• Python: CSVファイルに書き込み – csv.writerオブジェクト
• Python: テキストファイルの行頭に行番号を追加
• AIR: SQLiteでデータの挿入と検索 – SQLConnection、SQLStatementクラス

AIR: テキストファイルに書き込み – openAsync()、writeMultiByte() is a post from: Yukun's Blog

AIRコンポーネントではローカルのファイルにアクセスすることができます。下記のコードは日本語を含むマルチバイトのテキストファイルを読み込み、画面い表示する処理を行います。

大まかな手順

1. FileStreamのコンストラクタの引数に対象のファイルへのパスが設定されたFileインスタンスを渡す。
2. FileStream#openAsyncで実ファイルへのパイプ接続。
3. この時、非同期の読み込み完了／エラーを取得するためにイベントを登録しておく。
4. 実際の文字の読み取り（どれだけ読むか、文字コードの変換など）はFileStream#readMultiByteで行う。
5. ストリームのインスタンスには接続時にpositionプロパティ（何処読んでいるかのポインタみたいなもの）からファイル末尾までのサイズ（bytesAvailable）を取得してるので、読み込みサイズにそれを指定。
6. FileStream#close()でストリームを閉じる

ソースコード

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
  title="テキストビュワー">
  <mx:Script>
    <![CDATA[
    import flash.filesystem.*;
    import mx.events.*;
    import mx.controls.Alert;

    private var choDir:File = File.documentsDirectory; // 開くディレクトリを指す
    private var curFile:File; // 選択されたファイル
    private var stream:FileStream;

    private function onOpenFileBut():void {
      choDir.addEventListener(Event.SELECT, onSelectFile);
      choDir.browseForOpen("開く"); // ファイル選択ダイアログの表示
    }

    // ファイルが選択されたイベント
    private function onSelectFile(e:Event):void {
      txtArea_.text = "";
      stream = new FileStream();
      curFile = e.target as File;
      stream.addEventListener(Event.COMPLETE, onCompleteReadFile);
      stream.addEventListener(IOErrorEvent.IO_ERROR, onIOErrorReadFile);
      stream.addEventListener(ProgressEvent.PROGRESS, onProgReadFile);
      stream.openAsync(curFile, FileMode.READ); // 非同期読み込み
      curFile.removeEventListener(Event.SELECT, onSelectFile);
    }

    private function onCompleteReadFile(e:Event):void {
      try {
        // OS標準の文字コードで読み込み
        var str:String = stream.readMultiByte(stream.bytesAvailable, File.systemCharset);
        // OS標準の改行文字への変換
        var pat:RegExp = new RegExp(File.lineEnding, "g");
        str = str.replace(pat, "n");
        txtArea_.text = str; // テキストエリアに表示
        stream.removeEventListener(Event.COMPLETE, onCompleteReadFile);
        stream.removeEventListener(IOErrorEvent.IO_ERROR, onIOErrorReadFile);
        stream.removeEventListener(ProgressEvent.PROGRESS, onProgReadFile);
      } catch (err:Error) {
        progLab_.text = "IOError: " + err;
      }
      finally {
        // パイプのクローズ
        if (stream != null) {
          stream.close();
        }
      }
    }

    private function onIOErrorReadFile(e:IOErrorEvent):void {
      Alert.show("ファイルを読み込み不可", "Error", Alert.OK, this); // 第4引数には親オブジェトを渡す
      if (stream != null) {
        stream.close();
      }
    }

    private function onProgReadFile(e:ProgressEvent):void {
      progLab_.text = "Progress: " +  e.bytesLoaded + " / " + e.bytesTotal + " bytes";
    }
    ]]>
  </mx:Script>
  <mx:VBox x="0" y="0" height="100%" width="100%">
    <mx:HBox width="100%">
      <mx:Button label="ファイルを開く" id="openBut_" click="onOpenFileBut();"/>
      <mx:Label id="progLab_"/>
    </mx:HBox>
    <mx:TextArea width="100%" height="100%" id="txtArea_"/>
  </mx:VBox>

</mx:WindowedApplication>

リファレンス

• Adobe AIR 1.5 * ファイルの読み取りと書き込みのワークフロー
• Adobe AIR 1.5 * 読み取りバッファと FileStream オブジェクトの bytesAvailable プロパティ

関連すると思われる記事：

• AIR: テキストファイルに書き込み – openAsync()、writeMultiByte()
• Python: CSVファイルの読み込み – csv.readerオブジェクト
• Python: テキストファイルの読み込み – read()、readlines()、readline()メソッド
• Python: テキストファイルに書き込み – write()、writelines()メソッド
• Python: テキストファイルの行頭に行番号を追加

AIR: テキストファイルを非同期に読み込む – openAsync()、readMultiByte() is a post from: Yukun's Blog

Demo(Uncompleted): http://www.yukun.info/labs/flex/AmazoCluster01/
※追記：2011年現在Amazonのサービス仕様の変更により上記のリンク先アプリは正常に動作しません<(_ _)>

これは何？

Amazon.co.jpの任意の商品の類似商品を線で結び関連付けを視覚化するアプリ。（見にくいね。まだ未完成だけど、暇を狙って完成させる）

どうやって使うの？

1. 商品画像をダブルクリックすると類似商品の画像が表示されます。またその画像をダブルクリックすると・・・以下ループ。
2. 画像をドラッグすると線で結ばれた類似商品も納豆の糸のようについてきます。

今後直したい／追加したい機能は？

1. 商品の検索フォーム
2. 商品-類似商品間の距離調整だけでなく類似-類似間の調整も行う
3. 各イベントによる処理のタイミングの調整
4. ドラッグ中の商品とその関連商品を結ぶ線の色と画像のサイズを変更
   • 関連の深さによって色合いとサイズが変化
5. 商品をクリック／マウスオーバーしたときのアクションを増やす
   • タイトル等の商品の詳細情報を表示
   • Amazonページへのリンク
6. 関連度合いによるエフェクトの区別
7. 3D表示：Z軸への意味付け（時間軸、ここでは出版年度なんかは最適かも？）

それができたら使うメリットはある？

たぶん色々とある。作る前から作るべき明確なメリットを定義して作り始めるのがベターというかマストだけど。どちらにせよ仮説と検証の試行錯誤は必要。

そういえば、なんで作ろうと思ったの？

以前授業の課題で書いたX11でフラクタル描くコードと卒研のコードを読み直していたら今回のアプリを想像して「ん？これくらいならサクッと書けるかも」と思ったのが発端。また、「検索行動の典型」＝「フォームにキーワードをスペースはさんで入力→ポチっ→ページのリストから選択」とはひと味変った検索のメリットを見出したい、というのがメタ動機。その一例（にできればいいね）。

作って勉強になったことは？

一応作ることで、以前よりクラスの役割付け（機能の結合度合い）とデザパタの適応を以前よりスムーズにこなせるようにはなった。おおまかな設計→コーディングの速度も少し上がった（気のせい）。でもそれ以外は・・・うーん、今後の課題。
今回はAmazonの商品を線で繋げたけれど、それをTwitter(つぶやき-つぶやき中のキーワード間、ユーザ-フレンド間)やDelicious(タグ-ブックマーク間、ユーザ-フレンド間)、WordPressブログ（タグ-記事間）に変更しても基本UIの部分はわずかな修正でいけるクラス群だと思う。もちろん、場合によっては類似度を算出する部分も用意する必要がある。

最近ブログ書いてないね。

卒研とバイトその他で詰まっているのは理由としては身も蓋もナフサ。単に私の生活の中でブログのプライオリティや使い道が変化してきているのかも。

関連すると思われる記事：

• AS3でお絵かきFlashを作る (4)塗りつぶしと簡易レイヤーの操作
• AS3でお絵かきFlashを作る (3)図形描画と配置選択ツールの追加
• AS3でお絵かきFlashを作る (2)ボタン作成 – Flexコンポーネントの導入
• ActionScript: 画像ファイルをダウンロードして表示 – Loaderクラス
• AS3でお絵かきFlashを作る (5)エアーブラシ機能

AmazoCluster: 一発で納得のいくものができればいいけれどね・・・ is a post from: Yukun's Blog

ソースコード

package info.yukun
{
	import flash.display.Loader;
	import flash.display.LoaderInfo;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.IOErrorEvent;
	import flash.net.URLRequest;

	/**
	 * 外部画像のロードサンプル
	 */
	public class LoadImage extends Sprite {
		private var imageURL:String =
			"http://www.google.co.jp/intl/ja/images/about_logo.gif";
		private var imageLoader:Loader;

		public function LoadImage():void {
			init();
		}

		private function init(e:Event = null):void {
			imageLoader = new Loader();
			var imageURLreq:URLRequest = new URLRequest(imageURL);
			var imgInfo:LoaderInfo = imageLoader.contentLoaderInfo;
			imgInfo.addEventListener(Event.INIT, onInit);
			imgInfo.addEventListener(IOErrorEvent.IO_ERROR, onIOerror);
			addChild(imageLoader);
			imageLoader.load(imageURLreq);
		}

		// ダウンロード完了
		private function onInit(e:Event):void {
			trace("Can access the loaded object.");
		}

		// IOエラーによりダウンロード失敗
		private function onIOerror(e:IOErrorEvent):void {
			trace("IO Error.");
		}
	}
}

リファレンス

• Loader – ActionScript 3.0 Language and Components Reference
• LoaderInfo – ActionScript 3.0 Language and Components Reference

関連すると思われる記事：

• ActionScript: マウスをイベントリスナーに登録
• ActionScript: Flash(*.swf)にmp3ファイルを埋め込む – Embedタグ
• AS3でお絵かきFlashを作る (3)図形描画と配置選択ツールの追加
• Android: リソースの画像ファイルの拡大・縮小描画 – drawBitmap()
• AS3でお絵かきFlashを作る (4)塗りつぶしと簡易レイヤーの操作

ActionScript: 画像ファイルをダウンロードして表示 – Loaderクラス is a post from: Yukun's Blog

関連すると思われる記事：

• AS3でお絵かきFlashを作る (2)ボタン作成 – Flexコンポーネントの導入
• AS3でお絵かきFlashを作る (4)塗りつぶしと簡易レイヤーの操作
• AS3でお絵かきFlashを作る (3)図形描画と配置選択ツールの追加
• AS3でお絵かきFlashを作る (1)自由曲線のUndo、Redo
• AS3はじめました

AS3でお絵かきFlashを作る (5)エアーブラシ機能 is a post from: Yukun's Blog

まず、(2)のオブジェクト間の階層（レイヤー）移動機能ですが、これは描画した図形上で右クリックを押すことで呼び出せるコンテキストメニューから使えます（下図）。

この機能で図形の重なり順序を調節することが出来ます。また、「配置」ツールで図形を選択するとその図形は自動的に最前面レイヤーに移動されます。これによって、マウスイベントの発生源を図形毎に持たせても、重なり具合によるイベントの取りこぼしか無くなる利点があります。結果、OOPにある程度沿ったプログラミングを行うことを可能にします。

ちなみにこのレイヤー移動アクションは履歴には記録せずundo、redoの対象にはしませんでした（このレベルのアプリに対しては必要ないかと思ったので）。もし貼り絵のように絵を描きたく、またundoを利用していきたい場合はPhotoshopやGIMP等の明確なレイヤー機構を実装したほうがすっきりすると思います。内部機能の実装の手間はさほど掛かりませんが、ツールボックスのようなUIを作らなくてはいけないのが今の私にとってメンドイところです。しかしFlexコンポーネントを学ぶ良い機会でもあるのでさわりだけでもやってみようかな。

こう機能が増えてくるとユーザインターフェース(UI)にもしっかり取り組まなければならないんですが、UIはリリースするプラットフォーム（PCデスクトップ上、PCブラウザ上、モバイル、スマートフォン）に依存する部分が大きいのでまだ取り掛かるのはいいかなと思ったり（ぉぃ）。

さて、今回で基本的なブラシツール（ベクター以外）は揃ったかと思いますので、そろそろテキスト系の機能を実装していきたいと思います。初回に「頭の中のアイディアを楽しくまとめられるツールを作ってみたい」とのたまっていたので、ちょっとチャレンジしてみます。合わせてベクターツールも追加してみます。

関連すると思われる記事：

• AS3でお絵かきFlashを作る (3)図形描画と配置選択ツールの追加
• AS3でお絵かきFlashを作る (1)自由曲線のUndo、Redo
• AS3でお絵かきFlashを作る (2)ボタン作成 – Flexコンポーネントの導入
• AS3でお絵かきFlashを作る (5)エアーブラシ機能
• AmazoCluster: 一発で納得のいくものができればいいけれどね・・・

AS3でお絵かきFlashを作る (4)塗りつぶしと簡易レイヤーの操作 is a post from: Yukun's Blog