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

SNSで集めた情報を、数回のタップ操作でWordPressサイトにキュレーション記事として自動投稿するシステム「キュレーションサイト・ビルダー」を作ったので、その詳細を紹介します。

キュレーションサイト

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

個人でも企業でも、サイトを定期的に更新してメディア化するのは手間がかかる(自分のこのサイトも、御多分に漏れず)。一方で、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. はユーザーが操作する。ほぼ画面をタップするだけ完了できるようになっている。すべての操作はスマートフォンでできるので、移動中や空き時間などに作業を進められる。

wp-image-658
キュレーションサイト・ビルダーの基本画面と操作方法

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

藤村厚夫 Media Disruption This Week

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

インターネットメディア協会(JIMA:ジマ)がメディアリテラシー、メディアの信頼などに関連するニュース記事をピックアップ。Twitterで投稿した情報を元にキュレーションしている。

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

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

wp-image-657

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

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へ投稿する記事の生成
wp-image-659
WordPressへ投稿する記事の生成画面

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

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

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

fsファイルシステム
https://nodejs.org/api/fs.html#fs_file_system
expressWebアプリケーションを作るのに便利なフレームワーク
https://expressjs.com/ja/ 
requestHTTPリクエストを処理するためのもの
https://github.com/request/request
httpsNode.jsで作ったWebアプリケーションをHTTPS化
https://nodejs.org/api/https.html#https_https
mysqlMySQLを操作
https://github.com/mysqljs/mysql
ejsテンプレートエンジン
https://www.npmjs.com/package/ejs
momentDate 型を扱いやすくするフレームワーク
https://momentjs.com
passportログインなど認証機能を実現
http://www.passportjs.org
bcryptログイン用パスワードをDBに保存する際に暗号化するもの
https://www.npmjs.com/package/bcrypt
cron定期処理(cron)をNode.jsで実現するもの
https://www.npmjs.com/package/node-cron
foreverNode.jsアプリケーションをデーモン化して永続的に実行
https://www.npmjs.com/package/forever