カテゴリー別アーカイブ: JavaScript

Web フォントの表示の最適化 〜 Font Loading API 〜

1. Overview

Web フォントはその性質上, ブラウザがテキストの表示に必要なフォントを知ることができるのは他のリソースと比較するとずっと後になります.

  1. @font-face が含まれた CSS をロード
  2. スタイルとドキュメントを結合した視覚部分を表現するツリーの構築
  3. テキストとフォントの関係が示された時に, 必要なフォントを確定する

といった, フローとなっているからです. これが引き起こす問題として, FOUT (Flash of Unstyled Text) / FOIT (Flash of Invisible Text) があります.

FOUT

リクエストしたフォントがロードされるまでの間, いくつかのブラウザではタイムアウトするまでの時間が設定されています. タイムアウトまでの間にロードが完了しなかった場合は, 代替フォントが表示され, 代替フォントから指定フォントへの切り替わりの瞬間にチラつきが発生する問題です.

FOIT

ブラウザによってはフォントのロードを待ち続けるように実装されているものもあり, その場合はロードが完了するまでテキストが表示されなくなる問題です.

これらの問題を解決する具体的な手段として, Font Loading API という JavaScript の API が仕様策定されています.

2. Font Loading API

フォントのリソースをロードするためのメソッドが定義されており, あわせてフォントの状態を検知する手段もいくつか定義されています. これによって, @font-face では困難な細かな制御を可能にします.

具体的なコードを見てみましょう.


// 第 1 引数は, `font-family` となる文字列
// 第 2 引数は, フォントファイルの URL か `ArrayBuffer`
// 第 3 引数は, オプションで `{ unicodeRange : 'U+0100-024F' }` などを指定します
const font = new FontFace('Source Code Pro', 'url(source-code-pro.woff2)');

// `FontFace` のインスタンスは, `Promise`
font.load()
  .then(loadedFace => {
    document.fonts.add(loadedFace);
    document.body.style.fontFamily = `'Source Code Pro', monospace`;
  });

`FontFace#load` は, 評価された時点でフォントのリソースを要求するので, リクエストの遅延を少し早めることができます.

以下のコードは, タイムアウトによるフォールバックが必要な場合の実装例です.

const font = new FontFace('Source Code Pro', 'url(source-code-pro.woff2)');
const timeout = 3000;

Promise.race([new Promise((resolve, reject) => setTimeout(reject, timeout)), font.load()])
  .then(loadedFace => {
    // 指定したフォントのロードが完了した場合
  })
  .catch(() => {
    // 指定したフォントのロードに失敗した場合
  });

3. Reference

Progressive Web Apps Roadshow Tokyo 2017 に参加してきた

1. What is Progressive Web Apps (PWA)

そもそも, Progressive Web Apps (以下, PWA) とは, ネイティブアプリに近いユーザー体験を与える Web アプリケーションのことで以下のような特徴があるものとされています (はじめてのプログレッシブ ウェブアプリ).

段階的
プログレッシブ・エンハンスメントを基本理念としたアプリであるため, ブラウザに関係なく, すべてのユーザーに利用してもらえます
レスポンシブ
パソコンでもモバイルでもタブレットでも, 次世代の端末でも, あらゆるフォームファクタに適合します
ネットワーク接続に依存しない
Service Worker の活用により, オフラインでも, ネットワーク環境が良くない場所でも動作します
アプリ感覚
App Shell モデルに基づいて作られているため, アプリ感覚で操作できます
常に最新
Service Worker の更新プロセスにより, 常に最新の状態に保たれます
安全
覗き見やコンテンツの改ざんを防ぐため, HTTPS 経由で配信されます
発見しやすい
W3C のマニフェストと Service Worker の登録スコープにより, 「アプリケーション」として認識されつつ, 検索エンジンからも発見することができます
再エンゲージメント可能
プッシュ通知のような機能を通じで容易に再エンゲージメントを促すことができます
インストール可能
ユーザーが気に入ればアプリのリンクをホーム画面に残しておくことができ, アプリストアで探し回る必要はありません
リンク可能
URL を使って簡単に共有でき, 複雑なインストールの必要はありません

要件が多いので, もう少し的を絞ると,

Fast
3 sec 未満のページロード時間. Service Worker によるキャッシュ
Integrated
Web App Manifest による Add to Homescreen や Prompt to Install, Payment Request API など
Reliable
Service Worker によるキャッシュなど
Engaging
Web Push Notifications など

なかでも印象に残ったことは, Web Push Notifications の使いどころでした. Web Push Notifications を使うには以下の 3 つの条件が揃っていることが望ましいと言えます.

  • timely
  • precise
  • relevant

2. HTTPS

先ほどのセクションで紹介したように, PWA の特徴を実装するには, Service Worker の導入が不可欠です. そして, Service Worker は (localhost を除き) HTTPS のページでしか動作しません. さらに, ページを HTTPS にすることは以下の 3 つの要件を満たすためにも必要になります (また, HTTP/2 を利用するためにも, 事実上 HTTPS は不可欠になります).

  • Identity
  • Confidentiality
  • Integrity

HTTPS のページにアクセスさせるためには,

301 Moved Permanently ステータスコードを使う方法では, リダイレクトされるまでユーザーは暗号化されない接続をすることになるので, 悪意のあるサイトへ誘導するなど中間者攻撃の可能性があります.

一方で, Strict-Transport-Security: max-age=expireTime HTTP レスポンスヘッダを利用する方法では, ブラウザがその Web ページに初めて HTTPS 接続をしたときに, サーバーが Strict-Transport-Security ヘッダで応答すると, ブラウザはその情報を記録します. これによって Strict Transport Security の機能が有効になり, ブラウザがそのサイトへ HTTP 接続することはなくなり, 自動的に HTTPS 接続を試みるようになります.

Strict-Transport-Security ヘッダで指定された有効期限が経過すると, 自動的な HTTPS への変換は行われなくなり, HTTP で接続を試みるようになります.

つまり, Strict-Transport-Security ヘッダで指定された有効期限内で 2 回目以降, 自動的に HTTPS 接続をさせるためのヘッダで, 毎回リダイレクトする必要なく HTTPS の Web ページに誘導できます.

3. Accelerated Mobile Pages (AMP)

Accelerated Mobile Pages (AMP) とは, モバイルでの Web サイト閲覧を高速化することを目的とするオープンソースプロジェクトや, そのための仕様やライブラリのことです. PWA との関係で言えば, PWA は主に Service Worker を利用して, 2 回目以降の閲覧においてユーザー体験を向上させることですが, 逆に AMP は初回の閲覧においてユーザー体験を向上させることにあります (Start fast, stay fast!).

AMP を構成する技術の特徴で言えば, HTML に AMP のためのタグを記述することにあります (AMP HTML)

<!DOCTYPE html>
<html ⚡>
  <head>
    <link rel="canonical" href="hello-world.html">
    ...
    <style amp-boilerplate>...</style>
    <script async src="https://cdn.ampproject.org/v0.js"</script>
  </head>
  <body>
    <div>Hello World!</div>
    <amp-img src="hello.jpg" height="400" width="800"></amp-img>
  </body>
</html>

そして, AMP と PWA (Service Worker) を組み合わせる重要なタグが,

<amp-install-serviceworker>

また, 組み合わせ方にも以下の 3 つの方法があります.

  • AMP as PWA
  • AMP to PWA
  • AMP in PWA

AMP  by Example

4. Code Labs

Firebase Cloud Messaging (FCM) で Web Push 通知を実装してみた

Overview

Web Push 通知を実装してみた」で Web Push 通知の概要と, web-push モジュールを利用した Web Push 通知の実装を記載しました. しかしながら, web-push モジュールを利用した Web Push 通知は鍵のやりとりが少々煩雑で実装も複雑になってしまいます.

Firebase Cloud Messaging (FCM) を利用すると, 鍵のやりとりの代わりにトークンを利用することで Web Push 通知を簡単に実装することができます.

What is Firebase Cloud Messaging ?

クロスプラットフォームのプッシュ通知のためのソリューションです. 詳細は, こちらのドキュメントを参考にしてください.

How to use Firebase Cloud Messaging ?

Firebase console から, アプリに Firebase を追加します.

Install Firebase

$ npm init -y
$ npm install --save firebase

Install Packages

今回は, クライアントサイドは, ES2015 (Babel) を利用し, サーバーサイドは express を利用して実装します. また, ビルドには webpack を利用します.

$ npm install --save body-parser express
$ npm install --save-dev babel-core babel-loader babel-plugin-transform-class-properties babel-preset-es2015 webpack

webpack.config.js

module.exports = {
  entry: { js: './src/main.js' },
  output: { path: `${__dirname}/public`, filename: 'app.js' },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      }
    ]
  },
  devtool: 'source-map'
};

.babelrc

{
  "presets": ["es2015"],
  "plugins": ["transform-class-properties"]
}

コマンドを簡単に実行できるように, npm scripts も定義しておきましょう.

package.json

// ...
"scripts": {
  "build": "webpack",
  "start": "npm run build && node server.js"
},
// ...

Implement Server Side Script

ローカルサーバーを起動できるように, サーバーサイドのスクリプトを実装します (Web Push に関連する処理はのちほど実装します).

server.js

'use strict';

const express    = require('express');
const bodyParser = require('body-parser');
const app        = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(express.static('public'));

const port = process.env.PORT || 5000;

app.listen(port, () => {
    console.log(`Listening on port ${port} ...`);
});

public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Web Push Example by Firebase Cloud Messaging (FCM)</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
    <link rel="stylesheet" href="./app.css" type="text/css" media="all" />
</head>
<body>
    <div class="WebPush">
        <form method="post" action="/api/webpush/subscribe">
            <dl>
                <dt><label for="text-title">Title</label></dt>
                <dd><input type="text" id="text-title" name="text-title" /></dd>
                <dt><label for="text-body">Body</label></dt>
                <dd><input type="text" id="text-body" name="text-body" /></dd>
                <dt><label for="url-icon">Icon</label></dt>
                <dd><input type="url" id="url-icon" name="url-icon" /></dd>
                <dt><label for="url-link">Link</label></dt>
                <dd><input type="url" id="url-link" name="url-link" /></dd>
            </dl>
            <button type="submit">Web Push</button>
        </form>
    </div>
    <script type="text/javascript" src="./app.js"></script>
</body>
</html>

public/app.css

@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
}

body {
    font-family:Helvetica, Arial, sans-serif;
    font-size: 16px;
    color: #999;
    line-height: 1.5;
    min-width: 320px;
}

.WebPush {
    margin: 24px auto 0;
    width: 90%;
}

dl > dt {
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
}

dl > dd {
    margin-bottom: 0.5rem;
}

input {
    outline: none;
    border: 2px solid #CCC;
    padding: 0.5rem;
    width: 18rem;
    font-size: 1rem;
    color: #999;
    border-radius: 12px;
    transition: box-shadow 0.6s ease;
}

input:focus {
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3) inset;
}

button {
    cursor: pointer;
    outline: none;
    margin-top: 1rem;
    border: none;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    color: #FFF;
    background-color: #999;
    border-radius: 12px;
    transition: background-color 0.6s ease;
}

