Slack を⽤いたライブブログ
第２章では、記者がリアルタイムにブログ形式で情報を更新するライブブログがどのように開発・運⽤されているのか、投稿システムを解説します。
全章を一括して購入されたい方はこちらの記事をご購入ください。
https://note.mu/nikkei_staff/n/n44623c9b9ab4
2.1 はじめに
最近、弊社のライブブログ*1が巷で少し話題になりました。ライブブログとは、記者が取材現場で得た情報をリアルタイムにユーザへ届けるために作られたブログ型のWeb コンテンツです。記者がチャットやSNS へ投稿した内容が、リアルタイムにブログに反映される仕組みになっています。話題になったライブブログでは、投稿システムにSlack を⽤いており、そのモダンなシステム構成に注⽬が集まりました（図2.1）。
Slack を⽤いた投稿システムが注⽬を集める中、特にSlack のReaction 機能をブログ掲載のトリガーとして使っていることに関⼼が集まりました。ページロード時に取得する投稿データ（JSON）のメタ情報から推測されたようです。嬉しいことに、Slack で同様のシステムが作りたいという意⾒も⾒受けられました。そこで本章では、弊社のライブブログがどのように開発・運⽤されているのか、投稿システムを解説し、開発のTips を紹介します。
2.1.1 読者に求めるスキルセット
本章は、Slack の知識∕利⽤経験がある⽅、Web 開発の知識∕経験がある⽅、AWS 開発の知識∕経験がある⽅を読者に想定した内容です。
2.1.2 著者について
加藤皓也（かとうひろや）。2018 年度に新卒⼊社したWeb エンジニアで、編集局・メディア戦略部に所属しています。主な担当業務は、Web コンテンツ「⽇経ビジュアルデータ」の設計・開発です。ちなみに今回紹介するライブブログの投稿システムは、学⽣アルバイト期間に制作しました。
2.2 ライブブログの概要と機能
前節にも書きましたが、ライブブログは、記者がチャットやSNS に投稿した内容をリアルタイムに埋め込んだブログ型のWeb コンテンツです。私が所属するメディア戦略部では、これまでTwitter を⽤いたライブブログを8 つ、Slack を⽤いたライブブログを6つ制作してきました。本章では説明を明⽰的にするため、今回取り上げるSlack を⽤いたライブブログを「Slack ライブブログ」と呼称して解説します。
Slack ライブブログの投稿システムが想定するユーザは、投稿者と編集者の⼆種類です。弊社では、投稿者（記者）が現地の取材内容をSlack に投稿し、編集者（デスク）がブログに掲載する投稿を選別・編集していました。次項より、各ユーザが利⽤可能な機能を紹介します。
2.2.1 Reaction を使った機能
Slack ライブブログの投稿システムでは、Slack のReaction を⽤いて次の機能が利⽤できます。これらの機能はすべて編集者を対象としています。
1. ブログに掲載する投稿の選別
2. 掲載対象範囲の設定
3. タグの付与
まず、ブログに掲載する投稿を選別する機能についてです。この機能では、チェックマークのReaction を⽤いて、Slack の投稿をブログに掲載することができます(図2.2)。
編集者はこの機能で、適宜ブログに投稿すべき最適な投稿を選ぶことができます。
次に、掲載対象範囲を設定する機能についてです。⽮印マーク↑↓のReaction を付けた投稿で囲んだ範囲の投稿を、掲載対象とすることができます（図2.3）。↓のみを付けた場合、↓の付いた投稿から最新の投稿までがブログ掲載の範囲となります。
この機能で掲載期間を絞り込むことができるため、前後で雑談をしていても安⼼です。
そして、タグを付与する機能についてです。事前にタグとして設定したReaction を⽤いて、タグを付与し、UI の絞り込み機能と紐付けることができます（図2.4）。
ちなみに上図のReaction はすべて弊社のSlack team で実際に使われているものです。
2.2.2 Thread を使った機能
Slack ライブブログの投稿システムではさらに、Slack のThread を⽤いて次の機能が利⽤できます。これらの機能は投稿者と編集者どちらも対象としたものです。
1. テキストの書き換え
2. 画像・動画キャプションの付与
まず、テキストを書き換えについてです。既存の投稿にThread にてリプライを付けることで、既存の投稿のテキストをリプライのテキストに差し替えることができます（図2.5）。
Slack の投稿は投稿者本⼈しか編集ができませんが、この機能で誰でも編集可能になります。
そして次に、画像・動画のキャプションを付与する機能についてです。Thread のリプライにメモマークのReaction を付けることで、リプライのテキストを画像・動画のキャプションとすることができます（図2.6）。
上図のように注釈や出所を載せたいときに便利です。
2.2.3 その他
Reaction やThread 以外にも、Slack の各⼊⼒欄を⽤いて次の機能が利⽤できます。これらの機能はすべて投稿者を対象としています。
1. 動画サムネイルの設定
2. URL のメタ情報埋め込み
3. Markdown の利⽤
まず、動画にサムネイルを設定する機能です。動画投稿時、秒数をファイル名欄に⼊⼒することで、その秒数のコマをサムネイルとして利⽤することができます（図2.7）。
デフォルトでは黒⼀⾊のコマがサムネイルになってしまいますが、この機能を使えば動画でもっとも象徴的なコマをサムネイルに設定することができます。
次に、URL のメタ情報を埋め込む機能です。OGP 設定のあるリンクのURL を投稿のテキストに含めることで、URL のメタ情報を埋め込むことができます（図2.8）。
上図のように、Twitter やFacebook などのSNS へのリンクでは、公式のwidget が適応されます。
そしてMarkdown 機能は、投稿のテキスト欄にて利⽤することができます（図2.9）。
上記のリンク付きテキストの他、テキストの太字強調やリストの設定などが可能です。
2.3 システム構成
Slack ライブブログのシステム構成は下図のとおりです。AWS Lambda とAmazonS3 を⽤いた、いわゆるサーバレスアーキテクチャを実装しました（図2.10）。
主にLambda は、Slack から投稿データを取得・整形してS3 にアップロードする役割を担い、S3 はホスティングサーバの役割を担いました。
各構成要素の具体的な処理内容は、次のとおりです。
2.3.1 AWS Lambda の内部処理
Lambda ではCloud Watch Events を⽤いて、次の⼿順で動作するジョブを定期実⾏しました。
1. Slack API で指定したchannel の投稿データを取得
2. 取得した投稿データを整形
3. S3 にまだアップロードしていない画像・動画を検出
4. 3 で検出した画像・動画をS3 にアップロード
5. 2 で整形した投稿データをアップロード
上記の実⾏プロセスでは、適宜各サービスのAPI を利⽤しました。1 ではSlack APIのchannels.historyメソッド*2を利⽤して投稿データを取得し、3 ではAmazon S3 REST API のlistObjectsV2メソッド*3を利⽤して未アップロードファイルを検出します。4 と5 ではAmazon S3 REST API のputObjectメソッド*4でファイルをアップロードしました。
また、2 のデータ整形では、取得したデータから投稿ごとに「2.2.1 Reaction を使った機能」「2.2.2 Thread を使った機能」で設定したReaction やThread の有無を検出し、それらに対応した加⼯をしました。この際の加⼯のコツや留意点は、後述の「2.4 開発のTips」にて解説しています。
2.3.2 Amazon S3 上のデータ処理
S3 では、HTML やCSS、JS などのSlack ライブブログを構成するファイルを格納してホスティングしました。S3 にはLambda から定期的に整形済みデータがPUT されますが、そのデータをJS のsetInterval()を⽤いて取得することで間接的なデータ通信を実現させています。*5
またSlack ライブブログでは、取得するデータをD3.js でレンダリングしているため、D3.js のデータバインディングによって適宜更新されるデータにも動的に対応しています。
2.4 開発のTips
Slack ライブブログは開発にあたっていくつかのAPI を利⽤しましたが、思わぬ制約や落とし⽳が多く、それらを回避するために多くの⼯夫を要しました。本項では、そのときに培った知⾒をもとにした開発のTips を紹介します。
2.4.1 Slack API のTips
Slack API を利⽤する際のTips は次の通りです。
• 取得できる投稿データは1000 件/1req.
• Slack API で取得するデータの構造が複雑
• 機密情報をどこまで公開するか決めておく
● 取得できる投稿データは1000 件/1req.
Slack から投稿データを取得する際は、基本的には特定のchannel から投稿データを取得できるchannels.historyメソッドを使います。しかしchannels.historyメソッドには、⼀度のリクエストで取得できる投稿が最⼤1000 件までという制約があります。1000 件以上の投稿を取得したい場合は、データを取得する時間範囲が指定できるlatestオプションを活⽤しましょう。たとえば、先に取得したデータの末尾の投稿がもつタイムスタンプをlatestオプションとしたchannels.historyメソッドを連鎖的に実⾏することで、指定したchannel の全投稿データを取得することができます（リスト2.1）。
上記がlatestオプションを利⽤したサンプルコードです。上記コードでは、channels.historyメソッドで取得したデータに含まれるhas_moreというkey を利⽤しています。has_moreは、取得した範囲以降さらにデータが存在するか否かを⽰すboolean 値をvalue にもつため、活⽤すると実装が楽になります。
● Slack API で取得するデータの構造が複雑
Slack API を⽤いた開発でもっとも悩ましいのが、複雑なデータ構造のハンドリングです。たとえばchannels.historyメソッドで取得するJSON ファイルでは、テキスト投稿とファイル投稿のデータ構造が⼤きく異なります（リスト2.2）（リスト2.3）。
上記コードのように、テキスト投稿の構造はシンプルですが、ファイル投稿の構造は複雑です。また、ファイル投稿のReaction 情報が、テキスト投稿と⽐較してネストが深い位置にあることも⾒て取れます。
これらをハンドリングする苦労は、投稿形式が多様なSlack のAPI を利⽤する⼈々が背負うべき宿命なのかもしれません。
● 機密情報をどこまで公開するか決めておく
channels.historyメソッドで取得する投稿データには、投稿者の個⼈情報やSlackteam の情報などが含まれています。これらは機密情報なので利⽤する情報以外は、S3 に整形データをアップロードする前に削除するのがよいでしょう。特に投稿者のアイコンやユーザ名などが取得できるusers.listメソッド*6は、ユーザの本名やメールアドレスをデータ構造に含むため、利⽤する際は注意してください。
2.4.2 Amazon S3 REST API のTips
Amazon S3 REST API を利⽤する際のTips は次の通りです。
• S3 にアップロードできる画像・動画の形式はバイナリBLOB かBase64 ⽂字列
• 画像・動画のデータ容量に注意
● S3 にアップロードできる画像・動画の形式はバイナリBLOB かBase64 ⽂字列
Amazon S3 REST API のputObjectメソッドを利⽤して画像や動画をS3 にアップロードする際には、対象のデータをバイナリBLOB かBase64 ⽂字列に変換してからアップロードする必要があります。*7 Slack API で取得できる画像・動画の情報はURL なので、クライアント（Lambda 等）でURL からどちらかの形式でダウンロードして、その後にS3 にアップロードするというプロセスを踏むのがよいかと思われます（リスト2.4）。
上記は画像をS3 にアップロードするサンプルコードです。putObjectメソッドでアップロードする際はヘッダーに認証情報を含める必要があるので、実装にあたっては上記コードを参考にしてみてください。
● 画像・動画のデータ容量に注意
S3 をホスティングサーバにする場合、クライアント（閲覧者）にロードされるデータの総量が利⽤料⾦を⼤きく左右します。そのためロードされるデータの容量は、可能な限り抑える必要があります。Slack ライブブログの場合、ロードされるデータのうち特にデータ容量が⼤きくなりがちだったのは、Slack に投稿されLambda からアップロードされる画像データと動画データでした。
画像のデータ容量を抑える際は、Slack が画像投稿時に⽣成するサムネイル画像を元画像の代わりに利⽤するのがオススメです。サムネイル画像は、縦横⽐を維持しながらいくつかの⻑さ（64~1024px）に最⻑⼨法が縮⼩されたものです。サムネイル画像のURL は、Slack API のchannels.historyメソッドで取得することができます。
しかし動画については、Slack にデータ整形機能が⽤意されていないため、容量を抑えたい場合は別途準備が必要です。ちなみにSlack ライブブログでは、動画のデータ容量を減量する別のLambda を⽤意しました。
2.5 おわりに
この章では、Slack を⽤いたライブブログの投稿システムを解説し、開発のTips を紹介しました。いまSlack はチャットツールとして愛されていますが、開発対象としても応⽤を利かせやすく便利です。
また、Slack は各機能のアップデートが積極的に⾏われています。最近では新機能として、Thread でもファイル投稿ができるようになりました。加えて、Reaction が連動していたShare 機能の改善や、連続で同⼀URL のメタ情報が表⽰可能になったことなど、既存の機能改善にも余念がありません。
さらにSlack が定期的に開催するカンファレンスでも、アップデートした機能の活⽤など、新たなSlack の使い⽅が提案されています。ちなみにFrontiers 2018@SanFrancisco*8では、今回紹介したSlack ライブブログの投稿システムが利⽤事例のひとつとして紹介されました。後⽇セッションごとに講演動画が公開されるので、⾊々チェックしてみると刺激になるかもしれません。
⾊々できて⼊⾨が少し⼤変ですが、⼀度覚えると何かと便利なSlack 開発。是⾮みなさんもSlack で新たなシステムを開発してみてください。
著者：加藤皓也/ @hirosaji
ゲーム実況を観ながらコードや記事を書くのが好きなWeb エンジニアです。本章は2BRO. とVtuber の皆さまの御⼒をお借りして執筆しました。
140年の歴史ある会社が、AIやデータを駆使した開発を現場で実践しています。是非疑問や感想を #nikkei_dev_book をつけてツイートしてください！
全章を一括して購入されたい方はこちらの記事をご購入ください。
https://note.mu/nikkei_staff/n/n44623c9b9ab4
この記事を購入すると、この下に第２章だけのダウンロードリンクが表示されます。
ここから先は
¥ 100