LoginSignup
27
20

More than 5 years have passed since last update.

@Futo_Horio(堀尾 風仁)in株式会社神戸デジタル・ラボ

【 Qiita x Slack 】社内メンバーがQiitaに投稿をすると、Slackに通知を送る仕組みを作ってみた！

Last updated at Posted at 2018-03-30

はじめに

同じチームで働いている「メンバーのQiita記事 - 更新通知」が欲しいなー。 と、
ふと思ったのがこの記事を書こうと考えたキッカケ！早速作ってみる。

通勤電車の中でひらめいた！:bulb:

[ ※注意次項 ]

昨年末にPrivate Itemとして記事を書いていて、
最後まで書ききっていなかったのを、今ふと思い出したので、
修正も加えながら公開したいと思う。ので、若干内容が古い可能性あり。

というか、もうあるよね？そういう記事(笑)

絶対誰かやってるじゃん！と思いながら、
電車の中でおそるおそる 「Qiita」 で調べてみると、、。

「Qiita更新通知」で検索してみた！

「 Qiita更新通知 」で、Qiitaってみた！
　→ ググってみた的なやつ

・実際に撮ったスクリーンショット

image.png

Title : Qiitaの更新をslackに通知したい

うわー、もうあるじゃん！

「やっぱみんな考えること同じだよなー！」

と、思いながら記事内容を確認してみると、

[ 以下、記事全文抜粋 ]

（調べ中）

とりあえず、
https://dotjun.slack.com/apps
このページの右上のmanageから入る
Qiita:Teamじゃないと無理っぽい感じ

【 結論 】Qiita:Teamでないと無理っぽい！

どうやら 「Qiita:Team」 じゃないと無理っぽい。
と、諦めるのならこの記事を書く意味はありません。

" 創造性は制約を好む "

いや、、。やったこともないし、
全然できるか分からないけどw

とりあえずなんかプラグラムを組めばできるでしょという
軽いノリでできるかどうか分からないことにチャレンジしてみる!!

Qiita個人ページのRSS(Rich Site Summary)を取得したらイケるんじゃね？

という訳で、早速、試しにやってみる。

1.「Qiita」個人ページのRSSを取得してみる！

さっそく、Qiita個人ページのRSS(フィード)を取得してみる。

そもそもRSSってどうやって取得するんだ？笑

Webページの<head>タグ内に、下記のタグ(rss.html)が記載されていれば、RSSフィードが存在する。
上記のタグがなければ、RSSフィードが存在しない。

Title : WebページからRSSのURLを取得する。

rss.html
<link rel="alternate" type="application/rss+xml" title="RSSのタイトル" href="RSSフィードのIRL">

さっそく、Qiita個人ページを開いて、
ソースコード内に「rss+xml」があるかどうか検索してみる。

な、、ないじゃん。
RSSフィード見つからないじゃんｗ

Qiitaには、RSSフィード存在しないのか。。。

「Qiita」個人ページには、RSSフィードが存在しない？

まぁここまで記事書いてるし、ここでやめるってのもあれなので、
RSSフィードについてもう少し調べてみた。

RSSにはフォーマットが複数存在するので、そのフォーマットによって追加すべきタグ内容が変わってくるようです。

  • フォーマットが「RSS2.0」の場合
rss.html
<link rel="alternate" type="application/rss+xml" href="フィードURL" title="RSS2.0" />
  • フォーマットが「Atom」の場合
atom.html
<link rel="alternate" type="application/atom+xml" href="フィードURL" title="Atom" />

上記のコードは、、

「RSSフィードがココにありますよ！」と拡張機能等にお知らせするために、追加するコードです。

※ RSSについて、もっと詳しい情報が欲しい方は下記記事をご参考ください。

Title : RSSフィードが存在することを知らせるためのlinkタグ

もしかして、もしかするとQiitaのRSSフォーマットは、Atom?

再度、「atom+xml」で、ソースコードを検索してみる。

あ、あったーーーーーーーーーーー！！！！笑

「Qiita」個人ページにRSSフィードが存在することを発見。

myQiitaRss.html
<link rel="alternate" type="application/atom+xml" title="Atom Feed" href="http://qiita.com/Futo23/feed" />

URL : http://qiita.com/〇〇〇〇〇(アカウント名)/feed へアクセスすると、
下記のようなxmlが返ってくることが分かると思います。

