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に変更するのもお忘れなく。

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

私もフロントエンド・エンジニアではありますが、もともと関心があったことと、去年からデータ・ストリームの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

まず始める前にこのライブデモ、Kitteh Anonymousをデスクトップまたはモバイルのモダンブラウザで実際に試してみてください。ここでは、このデモの簡略版であるLiteバージョンを実際に作成する方法をステップ・バイ・ステップで紹介したいと思います。

必要な知識

• Polymerの基礎知識
• パッケージマネージャ、Bowerの基本的な使い方（Polymerと依存するファイルをインストール、アップデートするのに使いますが、必ずしも使う必要はありません）

泉水翔吾さんの記事、Web Componentsを簡単・便利にするライブラリ「Polymer」を使いこなそうや、佐藤歩さんの話題のMaterial DesignをWebで実現！Polymerで「Paper Elements」を試そうを先に読むのをおすすめします。

PolymerとWebスタンダード

ちまたに数多く存在する、JavaScript UI library。Polymerも単にまたそのひとつ、と思うかもしれません。しかしPolymerが他と違うのは、これがW3C WebプラットフォームプリミティブのWeb Componentsを基礎に作られていることです。このWeb Componentsファミリーに含まれるものに

• Shadow DOM
• Custom Elements
• HTML Imports

などが挙げられます。

そしてPolymerに含まれる

webcomponents.js

Object.observe()

レゴブロックのようにWebを構築しよう

Polymer webコンポーネントはカプセル化された何度も再利用できるコンポーネント。まるでレゴで家を構築するかのように、既存のパーツを使ったり自分で組み立てたパーツを使ったりと、いろいろなパーツを組み合わせてWebアプリを作ることができます。

実際にPolymerでアプリを作るには、まず必要な要素をインポートしてから使うことになります。

<!-- Import element --> 
<link rel="import" href="paper-fab"> 
... 
<!-- Use element --> 
<paper-fab icon="send"></paper-fab>

Material DesignとPolymerの関係

Material Designは、既存のどのスクリーンサイズやデバイスにでも対応できる、ビジュアルとインタラクションデザインにすぐれたデザインスペックで、もともとはAndroid 5.0 Lollipop用にデザインされたものが、のちにWeb用としてPolymerのPaper Elementsとして適応されるようにました。

1. Paper Elementsを使ってみよう

さて実際にこれらを使って自分のアプリを作ってみましょう。 まず、Polymerをインストール、そしてアプリ構築に必要なコンポーネントをインポートします。

1.1. Polymerをインストール

$ bower install --save Polymer/polymer

これで必要最低限のファイルがそろいます。

インストールが終わったら、index.htmlの

<head>

webcomponents.min.js

<!DOCTYPE html> 
<html> 
  <head> 
    <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script> 
  </head> 
  <body>
...

1.2. UI コンポーネントをインポート

このデモのUIには、いくつかのPolymer CoreとPaper Elements、そして自作のカスタム要素が使われています。

1. core-scaffold (レスポンシブレイアウトを構成するheader、toolbar、menuなどがすでに揃った骨組み)
2. core-item
3. paper-input
4. paper-fab
5. カスタム (のちに作成しましょう)

Bowerを使って４つのcomponentsをインストールします。

$ bower install Polymer/core-scaffold 
$ bower install Polymer/core-item 
$ bower install Polymer/paper-input 
$ bower install Polymer/paper-fab

インストールが終わったら、これらをHTML importsを使ってインポートします。

<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>   

<link rel="import" href="bower_components/core-scaffold/core-scaffold.html"> 
<link rel="import" href="bower_components/core-item/core-item.html"> 
<link rel="import" href="bower_components/paper-input/paper-input.html"> 
<link rel="import" href="bower_components/paper-fab/paper-fab.html">

このようにすることで、これらの要素がDOM上で使われる前に依存ファイルを含めて全てがしっかりロードされることになります。

1.3. ベーシックUIの構成

まず、

<core-scaffold>

<core-header-panel>

<core-toolbar>

<core-drawer-panel>

