SHOEISHA iD

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

連載記事

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

翔泳社では、「独習」「徹底入門」「スラスラわかる」「絵で見てわかる」「一年生」などの人気シリーズをはじめ、言語や開発手法、最新技術を解説した書籍を多数手がけています。プロジェクトマネジメントやチームビルティングといった管理職向けの書籍も豊富です。

ITエンジニアとしてのスキルアップ・リスキリングに、ぜひお役立てください。

書籍に関する記事を見る

'); googletag.cmd.push(function() { googletag.pubads().addEventListener('slotRenderEnded', function(e) { var ad_id = e.slot.getSlotElementId(); if (ad_id == 'div-gpt-ad-1659428980688-0') { var ad = $('#'+ad_id).find('iframe'); if ($(ad).width() == 728) { var ww = $(window).width(); ww = ww*0.90; var style = document.createElement("style"); document.head.appendChild( style ); var sheet = style.sheet; sheet.insertRule( "#div-gpt-ad-1659428980688-0 iframe {-moz-transform: scale("+ww/728+","+ww/728+");-moz-transform-origin: 0 0;-webkit-transform: scale("+ww/728+","+ww/728+");-webkit-transform-origin: 0 0;-o-transform: scale("+ww/728+","+ww/728+");-o-transform-origin: 0 0;-ms-transform: scale("+ww/728+","+ww/728+");-ms-transform-origin: 0 0;}", 0 ); sheet.insertRule( "#div-gpt-ad-1659428980688-0 div{ height:"+(90*ww/728)+"px;width:"+728+"px;}", 0 ); } else { if ($(window).width() < 340) { var ww = $(window).width(); ww = ww*0.875; var style = document.createElement("style"); document.head.appendChild( style ); var sheet = style.sheet; sheet.insertRule( "#div-gpt-ad-1659428980688-0 iframe {-moz-transform: scale("+ww/320+","+ww/320+");-moz-transform-origin: 0 0;-webkit-transform: scale("+ww/320+","+ww/320+");-webkit-transform-origin: 0 0;-o-transform: scale("+ww/320+","+ww/320+");-o-transform-origin: 0 0;-ms-transform: scale("+ww/320+","+ww/320+");-ms-transform-origin: 0 0;}", 0 ); sheet.insertRule( "#div-gpt-ad-1659428980688-0 div{ height:"+(180*ww/320)+"px;width:"+320+"px;}", 0 ); } } } }); }); } else { document.write('
'); document.write('
'); }
最新ブラウザ「Internet Explorer10」と「HTML5」のAPI紹介(AD)

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

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

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

 本連載は、「Developers Summit 2012」(デブサミ2012)において、2月16日に行われた日本マイクロソフト株式会社 春日井 良隆氏によるセッション「次期Internet Explorer、IE10とHTML5 API」(セッション資料はこちら)をもとに、Internet Explorer 10の新機能やHTML5 APIとの関連について、3回に分けて特集します。第3回目の今回は、Node.jsとSocket.IOを使用してリアルタイムアプリを作成してみます。

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

はじめに

 Internet Explorer 10(以下、IE10)では、HTML5や関連APIの実装が大きく進みますが、中でもWebSocketに対応することはアプリケーション開発者にとって非常に重要です。

 WebSocketは、HTTPリクエストで確立した接続を「繋ぎっぱなし」にすることで、サーバとクライアントの双方向で効率的な通信を実現する技術です。WebSocketは新しい通信プロトコルです(RFC)が、HTTPと同じポート番号を使用するためファイアウォールを越えやすいのと、JavaScript APIに関する仕様もあらかじめ用意されており、Webアプリケーションとの親和性が非常に高いのも特徴です。

 WebSocketは、IE10だけではなくGoogle Chrome、Firefox、Safariと言ったブラウザでもサポートされています(Operaでは、デフォルトで無効にされていますが、実装は提供されています)。

 ここでは、Developers Summit 2012の「次期Internet Explorer、IE10とHTML5 API」というセッションで使用したWebSocketのサンプルを題材に、WebSocketの可能性について知っていただくことを主眼としています。

 このデモンストレーションのソースコードは、こちらからダウンロードすることができます。

 このサンプルでは、WebSocketのAPIを直接使用するのではなく、Node.jsとSocket.IOを使用して実装しました。Node.jsは最近人気が急上昇しているプラットフォームで、JavaScriptを使用してサーバやスタンドアローンのプログラムを作成することのできる環境です。Socket.IOはNode.jsの上で動作するフレームワークで、WebSocketプロトコルの実装と使いやすいAPIを提供してくれます。

 また、このサンプルはWindows Azure上でホスティングされています。Windows Azureは昨年からNode.jsアプリケーションを実行できるようになりました。

 Node.jsとSocket.IOを使ってこのサンプルの実装を行った結果、そのパフォーマンスの高さと開発生産性に驚きました。こうした、2つの意味での「速さ」についても、この記事から伝われば幸いです。

