SlideShare a Scribd company logo
node-webkit
&
chrome-remote-interface
ユーザーフレンドリーなブラウザオートメーションツールを
Node.jsで書ぃて激モテするゃりかた
ぁゃぴ(@upgrade_ayp)
ブログ「ayapi.github.io」http://ayapi.github.io/
ブログ「ギャルでもゎかる自作pc」http://ameblo.jp/upgrade-ayp/
毎日ぉなじこと or 大量のデータを手入力の仕事でも…、
ノンプログラマーゎ、
自動化するってゅー発想が、ぁんまりなぃ
それを自動化してぁげると、
プログラマーゎ、激モテできる↑↑
ノンプログラマーにモテる努力
ブラウザ㊤での事務作業って、なにげぁる
【テキトーな例】
・CMSの設定変更
・ネットバンキングの操作
・ネットショップの商品/顧客情報の管理
ブラウザオートメーションが、大活躍\(^o^)/
ブラウザオートメーション
デスクトップアプリケーション ってゅーか
GUIツール?が、かんたんに作れる
GUI:   JS+CSS+HTML
ロジック: Node.js
WinでもMacでも、Node.jsが入ってなぃ環境でも、
実行ファイルを起動するだけで動く
ゃばぃ\(^o^)/ まじハッピー
node-webkitってなに
・ ユーザーにゎかりゃすぃ見た目を自由に作れる
GUIだけじゃなくて、
自動操作㊥のブラウザをリアルタイムでみせれるとこもgood♡
・ Same Origin Policyとかセキュリティの制約が少なぃ
JSのinjectもかなりかんたん↑↑
・ npmモジュールを自由に使ぇる
実行結果とか途中の処理を書くとき、
たくさんのライブラリの恩恵を受けれる\(^o^)/
とにかく、自由さが売り\(^o^)/
ブラウザオートメーションにぉける
node-webkitの優位性
■Node.js完結系(jsdom+httpRequestとか)
CUI、黒ぃ画面系
ぃまどんな操作をしてるのかをユーザーにみせるのが、むずぃ
■Chrome Extension(Chrome拡張機能)
学習コスト高ぃ(特にセキュリティの制約とかハマりポイント多ぃ)
■Selenium系(Nightwatch.jsとかも)
そも②これゎ「自動総合テスト」
「自動タスク」とゎ似てる部分も多ぃけど、
目的がちがぅ違和感とか、たりなぃ部分が、ぁる
ほかの技術
$(element).click();とか
(window.onbeforeunload)
↓
HTTPリクエスト送信
↓
HTTPレスポンスヘッダ受信
開始(window.onunload)
↓
HTTPレスポンスヘッダ受信完了
↓
HTTPレスポンスボディ受信完了
↓
DOMContentLoaded
エラー判定したぃタイミング
・レスポンスヘッダ受信完了時
 Status:200以外ならエラー、とか
・ブラウザタイムアウト時
 けどStatus:200だったなら無視して次へ、とか
・DOMContentLoaded発火時
 DOMにエラーテキストが含まれてたら、とか
Selenium系でゎ、
「Eとゅー要素が文書に現れるまで待って、 N秒超ぇ
たらエラー」とか、タイムアウトを併用しての文書の
内容にょる判定しかできなぃっぽぃ たぶん
node-webkitも単体だと、きびしぃ
同期遷移の状態判定
ChromeのDevToolsでみれるょーな情報を取得できるAPI
これが、node-webkitのChromiumでも、っかぇる♡
↑こんな赤ぃエラーも、kwsk取得できる
Chrome Remote Debugging Protocol
Chrome Remote Debugging Protocolを
Node.jsで書きゃすくしてくれるライブラリ
同期遷移での
DOMContentLoaded以
前の状態遷移も、
ぃろ②イベントをemitして
くれるから、
かんたんだし\(^o^)/
HTTPヘッダーも取れるしー
天才じゃんー↑
chrome-remote-interface
node-webkit & chrome-remote-interface
+
その他
andris9/inbox…IMAP用ライブラリ
確認メールが飛ぶょーなタスクで IMAPでメールを受信して次のタスクへ、とか♡
node-bunyan…Loggerライブラリ
GUIにログを表示するのもかんたん\ (^o^)/
フローコントロール
caolan/async、medikoo/deferred
npm install で入れちゃぇる
jQuery、Lo-dash、Backbone
組み合ゎせでぉすすめのnpmモジュール
GUI側(Backbone.View) ジョブの例
ためしてみてくださぃ↑↑
(ツッコミ||質問)大歓迎です♡
ぁゃぴ(@upgrade_ayp)

More Related Content

node-webkit & chrome-remote-interfaceでブラウザオートメーション