TistoryブログにOnesignalを直接連動して、Webプッシュ手動メッセージを送ろう

寀ーブログでは、Webプッシュアラーム（モバイルなどカトクメッセージのように浮かぶ）機能をワンシグナル（Onesignal）を介して非常に簡単に実装することができる。だから、Googleに連動方法を検索すると、「Zapier」というオンライン自動業務連動システムを介してTisotry-Zapier-Onesignalを経るなんと3段連動を介して自動的にウェブプッシュを実装する方法が出てくる。

ブログに記事を書いて、必ず自動的にWebプッシュが行くことに命をかけた場合はわからないが、そうでない場合あえてこのように複雑なプロセスを経る必要はない。また、「Zapier」社が運営方針を変えたり、消えるなどのリスクも多いので、非常に簡単に寀ーとウォンシグナルを基本的なセッティングだけで接続しておいて、投稿を発行するたびに手動でアラームを送ることが、より信頼性の高いシンプルである。そしてどうせ者に特定のメッセージを送信したり、イベントを通知するなど、ワンシグナルを適切に活用するには、どうせ手動メッセージ機能を使用できなければならない。

ため寀ーウォンシグナル連動を最も簡単に進行して、最も簡単な方法でメッセージを送信するチュートリアルを進めている。

ワンシグナル（Onesignal）に参加し、セッティング

1. まず ワンシグナル（Onesignal）会員登録ページに移動して会員登録を行っている。電子メールアドレス、ギトホプ（GitHub）、Googleは、フェイスブックのIDなどで作ることができる。直接登録時のメールアドレス（Email Address）、パスワード（Password）、企業、または組織名（Company or Organization Name）を記入し、組織名は適当な場合になる。「Create Account」ボタンを押して登録を完了すると、電子メールで確認メールが来て、メール内のリンクをクリックすると、会員登録が完了する。
2. 会員登録後、ログインが完了すると、 「All Applications」ページで左上の「ADD APP」ボタンを押す。
3. その後、「Add a New App」ウィンドウが表示されるのでアプリの名前（APP NAME）を少なく「ADD APP」をクリックして生成する。ここで定められた名前でプッシュが来るのではなく単にウォンシグナル（OneSignal）で区別するための名前だから適当に建てるされる。
4. 「Select one platform to configure」メニューからプラットフォームを選択する必要がするクロムのアイコンが描かれている「Web Push」を選択し、Nextに進む。
5. 「Configure Web Push」メニューに進みたが、「Choose Integration」のサブメニューの中で「Typical Site（一般サイト）」を選択する。
6. 今「Site Setup」で寀ーブログサイトの情報を入力しなければならない。最後「HTTPS」の部分は、非常に重要である。
7. 'SITE NAME' - ブログ名
8. 'SITE URL' - 「https：//」を含むサイトのアドレス
9. 'AUTO RESUBSCRIBE(HTTPS ONLY)' - 自動再購読機能であるが、寀ーでは使用できない。
10. 'DEFAULT ICON URL' - ワンシグナルメッセージを送ったときにユーザーに表示されるプロフィール画像だ。本人のブログプロフィールリンクを使用するか、右側の「UPLOAD」ボタンを介して直接画像をアップロードする。
11. 'My site is nor fully HTTPS' - 本当に重要な部分であるが、自分のサイトが完全に「HTTPS」がないときに使用する機能ですが、寀ーはたとえ「HTTPS」をサポートしてはいても不完全なので、必ずクリックしてオンにしなければならない（オン場合員シグナルが機能しない）。機能をオンに与え「CHOOSE A LABEL」の部分に適切なラベルを少なければされるが、ユーザが混乱リッジようできるなら、サイトのアドレスを書き留めてランナー（ex gkkmon.OS.TC）。この機能をつけることと、プッシュ通知が「gkkmon.com」ではなく「gkkmon.os.tc」のようにドメインのアドレスが変わってきて、サブスクリプションの時に一度より通知ページが浮かぶ不快感が生じ、長いが、現在寀ーで仕方なく無条件こうする必要があります。

通知の詳細設定 - Permission Prompt Setup

