Slack Web API + JavaScript で Slack 分報 から 日報を作成する

# はじめに
ちまたで流行っている Slack を使い始めて早1ヵ月。
Slack が楽しくて、 Slack に投稿してばかり。
ひとりで分報したりして、きゃっきゃしてました。
そのうち、Slack に投稿した内容を 1日分にまとめて、ブログに貼り付けたいと考えるようになりました。

# やりたいこと
Slack Web API を使って、Slack に投稿した内容を 1日分でまとめる。
つまり、Slack 分報から 日報テキストを作成する。

# 準備
Slack Web API を利用するためには、token が必要です。
以下のページで取得できます。
[Slack Web API](https://api.slack.com/web)

# Slack Web API の おためし

[API Methods](https://api.slack.com/methods) を眺めて、使えそうな Methods をピックアップします。
[channels.history](https://api.slack.com/methods/channels.history) を利用します。
実際にこのメソッドでよいのかを検証するのは簡単です。
メソッドごとに [テストページ](https://api.slack.com/methods/channels.history/test) があるからです。

1. テストページにて「Required」となっている2箇所に値を設定します。token は 準備で取得したものを設定します。
自分のチーム名が選択できるようになっている場合は、チーム名を選択します。

1. channel を設定します。channnel 横に #始まりのチャンネル名が表示されているはずなので、それを押下すると、Value に channnel が設定されます。
![テストページ](https://qiita-image-store.s3.amazonaws.com/0/59985/3c1bd1da-a9f8-5b05-633c-61ad8f11aa6c.png)

1. 「Test Method」ボタンを押下するとテストページ下部に実行した結果が表示されます。

1. 実行結果は以下のように表示されます。JSON形式です。
![テストページ実行結果](https://qiita-image-store.s3.amazonaws.com/0/59985/cb9957e4-edac-028b-9761-d1780bdaf47c.png)


テスト実行のように、URL を編集してリクエストを投げてJSONの結果を取得するコードを JavaScript で記述すればよいことがわかりました。

# HTML + JavaScript を書く
jQuery を利用しています。

## 処理イメージ ヒト版
1. 日報作成対象日を入力する
2. 取得ボタンを押下する
3. 表示された結果を確認する

## 処理イメージ JavaScript 版
1. 日報作成対象日を取得
1. URL を編集
1. Slack Web API の channel.history を実行 して結果を取得する
1. 結果(JSON 形式) を加工してHTML表示する。
「ts」と「text」をテーブル形式で羅列する。

イメージに合わせて、HTML + JavaScript をカチカチ書きます。

```html:qiita.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>

function escapeHTML(val){
	return $('<div />').text(val).html();
}

function getStartTs(val){
    var start_date = new Date(val);
    start_date.setHours(0);
    start_date.setMinutes(0);
    start_date.setSeconds(0);
    start_date.setMilliseconds(0);
    var start_ts = start_date.getTime() /1000;
	return start_ts;
}

function getEndTs(val){
    var end_date = new Date(val);
    end_date.setHours(23);
    end_date.setMinutes(59);
    end_date.setSeconds(59);
    end_date.setMilliseconds(0);
    var end_ts = end_date.getTime() /1000;
	return end_ts;
}

function getNippo(){
	var start_ts = getStartTs($("#start").val());
	var end_ts = getEndTs($("#start").val());
	var url = "https://slack.com/api/channels.history?token=" +
	"tokenに置き換える" + "&" +
	"channel=" +
	"chanel_idに置き換える" + "&" +
	"oldest=" +
	start_ts + "&" +
	"latest=" +
	end_ts + "&" +
	"count=1000&pretty=1";
	
	$.getJSON(url , function(data) {

		var len = data.messages.length;
		var tbodyObj = $("#nippotbl_tbody");
		tbodyObj.find("*").remove();
		for(var i = len-1; i >= 0; i--) {
		
			var tr = $('<tr>')
					.append('<td>' + new Date(data.messages[i].ts * 1000).toLocaleString() + '</td>');
			
			var outputtext = data.messages[i].text;

				//get attachments
				if(data.messages[i].attachments != null){
					for(var j=0; j <data.messages[i].attachments.length; j++ ){
						attachtext = data.messages[i].attachments[j].text;
						outputtext = outputtext + attachtext;
					}
				}
				
			tr.append('<td>' + escapeHTML(outputtext) + '</td>');
			tbodyObj.append(tr);
	    }
	});
}

</script>
</head>
<body>

<form>
	<input id="start" type="date"/>
	<input type="button" value="取得する" onclick="getNippo()"/>
</form>

<table id="nippotbl">
	<th>ts</th><th>text</th>
	<tbody id="nippotbl_tbody">
	</tbody>
</table>

</body>
</html>
```

## コードの注意点
- input type="date" を利用しています。Google Chrome で実行してください。入力用のカレンダー表示されますので、便利です。

- URL にて oldest, latest を指定してます。日報なので、0時0分0秒から23時59分59秒です。

- URL にて count=1000 を指定してます。max 値です。

- attachments の text も拾っています。

# 実行結果
qiita.html を実行すると以下のようになります。

![実行結果](https://qiita-image-store.s3.amazonaws.com/0/59985/679eb82f-650a-e108-dcb2-848311aa2323.png)

実行結果をコピペすれば、日報のできあがりです。
あとは好きなところに貼るだけです。
これで いっそう Slack & ひとり朝会 が捗ります。


# おまけ
channnel の id は、[channels.list](https://api.slack.com/methods/channels.list)  を実行して調べることができます。