tag:crieit.net,2005:https://crieit.net/tags/Slack-API/feed 「Slack-API」の記事 - Crieit Crieitでタグ「Slack-API」に投稿された最近の記事 2019-08-28T18:18:13+09:00 https://crieit.net/tags/Slack-API/feed tag:crieit.net,2005:PublicArticle/15360 2019-08-28T18:18:13+09:00 2019-08-28T18:18:13+09:00 https://crieit.net/posts/CloudFunctions-SlackAPI CloudFunctions+SlackAPIを使って定期的にユーザ数を通知できるように自動化してみた <p>最近、<a target="_blank" rel="nofollow noopener" href="https://tsundoku.site">作ったWebサービス</a>で手動でユーザ数などのデータを取得していたけど、<br /> めんどくさくなったので、いまさらながらSlackAPIを使ってみた。</p> <h2 id="こんな感じで通知されます!"><a href="#%E3%81%93%E3%82%93%E3%81%AA%E6%84%9F%E3%81%98%E3%81%A7%E9%80%9A%E7%9F%A5%E3%81%95%E3%82%8C%E3%81%BE%E3%81%99%EF%BC%81">こんな感じで通知されます!</a></h2> <p>ユーザ数とか登録データ数とかを通知♪<br /> いまは毎日0:00に通知するようにしているので、毎日たのしみ(<em>´ω`</em>)</p> <p><img width="535" alt="スクリーンショット 2019-08-28 16.46.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/d0af6b44-cc9c-e3b7-afc8-6c3d616d3038.png"></p> <h2 id="全体の流れ"><a href="#%E5%85%A8%E4%BD%93%E3%81%AE%E6%B5%81%E3%82%8C">全体の流れ</a></h2> <p>全体の流れはこんな感じ</p> <ol> <li>Slack APIで<strong>Slack App</strong>を作成</li> <li>作成したAppで<strong>Incoming Webhooks</strong>を有効にする</li> <li>Incoming Webhooksに<strong>Webhook URL</strong>を追加する</li> <li>取得したWebhook URLを使ってFunctionsからメッセージを送る</li> </ol> <h3 id="1. Slack APIでSlack Appを作成"><a href="#1.+Slack+API%E3%81%A7Slack+App%E3%82%92%E4%BD%9C%E6%88%90">1. Slack APIでSlack Appを作成</a></h3> <p>まずは、「 https://api.slack.com/apps 」にアクセス</p> <p><img width="800px" alt="スクリーンショット_2019-08-28_15_42_59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/5648c760-d1f2-c934-3c55-866e6fb1cb0f.png"></p> <p>「Create New App」をクリックすると、作成ダイアログが表示されるので、<br /> アプリ名を入力して、「Create App」をクリック</p> <p><img width="428" alt="スクリーンショット_2019-08-28_15_46_27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/1b38367b-7a5c-4c22-7e35-0f94c643b8fa.png"></p> <p>これでSlack Appが作成できた(<em>´ω`</em>)</p> <h3 id="2. 作成したAppでIncoming Webhooksを有効にする"><a href="#2.+%E4%BD%9C%E6%88%90%E3%81%97%E3%81%9FApp%E3%81%A7Incoming+Webhooks%E3%82%92%E6%9C%89%E5%8A%B9%E3%81%AB%E3%81%99%E3%82%8B">2. 作成したAppでIncoming Webhooksを有効にする</a></h3> <p>Web APIでメッセージを投稿できるように設定するために、<br /> 作成したAppのSettingsのBasic Infomarionにある「Incoming Webhooks」を有効にする</p> <p><img width="718" alt="スクリーンショット_2019-08-28_15_46_58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/2b926c23-de70-3d7c-0bbc-6577b288fd8a.png"></p> <p>クリックするとこんな感じ。デフォルトはOFFなので、ONに切り替える。</p> <p><img width="748" alt="スクリーンショット_2019-08-28_15_47_11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/36688dc6-3ca7-0c66-a839-9d482354c132.png"></p> <p>これで有効になった(<em>´ω`</em>)</p> <h3 id="3. Incoming WebhooksにWebhook URLを追加する"><a href="#3.+Incoming+Webhooks%E3%81%ABWebhook+URL%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B">3. Incoming WebhooksにWebhook URLを追加する</a></h3> <p>有効にしたので、どのチャネルに通知するかを設定していく</p> <p>有効すると、下の方に「Add New Webhook to Workspace」があるので、それをクリック</p> <p><img width="714" alt="スクリーンショット_2019-08-28_15_47_38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/b0288e59-47c9-9c06-1d18-8f729eefbf67.png"></p> <p>クリックすると、チャネルの選択画面が出るので、投稿先を設定して、「許可する」をクリック。<br /> 投稿先はチャネルだけじゃなく、個人宛も設定できます(<em>´ω`</em>)<br /> <img width="360" alt="スクリーンショット 2019-08-28 15.48.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/d2cb445a-b787-5ec6-3214-c9bceb731c4c.png"></p> <p>許可すると、こんな感じの画面に。<br /> WebhookURLが追加されるので、「Copy」を押して、コピーしておく<br /> <img width="712" alt="スクリーンショット_2019-08-28_15_48_39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/f51efaa9-c8e5-1e24-69f4-a63f799796ee.png"></p> <h3 id="4. 取得したWebhook URLを使ってFunctionsからメッセージを送る"><a href="#4.+%E5%8F%96%E5%BE%97%E3%81%97%E3%81%9FWebhook+URL%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6Functions%E3%81%8B%E3%82%89%E3%83%A1%E3%83%83%E3%82%BB%E3%83%BC%E3%82%B8%E3%82%92%E9%80%81%E3%82%8B">4. 取得したWebhook URLを使ってFunctionsからメッセージを送る</a></h3> <p>取得したWebhookURL宛にメッセージを送ればOK</p> <h4 id="CloudFunctionsのコードはこんな感じ。"><a href="#CloudFunctions%E3%81%AE%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AF%E3%81%93%E3%82%93%E3%81%AA%E6%84%9F%E3%81%98%E3%80%82">CloudFunctionsのコードはこんな感じ。</a></h4> <pre><code class="javascript">const functions = require("firebase-functions"); const admin = require("firebase-admin"); admin.initializeApp(); /** * Slackにメッセージ(text)を送る関数 */ const axios = require("axios"); async function sendSlack(text) { const webhookURL = "https://YOUR_WEBHOOK_URL"; const param = { text: text }; const headers = { "Content-Type": "application/x-www-form-urlencoded" }; try { await axios.post(webhookURL, param, { headers: headers }); } catch (error) { console.error(`Error occuered in sendSlack: ${error}`, error); } } /** * Slackへの通知を定期実行するFuncitons */ exports.slackNotify = functions.pubsub .schedule("0 0 * * *") .timeZone("Asia/Tokyo") .onRun(async context => { // Slack通知 await sendSlack("こんにちは"); }); </code></pre> <p><code>sendSlack(text)</code>の<code>webhookURL</code>に、<br /> 上でコピーしたWebhook URLをはりつけてください。<br /> こんな感じで「こんにちは」される(<em>´ω`</em>)</p> <p><img width="536" alt="スクリーンショット 2019-08-28 16.58.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/2efce0de-20f4-821b-526b-ee6375f938f1.png"></p> <p>あとは、Function内でFirestoreとかを呼び出して、データを収集・集計すればOKヽ(=´▽`=)ノ</p> <p>メッセージ送るだけならすごく簡単(<em>´ω`</em>)</p> <h3 id="ほかにもいろいろ"><a href="#%E3%81%BB%E3%81%8B%E3%81%AB%E3%82%82%E3%81%84%E3%82%8D%E3%81%84%E3%82%8D">ほかにもいろいろ</a></h3> <p>ほかにもパラメタを変えれば、色を変えたり、画像を送れたりできるよう!!<br /> - <a target="_blank" rel="nofollow noopener" href="https://qiita.com/ik-fib/items/b4a502d173a22b3947a0">SlackのIncoming Webhooksを使い倒す - Qiita</a></p> <p>公式ドキュメントだとこちら<br /> - <a target="_blank" rel="nofollow noopener" href="https://api.slack.com/incoming-webhooks">Incoming Webhooks | Slack</a></p> <p>また、こちらの記事でも書いたようにジョブの無料枠は、<strong>Googleアカウントごと</strong>...<br /> 遊びやテスト用にいくつも作ると課金されはじめるので注意が必要です...<br /> - <a target="_blank" rel="nofollow noopener" href="https://qiita.com/kira_puka/items/1f164dd8d1a5a281d9c1">Cloud Functions for Firebaseのcronみたいな定期実行を試したら簡単だった - Qiita</a></p> <p>以上!!</p> <h2 id="こんなのつくってます!!"><a href="#%E3%81%93%E3%82%93%E3%81%AA%E3%81%AE%E3%81%A4%E3%81%8F%E3%81%A3%E3%81%A6%E3%81%BE%E3%81%99%EF%BC%81%EF%BC%81">こんなのつくってます!!</a></h2> <p>最近、積読用の読書管理アプリ「積読ハウマッチ」をリリースしました!<br /> <a target="_blank" rel="nofollow noopener" href="https://tsundoku.site">積読ハウマッチ</a>は、Nuxt.js+Firebaseで開発してます!</p> <p><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/572d4947-f40b-e4dc-1c9c-bc584cd2a66c.png" width="25%"/></p> <p>もしよかったら、遊んでみてくださいヽ(=´▽`=)ノ</p> <p>要望・感想・アドバイスなどあれば、<br /> 公式アカウント(<a target="_blank" rel="nofollow noopener" href="https://twitter.com/MemoryLoverz">@MemoryLoverz</a>)や開発者(<a target="_blank" rel="nofollow noopener" href="https://twitter.com/kira_puka">@kira_puka</a>)まで〜</p> きらぷか@積読ハウマッチ/SSSAPIなど