Afcs : com.adobe.rtc.pods.SimpleChat でチャット作成

以下のサンプルの開発条件として、「Afcs SDK 0.91」を参照できる環境が整っている必要があります。

今回、初めて Afcs のサンプルコードを作りましたが、API リファレンスをはじめとする全てのドキュメントが、英語で書かれているため、なかなか理解が難しく、思うようにコードが書けませんでした。
SDK 内包のサンプルや、 API リファレンスを見て大体の動きを読み取り、コードを書きながら動きを確認して実行するといった作業の繰り返しで作ったので、正しい使い方なのかは不明です。

メインの画面デザインから

■ chatAfcs.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="absolute" 
	xmlns:ns1="com.adobe.rtc.session.*" 
	xmlns:ns2="com.adobe.coreUI.controls.*" 
	xmlns:ns3="com.adobe.rtc.pods.*" 
	xmlns:local="*" 
	width="500" 
	height="380" >
	
	<local:chatMain id="logic" />
	<ns1:ConnectSessionContainer 
		x="10" 
		y="10" 
		width="480" 
		height="360" 
		id="cSession" 
		autoLogin="false">
		<ns3:SimpleChat id="chat" x="10" y="10" width="333" height="340"/>
		<mx:List x="351" y="10" width="118" height="283" id="userList" labelField="displayName"></mx:List>
		<mx:Button x="352" y="322" label="Logout" width="118" id="btnLogout" height="28"/>
	</ns1:ConnectSessionContainer>
	
</mx:Application>

5 ～ 7行目は、チャットコントロールを使用するために必要なクラスパッケージです。*.as 側に書いている inport 文みたいなものです。
今回とても重要な部分は、13 ～ 23行目です。
『 <ns1:ConnectSessionContainer 』から始まる部分。ここは Afcs サービスとのセッションを管理するオブジェクトです。このオブジェクトは必須となります。
13 ～ 23行目の間に、Afcs のチャットコントロールを配置する必要があります。
セッションが正常に確立されると、13 ～ 23行目の中に配置したオブジェクトがロードされます。
『 <ns1:ConnectSessionContainer 』の属性で、19行目に設定している『autoLogin』の設定ですが、これを「true」に設定すると、「initialRoomSettings」に予め設定された userName(guest アカウントでも可)、password で自動的にログインされ、セッションが確立します。セッションオブジェクト内に定義したコントロールが、セッション確立時にロードされます。
『autoLogin』を「false」に設定した場合、正常にログインしてセッションの確立がされるまで、セッションオブジェクト内に配置したコントロールが、ロードされないことになります。
ここでは「false」の設定をし、画面ロード時にはセッションオブジェクト内のチャットコントロールはロードされない設定にしています。最初に表示されるログインダイアログでログインを実行し、セッションの確立が完了したタイミングでチャットコントロールが表示されます。

チャットのコントロールオブジェクトですが、驚く事に、実質たった一行書くだけで実装できてしまいます。すごいぞ ADOBE
20行目 『<ns3:SimpleChat ～』が、そのチャットコントロールに該当します。チャットコントロール以外は、ログインしているユーザのリストと、ログアウトボタンのコントロールだけを配置しているだけですね。
今回のように、「SimpleChat」のコードを書くとチャットに必要なコントロールが全て自動的に配置されますが、代わりに「SimpleChatModel」を使うことで、開発者が独自にチャット内のコントロールを配置することも可能です。

メイン画面のロジック部分です
■ chatMain.as

package
{
	import com.adobe.rtc.authentication.AdobeHSAuthenticator;
	import com.adobe.rtc.events.AuthenticationEvent;
	import com.adobe.rtc.pods.SimpleChat;
	import com.adobe.rtc.session.ConnectSessionContainer;
	import com.adobe.rtc.session.RoomSettings;
	
	import flash.events.Event;
	import flash.events.MouseEvent;
	
	import mx.controls.Button;
	import mx.controls.List;
	import mx.core.IMXMLObject;
	import mx.events.FlexEvent;
	import mx.managers.PopUpManager;
	
	public class chatMain implements IMXMLObject
	{
		private var view:chatAfcs;
		private var auth:AdobeHSAuthenticator;
		private var settings:RoomSettings;
		private var loginDlg:LoginDialog;
		private const roomURL:String = "ルームのURL";
		
		public function initialized(document:Object, id:String):void
		{
			view = document as chatAfcs;
			view.addEventListener(FlexEvent.CREATION_COMPLETE, onCreationComplete, false, 0, false);
		}
		
		private function onCreationComplete(e:FlexEvent):void
		{
			initChat();
		}
		
		private function initChat():void
		{

			// ConnectSessionContainer プロパティ authenticator 設定
			SetAdobeHSAuthenticator();
			
			// ConnectSessionContainer プロパティ initialRoomSettings 設定
			SetRoomSettings();
			
			// ConnectSessionContainer オブジェクト 初期設定
			SetConnectSessionContainer();
			
			// ログインダイアログオブジェクト
			loginDlg = new LoginDialog();
			PopUpManager.addPopUp(loginDlg, view, true);
			PopUpManager.centerPopUp(loginDlg);
			
			// ログインダイアログ イベントリスナー追加
			loginDlg.LoginDlgMain.addEventListener("SetLogin", setLogin, false, 0, false);

		}
		
		// ConnectSessionContainer プロパティ authenticator 設定
		private function SetAdobeHSAuthenticator():void
		{
			// AdobeHSAuthenticator オブジェクト初期化
			auth = null;
			auth = new AdobeHSAuthenticator();
			auth.userName = null;
			auth.password = null;
		}
		
		// ConnectSessionContainer プロパティ initialRoomSettings 設定
		private function SetRoomSettings():void
		{
			// RoomSettings オブジェクト初期化
			settings = null;
			settings = new RoomSettings();
			
			// 自動的に、入室したRoomの誰かのビューア権限をパブリッシュ権限に昇格させる
			settings.autoPromote = true;
		}
		
		// ConnectSessionContainer オブジェクト 初期設定
		private function SetConnectSessionContainer():void
		{
			// セッション管理オブジェクトのプロパティ設定
			view.cSession.roomURL = roomURL;
			view.cSession.initialRoomSettings = settings;
			view.cSession.authenticator = auth;
		}
		
		// ログインダイアログ イベント処理
		private function setLogin(e:Event):void
		{
			trace(e.target.auth.userName);
			trace(e.target.auth.password);

			// ログインダイアログで設定した ユーザ名 パスワードを セッション管理オブジェクトの
			// authenticator プロパティに格納
			view.cSession.authenticator = null;
			view.cSession.authenticator = e.target.auth;
			
			// AdobeHSAuthenticator に設定された情報で Afcs へのログインが完了した際のイベントリスナー追加
			view.cSession.authenticator.addEventListener(AuthenticationEvent.AUTHENTICATION_SUCCESS, authenticationSuccess);
			
			// デザインに配置された ConnectSessionContainer オブジェクトのロードが完了した際のイベントリスナー追加
			view.cSession.addEventListener(FlexEvent.CREATION_COMPLETE, cSessionCreationComplete, false, 0, false);

			// セッションオブジェクト ログイン処理
			view.cSession.login();		
		}
		
		// ログイン成功時実行イベント
		private function authenticationSuccess(e:AuthenticationEvent):void
		{
			// ログインダイアログを閉じる
			PopUpManager.removePopUp(loginDlg);
		}
		
		// デザインに配置された ConnectSessionContainer オブジェクトのロードが完了した際に実行されるイベント
		private function cSessionCreationComplete(e:FlexEvent):void
		{
			// リストオブジェクトに現在ログインしているユーザのコレクションオブジェクトを格納
			view.userList.dataProvider = view.cSession.userManager.userCollection;
			
			// ログアウトボタンクリックイベントリスナー追加
			view.btnLogout.addEventListener(MouseEvent.CLICK, btnLogoutClick, false, 0, false);
		}
		
		// ログアウトボタンクリックイベント
		private function btnLogoutClick(e:MouseEvent):void
		{
			// // セッションオブジェクト ログアウト
			view.cSession.logout();
			view.cSession.close();	
			view.removeAllChildren();
			
		}
		
	}
}

