Help us understand the problem. What is going on with this article?

ウェブサイトでプッシュ通知を行うサービス「bpush」で使っている技術

More than 3 years have passed since last update.

昨日リリースしたbpushですが、はてブのホットエントリーに入るなど、思いのほか多くの反響をいただくことができました。ありがとうございました。

ウェブにプッシュ通知をもたらすウェブサービス「bpush」を作った

本記事では、bpushで使用しているライブラリやAPI、それを採用した経緯などについて紹介したいと思います。
個々の技術については既に良質な記事が存在するので、詳しくは説明しません。ざっくり全体についての紹介となります。
他人のサービスが使っているライブラリとかツールとか知るのって楽しいですよね。私は楽しいです。

Service WorkerとPush API

bpushを実現している中核となる技術がService WorkerPush 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を使用しています。昔作ったサービスで、ディスク障害によりデータを失うという苦い経験があるため、ちゃんとバックアップはしています。バックアップはしたいですが、ローカルマシンなんて信用できないし、別のサーバーを借りるのはお金がかかります。ストレージサービスを使うことで信頼性を高めつつ費用を抑えています。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした