プログラミング – HTML5Experts.jp

Node.jsでSlack Command Botをつくってみよう

Tomomi Imura — Fri, 03 Mar 2017 00:00:22 +0000

こんにちは。ごぶさたしています。以前の執筆から１年ちょっとになるのですが、その当時はInternet of Things(IoT)について書いたのですが、最近では市場がある程度まで到達したからでしょうか、それとも脆弱性の問題を問われることが多くなったせいでしょうか、話題は少し落ち着いてきたかに思われます。さて今ホットな話題は何でしょうか、ということで今回はChat Botsについて書いてみようと思います。

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を自分がアドミン権限のあるのチャットチームにインストールしてみてください。

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

スラッシュ・コマンドを書いて、自分のSlackチームにインストールする
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アニメーションにしてみました。

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

ウェブページを作成し、認証ボタンを置く。ユーザがボタンをクリックするとパラメータがSlackに送信される(ユーザは認証ページにリダイレクトされる)。
Node appには、SlackからGETで10分だけ有効な仮のコードが送られる。
アクセストークンを得るために oauth.access API使い認証コードをPOSTする。Node app側から`200 OK`を受け取り次第、このプロセスが完了。
オプションとして、このトークンを使って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パラメータを下のように変更します。

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

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

SkyWay iOS/Android SDKを使って、WebRTCアプリを開発しよう

山村奨 — Thu, 24 Dec 2015 00:00:53 +0000

連載： WebRTCプラットフォーム ”SkyWay” 入門 (5)

連載5回目の今回は、12月にアップグレードされたSkyWayのiOS/Android用SDKのチュートリアルをお届けします。

iOS/Android用SDKを使うことで、SkyWayの特徴である「WebRTCを使ったP2P通信を簡単に実現」することができます。また、APIもJavaScript版とほぼ同じで、JavaScript版をすでに利用されている方にも実装しやすく、JavaScript/iOS/Android間での通信もサポートしています。

この記事では、そんなiOS/AndroidのSDKの利用方法を、それぞれサンプルアプリのビルド方法や解説を交えながらご紹介していきます。

まずは、iOSのサンプルアプリのビルド方法からご紹介します。Androidのみ開発される方は読み飛ばしてください。

iOSのサンプルアプリのビルド方法

まず、まだSkyWayに登録されていない方はSkyWayのサイトから開発者登録を行ってください。その際の利用可能ドメインですが、ドメインをお持ちでない方は「localhost」等、適当な文字列を指定してください。

次に、iOS SDKをダウンロードします。
iOS SDKのダウンロードページにアクセスして下さい。

ページ下部のDownloadsからダウンロードして下さい。解凍したフォルダの中に「SkyWay.framework」というものが入っており、これがiOS SDK本体になります。

次はサンプルアプリプログラムのダウンロードを行います。
SkyWay-iOS-Sampleのレポジトリをクローンするかダウンロードを行って下さい。（下図はダウンロードする場合）

次に、サンプルアプリのフォルダにはSDKが含まれていないので、サンプルアプリプロジェクトにSDKを入れます。

先ほどのSkyWay.frameworkを「SkyWay-iOS-Sample > frameworks」内にコピーします。

サンプルアプリを動かすためには、開発者登録をした際のAPIキーとドメインを設定する必要があります。
では、サンプルアプリプロジェクトを開いて設定してみましょう。

SkyWay-iOS-Sample.xcodeprojをXcode（本記事ではVersion 7.1.1）で開き、
SkyWay-iOS-Sample > SkyWay-iOS-Sample内の「DataConnectionViewController.m」を開きます。

//
// MediaConnectionViewController.m
// SkyWay-iOS-Sample
//

#import "MediaConnectionViewController.h"

#import 

#import 

#import "AppDelegate.h"
#import "PeersListViewController.h"


// Enter your APIkey and Domain
// Please check this page. >> https://skyway.io/ds/
static NSString *const kAPIkey = @"yourAPIKEY";
static NSString *const kDomain = @"yourDomain";


typedef NS_ENUM(NSUInteger, ViewTag)
{
  TAG_ID = 1000,
  TAG_WEBRTC_ACTION,
  TAG_REMOTE_VIDEO,
  TAG_LOCAL_VIDEO,
};

コードの上方部分に、上図のような箇所があるので、ここにAPIキーとドメインを設定して保存しましょう。

「MediaConnectionViewController.m」にも同様の箇所があるため、こちらも修正します。

ここまで終わったら、ビルドする端末を接続・選択して、ビルドをします。以上がiOSのサンプルアプリのビルド方法です。

次はAndroidのサンプルアプリのビルド方法をご紹介します。 iOSのみ開発される方は飛ばしてください。

Androidのサンプルアプリのビルド方法

まずはiOSと同じく、まだSkyWayに登録されていない方はSkyWayのサイトから開発者登録を行ってください。その際の利用可能ドメインですが、ドメインをお持ちでない方は「localhost」等、適当な文字列を指定してください。

次に、Android SDKをダウンロードします。
Android SDKのダウンロードページにアクセスして下さい。

ページ下部のDownloadsからダウンロードして下さい。解凍したフォルダの中に「SkyWay.aar」というものが入っており、これがAndroid SDK本体になります。

次はサンプルアプリプログラムのダウンロードを行います。
SkyWay-Android-Sampleのレポジトリをクローンするかダウンロードを行って下さい。（下図はダウンロードする場合）

次に、サンプルアプリにはSDKが含まれていないので、サンプルアプリ内にSDKを入れます。

先ほどのSkyWay.aarを「app > libs」内にコピーします。

サンプルアプリのフォルダををAndroid Studio（本記事ではVersion 1.4）で開き、
app > src > main > java > io.skyway.testpeerjava 内の「DataActivity.java」を開きます。

package io.skyway.testpeerjava;

import ...   //省略


