ブラウザ自動化処理、最終的にChromyにした

ブラウザ作業を自動化するためにいろんなパッケージで悩んだが、

最終的にChromyを使用することにした。

Chromyはnightmareとほぼ同じだが、Chromeのブラウザで扱うことが出来る。

そして、nightmareはSeleniumベースなので、つまりChromyもSeleniumベース。

> npm install chromy

1	> npm install chromy

で簡単にインストールできる。

非同期処理を行うのでvoも入れておく

> npm install vo

1	> npm install vo

selenium-webdriverブラウザ定番作業自動化

なんだかんだ、ブラウザ

selenium-webdriverでブラウザ定番作業を自動化する。

インストール

npm install selenium-webdriver

1	npm install selenium-webdriver

Chromeで自動操作をさせたいので、Chromeのドライバーもインストール

npm install chromedriver

1	npm install chromedriver

コードは、例えば以下のような感じです。

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();

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を操作するために

System.setProperty("webdriver.chrome.driver","./node_modules/chromedriver/lib/chromedriver/chromedriver");
options.addArguments("user-data-dir=ユーザデータディレクトリ");
options.addArguments("--start-maximized");

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ブラウザ定番作業自動化

覚え書きとして、

Nightmarejsは、JavaScriptでブラウザを操作するためのライブラリ

インストール

> npm install nightmare

1	> npm install nightmare

PHPStormでJSCS: Please path to ‘JSCS’ packageの警告

JSCSとは、Javascriptのコーディングの見た目を統一するためのJavascriptの一つのライブラリのことです。

PHPStorm/WebStormでこのJSCSが求められる場合があります。

「JSCS: Please path to ‘JSCS’ package」っと警告のメッセージ。

まずは、JSCSをインストールする必要があります。

> npm install -g 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でES6(ECMAScript 6)を使う

PHPStormで拾ってきたコードを貼り付けてみると、

PHPStromからのエラーだらけ。。

拾ってきたJavascriptのコードがES6(ECMAScript 6)の仕様で書かれていました。

PHPStromにJavascriptがES6の仕様で書かれてますよっと知らせるには、

PHPStrom->Preference->Language&Frameworks->Javascript

のダイアログで、

Javascript language version を「ECMAScript 6」に設定して、

OKをクリック。

Selenium-WEBブラウザ定番作業を自動化

覚え書きとして、

WEBブラウザの定型作業を自動化のためのシステム

Selenium

このシステムは

スクリプトで記述した操作を、WebDriverを介してブラウザに伝えることが出来る。

WebDriverは各種のブラウザに対応したものが用意されており、使いたいブラウザに合わせて選ぶ。

Webプログラマとして一番のメリットはスクリプトをJavascriptで書くことが出来るので学習コストがかからない。

もともとWeb開発のテスト向けに作られたものである。

なので、画面のスクリーンショットを取得できたりする機能など痕跡をたどる機能もついている。

今回はWeb作業の自動化のために使用することにになるが、今後Webテストなどで活用することもできそう。

MEAN.IOではEclipseは、もう限界。。WebStormに乗り換え。

いままで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月間は試用期間があるので、それを試してみます。

MEAN.IOでnpmでjavascriptのパッケージインストール・インポート

件名の通り

まずは、入れたいパッケージをnpmでインストール

$ npm install angular-translate --save

1	$ npm install angular-translate --save

/app.jsの上の方に

import 'angular-translate';

1	import 'angular-translate';

して

gulp

gulp

angular-translateを/bundle/app.jsにもとめて入れ込んでくれる。

mean.ioのデフォルトでインストールした状態なら

/packages/custom/…./server/views/includes/foot.html

に

<script type="text/javascript" src="/bundle/app.js"></script>

1	<script type="text/javascript" src="/bundle/app.js"></script>

と書かれているはず。

gulpでbowerのパッケージを自動挿入

gulp-injectを使う。

インストール(開発環境だけでいいので、–save-dev)

npm install --save-dev wiredep

1	npm install --save-dev wiredep

挿入されるhtmlを編集

// cssが挿入される場所
<!-- bower:css -->
<!-- endbower -->
// javascriptが挿入される場所
<!-- bower:js -->
<!-- endbower -->

// cssが挿入される場所

// javascriptが挿入される場所

パッケージの挿入先を指し示すためgulpfile.js編集

// 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のスクリプトを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

$ bower init

1	$ bower init

リターン連続

$ bower install angular-translate --save

1	$ bower install angular-translate --save

でangular-translateをインストール

bower.jsonを確認

{
  "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"
  }
}

{

"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を実行。

gulp wiredep

1	gulp wiredep

↓はhead.html, foot.htmlに設置

// cssが挿入される場所
<!-- bower:css -->
<!-- endbower -->
// javascriptが挿入される場所
<!-- bower:js -->
<!-- endbower -->

// cssが挿入される場所

// javascriptが挿入される場所

これでちゃんとhead.html, foot.htmlにbowerからのcss, javascriptが挿入されていることを確認。

基本は相対パスで挿入されてしまう。

絶対パスがいいので↓のようにgulpfile.jsを変更

// 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
})

// 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はまだ未成熟

AWSの提供するサービスでCodeCommitと言うものがある、

これは要はGitHubみたいな動きをしてくれるのだが。。

ちょっと何かと惜しくて。

煩わしいです。

私の場合、AWSを使っているからといって使ってみたら

Macからgit cloneをしようとしても403エラーを回避できなくなってしまいました。

Macの403エラー回避方法がAWSオリジンのサイトに乗っているので、

その方法でKeyChainなどをいじったり、やってみたのだが、全く効果なし。

残念ですが、取り敢えず今のところCodeCommit自体を使うことが間違えという結論に至りました。

M	T	W	T	F	S	S
« Nov
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

HARD WORKER

カンボジア・プノンペンのフリーWEBプログラマー

Category: TOOL/ツール

ブラウザ自動化処理、最終的にChromyにした

selenium-webdriverブラウザ定番作業自動化

nightmarejsブラウザ定番作業自動化

PHPStormでJSCS: Please path to ‘JSCS’ packageの警告

PHPStormでES6(ECMAScript 6)を使う

Selenium-WEBブラウザ定番作業を自動化

MEAN.IOではEclipseは、もう限界。。WebStormに乗り換え。

MEAN.IOでnpmでjavascriptのパッケージインストール・インポート

gulpでbowerのパッケージを自動挿入

AWSのCodeCommitはまだ未成熟