<body fullbleed unresolved>
  <core-scaffold>

    <!-- ドロウアーパネル -->
    <core-header-panel navigation flex>
        <core-toolbar class="tall">
            <!-- an avatar and username will be here -->
        </core-toolbar>
    </core-header-panel>

    <!-- アプリのタイトル -->
    <div tool layout horizontal flex>
        <span flex>Kitteh Anonymous</span>
        <core-icon icon="account-circle"></core-icon>
        <span><!-- number of people online --></span> 
    </div>

    <!-- メインコンテンツ -->
    <div flex>
            ...
    </div>
  </core-scaffold>
</body>

これでアプリのコア・ストラクチャーができました。

<core-scaffold>

ここで

<body>

fullbreed

unresolved

他、要素の要所に

flex

layout horizontal | vertical

1.4. 個々のUI Elementsを使う

次に、このベースレイアウトの中に、先ほど一緒にインポートした個々のUIパーツを使います。 例えば次に示すコードサンプルでは、スクリーン横幅にあわせスタイライズされたインプットと、送信ボタンを表示しています。

二重カーリーブラケットに囲まれた

{{input}}

{{sendMyMessage}}

on-

<!-- メインコンテンツ -->   
<div class="send-message" layout horizontal>
 <paper-input flex label="Type message..." id="input" value="{{input}}"></paper-input>
 <paper-fab icon="send" id="sendButton" on-tap="{{sendMyMessage}}"></paper-fab> 
</div>

実際のアプリの中でコンポーネントがどのようにインポートされているかは、GitHub Repo上のlite.htmlのソースコードを見て確認してみてください。

1.5. データバインディング

PolymerはHTMLの新スタンダードである

<template>

<template>

<body fullbleed unresolved>
  <template is="auto-binding">
    <core-scaffold>
      ...
    </core-scaffold>
  </template>
</body>

これで、前チャプター(1.4)で既出の

paper-input

{{input}}

var template = document.querySelector('template[is=auto-binding]');
doSomething(template.input);

他、このデータモデルを使えば、要素を繰り返し使うようなマークアップを簡略化するなどということもできるのです。 実際にドロウアーパネルUIの中に、

core-item

<template repeat="{{item in items}}">
  <core-item icon="{{item.icon}}" label="{{item.title}}"></core-item>
</template>

core-item

<core-icons>

template.items = [
  {title: 'Uno', icon: 'cloud'},
  {title: 'Dos', icon: 'polymer'},
  {title: 'Tres', icon: 'favorite'}
];

これで、モデルを生成・変更した時に自動的にテンプレートにインスタンスが生成され、DOM上には下の図のように表示されます。

2. カスタム要素の作成

メインUIとなる部分にチャットの会話を表示させましょう。このUIパーツには、アバター、ユーザーID、チャットのテキストが表示させるようにしたいのですが、Polymer CoreにもPaperにもそういったバーツは存在しません。ですので自分でカスタム要素を作ってみましょう。

まず新規のHTMLファイルを作成します。ここではこのファイル名を、

x-chat-list.html

このカスタム要素は、属性、

avatar

color

username

text

ここでは、カスタム要素の作製法を一から説明はしませんが、簡略化されたカスタム要素は次のようになります。

<polymer-element name="x-chat-list" attributes="avatar color username text">
  <template>
  <section class="user-list" layout horizontal>
    <div class="avatar {{color}}" style="background-image: url({{avatar}})"></div>
    <div flex>
      <div class="username">{{username}}</div>
      <div class="text">{{text}}</div>
    </div>
  </section>
  </template>
  <script>
    Polymer('x-chat-list', { // デフォルト値を指定
      avatar: '', 
      color: '',
      username: '',
      text: ''
    });
  </script>
</polymer-element>

この例ではわかりやすく見せるために、

<style>...</style>

x-chat-list.html

できあがったら

index.html

<link rel="import" href="x-chat-list.html">

<div flex class="chat-list">
  <template repeat="{{message in messages}}">
    <x-chat-list color="{{message.color}}" 
                 avatar="{{message.avatar}}" 
                 username="{{message.uuid}}" 
                 text="{{message.text}}"></x-chat-list>
  </template>
</div>

