アクセシビリティ
デベロッパーリソース

目次

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

機能について

デモアプリケーションではクライアントとして、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版のサブセットとなっているためこちらを元にして説明をします

AIR版のスクリーンショット

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

  1. ホワイトボード
    このアプリケーションのメインとなるパーツです。
    ボード上でマウスをドラッグすることにより、線が描けます。このときサーバに接続していれば、ドラッグを終えたタイミングで描き込みをBlazeDSのメッセージングを使用して他クライアントへ送信します。
    同様に、他クライアントから受信した描き込みを、随時ミラーリングします。
    またAIR版のみの機能として、画像ファイル(拡張子がjpg,png,gifのもの)をドラッグして貼り付けることができます。これも描き込みと同じように、他クライアントへ送信されます。
  2. 自分のログ
    自クライアントに関するイベントを表示します。
  3. 全体のログ
    他クライアントに関するイベントを表示します。
  4. イメージ
    Save(AIR版のみ):ホワイトボードのイメージをJPEGファイルとして保存します。出力先はデスクトップ上です。
    Clear:ホワイトボードに貼り付けられている画像を消去します。これが影響するのは自クライアントのみで、サーバに接続していても他クライアントに影響を及ぼすことはありません。
  5. 描き込み
    カラー:自クライアントの線色を表します。サーバ接続時に他クライアントと重複しないよう自動で割り当てられ、切断時には黒に設定されます。
    Clear:ホワイトボードに描かれている描き込みを消去します。イメージと同様これが影響するのは自クライアントのみで、サーバに接続していても他クライアントに影響を及ぼしません。
  6. 接続先ホスト
    接続するホストの名前またはIPアドレスを入力します。内部的にはURLでの指定となりますが、接続するのはこのデモアプリケーションで作成するサーバのみを前提としているため、このような仕様にしています。
  7. 接続・切断
    接続するボードをメニューから選択して、接続と切断をおこないます。
  8. ユーザ名
    サーバに接続していれば、ログインしたユーザ名が表示されます。

キャプチャ