E-Commerceから Conversational Commerceへ

ここ最近話題になることが多いAIやBotsですが、私の周りではConversational interface、Conversational UXなどという言葉が去年からたびたび使われるようになっているようです。

これはAmazon Alexaなどのデバイスや、Facebook Messengerなどチャットアプリケーションなどの対話型テクノロジーをいかに活用しその使い勝手をよくするか、ということなのですが、必ずしもアプリケーションのUIデザインそのものを述べているわけではなく、既存のサービスを延長することを指していることも多いでしょう。例えば、今まではモバイル上のアプリケーションのみで車を呼べていたUberが、Facebook Messenger のチャットからも車をを呼べるような機能を加えたり、Slack上でTaco BellからタコスをオーダーできるTacoBot、というのもが挙げられます。

Slack Botを書いてみよう

さて、というわけで何かBotを書いてみたいと思いませんか？ここはNode.jsでSlack botを作成する方法を紹介したいと思います。

このチュートリアルでは、ディベロッパー向けのHTTPステータスコードのルックアップができるスラッシュ・コマンドを作ってみます。ここでは私が５年ほど前に何気なく作って、Mashableなどで紹介され思わぬ反響を得てしまったHTTP Status Catsを使ってみます。具体的には、Slack上でユーザが、/httpstatus [code] （例えば /httpstatus 404）と入力すると、そのステータスコードの意味と猫が一緒に表示される、という簡単なbotです。

まず試してみたい方は、HTTP Status Cats command for Slackを自分がアドミン権限のあるのチャットチームにインストールしてみてください。

さて、このチュートリアルは２つのパートに分けられます。

1. スラッシュ・コマンドを書いて、自分のSlackチームにインストールする
2. OAuthを使ってボットをSlack’s App Directoryなどで誰もがインストールできるようにする

とりあえず動くbotを書いてみたい、と思う方は１だけ試してみてで十分ですが、botをみんなにシェアしたい方は２も読んでみてください。

ソースコードと実際のボットのインストールボタンは両方GitHubにあります。では始めましょう！

1 プライベートなスラッシュコマンドボットの作成

ここで作るのは、Slackの公式な用語でいうところのCustom Integrationsというもので、自分のチャットグループ専用のプライベートなbot、もしくはいわゆるAppとして発表する前にドライ・ランを行うことを指します。アカウントを持っていない方はまずサインアップしてから始めましょう。

1.1 スラッシュコマンドの設定

ログインして、my.slack.com/services/new/slash-commandsでコマンドを選びます。ここでは/httpstatusと入力しAdd Slash Command Integrationボタンをクリックして次のステップへ進みます。

Tokenなどの欄がありますが現時点では、(1) Command、 (2) URL、 (3) Method、の３つが必要になります。

(1)には、/httpstatus、(3)には、POST、そして(2)のURLは次のように設定してください。

開発中に使用するURLを取得するにはngrokを使ってみましょう。いろいろなツールがあるのですが、これは自分のローカルホストをパブリックURLとしてトンネルできるというとても便利なツールなので私のイチオシです。開発途中にデプロイすることなく、Webhookが手軽に使えます。自分のローカルホスト、たとえば http://localhost:3000/ をつかったままOAuthのテストもできるのです。（注：よく聞かれるのですが、ngrokはあくまでも開発ツールですのでプロダクションには適していません。デプロイメントに関しては最後の章を読んでください）

https://ngrok.com/から自分のマシンにngrokをインストールしたら、ターミナルで自分の使いたいポート番号（このチュートリアルでは 3000）を設定します。

$ ngrok http 3000

すると下のスクリーンショットのように、Forwardingアドレスが取得できるので、そのURL（例えばhttps://71f03962.ngrok.io/)をSlackセッティングの、上のスクリーンショットで示された(2)の欄で使います。

すべての設定が終えたらSaveボタンを押します。”Your settings have been saved!”のメッセージが画面上部に現れるのを確認してください。

1.2 Node.js を使ってレスポンスを書く

基本的にbotは、ユーザがSlackインターフェイス上でコマンドを実行した際HTTP POST（または設定次第では GET)によって指定先のURLにメッセージが届け、プログラムでその応答をユーザに返す、という作業になります。

たとえばそのユーザが/httpstatus 302というコマンドを送信した場合、指定URLに送られるデータは次のようになります。

command=/httpstatus
text=302
response_url=https://hooks.slack.com/commands/1234/5678
…

Botは、これに対する応答をユーザに返します。この場合はユーザが尋ねているステータス302の定義とこの猫を返しましょう。

ではそのコードを書いてみましょう。

まず、Express.jsとbody-parserをインストールします。

$ npm install express body-parser --save

index.jsで、expressのインスタンスを作り、先ほどngrokで設定したポート番号、3000でサーバを始動します。

'use strict';
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

const server = app.listen(3000, () => { 
console.log('Express server listening on port %d in %s mode', server.address().port, app.settings.env);});

次はHTTP POSTルートメソッドで、コマンドを扱います。

app.post('/', (req, res) => {
 let text = req.body.text;
 // ここでbotを書きます
});

ここでtextの値を取得します。HTTP Status botの場合、/httpstatus コマンドの値、例えば”404″が textの値になります。同時に、ユーザが数字以外を入力した際にエラーメッセージを送るなどのエラーチェックもしておきましょう。

if(! /^\d+$/.test(q.text)) { // not a digit
 res.send('Error: enter a valid status code, such as 200');   
 return;
}

このエラーは、ユーザだけにプライベートに送信されるメッセージでチャットそのものには表示されません。

エラーがない場合は、コマンドに対する応答をJSONとしてレスポンスします。

let data = {
 response_type: 'in_channel', 
 text: '302: Found',
 attachments:[{
   image_url: 'https://http.cat/302.jpg'
 }]
};
res.json(data);

response_typeをin_channelとすることで応答はチャットメンバー全員に見えるように送信されます。デフォルトはその逆のephemeralで、コマンドを送ったユーザのみに表示されます。

このコマンドと応答は次のようになります。

このサンプルコードでは、応答をわかりやすくハードコードで示してありますが、実際はストリングなどは別のファイルに定義しています。下のスクリーンショットのように存在しないHTTPステータスに対してのエラーメッセージも定義しましょう。実際のコードはソースコードを参照してください。

ディスプレイはボーダー色などのカスタマイズが可能です。詳しくはSlackドキュメンテーションのBasic message formattingを参照してください。

次のステップでは、このボットを自分のチャットグループ以外に配布するために必要な認証とコードのデプロイについてです。

2. Slack Botのディストリビューション

この「Custom Integration」をインストール可能な「App」にするには、コードのデプロイをして他のチャットにもインストールできるようにせねばならないのですが、そのためにはあといつくかのステップが必要になります。

2.1 Appセットアップ

まず、自分のAppを申請し、クライアントIDやシークレットなどのクレデンシャルを取得します。https://api.slack.com/appsでCreate an Appボタンをクリックしてください。

このフォームにはいくつもの欄があり少しわかりづらいのですが、スラッシュコマンドのbotには次の3つが最低必要になります。

• Basic Information (at https://api.slack.com/apps/YOUR_APP_ID/general)
• OAuth & Permissions (at …/YOUR_APP_ID/oauth)
• Slash Commands (at …/YOUR_APP_ID/slash-commands)

2.1.1 API Keyを.envファイルに保管

ここで取得したClient ID、Client secret、Verification tokenは .env ファイルに別に保管してbotのメインのコードから切り離すことを推奨します。gitを使う場合は、このファイルを .gitignore ファイルに付け加えるのを忘れずに。

SLACK_CLIENT_ID=12345XXXXX.09876XXXXX 
SLACK_CLIENT_SECRET=535d2f9....
SLACK_VERIFICATION_TOKEN=42P829U...

2.1.2 Foremanを使う

他にも手段はありますが、Herokuにデプロイするために私はNode Foremanを使っています。Foremanを使うには、npmを使ってglobalフラッグでインストールしてください。

$ npm install -g foreman

アプリケーションの Root に .procfile を作成し、この一行を加えます。

web: node index.js

index.jsを実行するには node index.jsの代わりに次のコマンドを使います。

$ nf start

2.2 ユーザの認証

Slackは認証にはOAuthを使っています。実際には自分でOAuthを実装しなくても、Slack ボタンを使えば簡単に認証できるようになっています。

公式のドキュメンテーションのダイアグラムに手を加えて、流れをわかりやすくするためにGIFアニメーションにしてみました。

ここでの実際のフローは次のようになります。

1. ウェブページを作成し、認証ボタンを置く。ユーザがボタンをクリックするとパラメータがSlackに送信される(ユーザは認証ページにリダイレクトされる)。
2. Node appには、SlackからGETで10分だけ有効な仮のコードが送られる。
3. アクセストークンを得るために oauth.access API使い認証コードをPOSTする。Node app側から`200 OK`を受け取り次第、このプロセスが完了。
4. オプションとして、このトークンを使ってSlackの他のAPIにもアクセス。例えば、認証後、ユーザをhttps://team-name.slack.comにリダイレクトするなど。/

2.2.1 Slack ボタンの設定

Slackボタンを使うには、まずウェブページを作成してください。私の場合はこのNode Appとは切り離した別のHTMLページを作成し、GitHub Pagesにホストしました。

次にボタンを設定しましょう。 https://api.slack.com/docs/slack-button に行き、Add the Slack button までスクロールして下さい。

このボタン作成ツールのCommendsのチェックボックスをチェックします。

上で示したフローの４を実行したい場合は、このGETパラメータを下のように変更します。

<a href="https://slack.com/oauth/authorize?scope=commands+team%3Aread&client_id=your_client_id">

ここでscopeに着目してみてください。commandsの他にteam:read(コロンは%3Aとエスケープ)が必要になります。詳しくはOAuth scopes on the Slack API docsで。

2.2.2 トークンの発行

さて、Nodeコードに戻りましょう。仮のコード(req.query.code)をGETで取得するためにまたExpress.jsを使います。

何でもよいのですがここでは/slack routeを使いましょう。この場合ngrokのURL は http://71f03962.ngrok.io/slack のようになります。Slack App設定ページ（https://api.slack.com/apps/YOUR_APP_ID/oauth）の、OAuth & Permissions セクションにある、Redirect URLの欄にはこのURLを設定してください。

仮のcodeを取得されたら、それを自分のAPIクレデンシャルとともにPOSTで送って、トークンと交換します。POSTするためにここではNode.jsのHTTPリクエストクライアントである、Requestを使いましょう。

$ npm install request --save

仮のcodeを取得し、それをtokenと交換するコードが下になります。

const request = require('request');

app.get('/slack', function(req, res){
 let data = {form: {
   client_id: process.env.SLACK_CLIENT_ID,
   client_secret: process.env.SLACK_CLIENT_SECRET,
   code: req.query.code
 }};

 request.post('https://slack.com/api/oauth.access', data, function (error, response, body) {
   if (!error && response.statusCode == 200) {
     // おしまい！
     // ここからはオプションでチーム情報を取得
     let token = JSON.parse(body).access_token; // Auth token
   } ...

2.2.3 オプショナル： ユーザをチームURLにダイレクトする

認証が済んだらそこで終えてもよいのですが、この画面でユーザを置き去りにするのはあまりよいUXとはいえないので、チームページにリダイレクトしてみましょう。

リダイレクトURLのサブドメインとなるチーム名はteam.infoAPIで取得できます。

このAPIを使うにはトークンが必要なので前述のコードでの、トークンにアクセスする箇所に下のコードを追加します。

...
request.post('https://slack.com/api/team.info', {form: {token: token}}, function (error, response, body) {
 if (!error && response.statusCode == 200) {
   let team = JSON.parse(body).team.domain;
   res.redirect('http://' +team+ '.slack.com');
 }
});

これで API からチーム名(team.domain)が返されました。最終的にこれを使ってチームURLにリダイレクトしてできあがり！

このチュートリアルでは簡素化したコードを使いましたが、全ソースコードはGitHubで見てみてください。

2.3 サーバにデプロイする

最後にデプロイしておしまいです。APIクレデンシャルのenv vars設定を忘れないように！私はHerokuを使っているのですが、Herokuの場合、heroku configコマンドを使います。例えば、heroku config:set API_KEY=123456というふうに設定してください。

Slackの設定で画面で指定したngrok URLを、デプロイ先のURLに変更するのもお忘れなく。

さて、プロセスが少し面倒ですが、コード自体は簡単だったと思います。もし何か面白いボットを作った際にはぜひ教えてくださいね！

Electron

Electronとは、デスクトップクライアントを作るためのフレームワークです。クロスプラットフォームで動作することをサポートしているため、Electronで作ったアプリケーションはMac、Windows、Linuxの環境でも動作します。Atomと呼ばれる GitHub社製のエディタがあります。 ElectronはAtomを作る際にフレームワークとして作られました。以前はAtomShellと呼ばれていましたが、Electronとして名前を変更し、2016年にはversion 1.0がリリースされるまでに成長しました。

ElectronはJavaScript / HTML / CSSを使ってクライアントアプリケーションを作成します。中のアーキテクチャはChromiumとNode.jsで作られており、Web開発の技術を使ってデスクトップアプリケーションを構築することが可能です。

ElectronはCheng Zhao氏 (以降zcbenz)が開発したフレームワークですが、zcbenz氏は実際Electronの開発前にNW.js(旧 NodeWebkit) と呼ばれるフレームワークのコントリビューターでした。ElectronはNW.jsと非常によく似たフレームワークですが、いくつか技術的に異なるポイントが有ります。決定的な違いは、Chromiumの組み込み方の違いです。ElectronはライブラリとしてChromiumを組み込んでいるのに対して、NW.jsはChromiumをforkしたプロジェクトを使っています。Chromiumは非常に進化が早いプロダクトなので、forkして持つよりもアップデートを考えると効率的です。

とはいえ、NW.jsとElectronの技術的な部分以外は違いはそこまでありません。Atom開発当初にNW.jsが多少不安定だったために新しいプロダクトとして立ち上げたという側面もあるそうです。詳しくはAtomShellとNodeWebkitの違いに詳しく記載されています。

Electronの特徴

いくつか特徴があるので紹介します。

Electronのランタイム

Electron そのものはただのランタイムライブラリです、Node.jsにおけるnodeコマンドのようなもので、electronコマンドでエントリポイントとなるJavaScriptを実行します。

electronコマンドは公式サイトからダウンロードすることもできますが、Node.jsのパッケージモジュールである、npmコマンドを使ってインストールすることも可能です。

$ npm install electron -g

※ 以前までは npm install electron-prebuiltからインストールする必要がありましたが、最近はnpm install electronでinstallできるようになりました。

これでelectronコマンドが有効になるので、そのコマンドを使ってデスクトップアプリケーションを起動させます。アプリケーションを実際に書くのは後述します。

Electron / Browser間でモジュールを共有

Electronアプリを構築すると、シームレスにブラウザからNode.jsのコードを呼ぶことが可能です。そのため、下記のようなコードを実行することもできます。　

// script tag から
<script>
// 自分のローカルファイル読みこんだり
const fs = require(‘fs’);
fs.readFile(‘foo/bar/baz’, (err, data) => {
  console.log(data);
});
</script>

<script>
// 外部プロセスを呼んだり
const cp = require(‘child_process’);
cp.exec(‘ls -l’, (err, stdout) => {
  console.log(stdout);
});
</script>

ただし、この方法を使った場合、DOM-based XSSが発生すると、任意のコマンドだったり、ファイルが操作できてしまう結果になるため、プロダクションでElectronを活用する場合は注意が必要です。

参考資料: Electronの倒し方

Hello World

一旦Electronを起動してみましょう。Electronを動かすだけなら Node.jsはbuilt-inされているので不要ですが、npmがある方が便利なのでNode.jsをインストールしておきましょう。Node.jsは 公式サイトからダウンロードできます。Macであれば、brewでもインストール可能です。

Node.jsがインストールされたらElectronをインストールしてみましょう。下記の通りです。

$ npm install electron -g

適当なフォルダを作成し、package.json、main.js、index.htmlを作成します。 package.jsonは下記の通りに作成します。

{
  "name": "electron-intro",
  "version": "0.0.1",
  "main": "main.js"
}

main.jsを記述します。

const {app, BrowserWindow} = require('electron');

// window objectがGCされないようにするために、globalに定義する
let win;

function createWindow () {
  win = new BrowserWindow({width: 800, height: 600});

  win.loadURL(`file://${__dirname}/index.html`);

  win.on('closed', () => {
    // windowがクローズされたら null にして削除
    win = null;
  });
}

app.on('ready', createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (win === null) {
    createWindow();
  }
});

最後に表示するためのindex.htmlを記述します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello Electron!</title>
  </head>
  <body>
    <h1>Hello Electron!</h1>
    Node version: <script>document.write(process.versions.node)</script>,
    Chrome version: <script>document.write(process.versions.chrome)</script>,
    Electron version: <script>document.write(process.versions.electron)</script>.
  </body>
</html>

これだけでHello Worldは一旦完成です。 下記のようなファイル構成になっていることを確認してください。

.
├── index.html
├── main.js
└── package.json

Electronを起動させてみましょう。

$ electron .

下記のようなウィンドウが出たら完成です。

Hello, World実行結果

PhotonKitを使ってミニマムブラウザを作る

これだけだと味気ないので、PhotonKitを使ってミニマムブラウザを作ってみましょう。ブラウザを作ると言っても、 Chromiumを内包しているElectronであれば、Chromiumの機能を借りてくるだけなのでそこまで難しくはないです。

PhotonKitはCSSフレームワークの1つです。BootstrapやMaterial Design Liteのようなclass setを持っています。Mac のクライアントのようなアプリケーションを作るためのデザインテンプレートになっています。

Photon

まずはpackage.jsonを作りましょう。

{
  "name": "electron-mini-browser",
  "version": "0.0.1",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "electron index.js"
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "dependencies": {
    "electron": "^1.3.5"
  }
}

npm startでElectronを起動できるようにしておくことと、dependenciesにelectronをインストールしておきましょう。下記の方法でpackage.jsonに記述しつつ、インストールさせることが可能です。　

$ npm install electron --save

次にindex.jsを作成します。

'use strict';
const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

let mainWindow = null;

app.on('window-all-closed', function() {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('ready', function() {
  mainWindow = new BrowserWindow({
    width: 800, 
    height: 600,
  });
  mainWindow.loadURL(`file://${__dirname}/index.html`);

  mainWindow.on('closed', function() {
    mainWindow = null;
  });
});

実際のページ(index.html)を作成します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./css/photon.css">
    <script src="./js/main.js"></script>
    <title>Hello Electron!</title>
  </head>
  <body>
    <div class="window">
    <header class="toolbar toolbar-header">
    <h1 class="title">Hello Electron!</h1>
    <div class="toolbar-actions">
     <!-- リロードボタン -->
     <button id="reload" class="btn btn-default">
       <span class="icon icon-arrows-ccw icon-text"></span>
       Reload
     </button> 
     <!-- 戻るボタン -->
     <button id="back" class="btn btn-default">
       <span class="icon icon-left icon-text"></span>
       Back
     </button> 
     <!-- 進むボタン -->
     <button id="forward" class="btn btn-default">
       <span class="icon icon-right icon-text"></span>
       Forward
     </button> 
     <!-- URL バー -->
     <input type="text" id="urlbar" class="form-control" placeholder="URL" value="https://github.com/">
     <!-- お気に入りボタン -->
     <button id="favorite" class="btn btn-default">
       <span class="icon icon-star icon-text"></span>
       Favorite
     </button> 
    </div>
    </header>
      <div class="window-content">
        <div class="pane-group">
          <div class="pane-sm sidebar">
            <!-- お気に入りリスト -->
            <ul id="fav-list" class="list-group">
            </ul>
          </div>
            <!-- Webページ表示領域 -->
          <webview class="pane" id="webview" src="https://www.github.com/" autosize="on" style="height:100%;"></webview>
        </div>
      </div>
    <footer class="toolbar toolbar-footer">
    <h1 class="title">Footer</h1>
    </footer>
    </div>
  </body>
</html>

ページの中のボタンに動きを与えるため、js/main.jsを作成します。

document.addEventListener('DOMContentLoaded', () => {
  const webview = document.getElementById('webview');
  const reloadButton = document.getElementById('reload');
  const backButton = document.getElementById('back');
  const forwardButton = document.getElementById('forward');
  const favoriteButton = document.getElementById('favorite');
  const urlbar = document.getElementById('urlbar');
  const favList = document.getElementById('fav-list');

  // webview表示の時にurlbarの値を変える
  webview.addEventListener('load-commit', ({ url, isMainFrame }) => {
    if (isMainFrame) {
      urlbar.value = url;
    }
  });

  // urlbarでEnterキーを押したら遷移する
  urlbar.addEventListener('keypress', (e) => {
    if (e.key === 'Enter') {
      webview.setAttribute('src', urlbar.value);
    }
  });

  // 更新ボタンをクリックしたらwebviewをリロードする
  reloadButton.addEventListener('click', () => {
    webview.reload();
  });

  // 戻るボタンをクリックしたらwebviewを戻る
  backButton.addEventListener('click', () => {
    webview.goBack();
  });
  
  // 進むボタンをクリックしたらwebviewを進ませる
  forwardButton.addEventListener('click', () => {
    webview.goForward();
  });
  
  // お気に入りボタンをタップしたらリストにURLを追加する
  favoriteButton.addEventListener('click', () => {
    const listItem = document.createElement('li');
    const listContent = document.createElement('p');
    listItem.setAttribute('class', "list-group-item");
    listItem.setAttribute('data-url', urlbar.value);
    listContent.textContent = urlbar.value;
    listItem.appendChild(listContent);
    favList.appendChild(listItem);
    listItem.addEventListener('click', () => {
      const url = listItem.getAttribute('data-url');
      webview.setAttribute('src', url);
    });
  });
});

最後にPhotonKitのCSSとFontセットを ダウンロードしておきます。 下記のようなディレクトリ構成になります。

.
├── css
│   ├── photon.css
│   └── photon.min.css
├── fonts
│   ├── photon-entypo.eot
│   ├── photon-entypo.svg
│   ├── photon-entypo.ttf
│   └── photon-entypo.woff
├── index.html
├── index.js
├── js
│   └── main.js
└── package.json

全てを終えたら、npm startコマンドで起動します。下記のようなブラウザが出現できたら完成です。

Electron+Photonで作ったミニブラウザ

プラットフォーム/ライブラリの特徴

以下に、上の表を補足します。

対応プラットフォーム

Electronの公式サポートはWindows, Linux, OS Xの３つのみです。今のところはデスクトップアプリケーションのためのフレームワークなので、モバイル対応は全く考えられていません。

コードベースは (ほぼ) 完全に統一できるか？

ほぼ統一できます。ただし、OS X用の機能であったり、Windows専用の機能は用意されていて、プラットフォームによって呼び出し可能なAPIや受信可能なEventが若干異なります。クロスプラットフォームでOSの専用の機能を利用する上で、気になる方は一度APIを確認すると良いでしょう。

UIを記述する言語

Hello Worldやミニブラウザを作って分かる通り、HTML/JS/CSSで書きます。ネイティブ部分の呼び出しもNode.jsなので、 JavaScriptになります。

JavaScriptのレイヤはNode.js部分とChromium部分でv8(JavaScript Engine)が動くので、ほぼ同一の動きをします、ただし、Node.jsとChromiumでv8のバージョンは若干違う可能性があります。基本的な部分は変わりませんが、ES2016の対応状況を見てもらえれば分かる通り、新しいJavaScriptの機能面で違いはあります。

ES2016の対応状況

UIはネイティブかウェブか

基本はウェブです。デスクトップアプリケーションとして、タスクトレイに常駐させたい場合やOSネイティブのダイアログボックスを使いたい場合は専用のAPIがあるので、それを利用して機能を作ることも可能です。

パフォーマンス

Electronは基本的にウェブなので、ネイティブのデスクトップアプリと比較するとそこまで高速ではありません。

Electronのアプリを起動させると、Chromium用のプロセスが3つ起動し、Node.js用のメインプロセスが1つ起動します。合計4プロセスが常駐することになります。言ってしまえばブラウザそのものを起動しつつ、バックグラウンドにNode.jsを起動しているのと同様です。富豪的な方法で実現していると言えるでしょう。

そのため、描画パフォーマンス等はブラウザの機能がそのまま利用できますが、実行効率が良いモデルとはいえません。パフォーマンスにシビアなアプリケーションを作る場合は Electron ではなく、ネイティブの機能を使って作る方が良いでしょう。

ネイティブな機能を呼び出せるか？

ElectronからNode.jsを呼び出せばファイル操作や外部プロセスコールといった基本的な機能は呼び出せます。また、C言語等で書かれたネイティブライブラリもNode.jsアドオンがあれば呼び出すことが可能です。ただし、ネイティブライブラリに関しては、通常のnpmでインストールするだけでは利用できないことがあります。Nodeのバージョンがelectronのbuilt-inで保持しているバージョンと異なる場合にうまく利用できないことが多いです。ネイティブライブラリを利用したい場合は下記のガイドを確認することを推奨します。

ネイティブライブラリ利用ガイド

まとめ

Electronの概要とアプリ構築の方法、ウェブ用プラットフォームを構築する上での共通質問項目を記述しました。Electron はこれまでのAngularJSやReact等で構築されたSingle Page Applicationを活用して、デスクトップアプリケーションを構築するのに非常に向いています。

まだv1.0がリリースされて日が浅いこともあり、そこまでノウハウが溜まっているわけではありません。特にセキュリティやパフォーマンスなどの改善は今進んでいますが、ユーザーからのノウハウも溜める必要があると感じています。

もしまだ触っていない方がいらっしゃるのであれば、electronicaなどのチュートリアルもあるので是非やってみてください。

また今回のNode学園祭では、Electron作者のzcbenzもゲストスピーカーとして登壇する予定です。Electronの今後の話が聞けると思います。

一緒にElectronを盛り上げていきましょう。

とうとうメジャーバージョンアップにされたNode.jsである、Node.js v4がリリースされました。今回はこのNode.js v4がこれまでのNode.js v0.12やv0.10と比較してどう違うのかを解説します。また、最新ではv5もリリースされていますので、合わせてお伝えしていきます。

なんでいきなりv4なのか

おそらく一番最初に抱く感想は、v0.10とかv0.12みたいな数字からv1.0を飛ばして、なんでいきなりv4.0がリリースされたのかという疑問だと思います。これにはio.jsというプロダクトが関係しています。

2014年の年末、io.jsというプロダクトが発表され、2015年の初めにv1.0がリリースされました。io.jsというのは Node.js のforkで別リポジトリによって実装されたプロダクトです。io.jsの詳細は筆者のブログを確認してください。io.jsがリリースされた後、週次リリースという早いサイクルでリリースするモデルを確立し、8カ月間もの間リリースを続けてきました。結果として、io.jsはv3までリリースされています。

紆余曲折を経た後に、Node.jsはこのio.jsと再び統合されることになります。統合までの経緯について、興味がある読者の方は筆者のYAPCでの発表資料を参考にしてください。

統合される際にio.jsの既存バージョンと競合しないようにした結果、Node.jsはv1.0からv3.0を飛ばしていきなりv4.0がリリースされることになりました。

Node.js v4とNode.js v0.12の違い

Node.js v4はio.js v3が元になっています。つまり、io.js v1からv3までにはいった機能が、そのままNode.js v4では利用可能です。筆者がまとめた内容を元に、Node.js v4で入った新機能や違いを解説します。また、v5で入った機能は本資料の最後にまとめて紹介します。

JavaScript Syntax/Built-in Object の違い

Node.js v4は内部的にJavaScript実行エンジンである、V8のv4.5を採用しています。これにより下記の部分でJavaScript全体の機能が進化しました。

• ES2015のサポート範囲拡大
• StrongScript等のJavaScriptの新機能対応
• Intlオブジェクトのサポートによる国際化対応

一つ一つ説明していきます。

ES2015のサポート範囲拡大

ES2015のサポート範囲がNode.js v0.12と比較して拡大しました。具体的には下記の機能がデフォルトで有効になっています。

• let/const等のblock scope (“use strict”が必須)
• class構文(“use strict”が必須)
• Map/Set/WeakMap/WeakSetといった新しいコレクションオブジェクト
• Generator構文
• Binary/Octalリテラル
• Symbolオブジェクト
• Template Stringリテラル
• String.prototype.repeat
• Symbol.toStringTag
• 拡張Objectリテラル
• Unicodeリテラル
• アロー関数

ES2015の構文のサポート範囲が変わったことで今までNode.jsで記述していたJavaScriptは変わっていくだろうと予測されます。具体的にどのように変わるのか、EventEmitterを拡張してMyEventEmitterを作るというケースを参考に考えてみましょう。

v0.12まではEventEmitterを拡張する場合、以下のように記述していました。

'use strict';
var events = require('events');
var util = require('util');
var EventEmitter = events.EventEmitter;
var MyEventEmitter = function(data) {
  this.data = data;
};

// EventEmitterを継承する
util.inherits(MyEventEmitter, EventEmitter);

MyEventEmitter.prototype.intervalCheck = function() {
  var originalData = this.data;
  var _this = this;
  setInterval(function (){
    if (originalData !== _this.data) {
      _this.emit('change', new Date() + ': ' + _this.data);
      originalData = _this.data;
    }
  }, 1000);
};

module.exports = MyEventEmitter;

このMyEventEmitterは、intervalCheckという内部的にdataが変わっていないかどうかを1秒ずつ調べて変更があったら、changeイベントを発火させるという動きを行っています。v4からは下記のようにES2015の構文を使って下記のように記述します。

'use strict';
// 変更されないようにするためにconstで変数宣言する
const events = require('events');
const EventEmitter = events.EventEmitter;

// util.inheritsではなく、class構文とextendsを使う
class MyEventEmitter extends EventEmitter {
  constructor(data) {
    this.data = data;
  }
  intervalCheck() {
    // 基本的にletで変数宣言する
    let originalData = this.data;
    // アロー関数を利用する。
    setInterval(() => {
      if (originalData !== this.data) {
        // Template String Literalで変数の情報を文字列に埋め込む
        this.emit('change', `${new Date()}: ${this.data}`);
        originalData = this.data;
      }
    }, 1000);
  }
}

module.exports = MyEventEmitter;

ひとつ前のコードと比較すると大分コードが短く、シンプルに記述できるようになっていることがわかります。 Node.js v5.0では、Spread callやnew.targetなどの新しい機能も使えるようになっています。ただし、現時点ではまだ下記のような機能は有効になっていません。

• default params
• rest params
• tail call optimization
• Proxy/Reflect
• modules

StrongScript等のJavaScriptの新機能対応

StrongScriptというのはES2015のコードを強制させ、JavaScriptの実行エンジンにとって親和性の高いコードを生成するための新しい試みです。 もともとJavaScriptにはuse strictをつけることで厳格モードというモードになりますが、この厳格モードをより強くしたモードです。

StrongScriptはreadability(読みやすさ)の向上とpredictability(予測しやすさ) の向上という2つの事を狙った試みであり、特にpredictabilityが上がることでJavaScriptの実行エンジンフレンドリーになり、全体的に性能が上がる事が期待されます。

"use strong";

function foo() {
  //下記のコードは、StrongModeでは全てエラーになります。
  // varを利用する代わりにlet、もしくはconstを使いましょう。
  var obj1 = 'aaa'; // Restrict var (use let or const instead)

  // argumentsの代わりに、restパラメータを使いましょう
  let args = arguments; // Restrict arguments (use Rest Params …args)

  // ==の代わりに、strict equal ===を使いましょう
  if (obj1 == 'aaa') {}  // Restrict == (use strict equal ===)

  // if とか for のあとにうっかり ; を置くけど、空の式を置くのは間違いの元なのでやめましょう。
  if (obj1 === 'aaa'); // Restrict empty if and for

  // for-inの代わりに、for-ofを使いましょう。
  for (let n in [1,2,3]) // Restrict for-in (use for-of instead)

  // delete構文を使うなら、Map/Setを代わりに使いましょう。
  delete obj1.key // Restrict delete operator (use Map/Set instead)

  // undefined っていう名前の変数に何かを入れるのはやめましょう。
  let undefined = 'aaa'; // Restrict undefined binding

  // 未定義のプロパティに、勝手にアサインするのはやめましょう。
  let obj3 = { foo : 'aaa'};
  obj3.bar = '123'; // Restrict undefined property access 
}

本コードを実行するためには、"use strong"ディレクティブを書くだけじゃなく、実行時のオプションとして--strong_modeオプションが必要です。

$ node --strong_mode weak.js

StrongScriptの詳細については、以前まとめた資料があるのでご一読ください。StrongScriptについて

Intlオブジェクトのサポートによる国際化対応

ECMAScript国際対応用のAPIが利用できるようになっています。ECMA-402と呼ばれる仕様で通称ESIntlと呼ばれています。これを利用することで例えば時刻表期の国際化対応や通貨表記の国際化対応ができるようになります。

ただしデフォルトでは利用できないので、ビルドするときにオプションを指定する必要があります。下記のようにオプションを指定して実行すると有効になります。

$ ./configure --with-intl=full-icu --download=all
$ make
$ make install

これを使うと新たにIntlというbuilt-inオブジェクトがglobal空間に生成されて使えるようになります。文字列比較処理から見ていきましょう。文字列比較をする際に日本語にはカタカナやひらがなといった表記の違いとまた句読点といった区切りが存在します。

読みやすくするためには表記の違いを使い分けたり、句読点をしかるべき所に入れる必要がありますが、プログラミングで文字列をソートしたり、検索するときなどはこれらの区別が不要なときも多いです。こういう場合に利用するのがIntl.Collatorというクラスです。利用方法は以下のとおり。

// 文字列比較系

console.log(new Intl.Collator('ja', {
  sensitivity: 'base'  // 文字の派生系を同値と見なします、カタカナとひらがなの区別もつけません。Ex.か==が , ぴ == ヒ, あ != い
}).compare('ハハ', 'パパ'));  // 0 つまり同値

console.log(new Intl.Collator('ja', {
  sensitivity: 'accent'  // 文字で発音が同じものを同値と見なします。baseの中で派生系は不等という指定です。Ex. は == ハ , ぴ != ひ, あ != い
}).compare('ハハ', 'はは'));  // 0 つまり同値

console.log(new Intl.Collator('ja', { 
  sensitivity: 'accent', 
  ignorePunctuation: true // 句読点を無視するかどうか、デフォルトはfalse 
}).compare('わたしは、ふるかわです', 'わたしはふるかわです')); // 0 つまり同値

また、この他にも時刻表記(Intl.DateTimeFormat)や通貨表記(Intl.Numberformat)といった数字の表記を、国際化対応することが可能です。

// 日付フォーマット系
var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
console.log(new Intl.DateTimeFormat('en').format(date)); // 12/20/2012
console.log(new Intl.DateTimeFormat('ja').format(date)); // 2012/12/20
console.log(new Intl.DateTimeFormat('ja-JP-u-ca-japanese').format(date)); // 平成24/12/20

// 数値フォーマット系
console.log(new Intl.NumberFormat('en').format(10000000)); // 10,000,000
console.log(new Intl.NumberFormat('ja', {style: 'currency', currency: 'JPY'}).format(10000000)); //￥10,000,000
console.log(new Intl.NumberFormat('en', {style: 'percent', }).format(0.230232)); // 23.023%

API 部分の変更

実は今回のNode.js v4では、JavaScriptの文法部分での進化と内部でのリファクタリングは進んでいるものの、APIとして新しい機能はそこまで増えていません。追加された機能はいくつかありますが、主だったものとしては下記の通りです。

• Buffer#indexOfの追加
• Simple Stream Constructionの追加
• os.homeDir()が追加

一つ一つ説明していきます。

Buffer API の変更

Node.jsには、Bufferと呼ばれるbinaryデータを扱うためのAPIが存在します。普通にNode.jsのライブラリを利用するときにはあまり意識していないかもしれませんが、fsからreadFileした時の戻り値やhttpのPOSTメッセージを受け取った時は基本的にBuffer型の値を受け取っています。JavaScriptにはArrayBufferという似たオブジェクトが存在しますが、v4.0.0からはこのArrayBufferをBufferが継承する形になりました。これによってArrayBufferで利用可能なAPIはBufferでも利用可能になります。

またそれとは別にBufferにindexOfメソッドが増えました。これによりわざわざ文字列に変換しなくてもBufferとしてそのまま文字列を含んでいるかどうかを検索することができるようになります。

var fs = require('fs');

// ./foo.txt => yosuke furukawa
fs.readFile(__dirname + '/foo.txt', function(err, buf){
  console.log(buf.indexOf('furukawa')); // 7
});

これまではindexOfなどの文字列検索をする場合、一旦toStringを使って文字列を変換する必要がありました。これはNode.js内部では、Buffer型からstring型への変換をしている上にさらにHeapメモリを消費してしまうため、メモリ効率的にも速度効率的にも悪いというデメリットが有りました。今回のv4.0からはindexOfメソッドがBufferで利用可能になっているため、このデメリットを解消しています。また内部的にもこのメソッドを利用することで速度の向上が見られます。

また、ArrayBufferで再実装された影響で以下のようなArrayBufferをそのままコンストラクタに入れられるようになりました。

const Buffer = require('buffer').Buffer;
const ab = new ArrayBuffer(16);
var buf = new Buffer(ab); // Buffer constructor accepts ArrayBuffer.

console.log(buf instanceof Uint8Array); // true
console.log(buf instanceof Buffer); // true

buf.writeUInt32BE(0x61626364, 0);

console.log(buf.toString()); //abcd

Simple Stream Construction の追加

Streamの作成が簡単になりました。今までStreamを作るためには、目的のStreamを継承して、TransformStreamであれば _transformのようなメソッドを拡張して実現する必要がありました。 これをより簡単にしたものがthrough2に代表されるヘルパライブラリでしたが、簡単にいえばこのthrough2がなくても Node.js v4.0ではStreamを作るのが簡単にできるようになりました。

// これまで
var Transform = require('stream').Transform;
var util = require('util');

util.inherits(MyTransform, Transform);

function MyTransform(opts){
    Transform.call(this, opts);
}

MyTransform.prototype._transform = function(chunk, encoding, callback){
  // ここで変換して
  ...
  // pushする
  this.push(chunk);
};

MyTransform.prototype._flush = function(done){
  // 最後に何かしたければここで flush する
};

// これから
var stream = require('stream');
var transform = new stream.Transform({
  transform: function(chunk, encoding, next) {
    // ここで変換して
    ...
    // pushする
    this.push(chunk);
  },
  flush: function(done) {
    // 最後に何かしたければここでflushする
  }
});

詳しくはこちらのAPI資料を参考にしてください。

os.homedir機能の追加

HOMEディレクトリを取得するための関数os.homedirが追加されました。

const os = require('os');
console.log(os.homedir()); // /User/yosuke

今まではHOMEの環境変数から取得したり色々な方法で解決していましたが、これからはos.homedir関数で取得することができます。

性能向上

v8のバージョンアップ、http_parserモジュールのバージョンアップにより、これまでよりも性能が8%ほど向上しています。まだ、前述したBufferの改善により、メモリ効率的にも向上が見られます。

この結果を見ていただくと分かる通り、Requests/secondベースでhttpの速度が8%程改善されています。

またこちらの結果では、性能改善はもとより、メモリ効率的にも効率化されていることがわかります。

httpだけではなく、fsにwritev書き込みをするモードが追加されたり、require関数の無駄な処理を省いて高速化するといったことが行われています。

Deprecated になったAPI

残念ながら、deprecatedになったAPIも存在します。下記のAPIは今後は使わないようにしてください。

• domains(エラーはキャッチできるものの、キャッチしたエラーでできることが少ない)
• fs.exist/existSync(存在確認後に別プロセスから消されることもあるのでRace Conditionに弱い)
• util.isObject/isNumberなどのisXXX系(一部既存のライブラリの関数と異なる振る舞いがあり、使いにくいため)

Node.js v4のNode.js v0.12は互換性はあるのか

JavaScriptのレイヤは互換性があります。ほとんどのモジュールはそのまま動くでしょう。ただし、CやC++のnative module をバインディングして作っているライブラリはV8がバージョンアップされたことにより、内部のABIの互換が崩れているため動かなくなります。それらのモジュールが、まだv4.0に対応するまではアップグレードをしても動きません。

C/C++のnativeモジュールの問題で動いていないモジュールを確認するためにはこのissueを確認していただくとよいと思います。

https://github.com/nodejs/node/issues/2798

Node.js v4とNode.js v5の違い

Node.js v4はLTSというリリースしてから2年半サポートするサポートポリシーがついていますが、Node.js v5にはついていません。つまり、 Node.js v5は次のバージョンが出たらサポートされなくなります。 今のところ、 LTSの対象になるのは偶数のバージョンとされています。ただし、偶数のバージョンが必ずLTSというわけではなく、今のところ偶然そういうバージョンになっているというのが正しい状態なので、きちんとLTSかどうかを把握するためには、バージョン番号の他にLTS識別名(ArgonやBoron等の元素名)が付いていることを確認したほうがよいです。

確認するには、公式サイトのトップページに書いてある情報から識別するのが簡単です。

公式サイト

v0.10からv0.12までのLTSプランについては下記の図を参考にしてください。

スケジュール

Node.js v5には、npmのバージョン3やALPNサポートがついています。ただし、v5.0は前述したとおりLTSバージョンではないので次のバージョンからはサポートされません。最新の機能を使ってみたい方向けのバージョンになります。実際に最新の機能を使ってみたい場合は、Node.js v5を利用するのがいいかと思います。

まとめ

Node.js v4.0がリリースされました。実際にすでにプロダクションで使っているところもある安定したバージョンになります。また、Node.js v4.0には新しいJavaScriptであるES2015の機能が使えるようになっています。APIにもいくつか変更があるのと、性能が改善されています。

また、LTSということで、今から2年半、2018年4月まではメンテナンスされる予定です。v5もすでにリリースされていますが、これは今のところ最新の機能を使ってみたいedgeなエンジニア向けのバージョンです。

バージョンの違いを意識した上で利用してください。

また、Node.jsのv0.10やv0.12を使っている人たちはまだ多いと思いますが、来年の末には両方のバージョンともにサポートが切れるので、今のうちから新しいバージョンにバージョンアップを検討しておくことをおすすめします。

私もフロントエンド・エンジニアではありますが、もともと関心があったことと、去年からデータ・ストリームのPaaS (platform as a service) 会社であるPubNubで働いていることもあって、IoTを避けずには通れなくなり、電子工作を始めるようになりました。

そこで、最近東京・渋谷で行われた、東京Node学園で登壇した際に話したテーマ、Hardware Hacking for JavaScript Developers から、ArduinoとNode.jsを使ってプロトタイプする、という内容についてチュートリアル形式で書いてみたいと思います。

Arduinoが変えたMakerムーブメント

みなさん、Arduinoの名前は聞いたことがあると思います。Arduino、もしくはGenuinoとして知られているこのオープンソースのAVRマイクロコントローラ電子工作キットは、既存のマイコンボードと違い、安価で、I/Oポートもあり、USB接続で今すぐ始められます。開発環境（IDE）とサンプルコードなども簡単にダウンロード、インストールできることから初心者でも簡単に電子工作ができるようになったという面では、今までハードウェアに縁がなかったソフトウェアエンジニアが、Makerムーブメントに積極的に参加するようになった火付け役ともいえると思います。

しかし、同じソフトウェアといえども、ウェブエンジニアはどうでしょう？Arduinoで使用される言語はC-ベースのSketchということで敷居が高く感じたり、興味がなかったりするのではないでしょうか？でも、もし馴染みのJavaScriptで好きなことができたら、遊んでみたくなりませんか？

Johnny-Five: JSロボティクス・フレームワーク

そこで紹介したいのが、JavaScript ロボティクス・フレームワークである、Johnny-Five。日本ではまださほど知られていない感じがしますが、オープンソースでディベロッパ・コミュニティの結束も固く、インターナショナル NodeBots Dayなどでユーザ・コミュニティも大きくなってきたこのフレームワークを使えば、JavaScriptをで簡単にプログラマブル電子工作ができるようになります。ここは説明よりも実践してみるほうが理解も深まると思いますので、さっそくチュートリアルを始めましょう！

1. Arduino のセットアップ

用意するハードウェアとインストールの必要なソフトウェア

• Arduino (Genuino) Uno
• Arduino IDE
• Node.js

始めにセットアップから始めます。ArduinoボードをUSBで、コンピュータにつなぎます。Arduino IDEをダウンロード、インストールして、起動させたら、ボードとシリアルポートの設定をします。

メニューのツール > マイコンボードの中のArduino Unoを選択し、 ツール > シリアルポートの中の/dev/tty.usbmodem、もしくはcu.usbmodemという名前が含まれる項目を選びます。

Johnny-FiveはFirmataプロトコルを使ってArduinoと通信をするので、今度はStandardFirmataをインストールします。

メニューからファイル > スケッチの例 > Firmata > StandardFirmataを選択すると新しいウィンドウが開きます。そこから左から２番目にあるアップロードボタンをクリックします。下のGIFアニメーションの通りです。

終わったら閉じ、このIDEはもうこれからは必要ありません。

2. Hello World

まずコンピュータに、Node.jsがすでにインストールされていることを、確認してください。そして適当なディレクトリ (e.g. /j5-hello/) を作ったら、そのディレクトリ内にパーケッジマネージャであるnpmを使って、Johnny-Fiveをインストールします。

$ npm install johnny-five

さっそくJohhny-Fiveを使ってはじめの一歩である、Hello Worldを書いてみましょう。新しい言語やフレームワークを学ぶ際に初めて書くプログラムは”Hello world”という2つの単語を出力する、というのが一般ですが、ここでは、ハードウェア界のHello Worldとも言える「Lチカ」（LEDを点滅させる）をしてみます。

必要なハードウェア

• セットアップ済みのArduino Uno
• LED
• ブレッドボード
• ジャンパー・ワイヤー（両側がピン状になっているオス〜オス）
• 抵抗　（200-330Ω 程度）

まずはハードウェア側のセッティングです。 部品などどこで買ったらわからない、という方はAmazonなどでキットを買うのをお勧めします。

LEDの基本

LED（発光ダイオード）には、極性があり、その＋極をアノード、ー極をカソードと呼びます。普通のLEDには通常、足が二本ついていますので長い方がアノードです。これは回路を作るときに重要になってきますので必ず覚えておいてください！

電気回路の作成

ArduinoからLEDを光らせるための回路はこんな感じになります。ここでは便宜上、電源からつながるプラス側を赤、Groundにつながるマイナス側を黒のワイヤーで示してあります。何色を使っても構いませんが、混乱を避けるために2つの異なる色にすることをお勧めします。

ブレッドボードや抵抗についての基本、そしてこの「Lチカ」の回路については初心者でもわかる・できる！Arduinoを使った初めての電子工作実践の「部品をつなぐ」セクションで豊田陽介さんが詳しく説明されているので、それを参考にしましょう。

Johnny-FiveでLチカ

では、適当なファイルネーム、例えばblink.jsを作成し下のコードをコピーペーストしてください。

var five = require('johnny-five');
var board = new five.Board();

board.on('ready', function() {
  var led = new five.Led(13);
  led.blink(500);
});

ターミナルからこのファイルを走らせましょう。

$ sudo node blink.js

正しく作動しましたか？回路が正しく、コードにエラーがない場合は、500ms間隔でLEDが点滅します。

これで、JavaScriptとハードウェアを使う基本を学びましたので、今度は実際にスマートデバイスのプロトタイプを作ってみましょう。

3. スマート照明システムをプロトタイプする

Philips HUEや、LIFXは、ムードや状況によってスマートフォンやタブレットから、明かりの色や照度をカスタマイズできるLED電球です。さっそく Arduinoを使ってこれらのように色を自在に変えられるLEDを作ってみましょう。色を変えるためのコントローラはHTML５を使ってブラウザから操作できるようにしましょう。

JavaScript で Internet of Things

さて、ここで重要なのは、デバイス（ハードウェア）とモバイルUI (HTML5)をインターネットでつなげて、IoT化するということです。Bluetoothなどと違い、インターネットにさえ繋がっていれば、あなたが世界のどこにいようともモバイルから自宅の照明の操作をすることができるのです。この2ウェイ・コミュニケーションを可能にするにはソケット・コネクションが必要になります。ここで、この双方向通信を簡単に行うことにできるPubNubのJavaScript APIを使って、IoTのプロトタイプをしてみましょう。

PubNub はグローバルなデータストリームネットワーク (DSN) で、 このAPIを使ってリアルタイムアプリケーション、IoTデバイスなどを接続、拡張、管理することができます。今から作成するスマートLEDは下の図のようにモバイルデバイス（このプロトタイプの場合はブラウザ）とハードウェアをインターネットでつなげることが可能です。

例えば、サンフランシスコにいるモバイルユーザが東京にあるArduinoを操作する場合：

1. ユーザがモバイルから「緑い照明にしたい」と送信（パブリッシュ）
2. メッセージがPubNubのサンスランシスコデータセンターに送信される
3. データは世界各地のデータセンターと同期
4. Arduinoが東京データセンターからデータを受信（サブスクライブ）して、LEDを緑に

この全てのオペレーションがわずか¼秒かそれ以下で行われるのが、PubNubの利点です。

このチュートリアルではJavaScriptを使ってプロトタイプを作りますが、PubNubの組み込みとモバイルのSDKを使えば、実際にHUEのようなスマートデバイスを製品化することも可能なのです。

必要なハードウェア

• Arduino Uno
• RGBフルカラーLED（カソードコモン）
• ブレッドボード
• ジャンパー・ワイヤー（オス〜オス）
• 抵抗　（220Ω x 2, 330Ω x 1）

RGBフルカラーLEDの基本

RGB (Red-Green-Blue) フルカラーLEDは、赤、緑、青の3色のLEDが一本になったもので、この三原色の組み合わせで無数の色を作り出すことができます。ほとんどのこのタイプのLEDは、各色のピンが一本づつと共通のカソード（もしくはアノード）の合計4本のピンがあります。このチュートリアルでは、カソードコモンのものを使用しています。

電気回路の作成

Hello World を成功させたからには、この下の図の回路も問題なく作れるのではないでしょうか。がんばってみてください。

ワイヤーを差し込むピンは、単純な「Lチカ」とは違い、PWM (Pulse Width Modulation：パルス幅変調) ピンを使っています。Arduinoボードにラベルされているピン番号の前に「〜」が付いているものがPWMピンになります。

これらと他のピンの違いは、簡単にいえばアナログかデジタルかの違いになります。例えばLEDの場合、一般のデジタルピンにつなぐとオフかオンの2つのステートしか表現できません。Lチカ（点滅）はこのデジタル信号をオンとオフと交互に発しています。しかしRGBフルカラーLEDで無数の色を表現するには、各色の値の組み合わせで色を作り出すので中間の値が必要になりますので、アナログであるPWMピンを使います。

ここで抵抗を220Ωと330Ωにわけてあるのは、同じ抵抗だと赤が強くなるので、抵抗を増やして赤を控えめな明かるさになるように調整してあります。抵抗の計算方法やカラーコードの読み方については、ここで割愛しますが、自分でいろいろ調整してみてください。

IoT リモートコントローラーUIの作成

ブラウザでLEDの色をコントロールするUIを作ってみましょう。

HTML5の“、”R”、”G”、”B”の各色調整をするスライダーバーを描写します。各色は0から255まで(min="0" max="255")の整数の値(step="1")を、つまみで調節できるようなUIにしてみましょう。

<input id="red" type="range" min="0" max="255" step="1" value="0">

これで赤色を調節するスライダーができました。このチュートリアルではCSS部分は省略しますが、スクリーンショットのようなスタイルにするには、GitHubのソースコードのgh-pages ブランチを参照してください。

次はJavaScriptでこの値がユーザによって変更された時に、その値をArduino側に反映させるようにします。これを実現させるためにPubNub JavaScript APIで両デバイスを接続させてみましょう。

PubNub JavaScript API を使うには、まず自分のAPIキーを取得を取得したら、CDNライブラリ（もしくはローカルファイル）を読み込みます。

<script src="//cdn.pubnub.com/pubnub-3.7.15.min.js"></script>

そして自分のキーを使ってインスタンスを初期化します。

var pubnub = PUBNUB({
　subscribe_key : '自分の subscribe key',                          
　publish_key   : '自分の publish key'
});

UIイベント発生時に自動的にLEDの色を変える仕様にしてみましょう。 スライダーDOMにchangeイベントが発生した時に、変更値をPubNubに publish メソッドを使って送信（パブリッシュ）します。

var red = document.getElementById('red');

red.addEventListener('change', function(){
  pubnub.publish({
    channel: 'smart-led', 
    message: {color: 'red', brightness: +this.value}
  });
}, false);

この時の channel 名は何でも構いませんが、のちにこのデータを受信する際にはこれと同じチャンネル名にします。

では次はNode.jsを使ってハードウェア側でこの値を反映させてみましょう。

Johnny-Five と PubNub で Arduino を IoTデバイスに

Johnny-FiveでRGBフルカラーLEDを動かすコードは、いたって簡単。npmでjohnny-fiveをインストールしたら、次のコードを動かしてみてください。

var five = require('johnny-five');
var led;

five.Board().on('ready', function() {
  console.log('ready');

  // RGB LED を初期化
  led = new five.Led.RGB({
    pins: { // pin 番号
      red: 6,
      green: 5,
      blue: 3
    }
  });

  // テスト
  led.color({red: 255, blue: 0, green: 0});
  
  led.on();
});

LEDが赤色に光ましたか？ 何も起こらない場合はコードと配線などを確かめてください。それでも作動しない場合は、使っているRGB LED がカソードコモンではなくアノードコモンの可能性があります。その場合は、GND（図上の黒のワイヤー）を、Arduinoの5Vのピンに変えてみてください。

「テスト」とコメントされた行をみてください。color メソッドでLEDの色を指定しているのがわかると思います。この場合、赤の値が255で他が0となっているので、LEDを赤で光らせることができます。Johnny-Fiveでは、CSSのcolorプロパティと同じようにRGBの値を0～255で指定することができるのです。RGBの各値を変えながらどんな色になるか実験してみてください。

さて今度は、このRGBの値をブラウザUIからリモートコントロールして、動的にLEDの色を変えてみましょう。

さきほどのUI側からパブリッシュされたデータを受け取って、ハードウェアに反映させるには、PubNub subscribe メソッドで受信（サブスクライブ）しましょう。

まず、npm で pubnub をインストールします。

$ npm install pubnub

フロントエンドと同様に、pubnubインスタンスの初期化します。

var pubnub = require('pubnub').init({
  subscribe_key: '自分の subscribe key',
  publish_key:   '自分の publish key'
});

UI側から送信されたデータは、同じ channel にアクセスすることによって自動的に送信することができます。データが送信された際には、subscribe メソッドの callback が返されます。このコールバック内で送信された色データをLEDに反映させます。

pubnub.subscribe({
  channel: 'smart-led',
  callback: function(m) {
    if(led) {
      r = (m.color === 'red') ? m.brightness : r;
      g = (m.color === 'green') ? m.brightness : g;
      b = (m.color === 'blue') ? m.brightness : b;

      led.color({red: r, blue: b, green: g});

      console.log( 'color change to...' );
      console.log( led.color() );
    }
  }
  error: function(err) {console.log(err);}
});

送信されたメッセージ、m は、UIから送られたオブジェクト、例えば青の値が150の場合、{color: 'blue', brightness: 150}、となります。次に送信された値が、{color: 'red', brightness: 150} ならば、前の値の青＝150はそのままで、ここに赤＝150が加わることによって、LEDは紫に近い色になります。さらに赤緑青の3つの値が変われば、LEDはさまざまな色に変わります。

全コードは、GitHubのソースコードのmaster ブランチ内の /node/index.jsを参照してください。

さて、これでIoTスマート照明のプロトタイプができあがりました！

Johnny-FiveもPubNubもArduinoだけではなく、他のいろいろなマイクロコンピュータに使うことができます。いろいろなセンサーやカメラなどを組み合わせて、IoTプロトタイプに挑戦してみてください。

では、Happy hacking!

References

• Johnyy-Five: The original JavaScript Robotics programming framework
• PubNub: The global realtime Data Stream Network for IoT, mobile, and web applications

WebGLとWebSocketによる3Dオンラインレースゲーム「JS-Racing」の全て！（後編）

前回に引き続きHTML5 Japan Cup 2014にてWebGL賞と優秀賞をいただいたオンラインレースゲーム、JS-Racingの技術解説をさせていただきます。

サーバサイドの使用技術

サーバサイドの技術としてNode.jsを使用しています。Node.jsはサーバーサイドで動作するJavaScriptで、ノンブロッキングI/Oというモデルを採用しています。非同期処理でデータベースへのアクセスとWebページの表示を別々に行ってくれるので、ストレスなく大量のページの表示が出来ます。また、Socket.ioというライブラリを扱うことで、WebSocketを使用したリアルタイム通信を実現するができます。

Node.jsでWebアプリケーションを構築する場合、実験的にローカルのみの開発の場合は問題ありませんが、公開するとなると、Node.jsをインストールして実行できるサーバが必要になります。そのためには共有サーバのレンタルではなく、管理者権限 (root) が付与される専用サーバや、仮想専用サーバ（VPS）のレンタルが必要になると思います。管理者権限のため自由に環境をセットアップする事ができるために、そのWebアプリケーションに合わせた環境構築が可能になります。

ExpressによるWebアプリケーションフレームワークの利用

Node.jsで作成したWebアプリケーションの場合、リクエストURIの解析からファイルの配信など、HTTPサーバの機能を実装しなくてはいけません。これらの基本機能が備わったWebアプリケーションフレームワークを利用することで、非常に手軽にWebアプリケーションを作成できます。今回は、多数開発されているWebフレームワークのなかでも、有名で多く利用されているExpressを利用しました。

var express = require("express");
var app = express();
// HTMLエンジンとしてjadeを使用
app.set("view engine", "jade");
app.set("views", __dirname + "/views");
app.use(express.static(__dirname + "/public"));
// js-racing.knockknock.jp/にアクセスがあった場合、
// /views/index.jadeに「title=JS Racing」と「version=ver1.2」の値を渡して、HTMLを表示
app.get("/", function(req, res) {
    res.render("index", {
        title: "JS Racing",
        version: "ver1.2"
    });
});
// js-racing.knockknock.jp/controller.htmlにアクセスがあった場合、
// /views/controller.jadeに「title=JS Racing」と「version=ver1.2」と「id=URLパラメータのidの値」の値を渡して、HTMLを表示
app.get("/controller.html", function(req, res) {
    res.render("controller", {
        title: "JS Racing",
        version: "ver1.2",
        id: req.query.id
    });
});
app.set("port", process.env.PORT || 3000);
var server = require("http").createServer(app);
server.listen(app.get("port"), function(){
    console.log("Express server listening on port " + app.get("port"));
});

22行目のreq.query.idはhttp://js-racing.knockknock.jp:3000/controller.html?id=000000として渡された、URLパラメータのidの値が参照できます。この値は、ソケット通信時に発行されたソケットIDの値で、PCから発行されたスマフォ用のURL（QRコードか短縮URL）にURLパラメータとして付加されたもので、この値を元にPCとスマートフォンとのペアリングを行います。

ExpressはHTMLのテンプレートエンジンとしてJadeか、ejsを選択することができます。Jadeはインデントが必須です。閉じタグを省略できる代わりに、DOMの入れ子構造に沿って適切にインデントを使用する必要があります。基本的な記法がHTMLとは違うために、HTMLに親しんだマークアップエンジニアからすれば、慣れるまで違和感があるものだと思います。ejsはJadeとは違い、基本的な記法はHTMLをベースにしていますので、ローカルでくみ上げたHTMLをejsに組み込むことが容易です。今回はより楽にコード量を少なくHTMLを構築したいという点で、閉じたタグなしで記述できるJadeを選択しています。

// オープニングタイトル表示部分
section#sceneOpening.scene-opening(style="display: none;")
    div.scene-opening__inner
        div.scene-opening__box5
            h1.scene-opening__ttl
                // expressから受け取ったパラメータ、titleの値を挿入
                span.scene-opening__ttl__txt #{title}
                    br
                // expressから受け取ったパラメータ、versionの値を挿入
                span.scene-opening__ttl__txt2  #{version}

Jadeはこのようにインデントによって、要素の入れ子構造を定義しています。そのため閉じタグが不要で、HTMLを非常に簡略化して記述することが可能になります。HTMLを簡略化できるだけがJadeの特徴ではありません。HTMLをコンポーネント化して再利用したり、条件分岐をさせたり、繰り返し処理をさせたり、これまでサーバサイドで行っていたようなことがNode.jsで可能になります。ちなみにCSSはSass（Compass）を使い、記法にはBEMという命名規則を採用しています。

Socket.ioによるリアルタイム通信

車の同時走行と、スマートフォンからの車の操作を実現するためには、ブラウザとサーバ双方から、任意のタイミングでデータを送受信する必要があります。このリアルタイム通信を実現するために、Socket.ioを利用しています。Socket.ioはWebSocketなどのリアルタイム通信技術をラップして、シンプルなAPIを提供しているため、通信部分の煩雑さを意識することなく、リアルタイム通信を簡単に構築することができます。

スマートフォンからの車の操作を実現するために、接続時に発行されたソケットIDを共有することで、スマートフォンとPCをペアリングして相互通信しています。サーバを介しての通信なので、若干のタイムラグが発生する懸念もあったのですが、現状ではタイムラグを感じることはありませんでした。環境に依存することですので、あくまで今回の場合はということですが。

var socketArr = [];
io.sockets.on("connection", function(socket){
    // Socket.IDをPCに送信
    socket.emit("emit_id_form_server", socket.id);
    // PCから車の状態を受信
    socket.on("emit_carcondition_form_client", function(data){
        // 受信した車の状態
        var info = {
            id: socket.id,
            name: data.name,
            x: data.x,
            y: data.y,
            bodyAngle: data.bodyAngle,
            wheelAngle: data.wheelAngle,
            speed: data.speed,
            colorBody: data.colorBody,
            colorWing: data.colorWing,
            colorDriver: data.colorDriver
        };
        // 接続しているクライアントごとの情報を更新
        var flg = true;
        var i = 0, max;
        for (i = 0, max = socketArr.length; i < max; i = i + 1) {
            if (socketArr[i].id == info.id) {
                socketArr[i] = info;
                flg = false;
            }
        }
        if (flg) {
            socketArr.push(info);
        }
    });
    // スマートフォンからの操作情報を受信
    socket.on("emit_controller_data_form_client", function(data){
        var id = data.id;
        var event = data.event;
        var value = data.value;
        var flg = false;
        var sockets = io.sockets.sockets;
        var i = 0, max;
        for (i = 0, max = sockets.length; i < max; i = i + 1) {
            // ソケットIDが一致したクライアントに操作情報を送信
            if (sockets[i].id == id) {
                sockets[i].emit("emit_controller_data_from_server", {
                    id: id,
                    event: event,
                    value: value
                });
                flg = true;
            }
        }
        // ソケットIDが一致したクライアントが存在しなかった場合はスマートフォンに接続解除イベントを送信
        if (!flg) {
            socket.emit("emit_disconnect_client_from_server");
        }
    });
    // 接続しているクライアントの情報を1秒間に3回、接続しているクライアント全てに送信
    setInterval(function(){
        socket.emit("emit_other_carcondition_from_server", socketArr);
    }, 1000 / 3);
});

接続している全てのクライアントに、接続している全てのクライアントの情報を送信するイベントは、ネットワークの負荷を考えて、1秒間に3回と制限をかけています。つまり3FPSのタイミングで同期をとることになりますが、クライアント側では30FPSでゲームが進行しているために、タイムラグが発生してしまいます。タイムラグによって発生する違和感をなくすために、クライアント側ではサーバ側から配信されるクライアント情報を元に、前回配信された情報との差分を10で割った値を算出して、クライアント側の1FPS毎の値として反映させ、違和感を解消しています。

MongoDBでラップタイムの保存と走行データの保存

ラップタイムを保存したり、走行データを保存するのにデータベースとしてMongoDBを利用しています。MongoDBは、オープンソースのドキュメント指向データベースです。RDBMSのようにレコードをテーブルに格納するのではなく、ドキュメントと呼ばれる構造的データをオブジェクト形式でデータを管理します。 ちなみにNode.jsからMongooseを利用し、MongoDBに接続しています。Mongooseでは、Schemaインスタンスを通してModelを定義する事ができます。以下のようなオブジェクト形式でデータを管理出来るのが、MongoDBの特徴です。

var UserSchema = new mongoose.Schema({
    id:String, // ソケットID
    name:String, // 名前
    date:String, // 登録日
    time:Number, // ラップタイム
    comment: String, // コメント
    color: {
        body: String, // ボディカラー
        wing: String, // ウィングカラー
        driver: String // ドライバーカラー
    },
    runningPath: Array // 走行データ
});
var Users = db.model("user", UserSchema);

走行データは1秒間に30回、車の位置と角度を記録した配列ですので、全てのユーザーの分だけ保存すると、データ量が肥大してしまう可能性があります。データ量を押さえるために、ラップタイムでソートして10位圏外の走行データは保持していません。

サーバサイドではNode.jsのおかげで、Webアプリケーションを構築する環境がとても整ってきていると思います。 基本的な言語はJavaScriptですので、サーバサイドもフロントエンドエンジニアが押さえるべき領域になっているのではと思います。

その他の技術的トピック

サーバサイド、クライアントサイドの技術それぞれの紹介を軸として、説明させていただきましたが、これ以外にもいくつか工夫した、技術的なポイントがありますので、紹介します。

コースデータの共有

3D表現を利用するために使用したthree.jsと、ゲームエンジンとして使った2D物理エンジンBox2DJSで、コースデータを共有するために2次元配列を使用しました。各値には数値を格納して、数値によってthree.jsでは壁、道路、芝、タイヤ、木、等の3Dモデルが配置され、Box2DJSでは3Dモデルの形状に沿った障害物を配置します。ちなみに開発当初、コースエディット機能や、SNSでコース共有機能等を考えていましたので、テキストデータとして扱いやすい2次元配列をコースデータとして採用したという経緯があります。

module imjcart.logic.map.value {
    export class MapConst {
        // コースデータ用の2次元配列
        static MAP:any = [           
　　　　　　[1,1,1,1,1,1,1,1,1,　〜省略〜　1,1,1,1,1,1,1,1,1,1,1], 
　　　　　　[1,4,4,4,4,4,4,4,4,　〜省略〜　4,4,4,4,4,4,4,4,4,4,1],
           〜省略〜　　　　　　
　　　　　　[1,1,1,1,1,1,1,1,1,　〜省略〜　1,1,1,1,1,1,1,1,1,1,1]
        ]
        // コースデータ配列内の各値が、何を表しているかの定数
        static MAP_KEY_NONE:number = 0; // アスファルト
        static MAP_KEY_WALL:number = 1; // 外壁
        static MAP_KEY_BLOCK:number = 2; // ブロック
        static MAP_KEY_TIRE:number = 3; // タイヤ
        static MAP_KEY_GRASS:number = 4; // 芝
        static MAP_KEY_TREE:number = 5; // 木
        static MAP_KEY_CAR_START_POSITION:number = 6; // 車のスタート位置
        static MAP_KEY_LAP_MEDIAN_CENTER_02:number = 7; // ゴールライン（逆走制御）
        static MAP_KEY_LAP_MEDIAN_CENTER_01:number = 8; // ゴールライン（逆走制御）
        static MAP_KEY_LAP_START_POINT:number = 9; // ゴールライン
        static MAP_KEY_SAND:number = 10; // 砂地
    }
}

ただ、このような膨大な量の2次元配列を、テキストエディタで作成、編集するのは非常に非効率だと考えて、途中からExcelによって管理する方法に切り替えました。Excelでは条件付き書式を設定して、セルの値によって、わかりやすいように色づけするように設定しています。データ書き出しの際には、ExcelからCSVデータとしてテキストデータを書き出して、CSVデータをテキストエディタで置換して2次元配列にしています。

コースの装飾

コースは直線と直角だけではなく、カーブ等の曲線も再現できなくてはいけません。2次元配列をコースデータとして利用する場合は、この点を補完する必要があります。また、コースというのは大抵、両脇のシケインとの境目にラインが引いてあります。こういったアスファルトや芝生といった要素以外の装飾を、周りの要素の配置条件に応じて追加することで、よりコースらしい外観を作る事ができます。下のキャプチャが装飾やカーブの補完をかけている物と、コースデータをそのまま表示したものとの違いです。

まとめ

以上が今回作成したJS-Racingの主な技術解説になります。Webアプリケーションを構築するには、今回解説したように多くの技術が必要となります。ご紹介した技術は、たくさんある中から必要なものを取捨選択した結果ですので、当然コンテンツが変われば、必要となる技術も変わります。このコンテンツで使用した主な技術の全体図をまとめました。

オンラインレースゲームというシンプルな内容のコンテンツですが、プラットフォームとしてWebブラウザを使用している点に注目していただけると嬉しいです。今までご紹介した技術は、オンラインゲームを作るだけの技術ではなく、Webコンテンツを作る上で、大きな可能性を持っている技術になります。私はゲームを作る上でこれらの技術を利用していますが、Web上の様々なサービスと連携をとることで、もっと広がりを持つコンテンツを作ることができると思います。ぜひ皆さんも、HTML5とJavaScript（クライアントサイド、サーバサイド含む）を使って、Webアプリケーションを作ってみてください。

Web Starter Kitは、Googleが提供するマルチデバイスでのWeb開発をサポートするボイラープレート(HTMLのひな形)と、開発を補助するツール群です。
特に注目したいのが開発を補助するツール群で、このツールを使えば今どきのWeb開発のワークフローをすぐに取り入れることができます。

Web Starter Kitを開発の出発点とすることで、Web FundamentalsにあるWeb開発のベストプラクティスを取り入れられるながらスムーズ制作に入れるとともに、より効率的な開発を可能にします。

本記事では導入方法と機能の説明を中心に、Web Starter Kitの紹介をしていきます。

Web Starter Kitの導入

入手方法

Web Starter Kitの入手には2つの方法があります。一つはWeb Starter Kitのリポジトリからクローンする方法、もう一つは、Web Starter Kitのサイトからダウンロードする方法があります。

Web Starter Kitは現在Beta版で、アップデートが頻繁に行われています。リリースサイクルが早いため、Webページからのダウンロードの場合最新のバージョンではない可能性もあるのでリポジトリからのクローンをオススメします。

※ 執筆時点でのバージョンは 0.4.0 です。アップデートの変更点を把握するためにもWeb Starter KitのReleasesを定期的にチェックするといいでしょう。

フォルダとファイルの構成

フォルダ構成は以下のようになっています。

/
└── app
    ├── fonts
    ├── images
    ├── scripts
    ├── styleguide
    └── styles

Web Starter Kitのドキュメントルートとなるフォルダには、各種の設定ファイルが含まれています。開発する際の中心となるのは app フォルダ以下で、デフォルトでHTMLのひな形やWebフォントなど、いくつかのリソースが含まれています。

各フォルダの役目は以下のようになっています。

Web Starter Kitで用意されている各種の設定ファイルなどは、そのまま使うのではなく、各自が自分のスタイルに合わせてカスタマイズするとよいでしょう。ファビコンやスマートフォンでサイトをホーム画面に追加した際に表示されるアイコンなど、各自で差し替える必要があります。 humans.txtやrobots.txtなども使用する場合には適宜編集する必要があります。

動作環境の構築

Web Starter Kitに用意されたツールを使用するためには、以下の言語の環境が必要となります。

• Node.js (v0.10.x以上)
• Ruby (1.8.7以上)

これに加えて、以下のツールのインストールが必要になります。

• Nore.js上で動くタスクランナーのgulp (3.5.x以上)
• Sassのコンパイルを行うRubyのgem (3.3.x以上)

それぞれのインストール方法について、簡単に紹介していきます。

※ これらを既にインストール済みの場合は、このセクションは飛ばしてください。

Node.jsのインストール

Node.jsのバージョンは v0.10.x 以上が必要になります。すでにインストールしている場合は、$ node -vで現在のバージョンを確認してください。Node.jsのインストールはhttp://nodejs.org/にあるインストーラーを使うのが簡単です。

※ 「Node.jsのバージョンを管理したい」という場合には、nodebrewがオススメです。

Rubyのインストール

Macを利用している場合は、デフォルトでRubyがインストールされているので、そのまま利用することができます。（ただしその場合でも動作には 1.8.7 以上のバージョンが必要となりますので $ ruby -v で現在のバージョンを確認してください）

Windowsの場合にはRubyの公式サイトかRuby Installerなどからインストーラーを入手してインストールしてください。

Sassのインストール

Rubyのインストール後にSassのコンパイラをインストールします。インストールはRubyのパッケージマネージャのRubyGemsから行います。 コマンドラインツールから以下のコマンドを実行します。

$ gem install sass

※ もし権限に関するエラーが出た場合は、sudoをつけて実行してください。

インストール後、下記コマンドを実行してバージョン番号が表示されることを確認します。

$ sass -v

gulpのインストール

gulpは、Node.jsのパッケージマネージャであるnpmでインストールします。 インストールには、下記のコマンドを実行します。

$ npm install -g gulp

※ もし権限に関するエラーが出た場合は、sudoをつけて実行してください。

モジュールのインストール

最後に、タスクの実行に必要なモジュールをインストールします。Web Starter Kitをクローン(展開)したフォルダに移動して、下記のコマンドを実行します。

$ npm install ※ もし権限に関するエラーが出た場合は、sudoをつけて実行してください。

このコマンドを実行することで、動作に必要なモジュールがインストールされます。インストールされるモジュールは、同じフォルダにある package.jsonに書かれています。

以上で環境構築はおしまいです。

制作・開発

環境が揃えば制作に入れます。制作はひな形とするHTMLを選択することから始めます。

ひな形とするHTMLの選択

Web Starter Kitで用意されているひな形のHTMLは、index.htmlとbasic.htmlの2つがあります。

2つのHTMLの主な違いは以下の点です。

• マルチデバイス向けメニューの有無
• Web Starter Kitが用意しているCSSとJSファイルの読み込み

index.htmlには、マルチデバイス向けのドロワーメニュー用のリソース読み込みが指定されていて、初めからメニューのHTMLが書かれています。メニューをそのまま使う場合に、index.htmlを。プレーンな状態のHTMLから始めたい場合には、basic.htmlを使って制作を進めましょう。

UI Component

Web Starter Kitにはマルチデバイス向けのメニューのほかに、いくつかのUI Componentが用意されています。ボタンやアイコン、テーブルといったComponentのほかにGridシステムもあります。いずれのComponentもマルチデバイス向けに書かれており、レスポンシブ対応されています。Componentの一覧は、app/styleguide/index.htmlで確認することができます。

このComponent群は、Web Fundamentalsで使用されているComponentをまとめたもので、Googleのベストプラクティスが詰め込まれています。

UI Componentが用意されているWeb Starter Kitですが、GoogleはこれらのComponentを使うことを必ずしも推奨しているわけではありません。Web Starter Kitをベースに独自のスタイルを開発し、自分のStarter Kitを作っていきましょう。

gulpによる作業の自動化

Web Starter Kitには開発を補助するツールとして、gulp(Node.js製のタスクランナー)を採用しています。gulpを使えば様々な作業をタスク化し、自動化することができます。

用意されているタスクは以下の様なものです。

• ローカルサーバ
• マルチデバイスでのオートリロード
• Sassのコンパイル
• ベンダープレフィックスの付与
• HTML、CSS、JavaScriptの最適化とminify
• 画像の最適化
• PageSpeed Insightsによるパフォーマンス測定

これらのタスクを活用することでより効率的に開発を進めることができるでしょう。

タスクの実行

gulpのタスクを実行してみましょう。

gulpのタスクは、gulpfile.jsに書かれています。デフォルトで10数個のタスクが記述されていますが、主に使うのは4つです。それぞれを実行して試してみましょう。

ローカルサーバとファイルの監視

ローカルサーバを立ち上げ、各種ファイルの変更を監視してそれぞれのタスクを実行してくれます。 開発中はこのコマンドを実行しておくことになります。

$ gulp serve

コマンドを実行するとブラウザが立ち上がり、app フォルダをドキュメンルートとして、index.htmlが開かれます。

ローカルファイルに変更があった場合、BrowserSyncによって、変更がブラウザに反映されます。試しにトップページ(app/index.html)を編集して保存してみると、自動的にブラウザがリロードされ、最新の内容が反映されるのが確認できます。

ビルドして成果物を生成する

Sassのコンパイルや各種ファイルのminify、画像の最適化などを行うコマンドです。生成したファイルはdistフォルダに格納されます。

$ gulp

このコマンドは以下のようなタスクを含んでいます。

• CSSファイルの生成
  • Sassのコンパイル
  • ベンダープレフィックスの付与
  • 未使用セレクタの削除
  • 結合と縮小
• JSファイルの生成
  • 結合と難読化と縮小
• HTMLの縮小
• 画像の最適化

ビルドしたファイルをローカルサーバで確認する

serveタスクで、開発中のファイル(appフォルダ以下)をローカルサーバで確認しましたが、ビルドした結果を確認する場合には、以下のコマンドを使います。

$ gulp serve:dist

ビルドが行われた後にdistフォルダをドキュメントルートとしたローカルサーバが立ち上がります。

ページのパフォーマンスを確認する

Googleが提供するパフォーマンス診断ツールのPageSpeed Insightsで、Webページのパフォーマンスを測ることができます。

$ gulp pagespeed

このタスクではコマンドラインからPageSpeed Insightsの結果を取得できるpsi(PageSpped Insights for Node)が使われています。

注意したい点として、PageSpeed Insightsはパブリックなサイトしか測定できません。ページのパフォーマンス測定を行いたい場合には、ビルドした成果物をサーバにアップロードして公開状態にしておく必要があります。

測定するURLはgulpfie.jsにて設定することができます。

gulpタスク一覧

このほかにも、いくつかのタスクが用意されています。タスク一覧は以下の通りです。カスタマイズして使う場合には、これら既存のタスクを参考にすると良いでしょう。

それぞれのタスクは、$ gulp タスク名 という形式のコマンドで個別に実行することができます。

おわりに

今回は、Web Starter Kitの概要、機能などについて紹介しました。Web Starter Kitをうまく自身のワークフローに取り入れ、開発の出発点にすれば、開発を始める際の準備が軽減されるかもしれません。

ただし、プリプロセッサやAltJSなど、開発に使用するものは人によって様々です。そういった場合にはWeb Starter Kitをそのまま使うのではなく、カスタマイズしたり、一部だけを参考にしたりするだけでもよいでしょう。

Web Starter Kitはまだ始まったばかりのプロジェクトなので、多くの人にフィットするようになるにはまだ時間がかかるかもしれません。ですが頻繁に更新はされていて、今後はMaterial Designなどが取り込まれていく動きもありますので、要注目のプロジェクトです。

私は仕事では主にHTML/CSSコーディングを担当しているのですが、自分の書いたCSSがイケてるのか、そうでないのか、気になります。私、気になります！そうでなくても、他プロジェクトのCSSのレビューをお願いされたりすることもあるので、そのCSSがどのような状態であるのか、すばやく簡単に理解する必要性がありました。

そこで私は、StyleStatsというNode.js製のツールを作りました。

• t32k/stylestats – GitHub

StyleStatsの使い方はとても簡単です。ターミナルから下記コマンドを打てば、すぐにCSSを解析した結果が得られます。

$ npm install -g stylestats $ stylestats http://t32k.me/static/blog/skelton.css

stylestatsの引数に調べたいCSSファイルのパス（複数ファイル、リモートファイル対応）を入力すれば解析してくれます。

解析結果：

StyleStats! ┌─────────────────────────────────┬──────────────────────┐ │ Stylesheets │ 1 │ ├─────────────────────────────────┼──────────────────────┤ │ Size │ 15.1KB │ ├─────────────────────────────────┼──────────────────────┤ │ Rules │ 207 │ ├─────────────────────────────────┼──────────────────────┤ │ Selectors │ 424 │ ├─────────────────────────────────┼──────────────────────┤ │ Simplicity │ 48.82% │ ├─────────────────────────────────┼──────────────────────┤ │ Most Identifers │ 4 │ ├─────────────────────────────────┼──────────────────────┤ │ Most Identifers Selector │ nav ul li a │ ├─────────────────────────────────┼──────────────────────┤ │ Lowest Cohesion │ 24 │ ├─────────────────────────────────┼──────────────────────┤ │ Lowest Cohesion Selector │ a.button │ ├─────────────────────────────────┼──────────────────────┤ │ Total Unique Font Sizes │ 15 │ ├─────────────────────────────────┼──────────────────────┤ │ Unique Font Size │ 10px │ │ │ 11px │ ├─────────────────────────────────┼──────────────────────┤ │ Total Unique Colors │ 11 │ ├─────────────────────────────────┼──────────────────────┤ │ Unique Color │ #000 │ │ │ #777 │ ├─────────────────────────────────┼──────────────────────┤ │ Id Selectors │ 14 │ ├─────────────────────────────────┼──────────────────────┤ │ Universal Selectors │ 0 │ ├─────────────────────────────────┼──────────────────────┤ │ Unqualified Attribute Selectors │ 7 │ ├─────────────────────────────────┼──────────────────────┤ │ Javascript Specific Selectors │ 0 │ ├─────────────────────────────────┼──────────────────────┤ │ Important Keywords │ 6 │ ├─────────────────────────────────┼──────────────────────┤ │ Float Properties │ 4 │ ├─────────────────────────────────┼──────────────────────┤ │ Media Queries │ 8 │ ├─────────────────────────────────┼──────────────────────┤ │ Properties Count │ width: 53 │ │ │ padding-left: 32 │ └─────────────────────────────────┴──────────────────────┘

なぜCSSを解析する必要があるのか？

単純にCSSを記述することは非常に簡単です。スタイルを当てたいターゲットをセレクタで表現し、そのブロックの中にプロパティと値を宣言していくだけです。

この方法は閲覧するだけのドキュメントをスタイル付けするのには問題はなかったでしょう。しかし、現在、私たちが作っているWebサイトというのは単純に読むだけのドキュメントというよりかは、アプリケーションに近い性質があります。アプリケーションというのはユーザーがしてほしいタスクを実行するもので状態変化などを伴いますし、デスクトップアプリケーションを見れば分かる通り、ボタンのような多種多様なUIコンポーネントを必要とします。また、Webアプリケーションはひっきりなしにリニューアルされ、UIコンポーネントを修正したり、削除したり、追加する必要性があります。

Webアプリケーションを実現するために、従来のドキュメント型のサイトを構築してきたようなCSSの記述の仕方をしていれば、すぐさまCSSはスパゲッティ化することでしょう。そこで私たちは、CSSを書く上でのベストプラクティスを理解しなければなりません。

• Rules · stubbornella/csslint Wiki

基本的にはJSHintのように、CSSにもCSS Lintがあるので、こういったツールを使えばよいと思います。StyleStatsで出力される指標は、CSS Lintで指摘される項目を参考にしたものなので、StyleStatsを実行することで、そのベストプラクティスから自分のコードがどれだけ適応しているのか確認することができます。

CSSは基本的にUIに責任を持っているため、JavaScriptのように致命的なエラーになることが少ないかと思います。しかし、これがやっかいな問題だと思います。なんとなく使っていないコードが残っていたり、なんとなく非効率なセレクターを書いてたりして、問題が顕在化したときに対処しようと思っても、スパゲッティすぎてどうすることもできない（Command+A Delete!）ということがあります。

そうならないためにも、日々のコード品質チェックは欠かせないものと思います。

• es-analysis/plato
• Plato – JavaScript Introspection

JavaScriptにPlatoという解析ツールがあるのですが、ちょうどこれのCSS版となれるよう今後ともStyleStatsを開発していくつもりです。

各種指標の意味

単純にファイルサイズだけを見ていても、そのCSSが良いCSSなのか悪いCSSなのかよく分かりませんので、その他にもCSS Lintをベースとした指標があります。

$ stylestats -c path/to/.stylestatsrc

のように、.stylestatsrcといった設定JSONファイルを一緒に読み込むことで、指標の表示・非表示などカスタマイズできます。

今回解説する指標はv2.2.1時での指標となります。今後、変更や追加などが想定されますので、留意しておいてください。

Stylesheets

stylesheets : boolean

解析するスタイルシートの数。下記のように3つのファイルを解析すれば、この値は3になります。

$ stylestats path/to/foo.css path/to/bar.css path/to/baz.css

Size

"stylesheets": true

解析するスタイルシートのファイルサイズです。複数読み込んだ場合は、合計値となります（以後の指標に関しても同じ）。

Data Uri Size と　Raito Of Data Uri Size

"dataUriSize": true, "raitoOfDataUriSize": true,

スタイルシート内のインライン画像のサイズとスタイルシートに対する割合です。画像をインライン画像にすることでHTTPリクエストを抑えることができますが、外部CSSファイルがダウンロードされないとレンダリングが始まらないので、この数値が大きすぎるのもよくありません。

Gzipped Size

"gzippedSize": false

解析するスタイルシートのgzip後のファイルサイズです。処理が重いのでデフォルトでは、OFF(false)にしてあります。

Rules

"rules": true

ルール（宣言ブロック）の数です（上図参照）。

Selectors

"selectors": true

セレクタの数です（上図参照）。

Simplicity

"simplicity": true

Rules / Selectors をパーセンテージで表したものです。これは個人的に追加した指標なのですが、Sassの@extendなどで継承していると下記のような状態になったりします。もちろんこれはバッドプラクティス的な継承の使い方かと思います。

このようにならないためにも、1つのルールには1つのセレクタが対応しているほうが、シンプルで都合がよいかとおもいます。

Most Identifers と Most Identifers Selector

"mostIdentifers": true,　"mostIdentifersSelector": true

セレクタの中で最も識別子が多いセレクタとその数を表示します。

.foo .bar .baz { color: red; }

上記のセレクタの識別子は、3つとなります。これもSassのネストのような機能を使っていると、深くなる傾向がありますので、気をつけてください。

Lowest Cohesion と Lowest Cohesion Selector

"lowestCohesion": true, "lowestCohesionSelector": true

cohesionは凝集度のことです。凝集度に関してはWikipediaを参照。

凝集度（ぎょうしゅうど、コヒージョン、cohesion）とは、情報工学においてモジュール内のソースコードが特定の機能を提供すべく如何に協調しているかを表す度合いである。IPAが実施する情報処理技術者試験では、強度(きょうど、ストレングス、strength)という言葉が使われる。凝集度は順序尺度の一種であり、「凝集度が高い」とか「凝集度が低い」といった言い方で使われる。凝集度の高いモジュールは、堅牢性、信頼性、再利用性、読みやすさなどの点で好ましく、凝集度の低いモジュールは保守/評価/再利用/読解が難しいため、好ましくないとされる。

• 凝集度 – Wikipedia

Lowest Cohesionは、SOLID CSSのSingle Responsibility Principle / 単一責任の原則に由来していて、一つのルールにあまりいろいろなスタイルを詰め過ぎないほうがよいです。そこで、Lowest Cohesionは各ルール内で一番宣言数が多いルールのセレクタと宣言数を表します。

Total Unique Font Sizes と Unique Font Size

"totalUniqueFontSizes": true, "uniqueFontSize": true

ユニークなフォントサイズとその数です。現状、font-sizeプロパティで宣言されている値をとっています。fontプロパティによるショートカットで宣言されている値を取得できていません。

Total Unique Colors と Unique Color

"totalUniqueColors": true, "uniqueColor": true

ユニークなカラーとその数です、現状、colorプロパティで宣言されている値を取得しています。background-color、border-colorなどの値を含むかは検討中です。

ID Selectors

"idSelectors": true

IDセレクタを含むセレクタの数です。

Universal Selectors

"universalSelectors": true

ユニバーサルセレクタを含むセレクタの数です。

Unqualified Attribute Selectors

"unqualifiedAttributeSelectors": true

不適切な属性セレクタの数です。

.selected [type=text] { color: red; }

上記はこれに該当しますが、下記は該当しません。なぜならセレクタは右から左へと解析されるので、上記のセレクタの場合すべての要素をチェックするからです。

.selected [type=text] a { color: red; }

• Disallow unqualified attribute selectors · stubbornella/csslint Wiki

Javascript Specific Selectors

"javascriptSpecificSelectors": /[#\.]js\-/g

js-*のようなJavaScript専用のセレクタを含む数です。DOMをJavaScriptから操作する場合、id属性やclass属性をフックとして利用します。これらの属性値にはjs-*のような接頭辞をつけて、JavaScript専用のものとし、これらのセレクタにはスタイルを付与しないほうが、独立性を保てます。

デフォルトの接頭辞にはjs-*を指定していますが、任意の正規表現オブジェクトを渡すことで変更可能です。

参考：

• About HTML semantics and front-end architecture | en.ja Article

Important Keywords

"importantKeywords": true

!importantの宣言数です。

Float Properties

"floatProperties": true

floatプロパティの宣言数です。あれこれfloatしてレイアウトをこねくり回すより、最初からグリッドフレームワークの導入を考えたほうが得策な場合もあります。

• Disallow too many floats · stubbornella/csslint Wiki

Media Queries

"mediaQueries": true

Media Queriesの宣言数です。

Properties Count

"propertiesCount": 10

どのプロパティがどれだけ宣言されているのか、デフォルトではTop10までランキング出力してくれます。大体のCSSの傾向というか、見れて楽しいです。全部見たかったら、{"propertiesCount": 1000}といった風に指定すればよいです。個人的にこれが欲しかったので作ったという背景もあります。

v2.2.1では以上の指標ですが、こういった指標があったら便利だなとか、この指標はこうしたほうがよいなどありましたら、どんどんIssuesをあげてください。よろしくお願いします。

• Issues · t32k/stylestats

CIツールとの統合

stylestats path/to/stylesheet.css -t csv

という風にすればCSV形式で出力できるので、これを使ってJenkins CI上でファイルサイズの変遷など記録したいと思います。

• Plot with Jenkins · t32k/stylestats Wiki

CloudBees社のサービスを使えば、月100分までのビルドが無料でJenkinsをクラウド上で利用できるので、それで試すのもよいかと思います。

Jenkins上で、グラフを作るためにPlot Pluginをインストールします。このプラグインは、Java properties、CSV、XMLにファイルを読み込みんでグラフを生成してくれます。

あとは、NodeJS Pluginなどで、Node.jsとStyleStatsをインストールすれば準備完了です。

ビルドの処理にStyleStatsを実行し、CSVで出力し、ビルド後の処理でそのCSVを読み込んであげれば、完了です。

あとは、GitHubと連携してレポジトリにコミットしたら、ビルドを実行させるなどトリガを設定してもらえればと思います。

File Size:

Style Info:

あとはデータが貯まると、こんなかんじでグラフが生成されます。CSSのリファクタリングは地道な作業ですので、ファイルサイズだけでなく、セレクタ数やルール数など細かい指標の変遷をチェックしていれば、モチベーションも持続できるかと思います。ぜひとも、導入してみてください。

また、ローカルで確認したい場合はGrunt/Gulpプラグインもありますので、そちらを使ってもらえるとよいです。

• tvooo/grunt-stylestats
• 1000ch/gulp-stylestats

今後はtestspecファイルを認識できるようにし、例えばImpotant Keywordsが10個以上だったらテストを失敗させるといったことを、Jenkins・Travis-CIなどでできるようにしたいと思っています。

みなさんもぜひ使ってみてくださいね！

[追記] 2014年4月4日

• Online tool for StyleStats

オンラインでStyleStatsを使えるツールを公開しました。

こんにちは！ 前回はシグナリングサーバーを動かして、WebRTCでPeer-to-Peer通信をつなぐ処理を作りました。最後に書いた通り、前回の実装ではサーバーあたり2人だけしか同時に通知できません。今回はこれをもっと実用的にしていきましょう。 ※今回もNode学園祭2013で発表した内容と共通の部分が多いです。その時の資料も併せてご参照ください。

※こちらの記事は2014年に書かれました。2016年8月のアップデート記事がありますので、そちらもご参照ください。

複数会議室を作ろう

前回作ったのは、いわばカップル1組限定サイトのシングルテナントアプリでした（左）。これを複数組が共存できる、マルチテナント（複数会議室）のアプリに改造します（右）。

複数組が共存できない理由は、シグナリングの通信が同じシグナリングサーバーに接続している全員に飛んでしまうからです。これを混線しないように分離してあげる必要があります。シグナリングサーバーで利用しているsocket.ioでは、これを簡単に実現できるroom機能があります。

• roomに入室する… socket.join()
• roomから退室する… socket.leave()
• room内だけにメッセージを送る… socket.broadcast.to.emit()

まずクライアント側を一部手直しします。

function onOpened(evt) {
    console.log('socket opened.');
    socketReady = true;

    var roomname = getRoomName(); // 会議室名を取得する
    socket.emit('enter', roomname);
}

ソケット接続が確立したら、シグナリングサーバーに対して入室要求(enter)を送っています。ここでgetRoomName()はアプリケーション側で実装する部分で、何らかの方法で会議室名を取得して返します。 手抜きなサンプルとしてはこんな感じでしょうか。URLの?以降をそのまま切り出して返しています。

function getRoomName() { // たとえば、 URLに  ?roomname  とする
  var url = document.location.href;
  var args = url.split('?');
  if (args.length > 1) {
    var room = args[1];
    if (room != "") {
      return room;
    }
  }
  return "_defaultroom";
}

ついでにもう少し直しましょう。実は前回までのサンプルではカメラしかアクセスしていません。マイクはアクセスしていないので、声が聞こえません。今回はマイクも取得するように一カ所だけ修正します。※webkitGetUserMedia()の引数を変更

// start local video
  function startVideo() {
    navigator.webkitGetUserMedia({video: true, audio: true},  // <--- audio: true に変更
      function (stream) { // success
        localStream = stream;
        localVideo.src = window.webkitURL.createObjectURL(stream);
        localVideo.play();
        localVideo.volume = 0;
      },
      function (error) { // error
        console.error('An error occurred: [CODE ' + error.code + ']');
        return;
      }
    );
  }

※同一PC上で複数の2つのウィンドウ/タブを開いて通信する場合、ハウリングしやすいので音量を絞るか、ヘッドフォンを利用してください。

今度はシグナリングサーバー側も修正しましょう。クライアントからの入室要求(enter)に対応するのと、会議室内だけに通信する部分です。

// 入室
socket.on('enter', function(roomname) {
    socket.set('roomname', roomname);
    socket.join(roomname);
});

socket.on('message', function(message) {
  emitMessage('message', message);
});

socket.on('disconnect', function() {
  emitMessage('user disconnected');
});

// 会議室名が指定されていたら、室内だけに通知
function emitMessage(type, message) {
  var roomname;
  socket.get('roomname', function(err, _room) {  roomname = _room;  });

  if (roomname) {  socket.broadcast.to(roomname).emit(type, message);   }
  else {   socket.broadcast.emit(type, message);   }
}

シグナリングサーバーを起動しなおして、HTMLをリロードすれば、複数会議室に対応したマルチテナントアプリの完成です。 URLの後ろに ?room1 や ?room2 などのように会議室名を指定すれば、 その部屋の人と通信できます。

複数人で通信してみたい

次は2人だけでなく、複数人で同時に話せるようにしてみたいと思います。こんな感じです。

複数のPeer-to-Peer通信を扱うには

複数人と通信するには、クライアント側（ブラウザ側）に相手の数だけPeerConnectionが必要です。それを管理するための便宜上のクラスを作ります。 通信状況や、相手のID(socket.ioが割り振る）を保持します。

var MAX_CONNECTION_COUNT = 3;
var connections = {}; // Connection hash
function Connection() { // Connection Class
  var self = this;
  var id = "";  // socket.id of partner
  var peerconnection = null; // RTCPeerConnection instance
  var established = false; // is Already Established
  var iceReady = false;
}

function getConnection(id) {
  var con = null;
  con = connections[id];
  return con;
}

function addConnection(id, connection) {
  connections[id] = connection;
}

ついでに、複数のConnectionを格納する配列と、それを管理する関数群も用意します。ここに挙げた2つ以外に、getConnectionCount(), isConnectPossible(), deleteConnection(id), などなど。（詳細は最後に全ソースを掲載します）

シグナリングを手直し

シグナリングの流れも手直しが必要です。 今までのシグナリングでは、最初にOffer SDPを送る際に同じ部屋の全員に送っていました(broadcast)。すると全員からAnswer SDPが返ってきてしまうので、情報が衝突してしまいます。

そこで、まず部屋に誰が居るかを確認し(call-response)、一人ずつ個別にOffer-Answerのやり取りをする必要があります。

では、クライアント側のソースを直していきましょう。

function call() {
  if (! isLocalStreamStarted()) return;
  socket.json.send({type: "call"});
}

function onMessage(evt) {
  var id = evt.from;
  var target = evt.sendto;
  var conn = getConnection(id);

  if (evt.type === 'call') {
    if (! isLocalStreamStarted()) return;
    if (conn) return;  // already connected

    if (isConnectPossible()) {
      socket.json.send({type: "response", sendto: id });
    }
    else {   console.warn('max connections. so ignore call');     }
  }
  else if (evt.type === 'response') {
    sendOffer(id);
    return;
  }
}

call()で全員にbroadcastし、受け取った側はonMessage()の中でcallを受け取ると、responseを相手を特定して送り返します。発信側はreponseを受け取ると、その相手に対してoffer SDPを送っています。 sendOffer()の中身もちょっと変わります。

function sendOffer(id) {
  var conn = getConnection(id); // <--- すでに作成済のコネクションを探す
  if (!conn) {
    conn = prepareNewConnection(id);
  }

  conn.peerconnection.createOffer(function (sessionDescription) { // in case of success
    conn.iceReady = true;
    conn.peerconnection.setLocalDescription(sessionDescription);
    sessionDescription.sendto = conn.id; // <--- 送る相手を指定する
    sendSDP(sessionDescription);
  }, function () { // in case of error
    console.log("Create Offer failed");
  }, mediaConstraints);
  conn.iceReady = true;
}

同様に、sendAnswer()もちょっと変えます。複数のコネクションに対応するのと、送る相手を指定するのが変更点です。

function sendAnswer(evt) {
  console.log('sending Answer. Creating remote session description...' );
  var id = evt.from;
  var conn = getConnection(id); // <--- すでに作成済のコネクションを探す
  if (! conn) {
    console.error('peerConnection not exist!');
    return
  }

  conn.peerconnection.createAnswer(function (sessionDescription) { 
    // in case of success
    conn.iceReady = true;
    conn.peerconnection.setLocalDescription(sessionDescription);
    sessionDescription.sendto = id; // <--- 送る相手を指定する
    sendSDP(sessionDescription);
  }, function () { // in case of error
    console.log("Create Answer failed");
  }, mediaConstraints);
  conn.iceReady = true;
}

さらに、SDPを覚える処理も複数セッションに対応させます。

function setOffer(evt) {
  var id = evt.from;
  var conn = getConnection(id);
  if (! conn) {
    conn = prepareNewConnection(id);
    conn.peerconnection.setRemoteDescription(new RTCSessionDescription(evt));
  }
  else {
    console.error('peerConnection alreay exist!');
  }
}

function setAnswer(evt) {
  var id = evt.from;
  var conn = getConnection(id);
  if (! conn) {
    console.error('peerConnection not exist!');
    return
  }
  conn.peerconnection.setRemoteDescription(new RTCSessionDescription(evt));
}

引き続きConnectionを生成する処理も修正します。今まではPeerConnectionを直接返していましたが、今回はConnectionのインスタンスを生成し、そこにPeerConnectionを保持させます。また、Candidateの送信時にも相手先を指定します。

function prepareNewConnection(id) {
  var pc_config = {"iceServers":[]};
  var peer = null;
  try {
    peer = new webkitRTCPeerConnection(pc_config);
  } catch (e) {
    console.log("Failed to create PeerConnection, exception: " + e.message);
  }
  var conn = new Connection();  // <--- Connectionを作成し、PeerConnectionを保持させる
  conn.id = id;
  conn.peerconnection = peer;
  peer.id = id;
  addConnection(id, conn);

  // send any ice candidates to the other peer
  peer.onicecandidate = function (evt) {
  if (evt.candidate) {
    console.log(evt.candidate);
    sendCandidate({type: "candidate", 
                          sendto: conn.id, // <-- 送信先を指定
                          sdpMLineIndex: evt.candidate.sdpMLineIndex,
                          sdpMid: evt.candidate.sdpMid,
                          candidate: evt.candidate.candidate});
    } else {
      console.log("End of candidates. ------------------- phase=" + evt.eventPhase);
      conn.established = true;
    }
  };

  // ...
}

Candidateの送信部分を変更したので、Candidateを受信した処理も変更しましょう。 onCandidate()も複数コネクションに対応させます。

function onCandidate(evt) {
  var id = evt.from;
  var conn = getConnection(id);
  if (! conn) {
    console.error('peerConnection not exist!');
    return;
  }
    
  // --- check if ice ready ---
  if (! conn.iceReady) {
    console.warn("PeerConn is not ICE ready, so ignore");
    return;
  }
	  
  var candidate = new RTCIceCandidate({sdpMLineIndex:evt.sdpMLineIndex, sdpMid:evt.sdpMid, candidate:evt.candidate});
  console.log("Received Candidate...")
  console.log(candidate);
  conn.peerconnection.addIceCandidate(candidate);
}

さてさて、クライアント側の修正はいったん終わりにして、次はシグナリングサーバー側を修正します。前半では部屋の中だけに送信する機能を加えましたが、次は特定の相手にだけ送信できるようにします。

socket.on('message', function(message) {
    // 送信元のidをメッセージに追加（相手が分かるように）
    message.from = socket.id;

    // 送信先が指定されているか？
    var target = message.sendto;
    if (target) {
      // 送信先が指定されていた場合は、その相手のみに送信
      io.sockets.socket(target).emit('message', message);
      return;
    }

    // 特に指定がなければ、ブロードキャスト
    emitMessage('message', message);
  });

ここまででいったん動かしてみましょう。まだ映像が2人までしか出ませんが、通信はできるはずです。

複数の映像を扱えるようにしよう

ここまでで複数人相手に通信をできるようにしました。でも通信できても映像は見えていません。ちゃんと見えるようにしましょう。 まずHTMLに複数のvideoタグを配置します。

<div style="position: relative;">
   <video id="local-video" autoplay style="width: 240px; height: 180px; border: 1px solid black;"></video>
   <!-- <video id="remote-video" autoplay style="width: 240px; height: 180px; border: 1px solid black;"></video> -->
   <video id="webrtc-remote-video-0" autoplay style="position: absolute; top: 250px; left: 0px; width: 320px; height: 240px; border: 1px solid black; "></video>
   <video id="webrtc-remote-video-1" autoplay style="position: absolute; top: 250px; left: 330px; width: 320px; height: 240px; border: 1px solid black; "></video>
   <video id="webrtc-remote-video-2" autoplay style="position: absolute; top: 0px; left: 330px; width: 320px; height: 240px; border: 1px solid black; " ></video>
  </div>

その複数のvideoタグを扱えるような関数群を追加します。※本当は動的にタグを作成、削除するのがかっこいいのですが…。

var localVideo = document.getElementById('local-video');
  //var remoteVideo = document.getElementById('remote-video');
  var localStream = null;
  var mediaConstraints = {'mandatory': {'OfferToReceiveAudio':false, 'OfferToReceiveVideo':true }};

  // ---- multi people video & audio ----
  var videoElementsInUse = {};
  var videoElementsStandBy = {};
  pushVideoStandBy(getVideoForRemote(0));
  pushVideoStandBy(getVideoForRemote(1));
  pushVideoStandBy(getVideoForRemote(2));


  function getVideoForRemote(index) {
    var elementID = 'webrtc-remote-video-' + index;
    var element = document.getElementById(elementID);
    return element;
  }

  function getAudioForRemote(index) {
    var elementID = 'webrtc-remote-audio-' + index;
    var element = document.getElementById(elementID);
    return element;
  }

  // ---- video element management ---
  function pushVideoStandBy(element) {
    videoElementsStandBy[element.id] = element;
  }

  function popVideoStandBy() {
    var element = null;
    for (var id in videoElementsStandBy) {
      element = videoElementsStandBy[id];
      delete videoElementsStandBy[id];
      return element;
    }
    return null;
  }

  function pushVideoInUse(id, element) {
    videoElementsInUse[id] = element;
  }

  function popVideoInUse(id) {
    element = videoElementsInUse[id];
    delete videoElementsInUse[id];
    return element;
  }

  function attachVideo(id, stream) {
    console.log('try to attach video. id=' + id);
    var videoElement = popVideoStandBy();
    if (videoElement) {
      videoElement.src = window.URL.createObjectURL(stream);
      console.log("videoElement.src=" + videoElement.src);
      pushVideoInUse(id, videoElement);
      videoElement.style.display = 'block';
    }
    else {
      console.error('--- no video element stand by.');
    }
  }

  function detachVideo(id) {
    console.log('try to detach video. id=' + id);
    var videoElement = popVideoInUse(id);
    if (videoElement) {
      videoElement.pause();
      videoElement.src = "";
      console.log("videoElement.src=" + videoElement.src);
      pushVideoStandBy(videoElement);
    }
    else {
      console.warn('warning --- no video element using with id=' + id);
    }
  }

  // ...

※ソース全体は最後に記載します。

これで準備が整いました。早速接続してみましょう。 [Start video]ボタンを押して、[Connect]を押す、という操作を一人ずつ行ってください。一人、また一人と接続され、最大4人まで通信できます。

補足 （2014/03/09追記）

Twitter経由でご指摘をいただきました。User B/Cからresponseではなく、Offerを送れば良いのでは？
アドバイスに従うと、次のように改善されます。

• 現状：User Aからcall, User B/Cからresponse, User AからOffer, User B/CからAnswer
• 改善：User Aからcallme, User B/CからOffer, User AからAnswer

確かにその通りです。メッセージのやり取りが片道分少なくなり、すっきりしますね。 ご指摘ありがとうございました。

次回は

次回は最終回の予定です。NATやFirewallを越えて通信するための、STUN/TURNについて説明したいと思います。

今回のソースコード

シグナリングサーバー (node.js)

var port = 9001;
var io = require('socket.io').listen(port);
console.log((new Date()) + " Server is listening on port " + port);

io.sockets.on('connection', function(socket) {
  // 入室
  socket.on('enter', function(roomname) {
    socket.set('roomname', roomname);
    socket.join(roomname);
  });
 
  socket.on('message', function(message) {
    // 送信元のidをメッセージに追加（相手が分かるように）
    message.from = socket.id;

    // 送信先が指定されているか？
    var target = message.sendto;
    if (target) {
	　　// 送信先が指定されていた場合は、その相手のみに送信
      io.sockets.socket(target).emit('message', message);
      return;
    }

	// 特に指定がなければ、ブロードキャスト
    emitMessage('message', message);
  });
 
  socket.on('disconnect', function() {
    emitMessage('user disconnected');
  });
 
  // 会議室名が指定されていたら、室内だけに通知
  function emitMessage(type, message) {
    var roomname;
    socket.get('roomname', function(err, _room) {  roomname = _room;  });
 
    if (roomname) {  socket.broadcast.to(roomname).emit(type, message);   }
    else {   socket.broadcast.emit(type, message);   }
  }
});

クライアント側 (HTML, JavaScript)

<!DOCTYPE html>
<html>
<head>
  <title>WebRTC 4</title>  
</head>
<body>
  <button type="button" onclick="startVideo();">Start video</button>
  <button type="button" onclick="stopVideo();">Stop video</button>
  &nbsp;&nbsp;&nbsp;&nbsp;
  <!-- <button type="button" onclick="connect();">Connect</button> -->
  <button type="button" onclick="call();">Connect</button>
  <button type="button" onclick="hangUp();">Hang Up</button>
  <br />
  <div style="position: relative;">
   <video id="local-video" autoplay style="width: 240px; height: 180px; border: 1px solid black;"></video>
   <!-- <video id="remote-video" autoplay style="width: 240px; height: 180px; border: 1px solid black;"></video> -->
   <video id="webrtc-remote-video-0" autoplay style="position: absolute; top: 250px; left: 0px; width: 320px; height: 240px; border: 1px solid black; "></video>
   <video id="webrtc-remote-video-1" autoplay style="position: absolute; top: 250px; left: 330px; width: 320px; height: 240px; border: 1px solid black; "></video>
   <video id="webrtc-remote-video-2" autoplay style="position: absolute; top: 0px; left: 330px; width: 320px; height: 240px; border: 1px solid black; " ></video>
  </div>
  
  <!---
  <p>
   SDP to send:<br />
   <textarea id="text-for-send-sdp" rows="5" cols="100" disabled="1">SDP to send</textarea>
  </p>
  <p>
   SDP to receive:<br />
   <textarea id="text-for-receive-sdp" rows="5" cols="100"></textarea><br />
   <button type="button" onclick="onSDP();">Receive SDP</button>
  </p>
  
  <p>
   ICE Candidate to send:<br />
   <textarea id="text-for-send-ice" rows="5" cols="100" disabled="1">ICE Candidate to send</textarea>
  </p>
  <p>  
   ICE Candidates to receive:<br />
   <textarea id="text-for-receive-ice" rows="5" cols="100"></textarea><br />
   <button type="button" onclick="onICE();">Receive ICE Candidates</button>
  </p>
  --->
  
  <!---- socket ------>
  <script src="http://localhost:9001/socket.io/socket.io.js"></script>
  
  <script>
  var localVideo = document.getElementById('local-video');
  //var remoteVideo = document.getElementById('remote-video');
  var localStream = null;
  var mediaConstraints = {'mandatory': {'OfferToReceiveAudio':false, 'OfferToReceiveVideo':true }};

  // ---- multi people video & audio ----
  var videoElementsInUse = {};
  var videoElementsStandBy = {};
  pushVideoStandBy(getVideoForRemote(0));
  pushVideoStandBy(getVideoForRemote(1));
  pushVideoStandBy(getVideoForRemote(2));


  function getVideoForRemote(index) {
    var elementID = 'webrtc-remote-video-' + index;
    var element = document.getElementById(elementID);
    return element;
  }

  // ---- video element management ---
  function pushVideoStandBy(element) {
    videoElementsStandBy[element.id] = element;
  }

  function popVideoStandBy() {
    var element = null;
    for (var id in videoElementsStandBy) {
      element = videoElementsStandBy[id];
      delete videoElementsStandBy[id];
      return element;
    }
    return null;
  }

  function pushVideoInUse(id, element) {
    videoElementsInUse[id] = element;
  }

  function popVideoInUse(id) {
    element = videoElementsInUse[id];
    delete videoElementsInUse[id];
    return element;
  }

  function attachVideo(id, stream) {
    console.log('try to attach video. id=' + id);
    var videoElement = popVideoStandBy();
    if (videoElement) {
      videoElement.src = window.URL.createObjectURL(stream);
      console.log("videoElement.src=" + videoElement.src);
      pushVideoInUse(id, videoElement);
      videoElement.style.display = 'block';
    }
    else {
      console.error('--- no video element stand by.');
    }
  }

  function detachVideo(id) {
    console.log('try to detach video. id=' + id);
    var videoElement = popVideoInUse(id);
    if (videoElement) {
      videoElement.pause();
      videoElement.src = "";
      console.log("videoElement.src=" + videoElement.src);
      pushVideoStandBy(videoElement);
    }
    else {
      console.warn('warning --- no video element using with id=' + id);
    }
  }

  function detachAllVideo() {
    var element = null;
    for (var id in videoElementsInUse) {
      detachVideo(id);
    }
  }

  function getFirstVideoInUse() {
    var element = null;
    for (var id in videoElementsInUse) {
      element = videoElementsInUse[id];
      return element;
    }
    return null;
  }

  function getVideoCountInUse() {
    var count = 0;
    for (var id in videoElementsInUse) {
      count++;
    }
    return count;
  }
  
  
  function isLocalStreamStarted() {
    if (localStream) {
      return true;
    }
    else {
      return false;
    }
  }

  // -------------- multi connections --------------------
  var MAX_CONNECTION_COUNT = 3;
  var connections = {}; // Connection hash
  function Connection() { // Connection Class
    var self = this;
    var id = "";  // socket.id of partner
    var peerconnection = null; // RTCPeerConnection instance
    var established = false; // is Already Established
    var iceReady = false;
  }

  function getConnection(id) {
    var con = null;
    con = connections[id];
    return con;
  }

  function addConnection(id, connection) {
    connections[id] = connection;
  }

  function getConnectionCount() {
    var count = 0;
    for (var id in connections) {
      count++;
    }

    console.log('getConnectionCount=' + count);
    return count;
  }

  function isConnectPossible() {
    if (getConnectionCount() < MAX_CONNECTION_COUNT)
      return true;
    else
      return false;
  }

  function getConnectionIndex(id_to_lookup) {
    var index = 0;
    for (var id in connections) {
      if (id == id_to_lookup) {
        return index;
      }

      index++;
    }

    // not found
    return -1;
  }

  function deleteConnection(id) {
    delete connections[id];
  }

  function stopAllConnections() {
    for (var id in connections) {
      var conn = connections[id];
      conn.peerconnection.close();
      conn.peerconnection = null;
      delete connections[id];
    }
  }

  function stopConnection(id) {
    var conn = connections[id];
    if(conn) {
      console.log('stop and delete connection with id=' + id);
      conn.peerconnection.close();
      conn.peerconnection = null;
      delete connections[id];
    }
    else {
      console.log('try to stop connection, but not found id=' + id);
    }
  }

  function isPeerStarted() {
    if (getConnectionCount() > 0) {
      return true;
    }
    else {
      return false;
    }
  }

  
  // ---- socket ------
  // create socket
  var socketReady = false;
  var port = 9001;
  var socket = io.connect('http://localhost:/' + port + '/');
  
  // socket: channel connected
  socket.on('connect', onOpened)
        .on('message', onMessage);

  function onOpened(evt) {
    console.log('socket opened.');
    socketReady = true;
	
    var roomname = getRoomName(); // 会議室名を取得する
    socket.emit('enter', roomname);
	console.log('enter to ' + roomname);
  }

  // socket: accept connection request
  function onMessage(evt) {
    var id = evt.from;
    var target = evt.sendto;
    var conn = getConnection(id);

    if (evt.type === 'call') {
      if (! isLocalStreamStarted()) {
	    return;
	  }
      if (conn) {
	    return;  // already connected
	  }

      if (isConnectPossible()) {
        socket.json.send({type: "response", sendto: id });
      }
      else {
	    console.warn('max connections. so ignore call'); 
	  }
	  return;
    }
    else if (evt.type === 'response') {
      sendOffer(id);
      return;
    } else if (evt.type === 'offer') {
      console.log("Received offer, set offer, sending answer....")
      onOffer(evt);	  
    } else if (evt.type === 'answer' && isPeerStarted()) {  // **
      console.log('Received answer, settinng answer SDP');
	  onAnswer(evt);
    } else if (evt.type === 'candidate' && isPeerStarted()) { // **
      console.log('Received ICE candidate...');
	  onCandidate(evt);
    } else if (evt.type === 'user dissconnected' && isPeerStarted()) { // **
      console.log("disconnected");
      //stop();
	  detachVideo(id); // force detach video
      stopConnection(id);
    }
  }

  function getRoomName() { // たとえば、 URLに  ?roomname  とする
    var url = document.location.href;
    var args = url.split('?');
    if (args.length > 1) {
      var room = args[1];
      if (room != "") {
        return room;
      }
    }
    return "_defaultroom";
  }
  
  // ----------------- handshake --------------
  //var textForSendSDP = document.getElementById('text-for-send-sdp');
  //var textForSendICE = document.getElementById('text-for-send-ice');
  //var textToReceiveSDP = document.getElementById('text-for-receive-sdp');
  //var textToReceiveICE = document.getElementById('text-for-receive-ice');
  //var iceSeparator = '------ ICE Candidate -------';
  //var CR = String.fromCharCode(13);
  
  /*--
  function onSDP() {
    var text = textToReceiveSDP.value;
	var evt = JSON.parse(text);
	if (peerConnection) {
	  onAnswer(evt);
	}
	else {
	  onOffer(evt);
	}
	
	//textToReceiveSDP.value ="";
  }
  --*/
  
  //--- multi ICE candidate ---
  /*--
  function onICE() {
    var text = textToReceiveICE.value;
	var arr = text.split(iceSeparator);
	for (var i = 1, len = arr.length; i < len; i++) {
      var evt = JSON.parse(arr[i]);
	  onCandidate(evt);
    }

	textToReceiveICE.value ="";
  }
  ---*/
  
  
  function onOffer(evt) {
    console.log("Received offer...")
	console.log(evt);
    setOffer(evt);
	sendAnswer(evt);
	//peerStarted = true; --
  }
  
  function onAnswer(evt) {
    console.log("Received Answer...")
	console.log(evt);
	setAnswer(evt);
  }
  
  function onCandidate(evt) {
	var id = evt.from;
    var conn = getConnection(id);
    if (! conn) {
	  console.error('peerConnection not exist!');
	  return;
	}
    
    // --- check if ice ready ---
    if (! conn.iceReady) {
      console.warn("PeerConn is not ICE ready, so ignore");
      return;
    }
	  
    var candidate = new RTCIceCandidate({sdpMLineIndex:evt.sdpMLineIndex, sdpMid:evt.sdpMid, candidate:evt.candidate});
    console.log("Received Candidate...")
	console.log(candidate);
    conn.peerconnection.addIceCandidate(candidate);
  }

  function sendSDP(sdp) {
    var text = JSON.stringify(sdp);
	console.log("---sending sdp text ---");
	console.log(text);
	//textForSendSDP.value = text;
	
	// send via socket
	socket.json.send(sdp);
  }
  
  function sendCandidate(candidate) {
    var text = JSON.stringify(candidate);
	console.log("---sending candidate text ---");
	console.log(text);
	//textForSendICE.value = (textForSendICE.value + CR + iceSeparator + CR + text + CR);
	//textForSendICE.scrollTop = textForSendICE.scrollHeight;
	
	// send via socket
	socket.json.send(candidate);
  }
  
  // ---------------------- video handling -----------------------
  // start local video
  function startVideo() {
	navigator.webkitGetUserMedia({video: true, audio: true},
     function (stream) { // success
      localStream = stream;
      localVideo.src = window.webkitURL.createObjectURL(stream);
      localVideo.play();
	  localVideo.volume = 0;
     },
     function (error) { // error
      console.error('An error occurred:');
      console.error(error);
      return;
     }
	);
  }

  // stop local video
  function stopVideo() {
    localVideo.src = "";
    localStream.stop();
  }

  // ---------------------- connection handling -----------------------
  function prepareNewConnection(id) {
    var pc_config = {"iceServers":[]};
    var peer = null;
    try {
      peer = new webkitRTCPeerConnection(pc_config);
    } catch (e) {
      console.log("Failed to create PeerConnection, exception: " + e.message);
    }
    var conn = new Connection();
    conn.id = id;
    conn.peerconnection = peer;
    peer.id = id;
    addConnection(id, conn);

    // send any ice candidates to the other peer
    peer.onicecandidate = function (evt) {
      if (evt.candidate) {
        console.log(evt.candidate);
        sendCandidate({type: "candidate", 
                          sendto: conn.id,
                          sdpMLineIndex: evt.candidate.sdpMLineIndex,
                          sdpMid: evt.candidate.sdpMid,
                          candidate: evt.candidate.candidate});
      } else {
        console.log("End of candidates. ------------------- phase=" + evt.eventPhase);
        conn.established = true;
      }
    };

    console.log('Adding local stream...');
    peer.addStream(localStream);

    peer.addEventListener("addstream", onRemoteStreamAdded, false);
    peer.addEventListener("removestream", onRemoteStreamRemoved, false)

    // when remote adds a stream, hand it on to the local video element
    function onRemoteStreamAdded(event) {
      console.log("Added remote stream");
      attachVideo(this.id, event.stream);
	  //remoteVideo.src = window.webkitURL.createObjectURL(event.stream);
    }

    // when remote removes a stream, remove it from the local video element
    function onRemoteStreamRemoved(event) {
      console.log("Remove remote stream");
      detachVideo(this.id);
	  //remoteVideo.pause();
      //remoteVideo.src = "";
    }

    return conn;
  }

  function sendOffer(id) {
	var conn = getConnection(id);
    if (!conn) {
      conn = prepareNewConnection(id);
    }

	conn.peerconnection.createOffer(function (sessionDescription) { // in case of success
      conn.iceReady = true;
      conn.peerconnection.setLocalDescription(sessionDescription);
      sessionDescription.sendto = id;
	  sendSDP(sessionDescription);
    }, function () { // in case of error
      console.log("Create Offer failed");
    }, mediaConstraints);
    conn.iceReady = true;
  }

  function setOffer(evt) {
	var id = evt.from;
    var conn = getConnection(id);
    if (! conn) {
      conn = prepareNewConnection(id);
      conn.peerconnection.setRemoteDescription(new RTCSessionDescription(evt));
    }
	else {
	  console.error('peerConnection alreay exist!');
	}
  }
  
  function sendAnswer(evt) {
    console.log('sending Answer. Creating remote session description...' );
	var id = evt.from;
    var conn = getConnection(id);
    if (! conn) {
	  console.error('peerConnection not exist!');
	  return
    }

    conn.peerconnection.createAnswer(function (sessionDescription) { 
      // in case of success
      conn.iceReady = true;
      conn.peerconnection.setLocalDescription(sessionDescription);
      sessionDescription.sendto = id;
	  sendSDP(sessionDescription);
    }, function () { // in case of error
      console.log("Create Answer failed");
    }, mediaConstraints);
    conn.iceReady = true;
  }

  function setAnswer(evt) {
	var id = evt.from;
    var conn = getConnection(id);
    if (! conn) {
	  console.error('peerConnection not exist!');
	  return
    }
    conn.peerconnection.setRemoteDescription(new RTCSessionDescription(evt));
  }
  
  // -------- handling user UI event -----
  /*-----
  // start the connection upon user request
  function connect() {
    if (!peerStarted && localStream && socketReady) { // **
	//if (!peerStarted && localStream) { // --
      sendOffer();
      peerStarted = true;
    } else {
      alert("Local stream not running yet - try again.");
    }
  }
  ----------*/
  
  // call others before connecting peer
  function call() {
    if (! isLocalStreamStarted()) {
      alert("Local stream not running yet. Please [Start Video] or [Start Screen].");
      return;
    }
    if (! socketReady) {
      alert("Socket is not connected to server. Please reload and try again.");
      return;
    }

    // call others, in same room
    console.log("call others in same room, befeore offer");
    socket.json.send({type: "call"});
  }
  
  // stop the connection upon user request
  function hangUp() {
    console.log("Hang up.");
    socket.json.send({type: "bye"});
    detachAllVideo();
    stopAllConnections();
  }

  /*--
  function stop() {
    peerConnection.close();
    peerConnection = null;
    //peerStarted = false; --
  }
  --*/

  
  </script>
</body>
</html>

こんにちは！ がねこまさしです。前回はWebRTCの通信を手動でつなぎましたが、今回は仲介役のサーバーを作ってみましょう。

※今回の内容は、Node学園祭2013で発表した内容(の一部)とほぼ同じです。その時の資料もご参照ください。

※こちらの記事は2014年に書かれました。2016年7月のアップデート記事がありますので、そちらもご参照ください。

シグナリングサーバーを立てよう

前回は手動でコピー＆ペーストしてシグナリングを実現しました。今回はそれを楽にしましょう。

シグナリングサーバーはどうして必要なの？

シグナリングの過程では、お互いのIPアドレスやポート番号を渡す必要があります。この段階ではお互いIPアドレスを知らないので直接やりとりできません。そこで、仲介役となるシグナリングサーバーが必要となります。このサーバーは、どちらブラウザもIPアドレスを知っていることが前提となります。

つまり、Peer-to-Peer通信の開始前には、普通のサーバー/クライアント型の通信が行わることになります。

Node.jsを準備しよう

今回はシグナリング処理をWebSocketを使って実現してみます。ソケットの処理が実現できればどのような言語でも構わないのですが、メッセージング処理が得意なNode.jsを使うことにします。 Node.jsのインストーラーをこちらのサイトから入手し、手順に従ってインストールしてください。Windows,Mac OS X,Linux用のバイナリが用意されています。今回のサンプルはv0.10.15で動作確認していますが、v0.10.x系ならばそのまま動くはずです。

Node.jsのインストールが完了したら、こんどはWebSocket用のモジュールをインストールします。コマンドプロンプト/ターミナルから、 次のコマンドを実行してください。 ※必要に応じて、sudoなどをご利用ください。

npm install socket.io

socket.ioは、異なる種類のブラウザ間の通信を簡単に行えるようにしてくれるモジュールです。異なる複数の通信方式をサポートしています。

• ‘websocket’ , ‘flashsocket’ , ‘htmlfile’ , ‘xhr-polling’ , ‘jsonp-polling’

シグナリングサーバーを動かそう

次のコードを好きなファイル名で保存してください。（例えば signaling.js)

var port = 9001;
var io = require('socket.io').listen(port);
console.log((new Date()) + " Server is listening on port " + port);

io.sockets.on('connection', function(socket) {
  socket.on('message', function(message) {
    socket.broadcast.emit('message', message);
  });

  socket.on('disconnect', function() {
    socket.broadcast.emit('user disconnected');
  });
});

起動するにはコマンドプロンプト/ターミナルから、 次のコマンドを実行してください。

node signaling.js

シグナリングサーバーの動作は単純で、右からきたメッセージをそのまま左に流すだけです。

シグナリング処理を変更しよう

それでは前回のHTMLを、少しずつ変更して行きましょう。まず、socket.ioのクライアント用JavaScriptを読み込みます。localhostの部分は、実際のシグナリングサーバーに変更してください。

<script src="http://localhost:9001/socket.io/socket.io.js"></script>

次に、socket.ioの接続、通信処理をJavaScriptに追加します。

// ---- socket ------
  // create socket
  var socketReady = false;
  var port = 9001;
  var socket = io.connect('http://localhost:/' + port + '/');
  // socket: channel connected
  socket.on('connect', onOpened)
        .on('message', onMessage);

  function onOpened(evt) {
    console.log('socket opened.');
    socketReady = true;
  }

  // socket: accept connection request
  function onMessage(evt) {
    if (evt.type === 'offer') {
      console.log("Received offer, set offer, sending answer....")
      onOffer(evt);	  
    } else if (evt.type === 'answer' && peerStarted) {
      console.log('Received answer, settinng answer SDP');
      onAnswer(evt);
    } else if (evt.type === 'candidate' && peerStarted) {
      console.log('Received ICE candidate...');
      onCandidate(evt);
    } else if (evt.type === 'user dissconnected' && peerStarted) {
      console.log("disconnected");
      stop();
    }
  }

重要なのはonMessage()の処理で、Offer SDP,Answer SDP,ICE Candidateのそれぞれに対応して、前回用意したOnOffer(), onAnswer(), onCandidate()を呼び出しています。

今度は実際にSDP/ICE Candidateを送る部分を変更します。前回はテキストエリアに表示するだけでしたが、今回はそれをsocket.io経由で送信します。

function sendSDP(sdp) {
    var text = JSON.stringify(sdp);
	console.log("---sending sdp text ---");
	console.log(text);
	textForSendSDP.value = text;
	
	// send via socket
	socket.json.send(sdp); // <--- ここを追加
  }
  
  function sendCandidate(candidate) {
    var text = JSON.stringify(candidate);
	console.log("---sending candidate text ---");
	console.log(text);
	textForSendICE.value = (textForSendICE.value + CR + iceSeparator + CR + text + CR);
	textForSendICE.scrollTop = textForSendICE.scrollHeight;
	
	// send via socket
	socket.json.send(candidate); // <--- ここを追加
  }

最後は、ちょっとしたフラグの処理の追加です。

function onOffer(evt) {
    console.log("Received offer...")
    console.log(evt);
    setOffer(evt);
    sendAnswer(evt);
    peerStarted = true;  // <--- ここを追加
  }

  // start the connection upon user request
  function connect() {
    if (!peerStarted && localStream && socketReady) { // <--- ここを変更
      sendOffer();
      peerStarted = true;
    } else {
      alert("Local stream not running yet - try again.");
    }
  }

  function stop() {
    peerConnection.close();
    peerConnection = null;
    peerStarted = false;  // <--- ここを追加
  }

実際に動かしてみよう

シグナリングサーバーが動いてることを確認したら、Chromeのウィンドウを2つ開いて修正したHTMLを読み込んでください。

(1) 両方のウィンドウで[Start video]ボタンをクリックします。カメラのアクセスを許可すると、それぞれリアルタイムの映像が表示されます。


(2) どちらかのウィンドウで[Connect]ボタンを押します。SDP, ICE Candidateが自動で交換され、ビデオ通信が始まります。

前回の14ステップに比べて、ぐっと減って2ステップになりました。これなら使えそうですね。

シグナリングの流れを追ってみる

シグナリングの流れを追跡してみましょう。前回はコード上を追っかけたので、今回は流れを図で見てみます。

SDPの交換

SDPのOffer, Answerが、シグナリングサーバー経由で交換されます。

ICE Candidateの交換

複数のICE Candidateが飛び交い、すべての交換が終わるとPeer-to-Peer通信が始まります。

次回は

今回はシグナリングサーバーを動かして、Peer-to-Peer通信確立までを自動化しました（それが普通ですけど）。実は今回の仕組みでは、一つのシグナリングサーバーで同時に2人までしか通信できません。まったく実用的ではありません。次回は複数人での通信にチャレンジする予定です。

今回のソース

最後に、今回使ったHTMLを掲載しておきます。

<!DOCTYPE html>
<html>
<head>
  <title>WebRTC 1 to 1 signaling</title>  
</head>
<body>
  <button type="button" onclick="startVideo();">Start video</button>
  <button type="button" onclick="stopVideo();">Stop video</button>
  &nbsp;&nbsp;&nbsp;&nbsp;
  <button type="button" onclick="connect();">Connect</button>
  <button type="button" onclick="hangUp();">Hang Up</button>
  <br />
  <div>
   <video id="local-video" autoplay style="width: 240px; height: 180px; border: 1px solid black;"></video>
   <video id="remote-video" autoplay style="width: 240px; height: 180px; border: 1px solid black;"></video>
  </div>
  
  <p>
   SDP to send:<br />
   <textarea id="text-for-send-sdp" rows="5" cols="100" disabled="1">SDP to send</textarea>
  </p>
  <p>
   SDP to receive:<br />
   <textarea id="text-for-receive-sdp" rows="5" cols="100"></textarea><br />
   <button type="button" onclick="onSDP();">Receive SDP</button>
  </p>
  
  <p>
   ICE Candidate to send:<br />
   <textarea id="text-for-send-ice" rows="5" cols="100" disabled="1">ICE Candidate to send</textarea>
  </p>
  <p>  
   ICE Candidates to receive:<br />
   <textarea id="text-for-receive-ice" rows="5" cols="100"></textarea><br />
   <button type="button" onclick="onICE();">Receive ICE Candidates</button>
  </p>
  
  <!---- socket ------>
  <script src="http://localhost:9001/socket.io/socket.io.js"></script>
  
  <script>
  var localVideo = document.getElementById('local-video');
  var remoteVideo = document.getElementById('remote-video');
  var localStream = null;
  var peerConnection = null;
  var peerStarted = false;
  var mediaConstraints = {'mandatory': {'OfferToReceiveAudio':false, 'OfferToReceiveVideo':true }};

  
  // ---- socket ------
  // create socket
  var socketReady = false;
  var port = 9001;
  var socket = io.connect('http://localhost:/' + port + '/');
  // socket: channel connected
  socket.on('connect', onOpened)
        .on('message', onMessage);

  function onOpened(evt) {
    console.log('socket opened.');
    socketReady = true;
  }

  // socket: accept connection request
  function onMessage(evt) {
    if (evt.type === 'offer') {
      console.log("Received offer, set offer, sending answer....")
      onOffer(evt);	  
    } else if (evt.type === 'answer' && peerStarted) {
      console.log('Received answer, settinng answer SDP');
	  onAnswer(evt);
    } else if (evt.type === 'candidate' && peerStarted) {
      console.log('Received ICE candidate...');
	  onCandidate(evt);
    } else if (evt.type === 'user dissconnected' && peerStarted) {
      console.log("disconnected");
      stop();
    }
  }

  
  
  // ----------------- handshake --------------
  var textForSendSDP = document.getElementById('text-for-send-sdp');
  var textForSendICE = document.getElementById('text-for-send-ice');
  var textToReceiveSDP = document.getElementById('text-for-receive-sdp');
  var textToReceiveICE = document.getElementById('text-for-receive-ice');
  var iceSeparator = '------ ICE Candidate -------';
  var CR = String.fromCharCode(13);
  
  function onSDP() {
    var text = textToReceiveSDP.value;
	var evt = JSON.parse(text);
	if (peerConnection) {
	  onAnswer(evt);
	}
	else {
	  onOffer(evt);
	}
	
	textToReceiveSDP.value ="";
  }  
  
  //--- multi ICE candidate ---
  function onICE() {
    var text = textToReceiveICE.value;
	var arr = text.split(iceSeparator);
	for (var i = 1, len = arr.length; i < len; i++) {
      var evt = JSON.parse(arr[i]);
	  onCandidate(evt);
    }

	textToReceiveICE.value ="";
  }
  
  
  function onOffer(evt) {
    console.log("Received offer...")
	console.log(evt);
    setOffer(evt);
	sendAnswer(evt);
	peerStarted = true;  // ++
  }
  
  function onAnswer(evt) {
    console.log("Received Answer...")
	console.log(evt);
	setAnswer(evt);
  }
  
  function onCandidate(evt) {
    var candidate = new RTCIceCandidate({sdpMLineIndex:evt.sdpMLineIndex, sdpMid:evt.sdpMid, candidate:evt.candidate});
    console.log("Received Candidate...")
	console.log(candidate);
    peerConnection.addIceCandidate(candidate);
  }

  function sendSDP(sdp) {
    var text = JSON.stringify(sdp);
	console.log("---sending sdp text ---");
	console.log(text);
	textForSendSDP.value = text;
	
	// send via socket
	socket.json.send(sdp);
  }
  
  function sendCandidate(candidate) {
    var text = JSON.stringify(candidate);
	console.log("---sending candidate text ---");
	console.log(text);
	textForSendICE.value = (textForSendICE.value + CR + iceSeparator + CR + text + CR);
	textForSendICE.scrollTop = textForSendICE.scrollHeight;
	
	// send via socket
	socket.json.send(candidate);
  }
  
  // ---------------------- video handling -----------------------
  // start local video
  function startVideo() {
	navigator.webkitGetUserMedia({video: true, audio: false},
    function (stream) { // success
      localStream = stream;
      localVideo.src = window.webkitURL.createObjectURL(stream);
      localVideo.play();
	  localVideo.volume = 0;
    },
    function (error) { // error
      console.error('An error occurred: [CODE ' + error.code + ']');
      return;
    }
	);
  }

  // stop local video
  function stopVideo() {
    localVideo.src = "";
    localStream.stop();
  }

  // ---------------------- connection handling -----------------------
  function prepareNewConnection() {
    var pc_config = {"iceServers":[]};
    var peer = null;
    try {
      peer = new webkitRTCPeerConnection(pc_config);
    } catch (e) {
      console.log("Failed to create peerConnection, exception: " + e.message);
    }

    // send any ice candidates to the other peer
    peer.onicecandidate = function (evt) {
      if (evt.candidate) {
        console.log(evt.candidate);
        sendCandidate({type: "candidate", 
                          sdpMLineIndex: evt.candidate.sdpMLineIndex,
                          sdpMid: evt.candidate.sdpMid,
                          candidate: evt.candidate.candidate}
		);
      } else {
        console.log("End of candidates. ------------------- phase=" + evt.eventPhase);
      }
    };

    console.log('Adding local stream...');
    peer.addStream(localStream);

    peer.addEventListener("addstream", onRemoteStreamAdded, false);
    peer.addEventListener("removestream", onRemoteStreamRemoved, false)

    // when remote adds a stream, hand it on to the local video element
    function onRemoteStreamAdded(event) {
      console.log("Added remote stream");
      remoteVideo.src = window.webkitURL.createObjectURL(event.stream);
    }

    // when remote removes a stream, remove it from the local video element
    function onRemoteStreamRemoved(event) {
      console.log("Remove remote stream");
      remoteVideo.src = "";
    }

    return peer;
  }

  function sendOffer() {
    peerConnection = prepareNewConnection();
    peerConnection.createOffer(function (sessionDescription) { // in case of success
      peerConnection.setLocalDescription(sessionDescription);
      console.log("Sending: SDP");
      console.log(sessionDescription);
      sendSDP(sessionDescription);
    }, function () { // in case of error
      console.log("Create Offer failed");
    }, mediaConstraints);
  }

  function setOffer(evt) {
    if (peerConnection) {
	  console.error('peerConnection alreay exist!');
	}
    peerConnection = prepareNewConnection();
    peerConnection.setRemoteDescription(new RTCSessionDescription(evt));
  }
  
  function sendAnswer(evt) {
    console.log('sending Answer. Creating remote session description...' );
	if (! peerConnection) {
	  console.error('peerConnection NOT exist!');
	  return;
	}
	
    peerConnection.createAnswer(function (sessionDescription) { // in case of success
      peerConnection.setLocalDescription(sessionDescription);
      console.log("Sending: SDP");
      console.log(sessionDescription);
      sendSDP(sessionDescription);
    }, function () { // in case of error
      console.log("Create Answer failed");
    }, mediaConstraints);
  }

  function setAnswer(evt) {
    if (! peerConnection) {
	  console.error('peerConnection NOT exist!');
	  return;
	}
	peerConnection.setRemoteDescription(new RTCSessionDescription(evt));
  }
  
  // -------- handling user UI event -----
  // start the connection upon user request
  function connect() {
    if (!peerStarted && localStream && socketReady) { // **
	//if (!peerStarted && localStream) { // --
      sendOffer();
      peerStarted = true;
    } else {
      alert("Local stream not running yet - try again.");
    }
  }

  // stop the connection upon user request
  function hangUp() {
    console.log("Hang up.");
    stop();
  }

  function stop() {
    peerConnection.close();
    peerConnection = null;
    peerStarted = false;
  }

  </script>
</body>
</html>

＜バックナンバー＞

• HTML5でWebRTCを使ってみよう！「カメラを使ってみよう」編
• WebRTCに触ってみたいエンジニア必見！手動でWebRTC通信をつなげてみよう編

前回まででNUCのハードを組み立てて、OSやJavaScript実行環境Node.jsなど、基本的なソフトのインストールを準備しました。

今回はいよいよWebSocketサーバーを立ち上げ、アプリを動かします。

WebSocketサーバーといっても、今回はWebSocketサーバーそのものを作るわけではありません。サーバーにはNode.jsのnpmパッケージからwsというWebSocket用モジュールを利用します。

このモジュールはあの有名なSocket.IOで、WebSocketのコアの部分にも使われている高速なWebSocketサーバーを持っています。アイディア次第で、たとえば、チャットサーバーにでも、ゲームデータサーバーにでも、あるいは、ニュース配信サーバーにでも何にでも使えます。

「WebSocket」自体は双方向通信のプロトコルとAPIというだけですので、その使い方次第で用途は無数に考えられるわけです。

今回作るもの

今回は、NUCを使って、とりあえずWebSocketサーバーを立ち上げてみようという短期連載ですので、その雰囲気がわかる程度の簡単なものでやってみます。

恐縮ですが拙著「Node.jsプログラミングガイド」のサンプルの中から、WebSocketを使ったリアルタイムチャートを作ってみます。ここでのWebSocketサーバーは、チャートへデータを連続的にプッシュし続ける機能を担います。

まず最初に前回もチラ見した、仕上がりをもう一度見てみましょう。

下の赤い「Play」ボタンをクリックすると動きます。

(invalid jsdo.it code)

上記チャートはccchartですが、チャートが変化し続けるためのデータがサーバー側からリアルタイムにプッシュされ続けています。Ajaxなどのように、ブラウザ側からユーザーがリクエストする必要はありません。

このケースでは、すべての接続しているブラウザのチャートへデータが自動的にプッシュされ続けます。

この仕組みを使えば、たとえば、社内の毎時変化するデータなどを関係者全員がリアルタイムに閲覧するといったシステムを作ることも簡単です。

ちなみに参考までですが、ccchartのメリットはCanvasベースなので高速でSVGよりもプラットフォーム依存が少ないことと、インターネットにつながっている必要もないのでイントラネットでも使えることなどでしょうか。

(※今回は解説できませんが、もし、このサンプルが動かない環境なら、ポートを80や443などにする必要があるかもしれません。ただし、Linuxでは80などのwell-known ポートは、今回のようなユーザー権限ではなくroot権限で起動する必要があり、セキュアにすることも考慮すると別途少し手間がかかります)

では、これをNUC内に置いてみます。

ソースを取得する

まず、今回使うソースを手に入れます。「Node.jsプログラミングガイド」のサンプルページ 1-Basic Knowledge 基礎知識 から 02-wsserver2にある2つのファイル chart.htm wsserver.js をコピーします。クライアント側のHTMLとJavaScript、つまりchart.htmのコードは、下記にもありますが jsdo.itのサンプルからもご確認いただけます。

アプリ用のディレクトリを用意する

ファイルを作る場所はお好みですが、今回は、ユーザー名を仮にhogeとして、ホームディレクトリ(/home/hoge) 配下へ前回作っておいた公開用ディレクトリ /home/hoge/public_html を利用して、Apacheで公開してみます。

作成するディレクトリツリーは、次のようになります。

/home/hoge ├──public_html/ │ └─mychart
│ └─chart.htm └──wsserver.js

まず、ホームディレクトリのpublic_html下にchart.htmを置くためのディレクトリmychartを作ります。

cd /home/hoge/public_html
mkdir mychart
cd mychart

mychartディレクトリができたら、そこへ chart.htm をFTPでアップロードしておきましょう。wsserver.jsは、/home/hoge直下へ置きます。

次に、そのひとつ上の非公開ディレクトリ /home/hoge/ 内に node_modules というディレクトリを作ります。

cd /home/hoge
mkdir node_modules

これは、Nodeのモジュールが格納される場所で、ディレクトリ/home/hoge配下でインストールするローカルなモジュールは、(インストールコマンドnpmの引数-gを指定しなければ) ここに入ります。

また、wsserver.jsはサーバー側ですので一般的には、公開ディレクトリpublic_htmlではなく非公開な場所(今回は/home/hoge直下)へアップロードします。

WebSocket用モジュールをインストール

では次にNodeのWebSocket用モジュールwsを入れてみます。これには高速なWebSocketサーバーとクライアントが同梱されています。

では入れてみましょう。

npm i ws

これだけです。(npm install wsと同じ意味です) では、node_modules下に本当に入ったのかlsコマンドで見てみましょう。

ls -l /home/tato/node_modules

すると、下記のように表示されるのでwsが入っていることがわかります。 total 4 drwxrwxr-x 11 hoge hoge 4096 1月 15 18:36 ws 作成されたディレクトリツリーは、次のようになっているはずです。

/home/hoge ├──public_html/ │ └─mychart
│ └─chart.htm ├──wsserver.js └──node_modules/ ←追加された └─ ws/

これで、設置完了です。簡単でしょう？ でも、ここでhttp://192.168.1.180/~hoge/chart.htmをブラウザで開いても動きません。

サーバーが起動していないからです。

では、動かしましょう。

WebSocketサーバーを起動する

以下のおまじないを打ち込みます。ホームディレクトリ/home/hoge/下のwsserver.jsをNodeで動かすという意味です。

node ~/wsserver.js

node /home/hoge/wsserver.jsでも同じ意味になります。

もし、ここでエラーが出なければ、同一ネットワーク内の他のパソコンのブラウザで http://192.168.1.180/~hoge/chart.htm を開いてみてください。

動いてますね。さらに、別のパソコンで開いても見ることができます。

永続化

「node ~/wsserver.js」でサーバーを起動しましたが、このままでは、sshの接続を切るとサーバーが止まってしまいます。

そこで、永続化やNUCの再起動時も自動で立ち上がるための仕掛けが必要です。

永続化には、foreverというモジュールがよく使われます。再起動時の自動起動は、/etc/init.dへの登録などの方法がありますが、残念ながら紙面の都合で書ききれませんので、不明な方はこれらのキーワードで調べてみてください。

この連載のアクセスが多ければ続きを書けるかもしれません(笑)。 でも、それを待つよりも、もしわからなければ、自分で調べると身につきますよ。

サーバー側のコード

参考までにサーバー側ソースは次のようなものです。

手短に言うと、指定したポートへクライアントから接続があると、0.3秒ごとに生成しているデータをすべてのクライアントへプッシュしています。詳しくはソースとコメントをご覧ください。

//WebSocket Serverモジュールを読み込む
var WsServer = require('ws').Server;
//port: 3001でリッスンするサーバーを作成する
var ws = new WsServer({ port: 3001 });
//タイマーID
var tid;

broadCast();//データ配信開始

function broadCast(){
  //0.3秒ごとにデータを送信する
  tid = setInterval (function(){
    //データを作る
    var dataAry = mkData();
    //すべてのクライアントへ送信する
    ws.clients.forEach(function(client) { 
      client.send(JSON.stringify(dataAry));
    });
  }, 300);
}

// 送信用ランダムデータを作成する(実際には必要なデータを与える)
function mkData(){
  //送信データ形式の雛形
  var data = [
      ["時間"],
      ["s2"],
      ["s3"]
    ];

  //時間の文字列を作成する
  var now = new Date();
  var H = now.getHours();
  var M = now.getMinutes();
  var S = now.getSeconds();
  H = (H < 10)?'0'+H:H;
  M = (M < 10)?'0'+M:M;
  S = (S < 10)?'0'+S:S;
  
  //送信データを作成する
  data[0]=H +':' + M +':' + S;
  data[1]=Math.floor(Math.random(10) * 96 );
  data[2]=32 + Math.floor(Math.random(10) * 18);
  return data;
}

クライアント側のコード

ccchart自体の使い方は今回は紙面の都合で触れませんが、ポイントは、ccchartのwsメソッドの引数でサーバー側のIPアドレスとポートを指定している部分です。そこから流れてきたデータを自動的にconfigで指定した形式にチャート化します。

<script src="http://ccchart.com/js/ccchart.js" charset="utf-8"></script>
<canvas id="hoge"></canvas>
<script>

var chartdata = {
 //チャートの設定
 "config": {
    "title": "WebSocket TEST",
    "subTitle": "列データをリアルタイム受信描画 受信パターンはoneColAtATime",
    "type": "bezi2",//チャートタイプベジェ曲線 他にline, barなど
    "width" : 465,//幅
    "lineWidth": 2,//線の太さ
    "minY": 0,//最小Y値
    "xScaleSkip": 5,//垂直目盛のスキップ
    "colorSet": //カラーセット
          ["#DDA0DD","#3CB000"]
  },
  //データの雛形
  "data": [
    ["時間"],
    ["s2"],
    ["s3"]
  ]
};

ccchart
  .init('hoge', chartdata) //要素hogeへチャートデータchartdataを出力する
  .ws('ws://192.168.1.180:3001') //このURLをサーバー側のIPとポートに合わせる
  .on('message', ccchart.wscase.oneColAtATime);//このパターンで受信する
        // oneColAtATimeは、WebSocketの受信パターン関数
        // 一度に1列ずつ [["2013"],[435],[600]] といった配列で届く場合用
        // 参照: http://ccchart.org/test/someCols/test-2.htm
</script>

最後に

以上、駆け足で手のひらサイズのWebSocketサーバーを組み立ててみました。

ほんの10年ほど前までは、一般的には、手のひらサイズのサーバーなどほとんど考えることもありませんでしたが、今、それはすでに目の前にあります。

一方に社外クラウドサーバーを利用する大きな流れがありますが、同時に、目の前には、わずか数万円でモニタの裏にも貼れるような小さな内製サーバーを作れるという選択肢も生まれたわけです。

エクセルを使って仕事の効率を上げるように、ちょっとした業務には、どこにでも持っていける小さな内製サーバーを使って効率を上げるということも可能な時代になりつつあります。

多くの業務と製品がネットワーク経由のサービスと無縁ではなくなりつつある今、たとえば、機動性の高いサービスをより現場に近い場所で、NUCを使って次々と立ち上げるといった未来が、文字通り、今、私たちの手の上にあります。

NUC 自体の用途は限定されていません。さて、どんな未来を作りましょうか？

＜関連レポート＞
NUCで手のひらサイズの格安WebSocketサーバーを立ててみた(ハード組立編)を読む⇒
NUCで手のひらサイズの格安WebSocketサーバーを立ててみた（OSインストール編）を読む⇒