次のページ
デモの説明

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

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

もっと読む

この記事の著者

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

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

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

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

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

この記事をシェア

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

おすすめ

アクセスランキング

  1. 1
    オープンソーステキストエディタ「Emacs 30.1」リリース NEW
  2. 2
    C++からRustに移行した「Fish Shell 4.0」、正式リリース NEW
  3. 3
    「オブザーバー・パターン」 ~マンガでプログラミング用語解説
  4. 4
    【超時短テクニカルライティング】生成AIを活用しながら文章を見直して、よりわかりやすい文章にしよう
  5. 5
    未経験からエンジニア転職後の年収は増額傾向にあり、アクサスが「エンジニア×転職後の年収」を調査 NEW
  1. 6
    C# 13の新機能を理解する――暗黙的なインデックスアクセスとallows ref struct
  2. 7
    ITエンジニアの技術力で事業に貢献! 「アーキテクチャ・設計」に関する講演スライドまとめ【デブサミ2025】
  3. 8
    さくらインターネット、キヤノンITソリューションズと開発した暗号化消去対応フォーム「Cipher-X」の提供を開始 NEW
  4. 9
    ソフトウェアエンジニアの業務効率化を支援する「Kurogo」、フルリニューアルでコード検索機能とWeb情報収集機能が追加
  5. 10
    ゲーム業界で働くプログラマ・エンジニア、8割超が現在の職場のスキル評価に満足

アクセスランキング

  1. 1
    オープンソーステキストエディタ「Emacs 30.1」リリース NEW
  2. 2
    C++からRustに移行した「Fish Shell 4.0」、正式リリース NEW
  3. 3
    「オブザーバー・パターン」 ~マンガでプログラミング用語解説
  4. 4
    【超時短テクニカルライティング】生成AIを活用しながら文章を見直して、よりわかりやすい文章にしよう
  5. 5
    未経験からエンジニア転職後の年収は増額傾向にあり、アクサスが「エンジニア×転職後の年収」を調査 NEW
  6. 6
    C# 13の新機能を理解する――暗黙的なインデックスアクセスとallows ref struct
  7. 7
    ITエンジニアの技術力で事業に貢献! 「アーキテクチャ・設計」に関する講演スライドまとめ【デブサミ2025】
  8. 8
    さくらインターネット、キヤノンITソリューションズと開発した暗号化消去対応フォーム「Cipher-X」の提供を開始 NEW
  9. 9
    ソフトウェアエンジニアの業務効率化を支援する「Kurogo」、フルリニューアルでコード検索機能とWeb情報収集機能が追加
  10. 10
    ゲーム業界で働くプログラマ・エンジニア、8割超が現在の職場のスキル評価に満足
  1. 1
    ITエンジニア本大賞2025、技術書部門とビジネス書部門の大賞が決定!
  2. 2
    「オブザーバー・パターン」 ~マンガでプログラミング用語解説
  3. 3
    C# 13の新機能を理解する――暗黙的なインデックスアクセスとallows ref struct
  4. 4
    マイクロソフト、VSCodeの新機能「Copilot Next Edit Suggestions」のプレビュー版公開
  5. 5
    3/5まで書籍全文が無料公開 『Pythonで動かして学ぶ!Kaggleデータ分析入門』
  6. 6
    AIや統計の数式を解説する美少女VTuber「AIcia Solid Project」生みの親が語る、継続できるアウトプット活動とは?
  7. 7
    Linuxディストリビューション「EndeavourOS Mercury」が一般提供開始
  8. 8
    ITエンジニア本大賞2025のプレゼン大会をレポート、最終決戦に臨んだ本に込められた想いとは
  9. 9
    開発者のOSS活動が会社から評価される世の中にしたい──日立製作所が専門組織設立に込めた情熱
  10. 10
    GitHub、あらゆるエディタやIDEとGitHub Copilotとの統合を可能にする「Copilot Language Server SDK」を一般公開