public class DataActivity
    extends Activity
{
  private static final String TAG = DataActivity.class.getSimpleName();

  private Peer           _peer;
  private DataConnection _data;
  private Handler _handler;
  private String   _id;
  private String[] _listPeerIds;
  private Boolean  _bConnecting;
  private Runnable     _runAddLog;
  private List _aryLogs;
  private Bitmap _image;


  @Override
  protected void onCreate(Bundle savedInstanceState)
  {
    super.onCreate(savedInstanceState);

    Window wnd = getWindow();
    wnd.addFlags(Window.FEATURE_NO_TITLE);

    setContentView(R.layout.activity_chat);
    _handler = new Handler(Looper.getMainLooper());

    Context context = getApplicationContext();


    //////////////////////////////////////////////////////////////////////
    //////////////////  START: Initialize Peer ///////////////////////////
    //////////////////////////////////////////////////////////////////////


    // connect option
    PeerOption options = new PeerOption();

    // Please check this page. >> https://skyway.io/ds/
    //Enter your API Key and registered Domain.
    options.key = "";
    options.domain = "";

    // PeerOption has many options. Please check the document. >> http://nttcom.github.io/skyway/docs/

    _peer = new Peer(context, options);
    setPeerCallback(_peer);

コードの上方部分に、上図のような箇所があるので、ここにAPIキーとドメインを設定して保存しましょう。

「MediaActivity.java」にも同様の箇所があるため、こちらも修正します。

ここまで終わったらビルドを行い、端末を選択します。以上がAndroidのサンプルアプリのビルド方法です。

では、コードを参考にしながら、簡単にAPIの使い方を見ていきましょう。

ビデオチャットのコード

iOSとAndroidの二種類のSDKをご紹介をしましたが、この二つのAPIは細かいところを除いては、ほぼ同じです。また、サンプルアプリのコードもほぼ似通ったものとなっています。
そのため、ここではAndroidのビデオチャットのコードを参考にしながら、簡単にAPIの使い方をご紹介します。

また、WebRTC技術についての説明は割愛します。詳しいWebRTCの仕組みについては、がねこまさしさんが書かれたコチラの記事をお読みください: 壁を越えろ！WebRTCでNAT/Firewallを越えて通信しよう

ではまず、APIの使い方の前に、サンプルアプリの動作を確認します。

このように、

シグナリングサーバ^*1との接続とPeerIDの取得
自分の映像の取得と表示
PeerIDの一覧取得
選択したPeerIDへの通話呼び出し
相手の映像の取得と表示

を行う、とてもシンプルなアプリです。

では、この動作に沿ってコードを見ていきましょう。
まずは、SkyWayとのサーバとの接続です。

//////////////////////////////////////////////////////////////////////
    //////////////////  START: Initialize SkyWay Peer ////////////////////
    //////////////////////////////////////////////////////////////////////

    // Please check this page. >> https://skyway.io/ds/
    PeerOption options = new PeerOption();

    //Enter your API Key.
    options.key = "";
    //Enter your registered Domain.
    options.domain = "";


    // SKWPeer has many options. Please check the document. >> http://nttcom.github.io/skyway/docs/

    _peer = new Peer(context, options);
    setPeerCallback(_peer);

    //////////////////////////////////////////////////////////////////////
    ////////////////// END: Initialize SkyWay Peer ///////////////////////
    //////////////////////////////////////////////////////////////////////

ここではSkyWayのシグナリングサーバとの接続を行っています。

まず、接続を行う時のオプションをPeerOptionクラスで設定します。
このクラスでまず必須なのは、SkyWayを利用するためには必須となる「APIキー」や「ドメイン」の設定です。
そのほかにも、SkyWayが提供するTURNサーバの利用を選択する「turn」プロパティや、自前のSTUN/TURNサーバを設定する「config」プロパティ等の設定が可能です。もっと詳しく知りたい方はドキュメントをご参照ください。

次に16行目では、このオプションを使ってシグナリングサーバと接続を行っています。
このPeerクラスはシグナリングサーバとの接続を管理しており、「connect/call」メソッドでのP2Pのデータ/メディア通信の開始や、「listAllPeers」メソッドでのAPIキー毎のアクティブなPeerIDを取得、などができます。
実際にサンプルアプリでは、「Calling」というボタンを押すとlistAllPeersメソッドを呼び出し、PeerID一覧の取得を行っています。

続いて17行目では、このPeerオプジェクトのコールバックを設定しています。
コールバックの説明の前に、ローカルの映像取得部分を見てみます。

//////////////////////////////////////////////////////////////////////
    ////////////////// START: Get Local Stream   /////////////////////////
    //////////////////////////////////////////////////////////////////////
    Navigator.initialize(_peer);
    MediaConstraints constraints = new MediaConstraints();
    MediaStream _msLocal = Navigator.getUserMedia(constraints); 

    Canvas canvas = (Canvas) findViewById(R.id.svSecondary);
    canvas.addSrc(_msLocal, 0);

    //////////////////////////////////////////////////////////////////////
    //////////////////// END: Get Local Stream   /////////////////////////
    //////////////////////////////////////////////////////////////////////

ここでは、ローカルの映像取得を行って、得た映像ストリームをViewに表示しています。
NavigatorオブジェクトのgetUserMediaメソッドを呼び出すことで、MediaSteamオブジェクトの映像ストリームを得ることができます。その際に、MediaConstraintsというオプションを指定することで、映像/音声の利用可否の指定、インカメラ/アウトカメラの指定、などを行うことができます。

また、CanvasクラスはGLSurfaceViewを継承しており、得た映像ストリームはCanvasオブジェクトのaddSrcメソッドで表示することができます(iOSのSKWVideoオブジェクトはUIViewを継承しています)。

では、話を戻してPeerオブジェクトのコールバックを見てみましょう。

//////////////////////////////////////////////////////////////////////////////////
    ///////////////////// START: Set SkyWay peer callback   //////////////////////////
    //////////////////////////////////////////////////////////////////////////////////
    // 簡単のため、適宜、省略しています

    // !!!: Event/Open
    peer.on(Peer.PeerEventEnum.OPEN, new OnCallback()
    {
      @Override
      public void onCallback(Object object)
      {
        // シグナリングサーバと接続された
        _id = (String) object;

        updateUI();
      }
    });

    // !!!: Event/Call
    peer.on(Peer.PeerEventEnum.CALL, new OnCallback()
    {
      @Override
      public void onCallback(Object object)
      {
        // 相手から通話がかかってきた
        _media = (MediaConnection) object;

        _media.answer(_msLocal);

        setMediaCallback(_media);

        updateUI();
      }
    });

    // !!!: Event/Close
    peer.on(Peer.PeerEventEnum.CLOSE, new OnCallback()
    {
      @Override
      public void onCallback(Object object)
      {
        // シグナリングサーバとの接続ステータスがdestroyedとなった
      }
    });

    // !!!: Event/Disconnected
    peer.on(Peer.PeerEventEnum.DISCONNECTED, new OnCallback()
    {
      @Override
      public void onCallback(Object object)
      {
        // シグナリングサーバとの接続ステータスがdisconnectedとなった
      }
    });

    // !!!: Event/Error
    peer.on(Peer.PeerEventEnum.ERROR, new OnCallback()
    {
      @Override
      public void onCallback(Object object)
      {
        // 何かしらのエラーが発生した
      }
    });

    //////////////////////////////////////////////////////////////////////////////////
    /////////////////////// END: Set SkyWay peer callback   //////////////////////////
    //////////////////////////////////////////////////////////////////////////////////

ここでは、シグナリングサーバから送られたイベントに対し、処理を行っています。

7行目は、シグナリングサーバとの接続が確立した際の「OPEN」イベントでの処理です。
ここでのObjectは、シグナリングサーバから自分に割り当てられたPeerIDが格納されており、サンプルアプリでは、そのPeerIDを表示しています。PeerIDはnew Peer時にIDを指定することもできますし、指定せずにランダムなIDを取得することもできます。

20行目では、他のPeerから通話がかかってきた際の「CALL」イベントでの処理です。
ここでのObjectはMediaConnectionクラスであり、answerメソッドを呼ぶことで、先ほど作成した自分の映像ストリームを返しています。引数を与えないことで、映像ストリームを返さないことも可能です。
そのあと、30行目でMediaConnectionのコールバックを設定しています。

このように、相手からの通話を受ける際は、Peerオブジェクトのコールバック内で「CALL」イベントで処理を行います。
自分から通話する場合は、下記のようにPeerオブジェクトのcallメソッドを呼びます。

//////////////////////////////////////////////////////////////////////
    ////////////////// START: Calling SkyWay Peer   //////////////////////
    //////////////////////////////////////////////////////////////////////
    // 簡単のため、適宜、省略しています

    CallOption option = new CallOption();

    _media = _peer.call(strPeerId, _msLocal, option);

    setMediaCallback(_media);

    //////////////////////////////////////////////////////////////////////
    /////////////////// END: Calling SkyWay Peer   ///////////////////////
    //////////////////////////////////////////////////////////////////////

この部分は、listAllPeersメソッドで得られたPeerIdの一覧から、通話したいPeerIDをタップした時に呼ばれます。

このように、呼び出し時のオプションを設定し（このコードでは何も設定していませんが）、通話をしたいPeerIDと自分の映像ストリームを指定してcallメソッドを実行します。返り値は通話がかかってきた際と同様、MediaConnectionクラスで、MediaConnectionのコールバックを設定しています。

では、MediaConnectionのコールバックを見てみましょう。

//////////////////////////////////////////////////////////////////////////////////
    //////////////  START: Set SkyWay peer Media connection callback   ///////////////
    //////////////////////////////////////////////////////////////////////////////////
    // 簡単のため、適宜、省略しています

    // !!!: MediaEvent/Stream
    media.on(MediaConnection.MediaEventEnum.STREAM, new OnCallback()
    {
      @Override
      public void onCallback(Object object)
      {
        _msRemote = (MediaStream) object;

        Canvas canvas = (Canvas) findViewById(R.id.svPrimary);
        canvas.addSrc(_msRemote, 0);
      }
    });

    // !!!: MediaEvent/Close
    media.on(MediaConnection.MediaEventEnum.CLOSE, new OnCallback()
    {
      @Override
      public void onCallback(Object object)
      {
        Canvas canvas = (Canvas) findViewById(R.id.svPrimary);
        canvas.removeSrc(_msRemote, 0);

        _msRemote = null;
        _media = null;

        updateUI();
      }
    });

    // !!!: MediaEvent/Error
    media.on(MediaConnection.MediaEventEnum.ERROR, new OnCallback()
    {
      @Override
      public void onCallback(Object object)
      {
        // 何かしらのエラーが発生した
      }
    });

    //////////////////////////////////////////////////////////////////////////////////
    ///////////////  END: Set SkyWay peer Media connection callback   ////////////////
    //////////////////////////////////////////////////////////////////////////////////

7行目は、通話相手の映像ストリームを取得した際の「STREAM」イベントでの処理です。ここでのObjectは、MediaStreamオブジェクトです。自分の映像ストリームと同じくCanvasオブジェクトを利用して表示しています。

20行目では、通話相手との通話が切断された際の「CLOSE」イベントでの処理です。

ここまでが、簡単なSkyWayを使ったWebRTCの処理になります。

最後に、最近のアップデートで追加されたメソッドについてご紹介します。

Button switchCameraAction = (Button)findViewById(R.id.switchCameraAction);
    switchCameraAction.setOnClickListener(new View.OnClickListener()
    {
      @Override
      public void onClick(View v)
      {
        Boolean result = _msLocal.switchCamera();
        if(true == result)
        {
          //Success
        }else
        {
          //Failed
        }
      }
    });

MediaStreamオブジェクトがローカルの映像ストリームの場合、switchCameraメソッドを呼び出すことができます。
これにより、今まではできなかった、「getUserMedia後のインカメラ/アウトカメラ切り替え」が可能になります。

以上が、サンプルアプリの簡単なコード解説になります。今回はビデオチャットだけの紹介でしたが、ほぼ同じようなAPIでテキストや画像が送れるデータチャットも可能です。

おわりに

今回は、SkyWayのiOS/Android用SDKのチュートリアルをお届けしました。

JavaScript版と同じように、手軽にWebRTCが利用可能です。是非ご自身のアプリケーションに組み込んでみてください！

SkyWay ScreenShareを使ってWebRTCの画面共有機能を実装しよう

仲裕介 — Fri, 28 Aug 2015 00:00:15 +0000

連載： WebRTCプラットフォーム ”SkyWay” 入門 (4)

連載4回目の今回は、7月28日にリリースされた、SkyWay ScreenShareのチュートリアルをお届けします。

SkyWay ScreenShareは、WebRTCのWebアプリケーションで画面共有を簡単に実装できるライブラリ、画面共有に必要なChrome・Firefox向けのExtensionが簡単に実装できるソースコードが含まれています。

画面共有機能の概要

WebRTCの画面共有機能は、ブラウザ画面やPCのデスクトップ画面をリアルタイムで相手に配信できる機能です。

Chromeでの画面共有の様子

WebRTCの画面共有機能はChrome 34以上または、Firefox 33以上で利用可能です。

Chromeでの実装

画面共有機能は、Chrome 26で初めてブラウザに実装されました。当初は、Chromeのchrome://flagsからEnable screen capture support in getUserMedia()というフラグをONにし、getUserMedia()のオプションを指定することで、実現できていました。しかし、セキュリティ上の問題からChrome 34でそのフラグが削除され、代わりにChrome Extensionをインストールするか、Chrome Appsからしか利用できなくなりました。

Firefoxでの実装

Firefoxについては、Firefox 33から画面共有機能が実装されています。Firefoxの場合は、Chromeとは方式が異なり、about:configのmedia.getusermedia.screensharing.enabledという設定をtrueに設定し、media.getusermedia.screensharing.allowed_domainsという設定項目に、画面共有機能を許可するWebサイトのドメインを追加することで利用できるようになります。また、media.getusermedia.screensharing.allowed_domainsには、Mozillaが許可したサービスのドメインが予め設定されています。こちらにドメインを追加してもらいたい場合は、このサイトの下部に掲載されているフォームから申請が可能です。（筆者は申請したことはありませんが、恐らく審査があると思われます）

標準化の状況

WebRTCのJavaScriptAPIの標準化はW3Cで行われています。この画面共有機能についても、今年の２月に仕様書が作られて標準化が進められています。仕様書は「Screen Capture」です。仕様書についての詳細な解説は割愛しますが、現在、ChromeとFirefoxで実装されている画面共有機能はブラウザベンダごとの独自実装であり、今後実装が変更になる可能性は高いと考えられます。

SkyWay ScreenShareの使い方〜ビルド編〜

ここからSkyWay ScreenShareの使い方を説明します。はじめに、github.com/nttcom/SkyWay-ScreenShareからファイル一式をローカル環境にcloneして下さい。また、ここに書いている内容の詳細はREADMEにも掲載していますので、合わせてご覧ください。

Chrome Extensionの作成

まずはマニフェストファイルを修正します。JSONファイルのひな形にそって必要な項目を入力して下さい。アイコンファイルも必要です。

{
  "name": "Your extension name here",
  "short_name": "Your extension short_name here",
  "version": "Your extension version number here",
  "manifest_version": 2,
  "description": "Your extension description here",
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },
  "permissions": [
    "desktopCapture",
    "tabs"
  ],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "content_scripts": [{
    "matches": [""],
    "js": ["content.js"],
    "all_frames": true,
    "run_at": "document_end"
  }]
}

尚、ここで重要なのは matchesです。ここには、このExtensionのりようを許可するWebサイトのURLを記載します。必ずご自身のWebサイトのURLを指定して下さい。ワイルドカードを利用して複数のURLにマッチさせることも可能ですが、その場合は、あなたのExntensionを他のWebサイトで利用される可能性があります。セキュリティ上もよろしくありません。

例："matches": ["https://*.skyway.io/*"]

次にビルドしましょう。SkyWay-ScreenShareではビルド用のgulpタスクとnpm-scriptでエイリアスコマンドを用意しています。SkyWay-ScreenShareディレクトリの直下で、次の２行のコマンドを実行します。npmコマンドは事前に使えるようにしておいて下さい。

npm install
npm run build-chrome

ビルドが完了したら、出来上がったファイルをChromeに読み込ませましょう。chrome://extensions/ にアクセスし、デベロッパーモードを有効にします。そして、パッケージ化されていない拡張機能を読み込むをクリックし、以下のディレクトリを指定します。

SkyWay-ScreenShare/chrome-extension/screenshare_chrome_extension/

読み込むと以下のようになります。（この画像はChromeウェブストアからダウンロードしたものが写っています）

Chrome Extensionを読み込みます

また、ディレクトリと同一フォルダにあるscreenshare_chrome_extension.zipは、Chromeウェブストアにアップロードする際に利用できます。

これでChrome Extensionの作成は完了です。

Firefox Extensionの作成

（注意）SkyWay-ScreenShareのリポジトリには、「Firefox Add-On」という表記で記載しておりますが、画面共有機能を利用するために作成するモノは、Firefox Extension（拡張機能）となります。Add-OnはFirefoxの拡張機能やテーマ等全ての総称となるため、リポジトリの表記とは異なりますが、本記事中では、Firefox Extensionと表記を統一させて頂きます。

Firefox Extensionでは、メインプログラムとパッケージファイルの二つを修正します。まずは、メインプログラムです。

var pageMod = require('sdk/page-mod');
var self = require('sdk/self');
var __temp = require('chrome');
var Cc = __temp.Cc;
var Ci = __temp.Ci;

var domains_to_add = [''];
var addon_domains = [];
var allowed_domains_pref = 'media.getusermedia.screensharing.allowed_domains';
var enable_screensharing_pref = 'media.getusermedia.screensharing.enabled';

 ~~ 省略 ~~

ここではdomains_to_add = [''];に、画面共有機能を有効にするWebサイトのドメインを指定して下さい。指定方法は以下のようになります。

例：domains_to_add = ['*.skyway.io']

次にパッケージファイルを修正します。ここではExtensionの基本情報を入力していきます。ひな形にそって必要な情報を入力して下さい。アイコンファイルも必要です。

{
    "name": "your_add-on_name_here",
    "title": "Your add-on title here",
    "description": "Your add-on description here",
    "author": "Your add-on author here",
    "version": "Your add-on version number here",
    "license": "Your add-on license here",
    "homepage": "Your add-on homepage url here",
    "icon64": "icon64.png",
    "icon": "icon48.png"
}

次にFirefox Extensionのビルドに必要なツール「cfx」をインストールします。インストール方法はこのサイトを参考にして下さい。

ツールのインストールが完了したら、まずはプレビルド（pre build）を行います。ExtensionをビルドするためにはランダムなIDを予めパッケージファイルに記載しておく必要があるため、初回のプレビルドで、パッケージファイルにIDを挿入しています。

npm install
npm run pre-build-firefox

初回のプレビルドでIDが挿入された場合、以下の様なエラーが発生します。これは問題ありません。

No 'id' in package.json: creating a new ID for you.
package.json modified: please re-run 'cfx xpi'

再度以下の通り、ビルドを行って下さい。

npm run build-firefox

ビルドが完了したら、Firefoxに読み込ませて動作確認を行いましょう。about://addonsにアクセスし、作成したExtension本体である、SkyWay-ScreenShare/firefox-addon/screenshare_firefox_addon.xpiをドラッグ・アンド・ドロップさせます。

Firefox Extensionを読み込みます

Firefox Extensionの配布は、通常のWebサーバ上に上記xpiファイルを設置し行って下さい。

これでFirefox Extensionの作成は完了です。

JavaScriptライブラリの作成

SkyWay-ScreenShareには今まで作成したExtensionを利用するためのJavaScriptライブラリ「screenshare.js」が同梱されています。自分でビルドする場合は、以下のように行って下さい。

npm install
npm run build-library

ビルドに成功すると、以下の通りライブラリが生成されます。

SkyWay-ScreenShare/dist/screenshare.js
SkyWay-ScreenShare/dist/screenshare.min.js

また、ライブラリはCDNでも提供しています。

最後に、ライブラリの修正や機能追加などは大歓迎です。TypeScriptのソースファイルを同梱していますので、その際はご利用下さい。Pull Reqestもお待ちしています！

SkyWay ScreenShareの使い方〜アプリ開発編〜

ExtensionとJavaScriptライブラリの準備ができたところで、同梱しているサンプルアプリケーションを例に、画面共有機能を使ったアプリの開発方法をご紹介します。

まず、newでオブジェクトを作成します。debugオプションを指定するとコンソールログにデバッグログが出力されます。

// スクリーンキャプチャの準備
var screen = new SkyWay.ScreenShare({debug: true});

次に、startScreenShare()メソッドを利用して、画面共有機能を開始するためのコードを実装していきます。このメソッドの第一引数には、取得する映像の縦横サイズとフレームレートを指定します。第二引数のコールバック関数は、正しく取得できた場合に呼ばれ引数としてStream Objectが返ってきます。これをVideo要素に入れてあげれば画面が表示されます。

また、第四引数についてはChromeのみ利用できるオプショナルなコールバック関数で、画面共有が何らかの方法で終了した場合に呼ばれます。Firefoxでは現状終了検知が出来ないため、Chrome限定です。

screen.isEnabledExtension() はExtensionが利用しているブラウザで有効かどうか（インストール済みかどうかも含めて）を判定します。

// スクリーンシェアを開始
$('#start-screen').click(function () {
	if(screen.isEnabledExtension()){
			screen.startScreenShare({
					Width: $('#Width').val(),
					Height: $('#Height').val(),
					FrameRate: $('#FrameRate').val()
			},function (stream){
					$('#my-video').prop('src', URL.createObjectURL(stream));
					if(existingCall != null){
							var _peerid = existingCall.peer;
							existingCall.close();
							var call = peer.call(_peerid, stream);
							step3(call);
					}
					localStream = stream;

			},function(error){
					console.log(error);
			},function(){
					alert('ScreenShareを終了しました');
			});
	}else{
			alert('ExtensionまたはAddonをインストールして下さい');
	}

});

次に、画面共有をプログラム側で終了させる場合のコードを実装していきます。現在は終了のための専用メソッドは用意していません。先ほど取得したStream Objectを保持しておき、終了したいタイミングでstop()メソッドを読んで下さい。これで、画面共有が止まります。いずれ、Stream Objectの管理機能を実装する予定なので、その時には専用のメソッドを用意します。

// スクリーンシェアを終了
$('#stop-screen').click(function () {
	localStream.stop();
});

アプリ開発方法の紹介は以上です。

おわりに

今回は、SkyWay-ScreenShareを使った、WebRTCの画面共有機能の実装方法をご紹介しました。画面共有機能は様々なユースケースで活用できる機能ですので、是非ご自身のアプリケーションに組み込んでみてください！

次回は、同じく7月28日にリリースされたSkyWay-DrivingVehicleについてのチュートリアルをお届けいたします。

SkyWay音声認識機能を使ってみよう！

岩瀬義昌 — Wed, 26 Aug 2015 00:00:22 +0000

連載： WebRTCプラットフォーム ”SkyWay” 入門 (3)

連載3回目の今回は、SkyWayの付加機能としてリリースされているSkyWay音声認識機能の利用方法についてお届けいたします。SkyWay音声認識機能とは、クライアント（ブラウザ側）でマイク等を通じて入力した自由発話音声を、サーバ（SkyWay側）と連携して、文字列として受け取る機能のことです。いますぐ試してみたい方は、デモサイトから試用可能です。(注：WebSocketが疎通する環境でないと、正常に動作しません)

同様の機能を実現するAPIとして、Speech Recognition APIがありますが、caniuse.comでも示されるように対応するブラウザが限定されています。SkyWay音声認識機能では、標準では対応していないFirefox等のブラウザも対応可能です。

準備

以降で記載するサンプルコードの中で、SkyWayが提供しているAPIキーが必要となります。実際にお手元で試される場合は、SkyWay公式サイトから開発者登録を行ってください。本記事のサンプルで利用するには、利用可能ドメインに「localhost」と書いた、APIキーを取得する必要があります。

今回作成するサンプル

作成するサンプルは、「音声認識を開始するボタン」と「認識結果を表示するエリア」の2要素のみで構成するシンプルな音声認識アプリケーションです。

スクリーンショットはこちらです。

SkyWay音声認識スクリーンショット

こちらを構成しているサンプルコードは以下の通りです。




	SkyWay Speech Recognition Sample

上記HTMLを任意の名前で保存してください。本記事ではsample.htmlという名前で保存します。また、htmlを格納するディレクトリと同じ階層に

の2ファイルを保存して置いてください。音声認識に必要なライブラリとなります。　

動かしてみよう

既にApacheやNginxをインストールされている場合はそちらも活用できますが、今回はpythonからシンプルなWebサーバを起動してみます。コマンドはpython -m SimpleHTTPServerです。

localhostの8000番でWebサーバが起動するので、http://localhost:8000/sample.htmlへ、Chrome/Firefox/Operaのいずれかでアクセスしてみましょう。画面が表示されたら、「start」ボタンをクリックすると、マイク使用許可確認のポップアップが表示されますので、Allow/許可を押下します。その後に自由に発話して、適当なタイミングで発話をやめてください。音声認識結果が上手くいくと、数秒以内に音声認識結果の文字列が表示されます。

コードのポイント解説

SkyWay音声認識機能を利用するためには、大きく分けて2つの処理が必要になります。

1. コンフィグの設定・コールバックの設定

まずSpeechRec.config関数を利用して、SkyWayKeyおよびlibopus.worker.jsへのパスを設定します。サンプルでは、以下のようにconfigを設定しています。

SpeechRec.config({
   'SkyWayKey':'3969c30a-2789-4e46-9155-79a188256633',
   'OpusWorkerUrl':'libopus.worker.js'
});

SpeechRec.configには、その他のパラメータも設定可能であり、ドキュメントから確認できます。

次に各種コールバックの設定をします。サンプルでは2種類のコールバックを設定しています。

SpeechRec.on_proc(function(info){
	console.log(info.volume);
});

SpeechRec.on_result(function(result){
    console.log(result.candidates);
    $("#result").text(result.candidates[0].speech);
});

1つ目のon_procは、発話時の音声ボリュームを取得できた場合に発火するコールバック関数です。サンプルでは、コンソール画面に音量を表示するようにしています。

2つ目のon_resultは、音声認識結果を取得できた場合に発火するコールバック関数です。サンプルでは、結果をコンソール画面に表示する処理、および#resultで指定されるdivエリアに、音声認識結果を書き込む処理をしています。

サンプルでは分かりやすいように、コールバックを2つのみしか設定していませんが、実際にはさらに多くのコールバックを設定可能です。詳細はコールバック関数一覧をご確認ください。

2. 開始・停止の実行

コンフィグおよびコールバックの設定が完了したら、実際に音声認識を開始・停止するための関数を呼び出します。サンプルでは、#start_recボタンがクリックされた際に呼び出すSpeechRec.startが、音声認識を開始するための処理に該当します。

$("#start_rec").click(function(){
	SpeechRec.start();
	console.log("音声認識を開始します");
});

なお、開始だけではなく任意のタイミングで音声認識を終了させるSpeechRec.stop等もあります(サンプルでは省略)。その他の関数はドキュメントから確認いただけます。

おわりに

いかがでしたでしょうか。今回はSkyWayの付加機能である、音声認識機能について解説いたしました。

次回は画面共有を簡単に実現するSkyWayScreenShareライブラリについてお届けします。

SkyWay MultiPartyを使ってグループチャットを作ろう

本間咲来 — Mon, 24 Aug 2015 00:00:21 +0000

連載： WebRTCプラットフォーム ”SkyWay” 入門 (2)

連載2回目の今回は、7月28日にリリースされたライブラリ、SkyWay MultiPartyのチュートリアルをお届けします。 SkyWay MultiPartyは、一言で言うと多人数によるビデオ・テキストチャットを『簡単に』作るためのライブラリです。

本ライブラリを使用することで、グループビデオチャットやテキストチャットを、ほんの20行程度のJavaScriptコードで実装をすることができます。

サンプルコードを用意していますので、手元で実行しながら進めてみましょう。

10行ビデオチャット

以下のスクリーンショットをご覧ください。

まずはこのような複数人が参加できるビデオチャットシステムを、10行程度のJavaScriptコードで実装してみましょう。サンプルコードを以下に記載します。

早速動かしてみましょう。

上のコードを、videochat.htmlという名前で保存します。

19行目でSkyWayのAPIキーが必要となりますので、使用する際はSkyWayから開発者登録を行ってください。本サンプルで使用するには、利用可能ドメインに『localhost』と書いて、APIキーを取得する必要があります。

PCにApacheやNginxなどのサーバがインストールされている場合は、そちらで動かしても問題ありませんが、入っていない場合は、以下の様にPythonのコマンドでWebサーバを起動できます。

python -m SimpleHTTPServer

localhostの8000番ポートでWebサーバが起動するので、Chrome、Firefox、Operaのいずれかのブラウザでアクセスしてみましょう。

次に別のタブやブラウザで、もう2、3個同じページを開いてみます。

複数人参加のビデオチャットが実装できていることがわかります。

ビデオチャットのコード

それではコードを見てみましょう。

今回はjQueryを使用するので、4行目でjQueryを読み込んでいます。 (SkyWay MultiPartyを使用するのにjQueryが必須というわけではありません) 5行目と6行目で、SkyWayライブラリ(peer.min.js)とSkyWay MultiPartyライブラリ(multiparty.min.js)を読み込んでいます。 13行目で、ビデオを表示するためのdivを1つ用意しています。

18〜33行目がJavaScriptコードです。大きくMultiPartyオブジェクトの生成部分と、イベントハンドラ部分に分かれています。

SkyWay MultiPartyでは、最初にコンストラクタを呼ぶことで MultiPartyオブジェクトを生成します。引数にはAPIキーが必要となります。

// MultiParty インスタンスを生成
  multiparty = new MultiParty( {
    "key": "********-****-****-****-************"  /* SkyWay keyを指定 */
  });

続くコードがmultipartyオブジェクトのイベントハンドラになります。

multiparty.on('my_ms', function(video) {
    // 自分のvideoを表示
    var vNode = MultiParty.util.createVideoNode(video);
    $(vNode).appendTo("#streams");

  }).on('peer_ms', function(video) {
    // peerのvideoを表示
    var vNode = MultiParty.util.createVideoNode(video);
    $(vNode).appendTo("#streams");

  }).on('ms_close', function(peer_id) {
    // peerが切れたら、対象のvideoノードを削除する
    $("#"+peer_id).remove();
  });

SkyWay MultiPartyでは、

multiparty.on('イベント名', コールバック関数)

の形式で、イベントハンドラを設定することができます。

サンプルでは3つのイベントに対し、ハンドラを定義していることがわかります。

1つ目が'my_ms'で、これは自分のメディアストリームの準備が整った際に発生するイベントです。メディアストリームとは取得した映像や音声を扱うためのオブジェクトで、例えばPCのカメラやマイクから取得した映像・音声がこれにあたります。コールバックとして呼ばれる関数には、メディアストリームから生成したオブジェクトURLとidがオブジェクトとして渡されます。ライブラリにはそのオブジェクトからvideoノードを生成するユーティリティが用意されていますので、それを使用しvideoノードを生成・表示しています。

2つ目は、'peer_ms'というイベントに対するコールバックで、これはチャットの相手(peer)のメディアストリームを取得する準備が整った際に発生するイベントです。こちらも自分のメディアストリームと場合と同様、videoノードを生成・表示しています。

3つ目のイベントは'ms_close'で、peerのメディアストリームの切断を検知した際に発生します。このコールバックでは、peerのvideoノードを削除する処理を書いています。

以上で、ビデオチャット機能を実装することができました。

10行テキストチャット

続いてテキストチャット機能も実装してみましょう。

まず、テキストの入力と表示を行うためのHTML要素を追加します。以下のコードを『

』の下に追加してみましょう。

次に、以下のJavaScriptコードを、『』の前に追加します。

//テキストを入力し、submitしたとき
  $("form").on("submit", function(ev) {

    //onsubmitのデフォルト動作（reload）を抑制
    ev.preventDefault();

    //テキストを取得
    var $input = $(this).find("input[type=text]"); 
    var data = $input.val();
    $input.val("");

    //テキストを表示
    $("#message").append(data + "
");

    //peerにメッセージを送信
    multiparty.send(data);

  });

  // peerからテキストメッセージを受信したとき
  multiparty.on('message', function(mesg) {
    $("#message").append(mesg.data + "
");
  });

それでは先ほどのページをリロードしてみましょう。

入力フォームが追加されたことがわかります。文字を入力し、エンターキーを押すと、そのテキストが表示されます。

他のタブや、ブラウザから入力したテキストも表示できることが確認できます。

テキストチャットのコード

それではコードを見てみましょう。テキストチャットのコードは、データを送信する際の処理と、データを受信する際の処理に分かれています。

以下のコードで、テキストが入力され、送信されるまでの処理を記述しています。

//テキストを入力し、submitしたとき
$("form").on("submit", function(ev) {

  //onsubmitのデフォルト動作（reload）を抑制
  ev.preventDefault();

  //テキストを取得
  var $input = $(this).find("input[type=text]"); 
  var data = $input.val();
  $input.val("");

  //テキストを表示
  $("#message").append(data + "
");

  //peerにメッセージを送信
  multiparty.send(data);

});

multiparty.send()で、テキストをそのまま送信していることがわかります。

そして以下の部分で、メッセージを受信した際に発生するイベント'message'に対する、コールバックを設定しています。

// peerからテキストメッセージを受信したとき
multiparty.on('message', function(mesg) {
  $("#message").append(mesg.data + "
");
});

簡易ではありますが、テキストチャットを実現することができました。

おわりに

今回は、SkyWay MultiPartyを使ったビデオ・テキストチャットの作り方をお届けしました。少しのコードで簡単に実装できることがお分かりいただけたかと思います。

次回は、同じく7月28日にリリースされたSkyWay音声認識APIについてのチュートリアルをお届けいたします。

ビデオチャット＆テキストチャット作成チュートリアル！WebRTCを簡単＆柔軟に使える「SkyWay」を使ってみよう

桂健太 — Thu, 06 Aug 2015 00:00:06 +0000

連載： WebRTCプラットフォーム ”SkyWay” 入門 (1)

WebRTCを簡単に利用するためのプラットフォームSkyWayをご存知ですか？本連載では、WebRTCを簡単に利用するためのプラットフォームSkyWayについて、基本的なチュートリアルから、各種ライブラリの紹介までしていきます。

連載第1回目である今回は、まず、WebRTCの基本的な説明をした後に、実際にSkyWayを使って、ビデオチャットの作成とデータチャンネルを使ったチャットの作成をしていきます。

WebRTCとは

WebRTCとは、ブラウザやアプリ間でビデオや音声、データのやり取りをP2P(Peer to Peer)で行うことを可能にする規格です。従来のビデオチャットは互換性のない独自技術で実装されていましたが、WebRTCはオープン標準として仕様が作成・公開されており、相互接続が保証されています。

また、ブラウザで動作することから特別なアプリケーションをインストールする必要がありませんし、すでにあるウェブアプリケーションに埋め込むことで、シームレスにビデオチャットを動かすこともできます。さらに、オープンソースのコードを利用することで、ブラウザだけに限らず、ネイティブアプリにWebRTCを組み込むことも可能です。

WebRTCの仕組み

WebRTCはビデオ等のデータをP2Pでやり取りすることが出来ますが、実際にブラウザ間で直接接続をするためには、まず、互いに自分のIPアドレス／ポート番号等の情報を教え合わなければなりません。一般的に、この情報交換を行うためにシグナリングサーバというサーバを用意する必要があります。

※交換する情報はIPアドレス、ポート番号以外にもいくつかあります。

また、お互いがNATの内側に存在する場合やFirewallの内側にいる場合、シグナリングサーバだけでは接続することができません。そのために利用するのが、STUN／TURNサーバです。ここでは具体的な説明は省略しますが、作成したアプリケーションをユーザに広く使ってもらうためには、これらのサーバも用意する必要があります。

(詳細を知りたい方は、がねこまさしさんが書かれたコチラの記事をお読みください: 壁を越えろ！WebRTCでNAT/Firewallを越えて通信しよう)

SkyWayとは

今までの説明を見てWebRTCは「大変そうだ」と思った方は多いと思います。実際、シグナリングサーバやSTUN/TURNサーバを用意するのは容易ではないです。

そこで登場するのがWebRTC開発者向けプラットフォーム「SkyWay」です。SkyWayは、以下の図で示す通り、複雑なシグナリング処理を担うAPI郡とJavascriptライブラリ／Android,iOSライブラリ、STUN/TURNサーバで構成されています。

このSkyWayを利用することで、シグナリングサーバやSTUN/TURNサーバを独自に用意する必要はなく、開発者はP2P通信部分のプログラミングにのみ集中することができます。

利用者登録が必要です

SkyWayは現在トライアルサービス中で、誰でも無料で使うことができます。さっそくウェブサイトから利用者登録をしてみましょう。

http://skyway.io/

「登録を行う」ボタンをクリックして、開発者登録画面に向かいます。

必要事項を入力します。ここで入力するドメイン名は、セキュリティ向上を目的として行っているOriginチェックのために必要となっています。ここのドメイン名は開発者登録後に変更可能ですので、まずは「localhost」とだけ入力しておいてください。

登録が正常に完了したら、ログインページへ行き、ログインしてください。ログインが完了すると以下の画面のような開発者ダッシュボードが表示されます。

右に表示されいるのがAPIキーです（上図ではマスクしています）。こちらをJavaScriptやiOS/Androidのコード内に埋め込み、SkyWayのAPIにアクセスします。

ちなみに、設定変更ボタンをクリックすると、利用ドメインの編集やRestAPIの有効無効の切り替え、そしてAPIキーの削除が可能です。

これでSkyWayを利用するための準備が整いました。早速ビデオチャットを実装してみましょう。

簡易ビデオチャットの作成と実行

まず、ビデオチャットを実装するにあたり、以下の環境をご用意ください。

Chorme, Firefox, Operaのいずれかのブラウザ
カメラ／マイク（PCに接続可能なもの）

まずは以下の内容で、HTMLを書きます。適当なフォルダに「videochat.html」というファイル名でHTMLファイルを作成してください。



    
    
    


    Simple Video Chat
    
        
        
    
    
        MyID: -
        PeerID: -

HEADタグ内で、jQueryとSkyWayライブラリ、そして今回作成するビデオチャット用のJavaScriptを読み込んでいます。jQueryはボタンクリック時のイベントを設定するときに使用します。SkyWayライブラリは今まで説明してきたとおり、シグナリング部分の処理を全部行ってくれるライブラリです。

次にJavaScriptのコードを書きます。先ほどのHTMLと同じフォルダに、「videochat.js」というファイル名でJavaScriptのファイルを作成してください。ここで、APIキーは先ほど入手したものに置き変えて入力してください。

// カメラ／マイクにアクセスするためのメソッドを取得しておく
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

var localStream;    // 自分の映像ストリームを保存しておく変数
var connectedCall;  // 接続したコールを保存しておく変数

// SkyWayのシグナリングサーバーへ接続する (APIキーを置き換える必要あり）
var peer = new Peer({ key: 'YourApiKey', debug: 3});

// シグナリングサーバへの接続が確立したときに、このopenイベントが呼ばれる
peer.on('open', function(){
    // 自分のIDを表示する
    // - 自分のIDはpeerオブジェクトのidプロパティに存在する
    // - 相手はこのIDを指定することで、通話を開始することができる
    $('#my-id').text(peer.id);
});

// 相手からビデオ通話がかかってきた場合、このcallイベントが呼ばれる
// - 渡されるcallオブジェクトを操作することで、ビデオ映像を送受信できる
peer.on('call', function(call){
  　
    // 切断時に利用するため、コールオブジェクトを保存しておく
    connectedCall = call;

    // 相手のIDを表示する
    // - 相手のIDはCallオブジェクトのpeerプロパティに存在する
    $("#peer-id").text(call.peer);

    // 自分の映像ストリームを相手に渡す
    // - getUserMediaで取得したストリームオブジェクトを指定する
    call.answer(localStream);

    // 相手のストリームが渡された場合、このstreamイベントが呼ばれる
    // - 渡されるstreamオブジェクトは相手の映像についてのストリームオブジェクト
    call.on('stream', function(stream){

        // 映像ストリームオブジェクトをURLに変換する
        // - video要素に表示できる形にするため変換している
        var url = URL.createObjectURL(stream);

        // video要素のsrcに設定することで、映像を表示する
        $('#peer-video').prop('src', url);
    });
});

// DOM要素の構築が終わった場合に呼ばれるイベント
// - DOM要素に結びつく設定はこの中で行なう
$(function() {

    // カメラ／マイクのストリームを取得する
    // - 取得が完了したら、第二引数のFunctionが呼ばれる。呼び出し時の引数は自身の映像ストリーム
    // - 取得に失敗した場合、第三引数のFunctionが呼ばれる
    navigator.getUserMedia({audio: true, video: true}, function(stream){

        // このストリームを通話がかかってき場合と、通話をかける場合に利用するため、保存しておく
        localStream = stream;

        // 映像ストリームオブジェクトをURLに変換する
        // - video要素に表示できる形にするため変換している
        var url = URL.createObjectURL(stream);

        // video要素のsrcに設定することで、映像を表示する
        $('#my-video').prop('src', url);

    }, function() { alert("Error!"); });

    // Start Callボタンクリック時の動作
    $('#call-start').click(function(){

        // 接続先のIDをフォームから取得する
        var peer_id = $('#peer-id-input').val();

        // 相手と通話を開始して、自分のストリームを渡す
        var call = peer.call(peer_id, localStream);
            
        // 相手のストリームが渡された場合、このstreamイベントが呼ばれる
        // - 渡されるstreamオブジェクトは相手の映像についてのストリームオブジェクト
        call.on('stream', function(stream){
            // 相手のIDを表示する
            $("#peer-id").text(call.peer);

            // 映像ストリームオブジェクトをURLに変換する
            // - video要素に表示できる形にするため変換している
            var url = URL.createObjectURL(stream);

            // video要素のsrcに設定することで、映像を表示する
            $('#peer-video').prop('src', url);
        });
    });

    // End　Callボタンクリック時の動作
    $('#call-end').click(function(){
        // ビデオ通話を終了する
        connectedCall.close();
    });
});

これらはローカルのファイルとして開いても動作しません。ローカルPC上にサーバを立ててファイルをホスティングしてあげる必要があります。このためだけにローカルPCにApacheやNginxを入れるのもの大変なので、今回はPHP付属のビルトインサーバを利用します。ターミナルを開いて次のコマンドを入力してください (要PHP5.4.0以上)

$ cd {HTML/Javascriptのあるフォルダ}
$ php -S localhost:8888

これで準備が全て整いました。早速ブラウザで開いてみましょう。WebRTCは現在のところChrome, Firefox, Operaでしか動作しないため、それらのブラウザを利用する必要があります。また現在も開発が続けられている分野ですので、最新バージョンを利用するのが望ましいです。

今回は、ビデオ通話を開始する側と受ける側の両方を自分で試してみます。ですので、以下のURLを2つのウィンドウ（またはタブ）で開いてみてください。

http://localhost:8888/videochat.html

無事に表示されたでしょうか？

アクセス時に、カメラとマイクへのアクセスについて許可を求められるので、許可しておきましょう。許可すると、カメラ映像が画面左に表示されます。

それでは、早速通話を開始してみたいと思います。まず、接続相手のIDを渡す必要があります。ビデオ通話を受ける側のIDをコピーして、かける側のテキストボックスに貼り付けてください。相手のIDをちゃんと貼り付けることができたなら、隣の「Start Call」を押します。

2つの映像が表示されれば成功です。

以上が簡単なビデオチャットのチュートリアルでした。非同期処理が中心でかつ、通話を開始する側と受ける側の両方の処理を書く必要があるため、慣れるまでコードの理解が難しいですが、ここさえ乗り越えればスムーズにコードを書くことができますので、少しづつ理解してみてください。

データ通信を使った文字ベースチャット

続いてWebRTCを用いたデータ通信を使ったチャットアプリを作ってみたいと思います。既にビデオチャットを理解できていれば、全く難しいことはありません。

先ほどと同様に、以下の内容で、HTMLを書きます。適当なフォルダに「datachat.html」というファイル名でHTMLファイルを作成してください。

次はJavaScriptです。先ほどのHTMLと同じフォルダに「datachat.js」というファイル名でJavaScriptのファイルを作成してください。 APIキーについてもビデオ通話と同様に、先ほど入手したものに置き変えてください。

var conn;     // データ通信用connectionオブジェクトの保存用変数 

// SkyWayのシグナリングサーバーへ接続する  (APIキーを置き換える必要あり）
var peer = new Peer({ key: 'YourApiKey', debug: 3});

// シグナリングサーバへの接続が確立したときに、このopenイベントが呼ばれる
peer.on('open', function(){
    // 自分のIDを表示する
    // - 自分のIDはpeerオブジェクトのidプロパティに存在する
    // - 相手はこのIDを指定することで、通信を開始することが出来る
    $('#my-id').text(peer.id);
});
 
// 相手からデータ通信の接続要求イベントが来た場合、このconnectionイベントが呼ばれる
// - 渡されるconnectionオブジェクトを操作することで、データ通信が可能
peer.on('connection', function(connection){
  　
    // データ通信用に connectionオブジェクトを保存しておく
    conn = connection;

    // 接続が完了した場合のイベントの設定
    conn.on("open", function() {
        // 相手のIDを表示する
        // - 相手のIDはconnectionオブジェクトのidプロパティに存在する
        $("#peer-id").text(conn.id);
    });

    // メッセージ受信イベントの設定
    conn.on("data", onRecvMessage);
});

// メッセージ受信イベントの設定
function onRecvMessage(data) {
    // 画面に受信したメッセージを表示
    $("#messages").append($("").text(conn.id + ": " + data).css("font-weight", "bold"));
}

// DOM要素の構築が終わった場合に呼ばれるイベント
// - DOM要素に結びつく設定はこの中で行なう
$(function() {

    // Connectボタンクリック時の動作
    $("#connect").click(function() {
        // 接続先のIDをフォームから取得する
        var peer_id = $('#peer-id-input').val();

        // 相手への接続を開始する
        conn = peer.connect(peer_id);

        // 接続が完了した場合のイベントの設定
        conn.on("open", function() {
            // 相手のIDを表示する
            // - 相手のIDはconnectionオブジェクトのidプロパティに存在する
            $("#peer-id").text(conn.id);
        });

        // メッセージ受信イベントの設定
        conn.on("data", onRecvMessage);
    });

    // Sendボタンクリック時の動作
    $("#send").click(function() {
        // 送信テキストの取得
        var message = $("#message").val();

        // 送信
        conn.send(message);

        // 自分の画面に表示
        $("#messages").append($("
").html(peer.id + ": " + message));

        // 送信テキストボックスをクリア
        $("#message").val("");
    });

    // Closeボタンクリック時の動作
    $("#close").click(function() {
        conn.close();
    });
});

では、ローカルにHTTPサーバを立てて開いてみましょう。

$ cd {HTML/Javascriptのあるフォルダ}
$ php -S localhost:8888

http://localhost:8888/datachat.html

先程と同様に、接続を開始する側と接続を受ける側の両方が必要なため、2つ開いてください。無事に表示されましたでしょうか？

それでは、データ通信を開始してみたいと思います。接続相手のIDをコピーして、接続を開始する側のテキストボックスに貼り付けて、Connectボタンを押してください。

相手のIDがお互いの画面に表示されれば接続できています。では、チャット欄に文字を入力してSendボタンを押してみましょう。相手の画面と自分の画面、両方に表示されれば成功です。

以上が簡単なテキストチャットのチュートリアルでした。WebRTCを使えば、テキストだけじゃなく、JavaScriptのオブジェクトやファイル等も送ることが可能です。

おわりに

今回はSkyWayを使った、簡単なビデオチャット／文字ベースチャットのチュートリアルをお届けしました。WebRTCは便利で高機能な反面、自分で実装しようとすると大変ですが、SkyWayを使うことで手軽に利用可能です。

次回はSkyWayを使って、Android/iPhoneでWebRTCを簡単に使う方法をお伝えしたいと思います。

斉藤祐也の海外WEBテク定点観測＜Issue.5: 2013/08/31-2013/09/13＞

斉藤祐也 — Mon, 16 Sep 2013 22:00:17 +0000

プログレッシブ・エンハンスメントに対する熱い議論、Steve Losh氏による技術文書の正しい書き方、JavaScript本の名著であるEloquent JavaScript2版のクラウドファンディングなど、14日間（8/31～9/13）のWeb開発最新ニュース合計18件を紹介します！

注目ニュースピックアップ

プログレッシブ・エンハンスメントはもう過去の話なのか?

この14日間はプログレッシブ・エンハンスメントについて多くの議論が行われた。

事の発端はDaniel Mall氏が始めたSigh, JavaScriptという様々なWebサイトで、JavaScriptをオフにした際の状態をキャプチャしてリストするというTumblr。
それに対して、Ember.jsのメンテナーであるTom Dale氏がProgressive Enhancement: Zed’s Dead, Babyと題した記事で「プログレッシブ・エンハンスメントはもう終わったアプローチである」と宣言した。
そのTom Dale氏の記事に、Jake Archibald氏がProgressive enhancement is fasterにて反論。そして、Daniel Mall氏も“Progressive Enhancement. Still Alive & Kickin’.でSign, JavaScriptを始めた理由を説明した。これらの反論に対して、Tom Dale氏はMaybe Progressive Enhancement is the Wrong Termにてプログレッシブ・エンハンスメントという言葉の意味は範囲を再確認している。技術者的な視点だけではなく、デザイナからの視点でもこのトピックに対して様々な記事があがったりと、プログレッシブ・エンハンスメントそのものに対する興味関心の高さが分かるすばらしい議論となった。

効果的なドキュメンテーションの作り方について – Steve Losh

原題: Teach, Don’t Tell

Steve Losh氏によるテクニカル文書、主にプログラミング言語やライブラリなどのドキュメンテーションの書き方について、7つのアンチパターンを通して、よりよいドキュメントを書くために覚えておきたいことをまとめている。
自分でオープンソースとしてライブラリなどを公開している方はもちろん、会社やチームのガイドラインを作成している人にも、勉強会などでプレゼンをする人にもおすすめできるすばらしいアドバイス。

Eloquent JavaScript 第二版 – Marijn Haverbeke

原題: Eloquent JavaScript second edition

JavaScriptを学ぶ上で読んでおくべき書籍は?という質問には確実に名を連ねてくるのがMarijn Haverbeke氏による「Eloquent JavaScript」。解説だけではなく、実際に手を動かすエクササイズがあったりと、当時としては画期的な書籍で、さらにクリエイティブ・コモンライセンスでオンライン版は無料で公開されている。
2007年に執筆されたこの本は、現在第二版に向けて執筆を始めている。筆者はその執筆のためにクラウド・ファンディングをしているので、興味がある方はぜひファンドに協力してみてはいかがだろう。

すばらしいデザインは常にすばらしいスタイルである – MISC Magazine

原題: Great Design Always Means Great Style

Don Norman氏によるよいデザイン、よいスタイルについてのこの記事では、そもそもデザインにおけるスタイルとは単純な見た目のファッションではなく、パーソナリティのようなものではないかと説明。パーソナリティとは車でいうところのポルシェやBMV、メルセデス・ベンツのようなブランドに抱くイメージを分かりやすい例として紹介している。
氏は記事を以下のように締めくくっている。『すばらしいデザインとは常にすばらしいスタイルを意味する。正直で、理路整然としていて、一貫性があるものだ。』

リソース・プライオリティ – W3C

原題: Resource Priorities

パフォーマンスは今ではインフラ担当の人間だけの問題ではなく、もちろんフロントエンド開発者だけの問題でもなく、全員の問題だ。
その全員にはもちろんW3Cも含まれる。
Resource Prioritiesという仕様はまだドラフト段階ではあるが、画像やスクリプト、ビデオやオーディオに対して、lazyloadやpostponeという属性を追加できるようにするものだ。
これらの属性はJavaScriptを使ってすでに解決されつつある問題ではあるが、仕様として存在する意義は大きい。

海外トレンドコラム

ECMAScript 6のArrowファンクションについて – NCZOnline

原題: Understanding ECMAScript 6 arrow functions

ECMAScript 6で追加される予定のArrowファンクションについてNicolas Zakas氏による解説。
Arrowファンクションはその名前の通り、関数のシンタックスを => このような矢印を使って置き換えることができるようになる。
ただそれだけではなく、newができない、thisのバインディングが違うなどの点が異なる。

テスト駆動開発とはなにか、そしてどんなものなのか

原題: 30 Days of TDD: Day One – What is TDD and Why Should I Use It?

テスト駆動開発にについて、30日間連続で書き続けるチャレンジの1日目。第一回目は、そもそもテスト駆動開発とはどんなものか、そして、その開発ワークフローをどうして利用するべきなのかを解説。

ドメイン・シャーディングをもう一度振り返ってみよう – High Performance Web Sites

原題: Domain Sharding revisited

パフォーマンスにおいて、SPDYやHTTP 2.0の時代が来るとアンチパターンになると言われている。だが、ドメイン・シャーディングというテクニックについて、スティーブ・サウダー氏は、そうとも言えないのではないかと話し、大抵のウェブサイトにおいては次の時代でも活用できるとしている。

レスポンシブ・イメージ会議メモ – Shane Hudson Dot Net

原題: Responsive Images Meeting Notes

9/10にパリで開かれたレスポンシブ・イメージに関する会議のメモ。若干散文的ではあるが、会議で話された内容について大事なポイントをおさえているので、非常に参考になる。先日、webkitにてsrcsetが実装されたが、レスポンシブな環境における画像の取り扱いについて、まだまだ課題は多い。今後も目が話せないトピックだ。

いまさら聞けないHTTP

原題: Know Your HTTP Well

もう本当にいまさら聞けないHTTPにまつわる話を、仕様やヘッダ、メディアタイプ(今後追加される様子)、メソッド、ステータスコードなどのように区分し、それぞれ詳しく解説している。あっという間に1000スターという人気のほどなので、いまさら聞けないのは私だけではなかったようです。

Mutation Observersの使い方 – Dev.Opera

原題: Getting to know mutation observers

JavaScriptが多く利用されるプロダクトの制作を行っているとあるDOMノードツリーが変わったタイミングを知りたいということはよくある。
この記事で紹介をしているDOMレベル4仕様で定義されたMutation Observersは、これまで抱えてきた問題を解決してくれる。これまで利用してきたMutationEventとの違いを踏まえて、利用方法を解説。

CoffeeScriptに未来はあるのか?

原題: Does CoffeeScript Have a Future?

CoffeeScriptはどんな役割を持った言語なのか、JavaScriptに変換される言語としてはよく使われる言語ではあるが、もしかするとJavaScriptそのものの変化にしたがって、もう必要がなくなるかも知れない。CoffeeScriptを愛してやまない著者のゆらぎを感じる非常にすばらしい記事。

クローズアップ“ビデオ/スライド”

WebGLの基礎と応用 – Steven Wittens

原題: Making WebGL Dance

前回の本連載にてピックアップしたActo.netのSteve Wittens氏による、WebGLのイントロダクションビデオ。非常にベーシックな三角形から描画し、アンチエイリアスなどから始め、徐々に3Dの世界へ導いていく。数学的なアプローチは難しい部分も多いが、最終的なアウトプットを見ると、チャレンジする価値があると思わせるプレゼンテーション。

ジャンク・バスターズ: Google Chromeにおけるレンダリングパフォーマンスについて – Nat Duca & Tom Wiltzius

原題: Jank Busters – Chrome Rendering Performance

GoogleのNat Duca氏とTom Wiltzius氏によるJank Bustersシリーズのアップデート版。これまで両氏は何回か同じトピックでプレゼンテーションを行ってきているが、最新版にアップデートされたもの。アニメーションだけではなく、レンダリングプロセスを最適化するために知っておいたほうがよいことばかりをコンパクトに解説している。

一歩先行く“コード”

animo.js

jQuery依存が気にならない、ことはないが、Dan Eden氏作のanimation.cssをベースに、連続したアニメーションを行うのに非常にシンプルなシンタックスで可能にしている。

JavaScriptでJPEG画像を壊してみよう

原題: Image Glitch Experiment

正直なところ何の役に立つのかはわからないが、JavaScriptを使ってJPEG画像を破壊するツール。こういった実験的な実装は見ていて楽しいが、作るとより楽しいはず。

Paul Irishおすすめ。フロントエンド開発者のためのフィード

原題: Frontend Feeds

私自身にとって、貴重な情報源であるGoogleのPaul Irish氏がまとめたフロントエンドデベロッパのためのフィード。
以前にも彼はこの形式でフィードを共有していたが、今回はGitHub。Paulチョイスだけあって、非常にクオリティが高いのでおすすめ。

海外で話題の“ツール”

Custom Element: モダンなWebアプリのためのWeb Componentsギャラリー

原題: Custom Elements – A Web Components Gallery for Modern Web Apps

まだまだ登録数は少ないが、Web ComponentsをGitHubのリポジトリから登録でき、検索可能にするギャラリーサイト。
今後はコンポーネント数が増え、欠かすことができないツールになりえるかもしれない。

★次回の「斉藤祐也の海外WEBテク定点観測」は、9月30日にお届け予定です。★

モダンな言語でHTML5を開発しよう！俯瞰して理解するaltJSの比較 (前篇 – TypeScript, CoffeeScript, Haxe)

池田泰延 — Mon, 09 Sep 2013 22:00:06 +0000

ここ数年のHTML5やCSS3の劇的な進化に比べて、JavaScriptの言語としての進化は緩やかだったのではないでしょうか。HTML5の登場により、リッチなウェブサイト・コンテンツ・アプリケーションが求められる時代になったのに、それを制御する言語が未だにレガシーなものであり、ニーズに追いついていないのが現状です。

2010年前後からこれらを解決する手段として、JavaScriptを生成する中間言語が登場してきました。これらはJavaScriptの代替ということで「altJS」と呼ばれています。altJSの言語の多くはクラス機構のサポートなどJavaScriptの抱える問題の多くを解決しており、スマートにコードを書くための仕組みが用意されており、開発効率を大幅に向上させることができます。本記事では前後編の2回でaltJSの5種類の言語を比較します。

はじめに

altJSとしてよく知られているのが次の5つの言語です。これらの複数の選択肢から、どの言語を選択するかは悩みどころです。例えば静的型情報やコンパイル時の型チェックの有無、パフォーマンス、既存JSとの相性、記述を要するコード量、開発環境の充実度など、言語を採用するには様々な観点からバランスよく選択することが重要になってきます。

本記事では各言語の基本的な文法や特徴、開発環境、筆者が考えるメリット・デメリットについて紹介します。

言語	設計/開発	登場時期	影響を受けた言語
CoffeeScript	Jeremy Ashkenas, et al.	2009	JavaScript, Python, Ruby, Haskell
TypeScript	Microsoft	2012	JavaScript, Java, C#
Haxe	Haxe Foundation, Nicolas Cannasse	2005	ActionScript, OCaml
Dart	Google	2011	Java, C++, JavaScript, CoffeeScript, Go
JSX	DeNA	2012	JavaScript, ActionScript

※いずれの言語もマルチプラットフォームであり、Windows, Mac OS Xともにどちらでも利用することができます。

比較対象のサンプル

サンプルとしてシンプルなスライドショーのWebコンテンツを用意しています。それぞれの言語でどのように記述して実装するのか、また生成されたJavaScriptがどのようなものであるか確認していきましょう。このサンプルでは言語の特性を紹介するために、実用的な要素として「クラス構造の利用」「既存JSライブラリの利用」「ユーザー操作」を含めています。

デモを開く

「Change Photo」ボタンをクリックすると写真が切り替わります。CSS3の3D TransformsをjQueryを用いて制御します（確認の際には、CSS3の3D Transformsが利用できるブラウザをご利用下さい）

TypeScript

概要

TypeScriptはマイクロソフトが開発するオープンソースの言語です。TypeScriptはJavaScript/ECMAScript 5を拡張した設計となっており、型情報やクラス、インターフェース、module、アロー関数式、列挙型、ジェネリクスといった言語機能が搭載されています。また既存のJavaScriptに僅かな修正を加えるだけでTypeScriptとして動作させることも可能です。いつくかの構文はECMAScript 6の案をベースとしたものになっています。

出力されたJavaScriptコードはとても読みやすく、TypeScriptのコードと基本的に1対1対応しています。またコメントも含めてJSに出力されるためデバッグが容易です（ソースマップを利用したデバッグも可能です）。

既存JSライブラリの使用方法

TypeScriptでは定義ファイル（拡張子は.d.ts）と呼ばれるインターフェースを定義したファイルを用意します。TypeScriptではreferenceタグという記述で定義ファイルを参照します。有名なJSライブラリの定義ファイルはborisyankov/DefinitelyTypedでまとまっているので、ここからダウンロードすると良いでしょう。

:javascript:
///

コード例

TypeScriptのコード(v0.9.1.1)

基本的な文法は既存のJavaScriptと同じです。変数には「:」キーワードで任意に型情報を記述することができ、クラスではアクセス修飾子の「private」を利用することで外部から参照することのできないメンバー変数や関数を用意することができます（カプセル化が可能）。

:javascript:
///     
window.onload = ()=> {
    var countManager:CountManager = new CountManager();

    $("#btn").click(()=> {
        // カウントを更新
        countManager.addCount();
        // CSSの角度を計算
        var rot:number = countManager.getCount() * 90;
        // エレメントに適用
        $("#effect").css("transform", "rotateX(" + rot + "deg)");
    });
}

class CountManager {
    private _count:number = 0;
    constructor() {
    }
    addCount() {
        this._count++;
    }
    getCount() {
        return this._count;
    }
}

TypeScriptをコンパイルして生成したJavaScriptのコード

生成されたJavaScriptがオリジナルのTypeScriptの原型をとどめたまま出力されているのがわかります（日本語を含むコメントアウトまで出力されてます）。

:javascript:

///     
window.onload = function () {
    var countManager = new CountManager();

    $("#btn").click(function () {
        // カウントを更新
        countManager.addCount();

        // CSSの角度を計算
        var rot = countManager.getCount() * 90;

        // エレメントに適用
        $("#effect").css("transform", "rotateX(" + rot + "deg)");
    });
};

var CountManager = (function () {
    function CountManager() {
        this._count = 0;
    }
    CountManager.prototype.addCount = function () {
        this._count++;
    };
    CountManager.prototype.getCount = function () {
        return this._count;
    };
    return CountManager;
})();
//# sourceMappingURL=main.js.map

TypeScript版デモを再生する

開発環境

コンパイラを無償でダウンロードできるので、基本的にエディターは選びません。開発環境としてはVisual StudioやWebStorm/IntelliJ IDEAが対応しており、これらのソフトでコード補完やリファクタリング機能を利用することができます。既存のJavaScriptと比べて型指定や型推論も利用できるため、エディターによっては強力なコード補完の恩恵を受けることが可能です。

Visual StudioでTypeScriptを開発している様子

筆者が考えるTypeScriptのメリットとデメリット

メリットとしてはJavaScriptを習熟した人であれば、差分を学習するだけで利用できる学習コストの低さや、型情報や数多くの機能が言語に搭載されており、安全かつ効率的に開発できる点です。出力するファイルを分割することも一つにまとめることもでき、柔軟な開発スタイルが提供されています。またECMAScript 6の案を先行実装している点からも、将来標準になる言語を学習している安心感があります。

デメリットとしてはコンパイルが遅いことと、クラスのメンバー参照で必ずthisを記述しないといけない点、モジュールを利用した場合の名前空間の記述が煩雑になる点です（import修飾子が使えるものの根本的な解決になってはいない）。こういったメリット・デメリットから、JavaScriptエンジニアが中・大規模な開発プロジェクトに利用するのに向いているのではないかと考えています。

CoffeeScript

概要

CoffeeScriptはJavaScriptに比べてシンプルに記述できるため、コード量が少なくなり可読性の高いコードを記述できる言語です。クラス機構をサポートしているほか、配列内包やパターンマッチを利用することができます。構文はRubyライクでもあり、Ruby on Rails 3.1でも正式にサポートされています。

既存JSライブラリの使用方法

どのJSライブラリでも、基本的には設定を要せず利用することが可能です。TypeScriptやHaxeのような定義ファイルを用意する必要はありません。

コード例

CoffeeScriptのコード（v1.6.3）

インデントやシンタックスシュガーを利用する文法の恩恵もあり、他のaltJSのサンプルと比べて最も少ないコード量となっています。TypeScriptと同様にアロー関数式を使うことができたり、「@」キーワードを使えることでthisの指し示すスコープがわかりやすいのが特徴でしょう。またパターンマッチングが利用できるため、①の箇所のように、文字列の中に変数を埋め込むことが可能です。

:javascript:
window.onload = ->
  countManager = new CountManager

  $("#btn").click ->
    # カウントを更新
    countManager.addCount()
    # CSSの角度を計算
    rot = countManager.getCount() * 90
    # エレメントに適用
    $("#effect").css("transform", "rotateX(#{rot}deg)") #①

class CountManager
  _count: 0

  addCount: ->
    @_count++

  getCount: ->
    return @_count

CoffeeScriptをコンパイルして生成したJavaScriptのコード

CofeeScriptもオリジナルのコードが素直にJavaScriptとして出力されています。回避策はありますが、関数の最後の行がreturnステートメントで返されているところは少し戸惑うかもしれません。

:javascript:
// Generated by CoffeeScript 1.6.3
(function() {
  var CountManager;

  window.onload = function() {
    var countManager;
    countManager = new CountManager;
    return $("#btn").click(function() {
      var rot;
      countManager.addCount();
      rot = countManager.getCount() * 90;
      return $("#effect").css("transform", "rotateX(" + rot + "deg)");
    });
  };

  CountManager = (function() {
    function CountManager() {}

    CountManager.prototype._count = 0;

    CountManager.prototype.addCount = function() {
      return this._count++;
    };

    CountManager.prototype.getCount = function() {
      return this._count;
    };

    return CountManager;

  })();

}).call(this);

CoffeeScript版デモを再生する

開発環境

コンパイラを無償でダウンロードできるので、基本的にエディターは選びません。開発環境としてはVisual StudioやWebStorm/IntelliJ IDEAが対応しています。

WebStormでCoffeeScriptを開発している様子

筆者が考えるCoffeeScriptのメリットとデメリット

メリットとしては、圧倒的なコード記述量の少なさです。JavaScriptのシンタックスシュガーと呼ばれるように、最小限のタイピングでどんどんコードがかけていく魅力があります。またインデントを利用する言語であることから、コードの可読性が必然的に高くなるのもメリットの一つです。

デメリットとしては型情報がないことによる、静的型チェックが無いことや開発環境でのコード補完利用の限界です(型情報がないとコード補完にノイズが入りがちになります)。こういったメリット・デメリットから少人数・小規模な体制でスピーディに開発する場合に向いているのではないかと考えています。

Haxe

概要

Haxe（ヘックス）は静的型付け（ただし動的型も使用可能）のオブジェクト指向言語です。汎用プログラム言語でありJavaScriptの他にも、ActionScript、C++、C#、Java、PHPへのソースコードの変換が可能です。

Haxeは文法としては標準化が中止されたECMAScript 4に類似しており、Flashの開発言語ActionScript 3.0に似ているのが特徴です。数多くの機能を言語レベルで備えており、クラス/パッケージ機構、型推論、ジェネリクス、インライン関数、パターンマッチング、配列内包表記、構造的サブタイピング、高機能な列挙型（詳しくは[公式サイトの説明]を参照ください）等の機能を持ち合わせています。コンパイラがOCamlという言語で開発されており、コンパイルが高速です。言語としての硬さ（厳密な型のチェック）やコンパイル速度の面から、大規模開発においてメリットがあります。

既存JSライブラリの使用方法

Haxeでは、Externと呼ばれるインターフェースを定義したファイルを用意します。Externファイルは自分で作成することも可能ですが、Haxe専用のパッケージ管理ツール「haxelib」を使うことで著名なJSライブラリのExternファイルをインスントールすることができます。

例：CreateJSのインストール方法 haxelib install createjs

コード例

Haxeのコード（Haxe 3.0）

HaxeはJavaScriptだけがターゲットの言語ではないため、JSのwindowオブジェクトにアクセスするには、Browserクラスのwindowプロパティを参照します。JavaScriptのオブジェクトを呼び出す際にはこういったラッパークラスを経由して呼び出す必要があります。jQueryを利用する場合は「new JQuery()」という形でインスタンスを作成して利用します。使い方は大きく異ならないもののHaxeの言語文化にあった形にライブラリのAPIが整理されている場合があるので注意が必要です。

:javascript:
package ;
import js.Browser;
import js.JQuery;

class Main {    
    static function main() {
        new Main();
    }

    function new () {
        Browser.window.onload = init;
    }

    function init(e:Dynamic){
        var countManager:CountManager = new CountManager();

        new JQuery("#btn").click(function():Void {
            // カウントを更新
            countManager.addCount();
            // CSSの角度を計算
            var rot:Int = countManager.getCount() * 90;
            // エレメントに適用
            new JQuery("#effect").css("transform", "rotateX(" + rot + "deg)");
        });
    }
}

class CountManager {
    private var _count:Int = 0;
    public function new () {
    }
    public function addCount():Void {
        _count ++;
    }
    public function getCount():Int {
        return _count;
    }
}

Haxeをコンパイルして生成したJavaScriptのコード

Haxeでは、ECMAScript 5相当のJavaScriptを出力します。比較的読みやすいコードが出力されますが、下記の例ではBrowserオブジェクトやJQueryオブジェクトなど、ラッパーオブジェクトがそのままJavaScriptとして出力されています。出力されたコードは手を加えるのはあまり向いていないと言えるでしょう。

:javascript:
(function () { "use strict";
var Main = function() {
    js.Browser.window.onload = $bind(this,this.init);
};
Main.main = function() {
    new Main();
}
Main.prototype = {
    init: function(e) {
        var countManager = new CountManager();
        new js.JQuery("#btn").click(function() {
            countManager.addCount();
            var rot = countManager.getCount() * 90;
            new js.JQuery("#effect").css("transform","rotateX(" + rot + "deg)");
        });
    }
}
var CountManager = function() {
    this._count = 0;
};
CountManager.prototype = {
    getCount: function() {
        return this._count;
    }
    ,addCount: function() {
        this._count++;
    }
}
var js = {}
js.Browser = function() { }
var $_, $fid = 0;
function $bind(o,m) { if( m == null ) return null; if( m.__id__ == null ) m.__id__ = $fid++; var f; if( o.hx__closures__ == null ) o.hx__closures__ = {}; else f = o.hx__closures__[m.__id__]; if( f == null ) { f = function(){ return f.method.apply(f.scope, arguments); }; f.scope = o; f.method = m; o.hx__closures__[m.__id__] = f; } return f; };
var q = window.jQuery;
js.JQuery = q;
js.Browser.window = typeof window != "undefined" ? window : null;
Main.main();
})();

Haxe版デモを再生する

開発環境

コンパイラを無償でダウンロードできるので、基本的にエディターは選びません。開発環境としてはFlashDevelopの対応が特に充実しており、非常に強力な「あいまい補完」と言われるコード補完や、コード生成機能を利用することができます。

FlashDevelopでHaxeを編集している様子

筆者が考えるHaxeのメリットとデメリット

メリットとしては、数多くの機能を言語レベルで搭載している点や、コンパイルが高速である点です。JavaScriptの名前空間の煩雑さやthisのスコープの苦労がなくなるのも大きなメリットの一つです。

デメリットとしては、言語が厳密過ぎる点です。基本的に型指定は必須ですし、暗黙的な型変換が利用できないので、慣れないうちはコンパイルエラーに苦労するでしょう。また出力されるJSファイルが一つにまとまることから、モジュール開発(JSライブラリ開発)には向いていないでしょう。

こういったメリット・デメリットから、大規模もしくはゲームや全画面Canvasのコンテンツなど、複雑なコンテンツを安全に開発する場合に向いているでしょう。　

まとめ

私がaltJSを選ぶ際に必要と考えるのは、プロジェクトへの適正と、エンジニア/クリエイターのバックグラウンドだと考えています。それぞれのaltJSに影響を受けた言語があるように、開発に従事するエンジニアのバックグラウンドによって、言語のとっつきやすさに差があると思います。具体的にはRubyユーザーにはCoffeeScriptが、FlashユーザーにはHaxeが向いている傾向があるでしょう。利用するユーザーが様々なのでaltJSがどれか一つの言語に収束することはなく、勢力分布の変化はあれど基本的にはaltJSのユーザー数は並行して進化していくと筆者は考えています。

次回の後編では、altJS言語としてDartとJSXを紹介します。

参照

Web ComponentsベースのUIライブラリ「Brick」をMozillaが公開

白石俊平 — Wed, 28 Aug 2013 03:36:13 +0000

Web開発のあり方を大きく変えると期待されている、Web Components仕様に準拠した新たなUIコンポーネントライブラリをMozillaが開発していることが明らかになりました（今回のネタ元になった記事はこちら）。その名もBrickです。

Brickは、Brickは、X-Tagというフレームワークの上で構築されています。 X-Tagは、Web Components仕様に準拠したカスタムコンポーネントを容易に作ることができるようにするフレームワークです。また、X-TagはPolymerというライブラリが提供するPolyfillを使用しており、IE9を含むモダンブラウザ上でWeb Componentsを利用可能にします。

そもそもWeb Componentsってなに？

Web Components仕様は様々な機能を提供しますが、その最も大きなものは、「カスタム要素を作れる」というものです。例えば、Web Componentsを使用すると、以下の様なタグを記述するだけでその場にカレンダーを貼り付けることができるようになるというわけです。

:html:

これだけでも、Web制作/開発に大きな影響を及ぼすということを感じていただけるのではないでしょうか。その他、コンポーネントの内部をカプセル化する仕組み（Shadow DOM）や、外部のコンポーネントをlink要素で参照する仕組み（HTMLインポート）などもWeb Componentsは規定しており、HTMLそのものをUIコンポーネント基盤として再構築しようとする、大胆な試みだと言っても過言ではないでしょう。

Brickを試す

繰り返しになりますが、BrickはX-Tag上で構築されたUIコンポーネントライブラリです。それらのコンポーネントは、お使いのブラウザ上（IE9含む）で簡単に試すことができます。

・・・と言いたいところなのですが、現在のBrickにはバグがあるようで、うまく動かないコンポーネントもいくつかありました。とりあえず、現在Brickが提供している14のコンポーネントのうち、一部を以下に紹介します。以下の解説は、Brickのドキュメント上のサンプルを、Google Chrome 29上で動作させたものになります。

アプリケーションバー

スマホアプリの上部に表示されるナビゲーションバーを簡単に作ることができます。

    :html:

    =
    Title
    +
    ?

カレンダー

カレンダーを貼り付けることができます。うまく動作しなかったので、画像はこちらのページに貼り付けてあったものを拝借しました。

    :html:

アイコンボタン

アイコン付きのボタンを簡単に作ることができます。src属性に、アイコン画像のURLを指定します。しかし、現在のバージョンではアイコンがうまく描画されませんでした。

    :html:

  アイコンボタンには＜code＞どんなマークアップでも＜/code＞書けます

レイアウト

ヘッダー・ボディ・フッターというレイアウトを簡単に構築できます。ボディ部分は、コンテンツの高さに応じて自動的にスクロール領域となります。

:html:

    
        I'm the header!
    
    
        I'm the main body! (I will automatically overflow if necessary.)
Filler text
Filler text
Filler text
Filler text
Filler text
Filler text
Filler text
Filler text
Filler text
Filler text
    
    
        I'm the footer!

カスタムコンポーネントを自作する

こうしたコンポーネントを自作することもできます。 X-Tagフレームワークを用いると、コンポーネントを簡単に作ることができます。例えば以下に、前述したアプリケーションバーのソースコードに、日本語でコメントを付与したものを示します。コンポーネントを容易に自作できるという雰囲気を感じ取って頂ければと思います。

:javascript:
(function(){
  // カスタムタグの定義
  xtag.register('x-appbar', {
    // タグのライフサイクルメソッド
    lifecycle: {
      // タグが生成された時に呼び出されるコールバック
      created: function(){
        // 入れ子になったheader要素を取得する
        var header = xtag.queryChildren(this, 'header')[0];
        if (!header){
          header = document.createElement('header');
          this.appendChild(header);
        }
        this.xtag.data.header = header;
        this.subheading = this.subheading;
      }
    },
    // 要素の属性にアクセスする手段を提供する
    accessors: {
      heading: {
        // 属性の設定
        attribute: {},
        // 属性に値をセット
        get: function(){
          return this.xtag.data.header.innerHTML;
        },
        // 属性に値をセット
        set: function(value){
          this.xtag.data.header.innerHTML = value;
        }
      },
      subheading: {
        attribute: {},
        get: function(){
          return this.getAttribute('subheading') || "";
        },
        set: function(value){
          this.xtag.data.header.setAttribute('subheading', value);
        }
      }
    }
  });
})();

まとめ

Brickはまだ正式公開前ということもあり、バグも多く、デザインも洗練されていないのは仕方のないところです。今後に期待といったところでしょうか。

しかし、Web Componentsに関するライブラリをMozillaが公開したというところに、筆者は大きな意義を感じます。 Google主導で進められていると思われていたWeb Componentsに、Mozillaも強くコミットしていくということの現れとも言えるからです（実際Firefoxは、カスタム要素を作るためのdocument.register APIを実装しています）。

エキスパートNo32のえーじさんに昔教えていただいた情報によれば、Web Components仕様にはMicrosoftも強く関心を示しているとのこと。そうなると、Microsoft, Mozilla, GoogleがWeb Componentsに前向きということになりますし、ChromiumをベースとしているOperaはもちろん、以前はGoogleが大きくコミットしていたWebKitにもWeb Componentsの一部は実装されているはずですので、SafariでもそのうちWeb Componentsを使えるようになる可能性があります。

Web Componentsによるマークアップ作業の大変革が起こるのは、意外とそう遠くない未来なのかもしれませんね。

斉藤祐也の海外WEBテク定点観測＜Issue.3-2013/08/03-2013/08/16＞

斉藤祐也 — Sun, 18 Aug 2013 22:00:31 +0000

連載：海外WEBテク最新動向 (3)

Bret Victor氏によるプログラミングの未来について、Trent Walton氏によるユーザーエンゲージメントを高めるデザイン、そしてBoris Smus氏による思いがけないデバイス連携方法など、14日間のWeb開発最新ニュース合計21件を紹介します！

注目ニュースピックアップ

プログラミングが迎えるべき未来 – Bret Victor

原題: The Future of Programming

スライド/リファレンス

インターネットが誕生してから約20年。コンピューターが身近なものになってからも、まだ決して長い時間が経ったとは言えない。iPadやiPod nanoの初期ユーザーインターフェイスコンセプトをデザインしたことで有名なBret Victor氏は時計を40年前に戻して、プログラミングが向かうべき未来について提唱。
いつものことながらプレゼンテーションが非常にうまい。今回はさらにある一定の世代には懐かしさを覚えるユニークなスタイルでの発表。
プログラミングは、まだこれからの分野だ。今ある常識を突き破ることができる。まだまだイノベーションが残る開拓地。

ユーザーエンゲージメントを得るために – Trent Walton

原題: Human Interest

プログレッシブ・エンハンスメントは技術的な面にだけにおけるベストプラクティスではなく、ユーザーエンゲージメントを高めるのにも利用できる。
Trent Walton氏は、一流のホテルが行うようなお客様がホテルでの生活を最大限不便なく過ごせる仕組みやアプローチを、Webサイト／サービスにも同じように当てはめて考えるべきだと提言。
ユーザーを礼儀正しく、尊敬の念を持って扱う事だけが本当の意味でエンゲージメントを高める唯一の方法だ。

音を使ったデバイス連携 – Boris Smus

原題: ULTRASONIC NETWORKING ON THE WEB

モバイル端末は数多く存在し、それらをお互いが連携できるようにする技術も多く存在する。Boris Smus氏はそんなデバイス連携の技術に対して思いもよらない方法を実践して見せてくれる。
その方法は音。
Web Audioを使ってデータをデバイス間でやり取りすることの実現可能性、そしてその本意について詳しく紹介。
この実験に使ったソースコードもオープンソースとして公開しているので、ぜひそちらも参考にしてほしい。

モバイルWebは「本当に」遅いと言えるのか？ – DIGITAL MEDIA BLOG

原題: Are Mobile Web Apps Slow?

本連載の第一回目で紹介したDrew Crawford氏による、なぜモバイルWebアプリは遅いのか？の記事に対するAdobeからの反論。
Drew Crawford氏の主張も認めつつ、Webアプリが持つWebそのものの利点を活用しないのはもったいないとし、Webアプリは「トレンド」から脱し、当たり前の世の中になり始めたばかりであり、まだまだ期待できる点が多いはずだ。 Adobeに加えて、パフォーマンス観点でのネイティブ vs WebについてはいつでもWebの可能性について言及してくるSenchaも、モバイルWebパフォーマンスに関する5つの迷信について、詳しく解説しているので合わせて参考にしてほしい。

BBC NewsにおけるJavaScriptケーススタディ – Responsive News

原題: How we build our Javascript

BBCといえばGELという非常に詳細なWebビジュアル言語のドキュメントを早々と公開するなど、これまでにも新聞社とは思えないほどWebに対しても多くの貢献をしてきているが、この記事ではそのGELの一部でもある独自JavaScriptフレームワーク、Glueからの脱却、そして新しいフレームワークの構築について詳しく解説。BBCがかなりの規模であることを考えると、旧ツールからの脱却コスト、新しいライブラリ選定、全体的なアーキテクチャのケーススタディは多くの開発者にとって参考になるだろう。

海外トレンドコラム

知っておきたいGitのベストプラクティス – Seth Robertson

原題: Commit Often, Perfect Later, Publish Once – Git Best Practices

バージョンコントロールそのものを利用していないケースは少なくなってきたと思うが、SVNからGitに移行したばかりで、どうやってGitを運用していくかが分からないケースはまだまだあるだろう。この記事ではかなり詳細までGitを使ったベストプラクティスについてまとめているので、その際には参考になるだろう。

アルゴリズムを使ってフォトギャラリーを作る方法 – Summit Stories from Crispy Mountain

原題: The algorithm for a perfectly balanced photo gallery

（私自身はそうではないが）Web業界で働いている人でコンピューターサイエンス系の専攻だった方も多いだろう。そんな授業でしか学ばなかったいつになったら役に立つのか分からないアルゴリズムを活かして、効率的なフォトギャラリーをJavaScriptで実装。

非常に強力なIE11のブラウザ開発者ツールについて – Tuts+

原題: The New IE11 F12 Tools

ブラウザの開発者用ツールといえば、ChromeやFirefoxがすぐに頭に浮かぶかもしれないが、IE11に搭載されているツールもかなり強力になってきている。
クロスブラウザ開発で確実に威力を発揮するIE11の開発者ツールの使い方をしっかり解説している。

Angular.jsがなぜ「かっこいい」のか？ – Angular Tips

原題: Why Does Angular.js Rock?

Angular.jsがなんで「かっこいい」のかについて、わかりやすく、実例とともに紹介。この記事が公開されてすぐに同じような形式でEmber.jsの紹介も公開されていた。こういうやりとりはWebの面白いところの1つ。

JavaScriptの「フルスタック」アーキテクチャ – Toptal

原題: Backbone, Node, Express, and More: An Introduction to Full-Stack JavaScript, with Init.js

Init.jsという素っ気ない名前ながら、なかなかどうして前のめりな開発アプローチを紹介。フロントはもちろん、サーバーサイドもNode.js(Express.js)、データベースもMongoDBと隅から隅までJavaScriptで構成するアプローチの利点や背景について詳しく解説している。
この記事とは直接的には関連はないが、記事で紹介されたようなJavaScriptのみを使ってフルスタックを実現するMEAN（MongoDB、Express、Angular.js、Node.js）ボイラープレートも話題になっていて MEANの一例としてMeanというのもすでに公開されているので参考まで。

たった100行のJavaScriptで創る3Dの街風景 – Learning Three.js

原題: How to Do a Procedural City in 100 Lines

Webにおける3Dの表現はまだまだこれから、という風に考えているかもしれないが、Three.jsを使ってたった100行でランダム（に見える）街の風景を作り出す実装について解説。

グラデーションマップをWebで実現する – Web Platform Team Blog

原題: gradientmaps.js – Gradient Maps for the Web

Photoshopでしか表現できないと思っている様々なことは実はブラウザで、つまりJavaScriptで、あるいはCSSで表現できるようになりつつある。
この記事はAdobe社自らグラデーションマップをブラウザで表現する方法を紹介。この記事で使っているソースコードはオープンソースとして公開されている。

DataURIのパフォーマンス: Base64が悪者ではない？ – Mobify

原題: Data URI Performance: Don’t Blame it on Base64

前回の本連載にて紹介した、モバイルブラウザではDataURIは画像を読み込むよりも6倍時間がかかるの再調査記事。前回はBase64でエンコードされたデータをデコードするのに時間がかかっているとしていたが、今回の調査では「DataURI全般の処理そのものがかかっているのでは？」という仮説で終わっている。

クローズアップ“ビデオ/スライド”

ストレスフリーの開発環境のためにできること – Rebecca Murphey

原題: Optimizing for Developer Delight

スライドはこちら。

新天地で活躍し始めたばかりのRebecca Murphey氏はこの3カ月、開発者達がよりストレスなく開発できる環境を作ることに注力してきたそう。JavaScriptのアーキテクチャそのものはもちろん、自動化やログ出力など問題に対する実利的な解決を紹介している。

あなたの知らないCSS3 border-radiusのすべて – Lea Verou

原題: The humble border-radius

スライドはこちら。

CSS3の角丸というベーシックな機能をここまで深堀して解説できるのは、Lea Verou氏以外にはおそらくいないだろう。
スライドそのものがインタラクティブに操作可能な学習リソースになっているので、動画を見る時間が取れなくても、スライドはぜひ見てほしい。

一歩先行く“コード・ライブラリ”

js-git – Tim Caswell

JavaScriptによるGitの実装。
一見して車輪の再発明のように思えるが、様々な環境で動作するJavaScriptでGitを実装することは意味は大きい。 KickStarter、そしてBountysourceでのファンドを成功させ順調に開発に専念できている様子。

Sheetsee.js – Jessica Lord

データのビジュアル表現をサポートするJavaScriptツールは今ではかなりの数があるが、このSheetsee.jsはGoogle Spreadsheetをデータポイントとして利用できる点がユニーク。

Passport – Jared Hanson

PassportはNode.js用でFacebookやTwitterなどのログインの実装を行うツール。ログイン周りは何かと面倒な点が多いので、非常に便利に使えるだろう。

プログラミング – HTML5Experts.jp

Node.jsでSlack Command Botをつくってみよう

E-Commerceから Conversational Commerceへ

Slack Botを書いてみよう

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

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

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

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

2.1 Appセットアップ

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

2.1.2 Foremanを使う

2.2 ユーザの認証

2.2.1 Slack ボタンの設定

2.2.2 トークンの発行

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

2.3 サーバにデプロイする

SkyWay iOS/Android SDKを使って、WebRTCアプリを開発しよう

iOSのサンプルアプリのビルド方法

Androidのサンプルアプリのビルド方法

ビデオチャットのコード

おわりに

SkyWay ScreenShareを使ってWebRTCの画面共有機能を実装しよう

画面共有機能の概要

Chromeでの実装

Firefoxでの実装

標準化の状況

SkyWay ScreenShareの使い方〜ビルド編〜

Chrome Extensionの作成

Firefox Extensionの作成

JavaScriptライブラリの作成

SkyWay ScreenShareの使い方〜アプリ開発編〜

おわりに

SkyWay音声認識機能を使ってみよう！

準備

今回作成するサンプル

動かしてみよう

コードのポイント解説

1. コンフィグの設定・コールバックの設定

2. 開始・停止の実行

おわりに

SkyWay MultiPartyを使ってグループチャットを作ろう

10行ビデオチャット

ビデオチャットのコード

10行テキストチャット

テキストチャットのコード

おわりに

ビデオチャット＆テキストチャット作成チュートリアル！WebRTCを簡単＆柔軟に使える「SkyWay」を使ってみよう

WebRTCとは

WebRTCの仕組み

SkyWayとは

利用者登録が必要です

簡易ビデオチャットの作成と実行

Simple Video Chat

データ通信を使った文字ベースチャット

Chat

おわりに

斉藤祐也の海外WEBテク定点観測＜Issue.5: 2013/08/31-2013/09/13＞

注目ニュースピックアップ

プログレッシブ・エンハンスメントはもう過去の話なのか?

海外トレンドコラム

クローズアップ“ビデオ/スライド”

一歩先行く“コード”

海外で話題の“ツール”

モダンな言語でHTML5を開発しよう！ 俯瞰して理解するaltJSの比較 (前篇 – TypeScript, CoffeeScript, Haxe)

はじめに

比較対象のサンプル

TypeScript

概要

既存JSライブラリの使用方法

コード例

TypeScriptのコード(v0.9.1.1)

TypeScriptをコンパイルして生成したJavaScriptのコード

開発環境

筆者が考えるTypeScriptのメリットとデメリット

CoffeeScript

概要

既存JSライブラリの使用方法

コード例

CoffeeScriptのコード （v1.6.3）

CoffeeScriptをコンパイルして生成したJavaScriptのコード

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

モダンな言語でHTML5を開発しよう！俯瞰して理解するaltJSの比較 (前篇 – TypeScript, CoffeeScript, Haxe)

CoffeeScriptのコード（v1.6.3）

Haxeのコード（Haxe 3.0）