無料でLINEやSkypeのようなリアルタイムアプリが簡単に作れるSkyWay：HTML5アプリ作ろうぜ！（10）（1/2 ページ）

　最近はやりのHTML5、JavaScriptライブラリ、CSS3、APIの紹介、またそれらを組み合わせたサンプルアプリケーションの紹介と解説を厳選し執筆していく本連載「HTML5アプリ作ろうぜ！」。今回紹介するのは「SkyWay」です。

PtoP通信のWebRTCをJavaScriptだけで手軽に使える「SkyWay」とは

　SkyWayはLINEやSkype、チャットアプリのようなリアルタイムにデータを送受信できる技術を提供する無料のプラットフォームです。開発元はNTTコミュニケーションズですが、その中核となるJavaScriptライブラリ「PeerJS」はオープンソースでGitHubに公開されています。SkyWayはブラウザー間の直接通信を確立するために必要な仲介サーバーのWeb APIを提供しています。

記事『PeerJS互換のライブラリも提供：WebRTCを手軽に実装、NTT Comが「SkyWay」を無償公開』より引用

　その中核を担うのが「WebRTC」です。WebRTC（Web Real-Time Communication）とは、ブラウザー同士でリアルタイムに映像、音声、データを送受信できる画期的な新技術です（プラグインなしでWebブラウザー間のボイスチャット、ビデオチャット、ファイル共有が可能）。

※WebRTCについて詳しく知りたい方は、記事「HTML5で情報最適化／視覚化＆WebRTCで変わる未来」を参照してください。

WebRTCのアーキテクチャ（記事「HTML5で情報最適化／視覚化＆WebRTCで変わる未来」より引用）

　SkyWayを使うと、サーバーサイドの技術を知らなくても、JavaScriptの開発知識だけでリアルタイムに映像、音声、データを送受信できるWebアプリ開発を可能にします。

SkyWayのサンプルを触ってみよう

　まずは筆者のDEMOサイトで動作を確認しましょう。

　SkyWayの対応ブラウザーは2013年2月の原稿執筆時点でPCはMozilla Firefox 23〜、Google Chrome 26〜、AndroidはGoogle Chrome 29〜、Mozilla Firefox 24〜です。また、スピーカーは音が出ている状態にしましょう。マイクも付いている必要があります。

　URLにアクセスすると下記画面が表示されます。

筆者のDEMOサイト

　「Your ID is ***********」という部分の赤文字ID（数値）が自分のIDです（※IDは電話番号のようなものです）。このID（数値）を通信する相手に教えるか、自分が相手のID（数値）をプッシュして「Call」することで通信が可能になります。

　なお、一人で検証するには、パソコンでGoogle Chromeの最新版を立ち上げ、別ウィンドウでもう一つGoogle Chromeを立ち上げますが、この際「別のユーザー」で立ち上げる必要があります。こうすることで、一人での検証が可能になります。

※Google Chromeのユーザー切り替えはグーグルのヘルプページを参照してください。

　表示したブラウザーごとに「Your ID is ***********」という部分の赤文字ID（数値）が違うので、どちらかで違う方のブラウザーに表示されているIDを打って「Call」します。

　通信すると、下記画面のように「アドレスバーの下」にマイクの「許可」「拒否」が表示されますので、「許可」を選択します。どちらのウィンドウにも出てきますので、それぞれ「許可」にしてください。

　スピーカーで音が出るようにしておいてください。

　着信があると、下記画面のように表示されますので「応答」をクリックします。接続するとマイクで音を拾うので喋ってみてください（音が少し大きい方が会話がつながっているのが分かります）。

　注意点としては、コールには時差があります（10秒程度あったりします）。また、マイクの許可がアドレスバーの下に出ます。許可にしないと検証できません。さらに、iPhoneやiPod touch、iPadなどで閲覧すると、IDが表示されていません。使用不可という意味です。

　なお、下記画面はスマートデバイスで見た場合の表示です。

　SkyWayが対応していないと、「Your ID is ***********」が表示されません。