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);

SSR を利用した SPA の実装 ~ クライアントサイドルーティング の実装 ~

Overview

SPA におけるページ遷移は, (API のやりとりは別として) サーバーを介さずに, クライアントサイドのみで処理をします. このとき, URL が変更されないと, SEO 対策に不利であったり, ユーザーがそのページをブックマークできないなどの不都合が生じます.

したがって, 遷移したページに応じて URL も変更する必要があります. SPA では, この処理をクライアントサイド側で実装します.

これが, クライアントサイドルーティングです. クライアントサイドルーティングの実装には, 大きく 2 つのアプローチがあります.

  • History API を利用して自前でルーティング
  • react-router を利用する

この記事では一般的な方法である react-router (4.x) を利用した, クライアントサイドルーティングの実装方法について紹介したいと思います.

1. Install react-router

$ npm install --save react-router-dom

2. Implement Component for Routing

まずは, ルーティングを実装する前に, 前回の記事で実装した コンポーネント以外に, と コンポーネントを実装しておきます. いずれも確認のためのコンポーネントなので実装は単純です.

components/Home/index.js

import React from 'react';

const Home = () => (
<h2>Home</h2>
);

export default Home;

components/About/index.js

import React from 'react';

const About = () => (
<h2>About</h2>
);

export default About;

さて, ここから, クライアントサイドルーティングのコアとなる コンポーネントを実装します

component/Router/index.js

import React, { Component } from 'react';
import { BrowserRouter, Route, Link } from 'react-router-dom';
import Home from '../../components/Home';
import About from '../../components/About';
import Counter from '../../components/Counter';

export default class Router extends Component {
    render() {
        return (
            <BrowserRouter>
                <nav>
                    <ul>
                        <li><Link to="/>>Home</Link></li>
                        <li><Link to="/about">About</Link></li>
                        <li><Link to="/counter">Counter from 0</Link></li>
                        <li><Link to="/counter/100">Counter from 100</Link></li>
                    </ul>

                    <Route exact path="/" component={Home} />
                    <Route path="/about" component={About} />
                    <Route exact path="/counter" component={Counter} />
                    <Route path="/counter/:count" component={Counter} />
                </nav>
            </BrowserRouter>
        );
    }
}

まず, <nav> の部分ですが, <Link /> コンポーネントを使ってナビゲーションを実装する必要があります. <Link /> コンポーネントは <a /> にレンダリングされますが, 直接 <a /> タグでナビゲーションを実装しないように注意してください. <a /> タグでナビゲーションを実装してしまうと通常のページ遷移 (サーバーにリクエストを送信してレスポンスを受信してページを描画する) となってしまいます (<Link /> コンポーネントのソース). <Link /> コンポーネントの to props に記述した文字列がパスとなります.

そして, クライアントサイドルーティングを実際に担っているのが <Route /> コンポーネントです. path には, URL のパスを, component には, path で指定した URL にアクセスした場合にレンダリングするコンポーネントを指定します. また, path には, 変数を渡すことも可能で, その場合は : をつけて, :count のように指定します. このようにすることで, 対応するコンポーネントの props にその値が渡されます.

そこで, <Counter /> コンポーネントを少し改変します.

components/Counter/index.js

import React, { Component } from 'react';

export default class Counter extends Component {
    static CLASS_NAME = 'Counter';

    constructor(props) {
        super(props);

        const count = parseInt(props.match.params.count);

        this.state = {
            count : isNaN(count) ? 0 : count
        };
    }

    // ...

こうすることで, 例えば, /counter/100 にアクセスした場合, props.match.params.count に 100 が渡されるので, state の初期値は 0 ではなく, 100 になります.

exact を指定することで, / にアクセスした場合のみ <Home /> コンポーネントを描画するようにします.

exact を指定しない場合, /about や /counter にアクセスしても <Home /> コンポーネントが描画されてしまいます (もっとも, 意図的にそうするのであれば, exact を指定しないようにします).

<Route exact path="/" component={Home} />

同様の理由で, /counter にも exact を指定しています.

<Route exact path="/counter" component={Counter} />

3. Render Router Component

コンポーネントが実装できればあとはそれをレンダリングするだけです.

import React from 'react';
import ReactDOM from 'react-dom';
import Router from './components/Router';

ReactDOM.render(<Router />, document.getElementById('app'));

最後に, サーバーサードにもルーティングを追加します. そうしないと, 例えば, 直接 /about にアクセスしたときに, 404 となってしまうからです.

app-server.js

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

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

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

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

SSR を利用した SPA の実装 ~ クライアントサイドレンダリング の実装 ~

Overview

前回までの記事で, 簡単な SSR (Server Side Rendering) を実装しました. しかしながら, SSR を利用した SPA (Single Page Application) であっても, ほとんどのケースでクライアントサイドレンダリングが必要になるはずです.

この記事では, 前回までの内容の続きとしてクライアントサイドレンダリングを実装します.

1. Install packages

$ npm install --save-dev babel-loader babel-plugin-transform-class-properties css-loader extract-text-webpack-plugin postcss-easy-import postcss-loader webpack

2. Implement React Component

今回は, 単純なカウンター機能をもつ, コンポーネントを実装します. まあ, 特にトリッキーなことはない, 単純なコンポーネントです. ちなみに, CSS の class 名は BEM の命名規則に沿っています.

components/Counter/index.js

import React, { Component } from 'react';

export default class Counter extends Component {
    static CLASS_NAME = 'Counter';