button:hover {
    background-color: #666;
}

button:active {
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.6) inset;
}

以上の実装をして,

$ npm start

を実行すれば, http://localhost:5000 でページが表示されるようになります.

Implement Web Push

ここからが本題で, Firebase Cloud Messaging を利用した Web Push 通知を実装します.
まずは, クライアントサイドで読み込むスクリプトから実装します.

src/main.js

'use strict';

import * as firebase from 'firebase';

// Initialize Firebase
const config = {
    // ...
};

firebase.initializeApp(config);

const messaging = firebase.messaging();

config は, Firebase console で Firebase に追加したアプリの初期化コードスニペットからコピペしてきます.
内容としては, 以下のようなキーとバリューのプレインオブジェクトです.

const config = {
    apiKey            : '',
    authDomain        : '.firebaseapp.com',
    databaseURL       : 'https://.firebaseio.com',
    storageBucket     : '.appspot.com',
    messagingSenderId : '',
};

たったこれだけのコードで, Firebase Cloud Messaging を使う準備ができます. web-push モジュールを利用する場合と比較すると, 非常に簡潔になることがわかるかと思います.

続いて, Web Push 通知を有効にするために,

  1.  通知の許可をユーザーから得る
  2.  Firebase トークンを取得する

処理を実装します.

src/main.js

// ...

if (navigator.serviceWorker) {
    navigator.serviceWorker.register('./firebase-messaging-sw.js').then(() => {
        return navigator.serviceWorker.ready;
    }).catch((error) => {
        console.error(error);
    }).then((registration) => {
        messaging.useServiceWorker(registration);

        // 通知の許可 -> トークンの取得の順でないと, トークンの取得に失敗する
        messaging.requestPermission().then(() => {
            console.log('Notification permission granted.');

            messaging.getToken().then((token) => {
                console.log(token);
            }).catch((error) => {
                console.error(error);
            });

        }).catch((error) => {
            console.log('Unable to get permission to notify.', error);
        });
    });
}

Firebase Messaging Object (messaging) が Notification オブジェクトをラップしているので, そのメソッド (messaging.requestPermission) を利用して, ユーザーから通知の許可を得るダイアログを表示し, 許可を得ることができれば, Firebase トークンの取得 (messaging.getToken) を実行します. コメントにあるように, この順を踏まないと, Firebase トークンの取得に失敗してしまいます.

また, Service Worker のファイルは, firebase-messagin-sw.js でないと警告が表示されるので, 命名は合わせておきます.

最後に, 取得した Firebase トークンをサーバーに送信して, 保存します.

src/main.js

// ...

if (navigator.serviceWorker) {
    navigator.serviceWorker.register('./firebase-messaging-sw.js').then(() => {
        return navigator.serviceWorker.ready;
    }).catch((error) => {
        console.error(error);
    }).then((registration) => {
        messaging.useServiceWorker(registration);

        // 通知の許可 -> トークンの取得の順でないと, トークンの取得に失敗する
        messaging.requestPermission().then(() => {
            console.log('Notification permission granted.');

            messaging.getToken().then((token) => {
                console.log(token);

                const options = {
                    method  : 'POST',
                    headers : new Headers({ 'Content-Type' : 'application/json' }),
                    body    : JSON.stringify({ token })
                };

                fetch('/api/webpush/register', options).then((res) => {
                    console.dir(res);
                }).catch((error) => {
                    console.error(error);
                });
            }).catch((error) => {
                console.error(error);
            });

        }).catch((error) => {
            console.log('Unable to get permission to notify.', error);
        });
    });
}

ビルドして, public/app.js を生成しておきます.

$ npm run build

続いて, Firebase トークンを保存するための API を実装します.

server.js

// ...

const bodies = [];

app.post('/api/webpush/register', (req, res) => {
    const body = req.body;

    bodies.push(body);

    res.status(200).set('Content-Type', 'application/json').send(JSON.stringify(body));
});

特に難しい処理はなく, 受信した Firebase トークンを配列に保存して, Web Push 通知を送信するときに利用できるようにしておきます (実際には, DB に保存することになるでしょうが ).

そして, Web Push 通知を送信するための API を実装します.

server.js

// ...

const https = require('https');

// ...

const bodies = [];

// ...

app.post('/api/webpush/subscribe', (req, res) => {
    const notification = {
        title : req.body['text-title'],
        body  : req.body['text-body'],
        icon  : req.body['url-icon']
    };

    const data =  {
        url : req.body['url-link']
    };

    Promise.all(bodies.map((body) => {
        return new Promise((resolve, reject) => {
            const options = {
                method  : 'POST',
                host    : 'fcm.googleapis.com',
                path    : '/fcm/send',
                headers : {
                    'Content-Type'  : 'application/json',
                    'Authorization' : 'key=`Your Server Key`'
                }
            };

            const to = body.token;

            const content_available = true;

            https.request(options, (response) => {
                const data = [];

                response.on('data',  (chunk) => data.push(chunk));
                response.on('end',   ()      => resolve(JSON.parse(Buffer.concat(data).toString())));
                response.on('error', (error) => reject(error));
            }).end(JSON.stringify({ notification, data, to, content_available }));
        });
    })).then((result) => {
        res.status(200).set('Content-Type', 'application/json').send(JSON.stringify(result));
    }).catch((error) => {
        res.status(500).set('Content-Type', 'application/json').send(JSON.stringify(error));
    });
});

処理の概要としては, プッシュ 通知を送信する, https://fcm.googleapis.com/fcm.googleapis.com に POST するための HTTP クライアントを実装して, そのレスポンスを Service Worker に渡すだけです.

