「Slack」の記事 - Crieit

スーパー完全無料でRSSをSlackに投稿できるやつを作った

2021-06-27T09:05:46+09:00

皆さん、どうやって技術ネタ、キャッチアップしてますか？

皆さんはどうやって日々日進月歩な技術ネタをキャッチアップしてますか？

私はよく企業や個人が書いている技術ブログから情報を得ることが多いです。本当に技術ブログって手軽なのにすごい勉強になりますよね。

皆さん、どうやってブログ記事を通知してますか？

ブログ記事確認はもちろん定期的にブログに訪問するのが一番ですが、なかなか時間の取れない中でそれは酷なので何かしら皆さん工夫していると思います。

ブログの更新にあわせてTwitterを更新してくれる企業様であれば、Twitterのフォローをすればいいかもしれませんが、必ずしもそうでもないかもしれませんし、Twitterのフォローには技術以外の話題も飛び交うので、集中して記事を確認することも難しいかもしれません。

そういったときに役立つのがRSSです。RSSとはRich Site Summaryの略で、ニュースやブログなど各種のウェブサイトの更新情報を配信するための仕組みやXMLフォーマットのことです。

RSSの更新を定期的に取得し、記事更新を教えてくれるRSSリーダーは皆さんお世話になっている人も多いのではないでしょうか？

私もGoogle Chromeに拡張としてRSSリーダーを入れていた時期もありました。

問題点

RSSリーダーを使って技術ブログの更新を検知する方法はおそらくデファクトスタンダードだと思いますが、個人的にちょっと問題点がありました。

それは、通勤時間の時間をうまく使ってキャッチアップするのが面倒ということです。

携帯にPCと同じRSSを登録するのがめんどくさい
RSSリーダーを開かない
- 電車に乗っているとTwitterやSlackを開いている時間がほぼ全て
- Kindleで読書するのも細かく乗り換えがあって中断が多く発生するためストレス
(RSSリーダーによって違うのかもしれませんが)タイトルを見て中身を判断するのが難しい

このような悩みがあるため、私はSlackの/feed機能を使ってRSSを購読してました。

が、しかしこれもまたもや問題点。Slackの無料ワークスペースには、Appsが10個までしか登録できないのです。(/feedもAppsを消費します)

Slackには他にもAppsをいくつか作って入れているため、実際登録できるRSSは5個くらいになってしまいちょっと心もとない感じになってしまいました。

IFTTTはどうなの？

ちょっと詳しい人だと「じゃあIFTTT」はどうなんです？という意見が聞こえてきそうですが結果的にこちらも不採用。

理由は上記とほぼ同じで、無料版だと設定できる数に制限があるためこちらもあえなく不採用。

というより、お金出せよって声が聞こえてきますね。

じゃあ作ろっか

ということで、作ります。

要求は次の通りのことを満たす必要があります。

無制限にRSSを登録できること
更新がある場合のみSlackに投稿すること
SlackもAppsを消費しないこと(Custom Integration)
できれば内容を要約したものや、OGP画像も一緒に投稿して記事の選別に役立てられる付加機能を作ること

feedparser

今回は時間もない中だったのでサクッとPythonで作っていきます。

RSSの購読にはfeedparserを使うと便利です。

RSS2.0だけでなく、Atomや古いRSSの形式でも難なく読み込んでくれます。

import feedparser
entries = feedparser.parse('http://feedparser.org/docs/examples/rss20.xml')
for e in entries:
    print(e.title)
    print(e.link)
    print(e.summary)

Entry Itemへのアクセスはイテレーターになっているので取り出しもかんたんです。

RSSのEntry Itemの取り出しはこれで進めます。本当にかんたんでありがたい。

さらに便利なのはpublished_parsedという項目がEntry Itemから取れます。

こちら、RSSのpublished_dateをdatetimeオブジェクトにパースしてくれます。

おかげで、フォーマット差分をあまり意識することなく、更新差分チェック実装ができました。

ステート管理

RSSには記事の作成日付(Publish Date)があり、RSSの取得のたびに差分チェックとして活用することができます。

なので、以前取得した記事のPublish Dateを記憶して、更新があった場合のみ記事を取得するようにしたいのですが、それには何かしらのDB、もしくはデータ保存する仕組みが必要となります。

今回は無料という縛りがあるため、当初はGitHubのレポジトリ上にステートファイルをコミットするようにしようとも思ったのですが、コミットが伸び過ぎてしまうのは色々問題なのでやはりDBを使いたいです。

HarperDB

HarperDBは、データ管理を容易にすることに重点を置いた分散型データベースで、ジョインを含むNoSQLとSQLをサポートしています。

NoSQLでSQLがかけるのは便利ですね！！

日本ではあまり聞きませんが、dev.toとかだとちょこちょこ話題に上がっております。

こちらのHarperDB、HarperDB Cloud Instanceというマネージドサービスも提供されており、インスタンスタイプを選ぶだけで、手軽にHarperDBを使うことができるようになっております。

え？でもお高いんじゃない？そんな声が聞こえてきますね。

なんと、今だけかもしれませんがHarperDB Cloud Instanceの一番最小のInstance構成だと無料で使うことができます！これは嬉しいですね。

Name	Value
RAM	0.5GB
DISK	1GB
VERSION	3.0.0
IOPS	3000

正直今回の使い方ではこのレベルで十分です。

Python上でのHarperDB操作も専用のライブラリが用意されているためかんたんに実装できます。

HARPERDB_URL = os.getenv("HARPERDB_URL")
HARPERDB_USERNAME = os.getenv("HARPERDB_USERNAME")
HARPERDB_PASSWORD = os.getenv("HARPERDB_PASSWORD")
HARPERDB_SCHEMA = os.getenv("HARPERDB_SCHEMA", "prd")
FILEPATH = "entry.csv"

db = harperdb.HarperDB(
    url=HARPERDB_URL,
    username=HARPERDB_USERNAME,
    password=HARPERDB_PASSWORD,)

test = db.search_by_hash(HARPERDB_SCHEMA, "last_published", [name], get_attributes=["time"])
for t in test:
    print(t["time"])

このようにNoSQLライクにHash Attributeを使って検索する感じで実装できます。もちろんValue引きも可能です。(遅くなるのかは不明だがNoSQLなら全走査になりそうなので多分遅い)

UpdateやInsertも同様な感じで実施できます。

ef insert_last_published(name: str):
    db.insert(HARPERDB_SCHEMA, "last_published", [{"name": name, "time": 123456789}])
    return 123456789


def update_last_published(name: str, time: int):
    result = db.update(HARPERDB_SCHEMA, "last_published", [{"name": name, "time": time}])
    return result

また、便利だなと思ったのはやはりSQLでの走査です。

def get_entry_urls():
    return [{"name": x["name"],
             "url": x["url"],
             "icon": x["icon"]} for x in db.sql(f"select * from {HARPERDB_SCHEMA}.entry_urls")]

といった具合にテーブルの＊Selectやジョインなんかも書くことができます。テーブル全体をなめたいとき、これは楽でいいですね。

また、CSV load機能もあり、CSVをHarperDBに食わせることもできちゃったりします。

今回はこちらの機能はRSSのEntryURL登録機能として便利に使用させていただきました。

import os
import harperdb

HARPERDB_URL = os.getenv("HARPERDB_URL")
HARPERDB_USERNAME = os.getenv("HARPERDB_USERNAME")
HARPERDB_PASSWORD = os.getenv("HARPERDB_PASSWORD")
HARPERDB_SCHEMA = os.getenv("HARPERDB_SCHEMA", "prd")
FILEPATH = "entry.csv"

db = harperdb.HarperDB(
    url=HARPERDB_URL,
    username=HARPERDB_USERNAME,
    password=HARPERDB_PASSWORD,)

db.csv_data_load(HARPERDB_SCHEMA, "entry_urls", FILEPATH, action="upsert")

無料開発で一番ネックになるのがDBですが、正直これだけで大概のアプリは作れてしまうのではないでしょうか？

OGP画像を得るには？

OGPとはOpen Graph Protocolの略で、TwitterやFacebookにURLリンクを貼り付けると出てくるあれです。

実際OGP作成を実装された方ならわかりますが、OGPはHTMLのHeaderに決まりきったmetaタグを記載して表現しております。

