こんにちは。キャスレーコンサルティングのLS(リーディング・サービス)部の向井と申します。

今回は、HTMLとjsのみで簡単にWebブラウザのプッシュ通知を、実装する方法をご紹介します。

1.プッシュ通知

スマートフォンアプリでは、おなじみのプッシュ通知ですが
実はWebブラウザでも、簡単に導入することができます。

これまでは、ユーザが自らWebサイトの情報にアクセスしなければならなかったのですが、
プッシュ通知の導入をすると、Webサイト側から自動的に情報を送ることが可能になります。

Webサイト更新のお知らせなど、今まではメールやRSSを使用する必要がありましたが、
これらは登録の手間がかかってしまいます。

一方、プッシュ通知はユーザが一度承認するだけで、面倒な手続きは一切ありません。

また、メールは開封されずにユーザに情報が届かないケースも想定されますが、
プッシュ通知は情報を届けたいタイミングを選んで、確実に画面上に表示することが出来ます。

2.push.js

今回プッシュ通知導入にあたり、使用するのは「push.js」です。

Webブラウザ上では、「Notification API」によって画面上に通知を出します。
これは、Webブラウザからの通知を制御するためのAPIですが、
様々な処理を記述する必要があるため、どうしてもコードが長くなってしまいます。

「push.js」とは、「Notification API」をシンプルなコードで簡単に制御するためのjQueryプラグインです。

「push.js」には、クロスブラウザ対応処理や通知許可の処理があらかじめ含まれており、
ライブラリを読み込むだけで、簡単にプッシュ通知を実装することができます。

ライブラリはGitHubからダウンロードして読み込む方法の他に、コマンドラインからインストールもできますが、
下記のコードを記述することで、CDN経由で読み込むこともできます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/push.js/0.0.11/push.min.js"></script>

★Service Worker

push.jsは、「Service Worker」を使ってブラウザにプッシュ通知を表示しています。

Service Workerとは、通常のJavaScript環境とは別に、
Webページのバックグラウンドで動かせる、イベント駆動のJavaScript環境です。

非常に大雑把ではありますが、以下のような流れでプッシュ通知が送られます。

1.ユーザがサイトにアクセスし、Service Workerにユーザの端末を登録する。

2.送信者が登録された端末へプッシュ通知を送信し、 ServiceWorker がイベントを検知し、
ユーザーの端末上に通知内容を表示する。

プッシュ通知の他にも、これを土台として様々なAPIと組み合わせることで、
オフラインでの動作、バックグラウンドでの処理が可能となります。

それでは、実際に「push.js」を使ってプログラムを作ってみましょう。

3.導入方法

今回はボタンを押すと、プッシュ通知が送られるというプログラムを作成します。

まずは、HTMLを記述していきます。
ボタンのみのシンプルなページです。

<!DOCTYPE html>
<html lang="ja">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<meta charset="UTF-8">
<title>ブラウザでプッシュ通知を実装</title>
</head>
<body>
<center>
 <h1 style="margin-top: 300px">ブラウザでプッシュ通知を実装しよう</h1>
</center>
<center>
 <input type="button" id="push" onclick="return push()" value="クリックするとプッシュ通知が送られます"/>
</center>
</body>
</html>

push_1

下準備は完了したので、いよいよ「push.js」を導入していきます。

先ほどご紹介した、ライブラリをCDN経由で読み込むコードを挿入し、
プッシュ通知を呼び出すための、Push.createメソッドを記述していきます。

このメソッドにはメッセージ内容やアイコン、表示時間やクリック後の挙動など、様々な内容を設定することができます。

まず、メソッドの第一引数にプッシュ通知のタイトルを記述します。

<script>
	function push(){
		Push.create('更新情報');
	}
</script>

これだけでも、プッシュ通知を出すことは可能です。
しかし、今回は第二引数にオプションを設定し、詳細な内容を記述してみます。

以下、利用できるオプションです。

オプション

- icon [ String ] : アイコン

- body [ String] : 通知バーの本文

- onClick [ Function ] : 通知をクリックした時のイベント

- onClose [ Function ] : 通知を閉じた時のイベント

- onError [ Function ] : エラーが発生した時のイベント

- onShow [ Function ] : 通知が表示された時のイベント

- tag [ String] : タグ

- timeout [ Integer ] : 通知が消える時間 ( * ミリ秒 )

<script>
	function push(){
		Push.create("更新情報",
		{
		    body: "ブログの更新をお知らせします!",
		    icon: 'casley_logo.png',
		    timeout: 8000,
		    onClick: function () {
		        window.focus();
		        this.close();
	    	}
		})
	}
</script>

