SNSから簡単にキュレーションサイトを作る方法、を作りました

キュレーションサイト

特定のテーマをもとに、関連する情報をネットの中から採集し、見やすい形で編集して読者に届けるメディアのことを。

個人でも企業でも、サイトを定期的に更新してメディア化するのは手間がかかる（自分のこのサイトも、御多分に漏れず）。一方で、TwitterやFacebookといったSNSでは、気になったものに「いいね」とかシェア、リツイートをするのは空き時間があればサクサクとできるし、それを日々行なっていると相当な情報量が蓄積されて、結果としてSNSアカウント自体が自然とメディア化していく。

それじゃ、SNSでシェアした情報を自分たちのサイトに掲載できれば、SNSアカウントと同様にWebサイトも簡単にメディア化できるんじゃないか…と考えるのは自然な発想。でもそれって簡単にできる？　既に誰かが発信しているものの二次情報となるので、出典元の媒体名や要約文、リンクなどを記載する必要があるし、単なるリンク集ではなくキュレーターたる自分の見解も併せて掲載するなど、キュレーションサイトとしての体裁やルールに沿って更新していくのは、結構面倒なことなのだ。

そこで、SNSで集めた情報群に、自分のコメントを付けて画面を数回タップするだけでWordPressサイトに自動投稿してしまおう…というシステムを作ってみた。正式な名称はまだないので、ここでは便宜上「キュレーションサイト・ビルダー」とでもしておこう。

キュレーションサイト・ビルダーでやれること

1. Twitter APIやFacebook APIを使い、自分のアカウントで発信した投稿をビルダー側で定期取得
2. 投稿に含まれるURLから、発信元サイト名、ページタイトル、画像などを自動取得
3. 取得した情報をビルダー画面で一覧表示と検索が可能
4. キュレーション記事用に自分のコメントを登録・編集が可能
5. 記事を選んだり掲載順序を変えられる簡単UI
6. 投稿ボタンを押すだけ、HTMLを自動生成してWordPress APIを通じて記事を自動生成（下書き状態で保存）

1.〜2. がキュレーション情報の生成。これはビルダーが定期処理してくれるので、ユーザーがビルダーにログインすると、お膳立てはすべて整っている。

3.〜6. はユーザーが操作する。ほぼ画面をタップするだけ完了できるようになっている。すべての操作はスマートフォンでできるので、移動中や空き時間などに作業を進められる。

実際にこのキュレーションメディア・ビルダーを使ってメディアを運営されているサイトがあるので、ここでご紹介します。

藤村厚夫　Media Disruption This Week

JIMAツイッター投稿のまとめ

キュレーションサイト・ビルダーの技術情報

このシステムはすべて、サーバーサイドJavaScriptであるNode.jsで構築した。システム全体の俯瞰図はこのような感じ。

システムを構成する大まかなコンポーネントは以下のとおり。

main.js

• Webブラウザーからのログイン・アクセス制御
• 定期的なフィード取得の実行
• ユーザー操作の内容をDB更新
• ユーザー設定の制御
• SNSトークン更新

import.js

• SNSからのフィード取得

wp-api.js

• WordPressAPIへの投稿

mysql.js

• DBからアーティクルの取得・更新
• DBからパブリッシュの取得・更新
• 検索（文字列／日付）

また、キュレーションサイト・ビルダーを作るにあたって、今後ほかのシステムでも転用できるよう、主要な機能はモジュール化しておいた。

• OGP情報のパース
• SNSのAPI操作（情報の取得）
• DB操作
• テンプレートエンジン ejsを使ったページ生成
• WordPress APIの操作（記事の投稿）

OGP情報のパース：
筆者が開発・運営しているTopoCardやDaisyHeadsといったモバイルアプリケーションでも大いに活用している、ワンダウォール謹製のコンポーネント。

SNSのAPI操作：
これにはトークンの取得が必須となる。Twitterはトークン取得が比較的容易で、一度取得すれば制約も少なく、使い勝手も良い。一方、Facebookのトークン取得はなかなか大変だ。情報の取得元がFacecbookページであれば、そのページを管理しているユーザーがページアクセストークンの利用申請を行う必要がある。取得元がFacebookユーザーの投稿であれば、そのユーザー本人がユーザーアクセストークンを60日毎に取得しなければならない。2016年に起こったFacebook個人情報の大量流出事件によって厳格化されたが故の話だが、Instagram APIの仕様変更も含めてFacebookはどうにも難儀だ。

DB操作：
今回使ったのはMySQL。SNSで取得した情報を蓄積したり検索したり、キュレーションメディア・ビルダーで操作した様々な内容を記録していくもので、DBの使い方としては基本的なもの。

ページ生成：
キュレーションメディア・ビルダーはWebブラウザーで操作するので、そのためのページ生成である（自社サイトでのページ生成は次にあるWordPressの仕事）。Node.jsで使えるテンプレートエンジンは色々あり、今回は「ejs」というのを使ってみた。テンプレート・エンジンでは主に以下のようなページを生成させている。

• ログイン画面
• キュレーションした記事一覧の表示と各種UI提供
• 検索画面
• ユーザー設定画面
• WordPressへ投稿する記事の生成

WordPress APIの操作：WordPress 4.7以降では標準でREST APIが使えるようなっている。記事の取得に使われるケースが多いようだが、今回は記事の投稿を行う。APIを利用するための認証方法はいくつかあるが、ビルダーではアプリケーションパスワード方式を使っており、そのためのWordPress設定が必要となる。幸いなことにブログサービスを提供しているWordPress.comでもこの方式が使えるので、おおよそすべてのWordPressブログで動作するだろう。

今回使用したNodeモジュールの一覧

最後にNode.js向けに用意されている便利なモジュールの中から、今回のキュレーションメディア・ビルダーで活用したものを一覧化してみる。開発の初期段階で実装する機能を列挙したら、兎にも角にもこうしたモジュールを探し回って、どれだけ簡単に開発できるかをイメージするところから始めると気が楽に進められると思う。