昨日リリースしたbpushですが、はてブのホットエントリーに入るなど、思いのほか多くの反響をいただくことができました。ありがとうございました。
ウェブにプッシュ通知をもたらすウェブサービス「bpush」を作った
本記事では、bpushで使用しているライブラリやAPI、それを採用した経緯などについて紹介したいと思います。
個々の技術については既に良質な記事が存在するので、詳しくは説明しません。ざっくり全体についての紹介となります。
他人のサービスが使っているライブラリとかツールとか知るのって楽しいですよね。私は楽しいです。
Service WorkerとPush API
bpushを実現している中核となる技術がService WorkerとPush APIです。
Service Workerはバックグラウンドで動作するJavaScriptで、ウェブページを開いていなくても動作することができます。
Push APIはその名の通り、プッシュ通知の登録や解除といったことを行うためのAPI群です。
これらは組み合わせて使うことができるように作られており、Chrome42でこれらの主要な部分が実装されたことからbpushというサービスを実現することができました。
Service WorkerはService WorkerのJavaScriptが配置されたパスに紐付きます。この仕様により、bpushでは各サイトごとのService Workerを個別に管理するといったことを実現しています。
フロントエンド: Materialize
フロントエンドはマテリアルデザインを実現するMaterializeというCSSフレームワークを使用しています。
私はDartのファンなので、最初はDart+Polymerで実現しようと考えました。しかし、新しいAPI(Serice Worker/Push API)を使うため、結局JavaScriptを使う必要があることや、今回のウェブサービスがシングルページアプリケーションとして作成するメリットが少ないことから、この組み合わせは諦めました。
マテリアルデザインは使ってみたいと思っていたため、次はJavaScript+Polymerの組み合わせでいこうと考えました。（マテリアルデザインに固執していたわけではないですが、Bootstrapに飽きてきたので別の何かを探していました。）
少し作りはじめてみると、Polymerはシングルページアプリケーションではないウェブアプリケーションには向かないことに気づきました。入力用のコンポーネントがinput要素ではないため、フォームで内容を送信できないのです。ボタンですらsubmitにできないのでJavaScriptでsubmitする必要がありました。面倒になった私はこの組合せも諦めました。
そして、マテリアルデザインを実現できる方法が他にないか調べていると、MaterializeというCSSフレームワークを見つけました。
他にMaterial UIというものがあり、これも非常に便利そうでしたが、Reactを前提としたフレームワークのようだったので、私にReactの経験がないことから、今回はMaterializeを採用することにしました。
私はCSSフレームワークとしてはBootstrapしか使ったことがありませんが、Materializeは非常に使いやすく感じました。グリッドシステムはBootstrapを使ったことがあればほとんど同じように使えますし、背景色やテキスト色を指定するCSSクラス群があるため、色の指定などに時間を取られずに済みました。
当然マテリアルデザインなコンポーネント群やエフェクトを備えているので簡単にそれなりな見栄えを実現することができました。
バックエンド: Nginx,Apache,PHP,Silex,MySQL,Redis
ミドルウェアはNginx+Apacheです。アプリケーションにはSilexというPHPのフレームワークを使用しています。SilexはいわゆるSinatra風のマイクロフレームワークで、Symfonyのコンポーネントを使うことができます。個人の開発では同じくSinatra風のSlim Frameworkを使用することが多いのですが、本業でSilexを使っており、bpushの開発で似ている別のフレームワークを使うことによって、諸々混同してつまらないミスを連発してしまうことを危惧し、Silexを採用することにしました。
データベースにはMySQLとRedisを採用しています。本業の開発でRedisを使うようになってからというもの私はRedisの大ファンになってしまい、使うかわからなくともとりあえずRedisは組み込んでしまいます。あれができない。。。あ、Redisでできるじゃん！ということが何度もあったのです。Redis最高です。Memcachedのような使い方もできますし、PubSubやブロッキングキューによるメッセージング、組み込み型を使った計算などができます。便利です。愛しているといっても過言ではありません。
クラウド: Google GCM, AWS SNS, AWS S3, AWS SES
クラウドサービスも使っています。まずプッシュ通知を実現するのにGCMは必須となります。GCMは直接扱わず、将来、より多くの送信方法を実現できるように、AWS SNSを使っています。SNSであればGCMやEメール、APNSなどを同じ仕組みで管理できます。登録時のメール送信ではAWS SESを使っています。SMTPサーバーを運用する必要がなくなりますし、そもそも借りているサーバーのSMTPに問題があったために採用しました。
また、バックアップにはS3を使用しています。昔作ったサービスで、ディスク障害によりデータを失うという苦い経験があるため、ちゃんとバックアップはしています。バックアップはしたいですが、ローカルマシンなんて信用できないし、別のサーバーを借りるのはお金がかかります。ストレージサービスを使うことで信頼性を高めつつ費用を抑えています。