rss.xml
<?xml version="1.0" encoding="UTF-8"?>
<feed xml:lang="ja-JP" xmlns="http://www.w3.org/2005/Atom">
  <id>tag:qiita.com,2005:/Futo23/feed</id>
  <link rel="alternate" type="text/html" href="http://qiita.com"/>
  <link rel="self" type="application/atom+xml" href="http://qiita.com/Futo23/feed"/>
  <title>Futo23の投稿 - Qiita</title>
  <description>QiitaでユーザーFuto23による最近の投稿</description>
  <updated>2017-05-31T16:52:58+09:00</updated>
  <link>http://qiita.com/Futo23</link>
  <entry>
    <id>tag:qiita.com,2005:PublicArticle/497543</id>
    <published>2017-05-31T16:52:58+09:00</published>
    <updated>2017-06-01T19:40:22+09:00</updated>
    <link rel="alternate" type="text/html" href="http://qiita.com/Futo23/items/be35639bf73a3330c971"/>
    <url>http://qiita.com/Futo23/items/be35639bf73a3330c971</url>
    <title>【※JS初心者必見】JS未経験者がJavaScript(JS)でつまずくポイントについてまとめてみた！ - 「var」と「let」と「const」と、</title>
    <content type="html">

さて、次は何をしたら良いのか？
上記で取得したXMLを元に、更新の有無を判断する必要があります。

2. 取得したXMLをパースする。

今回は、GAS(Google Apps Script)を用いて、
上記のxmlをパースしていきたいと思います。

1. まず、Googleドライブにアクセスします。

image.png

上記の手順で、「Google Apps Script」を新規作成します。

image.png

2. 次に、XMLパーサーを作成していきます。

[パーサーとは？]
プログラムのソースコードやXML文書など、一定の文法に従って記述された複雑な構造のテキスト文章を解析し、プログラムで扱えるようなデータ構造の集合体に変換するプログラムのこと。
[e-word - パーサー(parser) ] より抜粋。

XMLのパースには、GAS(Google Apps Script)の「XML Service Service(誤字ではないｗ)」が使えそう！

とにかく、サンプルコードを動かしてみる。

GAS (Google Apps Script) - REFERENCE

こちらのGAS公式リファレンスに記載のあるソースコードを実際に動かしてみた。

parseSample.gs
function parseXml() {
  // Qiita個人ページのフィードURL
  var url = "http://qiita.com/〇〇〇〇〇(ユーザー名)/feed";
  var xml = UrlFetchApp.fetch(url).getContentText();
  var document = XmlService.parse(xml);
  var root = document.getRootElement();
  var atom = XmlService.getNamespace("http://www.w3.org/2005/Atom");

  var entries = document.getRootElement().getChildren("entry", atom);
  for (var i = 0; i < entries.length; i++) {
    var title = entries[i].getChild("title", atom).getText();
    var categoryElements = entries[i].getChildren("category", atom);
    var labels = [];
    for (var j = 0; j < categoryElements.length; j++) {
      labels.push(categoryElements[j].getAttribute("term").getValue());
    }
    Logger.log("%s (%s)", title, labels.join(", "));
  }
}

1. コードをGASに保存、実行する。

image.png

※ 画面中央上の再生マークを押すと、上記のソースコードが実行されます。

2. ログを確認する。

image.png

画面中央のメニューより[ 表示 ] > [ ログ ] を実行すると、上記ソースコードのログ出力を確認することができます。
ショートカットは、「 Ctrl + Enter 」

3. ログ出力の結果が表示される。

image.png

ざっと、こんな感じｗ

後は、このソースコードをいい感じにしてやるだけ！

parseXml.gs
function parseXml() {

  // Qiita個人ページのフィードURL
  var url = "http://qiita.com/futo23/feed";

  // 上記URLにGETリクエスト
  // getContentText()で、xmlを取得
  var xml = UrlFetchApp.fetch(url).getContentText();

  // 取得したxmlを文書化
  var document = XmlService.parse(xml);

  // ドキュメントのルート要素を抽出
  var root = document.getRootElement();

  // 引数のURLを用いてNameSpaceを生成します。（おそらくフォーマット指定？）
  var atom = XmlService.getNamespace("http://www.w3.org/2005/Atom");

  // エントリーの記事を一つずつ取得
  var entries = document.getRootElement().getChildren("entry", atom);
  for (var i = 0; i < entries.length; i++) {

    // 記事タイトルの取得
    var title = entries[i].getChild("title", atom).getText();

    // 記事の更新日時を取得
    var UpdateTime = entries[i].getChild("updated", atom).getText();

    Logger.log(title + " : " + UpdateTime);
  }
}