1. 今「Permission Prompt Setup」メニューで詳細設定を作成なければならない。私たちは、「Subscription Bell（サイトに浮いている赤のサブスクリプションボタン）」と「Slide Prompt（ポップアップで浮かぶ購読通知ウィンドウ）」を作成する。
2. 下部の「ADD A PROMPT」ボタンを押してエディタをつける。
3. 左上の「PROMPT TYPE」のうち「SUBSCRIPTION BELL」を選択する。
4. 「SIZE」は、ボタンの大きさ、「LOCATION」は、サブスクリプション・ベルがサイト左下、右下のどこに来るか、「COLOR」は当然の色を定める。
5. 「VISIBLITY」の「Hide bell if user is subscribed」機能をオンにすると、ユーザがサブスクリプションの時に、サブスクリプション・ベルが消える。誤ってダブルクリックして、サブスクリプションをキャンセルした場合を防止する利点があるが、サブスクリプションをキャンセルなど後日コントロールすることは困難であるという欠点がある。
6. そのほか「Customize bell text」などの設定は、 ワンシグナル（Onesignal）プラグインの詳細設定に出てきたものと同じである。
7. 右下の「SAVE」ボタンを押すと、サブスクリプションのベルが作られる。
8. 再び「ADD A PROMPT」ボタンを押して、エディタをオンにして、今度は、メニューの中で「SLIDE PROMPT」を選択する。
9. そのまま使ってもされるが全部、英語でメッセージが硬くので、カスタムする。
10. 下部の「Customize slide prompt text」機能をつけたり、「ACTION MESSAGE」にアルリムチャンに敵テキストを入力する。
11. 「BUTTONS」には、「はい」、「いいえ」のようにボタンの文字を入力することができる。
12. 同様に「SAVE」ボタンを押して保存すると、ポップアップスライドメッセージが作られる。

その他の設定

1. 「Welcome Notification」は、サブスクリプション時に登録ようこそメッセージだ。
2. 「TITLE」にメッセージの件名、「MESSAGE」にメッセージの内容を書くだけです。後で手動でメッセージを送信するときにも、これと同様の方法で送ることになり、右側にプレビュー形でユーザーが受けることになるメッセージをプレビュー確認することができる。
3. 「Open link when clicking welcome notification」機能をオンにすると、メッセージクリックするサイトに移動する。
4. 次の「Advanced」メニューは実際には放っておいても無欠に働く。必要な機能を短く説明すると
5. 「CLICK BEHAVIOR」は、新しいタブで開くか、現在のウィンドウで開くかなどの詳細を設定する。
6. 「PERSISTENCE」は、通知が自動的になくなるかも、クリックするまでかどうかを決定する。
7. その他の設定まで完了したら、下部の「SAVE」ボタンを押して設定を完了する。

寀ー（Tistory）とワンシグナル（Onesignal）連動

1. 設定を完了すると、「Add Code to Site」に10行程度のスクリプトコードが完成される。「COPY CODE」ボタンを押して、このコードをコピーして寀ーの「HTML」の「head」と「/ head」の間に入れてしまえばされる。もし分からないウィンドウを切らずに、コードは、メモ帳などにコピーしておこう。
2. 寀ーブログの管理者ページ→スキン編集→HTML編集メニューに入ります。
3. 「Ctrl + F」キーを押して、「/ head」を検索した後、その上の行にコピーしたコードを入れて、右上のオレンジ色の「適用」ボタンをクリックして終了する。

現在、すべての設定と寀ー連動が完了した。ブログにアクセスしてみると、サブスクリプション・ベルと一緒に、サブスクリプションのスライドメッセージが浮かぶことを確認することができる。 ワンシグナル（Onesignal）アプリのページで確認および監視を行うことができ、アプリ名を選択して行って、より詳細なダッシュボード、手動のメッセージは、予約機能、設定などを自由細かく設定することができる。参考までに、このメニューの中で「Settings」から「Apple Safari」ボタンを押して、サイト名とアドレスを書いて確認すると、Mac、Safariでもアラームが可能である（iPhoneのためのサファリではない）。

手動メッセージなどの詳細は、機会があれば、新しいグローバル見つけようにする。だから、すべての一回のセッティングだけで簡単かつ確実に寀ー（Tistory）でワンシグナル（Onesignal）を介してプッシュアラームを使用したい！