Slackのattachmentsに入れる画像はOGPのImageから取るようにします。

opengraph-py3

PythonでOGPを解析するならopengraphライブラリが便利です。ただし、

pip install opengraph

でインストールするとPython2用のライブラリがインストールされてしまいまともに動かないので、

pip install opengraph_py3

でインストールするようにします。

使い方もかんたんで、opengraph_py3.OpenGraphでインスタンスを作ってあげれば、ogp["image"]にOGPイメージURLが保存されます。

一点注意としてopengraphは裏でBeautifulSoapが動いているようで、Headerのないページに対してOGPを取得しようとするとAttributeErrorが出てしまうので例外処理を入れております。

本家にPR出すか迷いましたが、2017年から更新がないので骨折り損になりそうなので、やめておきます。

import opengraph_py3

def get_ogp_image(link: str):
    try:
        ogp = opengraph_py3.OpenGraph(url=link)
        if ogp.is_valid():
            return ogp["image"]
        else:
            return ""
    except AttributeError as e:
        logger.debug(f"No Head contents: {e}")
        return ""

Favicon

できれば、Slack投稿するときに技術ブログのアイコンをブログごとに変えたいなと思ったので、Faviconを取る実装も入れます。

Pythonにはfavicon取るためのライブラリfaviconがあります。

使い方も超かんたんで、favicon.getで取得したオブジェクトの配列0番目が一番大きなfaviconなのでそれを取るだけです。

import favicon
def get_favicon(link):
    icons = favicon.get(link)
    if len(icons) == 0:
        return ""
    else:
        return icons[0].url

キーワード抽出

さて、今回の醍醐味のキーワード抽出ですがこちらもかんたんに実装できます。

pytermextractという専門用語抽出ツールと形態素解析ライブラリjanomeを組み合わせることでかんたんに実現できます。

janomeは本当に便利で、特にCIに乗っけてぐるぐるしたい人にはmecabをインストールする必要も辞書をコンパイルする必要もなく、pipで一発入れれば使えるので重宝しています。

pytermextractはPyPI登録されているライブラリではないのでインストールは公式サイトから落としたZIPを展開しsetup.pyから行います。

また、janomeもpipでインストールします。

unzip pytermextract-0_01.zip
cd pytermextract-0_01
python setup.py install

pip install janome

まずは、キーワード抽出したいテキストをjanomeのTokenizerにかけて、結果を頻出度から単名詞の左右の連接情報スコア(LR)を算出し、

重要度スコアとしてはじき出す、という仕組みらしいです。とは言っても私にはよくわからなったのでサンプルコード丸パクリです。

得られる結果は{"単語": スコア}となってますので、こちらをスコア順にリバースソートして上位6位を取得する形にしました。

しょうもない知識ですが、janomeのTokenizerインスタンス作るところは処理コストがちょっと高いので、リファクタでモジュールトップレベルでの宣言にしてます。

from janome.tokenizer import Tokenizer
import termextract.janome
import termextract.core

t = Tokenizer()

def extract_keyword(text):
    tokenize_text = t.tokenize(text)
    frequency = termextract.janome.cmp_noun_dict(tokenize_text)
    lr = termextract.core.score_lr(
        frequency,
        ignore_words=termextract.janome.IGNORE_WORDS,
        lr_mode=1, average_rate=1)
    term_imp = termextract.core.term_importance(frequency, lr)
    score_sorted_term_imp = sorted(term_imp.items(), key=lambda x: x[1], reverse=True)
    logger.debug(f"keywords: {score_sorted_term_imp}")
    return score_sorted_term_imp[:6]

RSSのSummaryTextでは精度がでない、そりゃそうじゃ。

見出し通りですが、当初はfeedparserから取得できるEntry ItemのSummaryをpytermextractに食わせてましたが、SummaryTextが短すぎて全く期待する動作になりませんでしたので、BeautifulSoupを使って、実際の記事の本文を取得しpytermextractに食わせる実装に変更しました。

from bs4 import BeautifulSoup
import urllib.request as req

def extract_html_text(url):
    res = req.urlopen(url)
    soup = BeautifulSoup(res, "html.parser")
    p_tag_list = soup.find_all("p")
    return " ".join([p.get_text() for p in p_tag_list])

本文はpタグと判断しfind_allするちんけな実装です。ごめんなさい。

Slack投稿

いよいよSlack投稿部分の作成です。

Slack投稿はCustomIntegrationのIncoming Webhookで作ります。

なので、Slack attachmentが使えます。

特質したことはないのですが、OGP画像はimage_urlに、faviconはauthor_imageにキーワードはfieldsに入れてます。

GitHub Actions化

最後にGitHub Actionsに載せて、定期実行させます。

その前にの#harperdbでも書いたとおり、RSS追加時のHarperDBへのEntry追加の定義を書いていきます。

特定のファイルに更新があった場合のみ動くGitHub Actionsを作る場合は、 on_pushなどの条件にpathsを入れることで実現できます。これだけです。

on:
  push:
    branches:
      - main
    paths:
      - "entry.csv"
  pull_request:
    branches:
      - main
    paths:
      - "entry.csv"

また、定期実行にはschedule cronが便利です。

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main
  schedule:
    - cron: "*/30 * * * *"

完成

ということでできました。

entry.csvに書いたRSS feedを30分ごとに確認しにいき、前回よりpublish_dateの更新があったばあいはOGP, favicon, キーワード付きでSlack投稿します。

レポジトリはこちらです。

https://github.com/tubone24/tech_blog_spider

ForkするとGitHubA　ctionsがうまく発火しないっぽいので、もし利用する際はgit cloneして自身のレポジトリに再Pushして使っていただければと思います。

結論

HarperDBを使って何でもつくれそうな予感がするこの頃です。

【Slack】/remindで平日に繰り返しリマインドする方法

2021-01-03T18:57:47+09:00

slackで平日の16:50 に「日報書いてね！」周知をgeneralチャンネル全体に繰り返し行いたい場合の設定方法メモ

1. リマインド設定メッセージの書き方

/remind #general 日報書いてね! at 16:50 every weekday

送信ボタンを押すと設定されます

実際の画面

メッセージ

メッセージ送信後

ちなみに、以下のようにgeneralチャンネルにログが出るので、こっそり設定はできない模様

2. 現在設定されているリマインドを確認するメッセージの書き方

/remind list

送信ボタンを押すと設定状況が表示されます

実際の画面

メッセージ

メッセージ送信後

リマインダーを消すときは横の削除リンクをクリックするだけ

【Slack】Simple Pollを使って簡易的な投票をする方法

2021-01-03T18:13:22+09:00

Slackで「今日のランチ何を食べた？」という質問と、その選択肢に「カレー」「ナポリタン」「ラーメン」「その他」をSimple Pollで作成して、みんなに投票させたい場合の設定方法についてのメモ

Simple PollはすでにSlackのワークスペースに追加されているものとします。追加方法はググればすぐに出てきます。

Simple Pollの簡単な使い方

1. 質問の作成

質問したいメンバーやチャンネルにて以下のように/コマンドを記述したメッセージを送信するだけ

コマンド記述例)

/poll "今日のランチ何を食べた？" "カレー" "ナポリタン" "ラーメン" "その他"

実際の画面だとこのような感じ↓

送信ボタンを押すとすぐに投票画面が作成されます

初めて使う場合は、以下のようにプライバシーポリシーの受け入れ確認画面が出るかもしれません。
その時は、「Accept」で同意しないと投票画面は作成されません。

2. 投票の仕方

選択肢の横にある数字をクリックするだけ
なお、選択肢を修正したい場合は、もう一度数字をクリックすると取り消されます

クリックするとリアルタイムに集計されます

浜辺美波が日報を投稿してくれるSlackコマンドをつくりました

2020-04-15T12:01:05+09:00

私は日報を忘れてしまう人間です。
もう少し正しく言うとめんどくさく思ってしまう人間です。

今日閉じたIssueと取り組んでいるIssueを全部コピペしてきたりとか。

今働いているチームのSlackには #nippo チャンネルがあり、メンバーはみんなここにその日やったこととかを投稿しています。

今回つくったのはそんな毎日の日報をもう少し楽ちんにして、本質である"振り返る"という行為だけに留めたいと言うものです。
言い換えると何をやったかは自動で出力できるようにしたい。

