SHOEISHA iD

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

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

Adobe Developer Connection(AD)

BlazeDSでつくる共有ホワイトボード

BlazeDSのメッセージングを使用するデモアプリケーションを作成

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

機能説明

 ここではデモアプリケーションのソースを、機能ごとに説明します。行番号を表記してありますので、実際のソースと照らし合わせてご確認ください。

用語説明

イベント

 プログラムの中で、何らかの事由によって起こるものをイベントと呼びます。たとえば、ユーザがマウスをクリックした、サーバからメッセージが届いた、ファイルの読み込みが完了したなどがそれにあたります。

イベントリスナ

 イベントが発生したときにシステムから実行される関数をこう呼びます。

フレーム

 Flashでは、アニメーションと同じように複数の静止画を連ねることによって動きを表しています。この1枚の静止画のことをフレームと呼びます。

ログイン(この記事固有)

 接続を完了するためにはユーザが本人かを判断する認証処理と、認証されたユーザに権限があるかを判断する権限チェック処理の2つが必要です。認証処理にloginというメソッドを使用していますが、記事中では認証と権限チェックをまとめて「ログイン」と呼んでいます。

メッセージ送受信(クライアント - クライアント)

 メッセージエージェントにはProducerとConsumerがあり、それぞれ送信と受信を担当しています。メッセージを送信する際にはクライアント側でタイミングを計ることができますが、受信の場合はいつサーバからメッセージが届くかを把握できないため、待機している必要があります。このため、Producerがメッセージを送信するにはsendを、Consumerがメッセージを受信するにはsubscribeメソッドを使用します。

 Consumer#subscribe()を呼ぶことにより、Consumerはメッセージ受信待機状態になります。以下メソッド名に習ってこれを購読状態と表記します。そして、購読状態にあるConsumerがメッセージを受信するとイベントが起こります。メッセージ受信時の処理はこのイベントが起きたときに実行されるイベントリスナを登録し、その中でおこないます。

処理概要
  1. メッセージエージェントが使用するチャネルを作成し、ProducerとConsumerそれぞれに設定する。
  2. クライアントで指定された接続先を、ProducerとConsumerに設定する。
  3. ログインウィンドウで入力されたユーザ名とパスワードを使ってログインする。
  4. Consumerを購読状態にする
  5. Producerでメッセージを送信する。
  6. Consumerでメッセージを受信する。
  7. 5~6を繰り返す。
  8. Consumerの購読状態を解除する。
  9. ログアウトする。
※注意

 ログイン・ログアウトについては別途説明をするため、ここでは言及しません。

(ShareBoardAIR.mxml)274~288行目

 チャネルセットと接続先をProducerとConsumerにそれぞれ設定し、ログインウィンドウを表示しています。このとき、ログインウィンドウ内でもメッセージエージェントが使えるようにProducerとConsumerを渡しています。

(ShareBoardAIR.mxml)122~135行目

 ストリーミングとポーリングの2種類のチャネルをまとめたチャネルセットをProducerとConsumerの両方に設定しています。いずれのチャネルが実際に使用されるかは、ネットワークのコンディションによります。

(LoginWindow.mxml)30行目

 購読を開始しています。こちらの処理はログイン・ログアウトで説明します。

(ShareBoardAIR.mxml)167~187行目

 76行目でメッセージ受信時のイベントリスナとして登録しているため、ここで受信したメッセージを処理します。ヘッダの「operation」に設定されている操作により、受信した画像の貼り付け、他クライアント描き込みの反映、ログの表示などをおこなっています。

(ShareBoardAIR.mxml)114,222行目

 ユーザの描き込みや読み込んだ画像をサーバへ送信しています。

ユーザの描き込みを表示する

 マウスカーソルの移動に追従して線を引くことで、ボードに描き込みを反映しています。

処理概要
  1. マウスボタンが押下されたタイミングで描写とマウスカーソル座標の記録をはじめる。
  2. ボタンが押されている間中それを継続する。
  3. ボタンが放されたタイミングで、サーバに接続していれば座標の情報を送信する。
(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関数です。カーソルの座標を記録し続けているイベントリスナの登録を解除し、記録した座標情報をサーバへ送信しています。

他クライアントの描き込みを表示する

 メッセージとして受信した、他クライアントの描き込みをボードに反映します。

処理概要
  1. 受信した他クライアントの描き込みをキューにためる。
  2. フレームごとに実行されるイベントリスナの中で、キューにたまっている描き込みをボードに反映する。
(ShareBoardAIR.mxml)52行目

 フレームごとに実行されるイベントリスナを登録しています。

(ShareBoardAIR.mxml)177行目

 受信した描き込みをキューに追加しています。描き込みはフレームごとのマウスカーソル座標の配列として持っています。また、配列の先頭は線色と想定して扱っています。

(ShareBoardAIR.mxml)237~249行目

 キューにたまっている描き込み情報を座標ごとに取り出し、それに沿ってボードに線を引いています。

次のページ
ドラッグ&ドロップ

修正履歴

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

  • このエントリーをはてなブックマークに追加
Adobe Developer Connection連載記事一覧

もっと読む

この記事の著者

三上 喜之(ミカミ ヨシユキ)

フリーエンジニア。現在持っているWebアプリ関連スキルをRIA方面へ伸ばすため日々奮闘中。

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

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

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

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/4636 2009/12/01 10:17

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング