Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
node-webkit
&
chrome-remote-interface
ユーザーフレンドリーなブラウザオートメーションツールを
Node.jsで書ぃて激モテするゃりかた
ぁゃぴ(@upgrade_ayp)
ブログ「ayapi.github....
毎日ぉなじこと or 大量のデータを手入力の仕事でも…、
ノンプログラマーゎ、
自動化するってゅー発想が、ぁんまりなぃ
それを自動化してぁげると、
プログラマーゎ、激モテできる↑↑
ノンプログラマーにモテる努力
ブラウザ㊤での事務作業って、なにげぁる
【テキトーな例】
・CMSの設定変更
・ネットバンキングの操作
・ネットショップの商品/顧客情報の管理
ブラウザオートメーションが、大活躍\(^o^)/
ブラウザオートメーション
デスクトップアプリケーション ってゅーか
GUIツール?が、かんたんに作れる
GUI:   JS+CSS+HTML
ロジック: Node.js
WinでもMacでも、Node.jsが入ってなぃ環境でも、
実行ファイルを起動するだけで動く
ゃばぃ...
・ ユーザーにゎかりゃすぃ見た目を自由に作れる
GUIだけじゃなくて、
自動操作㊥のブラウザをリアルタイムでみせれるとこもgood♡
・ Same Origin Policyとかセキュリティの制約が少なぃ
JSのinjectもかなりかんたん↑↑...
■Node.js完結系(jsdom+httpRequestとか)
CUI、黒ぃ画面系
ぃまどんな操作をしてるのかをユーザーにみせるのが、むずぃ
■Chrome Extension(Chrome拡張機能)
学習コスト高ぃ(特にセキュリティの制約と...
$(element).click();とか
(window.onbeforeunload)
↓
HTTPリクエスト送信
↓
HTTPレスポンスヘッダ受信
開始(window.onunload)
↓
HTTPレスポンスヘッダ受信完了
↓
HTTP...
ChromeのDevToolsでみれるょーな情報を取得できるAPI
これが、node-webkitのChromiumでも、っかぇる♡
↑こんな赤ぃエラーも、kwsk取得できる
Chrome Remote Debugging Protocol
Chrome Remote Debugging Protocolを
Node.jsで書きゃすくしてくれるライブラリ
同期遷移での
DOMContentLoaded以
前の状態遷移も、
ぃろ②イベントをemitして
くれるから、
かんたんだし\(...
node-webkit & chrome-remote-interface
+
その他
andris9/inbox…IMAP用ライブラリ
確認メールが飛ぶょーなタスクで IMAPでメールを受信して次のタスクへ、とか♡
node-bunyan…L...
GUI側(Backbone.View) ジョブの例
ためしてみてくださぃ↑↑
(ツッコミ||質問)大歓迎です♡
ぁゃぴ(@upgrade_ayp)
Upcoming SlideShare
Loading in …5
×

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

9,249 views

Published on

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

Published in: Technology
  • Be the first to comment

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)

×