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

8,337 views
8,287 views

Published on

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

Published in: Technology
0 Comments
21 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,337
On SlideShare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
13
Comments
0
Likes
21
Embeds 0
No embeds

No notes for slide

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

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

×