その名も「浜辺美波」です。

/nippo 今日は足が冷えて冷えて大変でした。

とうつと#nippoにこのように投稿してくれます。

仕組みとしてはSpreadSheetにそれぞれのメンバーのSlackのユーザーIDとGitHubIDを保存してあり、GASでSlack commandから送られてくるユーザー情報と照会してGitHubから関連のIssueを取得してきています。
GitHub GraphQL API初めて使いましたが便利すぎてびっくりしました。Explorerが本当に便利。

function doPost(e) {
  var spreadsheet = SpreadsheetApp.openById('SpreadSheetのID');
  var sheet = spreadsheet.getActiveSheet();

  var username = e.parameter.user_name;
  var comment = comment = e.parameter.text;
  var row = findRowForSlackUsername(sheet,username);
  var githubId = sheet.getRange(row, 2).getValue();
  var freeeId = sheet.getRange(row, 3).getValue();

  if(comment.length === 0) {
    return ContentService.createTextOutput("⚠️`/nippo 振り返りコメント`の形式でコメントも書いて！");
  }

  if(githubId.length === 0 || freeeId.length === 0) {
    return ContentService.createTextOutput("⚠️あなたのアカウント情報がまだちゃんと用意されてないみたい。超絶イケメンなimjnに聞いてみて！");
  }

  var resForClosed = fetchIssues(githubId, "closed");
  var resForWIP = fetchIssues(githubId, "open");
  var closedIssues = JSON.parse(resForClosed.getContentText()).data.search.edges;
  var wipIssues = JSON.parse(resForWIP.getContentText()).data.search.edges;
  var issuesClosedToday = getIssuesClosedToday(closedIssues);
  var outputString = `今日もおつかれさまでした。 ${githubId}の日報です💙\n\n`;

  outputString += `💪 *今${githubId}が取り組んでいるIssue* ↓\n`

  if(wipIssues.length > 0) {
    var wipIssueString = "";
    for(var i=0;i ${githubId}がアサインされているタスクはありません。タスク待ち！`;
  }

  outputString += `\n\n🤗 *今日${githubId}がCloseしたIssue* ↓\n`

  if(issuesClosedToday.length > 0) {
    var issueString = "";
    for(var i=0;i ${githubId}が今日CloseしたIssueはありません`;
  }

  outputString += `\n\n✍️ *振り返りコメント* ↓\n`

  outputString += '```' + comment + '```';

  const webhookUrl = "Slackのwebhook URL";
  const data = { 
    'attachments': [{
      'color': '#0086CC',
      'text' : outputString,
    }]
  };

  const payload = JSON.stringify(data);
  const options = {
    'method' : 'POST',
    'contentType' : 'application/json',
    'payload' : payload
  };

  UrlFetchApp.fetch(webhookUrl, options);
  return ContentService.createTextOutput("#nippoに投稿したよ！❤️");
}

function findRowForSlackUsername(sheet,val){
  var lastRow=sheet.getDataRange().getLastRow();

  for(var i=1;i<=lastRow;i++){
    if(sheet.getRange(i,1).getValue() === val){
      return i;
    }
  }
  return 0;
}

function fetchIssues(githubId, status) {
  const query = 
'query {\
   search(last: 10, query: "org:オーガニゼーションID is:issue is:' + status + ' assignee:' + githubId + ' sort:updated-desc", type: ISSUE) {\
     edges {\
       node {\
         ... on Issue {\
           title\
           url\
           closedAt\
         }\
      }\
    }\
  }\
}';

  const option = buildGraphqlRequest(query);
  return UrlFetchApp.fetch("https://api.github.com/graphql", option);
}

function buildGraphqlRequest(graphql) {
  return {
    method: "post",
    contentType: "application/json",
    headers: {
      Authorization: "bearer GitHubのアクセストークン",
    },
    payload: JSON.stringify({ query: graphql }),
  };
}

function getIssuesClosedToday(issues) {
  var now = new Date();
  var closedIssues = [];
  for(var i=0;i



せっかくfreeeも使ってるのでまた時間がある時に勤務時間とかも含められるようにしたいと思います。

今月中に旅行領域で新規プロダクトを出します。こんなご時世ですが、がんばる。



CloudFunctions+SlackAPIを使って定期的にユーザ数を通知できるように自動化してみた
2019-08-28T18:18:13+09:00
最近、作ったWebサービスで手動でユーザ数などのデータを取得していたけど、

めんどくさくなったので、いまさらながらSlackAPIを使ってみた。

こんな感じで通知されます！

ユーザ数とか登録データ数とかを通知♪

いまは毎日0:00に通知するようにしているので、毎日たのしみ(´ω｀)



全体の流れ

全体の流れはこんな感じ


Slack APIでSlack Appを作成
作成したAppでIncoming Webhooksを有効にする
Incoming WebhooksにWebhook URLを追加する
取得したWebhook URLを使ってFunctionsからメッセージを送る


1. Slack APIでSlack Appを作成

まずは、「 https://api.slack.com/apps 」にアクセス



「Create New App」をクリックすると、作成ダイアログが表示されるので、

アプリ名を入力して、「Create App」をクリック



これでSlack Appが作成できた(´ω｀)

2. 作成したAppでIncoming Webhooksを有効にする

Web APIでメッセージを投稿できるように設定するために、

作成したAppのSettingsのBasic Infomarionにある「Incoming Webhooks」を有効にする



クリックするとこんな感じ。デフォルトはOFFなので、ONに切り替える。



これで有効になった(´ω｀)

3. Incoming WebhooksにWebhook URLを追加する

有効にしたので、どのチャネルに通知するかを設定していく

有効すると、下の方に「Add New Webhook to Workspace」があるので、それをクリック



クリックすると、チャネルの選択画面が出るので、投稿先を設定して、「許可する」をクリック。

投稿先はチャネルだけじゃなく、個人宛も設定できます(´ω｀)



許可すると、こんな感じの画面に。

WebhookURLが追加されるので、「Copy」を押して、コピーしておく



4. 取得したWebhook URLを使ってFunctionsからメッセージを送る

取得したWebhookURL宛にメッセージを送ればOK

CloudFunctionsのコードはこんな感じ。

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("こんにちは");
  });


sendSlack(text)のwebhookURLに、

上でコピーしたWebhook URLをはりつけてください。

こんな感じで「こんにちは」される(´ω｀)



あとは、Function内でFirestoreとかを呼び出して、データを収集・集計すればOKヽ(=´▽`=)ﾉ

メッセージ送るだけならすごく簡単(´ω｀)

ほかにもいろいろ

ほかにもパラメタを変えれば、色を変えたり、画像を送れたりできるよう！！

- SlackのIncoming Webhooksを使い倒す - Qiita

公式ドキュメントだとこちら

- Incoming Webhooks | Slack

また、こちらの記事でも書いたようにジョブの無料枠は、Googleアカウントごと...

遊びやテスト用にいくつも作ると課金されはじめるので注意が必要です...

- Cloud Functions for Firebaseのcronみたいな定期実行を試したら簡単だった - Qiita

以上!!

こんなのつくってます！！

最近、積読用の読書管理アプリ「積読ハウマッチ」をリリースしました！

積読ハウマッチは、Nuxt.js+Firebaseで開発してます!



もしよかったら、遊んでみてくださいヽ(=´▽`=)ﾉ

要望・感想・アドバイスなどあれば、

公式アカウント(@MemoryLoverz)や開発者(@kira_puka)まで〜


OGP取得用クローラのユーザーエージェントを、TwitterやLINEなど8サービスで調べてみた
2019-03-29T23:00:19+09:00
SNSなどで、投稿されたWebサイトのリンクがリッチに表示される「OGP (Open Graph Protocol)」機能。

Webサイトに簡単なメタタグを組み込むだけでOGP表示されるため、対応するサイトは増えています。

しかし、OGP用のメタタグは一般ユーザーからは見えないし、サムネイル動的生成などでサーバーに大きな負荷がかかることもあるので、できればOGP取得用クローラ以外にはメタタグを生成しないようにしたいもの。

そこで、UA(ユーザーエージェント)からクローラによるアクセスか判定するために、実際にOGP取得用クローラのUAを記録して調べてみました。

結果

2019年3月28日に記録された文字列をそのまま掲載しています。




  サービス
  User Agent




  Twitter
  Twitterbot/1.0


  Facebook
  facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)


  LINE
  facebookexternalhit/1.1;line-poker/1.0


  メッセージ(iOS)
  Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_1) AppleWebKit/601.2.4 (KHTML, like Gecko) Version/9.0.1 Safari/601.2.4 facebookexternalhit/1.1 Facebot Twitterbot/1.0


  Discord
  Mozilla/5.0 (compatible; Discordbot/2.0; +https://discordapp.com)


  Skype
  Mozilla/5.0 (Windows NT 6.1; WOW64) SkypeUriPreview Preview/0.5


  Slack
  Slackbot-LinkExpanding 1.0 (+https://api.slack.com/robots)


  Plurk
  Mozilla/5.0 (compatible; PlurkBot/1.0; +https://www.plurk.com/) Firefox/61.0




もし他にもOGP表示に対応しているサービスをご存知でしたら、@barley_uralまでご連絡いただければ調査して追記していきます。

おわり


SlackのファイルをGASで自動削除する
2019-03-06T00:48:44+09:00
Unityゲーム開発者ギルドというコミュニティを運営しているんだけど、

無料版で使っているSlackのファイルストレージがギリギリになってた。




  Unityギルドについてはこちら -> https://twitter.com/naichilab/status/1061929632037892096


このままじゃファイルアップロードできなくなっちゃうので、古いファイルは自動削除されるようにした。

とりあえず30日以上経過したファイルは問答無用で消していこう。

（Slackのメッセージも今のペースだと２週間たらずで消えちゃうから30日経過したら削除で十分だろうと判断）

GASで下記スクリプトを作成。プロジェクトのプロパティでレガシートークンをセットして１時間トリガーを仕掛けた。


  １時間ごとに起動して、３０日以上経過したファイルを１０件検索＆削除。


削除後の反映は最大48時間かかるらしいので様子見〜。

function deleteOldFiles() {
  var res = filesList(30, 10);
  if(res.files.length == 0){
    Logger.log("削除対象ファイルは見つかりませんでした。");
    return;
  }

  res.files.forEach(function(file){
    Logger.log("削除します。 ID=" + file.id + ", Size=" + file.size);
    filesDelete(file.id)
    Utilities.sleep(50);//sleep 50msec
  });
}


//ref. https://api.slack.com/methods/files.list
function filesList(days, count){
  var params = {
    token: PropertiesService.getScriptProperties().getProperty("SLACK_ACCESS_TOKEN"),
    ts_to: elapsedDaysToUnixTime(days),
    count: count
  }
  return execute('files.list', params);
}

//ref. https://api.slack.com/methods/files.delete
function filesDelete(id){
  var params = {
    token: PropertiesService.getScriptProperties().getProperty("SLACK_ACCESS_TOKEN"),
    file: id
  }
  return execute('files.delete', params);
}

function execute(apiName, params){
  var options = {
    'method': 'POST',
    'payload': params
  }
  var res = UrlFetchApp.fetch('https://slack.com/api/' + apiName,options);
  return JSON.parse(res.getContentText());
}

function elapsedDaysToUnixTime(days){  
  var date = new Date();
  var now = Math.floor(date.getTime()/ 1000); // unixtime[sec]
  return now - 8.64e4 * days + '' // 8.64e4[sec] = 1[day] 文字列じゃないと動かないので型変換している
}



slack流量計の新バージョンをリリースしました(1/13追記)
2019-01-04T00:01:00+09:00


「運営者ギルド」で使用している、どのチャンネルで活発に議論されているかを可視化するツール「slack流量計」を年末にバージョンアップした話を書こうかと思います。

運営者ギルドって？

Webサービスの運営に必要なあらゆる知見を共有できる場として、Webサービス運営者達によって作られたコミュニティです。主にslackを用いて情報交換をしています。

slack流量計とは？

slack APIから書き込みの履歴を取得して日別・チャンネル別に書き込みの数を集計してslackにグラフとテキストで投稿するアプリケーションです。

(ギルドでは呼称が変わりました。)

旧バージョンで使っていた技術

旧バージョンではSpringMVCのタスクスケジューラを使用してバッチでサーバサイドでグラフを生成していました。

- Java

- Spring MVCのタスクスケジューラ

- JFreeChart(グラフ生成ライブラリ)

- MySQL

新バージョンで使っている技術

毎日定時に実行するのにnode-cronを使っています。今回はExpressでAPIを用意してクライアントサイド(chart.js)でグラフを生成し、puppeteerを使ってスクリーンショットを撮って画像を投稿するという形をとっています。

- NodeJS

- Express

- TypeScript

- node-cron

- chart.js

- puppeteer

- slack/client

バージョンアップ

バージョンアップ作業


製造期間：12/28～30
運用・改修：12/31～

Javaからの移行なのでロジックは変えていませんが、ロジック以外はゼロから作っています。


バージョンアップした理由


いくつかデプロイしているJavaアプリケーションからNodeJSアプリケーションに移行を終えたかった
slackに投稿する処理で文字数制限を超えて失敗するケースがあるので改修したかった


苦労した点


chart.jsのプラグインでカラーセットを使っているが、実際に生成すると見辛い色が存在した。
puppeteerの動作で描画待ちをしていなかったため、グラフ描画前にスクリーンショットを撮ってしまう現象が発生。


自動表彰機能追加しました(1/5追記)

あんどさんの「WEB表彰」をお借りして自動で週1回表彰する機能を組み込んでみました。




puppeteerのpage.type()でフォーム入力できるから簡単♪

→入力直後にフォーカスを奪われて入力できなくなる

→page.evaluate()でDOM要素に直接書き込み。
環境によるが、DOM書き換えだけでは描画が走らないことが判明

→要素にフォーカスしてからkeyupイベントを送ることで対処


await page.evaluate( (str)=>{
                 document.querySelector('input#receiver.input').setAttribute('value',str[0])
                 document.querySelector('#certificate_body.input').textContent = str[1]
                 document.querySelector('input#sender.input').setAttribute('value','運営者ギルド勢いランキング')
             },str)
await page.focus('#certificate_body.input')
await page.keyboard.up('Shift')



1行22文字しか入力できないのでsubstring()


パンチカード実装しました(1/13追記)



折れ線グラフと同じようにAPIを用意してchart.jsで描画しています。

今後の展望

週1回、チャンネルごとではなくユーザごとの書き込み数で「表彰」したら面白そう？(実装済み)

- GitHubのコミット履歴に昔あったパンチカードのグラフを実装したい(実装済み)

ソース

GitHub


100個入ってわかった! 人が集まるSlackコミュニティ運営術
2018-12-14T02:28:39+09:00
この記事はCrieitの「アドベントカレンダー Advent Calendar 2018」の14日目の記事です。

昨日はまんじゅ（´ん｀）＠CoderDojo駄Mentorさんの論理を煮詰めた正論は常に正しいだろうけど、時によっては鋭利なナイフにもちろんなるぞでした！

はじめに

駆け出しエンジニアのかしい(@rubys8arks)です。

個人開発を始めた頃、情報をもとめて地域のもくもく会やネット上のオープンコミュニティなどのSlackに入っていたら、気づいたら100個ものSlackに参加していました…。

いろんなSlackに参加する中で見えた、「こんなSlackは参加したい」という盛り上がっているコミュニティの特徴をまとめました。

1. Slack参加のハードルを低めにする

だれでもつよいエンジニアとつながりたいですが、つよいエンジニアはそうはいません。

「rubyに詳しい人」「毎日ブログを更新できる人」「バズった経験がある人」など、母数が少ない人をターゲットにSlack参加者を募集すると集まりにくくなります。

「個人開発をはじめたい人」「プログラミングを勉強しはじめた人」など、初心者歓迎にした方がコミュニティの参加人数は多くなります。

基本的にはコミュニティ全体の参加人数が多い方が、コミュニティで積極的に発言してくれるメンバーも多くなります。

※ 有料サロンなど、全メンバーのコミットメントを高く管理したい場合は別

2. 分報はつくった方が定着率高め

分報とは、「自分が今かんがえてること」ならなんでもOKな個人チャンネルです。

Slackで簡単に「日報」ならぬ「分報」をチームで実現する3ステップ〜Problemが10分で解決するチャットを作ろう

「途中からつくる」ということはあまりないと思うので、最初に「分報を作ってください」というルールにした方がよいです。

分報チャンネルへの加入は任意なことが多いですが、全メンバーの割合に対して見る人が少なくなるので反応が少なくなる懸念もあります。

「反応ない」→「書かない」→分報つくった意味ない

になるので、自己紹介に分報を貼ってもらうなど、新規チャンネルができた場合の導線があるとよいです。

反対に、コミュニティが盛況でメンバーが増えてくると、メンバー数の分だけ分報が作られるので全部追うのが難しくなります。

その場合は、人気ランキング（絵文字のリアクション数などで判断）などをつくって、見るべき分報をある程度運営側でピックアップしてあげると、ライトなメンバーにもやさしいつくりとなります。

3. カスタム絵文字は随時追加して充実させる

コメントするのはめんどくさくても、誰かが押したリアクションに追従するのはカンタンです。

コミュニティにおいて「反応がない」→「人が来なくなる」なので、旬のアイコンやネットスラングの日本語リアクションを用意して、みんなが反応しやすくするのは大事です。



4.  Slackボットを活用してコミュニケーションを盛り上げる


特定のワードがコメントされたら特定のリアクションをする (例：誰かが「おめでとう！」と言ったらくす玉のGIFが流れる)
特定の絵文字がリアクションされたら特定のチャンネルに流す （例：誰かが「有益」絵文字をつけたら「有益」チャンネルに流す）
新メンバー、新チャンネルができたら特定のチャンネルに流す （例：新メンバー、新チャンネルお知らせ用のチャンネルをつくっておく）
特定のサイトからRSSでチャンネルにニュースを流す（ただこれは多すぎると結局読まなくなるので意味なし。記事を選別しつつ、手動でコメントしてあげると興味を惹かれる。）

など、作業をSlackボットで自動化しておくとコミュニティ運営がラクになります。

自分ではSlack botを作れていないので、下記のサイトなどを参考にするとよいかと思います。

Slack Botの種類と大まかな作り方 #Slack - Qiita


5. Slackの創始者が積極的に発言する

Slackワークスペースの作成者もしくは運営コアメンバーが顔を出してくれないと、「もうこのSlackワークスペースは動いてないのかな」「やる気なくなっちゃったのかな」という感じがします。

忙しい場合は一言「しばらく離れます」と言ったり、場合によっては他の人に管理を譲る、コミュニティを閉じるなど責任のある対応が必要です。

6. リアルイベントを開催する

実際にメンバーと会って話すことができると、やはり格段に親近感が湧いてオンラインでも交流しやすくなります。

イベントはconnpassに登録するようなテーマを決めた勉強会でもよいし、単純にメンバー同士の交流会やもくもく会でもよいと思います。

ただ、「運営が大変・・・」「だんだん人が集まらなくて開催されなくなる…」というのもあるあるです。

開催頻度や開催日程を固定して参加しやすくしたり、テーマを設定してメンバーやコミュニティ外の人の興味を惹けるようなイベントを作っていくのが大切かと思います。

7. 内輪な雑談しかないのはツライ、励ましあいつつ知見を提供しよう

雑談チャンネルで盛り上がるのもコミュニティでは大切です。

ただ、「○○さんが××らしい」といった内輪ネタや、アニメ・ゲームなどの「前提知識がないとわからないネタ」が多いと新規参加者には入りづらいです。

基本的には「有益な情報（ブログ記事だったりニュースだったり）」や「参加者の悩みや喜びに対する共感・励まし」が大事だと思います。



まとめ

キリストは「与えよ、さらば与えられん」と言いましたが、コミュニティ運営においても似たようなことが言えます。

自分がやってほしいこと（積極的な発言や反応、アドバイスなど）をまずメンバーに自分がやってあげると、「私もやってみようかな」という気にメンバーがなりやすいです。

あなたのSlackコミュニティが活発になることを願っております！

明日はyahsan2さんが最近リリースしたサービスpoiit(ポイート)について書いてくれます！


15分でできる！Slackのオープンコミュニティの作り方
2018-12-12T17:46:44+09:00
この記事はCrieitの「アドベントカレンダー Advent Calendar 2018」の12日目の記事です。

昨日はfk2000さんのHugoでブログ付きのポートフォリオサイトでした！

はじめに

駆け出しエンジニアのかしい(@rubys8arks)です。

技術書典でアンソロジー（合同誌）を出す関係で、Slackのコミュニティを新しく作成しました！

そのときに気づいたSlackのワークスペース作成の手順とTipsをまとめます。

1. ワークスペースの作成

とにもかくにもSlack公式から新しいワークスペースを作成します。

メールアドレスを入力すると確認コードが届くので、入力して作成を完了します。

ワークスペース名・ワークスペースURLは後から変えられますが、わかりやすいものがよいです。



2. チャンネルの作成

デフォルトではgeneral(一般)とrandom(雑談)チャンネルが作成されます。

Gmailで作成する場合、ワークスペースの設定言語を日本語/英語にしておかないとデフォルトのチャンネル名や説明文が英語以外で作成されてしまうので注意。

（私はGmailをフランス語設定にしていたので、チャンネルがフランス語で作成されてしまい焦りました）



よくあるチャンネル

- ランディングページ(readme)：Slackの目的、コミュニティのガイドラインなどを説明

- 自己紹介(member_profile)：初めて来た人がまず挨拶する場所

立ち上げの段階でチャンネルがありすぎても使い分けが難しいので、テーマに応じて3〜5つ程度あれば十分かと。

チャンネルごとのトピックも念のため設定しておくとわかりやすいです。

3. デフォルトチャンネルの設定

Slackに入ると同時にメンバーが自動的に入室できるチャンネルを設定しておきます。

後からチャンネルに個別に入室するのはめんどう＆入り忘れる人が必ず出るので、メンバーをInviteする前にやっておくとよいです。

基本的には分報（メンバーの個人チャンネル）以外のメインのチャンネルを設定しておけばOKかと。

モバイルアプリからだと設定できない？ので、デスクトップから設定します。

もしくは、https://ワークスペース名.slack.com/admin/settings から設定画面にアクセスできます。



4. ワークスペースのアイコンの設定

設定しなくてもワークスペースのイニシャルが自動で設定されますが、ある方が愛着が湧きます。

デザインに凝る必要はないので、フリーアイコンなどを使用すればOK。

こちらもモバイルアプリからだと設定できない？ので、デスクトップから設定します。

もしくは、https://ワークスペース名.slack.com/admin/settings から設定画面にアクセスできます。



5. カスタム絵文字(日本語リアクション)の設定

「すごい！」「ありがと」など、日本語リアクションのカスタム絵文字はSlack上のコミュニケーションを円滑にしてくれます。

1個1個設定するのは大変なので、既存のSlackグループから一括でコピーさせてもらうのがオススメ。

基本的にはこの記事のとおりにやれば、カスタム絵文字のExport/Importができます。

Slackの絵文字(emoji)を一括エクスポート＆インポートする

記事内でオススメされているChrome拡張機能ですが、カスタム絵文字が0個の状態だと表示されなかったので、テストで1個絵文字をアップロードするとよいです。



6. メンバーをInviteする

下準備完了！ということで、いよいよメンバーをInviteしてSlackコミュニティを立ち上げます。

自己紹介してもらったら、カスタム絵文字だけでなくコメントもしてあげるとウェルカム感が強くなります。

まとめ

Slackコミュニティの作成って、「Slackのワークスペースつくるだけでしょ？」と思いきや、いろいろ設定することがあります。

初めてSlackのワークスペースを作る場合は設定がこんがらがるので、余裕をもって作業した方がよいです。

あなたのSlackオープンコミュニティが活発になることを願っています！

明日はまんじゅ（´ん｀）＠CoderDojo駄Mentorの記事です！


初めてSlack appをつくって審査通すところまでやった知見を晒す
2018-10-24T17:18:45+09:00
たまたま機会あってSlack appを作らせていただくことになったのですが、

思ってた以上に大変だったのでそこで得られた知見をいくつか簡単にシェアしておきます。

ちなみに自分はhubotとかbotkitとかで簡単なbot作ったことあるレベルで、

とりあえずtoken発行して環境変数突っ込んでスクリプト動かしたらそれっぽいやつできるんでしょ？、くらいのノリからのスタートだったので正直いろいろつっこみどころありそうではあるのですが、何かあれば是非インプットいただければと思います :pray:

今回作ったもの



ホメルくん

詳細なコンセプトや利用方法はこちらの記事に移譲しますが、

ざっくり三行で説明すると、


Slackのカスタム絵文字って企業毎の文化を反映したものになってる
上記のような絵文字がたくさんついたメッセージや発言者を組織内でもっとオープンにすることで、称賛された人はモチベーション上がるし、組織づくりにもよい影響与えられそう
というわけで、特定の絵文字がついたメッセージを特定のチャンネルに転送してくれて、毎月絵文字ごとの発言者のTop3を表彰してくれるSlackアプリがこちら


という感じになります。

機能的にもかなりシンプルで、


絵文字、チャンネルの登録
指定絵文字がリアクションされた場合、指定チャンネルへのメッセージの転送
毎月リアクション絵文字獲得数Top3を集計しメッセージを送る


くらいで、まぁ正直こんなん半日くらいでさくっと終わるだろ、とそんなふうに考えていた時期が私にもありました :innocent:

実装編

Slack appの作り方 (ざっくり)

普通に自分のワークスペースでだけ動くbotつくる、というだけであれば、ここに書いてあるとおりにSlack appつくって Bot OAuth Access Token コピーするだけで大体は事足りると思うのですが、

(↑はhubot用の解説ですがtoken取得するという意味ではあまり変わらないはず)

いろいろなワークスペースで利用されることを前提とする場合、ちゃんとOAuthを利用してtokenを取得できる必要があったり、Slash CommandsやInteractive Components(ボタンとかそういうやつ)利用したい場合は別途設定が必要だったりと、かつて¹に比べてかなり設定が煩雑になっており、

そのあたりの日本語のリソースもあまりみかけないので、正直このあたりどうするのがいいのかよくわからんという人も多いのではないでしょうか。

一応Slack appの主な特徴として以下の6つがあるのですが、


Incoming Webhooks
Interactive Components
Slash Commands
OAuth & Permissions
Event Subscriptions
Bot Users


細かいことはおいておいて、とりあえず全体感掴むためには、


OAuth周り


Using ngrok to develop locally for Slack

Slash Commands / Interactive Components周り


Message Buttons with Node.js



上記チュートリアルを一通りやると、設定周りからコードの雰囲気までは大体理解できるのではと思います。(英語 + Node.jsになってしまいますが)

Events APIも大体Slash CommandsとInteractive Componentsと同じような雰囲気なのですが、一点、URL設定するタイミングでそのURLがちゃんとレスポンス返さないとエラーになったりするので(refs: https://api.slack.com/events-api#subscriptions) ご注意ください。

(その他詳細な解説は今回は時間の関係上割愛します:bow:)

実装でハマったところ

APIでかゆいところに手が届かない

これ全体通して調査に時間かかったり手戻りする原因になったりしたのですが、そもそもの方針として、セキュリティ観点からなるべくアプリ側にデータ持たないで実装したいというのがあり、APIで完結できるものはなるべくAPIで完結させようと思っていたので、

たとえば、毎月絵文字の集計をするという要件を満たす方法はいくつかあると思うのですが、APIで特定の絵文字がついたメッセージを取得してきてそれを集計できるのであればそれが楽かなと思い、

reactions.list method | Slack

ぱっと見ちょうどいいAPIがあるのでこれ使えばいけるだろ、と思ってよくよくドキュメントをみてみると、

絵文字や期間でフィルタリングできなさそうで、このAPIだけでやろうと思えばできなくはなさそうですが無駄にリクエスト投げまくらないといけないのと、APIのRate Limitや条件のハンドリングなどやたらと煩雑になりそうだったため、結局リアクションの追加/削除のイベントをsubscribeしてそれをDBにレコードとしてつっこんで集計するようにしてます。

また、設定する絵文字の存在確認をするために絵文字一覧とか取得したくなると思うのですが、

emoji.list method | Slack

ぱっと見ちょうどいいAPIがあるのでこれ使えばいけるだろ、と思って実装に組み込んでみるとほとんどバリデーションで弾かれてしまい、何だこれと思ってよくよくドキュメント呼んでみると、どうもカスタム絵文字しか返してくれないらしく、そもそもコンセプト的にはカスタム絵文字設定してほしいのでカスタム絵文字限定とかにしても良かったのですが、一旦ここのバリデーションは特になしとしました (設定完了後にメッセージで絵文字返すのでそこでちゃんと絵文字になってなければ設定ミスってても気づくはず...)

などなど、意外とAPIだけで完結させようと思うと難しく、アプリケーション側でなにかしらデータ持つなどしてうまいことやらないといけないパターンが多そうという印象でした。

なんとなくで着手すると意外とそれできないんかいというのでハマったりするのでちゃんとドキュメント読んでから作業することをおすすめします:innocent: (当たり前)

絵文字エイリアス問題

特定の絵文字でリアクションされたかどうか判別するために、 Events APIでreaction_add、 reaction_remove イベントをsubscribeして処理をハンドリングするようにしているのですが、

絵文字のエイリアスが設定されている場合かつエイリアスの絵文字文字列でリアクションした場合、エイリアスではなくオリジナルの絵文字文字列で返ってきます。

(ex: :ok_woman: -> :woman-gesturing-ok:)

せめてエイリアスあった場合にエイリアスも一緒に返してきてくれると嬉しかったりするのですが、そんな親切仕様ではないので、特定の絵文字に対してなにかしらハンドリングしたい場合は真面目にやるならきちんとこのエイリアスまわりのマッピングを何かしらアプリケーション側でもつ必要がありそうです。

(cf: How can I get the FULL list of slack emoji through API? - Stack Overflow)

とりあえず今回の実装ではエイリアス問題には対応できてません:cry:

publicなチャンネルしかみれないようにscope設定してるのになぜか一部privateなチャンネルのメッセージが見れてしまう問題

これマジで困りました。

具体的に言うと、

channels.history method | Slack

このAPIでリアクションついたメッセージの詳細取りに行ってるのですが、


  This method returns a portion of message events from the specified public channel.


↑のように、publicチャンネルのメッセージしか返さないよと言ってるのに何故かとあるprivateチャンネルのメッセージだけ取れてしまうという、しかも全然再現性なくて他のprivateチャンネルでは発生せず、おそらくSlack側の何かしらのバグなのではないかと思ってます。

とはいえうっかりprivateチャンネルのセンシティブなメッセージがオープンになるみたいな事故は起きてもらっては困るので、あれこれ手を動かした結果、

conversations.list method | Slack

このAPIを叩いてpublicチャンネルの一覧を取得して、一覧に含まれていなければprivateチャンネルとみなして処理を通さない、という実装に落ち着きました。

ちなみに似たような名前の

channels.list method | Slack

こっちだと件のprivateチャンネルも一緒に返ってきてしまって使えません。

(そもそもよくみると Don't use this method. Use conversations.list instead. って書いてあったりするのですが、もう少しわかりやすくしておいてくれても良い気がする...)

絵文字やチャンネルをどうやって登録させるか

どの絵文字をトリガーにして、どのチャンネルに転送するかをユーザーが設定できる必要があり、(デフォルトは絵文字: :+1:、 チャンネル: #general)

普通にSlash Commandsで登録するでも良かったのですが、

ドキュメントいろいろ眺めていたところ Dialogs なるものを発見、簡単に言うとSlack上でフォーム的なUIを実現できるものです。

バリデーション等考えるとUX的にはこちらのほうが良さそうな気がしたので(エラー表示とか)

とりあえず実装してみたのですが、

チャンネル選択をselectにした部分は良かったものの、絵文字入力用のテキストフォームで絵文字補完が効かず、これなら普通にSlash Commandsのほうが普通に補完効くし良さそうということで、結局Slash Commandsでの設定に落ち着きました。

(正直なにをいってるか文字ベースだと超わかりにくいのですが、実例はホメルくんをインストールしてもらって /homeru setting とか叩いてもらえればわかるかと思います:bow:)



Dialogs自体は使い所を見極めればかなり使える機能ではと思います。

Incoming Webhookの挙動

メッセージの転送をするために特定のチャンネルに対して何かしらメッセージ送れる機能を実現する必要がありますが、

Legacyな方のIncoming Webhooksは昔からよく使っていて、適当なサーバー側の処理結果をSlackに飛ばすみたいなことをよくやっており、チャンネルや発言者の設定等いろいろ細かく指定できたので、とりあえずIncoming Webhookつかえば大丈夫だろうと実装してみたのですが、

どうもLegacyじゃない方のIncoming Webhookはチャンネル等の指定ができないことが判明し、


  You cannot override the default channel (chosen by the user who installed your app), username, or icon when you're using Incoming Webhooks to post messages. Instead, these values will always inherit from the associated Slack app configuration.


(refs: https://api.slack.com/incoming-webhooks)

チャンネル自体の変更もAPIではできなさそうだったので今回の用途としてはIncoming Webhookは使えないことが判明。

あれこれ調べた結果、普通にbotであれば特にチャンネルにinviteしていなくてもメッセージ送信できるようだったのでそちらで回避しました。

メンション飛ばさずに @username をメッセージに含めたい

Slackでは基本的に @username や #channel_name などはそのままの文字列ではなくIDとして渡ってきます。 (ex: U37UED2RL)

これらを利用してメッセージにユーザー名やチャンネル名を含めようとした場合、以下のような記法を利用すると、Slackがよしなに変換してくれます。

ex)

- <@U37UED2RL> => @uehara

- <#C7F5U1EKE> => #general

(refs: Basic message formatting | Slack)

ホメルくんのメッセージ転送機能で、誰が発言したかもわかるようにユーザー名も転送メッセージに一緒に含めたかったのですが、単純に↑の機能を使うと毎回メンション飛んできてこれはうざいという結論になり、なんとかメンション飛ばさないでユーザー名表示できないかあれこれ調べた結果、

users.info method | Slack

このAPI叩けばユーザー名取得できることが判明、よしこれでいけると思ったのですが現実はそう甘くなく、

{
    "ok": true,
    "user": {
        "id": "W012A3CDE",
        "team_id": "T012AB3C4",
        "name": "spengler",
        "deleted": false,
        "color": "9f69e7",
        "real_name": "Egon Spengler",
        "tz": "America/Los_Angeles",
        "tz_label": "Pacific Daylight Time",
        "tz_offset": -25200,
        "profile": {
            "avatar_hash": "ge3b51ca72de",
            "status_text": "Print is dead",
            "status_emoji": ":books:",
            "real_name": "Egon Spengler",
            "display_name": "spengler",
            "real_name_normalized": "Egon Spengler",
            "display_name_normalized": "spengler",
            "email": "[email protected]",
            "image_24": "https://.../avatar/e3b51ca72dee4ef87916ae2b9240df50.jpg",
            "image_32": "https://.../avatar/e3b51ca72dee4ef87916ae2b9240df50.jpg",
            "image_48": "https://.../avatar/e3b51ca72dee4ef87916ae2b9240df50.jpg",
            "image_72": "https://.../avatar/e3b51ca72dee4ef87916ae2b9240df50.jpg",
            "image_192": "https://.../avatar/e3b51ca72dee4ef87916ae2b9240df50.jpg",
            "image_512": "https://.../avatar/e3b51ca72dee4ef87916ae2b9240df50.jpg",
            "team": "T012AB3C4"
        },
        "is_admin": true,
        "is_owner": false,
        "is_primary_owner": false,
        "is_restricted": false,
        "is_ultra_restricted": false,
        "is_bot": false,
        "updated": 1502138686,
        "is_app_user": false,
        "has_2fa": false
    }
}


こんなレスポンス返ってくるのですが、 user.profile.display_name と user.profile.real_name の2種類があり、 user.profile.display_name が設定されている人は display_name、そうでない場合は user.profile.real_name を表示するというようにしないとSlack上の表示とずれるので注意が必要です。

ちなみに小ネタとして、 attachments の author_name フィールドは <@U37UED2RL> でもメンションにならないのですが、今回は表示上の問題で利用は断念しました。

(refs: Attaching content and links to messages)

同一チャンネルのメッセージは ts がユニーク

Slackでメッセージデータ取得する際、

{
    "type": "message",
    "channel": "C2147483705",
    "user": "U2147483697",
    "text": "Hello world",
    "ts": "1355517523.000005"
}


こんなかんじでデータが取れるのですが、 ts はtimestampの略なんだろうなとは思いつつ、ほぼ同時に同じメッセージ送った場合、かぶったりしないのか、判別可能なのか、仕様どうなってるんだと思って調べたときに地味に言及している部分見つけるの苦労したので一応ソースを貼っておきます。


  ts is the unique (per-channel) timestamp.


(refs: message event | Slack)

結論としては ts はチャンネルごとにユニーク性が担保されるとのこと。

アプリ公開編

さて、そんなこんなで思いの外時間かかりつつも一応動くようになったホメルくんですが、そのままでは他のワークスペースにシェアできません。

とりあえず公開してみる

とりあえず公開して他のワークスペースで利用してもらうというだけであれば、

アプリ設定画面の左カラムに Manage Distribute というリンクがあるので、そのページ内の

Share Your App with Other Teams ブロックの Activate Public Distribution ボタンを押すとシェア用のURLが発行され、これをクリックすると他のワークスペースにアプリをインストールすることが可能です。

ちなみにURLに利用するスコープがパラメータとして付与されており、スコープを変更するとURLも都度変更になるので、パーミッション周りをいじったあとは注意が必要です。

(実際の設定ではなくURLパラメータのスコープが優先される模様、不要なスコープ要求したり逆に足りないといったことが起こりえます)

審査に出す

とりあえず上記だけで他のユーザーに使ってもらえる状態にはなったのですが、

それだけの場合、アプリのページやアプリインストール時のページに以下のような警告文言が出ます。



またApp Directoryのページで検索しても出てきません。



知り合いにだけ使ってもらうレベルであれば問題ないですが、

ちゃんと一般にリリースしようと思った場合はSlackにアプリの審査してもらう必要があります。

審査について

審査に出すためにはいくつか必須で設定必要な項目があり、アプリ設定のBasic Informationページで Display Information と Your Contact Information の入力、OAuth & Permissionsページでscopeを有効にしている場合はscope毎にそのscopeを利用する理由の入力、その上で、Manage Distributionページの Submit to the Slack App Directory ブロックにある鬼のような大量のチェックボックスをひたすらクリックしまくると晴れてSubmitできるようになります。

(refs: Submitting apps to the Slack App Directory | Slack)

Display InformationのTips


Background colorはあまり明るすぎると文字が見えにくいとの理由でエラーになる
Long descriptionはSlack記法が使える(**で太字など)


審査指摘実例集

そんなこんなで審査に出すとその日のうちに結果が返ってきました (早い！)



こんな感じで項目ごとに心温まるメッセージをいただけます。Thanks!

以下、突っ込まれたところを列挙します


s/slack/Slack/g


説明文やLPにSlack文字列を使う場合、頭文字は大文字にしないと怒られます

アイコンにSlackのロゴはNG


初期のホメルくんはキャップがSlackロゴだったのですが勝手にロゴ使うと怒られます



プライバシーポリシーは英語で


中の人がレビューできないので英語にしてほしいとのこと、機械翻訳はNG、とりあえず今回はこちらを参考に作成

OAuth & Permissionsのscope利用理由はちゃんと書いて


最初気づかずに空欄にしてたら怒られました、とりあえず一行とかで簡単に書いておけば普通に通ります

問い合わせURLはFacebook messengerだとNG


Slackアカウント以外のアカウントが必要になる動線は不適切なのでNG、とりあえずGoogle Formに変更して対応

インストール後のリダイレクト先はDeep Link等利用して


当初はインストール後にとりあえず https://my.slack.com に飛ばすようにしていたのですが、ブラウザで利用してない人もいるので https://api.slack.com/docs/deep-linking#app_or_bot こちら参考にして適切な飛ばし先にリダイレクトしてあげてくれとのこと、とりあえず今回はThanksページ作って対応 (ほぼLPそのままですが)

channels:readスコープはbotスコープに含まれてるから不要


というわけで削除、このスコープは転送用チャンネル設定のバリデーションや↑のprivateチャンネル除外する用で使ってます、ちなみにbotスコープで利用する場合はbot用のaccess_tokenでAPI叩く必要あり



そんなこんなで2度ほど申請対応して晴れて審査通って今回リリースできました:tada:





(ちなみにThanksメッセージのフィードバック対応は当日わりとすぐにレスポンス返ってきたのですが、もろもろ対応したあとに再度申請して実際に承認されるまでは丸一日以上かかりました)

あとがき

いかがでしたでしょうか、本当はもっと細かい粒度で記事分けてスクショフル活用しながら詳細書きたいところも多々あるのですが、めんど(ry諸事情によりかなり端折ってしまったので正直わかりにくいところも多かったかもしれません。

コードに関してはオープンにしてもOKと寛大なお言葉をいただいてるので、そのうちコード自体公開する予定ではあるのですが、時間制約の都合上かなり雑なコードに仕上がっているので流石にもうちょっと整理してから公開する予定です:bow:

とりあえず興味ある方はTwitterでDMいただければ今の雑なやつでも個別にシェアしますので気軽にお声がけいただければと思います。

Slack app、直近まだまだ開発しやすい環境が整っているとは言いにくい状態という印象ですが(scope変更を含むバージョンアップしたくなったときどうしたらいいんだろうとかとか)、

Slackがかなり多くの企業やユーザーに利用されているプラットフォームではあるのは間違いないのと、まだまだアプリのマーケットプレイスとしては黎明期で何かしら参入できる余地かなり大きいと思うので、個人開発者にとっても今からiOS/Androidアプリ作るよりはワンチャンあるのではと思ってます。

(ただし、真面目に課金とかしようと思うとSlack上で決済できる仕組みが今のところなく、何かしら自分で頑張らないといけないのが若干ハードル高そうですが...)

是非この機会にSlack appチャレンジしてみてはいかがでしょうか。

そして是非皆様ホメルくんつかっていただいてフィードバックいただければと思います！

https://homerukun.atengagement.com/

https://slack.com/apps/ADE8ADF6E--

Have a good Slack :tada:

Appendix

ホメルくんの環境について


heroku
PostgreSQL
Ruby (2.5.1)
Ruby On Rails (5.2.1)


せっかくなので技術的チャレンジ込みで Go + Serverless な感じでやってみようと思ったのですが、思いの外時間かかりそうだったので手っ取り早く実装できるRailsに落ち着いてしまいました...

大体の雰囲気は掴んだので次回はそちらで挑戦してみたい。






hubotとかが出始めた頃と比較して、当時の機能は今はほとんどDeprecatedになってますね... ↩︎






SlackはPHPっぽいもので作られているらしい
2018-07-09T06:32:47+09:00
(※2016年に書かれた記事の翻訳ですので今とは違う情報が含まれます）

現在業務用としても一般のコミュニティとしてもよく使われているチャットサービスのSlack。サーバーサイドはどのプログラミング言語で作られていると思いますか？

実はPHPで作られています。（現在は恐らくHack）

詳しくはSlackのチーフアーキテクト職の方が書かれた下記の記事に書かれています。(2016年に書かれたものです）

Taking PHP Seriously – Several People Are Coding

ちょっと驚きですよね。今の時代だと日本だとスタートアップ界隈ではRailsが人気ですし、そもそもチャットシステムを作るのであればWebSocketを使うためにGo, Elixir, Node.jsで実装するのが普通のような気がします。

なぜPHPを選んだのか？

まず最初に語られているのは、大勢の人がPHPに抱く気持ちとしては悪いイメージなのではないか、ということです。日本でもよく聞く印象です。しかし、Facebook, Wikipedia, Wordpress, Etsy, Baidu, Box, そしてSlackがPHPを使って成功しています。更にSlack社内ではPHPによる新しいプロジェクトもスタートしたとのことです。

他の言語を使っていればもっと成功していたのか？　と言われると決してそうではありません。PHPには多くの欠陥がありますが、それを十分に補えるような良い所も多くあるということです。

PHPの良い所とは

独立したステート

PHPはリクエスト毎に完全に挙動やステートが独立しています。あるリクエストがその次のリクエストに影響を与える、ということはありません。（開発者が生み出してしまうDB等との連携によって生まれる不具合等の話ではなく、言語自体の話になると思います）

他の言語の様に他のリクエストに影響を与えてしまう可能性がある場合、DB、memcache、ファイルシステム等を混乱させる可能性が有ります。そのためリクエスト毎にヒープを分離してくれていることがプログラム上の問題の削減に役立っています。

例えばNodeとかだと下記のようにすればリクエスト毎に出力を変えてしまう事が容易ですよね。しかも内部の値ですのでしっかりとログを出力などしないと問題が出た時の原因の把握すら困難です。

var globalValue = 1;

http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end(globalValue++);
}).listen(8000, '127.0.0.1');


自分で作ったプログラムならまだしも、何かのライブラリの不具合だった場合、しかもサービスの本番環境に著しい問題が出てしまった場合など、確かに考えるだけでも恐ろしいですね…。

並行性

PHPにおいて、各リクエストは単一のPHPスレッドで実行されます。この制限はデメリットのように見えますが、Webサーバーのコンテキストでいい感じに処理してくれるため、他の言語に比べエラーに対しての復元力が強いです。

たしかにWebサーバー自体が落ちなければ絶対動きますしね。

プログラマのワークフローが高速かつ効率的

プログラムを修正したらブラウザ上でリロードすればすぐ確認できます。

たしかに他の言語の場合、修正したファイルによってはサーバーリロードしたりしないといけなかったりしますよね。

PHPの問題点とそれについての考え方

PHP自体はよく言われているように色々と問題点があります。元の記事にも色々書かれていますが、日本でもよく見かける話なのでとりあえず割愛します。

これは他の言語でも同様かもしれませんが、大切なことは問題点をしっかり理解して抑えながら良い部分を活かしていくことです。

Hack、HHVMの存在

HackというのはFacebookが開発した、PHPを拡張したPHPと同じ構文を使ったプログラミング言語です。HHVMはPHPやHackを動作させる仮想マシンです。Hackは下記のような特徴があります。


PHPで書かれたスクリプトはHackでも動く
型を使うことができる（一部は現在PHPにも取り入れられている）
非同期処理（async, await）などもできる


つまり、PHPのプロジェクトは必要に応じてHack & HHVMに移行することができる、というメリットがあるということです。

FacebookではPHPインタープリタより11.6倍、Wikipediaは6倍のCPU効率の改善を報告しているとのことです。Slackでは既にWeb環境をHHVMに移行し、レイテンシを大幅に改善しているとのことです。

PHPカンファレンス関西 2017 に行ってきたぞ - 大学生からの Web 開発

にも書かれていますが、恐らくどんどん必要に応じてHackにも移行しているようです。

（ちなみにHack, HHVMは実際に僕は使ったことがないので、どれだけ良いものか、今後も期待できるか、というのは不明です）

まとめ

PHPの利点はPHPの欠点を超える価値がある、という結論のようです。


  翻訳しつつじっくり読んでいってるけど面白い。なんかPHP以外使うの怖くなってきた。


僕が翻訳中にツイートした内容ですが、じっくり読んでいるとほんとに肌寒くなってきます。とはいえ他の言語も好きなので今後も色々使っていくと思いますが。

あとWebSocketについての話がなかったので気になるところです。

※当記事は元記事の筆者の許可を得て翻訳を行い取り入れています

サービス	User Agent
Twitter	Twitterbot/1.0
Facebook	facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)
LINE	facebookexternalhit/1.1;line-poker/1.0
メッセージ(iOS)	Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_1) AppleWebKit/601.2.4 (KHTML, like Gecko) Version/9.0.1 Safari/601.2.4 facebookexternalhit/1.1 Facebot Twitterbot/1.0
Discord	Mozilla/5.0 (compatible; Discordbot/2.0; +https://discordapp.com)
Skype	Mozilla/5.0 (Windows NT 6.1; WOW64) SkypeUriPreview Preview/0.5
Slack	Slackbot-LinkExpanding 1.0 (+https://api.slack.com/robots)
Plurk	Mozilla/5.0 (compatible; PlurkBot/1.0; +https://www.plurk.com/) Firefox/61.0