JSオジサン#1での、ぁゃぴのLTのスライドですo node-webkitとChrome Remote Debugging Protocolをっかって、 Webブラウザのオートメーションツールを作ることの概要ですo ↓こちらから音声もぁゎせてどーぞ http://ayapi.github.io/posts/jsojisan1/

1. node-webkit
&
chrome-remote-interface
ユーザーフレンドリーなブラウザオートメーションツールを
Node.jsで書ぃて激モテするゃりかた
ぁゃぴ(@upgrade_ayp)
ブログ「ayapi.github.io」http://ayapi.github.io/
ブログ「ギャルでもゎかる自作ｐｃ」http://ameblo.jp/upgrade-ayp/

2. 毎日ぉなじこと or 大量のデータを手入力の仕事でも…、
ノンプログラマーゎ、
自動化するってゅー発想が、ぁんまりなぃ
それを自動化してぁげると、
プログラマーゎ、激モテできる↑↑
ノンプログラマーにモテる努力

3. ブラウザ㊤での事務作業って、なにげぁる
【テキトーな例】
・CMSの設定変更
・ネットバンキングの操作
・ネットショップの商品/顧客情報の管理
ブラウザオートメーションが、大活躍＼(^o^)／
ブラウザオートメーション

4. デスクトップアプリケーション ってゅーか
GUIツール？が、かんたんに作れる
GUI： JS+CSS+HTML
ロジック： Node.js
WinでもMacでも、Node.jsが入ってなぃ環境でも、
実行ファイルを起動するだけで動く
ゃばぃ＼(^o^)／ まじハッピー
node-webkitってなに

5. ・ ユーザーにゎかりゃすぃ見た目を自由に作れる
GUIだけじゃなくて、
自動操作㊥のブラウザをリアルタイムでみせれるとこもgood♡
・ Same Origin Policyとかセキュリティの制約が少なぃ
JSのinjectもかなりかんたん↑↑
・ npmモジュールを自由に使ぇる
実行結果とか途中の処理を書くとき、
たくさんのライブラリの恩恵を受けれる＼(^o^)／
とにかく、自由さが売り＼(^o^)／
ブラウザオートメーションにぉける
node-webkitの優位性

6. ■Node.js完結系(jsdom+httpRequestとか)
CUI、黒ぃ画面系
ぃまどんな操作をしてるのかをユーザーにみせるのが、むずぃ
■Chrome Extension(Chrome拡張機能)
学習コスト高ぃ(特にセキュリティの制約とかハマりポイント多ぃ)
■Selenium系(Nightwatch.jsとかも)
そも②これゎ「自動総合テスト」
「自動タスク」とゎ似てる部分も多ぃけど、
目的がちがぅ違和感とか、たりなぃ部分が、ぁる
ほかの技術

7. $(element).click();とか
(window.onbeforeunload)
↓
HTTPリクエスト送信
↓
HTTPレスポンスヘッダ受信
開始(window.onunload)
↓
HTTPレスポンスヘッダ受信完了
↓
HTTPレスポンスボディ受信完了
↓
DOMContentLoaded
エラー判定したぃタイミング
・レスポンスヘッダ受信完了時
Status:200以外ならエラー、とか
・ブラウザタイムアウト時
けどStatus:200だったなら無視して次へ、とか
・DOMContentLoaded発火時
DOMにエラーテキストが含まれてたら、とか
Selenium系でゎ、
「Eとゅー要素が文書に現れるまで待って、 N秒超ぇ
たらエラー」とか、タイムアウトを併用しての文書の
内容にょる判定しかできなぃっぽぃ たぶん
node-webkitも単体だと、きびしぃ
同期遷移の状態判定

8. ChromeのDevToolsでみれるょーな情報を取得できるAPI
これが、node-webkitのChromiumでも、っかぇる♡
↑こんな赤ぃエラーも、ｋｗｓｋ取得できる
Chrome Remote Debugging Protocol

9. Chrome Remote Debugging Protocolを
Node.jsで書きゃすくしてくれるライブラリ
同期遷移での
DOMContentLoaded以
前の状態遷移も、
ぃろ②イベントをemitして
くれるから、
かんたんだし＼(^o^)／
HTTPヘッダーも取れるしー
天才じゃんー↑
chrome-remote-interface

10. 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モジュール

11. GUI側(Backbone.View) ジョブの例

12. ためしてみてくださぃ↑↑
(ツッコミ||質問)大歓迎です♡
ぁゃぴ(@upgrade_ayp)