ブラウザ作業を自動化するためにいろんなパッケージで悩んだが、
最終的に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テストなどで活用することもできそう。
パッケージをインストール
|
1 2 3 4 5 |
$ npm install angular-translate $ npm install angular-translate-storage-cookie $ npm install angular-translate-storage-local $ npm install angular-translate-loader-static-files $ npm install angular-translate-handler-log |
HTML
|
1 2 3 |
<md-select ng-model="selectedLanguage" ng-model-options="{trackBy: '$value.id'}" ng-change="setSelectedLanguage(selectedLanguage);" style="font-size: 15px;"> <md-option ng-value="language" ng-repeat="language in languages">{{ language.name }}</md-option> </md-select> |
AngularJS
|
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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
(function () { 'use strict'; angular.module('mean.meanStarter', ['ngMaterial', 'pascalprecht.translate']) .controller('StarterController', StarterController) .config(['$translateProvider', function($translateProvider) { // デフォルトは、ブラウザの言語設定に依存する var selectedLanguage = $translateProvider.resolveClientLocale().substr(0,2); // クッキーが設定されている場合は、クッキーの言語にする var $cookies; angular.injector(['ngCookies']).invoke(['$cookies', function(_$cookies_) { $cookies = _$cookies_; }]); $translateProvider.useStaticFilesLoader({ prefix: '/meanStarter/assets/i18n/locale-', suffix: '.json' }); if($cookies.get('selectedLanguage')) { selectedLanguage = $cookies.get('selectedLanguage'); } $translateProvider.preferredLanguage(selectedLanguage); $translateProvider.fallbackLanguage('en'); $translateProvider.useMissingTranslationHandlerLog(); $translateProvider.useLocalStorage(); $translateProvider.use(selectedLanguage); }]); StarterController.$inject = ['$scope', 'Global', '$translate', '$cookies']; function StarterController ($scope, Global, $translate, $cookies) { $scope.global = Global; $scope.package = { name: 'meanStarter' }; // 言語の切り替え $scope.languages = [ { id: 'en', name: 'ENGLISH' }, { id: 'ja', name: '日本語' } ]; // 言語選択でデフォルトセット $scope.selectedLanguage = { id: 'en', name: 'ENGLISH' }; if($cookies.get('selectedLanguage')) { angular.forEach($scope.languages, function(val, key) { if($translate.proposedLanguage() == val.id) { $scope.selectedLanguage = val; } }) } // 言語の切り替えをクッキーに反映させる $scope.setSelectedLanguage = function(selectedLanguage) { var dayForCookies = new Date(); // 365日間は言語設定のクッキーを保持 dayForCookies.setDate(dayForCookies.getDate() + 365); var cookiesOption = {expires: dayForCookies, path: '/'}; $cookies.put('selectedLanguage', selectedLanguage.id, cookiesOption); $translate.use(selectedLanguage.id); }; } })(); |
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(Amazon Web Server)でVPS(Virtual Private Server)を作成。
OSにAmazon Linux AMI
CPUにti.micro
キーペアをダウンロードして、完了
キーペアは一度しかダウンロードできないので大切に保存。
完成したら、IPv4 Public IPに向けて接続する。
MACの場合
|
1 |
ssh -i (キーペア) em2-user@(IPv4 Public IP) |
ちなみにこのときにキーペアへのパーミッションエラーが出る場合がある。
そのときはキーペアの属性をchmodで400にしてやる。
エラーの原因がほかのユーザも閲覧できるということだから、
属性をかえて自分しか見れないようにする。
で接続、早速↓みたいなメッセージが出ている
|
1 2 |
Run "sudo yum update" to apply all updates. -bash: warning: setlocale: LC_CTYPE: cannot change locale (UTF-8): No such file or directory |
のですなおに
|
1 |
$ sudo yum update |
それから/etc/environmentというファイルを作成
|
1 2 |
LC_ALL=en_US.UTF-8 LC_CTYPE=en_US.UTF-8 |
と入力・保存。
これで次回ログインから問題なし。
|
1 |
<span class="line"><span class="linebody"> npm update -g</span></span> |
コマンドでNode.jsを更新したら、npmコマンドが使えなくなった。
|
1 2 |
user-no-MacBook-Pro:workspace user$ npm -v -bash: npm: command not found |
。。。なぜ。。何故なのか分かりません。
Googleにたずねてみると、結構起きている現象みたいです。
何故だかわからないのですが、ここから再インストールして一応解決しました。