'Authorization' : 'key=`Your Server Key`'

ここのキーの取得方法は,

  1.  Google Developers Console にアクセス
  2.  「認証情報」の Server key の キーをコピペ

1 つ注意点としては, プッシュ通知に送る任意の情報として, data キーのプレインオブジェクトがありがますが, これを notification のなかに含めてしまうと, Service Worker 側でアクセスできないので, notification とは別に Service Worker に渡す必要があります.

あとは, Service Worker のスクリプトを実装をすれば完成です

public/firebase-messagin-sw.js

'use strict';

self.addEventListener('install', (event) => {
    event.waitUntil(skipWaiting());
}, false);

self.addEventListener('activate', (event) => {
    event.waitUntil(self.clients.claim());
}, false);

self.addEventListener('push', (event) => {
    if (!event.data) {
        return;
    }

    const parsedData   = event.data.json();
    const notification = parsedData.notification;
    const title        = notification.title;
    const body         = notification.body;
    const icon         = notification.icon;
    const data         = parsedData.data;

    event.waitUntil(
        self.registration.showNotification(title, { body, icon, data })
    );
}, false);

self.addEventListener('notificationclick', (event) => {
    event.waitUntil(self.clients.openWindow(event.notification.data.url));
}, false);

Service Worker の処理は, web-push モジュールを利用した場合の実装と大差ありません. push イベントで取得するデータの構造が少々変更されているぐらいです.

Web Push 通知を実装してみた

Overview

これまで, ネイティブアプリでしか使えなかったプッシュ通知が, Web アプリケーションからも使えるように仕様策定が進められています. これによって, メールアドレスや外部サービスのアカウントを登録してもらわなくても, ユーザーに最新情報を伝えることが可能になります.

Web Push 通知 (Firefox)
Web Push 通知 (Firefox)

 

Web Push 通知は,

  • 画面上に通知を表示する機能
  • サーバーから通知を受信する機能

の 2 つに分解して考えることができます. そしてそれぞれの機能は,

  • Web Notifications API (画面上に通知を表示する機能)
  • Web Push API (サーバーから通知を受信する機能)

という 2 つの JavaScript の API によって実装することが可能です.

Web Notifications API

Web Notifications API でデスクトップ通知を表示するには, まずユーザーの許可を得る必要があります.

Notification.requestPermission().then((permission) => {
    switch (permission) {
      case 'granted':
        // 許可された場合
        break;
      case 'denied':
        // ブロックされた場合
        break;
      case 'default':
        // 無視された場合
        break;
      default:
        break;
    }
});

Notification.requestPermission メソッドを実行すると, ブラウザは以下のようなダイアログを表示してユーザーに許可を要求します.

Permit notifications
Permit notifications (Firefox)

許可状態はオリジンごとにブラウザに記憶されるので, 同一オリジンに存在するサイトであれば, 2 回目以降は許可は必要ありません.

1 度ブロックされるとダイアログが表示されないので, あらためて許可を得ることはできません. また, プログラム側からブロックを取り消すことも不可能です. ブロックの取り消しは, ユーザー操作によって, ブラウザの記憶を削除, または, 変更した場合のみ可能です.

Cancel block
Cancel block (Firefox)

いったん, 許可を得ることができれば通知の表示は簡単で, Notification インスタンスを生成するだけで表示できます.

const title    = '見出し';
const options  = {
    body : '本文',
    icon : 'アイコン画像のパス',
    data : {
      foo : '任意のデータ'
     }
};

const notification = new Notification(title, options);

第 1 引数のタイトルは必須です. 第 2 引数はオプションですが, よく指定するオプションを以下に示します.

Notification のオプション (使用頻度の高いオプション)
Property Type Description
body string 本文の文字列
icon string アイコン画像の URL, または, パス
tag string 通知を識別する文字列
data any 通知にもたせたい任意のデータ

tag は画面上に表示されるものではないので, 使い方がわかりにくいかもしれませんが, これは主に, すでに表示されている通知を置き換えるために使います. 通常, 1件以上の通知が表示されている状態でさらに通知を生成すると, 既存の通知とは別に新たな通知が表示されます. しかし, tag の値が既知の通知と一致する場合は, 新しい通知が別に表示されるのではなく, 当該通知の中身が新しいもので置き換えられます. tag オプションをうまく活用することで, 通知まみれになるのを防止することができます.

ユーザーがデスクトップ通知をクリックしたときに何らかの処理を実行するには, Notification インスタンスに対して, イベントリスナーを設定します.

notification.addEventListener('click', (event) => {
    console.dir(event);
}, false);

以上で, 「画面上に通知を表示する機能」は実装できました.

Web Push API

Service Worker を利用し, ブラウザでプッシュ通知を受けとるために用意された JavaScript の API です.

Web Push API を利用するには, プッシュ通知の送信元が正当なアプリケーションサーバーだと認証するために利用する公開鍵と李密鍵のペアを生成する必要があります.

Node.js の web-push モジュールを利用すると, Web Push API の利用に適したフォーマットで出力されるので今回はこれを使います.この方法で生成した鍵は + が – に, / が _ にそれぞれ置き換えられ, 末尾の = が削除された URL セーフな Base64 としてエンコードされています. 公開鍵は, クライアントサイド側で利用するので, 公開鍵を取得するための Web API をサーバーサイドに実装します. また, Base64 エンコードのままでは利用できないので, クライアントサイドでバイナリ形式に変換する必要があります.

$ npm init -y
$ npm install --save body-parser express web-push

server.js

'use strict';

const webpush    = require('web-push');
const express    = require('express');
const bodyParser = require('body-parser');
const app        = express();

