SHOEISHA iD

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

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

最新ブラウザ「Internet Explorer10」と「HTML5」のAPI紹介(PR)

IE10で動くHTML5アプリ実装例
「Node.jsとSocket.IOを使用したリアルタイムアプリ」

最新ブラウザ「Internet Explorer10」と「HTML5」のAPI情報(3)

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

デモの説明

 今回作成したデモンストレーションは、複数ユーザで同時編集可能な「オンライン黒板」です。

 この黒板の最大の特徴は、複数人で同時編集可能なことです。もちろんその機能の実装にはWebSocket(Socket.IO)を使用しています。

 チョークで書く、黒板消しで消す、と言った操作だけではなく、他のユーザのマウスポインタの位置もリアルタイムに把握することができます。

Canvasを使用したUIの作成

 まず黒板の部分はHTML5 Canvasを利用して実現しています。チョークで書く、黒板消しで消す、マウスポインタの位置を共有するといった機能については、マウス移動のイベントを捕捉して、それぞれの処理に分岐しています。

 その部分のコードを抜粋します。細かいところを省略してしまえば、処理の流れは非常に単純です。

// マウス移動のイベントを捕捉
canvas.mousemove(function(e) {
    // Canvas上での現在のマウス座標を取得
    var curPos = posOnCanvas(e.pageX, e.pageY);
    var currentX = curPos.x;
    var currentY = curPos.y;

    // マウス移動をサーバに送信する
    COMMAND_OPS.mouseMove({...}, true);
    if (!drawing) {
        return;
    }
    // 黒板消しで消す
    if (eracing) {
        COMMAND_OPS.erase({...}, true);
    }
    // チョークで書く
    else {
        COMMAND_OPS.drawLine({...}, true)
    }
    prevX = currentX;
    prevY = currentY;
});

 CanvasのAPIを使用しているコードの例として、黒板に線を書く部分を見てみましょう。線書き出しの開始位置(start)は前回のマウス座標、終了位置(end)は今回のマウス座標となります。

var start = param.start, end = param.end;
// 線のスタイル(色に応じた画像を使用)
ctx.strokeStyle = LINE_PATTERNS[param.color];
ctx.lineWidth = lineWidth; // 線の太さ
ctx.lineJoin = "round"; // 線の結合部分を丸める
ctx.lineCap = "round"; // 線の端を丸める
ctx.beginPath(); // パスの書き出し開始
ctx.moveTo(start.x, start.y); // 開始位置に移動
ctx.lineTo(end.x, end.y); // 終了位置に向けて直線を引く
ctx.stroke(); // パスの書き出し
ctx.closePath(); // パスを閉じる

 ここでは、CanvasのAPIを素直に使用しているだけですので、説明は省きます。

次のページ
WebSocketによる共有

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

  • このエントリーをはてなブックマークに追加
最新ブラウザ「Internet Explorer10」と「HTML5」のAPI紹介連載記事一覧

もっと読む

この記事の著者

白石 俊平(株式会社シーエー・モバイル Web先端技術フェロー)(シライシ シュンペイ(カブシキガイシャシーエー・モバイル ウェブセンタンギジュツフェロー))

現在はシーエー・モバイルにて「日本のWebシーンで最先端の企業にする」というミッションに従事中。その他、html5j.org管理人、Google API Expert (HTML5)、Microsoft IE MVPなどを務める。

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

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

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/6502 2012/04/18 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング