SHOEISHA iD

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

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

Adobe Developer Connection(AD)

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

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

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

機能について

 デモアプリケーションではクライアントとして、Flash Playerで動作するFlex版とAIRラインタイムで動作するAIR版の2種類を用意します。これによりFlex版、AIR版それぞれのメリットとともに、わずかな変更で移植が可能なことを確認していただけると思います。冒頭でも書いたようにメインとしてメッセージングを使用しますが、その他にも確認できる機能がありますので、まとめてご紹介しましょう。

  • クライアント - クライアント通信(Flex)
  •  他クライアントとメッセージ送受信をします。描き込みや画像などの配信に使用しています。

  • サーバ - クライアント通信(Java)
  •  サーバからすべてのクライアントまたは特定のクライアントへメッセージを送信します。クライアントのログイン状況通知、線色の自動割り当てに使用しています。

  • 画像貼り付け(AIR版のみ)
  •  AIRのファイルシステムAPIを使用して、ローカルにある画像ファイルをボード上に貼り付けます。この作業はドラッグ&ドロップで操作できるようにしています。

  • 画像配信(Flex版・AIR版)
  •  オブジェクトをそのままやりとりできることを利用して、AIRクライアントで貼り付けられた画像を他のクライアントにも貼り付けます。

  • スクリーンショット(AIR版のみ)
  •  任意のタイミングでボードのスクリーンショットを撮り、ローカルファイルとして保存します。こちらもAIRのファイルシステムAPIを使用しています。

  • アクセス制限(Flex版・AIR版)
  •  アプリケーションサーバベース(ここではTomcat)のアクセス制限をします。他のWebアプリケーションとユーザ管理が共有できることを確認していただけると思います。

デモアプリケーションについて

 この記事で使用するデモアプリケーションをご紹介します。これはAIR版のスクリーンショットですが、Flex版はAIR版のサブセットとなっているためこちらを元にして説明をします。

 また、各項目の番号はスクリーンショットの各番号に対応しています。

  1. ホワイトボード
  2.  このアプリケーションのメインとなるパーツです。ボード上でマウスをドラッグすることにより、線が描けます。このときサーバに接続していれば、ドラッグを終えたタイミングで描き込みをBlazeDSのメッセージングを使用して他クライアントへ送信します。

     同様に、他クライアントから受信した描き込みを、随時ミラーリングします。またAIR版のみの機能として、画像ファイル(拡張子がjpg、png、gifのもの)をドラッグして貼り付けることができます。これも描き込みと同じように、他クライアントへ送信されます。

  3. 自分のログ
  4.  自クライアントに関するイベントを表示します。

  5. 全体のログ
  6.  他クライアントに関するイベントを表示します。

  7. イメージ
  8.  Save(AIR版のみ):ホワイトボードのイメージをJPEGファイルとして保存します。出力先はデスクトップ上です。

     Clear:ホワイトボードに貼り付けられている画像を消去します。これが影響するのは自クライアントのみで、サーバに接続していても他クライアントに影響を及ぼすことはありません。

  9. 描き込み
  10.  カラー:自クライアントの線色を表します。サーバ接続時に他クライアントと重複しないよう自動で割り当てられ、切断時には黒に設定されます。

     Clear:ホワイトボードに描かれている描き込みを消去します。イメージと同様これが影響するのは自クライアントのみで、サーバに接続していても他クライアントに影響を及ぼしません。

  11. 接続先ホスト
  12.  接続するホストの名前またはIPアドレスを入力します。内部的にはURLでの指定となりますが、接続するのはこのデモアプリケーションで作成するサーバのみを前提としているため、このような仕様にしています。

  13. 接続・切断
  14.  接続するボードをメニューから選択して、接続と切断をおこないます。

  15. ユーザ名
  16.  サーバに接続していれば、ログインしたユーザ名が表示されます。

次のページ
デモアプリケーションを試す

修正履歴

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

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

もっと読む

この記事の著者

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

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

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

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

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

この記事をシェア

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

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング