BlazeDSでつくる共有ホワイトボード
デモアプリケーションを試す
すぐにデモアプリケーションをお試しいただけるように、記事で使用するアプリケーションをwarファイルとしてご用意しました。
以下の手順で動作をご確認ください。
- BlazeDSをインストール
１－１．ブラウザでダウンロードサイト（http://opensource.adobe.com/wiki/display/blazeds/Downloads）へアクセス
１－２．「Download the latest BlazeDS Release builds」をクリック
１－３．「Download the BlazeDS turnkey」をクリックしてアーカイブをダウンロード
１－４．ダウンロードしたアーカイブを任意の場所へ展開 （ここでは「C:\blazeds_turnkey_3-0-0-544」として展開しました。）
- warファイルを配置
「shareboard.war」を「C:\blazeds_turnkey_3-0-0-544\tomcat\webapps」へ配置（※サンプルファイル）
- ユーザを登録
接続を許可するユーザを登録します。
メモ帳などで「C:\blazeds_turnkey_3-0-0-544\tomcat\conf\tomcat-users.xml」を開き、以下の内容をコピーしてください。
<?xml version='1.0' encoding='utf-8'?>
<tomcat-users>
<role rolename="sb1user"/>
<role rolename="sb2user"/>
<role rolename="sb3user"/>
<user username="user11" password="pass11" roles="sb1user"/>
<user username="user12" password="pass12" roles="sb1user"/>
<user username="user13" password="pass13" roles="sb1user"/>
<user username="user21" password="pass21" roles="sb2user"/>
<user username="user22" password="pass22" roles="sb2user"/>
<user username="user31" password="pass31" roles="sb3user"/>
<user username="user00" password="pass00" roles="sb1user,sb2user,sb3user"/>
</tomcat-users>
ここでは、それぞれのボードに接続できるユーザを以下のように設定しています。
Board 1：user11, user12, user13
Board 2：user21, user22
Board 3：user31
すべて：user00
- Tomcatを起動
「ファイル名を指定して実行」で「C:\blazeds_turnkey_3-0-0-544\tomcat\bin\startup.bat」を実行
（停止は「C:\blazeds_turnkey_3-0-0-544\tomcat\bin\shutdown.bat」を実行）
- ブラウザで「http://localhost:8400/shareboard/」へアクセス
すぐに使えるFlex版のクライアントと、AIR版クライアントをインストールするためのバッジがあります。
- AIR版クライアントをインストール
バッジの「Install Now」をクリックしてインストール
- AIR版でログイン
７－１．「Board:」で「Board 1」が選択されているのを確認し、「Connect」を押下
７－２．User NameとPasswordにそれぞれ「user11」、「pass11」と入力し、「OK」を押下
- Flex版でログイン
AIR版と同様User NameとPasswordにそれぞれ「user12」、「pass12」と入力し、「OK」を押下
これでBlazeDSを介してAIR版クライアントとFlex版クライアントが接続されました。
各クライアントからの描写が他クライアントに反映されること、AIR版クライアントにドラッグ＆ドロップした画像がFlex版クライアントにも表示されることなどをご確認ください。
また、同じネットワークに他のマシンが存在する場合には、接続先ホストにサーバを起動したマシンのIPアドレスを指定することにより同様に接続することが可能です。
機能説明
ここではデモアプリケーションのソースを、機能ごとに説明します。行番号を表記してありますので、実際のソースと照らし合わせてご確認ください。
▼用語説明
- イベント
プログラムの中で、何らかの事由によって起こるものをイベントと呼びます。
たとえば、ユーザがマウスをクリックした、サーバからメッセージが届いた、ファイルの読み込みが完了したなどがそれにあたります。
- イベントリスナ
イベントが発生したときにシステムから実行される関数をこう呼びます。
- フレーム
Flashでは、アニメーションと同じように複数の静止画を連ねることによって動きを表しています。この１枚の静止画のことをフレームと呼びます。
- ログイン（この記事固有）
接続を完了するためにはユーザが本人かを判断する認証処理と、認証されたユーザに権限があるかを判断する権限チェック処理の２つが必要です。
認証処理にloginというメソッドを使用していますが、記事中では認証と権限チェックをまとめて「ログイン」と呼んでいます。
▼メッセージ送受信（クライアント - クライアント）
メッセージエージェントにはProducerとConsumerがあり、それぞれ送信と受信を担当しています。
メッセージを送信する際にはクライアント側でタイミングを計ることができますが、受信の場合はいつサーバからメッセージが届くかを把握できないため、待機している必要があります。
このため、Producerがメッセージを送信するにはsendを、Consumerがメッセージを受信するにはsubscribeメソッドを使用します。
Consumer#subscribe()を呼ぶことにより、Consumerはメッセージ受信待機状態になります。以下メソッド名に習ってこれを購読状態と表記します。
そして、購読状態にあるConsumerがメッセージを受信するとイベントが起こります。メッセージ受信時の処理はこのイベントが起きたときに実行されるイベントリスナを登録し、その中でおこないます。
▼ユーザの描き込みを表示する
マウスカーソルの移動に追従して線を引くことで、ボードに描き込みを反映しています。
- 処理概要
- マウスボタンが押下されたタイミングで描写とマウスカーソル座標の記録をはじめる。
- ボタンが押されている間中それを継続する。
- ボタンが放されたタイミングで、サーバに接続していれば座標の情報を送信する。
- （ShareBoardAIR.mxml）86～88行目
「canvas」はユーザが線を描く場所、ボードそのものです。ここでは、このcanvasにイベントリスナを登録しています。
canvas上でユーザがマウスボタンを押したときには「beginDraw」という関数が、マウスボタンを放したときとマウスカーソルがcanvasの範囲から出たときには「endDraw」という関数が実行されるようになっています。
- （ShareBoardAIR.mxml）200～211行目
beginDraw関数です。ここでは、線を引き始める場所をマウスカーソルの座標に移動し、現在の線色を保存して点を描き、フレームごとに実行されるイベントリスナ「drawLine」を登録しています。
- （ShareBoardAIR.mxml）228～235行目
drawLine関数です。カーソルが移動するたびにその座標を記録し続けます。
- （ShareBoardAIR.mxml）213～226行目
endDraw関数です。カーソルの座標を記録し続けているイベントリスナの登録を解除し、記録した座標情報をサーバへ送信しています。
▼他クライアントの描き込みを表示する
メッセージとして受信した、他クライアントの描き込みをボードに反映します。
- 処理概要
- 受信した他クライアントの描き込みをキューにためる。
- フレームごとに実行されるイベントリスナの中で、キューにたまっている描き込みをボードに反映する。
- （ShareBoardAIR.mxml）52行目
フレームごとに実行されるイベントリスナを登録しています。
- （ShareBoardAIR.mxml）177行目
受信した描き込みをキューに追加しています。描き込みはフレームごとのマウスカーソル座標の配列として持っています。
また、配列の先頭は線色と想定して扱っています。
- （ShareBoardAIR.mxml）237～249行目
キューにたまっている描き込み情報を座標ごとに取り出し、それに沿ってボードに線を引いています。
▼ドラッグ＆ドロップ
ローカルにある画像ファイルを読み込んでボードに貼り付けます。
- 処理概要
- ドロップ対象が、ドロップを受け入れる状態にする。
- ドロップされた画像ファイルをサーバへ送信する。
- （ShareBoardAIR.mxml）91行目～95行目
ボードの外枠となるオブジェクト「canvasFrame」に、ドラッグ中のマウスカーソルが重なった時に実行されるイベントリスナを追加しています。
サーバと接続中で、かつドラッグされているものがファイルだった場合に、ドラッグを受け入れる状態にしています。
マウスカーソルがドロップ可能マークに変わるようになります。
- （ShareBoardAIR.mxml）96行目～119行目
ドロップされたファイルの拡張子を確認し、画像ファイルであった場合にはその内容を読み込み、サーバへ送信しています。
読み込まれた画像はここで直接貼り付けているのではなく、サーバを介していることになります。
▼ローカルファイル書き出し
画像が貼り付けられたり、描き込みがされている状態のボードのスクリーンショットをJPEGでローカルファイルに保存しています。
- （ShareBoardAIR.mxml）260行目～262行目
キャプチャしたボードの画像を、環境構築時に読み込み設定したライブラリを使用して、JPEGに変換しています。
- （ShareBoardAIR.mxml）264行目～269行目
変換したJPEGデータをデスクトップ上にファイルとして書き出しています。
▼ログイン・ログアウト
画面から入力されたユーザ名とパスワードを使用して認証をしています。
ポップアップウィンドウで結果を判断しなければいけない都合上、ログインに関する処理はウィンドウファイル内で完結しています。
なお、ログインはユーザが本人かを判断する認証処理（Authentication）と、認証されたユーザにアクセス権限があるかを判断する権限チェック（Authorization）に２段階に処理が分かれています。
- 処理概要
- 認証結果を処理するイベントリスナを登録する。
- 画面から入力された情報をサーバへ送信する。
- 認証結果により起こるイベント内で、成功したならメインウィンドウへ処理を戻し、失敗したならエラーメッセージを表示する。
- （LoginWindow.mxml）23行目～54行目
認証に成功したときに実行されるイベントリスナと、失敗したときに実行されるイベントリスナを登録し、入力されたユーザ名とパスワードをサーバへ送信しています。
- （LoginWindow.mxml）25行目～37行目
認証に成功したときに実行されるイベントリスナです。
続いて権限チェックをするイベントリスナと、権限チェックに失敗したときに実行されるイベントリスナを登録し、受信担当メッセージエージェント（Consumer）を購読状態にしています。
認証のように明示的にメソッドを呼ぶのではなく、購読状態を開始する課程で権限チェックがされることを利用しています。
- （LoginWindow.mxml）38行目～53行目
権限チェックに失敗したときに実行されるイベントリスナです。
サーバへのネットワークレベルでの接続ができなかったときと、認証に失敗したときにエラーメッセージを表示しています。
- （LoginWindow.mxml）58行目～67行目
購読状態が開始されたことでログイン成功と判断し、ログイン後処理をしています。
メインウィンドウから渡された関数を呼び出し、不要になったイベントリスナの登録を解除してログインウィンドウを閉じています。
- （LoginWindow.mxml）69行目～80行目
認証には成功したものの権限チェックに失敗したときに、エラーメッセージを表示して認証を解除しています。
▼メッセージ送受信（サーバ - クライアント）
こちらのみサーバサイドで実行されるJavaプログラムです。
クライアントが接続または切断したときに実行される処理を記述しています。
- （ShareBoardBootstrapService.java）23行目～26行目
サーバ起動時に呼ばれるメソッドです。
クライアントの接続または切断を監視するイベントリスナを登録しています。
- （ShareBoardBootstrapService.java）38行目～91行目
イベントリスナのクラスです。接続または切断に応じたメソッドが実行されます。
- （ShareBoardBootstrapService.java）42行目～58行目
クライアントが接続したときに実行されるメソッドです。
接続したクライアントに線色を割り当てるメッセージを送信する処理と、他のクライアントに新しいクライアントが接続したことを知らせるメッセージを送信する処理をしています。
このメソッドが実行されるのはクライアントの接続完了と同時のため、状況によって線色の割り当てメッセージが届かない場合がありました。
それを防ぐために、間隔を開けて送信する別スレッドを起動しています。
- （ShareBoardBootstrapService.java）93行目～118行目
線色割り当てメッセージを実際に送信しているクラスです。
- （ShareBoardBootstrapService.java）63行目～74行目
他のクライアントに、特定のクライアントが切断したことを知らせるメッセージを送信しています。
