プッシュ通知はメールマーケティングに変わるアプリ時代の新しい利用者へのアプローチ方法となっています。メールマーケティングがそうだったように、一度送信ミスをしてしまうと取り返しがつかないことになりかねません。そこでプッシュ通知の作成と送信の間にワンクッション設けて承認フローを経るようにしたいと思います。
今回はそのための画面に関する説明です。
画面について
プッシュ通知の作成画面は次のようになります。
こちらは元々Contents Management System - ニフティクラウドmobile backendにて公開されているものをベースに、不要な設定などを消したものになります。
元々Angular 1.4を使っていますが、最近では新規プロジェクトにおいて採用されることはないかと思います。そこで、ベースをVue.jsに変更して実装していきたいと思います。
想定は社内利用
このアプリケーションは社内での利用を想定しています。そのため、JavaScript SDKをクライアントサイドで利用します。アプリケーションキーやクライアントキーが見える状態になっていますので、その点ご注意ください。
ただし外部ファイルを読み込む関係上、何らかのHTTPサーバ以下に配置する必要があります（ローカルコンピュータ上に立てても大丈夫です）。HTTPサーバもあり、かつ開発利便性も上がりますので、Node.jsをインストールしておくと便利かと思います。
動作デモ
動作しているデモはプッシュ通知作成システム - ニフティクラウドmobile backendで確認できます。UIの動きについてはオリジナルのContents Management System - ニフティクラウドmobile backendを見るのが良いでしょう。
ここまでのコードはNCMBMania/pushManager at v0.1にアップロードしてあります。実装時の参考にしてください。