クラウドワークス エンジニアブログ

日本最大級のクラウドソーシング「クラウドワークス」の開発の裏側をお届けするエンジニアブログ

jQueryのプッシュ通知プラグインを作りました

初めまして。インターン@asmsuechanです。 IDに使ってる'asm'はあすみんじゃなくてアセンブリです。

最近のマイブームはgithubのstudyリポジトリをブログ代わりにtipsを書いた.mdファイルをポンポン投げていくことです。

やってること

自分は今メッセージ改修チームに所属しており、メッセージのUX改善を目標として仕事をしています。

これまでほぼほぼJavaScriptは書いたことなかったのですが最近はほとんどJavaScriptしか書いていません。JavaScript楽しいのでもっと書けるようになりたいです。

ここでする話

プッシュ通知が簡単にできるjquery_push_notificationというプラグインを作ったことについて書きます。

f:id:hyottokoaloha:20160809141549p:plain

デモサイトはこちらです。

以下のサイトで紹介していただきました。

phpspot.org

プラグインを作るきっかけ

メンターさんの FacebookのMessangerのように新着メッセージがブラウザに通知されたらUX改善になるかもね」 という提案から自分がブラウザプッシュ通知を担当することになりました。

そして実際に作る際、どうせなら他の人も簡単にプッシュ通知が出来るようになって欲しいという思いがあったのでjQueryプラグインという形に落ち着きました。

ブラウザプッシュ通知の実装

まず実装はMDNのNotifications APIjQueryのプラグイン作成方法を見ながら最小限の実装をしました。

作ってまずメンターさんに言われたのが 「これじゃマージできないよね。エラー処理がなっていない。商業プログラムを書く時はエラー処理が一番重要になる」 でした。

この言葉はメンターさんからの指摘の中でも強く印象に残っており、仕事としてのコードを考えるきっかけになりました。

プラグインとして公開

ライブラリとして世界の人に使ってもらうにはどうすればいいのか考えて(他のライブラリを参考にしながら)、ドキュメントとデモとテストがあれば使ってくれそうだと思い、.js、.coffee、.min.jsしかなかったリポジトリにこれらを追加していきました。

ここからはもう完全に個人の時間で書き進め、プッシュ通知の部分はほとんど出来ていたので3日くらいでデモサイトとテストとREADME.mdを書きました。

また、Notifications APIをラッピングしたライブラリは他にもあったので(jQueryはなかったはず)、これらを参考に作りました。

github.com

github.com

実装

実装に特に難しい部分はなく、ただNotifications APIをラッピングしただけです。以下のようなインターフェイスで呼び出すことが出来るようにしています。

$.notify('タイトル');

テストはkarma+jasmineで書きました。

ブラウザプッシュ通知の現状

残念ながら仕様上の都合でクラウドワークスではブラウザプッシュ通知でこのプラグインが使われることはなくなりました。

ですが現在別の方法でブラウザプッシュ通知を実装していますのでリリースを乞うご期待です!

We're Hiring!

クラウドソーシングのクラウドワークスでは他のエンジニアのためになるライブラリを書きたいエンジニアを募集中です。

© 2016 CrowdWorks, Inc., All rights reserved.