データは実際の生のチャットの会話を、PubNubデータ・ストリームサービスを使って表示させます。詳しくは次のセクションで説明します。

かなりはしょってしまいましたが、カスタム要素を作る詳しい説明は公式のドキュメントを参照してください。

3.PubNub Elementでメッセージの送信・受信をする

アプリのUI部分はすべて完成しましたので、今度はチャットルームそのものを作ってみましょう。データの送受信はPubNubが提供するリアルタイム・データストリームのPolymerエレメント版である、

<pubnub-element>

<pubnub-element>

publish_key

publish_key

3.1. <pubnub-element>をインストール・インポート

インストールは、他の要素同様にBowerを使うことができます。

$ bower install --save pubnub-polymer

インストール後は

index.html

<link rel="import" href="bower_components/pubnub-polymer/pubnub-element.html">

3.2. <pubnub-element>を使う

まず、

<core-pubnub>

<core-pubnub publish_key="your_pub_key" subscribe_key="your_sub_key" uuid="{{uuid}}">
</core-pubnub>

ここで使われる

uuid

var randomColor = function() {   
  var colors = ['navy', 'slate', 'olive',...];   
  return colors[(Math.random() * colors.length) >>> 0];
};

var randomCat = function() { ... }; 

template.uuid = randomColor() + '-' + randomCat();

3.3. メッセージの送信

<core-pubnub-publish>

<core-pubnub publish_key="demo" subscribe_key="demo">
  <core-pubnub-publish id="pub" channel="polymer-chat" message="Hello">
  </core-pubnub-publish>
</core-pubnub>