3 ～ 7行目は、チャットコントロールを使うために必要な Afcs のクラスパッケージの参照です。
8 ～ 36行目は、通常の Flex アプリケーションで多用するコードなので、説明を省きます。
37行目からの処理は、初期設定を行っていますが、アプリケーション開始時に、ログインダイアログである別画面をモーダル表示しています。
55行目では、ログイン画面のログインボタンを押された際のイベントを受け取る設定をしています。
60 ～ 57行目の「SetAdobeHSAuthenticator()」メソッドは、画面側「chatMain.as」の13行目から記述している、コネクションセッションコンテナオブジェクト(ConnectSessionContainer) のプロパティである「authenticator」に格納するオブジェクトの設定をしています。
ネット上 や、SDK 内包のサンプルでは、ここにデベロッパーの 「ADOBE ID」とパスワードを記述するようなものがほとんどですが、ID、パスワードを平文でハードコードするのはセキュリティ上好ましくないので、実際に利用するユーザが入力したものを使うようにしています。
なので、userName password は null で初期値設定しています。
70 ～ 78行目の「SetRoomSettings()」メソッドも、画面側「chatMain.as」の13行目から記述している、コネクションセッションコンテナオブジェクト(ConnectSessionContainer) のプロパティである「initialRoomSettings」に格納するオブジェクトの設定をしています。
77行目で「autoPromote」プロパティを true に設定しているのは、自動的に、入室した Room の誰かのビューア権限をパブリッシュ権限に昇格させる設定をしています。おそらくこれをやっておくことで guest ユーザでもパブリッシュが可能になるものと思われます。
81 ～ 87行目の「SetConnectSessionContainer()」メソッドでは、上記で設定したオブジェクトを、コネクションセッションコンテナオブジェクト(ConnectSessionContainer) のプロパティに格納しています。
アプリケーションの初期処理でモーダル表示した、ログインダイアログ画面から「Login」ボタンが押されると、90行目の「setLogin(e:Event)」メソッドが実行されます。
ログインダイアログの画面で「Login」ボタンが押されると、「userName」と「password」が格納された「AdobeHSAuthenticator」が生成され、通知されたイベントオブジェクトのプロパティに格納されています。このオブジェクトを画面側「chatMain.as」の13行目から記述している、コネクションセッションコンテナオブジェクト(ConnectSessionContainer) のプロパティである「authenticator」に格納しています。
101行目では、ログインダイアログの画面から設定された情報で Afcs へのログインが成功した際のイベントリスナーを追加しています。
104行目では、メイン画面上に配置された ConnectSessionContainer オブジェクトの、ロード処理が完了した際のイベントリスナーを追加しています。
これで、ログインに必要な情報を全てコネクションセッションコンテナオブジェクトに設定できたので、107行目でログインを実行しています。
114行目で、ログインダイアログを閉じています。(ログイン成功時)
メイン画面上に配置された ConnectSessionContainer オブジェクトの、ロード処理が完了したタイミングで、118行目からの処理が実行され、セッションオブジェクトの中から、現在ログインしているユーザのリストを参照し、List コントロールにバインドしています。
124行目で、ログアウトボタンクリックイベントリスナーを追加しています。
128行目から、ログアウトボタンクリックイベントの処理を記述しています。
本来ならばログアウトさせた直後に、また処理を最初から実行し、ログインダイアログを出したかったのですが、ログアウトを掛けて違うユーザでログインしても、前回のセッション情報が残ったままで、意図したように動作しなかったため、今回はコネクトセッションコンテナごと削除して終了するようにしてしまいました。
なので、ログアウトして再度ログインする場合にはブラウザで、ページのリロードを行うことで、別ユーザでログインすることができます。だれか良い方法知っていたら教えてください。
またこの辺りは時間のあるときに調査してみようと思う。

ログインダイアログの画面デザインです。
■ LoginDialog.mxml

