Electron と enebular editor を使ってデスクトップにツィートを表示させてみた。 #Electron

こんにちは。野良ハックチームざっきーと申します。

IoTLT Advent Calendar 2018 の 12 日目の @pokiiio さんの記事「Electronで作った京浜急行運行情報監視ウィジェットを支えるクソコードたち」の内容が素晴らしかったので Electron と enebular editor を使って ~~LT 登壇中に~~ デスクトップにツィートを表示させてみました。
以前書いた記事「enebular を使って IoTLT のツィート状況を可視化してみた。」の発展形になります。

成果物

最初にゴール (成果物) を示します。画面上部に表示されているバナーです。ツィートの内容が表示されます。常に最上位に表示されて、マウスクリックは透過されます。

すぐに試してみたい方はこちらに macOS と Windows のビルド済みファイルを置いておきます。(勉強会などの時しか役に立たないかもしれませんが・・。)

構成

twitter 〜 Milkcocoa までは以前と同じ構成です。Milkcocoa からツィートの情報を取得して画面上に表示する部分が異なります。以前はブックマークレットを用いてブラウザ内から Javascript のプログラムを読み込む形でしたが、今回は Electron でデスクトップアプリケーション化している点が異なります。メリットはアプリケーション化しているので、表現の領域がブラウザ内からデスクトップ全体に広がった点です。

Electron

ソースコードはこちら。
https://github.com/kitazaki/electron_twitterwidget

src/twitter.js を編集して自分の情報を記入する必要があります。

MilkCocoa.connectWithApiKey に host, api_key, api_secret を設定する。
Milkcocoa の管理画面の認証タブから情報を取得します。

var milkcocoa = MilkCocoa.connectWithApiKey('[host]', '[api_key]', '[api_secret]');

milkcocoa.dataStore に path を設定する。 (例. comment)
後述の Node-RED フローにも同じ path を設定します。

var milkcocoaDS = milkcocoa.dataStore('[path]');

watchword にキーワードを設定する。 (例. spospo)
他の人と dataStore を共有する際にツィートを区別するために使用します。
後述の Node-RED フローにも同じキーワードを設定します。

 var watchword = "[キーワード]";

インストールと使用方法

# ソースコードをダウンロード または clone する。
$ git clone https://github.com/kitazaki/electron_twitterwidget

# 必要なファイルをダウンロードする。
$ cd electron_twitterwidget
$ npm install

#
# src/twitter.js を編集して自分の情報を記入する。
#

# 起動する。
$ npm start

※ Node のバージョンは v8.14.0 で動作確認しています。

npm audit で脆弱性を修正

npm v6.0.0 からセキュリティチェックができるコマンド npm audit が追加され、脆弱性の警告を受けた npm パッケージの依存関係を確認できるようになりました。また、v6.1.0 から脆弱性のある箇所を自動修正してくれるサブコマンド npm audit fix が追加されました。修正しなくても動作に影響はありませんが、もし気になるようであれば、修正されたパッケージをインストールし、問題のあるパッケージを削除し、npm dedupe コマンドで依存関係を修正します。

$ npm install
...
...
found 3 vulnerabilities (1 low, 2 high)
  run `npm audit fix` to fix them, or `npm audit` for details

# npm audit で問題の箇所を確認
$ cd src
$ npm audit
 === npm audit security report ===                        

┌──────────────────────────────────────────────────────────────────────────────┐
│                                Manual Review                                 │
│            Some vulnerabilities require your attention to resolve            │
│                                                                              │
│         Visit https://go.npm.me/audit-guide for additional guidance          │
└──────────────────────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ High          │ Denial of Service                                            │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ ws                                                           │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >= 1.1.5 <2.0.0 || >=3.3.1                                   │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ milkcocoa                                                    │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ milkcocoa > mqtt-for-milkcocoa > websocket-stream > ws       │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/550                       │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ High          │ DoS due to excessively large websocket message               │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ ws                                                           │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=1.1.1                                                      │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ milkcocoa                                                    │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ milkcocoa > mqtt-for-milkcocoa > websocket-stream > ws       │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/120                       │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Low           │ Remote Memory Disclosure                                     │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ ws                                                           │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >= 1.0.1                                                     │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ milkcocoa                                                    │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ milkcocoa > mqtt-for-milkcocoa > websocket-stream > ws       │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/67                        │
└───────────────┴──────────────────────────────────────────────────────────────┘
found 3 vulnerabilities (1 low, 2 high) in 906 scanned packages
  3 vulnerabilities require manual review. See the full report for details.

milkcocoa > mqtt-for-milkcocoa > websocket-stream に含まれる ws に問題があることが分かる。

# 修正された ws パッケージをインストールする。
$ npm install ws
+ ws@6.1.2
added 3 packages from 2 contributors and audited 213 packages in 2.052s
found 3 vulnerabilities (1 low, 2 high)
  run `npm audit fix` to fix them, or `npm audit` for details

# 問題のある ws パッケージのディレクトリを確認する。
$ npm ls ws
TwitterWidget@1.0.0 ./electron_twitterwidget/src
├─┬ milkcocoa@0.7.0
│ └─┬ mqtt-for-milkcocoa@1.6.3
│   └─┬ websocket-stream@2.3.0
│     └── ws@0.8.1     # ← これが問題のある ws パッケージ
└── ws@6.1.2 

# 問題のある ws パッケージのディレクトリを削除する。
$ rm -rf node_modules/websocket-stream/node_modules/ws/

# 問題のある ws パッケージが削除されたことを確認する。
$ npm ls ws
TwitterWidget@1.0.0 ./electron_twitterwidget/src
├─┬ milkcocoa@0.7.0
│ └─┬ mqtt-for-milkcocoa@1.6.3
│   └─┬ websocket-stream@2.3.0
│     └── UNMET DEPENDENCY ws@0.8.1     # ← ws パッケージが削除されている。
└── ws@6.1.2 

npm ERR! missing: ws@0.8.1, required by websocket-stream@2.3.0

# npm dedupe コマンドで依存関係を修正する。
$ npm dedupe
audited 204 packages in 1.215s
found 0 vulnerabilities

# 脆弱性が修正されたことを確認する。
$ npm audit

                       === npm audit security report ===                        

found 0 vulnerabilities
 in 204 scanned packages

enebular editor

enebular editor をダウンロード・インストール・実行し、enebular editor 起動後にデスクトップを選択すると、今までオンライン上で編集作業していた Node-RED フローを PC 上で操作できます。

まとめ

いまさらかもしれませんが、今回は Electron の "凄み" と enebular editor の "良さみ" を感じました。みなさんも良き Electron ＆ enebular ライフを！

(追伸: デバッグ方法)

もし想定通りに動作しないな、と思った場合は main.js に
window.openDevTools()
を追加したり、BrowserWindow のフレーム表示オプションを有効化 (frame: true) したり、透過表示オプションを無効化 (transparent: false) したり、マウスクリックを有効化 (window.setIgnoreMouseEvents(true) → (false)) してデバッグすると良いと思います。

$ diff main_debug.js main.js 
59,60c59,60
<     frame: true,
<     transparent: false,
---
>     frame: false,
>     transparent: true,
66,67c66
<   window.setIgnoreMouseEvents(false);
<   window.openDevTools();
---
>   window.setIgnoreMouseEvents(true);

Electron と enebular editor を使って デスクトップ に ツィート を表示させてみた。

成果物

構成

Electron

インストールと使用方法

npm audit で脆弱性を修正

enebular editor

まとめ

(追伸: デバッグ方法)

Electron と enebular editor を使ってデスクトップにツィートを表示させてみた。