イベント

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

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

メールバックナンバー

アクセスランキング

  1. 1
    オープンソーステキストエディタ「Emacs 30.1」リリース NEW
  2. 2
    C++からRustに移行した「Fish Shell 4.0」、正式リリース NEW
  3. 3
    「オブザーバー・パターン」 ~マンガでプログラミング用語解説
  4. 4
    【超時短テクニカルライティング】生成AIを活用しながら文章を見直して、よりわかりやすい文章にしよう
  5. 5
    未経験からエンジニア転職後の年収は増額傾向にあり、アクサスが「エンジニア×転職後の年収」を調査 NEW
  1. 6
    C# 13の新機能を理解する――暗黙的なインデックスアクセスとallows ref struct
  2. 7
    ITエンジニアの技術力で事業に貢献! 「アーキテクチャ・設計」に関する講演スライドまとめ【デブサミ2025】
  3. 8
    さくらインターネット、キヤノンITソリューションズと開発した暗号化消去対応フォーム「Cipher-X」の提供を開始 NEW
  4. 9
    ソフトウェアエンジニアの業務効率化を支援する「Kurogo」、フルリニューアルでコード検索機能とWeb情報収集機能が追加
  5. 10
    ゲーム業界で働くプログラマ・エンジニア、8割超が現在の職場のスキル評価に満足

アクセスランキング

  1. 1
    オープンソーステキストエディタ「Emacs 30.1」リリース NEW
  2. 2
    C++からRustに移行した「Fish Shell 4.0」、正式リリース NEW
  3. 3
    「オブザーバー・パターン」 ~マンガでプログラミング用語解説
  4. 4
    【超時短テクニカルライティング】生成AIを活用しながら文章を見直して、よりわかりやすい文章にしよう
  5. 5
    未経験からエンジニア転職後の年収は増額傾向にあり、アクサスが「エンジニア×転職後の年収」を調査 NEW
  6. 6
    C# 13の新機能を理解する――暗黙的なインデックスアクセスとallows ref struct
  7. 7
    ITエンジニアの技術力で事業に貢献! 「アーキテクチャ・設計」に関する講演スライドまとめ【デブサミ2025】
  8. 8
    さくらインターネット、キヤノンITソリューションズと開発した暗号化消去対応フォーム「Cipher-X」の提供を開始 NEW
  9. 9
    ソフトウェアエンジニアの業務効率化を支援する「Kurogo」、フルリニューアルでコード検索機能とWeb情報収集機能が追加
  10. 10
    ゲーム業界で働くプログラマ・エンジニア、8割超が現在の職場のスキル評価に満足
  1. 1
    ITエンジニア本大賞2025、技術書部門とビジネス書部門の大賞が決定!
  2. 2
    「オブザーバー・パターン」 ~マンガでプログラミング用語解説
  3. 3
    C# 13の新機能を理解する――暗黙的なインデックスアクセスとallows ref struct
  4. 4
    マイクロソフト、VSCodeの新機能「Copilot Next Edit Suggestions」のプレビュー版公開
  5. 5
    3/5まで書籍全文が無料公開 『Pythonで動かして学ぶ!Kaggleデータ分析入門』
  6. 6
    AIや統計の数式を解説する美少女VTuber「AIcia Solid Project」生みの親が語る、継続できるアウトプット活動とは?
  7. 7
    Linuxディストリビューション「EndeavourOS Mercury」が一般提供開始
  8. 8
    ITエンジニア本大賞2025のプレゼン大会をレポート、最終決戦に臨んだ本に込められた想いとは
  9. 9
    開発者のOSS活動が会社から評価される世の中にしたい──日立製作所が専門組織設立に込めた情熱
  10. 10
    GitHub、あらゆるエディタやIDEとGitHub Copilotとの統合を可能にする「Copilot Language Server SDK」を一般公開