OSSのトレンドを知りたい

2019年8月1日 21:50

やりたいこと

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

方針

- どっかから流行っているオープンソースプロジェクトの名前を取ってくる
　→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スクレーピング楽しい
　自分なりの情報整理の手段にしたいですね