    constructor(props) {
        super(props);
        this.state = {
            count : 0
        };
    }

    onClickUpButton() {
        this.setState({ count : this.state.count + 1 });
    }

    onClickDownButton() {
        this.setState({ count : this.state.count - 1 });
    }

    render() {
        const { count } = this.state;

        return (
          <div className={Counter.CLASS_NAME}>
              <p>
                  <button type="button" className={`${Counter.CLASS_NAME}__up Button`}   onClick={this.onClickUpButton.bind(this)}>+</button>
                  <button type="button" className={`${Counter.CLASS_NAME}__down Button`} onClick={this.onClickDownButton.bind(this)}>-</button>
              </p>
              <p>
                  <span className={`${Counter.CLASS_NAME}__count`}>{count}</span>
              </p>
          </div>
        );
    }
}

3. Implement Client Side Rendering

実装した コンポーネントをレンダリングする処理を実装します.

client.js

import React from 'react';
import ReactDOM from 'react-dom';
import Counter from './components/Counter';

ReactDOM.render(<Counter />, document.getElementById('app'));

4. Implement CSS

まずは, 各 CSS ファイルのインポートのみする CSS ファイルを実装します.

main.css

@charset "UTF-8";

@import "./styles/base.css";
@import "./components/**/*.css";

./styles/base.css には, リセットスタイルや共通のスタイルを記述します. ./components/**/*.css は, コンポーネント特有のスタイルを記述します.

styles/base.css

:root {
    --font-size-normal: 16px;
}

:root {
    --base-color  : #ff1493;
    --assort-color: #ffbfe1;
    --white       : #ffffff;
    --black       : #000000;
}

* {
    margin: 0;
    padding: 0;
}

button {
    border: none;
    outline: none;
    background-color: none;
}

body {
    line-height: 1.5;
    font-family: Helvetica, Arial, sans-serif;
    color: var(--base-color);
}

.Button {
    cursor: pointer;
    color: var(--white);
    text-align: center;
    background-color: var(--base-color);
    transition: background-color ease 0.6s;
}

.Button:hover {
    background-color: var(--assort-color);
}

.Button:active {
    box-shadow: 0px -1px 3px rgba(0, 0, 0, 0.2);
}

components/Counter/index.css

.Counter {
    margin-top: 24px;
    text-align: center;
}

.Counter button:not(:first-child) {
    margin-left: 12px;
}

.Counter__up,
.Counter__down {
    width: 128px;
    height: 128px;
    line-height: 128px;
    font-size: calc(var(--font-size-normal) * 2);
    border-radius: 12px;
}

.Counter__count {
    font-size: calc(var(--font-size-normal) * 4);
}

5. Edit webpack.config.js

webpack.config.js

const webpack           = require('webpack');
const ExtrackTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: ['./client.js', './main.css'],
  output: {
    path: `${__dirname}/public`,
    filename: 'app.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
      {
        test: /\.css$/,
        use: ExtrackTextPlugin.extract({
          use: [
            'css-loader',
            'postcss-loader'
          ]
        })
      }
    ]
  },
  plugins: [
    new webpack.LoaderOptionsPlugin({
      options: {
        postcss: [
          require('postcss-easy-import')({ glob: true })
        ]
      }
    }),
    new ExtrackTextPlugin('app.css')
  ],
  devtool: 'source-map'
};

6. Fix render.js

クライアントサイドレンダリングを担う app.js と app.css の読み込みを追加します.

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>
    <link rel="stylesheet" href="/app.css" type="text/css" media="all" />
</head>
<body>
    <header>
        ${content}
    </header>
    <div id="app"></div>
    <script type="text/javascript" src="/app.js"></script>