const contact   = 'mailto:rilakkuma.san.xjapan@gmail.com';
const vapidKeys = webpush.generateVAPIDKeys();

// アプリケーションの連絡先と, サーバーサイドの鍵ペアの情報を登録
webpush.setVapidDetails(contact, vapidKeys.publicKey, vapidKeys.privateKey);

// POST パラメータをパースする (のちほど実装)
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended : false }));

app.use(express.static('public'));

const port = process.env.PORT || 3000;

app.listen(port, () => {
    console.log(`Listening on port ${port} ...`);
});

// 公開鍵をクライアントサイドに渡す
app.get('/api/webpush/get', (req, res) => {
    return res.json({
        publicKey : vapidKeys.publicKey
    });
});

public/app.js

'use strict';

// Base64 エンコードからバイナリ形式に変換する
function urlsafeBase64ToBinary(urlsafeBase64) {
    const base64 = urlsafeBase64.replace(/-/g, '+')
                                .replace(/_/g, '/');

    const raw    = window.atob(base64);
    const binary = new Uint8Array(raw.length);

    for (let i = 0, len = binary.length; i < len; i++) {
         binary[i] = raw.charCodeAt(i);
    }

    return binary;
}

// ...

const options = {
    method  : 'GET',
    headers : new Headers({ 'Content-Type' : 'application/json' })
};

fetch('/api/webpush/get', options)
    .then((res) => res.json())
    .then((res) => {
        console.log(res.publicKey);  // Base64 エンコード
        console.log(urlsafeBase64ToBinary(res.publicKey));  // バイナリ形式
    })
    .catch((error) => {
        console.dir(error);
        console.log('Fetching public key failed.');
    });

Web Push API を利用して, プッシュ通知を受信するには, プッシュサービスに対してプッシュ通知を購読 (subscribe) する必要があります.

Service Worker の登録に成功したら, PushManager.subscribe メソッドを呼び出して, プッシュサービスに対してプッシュ通知の購読を要求します. このとき, プッシュサービスに公開鍵の情報を渡すために, 引数のオブジェクトの applicationServerKey プロパティにサーバーから取得したバイナリ形式の公開鍵を指定します.

購読要求の処理は非同期で実行されるので, メソッドの戻り値は Promise です. 購読要求が成功すると, コールバック関数の引数に PushSubscription オブジェクトが渡されます. この PushSubscription オブジェクトから, プッシュ通知の送信に必要な情報を取得できます.

そして, その情報をアプリケーションサーバーに送信 (POST) すれば購読は完了です.

server.js

'use strict';

const webpush    = require('web-push');
const express    = require('express');
const bodyParser = require('body-parser');
const app        = express();

const contact   = 'mailto:rilakkuma.san.xjapan@gmail.com';
const vapidKeys = webpush.generateVAPIDKeys();

// アプリケーションの連絡先と, サーバーサイドの鍵ペアの情報を登録
webpush.setVapidDetails(contact, vapidKeys.publicKey, vapidKeys.privateKey);

// POST パラメータをパースする (のちほど実装)
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended : false }));

app.use(express.static('public'));

const port = process.env.PORT || 3000;

app.listen(port, () => {
    console.log(`Listening on port ${port} ...`);
});

// 公開鍵をクライアントサイドに渡す
app.get('/api/webpush/get', (req, res) => {
    return res.json({
        publicKey : vapidKeys.publicKey
    });
});

// 購読のための POST 先
app.post('/api/webpush/subscribe', (req, res) => {
    // do something ...
});

public/app.js

'use strict';

// Base64 エンコードからバイナリ形式に変換する
function urlsafeBase64ToBinary(urlsafeBase64) {
    const base64 = urlsafeBase64.replace(/-/g, '+')
                                .replace(/_/g, '/');

    const raw    = window.atob(base64);
    const binary = new Uint8Array(raw.length);

    for (let i = 0, len = binary.length; i < len; i++) {
         binary[i] = raw.charCodeAt(i);
    }

    return binary;
}