では、ユーザが文字を入力して送信ボタン(

<paper-fab>

on-*

on-tap

<paper-fab>

<paper-fab icon="send" on-tap="{{sendMyMessage}}"></paper-fab>

template.sendMyMessage = function(e) {
  if(!template.input) return; // 入力フィールドが空の場合は何もしない

  template.$.pub.message = {
    uuid: uuid, 
    avatar: avatarUrl,
    color: color, 
    text: template.input  
  };
  template.$.pub.publish();
};

これでユーザの情報とメッセージテキストが、サーバに送られました。次はすべてのユーザがこれを受信して、内容ををDOMに表示させてみましょう。

3.4. 受信データのリアルタイムバインディング

ネットワークに送られたメッセージは

<core-pubnub-subscribe>

<core-pubnub-subscribe 
  channel="polymer-chat" 
  id="sub" 
  messages="{{messages}}" 
  on-callback="{{subscribeCallback}}">

ここでの

messages

<x-chat-list>

messages

messages="{{messages}}"

core-pubnub-subscribe>

<x-chat-list>

ではもう一度、

<x-chatlist>

<div flex class="chat-list">
  <template repeat="{{message in messages}}">
    <x-chat-list 
      color="{{message.color}}" 
      avatar="{{message.avatar}}" 
      username="{{message.uuid}}" 
      text="{{message.text}}"></x-chat-list>
  </template>
</div>

メッセージが受信された際には、

<core-pubnub-subscribe>

on-callback

template.subscribeCallback = function(e) {
  template.async(function(){
    var chatDiv = document.querySelector('.chat-list');
    chatDiv.scrollTop = chatDiv.scrollHeight; // scroll to bottom
  });
};

これで、PolymerでMaterial Designの美しいデザインを使った簡単なチャットルームが完成しました！

このチュートリアルではわかりやすくするために、デモで使われているすべてのフィーチャーについてや、Shadow DOMのスタイリングについての説明は省略してあるので、さらに知りたい方は是非、GitHub のRepoで確認してみてください。

デモとチュートリアル、楽しんでいただけたなら幸いです！Happy coding!

今回のGoogle I/OはAndroidに特化していた傾向が強く、WebテクノロジーやChromeの扱いが比較的小さかったせいもあり、多くのWebフロントエンドディベロッパーは不満を感じた部分もありました。
そこでその中の数少ないChromeのセッションの中から、私が興味深く感じたクロスデバイス開発にはこの先欠かせなくなると思われる Chrome DevToolsの新機能についてレポートします。

このセッションを行ったPaul Bakaus氏（以下、ポール氏）は、かつてjQuery UIやAvesゲームエンジンを開発したことでも知られています。一時期日本に在住していたこともあるので、この記事を読んでいる皆さんには既になじみのある方かもしれません。現在はGoogle Chromeチームの一員であるポール氏。
今回この”Developing across Devices – DevTools in 2014″と題されたセッションでは、Chrome DevToolsの新機能と3つのワークフローについて、当日あったワールドカップのアメリカ対ドイツ（氏はドイツ人）戦のジョークをを交えつつ、とても面白く説明してくれました。

コンテントは水のごとし

「今の時代、モバイルWebを制する者がWebを制する！」と断言するポール氏。「Webコンテントは水のようにフローし（流れ）、どんなフォームファクター上でもフロー（描写）せねばならない」と、そのためのワークフローで重要な「Design」「Develop」「Iterate」の3つを挙げました。

Design（デザイン）は、はじめの重要な一歩。複数のフォームファクターを考えながらデザインをせねばなりません。

私たちディベロッパーは、マルチデバイス開発のためにブラウザのウィンドウの大きさを変えたりながらも、レスポンシブなWebを作り上げるのに大変な労力を費やしています。

この労力を軽減するためにChromeチームが開発し、そしてこの日初めて発表されたのがDevToolsのDevice Mode。現在 Chrome Canary(v38)のみに実装されているこのデバイスモードには、Nexus 5やSamsung Galaxyシリーズなどに多く使われているデバイスのプリセットが付属されます。そのため、各種のスクリーン解像度や高DPIスクリーンなどのエミュレーションが、今までよりも断然楽に行われるようになります。

デバイスモード

実際にこのデバイスモードを使ってみましょう。
まず、インスペクターウィンドウを開き、デバイスアイコンをクリックします。するとWebページの表示がデバイスモードに切り替わります。ここでは表示の幅を自由に変えられるほか、プリセットからデバイスを選択して、自動的にその解像度に合わせたサイズにすることもできます。オリエンテーションの変更も簡単に行えます。

そしてそのレスポンシブなデザインを実装する、フローその2はDevelop。

実際のデモで私たちオーディエンスをあっと言わせた、このMedia-queriesツールを使えば、メディアクエリのワークフローも今までよりさらに効果的に行えそうです。Device Modeの左端のMedia-queriesボタンをクリックすると、使用されているメディアクエリがルーラー上に表示され、さらにそれらを右クリックするとドロップダウンメニューにこのソースコードのパスが表示されます。これを選択するとSourceパネルにコードが表示されます。

そしてさらに新しい機能のWorkspaceを使えば、ここで変更されたメディアクエリをローカルのファイルシステムに直接反映させることもできます。

その他のエミュレーション機能として、タッチイベント、アクセラメーターなどのセンサーなどもエミュレーションすることができます。

ネットワーク環境のエミュレーション

一言でWifiコネクションといっても、会社のWifiのように快適だったり、カンファレンスのWifiのように人が多すぎて全く役に立たなかったりもすることもあります。例えば同じ高速道路でも、ドイツの速度無制限のアウトバーンとアメリカの制限速度55マイルのハイウェイを走るのとでは体感が全然違う、とポール氏は面白おかしく述べています。

そのような遅い回線コネクションをエミュレートすることは、特にモバイル開発では欠かせないものです。そこで DevToolsの新機能のコネクティビティエミュレータでは、3G回線での接続やオフライン状態といった様々な通信環境をエミュレートすることができます。例えば、モバイルのEDGE回線で開発中のWebがどうレンダリングされるか、そしてそのレンダリングがいかにユーザーをイライラさせるものかを、目で知ることができるのです。そういったユーザー・エンクペリエンスをテストするのは非常に大事なのです。

スクリーンキャストでリモートデバッグ

ワークフローの3つ目はIterate。エミュレーターは便利ではあるけれど、やはり実際のデバイスでテストしてみないことには分からない事実はいくつかあります。このプロセスで重要なのはこの3つ。

• パフォーマンス・プロファイリング
• 各デバイスに特化したバグや欠陥
• コンテクスト（外観と操作感）

このテストを快適に行うために、DevToolsのリモートデバッグを使いましょう。

その前に、まずChrome Canaryを最新バージョン（7月22日以降のビルド、38.0.2101.0もしくはそれより新しいもの）にアップデートしてください。それからchrome://flags/#enable-devtools-experimentsを”enable”にします。そして、DevToolsのSettings（ギアアイコンをクリック）> Experimentsからこの機能をオンにします。

AndroidデバイスのUSB Debugモードもオンにします。

そのデバイスをコンピューターにUSBでつなぐと、デバイスモードアイコンとは別にもう一つ小さなデバイスに「1」の数字がついたアイコンが表示されます。この数字はつながれているデバイスの数を示します。このアイコンをクリックすると、さらにデバイスパネルが下にあらわれます。

さらに、このパネルでTry Hereと表示されたボタンをクリックすると、実際のデバイス上のChromeの画面がChrome上にスクリーンキャストされるのです。デバイスで操作してみてください。動きがデスクトップブラウザのDevTools上に反映されるのがわかると思います。その逆も可能です。

これらのデバイス上での描写やレイヤーなどがDevTools上で可視化され、今までデスクトップで使っていたおなじみの機能をデバイスでも同じように使ってプロファイリングやデバッグすることが可能になります。

例えばこの3Dレンダリング。Layersパネルでレンダリングがレイヤーごとに可視化され、各レイヤーの様子も、レンダーオブジェクトをドラッグしながら360度各方向から見ることができます。さらにモバイルにありがちな描写の問題も、現在開発段階の新機能ペイントプロファイラを使ってピンポイントでどの描写に時間がかかっているとか、border-radius部分が極端に遅いなどとプロファイリングすることができます。

既存のProfilesパネルでavaScriptのCPUプロファイルを行ったり、Timelineパネルでグラフ化された描写速度を観察したりすることも、これまで通りモバイル上でも行えます。さらに、これらを同時にTimelineパネルで使えるようにするなど実験的に新機能も追加されるようです。これで視覚的にもさらに使い勝手のよいものになりそうです。

まとめ

これらのワークフローと、デバイスモードの機能のまとめを箇条書きにしてみます。

Design = Responsive Layouts 機能

• メディアクエリ・ビジュアルツール
• メディアクエリ編集ツール
• スタイル・フィルタリングツール
• インライン・エミュレーション

Develop = Rich Emulation 機能

• デバイス・プリセット
• ビューポート・エミュレーション
• センサー・エミュレーション
• ネットワーク・スロットリング

Iterate = Remote Debugging 機能

• プラグアンドプレイ
• パワーアップした既存の機能
• スクリーンキャスト
• ポートフォワード

最後に。この記事を書くにあたって私からの質問やバグについて答えてくれた、よき友人でもあるポール氏に感謝！ドイツのワールドカップ優勝おめでとう。

それでは実際、レスポンシブ・ウェブとは何についての対応（レスポンシブ）なのでしょうか。

現在のところ、私たちがいうレスポンシブ・ウェブデザインとは、どんなスクリーンの幅や表示領域、デバイスの画面解像度や画面の縦横の向きにも対応したウェブデザイン、というのが事実上の定義となっているようです。

そこで今回、私はその定義を超えたレスポンシブ・ウェブのユースケースについて考えてみました。

太陽光下でのスクリーン・リーダビリティ

私は普段の仕事ではNokia Lumiaというスマートフォンを使っているのですが、これがなかなかの優れもの。環境光センサーでスクリーンの輝度値を自動調整してくれるので、晴天の空の下でもスクリーンのコンテンツがはっきり読めるのです。ところが私の個人用で使ってる別機種の場合、そうもいきません。例えば読みたいウェブがたとえ「レスポンシブ」であれ「モバイル・ファースト」であれ、まぶしいカリフォルニアの空の下では、全くコンテンツが見えないので使い物にならないのです。

一方、W3CのCSSメーリングリストでは、次世代のCSS Media Queries 4のひとつである

luminosity

しかしこれが実現するのは一体いつの日になることやら…

Ambient Light Events API

というわけで、今現在のブラウザでは、CSSを使って環境光の度合いに合わせてウェブのUIを調整するのは不可能。

しかし私たちには、HTML5を使ってブラウザから各種センサーやカメラなどのハードウェアが持つ機能にアクセスするための仕様、デバイス APIのひとつであるAmbient Light Eventsがあるでないですか！
これならJavaScriptを使って環境光センサーから照度を知ることができるはず。これを使えば、次世代メディアクエリをまねて、太陽や照明にレスポンシブなウェブが作れるかもしれない！
そう思って私は、実験的に簡単なデモを書いてみました。

Devicelight events

デバイスのセンサーが照度の変化に反応すると、ブラウザ側では

DeviceLightEvent

devicelight

そこで得られるプロパティの値、

value

実際、大変簡単にこう書くことができます。

window.addEventListener('devicelight', function(event) {
  console.log(event.value + 'lux');
});

照度にレスポンシブなウェブを作ってみる

これを使って、環境光が変わってもウェブの内容を読みやすくするためのUIを考えてみました。

デフォルトではライトグレーの背景に黒の文字、明るい照度の時には白地に黒の文字、そして暗い時には暗めな背景に白の文字、というUIにしてみましょう。

例のAPIを使って、照度によってコンテンツのコンテイナー（このデモではわかりやすいように

document.body

window.addEventListener('devicelight', function(e) {
  var lux = e.value;

  if(lux < 50) {
    document.body.className = 'dim';
  }
  if(lux >= 50 && lux <= 1000) {
    document.body.className = 'normal';
  }
  if(lux > 1000)  {
    document.body.className = 'bright';
  } 
});

body,
body.normal {
  background-color: #ddd;
  color: #111;
}
body.dim {
  background-color: #444;
  color: #fff;
}
body.bright {
  background-color: #fff;
  color: #333;
}

実際に、このデモが動いている様子がわかる動画を作ってみました。

ブラウザサポートとデバイス

このデモで使われた実際のソースコードは、CodePenを見てください。

ほとんどの方の観覧しているブラウザ上では “AmbientLightEvent is not supported.” というメッセージが出ていて何も起こらないのではないでしょうか。というのも、残念ながら今のところ、このAPIをサポートしているのはFirefox 22+ だけ、しかもデバイス側にも環境光センサーが必要。
ですので、デスクトップから見ている皆さんには、どのブラウザを使っていてもこのデモは作動していないでしょう。私のデモで実際に使ったデバイスはNexus 7ですので、AndroidやFirefoxOSのデバイス持っている方は、ぜひFirefoxで試してみてください。

イベントが返す値も、デバイスによってばらつきがあるようです。私が実験した機種2機ではずいぶん違う結果が出ました。たぶんセンサーの精度にブレがあるのでしょう。

この写真にあるデバイスは、Moto G(Android)と、Keon(FirefoxOS)です。暗めの部屋での照度が、一方が6lux、もう一方が61luxとなっています。

CSS Media Queries Level 4 Luminosity

さて、話題をメディアクエリに戻します。
今現在の仕様では、メディアクエリ・レベル4はまだeditor’s draftの段階なので、ブラウザに実装されるまでにはまだまだ時間がかかりそうです。

将来的に実装された際には、このデモで書かれたコードはCSSのみでこのように書き直すことができるようになります。

@media screen and (luminosity: normal) {
  body {background-color: #ddd; color: #111;}
}
@media screen and (luminosity: dim) {
  body {background-color: #444; color: #fff;}
}
@media screen and (luminosity: washed) {
  body {background-color: #fff; color: #333;}
}

このように、

luminosity

おわりに

近い将来、レスポンシブ・ウェブの定義も、デバイスなどの多様性に合わせて変わってくるのではないでしょうか。このユースケースも実際果たして本当に役に立つのかどうかもまだわかりませんが、発想の転換とブラウザの新しい可能性、という面でこの記事を楽しんでいただけたかと思います。

この記事は元々は私個人のブログ（原文は英語）に掲載したのですが、TwitterやReddit、Hacker Newsで思いのほか話題になりました。やはりディベロッパ、デザイナは国境を問わず、みな新しい可能性に興味津々なのでしょう。

では。