やりたいこと

オープンソース界隈のトレンドが「ハァ～さっぱり、さっぱり」なのでお手軽にさくっと知れないものだろうか？

方針

- どっかから流行っているオープンソースプロジェクトの名前を取ってくる
　→OSDN Magazineのニュースを利用させてもらう
- 頻出するキーワードのリストを作成
　→HTMLから情報を抽出するcheerioというライブラリを利用させてもらう
- ワードクラウドとかお気楽な見た目で表示
　→これまたD3.jsというライブラリを（以下略

結果

それっぽい結果が得られてうれしい😊（よろこびのハードルが低い）

以下で詳細をお話します

使った道具

- Node-RED
  サーバー側でOSDN Newsサイトにアクセスしたり、キーワードのリストを作成したりするためのプログラミング・実行環境です
- cheerio
  取得したHTMLデータから目的のキーワードを抽出するのに便利なライブラリです
- D3.js (Data Driven Documents)
  頻出キーワードのリストからワードクラウドを表示するのに使ったライブラリです
  ※ D3-cloud (d3-v5版) でワードクラウドを作成する を参考にさせていただきました 先人の知恵に感謝です🙏
- OSDN Magazine Newsサイト
  OSS関連の最新ニュースをまとめてくれているサイトです

手順

１．Node-RED

セットアップは以下を参考にしてください

２．cheerio

２．１　インストール

cd ~/.node-red
npm install cheerio

２．２　Node-REDで使うための準備
~/.node-red/settings.json に cheerio:require('cheerio') 追加

// The following property can be used to seed Global Context with predefined
// values. This allows extra node modules to be made available with the
// Function node.
// For example,
//    functionGlobalContext: { os:require('os') }
// can be accessed in a function block as:
//    global.get("os")
functionGlobalContext: {
    // os:require('os'),
    // jfive:require("johnny-five"),
    // j5board:require("johnny-five").Board({repl:false}),
    cheerio:require('cheerio')
},

[翻訳] cheerioとは

"高速で柔軟性に富み、無駄の少ないcore jQuery実装で、特にサーバー向けに設計されています"

特長なじみのあるシンタックス：cheerioはcore JQueryのサブセットを実装しています。cheerioはjQueryライブラリから全ての一貫性のないDOM操作やブラウザのための書き換えを取り除き、真に見事なAPIを明らかにします。
驚異的な速さ：cheerioはとてもシンプルで、一貫したDOMモデルとして機能します。結果としてパース、操作、レンダリングはものすごく効率的です。
驚くほどフレキシブル：cheerioは@FB55によってもたらされたhtmlparser2をラップしています。cheerioはほぼすべてのHTMLやXMLドキュメントをパースできます。

３．フロー作成

３．１　ニュース記事を何ページかローカルに保存
　※ OSDNサイトに負荷をかけないようにするため
- [page 1-9] : ページ1～9の配列データをトリガーとします
- [split] : メッセージをページごとに分割します
- [gen msg.page_number / url / filename] : ページ番号、対応するURL、対応するHTMLファイル名を決めます
- [OSDNマガジン] : 決めたURLでサイトからHTMLデータを取得します
- [write html file] : HTMLデータをファイルとして保存します

[gen ...]から出ている線を[OSDNマガジン]につないで（[read ...]へは一旦切って ）デプロイし、実行します

３．２　HTMLファイルをローカルに保存した後のフロー
- [gen msg.page_number / url / filename]
- [read html file] : HTMLファイルを読み込みます
- [extract article] : cheerioを使ってarticle要素から タイトル / 要約 / 日時 / リンク先 を抽出します
- [join] : 各ページごとのarticleをまとめます
- [merge articles] : さらに1つの配列にまとめます
- [extract product_name] : articleのタイトルから「」で括られた部分を抜き出し、さらにプロダクト名（OSSだとプロジェクト名のほうがいい？）を抜き出します
- [make histogram] : 同じプロダクト名を１つにまとめてヒストグラムを作ります
- [json] : オブジェクトの配列をJSON形式の文字列に変換します
- [write json file] : JSONファイルとして保存します

作成したフローはこちらです

４．ワードクラウドの表示

４．１　Webサーバーのホームディレクトリ設定
~/.node-red/settings.json に httpStatic: '/home/pi/[お好きな場所]/', を追加

// When httpAdminRoot is used to move the UI to a different root path, the
// following property can be used to identify a directory of static content
// that should be served at http://localhost:1880/.
//httpStatic: '/home/nol/node-red-static/',
httpStatic: '/home/pi/image/',

/home/pi/image/ は名前としてよろしくないんですが見なかったことに💦

４．２　D3.jsを使ったWebページをホームディレクトリに配置

上記記事にサンプルへのリンクがあり、そちらを使わせていただきました
具体的には、以下で取得したd3-cloudSampleディレクトリ以下をホームディレクトリにコピーします

git clone [サンプル].git

４．３　words.jsonの更新
３．２の[write json file]で保存したJSONファイルで/data/words.jsonを同名で上書きします

４．４　http://192.168.0.x:1880/index.html にアクセス
ワードクラウドが表示されていると思います

やってみての感想

- つい、functionノードにコードをいっぱい書いてしまう
　ノーコード・レスコード → 既存ノードの理解 が大事
- JavaScript / JSON がわからない😭
　配列操作とか特定functionノードに書いたオブジェクト定義の気持ち悪さとか…
- ホームディレクトリにデータソース置いてる…
　クライアントにデータ送るにはどうしたらいいの…
- Node-RED Dashboard のui_templateノードを使いたい
　AngularJSを活用するとかっこいい？（思考停止🤤）
- d3.jsを理解したい
　可視化大事
- Webスクレーピング楽しい
　自分なりの情報整理の手段にしたいですね