ここで注意が必要なのは、プッシュ通知はローカルホストかHTTPSの環境で表示されます。
今回はローカルホストを立ち上げ、ページを表示します。

それでは、ボタンを押してプッシュ通知を出してみます。

push_2

プッシュ通知を許可を要求するポップアップが、表示されました。

『許可』を選択し、もう一度ボタンをクリックしてみましょう。

push_3

画面に、プッシュ通知が表示されました。

このように、プッシュ通知を送ることで、メッセージをほぼ確実にユーザに届けることができます。
プッシュ通知の導入により、サイトへの流入を促進できるのではないでしょうか。

4.最後に

いかがだったでしょうか。とても簡単にプッシュ通知を、ブラウザで実装することができましたね。

今回のデモプログラムは、とても単純なものでしたが、
天気や交通情報、サイト更新やセール開始のお知らせなど、様々な場面で活用することができます。

また、私はSlack(チャットツール)を使用しておりますが、新着メッセージがあればをプッシュ通知で知らせてくれます。
Slackのようなコミュニケーションツールにおいては、メッセージの緊急性が高いこともあるため、
レスポンス低下の防止策として、プッシュ通知の利用は非常に効果的であると言えます。

デバイスを起動している間ならば、ほぼ確実にユーザの目に入るプッシュ通知は
通知を送るタイミングや回数、伝える内容など、ユーザにとって「迷惑な配信」にならないためには工夫が必要ですが、
有効に使えばマーケティングの手法として大いに役立つはずです。

Webサイトを運営する上で、導入するメリットは十分あるのではないでしょうか。

以上、最後までお読み頂き、ありがとうございました。


皆様こんにちは。
キャスレーコンサルティング、CC(CSVクリエーション)部の細見です。

今回は、HTMLとCSSだけで作ることができる、レスポンシブに対応した
シンプルなパララックスページの作り方を、ご紹介したいと思います。

「パララックスってなに?」と思われる方もいらっしゃると思いますので、
まずは、その言葉の意味から解説したいと思います。

1. パララックスとは

パララックス(en. Parallax)とは、日本語で「視差」という意味です。 (続きを読む…)


こんにちは。
キャスレーコンサルティングSI(システム・インテグレーション)部の小寺です。

今回はMastodonのソースを参考に、数独のwebアプリを作り、その要素技術を紹介していこうと思います。

今回使用する技術(レシピ紹介)

以下が、今回のレシピになります。

【OS】
CentOS 7
【DB】
PostgreSQL9.6
【言語】
Ruby 2.4.1
JavaScript
【その他】
rbenvhaml-rails
React
Redux
ECMAScript 2015
Webpacker
dotenv-ruby

(続きを読む…)


こんにちは。キャスレーコンサルティング システムデザイン部の阿部です。

今回は、CSSのtransformプロパティを活用し、HTMLとCSSのみによる三次元図形の作成とその操作を行ってみました。

まずは完成図です。
各Λをクリックすることでそれぞれの方向に動き、中央の○をクリックすることで初期表示に戻ります。

(続きを読む…)


こんにちは、キャスレーコンサルティングSD(システム・デザイン)部の青木です。
今回はFontAwesomeを使ってWebページにアイコンを表示してみようと思います。

FontAwesomeとは

FontAwesomeは商用でも無料で使用することができ、様々なユニークなアイコンを画像ではなく、
テキストとしてWebページ上に表示することができるWebアイコンフォントです。

テキストでの表示となるため、cssで自由に大きさや色を変更することができます。
また、FontAwesome自体に多数のアイコン表示機能が組み込まれており、
現時点で600種類以上のアイコンを簡単にWebページに表示することができます。

フォントのライセンスはSIL OFL 1.1、コードのライセンスはMIT Licenseとなっています。
http://scripts.sil.org/OFL
http://opensource.org/licenses/mit-license.html (続きを読む…)


はじめまして、技術ブログ初投稿のキャスレーコンサルティングのSD(システム・デザイン)部・瀬戸口です。
フロント技術とデザインが好きなエンジニアです。よろしくお願いします。

今回は、HTML5で新たに実装された機能「フォームバリデーション」について、少し触ってみたのでご紹介します。
長年HTML4に慣れ親しんだ身としては、HTML5でフォームバリデーションができる!と知った時、とても感動しました。
是非実務にも取り入れたいと思ったので、どういった使い方をすると良さそうか、また、何に注意すべきかを検証してみました。

(続きを読む…)



  • Profile
    キャスレーコンサルティングの技術ブログです。
    当社エンジニアが技術面でのTips、技術系イベント等についてご紹介いたします。
  • CSV社長ブログ
  • チーム・キャスレーブログ