package
{
	import com.adobe.rtc.authentication.AdobeHSAuthenticator;
	import com.adobe.rtc.events.AuthenticationEvent;
	
	import flash.events.Event;
	import flash.events.EventDispatcher;
	import flash.events.IEventDispatcher;
	import flash.events.MouseEvent;
	
	import mx.core.IMXMLObject;
	import mx.events.FlexEvent;
	import mx.controls.Alert;

	[event(name="SetLogin")]
	public class LoginDialogMain extends EventDispatcher implements IMXMLObject
	{
		private var view:LoginDialog;
		private var _auth:AdobeHSAuthenticator;
		
		// ---------- プロパティ ----------
		
		// AdobeHSAuthenticator
		public function set auth(value:AdobeHSAuthenticator):void
		{
			_auth = value;
		}	
		
		public function get auth():AdobeHSAuthenticator
		{
			return _auth;
		}

		// コンストラクタ
		public function LoginDialogMain(target:IEventDispatcher=null)
		{
			super(target);
		}
		
		// イニシャライズ
		public function initialized(document:Object, id:String):void
		{
			view = document as LoginDialog;
			view.addEventListener(FlexEvent.CREATION_COMPLETE, onCreationComplete, false, 0, false);
		}
		
		private function onCreationComplete(e:FlexEvent):void
		{
			view.loginBtn.addEventListener(MouseEvent.CLICK,Login_Click,false,0,false);
		}
		
		private function Login_Click(e:MouseEvent):void
		{
			var eventObject:Event;

			// プロパティ auth にログインダイアログで入力された ユーザ名 パスワード を格納
			_auth = new AdobeHSAuthenticator();
			_auth.userName = view.username.text;
			
			if (view.password.text.length > 0){
				_auth.password = view.password.text;
			}
			else if(view.RadioUser.selected == true)
			{
				view.password.setFocus();
				Alert.show("パスワードが入力されていません");
				return;
			}
			else
			{
				_auth.password = null;
			}
			
			// イベント通知処理
			eventObject = null; 
			eventObject = new Event("SetLogin"); 
			dispatchEvent(eventObject); 
			
		}
	}
}

ログインダイアログ画面のロジック部です。
■ LoginDialogMain.as

package
{
	import com.adobe.rtc.authentication.AdobeHSAuthenticator;
	import com.adobe.rtc.events.AuthenticationEvent;
	
	import flash.events.Event;
	import flash.events.EventDispatcher;
	import flash.events.IEventDispatcher;
	import flash.events.MouseEvent;
	
	import mx.core.IMXMLObject;
	import mx.events.FlexEvent;
	import mx.controls.Alert;

	[event(name="SetLogin")]
	public class LoginDialogMain extends EventDispatcher implements IMXMLObject
	{
		private var view:LoginDialog;
		private var _auth:AdobeHSAuthenticator;
		
		// ---------- プロパティ ----------
		
		// AdobeHSAuthenticator
		public function set auth(value:AdobeHSAuthenticator):void
		{
			_auth = value;
		}	
		
		public function get auth():AdobeHSAuthenticator
		{
			return _auth;
		}

		// コンストラクタ
		public function LoginDialogMain(target:IEventDispatcher=null)
		{
			super(target);
		}
		
		// イニシャライズ
		public function initialized(document:Object, id:String):void
		{
			view = document as LoginDialog;
			view.addEventListener(FlexEvent.CREATION_COMPLETE, onCreationComplete, false, 0, false);
		}
		
		private function onCreationComplete(e:FlexEvent):void
		{
			view.passwordBox.visible = false;
			view.loginBtn.addEventListener(MouseEvent.CLICK,Login_Click,false,0,false);
		}
		
		private function Login_Click(e:MouseEvent):void
		{
			var eventObject:Event;

			// プロパティ auth にログインダイアログで入力された ユーザ名 パスワード を格納
			_auth = new AdobeHSAuthenticator();
			_auth.userName = view.username.text;
			
			if (view.username.text.length == 0)
			{
				view.username.setFocus();
				Alert.show("ユーザ名が入力されていません");
				return;
			}
			
			if (view.password.text.length > 0)
			{
				_auth.password = view.password.text;
			}
			else if(view.RadioUser.selected == true)
			{
				view.password.setFocus();
				Alert.show("パスワードが入力されていません");
				return;
			}
			else
			{
				_auth.password = null;
			}
			
			// イベント通知処理
			eventObject = null; 
			eventObject = new Event("SetLogin"); 
			dispatchEvent(eventObject); 
			
		}
	}
}

ログインダイアログ画面で入力された userName password を、AdobeHSAuthenticator オブジェクトに格納し、クラスのプロパティに格納してイベント通知しているだけです。

最後に、今回初めて触ってみた Afcs ですが、『簡単に使える』といわれている割には結構理解に苦しむところが多く、簡単にはいきませんでした。
特にセッション管理のあたりのタイミングとかAPIの使い方とかが、思っていたよりも扱いにくかった印象です。
しかしながら、セッション管理の辺りは、ある程度パターンが決まってくるのではないかと思われ、ここだけ理解できてしまえば、確かに簡単なのかもしれません。

次は、ホワイトボードの共有について記述予定です。