</body>
</html>`;

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

module.exports = render;

7. Add npm scripts

最後に, npm scripts に, クライアントサイドのビルド処理を追加して完成です.

package.json

  // ...
  "scripts": {
    "build": "babel components/App.js --out-file App.js && webpack",
    "start": "node app-server.js"
  },
  // ...
$ npm run build

変更したファイルをコミットして,

$ git push heroku master

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

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

webpack 2 で postcss を使う

前回の記事で webpack 2 を利用した SPA の開発環境の構築を記載しましたが, webpack 2 で postcss を導入してみたいと思います.

1. Install postcss

npm install --save-dev css-loader postcss-loader postcss-easy-import extract-text-webpack-plugin

2. Create webpack.config.js

const webpack           = require('webpack');
const ExtrackTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: ['./src/main.js', './src/main.css'],
  output: { path: `${__dirname}/public`, filename: 'app.js' },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
      {
        test: /\.css$/,
        use: ExtrackTextPlugin.extract({
          use: [
            'css-loader',
            'postcss-loader'
          ]
        })
      }
    ]
  },
  plugins: [
    new webpack.LoaderOptionsPlugin({
      options: {
        postcss: [
          require('postcss-easy-import')({ glob: true })
        ]
      }
    }),
    new ExtrackTextPlugin('app.css')
  ],
  devtool: 'source-map',
  devServer: {
    contentBase: `${__dirname}/public`,
    port: 8080,
    inline: true,
    historyApiFallback: true
  }
};

赤字で表示している記述が, 1.x からの大きな変更点です. 1.x では, 以下のように記述していました (していたそうです …)

// ...
entry : {
  js: './src/main.js',
  css: './src/main.css'
},
//

webpack 2 で 1.x の記述をしてしまうと, 以下のようなエラーが発生してしまいます.

ERROR in chunk css [entry]
app.js
Conflict: Multiple assets emit to the same filename app.js

3. src/main.css

@charset "UTF-8";

@import "./styles/base.css";
@import "./components/**/*.css";

npm でインストールした postcss-easy-import プラグインで Sass のような, CSS のインポートが可能になります.

4. src/styles/base.css

:root {
    --base-color: #ff1493;
}

body {
    margin: 0;
    padding: 0;
    line-height: 1.5;
    font-family: Helvetica, Arial, sans-serif;
    color: var(--base-color);
}

こちらも同様に, Sass のような CSS 変数の利用が可能になります.

以上で, webpack 2 を利用したCSS のビルド環境も構築できました.
あとは,

$ npm run build

を実行すると, public/app.css が生成されます. また, JavaScript ファイルと同様, 変更して保存すると, ブラウザが自動でリロードされます.

参考

webpack 2 で SPA の開発環境構築

Build development environment for SPA using webpack 2

React を利用した SPA (Single Page Application) のための開発環境を, webpack 2 で構築していきます.

1. Install Node.js / npm

nodebrew を使うなどしてインストールします.

2. Create package.json

$ npm init -y

3. Install React, Babel and webpack

$ npm install --save react  react-dom
$ npm install --save-dev babel-core babel-loader babel-plugin-transform-class-properties babel-preset-es2015 babel-preset-react webpack webpack-dev-server

4. Create .babelrc

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

5. Create 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',
  devServer: {
    contentBase: `${__dirname}/public`,
    port: 8080,
    inline: true,
    historyApiFallback: true
  }
};

赤字で表示しているキーが, webpack 2 で変更されました (1.x では, loaders と loader だったそうです …)

1 つ注意点として, output の path と devServer の contentBase のパスは絶対パスで記述する必要があります. 相対パスで記述してしまうと, 警告やエラー (Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
– configuration.output.path: The provided value “public” is not an absolute path!) が発生してしまいます.

それぞれの設定の詳細は他のドキュメントに任すこととして, とりあえずこれで開発環境構築のための webpack の記述ができました.

6. src/main.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(<h1>Hello SPA</h1>, document.getElementById('app'));

7. public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
     <title>Hello SPA</title>
     <link rel="stylesheet" href="/app.css" type="text/css" media="all" />
</head>
<body>
    <div id="app"></div>
    <script type="text/javascript" src="/app.js"></script>
</body>
</html>

8. npm scripts

ビルドと開発サーバーの起動を簡単にできるように, package.json に npm scripts を定義します.

  //...
  "scripts": {
    "build": "webpack",
    "start:dev": "webpack-dev-server"
  },
  // ...

以上で, 最低限の開発環境の構築ができました.

$ npm run build

を実行すると, public/app.js が生成されます.

$ npm run start:dev

を実行すると, 開発サーバーが起動し, http://localhost:8080/ にアクセスするとページが表示されます.
また, src/main.js を変更して保存すると, ブラウザが自動でリロードされて, コンテンツが書き換わります (gulp の livereload) .

CSS vm / vh / vmin / vmax メモ

CSS Values and Units Module Level 3 – vm / vh / vmin / vmax
Unit Description
vw (viewport width) Viewport の横幅を 100 としたときの 1/ 100
vh (viewport height) Viewport の高さを 100 としたときの 1/ 100
vmin (viewport minimum) vw / vh のうち, 小さいほうの値
vmax (viewport maximam) vw / vh のうち, 大きいほうの値

 

例えば …

  • Viewport 800px の場合, 1vw は 8px
  • Viewport 1000px の場合, 1vw は 10px

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 をツイートしてもらえたのも感激でした.

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

Just another WordPress site