// ArrayBuffer から Base64 エンコードに変換する
function arrayBufferToBase64(arrayBuffer) {
    return window.btoa(String.fromCharCode.apply(null, new Uint8Array(arrayBuffer))).replace(/\+/g, '-').replace(/\//g, '_');
}

if (navigator.serviceWorker) {
    // Service Worker 登録
    navigator.serviceWorker.register('./service-worker-web-push.js').then(() => {
        console.log('Registering Service Worker is successful.');
        return navigator.serviceWorker.ready;
    }).catch(() => {
        console.error('Registering Service Worker failed.');
    }).then((registration) => {
        const options = {
            method  : 'GET',
            headers : new Headers({ 'Content-Type' : 'application/json' })
        };

        return fetch('/api/webpush/get', options)
                   .then((res) => res.json())
                   .then((res) => {
                       // プッシュサービスに対してプッシュ通知の購読を要求
                       return registration.pushManager.subscribe({
                           userVisibleOnly      : true,
                           applicationServerKey : urlsafeBase64ToBinary(res.publicKey)  // バイナリ形式の公開鍵を渡す
                       });
                   }).catch((error) => {
                       console.dir(error);
                       console.log('Fetching public key failed.');
                   });
    }).then((subscription) => {
        // POST の準備
        document.getElementById('hidden-endpoint').value = subscription.endpoint;
        document.getElementById('hidden-auth').value     = arrayBufferToBase64(subscription.getKey('auth'));    // PushSubscription#getKey の戻り値の型は ArrayBuffer なので, Base64 エンコード文字列に変換する
        document.getElementById('hidden-p256dh').value   = arrayBufferToBase64(subscription.getKey('p256dh'));  // PushSubscription#getKey の戻り値の型は ArrayBuffer なので, Base64 エンコード文字列に変換する
    }).catch((error) => {
        console.dir(error);
        console.error('Subscribing web push failed.');
    });
}

public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Web Push Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
    <link rel="stylesheet" href="./app.css" type="text/css" media="all" />
</head>
<body>
    <div class="WebPush">
        <form method="post" action="/api/webpush/subscribe">
            <dl>
                <dt><label for="text-title">Title</label></dt>
                <dd><input type="text" id="text-title" name="text-title" /></dd>
                <dt><label for="text-body">Body</label></dt>
                <dd><input type="text" id="text-body" name="text-body" /></dd>
                <dt><label for="url-icon">Icon</label></dt>
                <dd><input type="url" id="url-icon" name="url-icon" /></dd>
                <dt><label for="url-link">Link</label></dt>
                <dd><input type="url" id="url-link" name="url-link" /></dd>
            </dl>
            <ul>
                <li><input type="hidden" id="hidden-endpoint" name="hidden-endpoint" /></li>
                <li><input type="hidden" id="hidden-auth" name="hidden-auth" /></li>
                <li><input type="hidden" id="hidden-p256dh" name="hidden-p256dh" /></li>
            </ul>
            <button type="submit">Web Push</button>
        </form>
    </div>
    <script type="text/javascript" src="./app.js"></script>
</body>
</html>

以上で, プッシュ通知を受信するための下準備はできたので, あとはプッシュ通知を送受信する実装だけです.

購読時に, クライアントサイドから取得したエンドポイント URI に対して POST リクエストを送信します. プッシュサービスがリクエストを受信し, 署名の検証に成功すると該当するブラウザに対して通知が送信されます.

server.js

'use strict';

const webpush    = require('web-push');
const express    = require('express');
const bodyParser = require('body-parser');
const app        = express();

const contact   = 'mailto:rilakkuma.san.xjapan@gmail.com';
const vapidKeys = webpush.generateVAPIDKeys();

// アプリケーションの連絡先と, サーバーサイドの鍵ペアの情報を登録
webpush.setVapidDetails(contact, vapidKeys.publicKey, vapidKeys.privateKey);

// POST パラメータをパースする
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

app.use(express.static('public'));

const port = process.env.PORT || 3000;

app.listen(port, () => {
    console.log(`Listening on port ${port} ...`);
});

// 公開鍵をクライアントサイドに渡す
app.get('/api/webpush/get', (req, res) => {
    return res.json({
        publicKey : vapidKeys.publicKey
    });
});

// 購読のための POST 先
app.post('/api/webpush/subscribe', (req, res) => {
    // プッシュ通知の送信先情報 (実際には, DB などから取得)
    const subscription = {
        endpoint : req.body['hidden-endpoint'],
        keys     : {
            auth   : req.body['hidden-auth'],
            p256dh : req.body['hidden-p256dh']
        }
    };

    // プッシュ通知で送信したい任意のデータ
    const payload = JSON.stringify({
        title : req.body['text-title'],
        body  : req.body['text-body'],
        icon  : req.body['url-icon'],
        url   : req.body['url-link']
    });

    // 購読時に, クライアントサイドから取得したエンドポイント URI に対して POST リクエストを送信
    webpush.sendNotification(subscription, payload).then((response) => {
        return res.json({
            statusCode : response.statusCode || -1,
            message    : response.message    || ''
        });
    }).catch((error) => {
        console.dir(error);
        return res.json({
            statusCode : error.statusCode || -1,
            message    : error.message    || '',
        });
    });
});

クライアントサイドでそれを受信したときに, 該当する Service Worker が起動していなければこのタイミングで起動し, push イベントが発生します. このイベントリスナーでデスクトップ通知の表示などの処理を実行します.

public/service-worker-web-push.js

'use strict';

self.addEventListener('install', (event) => {
    event.waitUntil(skipWaiting());
}, false);

self.addEventListener('activate', (event) => {
    event.waitUntil(self.clients.claim());
}, false);

self.addEventListener('push', (event) => {
    // デスクトップ通知の表示処理
}, false);

ネイティブアプリケーションのプッシュ通知とは異なり, Web Push によるプッシュ通知は, ブラウザが起動しているときでないと受信できません. ブラウザを起動していない間にアプリケーションサーバーからプッシュ通知が送信された場合は, その次にブラウザを起動したタイミングで受信されます.

最後に, 通知を受信したときの Service Worker の処理を実装します.  アプリケーションサーバーから送信された通知は, プッシュサービスを経由してブラウザに伝わり, Service Worker のイベントリスナーが呼び出されます.

アプリケーションサーバーで送信時に付与したペイロードは, pushイベントオブジェクトの data プロパティに格納されています. json メソッドで JSON 文字列をパースしたオブジェクトを取得できます (それ以外にも, text メソッドや arrayBuffer メソッド, blob メソッドなどもあります).

そして, デスクトップ通知の表示ですが, Service Worker 内では Notification クラスにアクセスできないので, self.registration (ServiceWorkerRegistration) の showNotification メソッドを利用します. このメソッドの引数は, Notification コンストラクタの引数とほぼ同じです.

また, デスクトップ通知をクリックしたときに実行するイベントリスナーの設定も異なっており, self (ServiceWorkerGlobalScope) に対して, notificationclick イベントのリスナーを設定します.

public/service-worker-web-push.js

'use strict';

self.addEventListener('install', (event) => {
    event.waitUntil(skipWaiting());
}, false);

self.addEventListener('activate', (event) => {
    event.waitUntil(self.clients.claim());
}, false);

self.addEventListener('push', (event) => {
    // デスクトップ通知の表示処理
    if (!event.data) {
        return;
    }

    const data  = event.data.json();  // ペイロードを JSON 形式でパース
    const title = data.title;
    const body  = data.body;
    const icon  = data.icon;
    const url   = data.url;

    event.waitUntil(
        self.registration.showNotification(title, { body, icon, data : { url } })
    );
}, false);

self.addEventListener('notificationclick', (event) => {
    const notification = event.notification;  // Notification インスタンスを取得
    const url          = notification.data.url;

    // 通知をクリックしたら, URL で指定されたページを新しいタブで開く
    event.waitUntil(self.clients.openWindow(url));
}, false);

Node.js + React で SSR ~ SSR の実装 ~

Overview

前回の記事で SSR の環境を構築できたので, さっそく, React を利用した簡単な SSR の実装をしてみましょう.

1. Install packages

$ npm install --save react react-dom babel-cli babel-core babel-preset-es2015 babel-preset-react express

前回の記事でも述べましたが, 本来は –save-dev でインストールすべきパッケージも –save でインストールしていることに注意してください (Heroku のデプロイで dependencies のパッケージがインストールの対象とならないので).

2. Implement React Component

SSR で利用する, React コンポーネントを実装します. といっても, とりあえず <h1 /> で Hello SSR と表示する単純なコンポーネントです.

components/App.js

import React, { Component } from 'react';

export default class App extends Component {
    render() {
        return <h1>Hello SSR</h1>:
    }
}

また, ビルド後の App.js は, ルート直下の App.js にデプロイすることにします.

3. Implement render function

前回の記事では, express のルーターに直接レンダリング処理を記述していましたが, それだとコードの見通しがよくないので, SSR をする専用の関数を実装します.

render.js

const React          = require('react');
const ReactDOMServer = require('react-dom/server');
const App            = require('./App').default;

function render(req, res) {
    const content = ReactDOMServer.renderToString(React.createElement(App));
    const html = `<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Hello SSR</title>
</head>
<body>
    <section id="app">
        ${content}
    </section>
</body>
</html>`;

    res.status(200).send(html);
};

module.exports = render;

ポイントは, ReactDOMServer.renderToString でコンポーネントを HTML 文字列に変換している処理です. あとは, その文字列を HTML に埋め込むだけです.

render 関数が実装できたので, app-server.js を以下のように書き換えます.

app-server.js

'use strict';

const express = require('express');
const app     = express();
const path    = require('path');
const render  = require('./render');

const port = process.env.PORT || 8080;

app.use(express.static(path.join(__dirname, 'public')));

app.get('/', (req, res, next) => {
    render(req, res);
});

app.listen(port, () => {
    console.log(`Listening on port ${port} ...`);
});

4. npm scripts

package.json に以下のスクリプトを追加します.

  // ...
  "scripts": {
    "build": "babel components/App.js --out-file App.js",
    "start": "node app.js"
  },
  // ...

5. Edit Procfile

Procfile を以下のように変更します.

web: npm run build && npm start

 

以上で, SSR の実装ができました. 変更したファイルをすべてコミットして,

$ git push heroku master

を実行し, https://nodejs-ssr-sample.herokuapp.com/ にアクセスして, 「Hello SSR」が表示されていれば OK です.

ちなみに, SSR された HTML のソースは以下のようになっています.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Hello SSR</title>
</head>
<body>
    <section id="app">
        <h1 data-reactroot="" data-reactid="1" data-react-checksum="-601091822">Hello SSR</h1>
    </section>
</body>
</html>

Node.js + React で SSR ~ Heroku の利用 ~

Overview

前回までの記事で, SPA (Single Page Application) の開発環境構築に関して紹介しましたが, SPA では, 以下のような理由から, SSR (Server Side Rendering) を併用することも多いです.

  • 初期表示速度の改善
  • レガシークローラーやページ解析への対応

したがって, SSR の最低限の実装を紹介していきたいと思います.

しかしながら, SSR という名前からもわかるように, レンダリングをしてくれるサーバーが必要となります. 今回は, サーバーサイドのスクリプトには Node.js を使って, Isomorphic な実装をしたいと思います. したがって, Node.js が使えるサーバーが必要になります.

Node.js が使えて, 無料で利用できる PaaS (Platform as a Service) として Heroku があります (Node.js だけでなく, PHP, Ruby, Python, Java, Scala, Go なども使えます) . 今回の SSR の実装には, Heroku を使うことにします.

この記事では, Heroku の使い方を紹介します (すでに, Node.js を使える環境をもっているのであれば, スルーしてください).

1. Create Heroku Account

まずは, アカウントを作成します.

Heroku
Heroku
Heroku Sign up
Heroku Sign up

2. Install Heroku CLI

Heroku をターミナルから操作できるように, Heroku CLI をインストールします.

3. Log in

ターミナルで以下のコマンドを実行します (Email アドレスとパスワードを入力する必要があるので, アカウント作成したときのものをそれぞれ入力してください).

$ heroku login
Enter your Heroku credentials:
Email: rilakkuma.san.xjapan@gmail.com
Password: **************
Logged in as rilakkuma.san.xjapan@gmail.com

Heroku に ssh 公開鍵をアップロードします.

$ ssh-keygen
$ heroku keys:add ~/.ssh/id_rsa.pub

4. git init

Heroku にアプリケーションをデプロイするにも, Git でファイルを管理する必要があります

$ git init

5. Create Procfile

Procfile というファイルを作成し, アプリケーションを起動するコマンドを記述します. 今回は以下のような記述で OK です

web: node app-server.js

6. Create Application

SSR をするための, アプリケーションを作成していきます.

$ npm init -y
$ npm install --save express

1つ注意点があり, 本来は, devDependencies に入るパッケージ (–save-dev でインストールするパッケージ) は, Heroku だとデプロイの対象とならないようなので, すべて, –save オプションでパッケージをインストールします.

app.js

'use strict';                                                                                                                             

const express = require('express');
const app       = express();
const path      = require('path');

const port = process.env.PORT || 8080;

app.use(express.static(path.join(__dirname, 'public')));

app.get('/', (req, res, next) => {
    const html = `<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Hello SSR</title>
</head>
<body>
    <section id="app">
        <h1>Hello SSR</h1>
    </section>
</body>
</html>`;

    res.status(200).send(html);
});

app.listen(port, () => {↲
    console.log(`Listening on port ${port} ...`);
});

ここで注意が必要なのは,

const port = process.env.PORT || 8080;

の部分です. ローカルで動作させる場合には, 8080 のような任意のポート番号で OK なのですが, Heroku でデプロイする場合には, 任意のポート番号を利用すると, 以下のようなエラーが発生するので, Heroku の環境変数に定義されているポート番号を利用するように process.env.PORT を指定します.

Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch

ここまでで, 作成した

  • package.json
  • Procfile
  • app-server.js

をコミットしておきます.

7. heroku create

以下のコマンドを実行します

$ heroku create app-ssr
Creating ⬢ app-ssr... done
https://app-ssr.herokuapp.com/ | https://git.heroku.com/app-ssr.git

app-ssr はアプリケーション名で, 省略することも可能です (その場合, 任意のアプリケーション名がつきます).

また, 以下のコマンドであとから変更することも可能です.

$ heroku rename [アプリケーション名」

8. Deployment

最後の手順です. アプリケーションを Heroku でデプロイします. といっても, 難しいことはなく, GitHub に push するのと同じ要領で,

$ git push heroku master

push すれば, 自動的にデプロイが開始されます.

デプロイが完了したら,

https://app-ssr.herokuapp.com/

にアクセスします.

SSR by Heroku
SSR by Heroku

このように表示されていれば OK です. また, ディベロッパーツールの Network をみても document としてレスポンスが返ってきているのがわかります.

もし, 何らかのエラーが原因で表示されない場合には,

$ heroku logs

でログを調べて, デバッグしてみてくだだい.

また, heroku コマンドの一覧は,

$ heroku help

で調べることが可能です.

WebAudio.tokyo #4

2017 年 3 月 28 日 (火) に WebAudio.tokyo #4 に参加してきました.

私は, 5 分の LT 枠で, 自作の Web Audio API ライブラリの概要を話してきました.

発表では, Chrome の Web MIDI API の実装をされた @toyoshim さんから, レコーディング機能の実装について質問されたり, 発表後には, Web Music Hackathonのボスである @g200kg さんとお話をできたりと非常に楽しい勉強会でした.

また, 自分が制作した 「Web Audio API の解説サイトを参考にさせてもらってます」
という方もいらっしゃってとてもうれしかったです.

Google の @agektmr さんに, X Sound をツイートしてもらえたのも感激でした.

最後に, 関連リンクを紹介しておきます.

XSound.js 1.13.0 リリース

XSound.js 1.13.0 をリリースしました.
今回のリリースで, Microsoft Edge にもおおよその機能は対応しました.

といっても, 大した対応はしていません.

Edge の ScriptProcessorNode のバグに対応しただけです.

ScriptProcessorNode インスタンスを生成するには, AudioContext インスタンスの createScriptProcessor を利用します. 例えば, 以下のような感じ

const context = new AudioContext();
const processor = context.createScriptProcessor(2048, 2, 2);

第1引数は, 必須で onaudioprocess イベントのバッファサイズを指定します.
第2引数, 第3引数はオプションで, それぞれ, 入力チャンネル数 / 出力チャンネル数を指定します.
省略した場合は, どちらもデフォルト値 2 が適用されると仕様では定義されています.

実は, Edge はこの仕様に反していて, 明示的に入力チャンネル数 / 出力チャンネル数を指定しないとダメなのです.

ここを省略していたので, 1.13.0 より前のバージョンにおいて Edge でエラーが出ていました.

これを, PR 送って修正したいのですが, Edge の Web Audio API のソースが公開されていないようなのです…
(誰かご存知でしたら教えていただけると助かります〜)

ちなみに, WebKit と Gecko の Web Audio API のソースは公開されているのですが…

Microsoft Edge でも X Sound を楽しんでください~

iOS でスクロールを完全に無効にする

デスクトップや Android の場合, CSS を以下のように設定するだけでスクロールを無効にできます.

html, body {
    height: 100%;
    overflow: hidden
}

しかし, iOSでは, 上記の CSS の設定だけでは, わずかながらにスクロールできてしまいます.
iOS でスクロールを完全に無効にするには, JavaScript による制御も必要です.

    window.addEventListener('touchmove', event => {
        event.preventDefault();
    }, true);

ES2015 変数を直接プレインオブジェクトのキーにする

ECMAScript 5th までは変数を直接プレインオブジェクトのキーにすることはできませんでした.

var key = 'foo';

var bar = {key: 'bar'};  // キーが文字列「key」と解釈される => {key: 'bar'}

これを回避するには, ブラケットを使うしかありませんでした.

var bar = {};
var key = 'foo';

bar[key] = 'bar';

ES2015では, キーとなる変数をブラケットで囲むことで, 変数をプレインオブジェクトのキーにすることが可能です.

const key = 'foo';

const bar = {[key]: 'bar'};  // => {foo: 'bar'}