ブラウザ作業を自動化するためにいろんなパッケージで悩んだが、
最終的にChromyを使用することにした。
Chromyはnightmareとほぼ同じだが、Chromeのブラウザで扱うことが出来る。
そして、nightmareはSeleniumベースなので、つまりChromyもSeleniumベース。
|
1 |
> npm install chromy |
で簡単にインストールできる。
非同期処理を行うのでvoも入れておく
|
1 |
> npm install vo |
なんだかんだ、ブラウザ
selenium-webdriverでブラウザ定番作業を自動化する。
インストール
|
1 |
npm install selenium-webdriver |
Chromeで自動操作をさせたいので、Chromeのドライバーもインストール
|
1 |
npm install chromedriver |
コードは、例えば以下のような感じです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
require('chromedriver'); var webdriver = require('selenium-webdriver'), By = webdriver.By, until = webdriver.until; var driver = new webdriver.Builder() .forBrowser('chrome') .build(); driver.get('http://camhr.com/'); driver.findElement(By.name('q')).sendKeys('webdriver'); driver.findElement(By.name('btnG')).click(); driver.wait(until.titleIs('webdriver - Google Search'), 1000); driver.quit(); |
ただこれは、、一回一回実行するために、Chromeのインスタンスが開始する。
新たに開かずにChromeを操作するために
|
1 2 3 |
System.setProperty("webdriver.chrome.driver","./node_modules/chromedriver/lib/chromedriver/chromedriver"); options.addArguments("user-data-dir=ユーザデータディレクトリ"); options.addArguments("--start-maximized"); |
を追加する必要がある。
ユーザデータディレクトリを確認する。
chromeのURLに「chrome://version/」を入力するっと。
表示される内容の「Profile Path」の項目の内容がユーザデータディレクトリ。
覚え書きとして、
Nightmarejsは、JavaScriptでブラウザを操作するためのライブラリ
インストール
|
1 |
> npm install nightmare |
JSCSとは、Javascriptのコーディングの見た目を統一するためのJavascriptの一つのライブラリのことです。
PHPStorm/WebStormでこのJSCSが求められる場合があります。
「JSCS: Please path to ‘JSCS’ package」っと警告のメッセージ。
まずは、JSCSをインストールする必要があります。
|
1 |
> npm install -g jscs |
PHPStrom->Preference->Language&Frameworks->Javascript->Code Quality Tools->JSCS
のダイアログで「JSCS package」にjscsのパッケージのディレクトリを指定する。
例えば、「/usr/local/lib/node_modules/jscs」。
PHPStrom->Preference->Editor->Code Style->Javascript
のダイアログで歯車アイコンをクリック、Import Scheme->JSCS config file
でjscsの設定ファイルを指定すればいい。
ただ、単純に今回は、
PHPStrom->Preference->Language&Frameworks->Javascript->Code Quality Tools->JSCS
をEnableにして終了。
PHPStormで拾ってきたコードを貼り付けてみると、
PHPStromからのエラーだらけ。。
拾ってきたJavascriptのコードがES6(ECMAScript 6)の仕様で書かれていました。
PHPStromにJavascriptがES6の仕様で書かれてますよっと知らせるには、
PHPStrom->Preference->Language&Frameworks->Javascript
のダイアログで、
Javascript language version を「ECMAScript 6」に設定して、
OKをクリック。
覚え書きとして、
WEBブラウザの定型作業を自動化のためのシステム
Selenium
このシステムは
スクリプトで記述した操作を、WebDriverを介してブラウザに伝えることが出来る。
WebDriverは各種のブラウザに対応したものが用意されており、使いたいブラウザに合わせて選ぶ。
Webプログラマとして一番のメリットはスクリプトをJavascriptで書くことが出来るので学習コストがかからない。
もともとWeb開発のテスト向けに作られたものである。
なので、画面のスクリーンショットを取得できたりする機能など痕跡をたどる機能もついている。
今回はWeb作業の自動化のために使用することにになるが、今後Webテストなどで活用することもできそう。
いままで8年ぐらい常にEclipseをプラットフォーム使ってきたのですが。
MEAN.IOを使うには、思うにEclipseは限界です。
うまくプラグインしてってもどうしても埋め合わせられない穴がある
っという結論に至りました。
今後はWebStormを使います。
WebStormの最大のデメリットは有料。
US $ 129.00 /1st year
US $ 103.00 /2nd year
US $ 77.00 /3rd yr onwards
つまり、はじめは129ドル。
1月間は試用期間があるので、それを試してみます。
件名の通り
まずは、入れたいパッケージをnpmでインストール
|
1 |
$ npm install angular-translate --save |
/app.jsの上の方に
|
1 |
import 'angular-translate'; |
して
|
1 |
gulp |
angular-translateを/bundle/app.jsにもとめて入れ込んでくれる。
mean.ioのデフォルトでインストールした状態なら
/packages/custom/…./server/views/includes/foot.html
に
|
1 |
<script type="text/javascript" src="/bundle/app.js"></script> |
と書かれているはず。
gulp-injectを使う。
インストール(開発環境だけでいいので、–save-dev)
|
1 |
npm install --save-dev wiredep |
挿入されるhtmlを編集
|
1 2 3 4 5 6 |
// cssが挿入される場所 <!-- bower:css --> <!-- endbower --> // javascriptが挿入される場所 <!-- bower:js --> <!-- endbower --> |
パッケージの挿入先を指し示すためgulpfile.js編集
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// bowerのスクリプトをHTMLに埋め込む gulp.task('wiredep', function() { var wiredep = require('wiredep').stream; return gulp .src(['./packages/custom/porkyou/server/views/includes/head.html', './packages/custom/porkyou/server/views/includes/foot.html']) .pipe(wiredep()) // wiredep bower dependencies // .pipe($.inject(gulp.src(['./packages/custom/porkyou/server/views/includes/*.js', './packages/custom/porkyou/server/views/includes/*.css']), { // relative: true // no need for the './src/client' part // })) .pipe(gulp.dest('./packages/custom/porkyou/server/views/includes')) // output the index.html }) |
取り敢えずテスト的にbower
|
1 |
$ bower init |
リターン連続
|
1 |
$ bower install angular-translate --save |
でangular-translateをインストール
bower.jsonを確認
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
{ "name": "mean", "description": "MEAN.io: A fullstack JavaScript framework powered by MongoDB, ExpressJS, AngularJS, NodeJS.", "main": "", "authors": [ "https://......." ], "license": "MIT", "homepage": "https://.......", "moduleType": [ "node" ], "ignore": [ "**/.*", "node_modules", "bower_components", "test", "tests" ], "dependencies": { "angular-translate": "^2.15.1" } } |
dependenciesに挿入されて
bower_componentsフォルダにangular-translateがインストールされているのを確認。
では、gulp wiredepを実行。
|
1 |
gulp wiredep |
↓はhead.html, foot.htmlに設置
|
1 2 3 4 5 6 |
// cssが挿入される場所 <!-- bower:css --> <!-- endbower --> // javascriptが挿入される場所 <!-- bower:js --> <!-- endbower --> |
これでちゃんとhead.html, foot.htmlにbowerからのcss, javascriptが挿入されていることを確認。
基本は相対パスで挿入されてしまう。
絶対パスがいいので↓のようにgulpfile.jsを変更
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
// bowerのスクリプトをHTMLに埋め込む gulp.task('wiredep', function() { var wiredep = require('wiredep').stream; return gulp .src(['./packages/custom/porkyou/server/views/includes/head.html', './packages/custom/porkyou/server/views/includes/foot.html']) .pipe(wiredep({ ignorePath: '../../../../../../bower_components/', fileTypes: { html: { replace: { js: '<script src="/bower_components/{{filePath}}"></script>', css: '<link rel="stylesheet" href="/bower_components/{{filePath}}" />' } } } })) // wiredep bower dependencies // .pipe($.inject(gulp.src(['./packages/custom/porkyou/server/views/includes/*.js', './packages/custom/porkyou/server/views/includes/*.css']), { // relative: true // no need for the './src/client' part // })) .pipe(gulp.dest('./packages/custom/porkyou/server/views/includes')) // output the index.html }) |
AWSの提供するサービスでCodeCommitと言うものがある、
これは要はGitHubみたいな動きをしてくれるのだが。。
ちょっと何かと惜しくて。
煩わしいです。
私の場合、AWSを使っているからといって使ってみたら
Macからgit cloneをしようとしても403エラーを回避できなくなってしまいました。
Macの403エラー回避方法がAWSオリジンのサイトに乗っているので、
その方法でKeyChainなどをいじったり、やってみたのだが、全く効果なし。
残念ですが、取り敢えず今のところCodeCommit自体を使うことが間違えという結論に至りました。