ユーザーオブジェクト作って、newして実態を生成したまでは良いのだけど、
上記の値を保持することはできないので、ロジックを変更する必要がある。

Slack投稿ロジックを変更する。

(旧) 既存のエントリIDと最新のエントリIDを比較し、差異があればSlackに投稿する。
(新) 直近1時間以内に更新があれば、Slackに投稿する。

3. Slackの特定のChannelに投稿する。

parseXml2.gs

// 更新通知を行うユーザー名
var names = ["xxxxxxx","Futo23"];

function main() {  
  for (var k = 0; k < names.length; k++) {
     parseXml(names[k]);
  }
}

function parseXml(user) {

  // Qiita個人ページのフィードURL
  var url = "http://qiita.com/" + user + "/feed";

  // 上記URLにGETリクエスト
  // getContentText()で、xmlを取得
  var xml = UrlFetchApp.fetch(url).getContentText();

  // 取得したxmlを文書化
  var document = XmlService.parse(xml);

  // ドキュメントのルート要素を抽出
  var root = document.getRootElement();

  // 引数のURLを用いてNameSpaceを生成します。（おそらくフォーマット指定？）
  var atom = XmlService.getNamespace("http://www.w3.org/2005/Atom");

  // エントリー記事を取得
  var entries = document.getRootElement().getChildren("entry", atom);

  // Logger.log(entries);

  // 最新記事のidを取得
  var id = entries[0].getChild("id", atom).getText();
  var pos = id.indexOf("/");
  var entrieId = id.substr(pos+1);

  // 記事タイトルの取得
  var title = entries[0].getChild("title", atom).getText();

  // 記事の更新日時を取得
  var publishTime = entries[0].getChild("published", atom).getText();
  var nowTime = Utilities.formatDate(new Date(), "Asia/Tokyo", "yyyy-MM-dd'T'HH:mm:ss");
  // Logger.log("publishTime : " + Date.parse(publishTime));
  // Logger.log("nowTime : " + Date.parse(nowTime));

  // 1時間をミリ秒へ変換したもの
  var TimeLag = 3600000;

  // 更新があった場合[1時間以内に更新があったもの]
  if (Date.parse(nowTime) - Date.parse(publishTime) <= TimeLag) {

    // Slackに投稿を行う。
    var postUrl = "https://slack.com/api/chat.postMessage";
    // 送りたいSlackTeamのトークンを指定
    // [テストページ] https://api.slack.com/methods/chat.postMessage/test
    var token = "xoxp-[対象のSlackチームのToken]";
    // Qiita Channel
    var channel = "C5NHYUMN0"; // Channel ID
    var text = "@" + user + " さんが【 " + title + " 】を投稿しました。";
　　
    var fixUrl = postUrl + "?token=" + token + "&channel=" + channel + "&text=" + text;
　　 UrlFetchApp.fetch(fixUrl);
    // Logger.log(fixUrl);
  }

  // [参考ソース] 実際には、必要ないです。
  for (var i = 0; i < entries.length; i++) {
    // 記事タイトルの取得
    var title = entries[i].getChild("title", atom).getText();
    // 記事IDの取得
    var id = entries[i].getChild("id", atom).getText();
    // 記事の更新日時を取得
    var UpdateTime = entries[i].getChild("updated", atom).getText();
  }
}

こんな感じ。

このGASを1時間置きに実行してやれば、
最新のQiita記事がSlackの特定チャネルに投稿されます！

編集 > 現在のプロジェクトのトリガー > 実行する関数と時間タイマーをセットし、トリガーを追加する。

こんな感じで保存してやると、1時間置きにSlackに更新通知が来るかもしれないし、こないかもしれないｗ

image.png

興味がある方は是非お試しください！

最後に

なんとなく作ってみたら出来ました。
何でもSlackにつなげたいという安直な考えですが、
少しでもみなさんのお役に立てればと思います。

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

27
20
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
27
20