gulpで作成したwebサーバーにiphoneからアクセスする

● gulpfileの設定

gulpfile.js

var webserver = require('gulp-webserver');
gulp.task('webserver', function() {
  gulp.src('./www/') //Webサーバーで表示するサイトディレクトリ
    .pipe(webserver({
      livereload: true,
      host: '0.0.0.0', // ← 0.0.0.0を設定すると同一ネットワーク内から見ることができます
    }));
});



● gulp webserverの起動

gulp webserver

● サーバーを立てたマシンのipアドレスを調べる(Macの場合)

システム環境設定 > ネットワーク > ipアドレス の欄を見てipアドレスを取得します

● iphoneからアクセスする

先ほど調べたipアドレスが192.168.0.10 の場合は iphoneから http://192.168.0.10:8000/ にアクセスします

No.1140
05/09 15:53

edit

node.jsでファイル一覧を取得する

ファイル一覧を取得する

Node.js でファイル一覧を取得するサンプルコード (2015-11-10) http://bit.ly/2q7nxjW

No.1136
04/25 00:50

edit

node.jsでオブジェクトの中身を一気に表示する

node.jsでオブジェクトの中身を一気に表示するにはconsole.logで表示しても良いのですが
次のようにすると楽に見れます

● utilのインストール

npm install util --save-dev

● utilの使い方

通常

console.log(results);

とする代わりに

var util = require('util');
console.log(util.inspect(results,false,null));

とします。

No.1135
04/25 00:41

edit

node.jsでphpと同じTwigテンプレートを使用する

● node.jsでphpと同じTwigテンプレートを使用する

システムの開発がphpかつテンプレートエンジンTwigを使用する場合
デザイン過程で静的なhtmlを作戦する場合にもTwigを使用しておくとプログラムへのテンプレート化する時に
作業を省くことができます

実はGulpにはPHPと同じTwigテンプレートがあるのでこちらを使用します。
node.js とGulp はあらかじめインストールしておきます。

● Gulp でTwig を扱うgulp-twigをインストールする

npm install  gulp-twig  --save-dev

● gulp-twigでコンパイルするための設定を gulpfile.js に作成する

以下の仕様でコンパイルするよう設定を記述します

● ./twig/ ディレクトリ以下の全ての html ファイルをTwigテンプレートを使用してコンパイルし、./www/ ディレクトリ内に生成する。
● アンダースコアで始まるファイルはコンパイルしない。

gulpfile.js 以下のとおり作成する

// twig コンパイル設定
var gulp   = require('gulp');
var twig   = require('gulp-twig');
var rename = require('gulp-rename');
gulp.task('twig', function () {
    'use strict';
    gulp.src(['./twig/*.html', './twig/*/*.html', '!./twig/_*.html'])
    .pipe( twig({}) )
    .pipe(gulp.dest('./www/'));
});

● gulp-twig によるコンパイルの実行

gulp twig

● テンプレートファイル内で書き出される html のファイル名を取得する

テンプレートファイル内に以下のように記述します

{{ _target.relative }}
No.1119
04/17 10:19

edit

Twig

node js でwindowsやMacのアプリケーションを制作することができる electron をインストールする

● electronとは?

electonとは html や css や javascript などといった web 制作の技術を使ってデスクトップ上のアプリケーションを制作しようというものです。 ( まず node js が必要になりますので node js のインストールを完了させておいてください )

● electron をインストールする

 npm install -g  electron
 npm install -g  electron-packager 

● Helloworldプログラムに必要な3つのファイルを用意する

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello Electron!</title>
</head>
<body>
<h1>Hello Electron!</h1>
Node version: <script>document.write(process.versions.node)</script>,
Chrome version: <script>document.write(process.versions.chrome)</script>,
Electron version: <script>document.write(process.versions.electron)</script>.
</body>
</html>

main.js

const { app, BrowserWindow } = require('electron');
let win;
function createWindow() {
    win = new BrowserWindow({ width: 800, height: 600 });
    win.loadURL(`file://${__dirname}/index.html`);
    win.on('closed', () => {
        win = null;
    });
}
app.on('ready', createWindow);
app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});
app.on('activate', () => {
    if (win === null) {
        createWindow();
    }
});

package.json

{
  "name": "myapp",
  "version": "0.0.1",
  "main": "main.js"
}

● プログラムを実行する

electron .

● アプリを作成する(ビルド)

  1. electonのバージョンを調べる
    electron -v
    

    (例 : v1.6.2)

  1. electron-packagerアプリケーションを作成する
    electron-packager <ディレクトリ>  <アプリ名(拡張子は除く)>  --platform=darwin,win32  --arch=x64  --version=<バージョン>  --overwrite
    

● electron 関連リンク

https://qiita.com/tags/electron
https://teratail.com/questions/search?q=electron&search_type=and
http://bit.ly/2nYCc4d
http://bit.ly/2n8dA47

● 実際にelectronを使って制作されたプログラム

※ iCultus(常駐型カレンダー)

https://github.com/djyde/iCultus

※ comma-chameleon(CSVエディタ)

https://github.com/theodi/comma-chameleon

● MacからWindowsビルド用パッケージのインストール

nodebrew を使って以下のパッケージをインストールします

brew cask install xquartz(途中で管理者パスワードの入力を求められます)
brew install wine
No.1110
03/28 00:53

edit

node.js の 複数のバージョンを管理できる nodebrew をインストールする

● (Mac)まず homebrew でインストールしてある node.js nodebrew をアンインストールする

brew uninstall nodebrew
brew uninstall node

● (Mac または Linux)に nodebrew をインストールする

curl -L git.io/nodebrew | perl - setup

.bashrc の最後にパスを追加

cd
vi .bash_profile

下記の2行を追加します

# nodebrew
export PATH=$HOME/.nodebrew/current/bin:$PATH

 
正しくインストールされたか確認します。

source ~/.bash_profile
nodebrew help

バージョンが表示されればOKです。

● nodebrew を使って好きなバージョンの node.js をインストールする

・インストール可能な node.js の全バージョンを表示する

nodebrew ls-remote

・(例)Node.js v7.10.0 バージョンをインストールする

nodebrew install-binary v7.10.0

・(例)Node.js v7.10.0 バージョンに切り替える

nodebrew use v7.10.0

・Node.js が正しくインストールされていることを確認する

node -v

バージョン名が正しく表示されればOKです。

No.1069
05/07 19:56

edit

node.js

node.js で sqlite3 を扱う

● node.js 用 sqlite3 モジュール「sqlite3」をインストールする

npm install sqlite3

● sqlite3のデータベース「mydb.sqlite3」を作成する

sqlite3 mydb.sqlite3

● 続けてデータベース内にテーブル「user_dt」を作成する

CREATE TABLE  user_dt  (
  data_id       INTEGER PRIMARY KEY AUTOINCREMENT,
  user_name     TEXT,
  modified_date DATETIME
);

● .quit コマンドでsqliteを抜ける

.quit

● スクリプトファイル test.js を以下の内容で作成する

```
var sqlite3 = require('sqlite3').verbose();
var mydb    = new sqlite3.Database('./mydb.sqlite3');
mydb.run("INSERT INTO user_dt (user_name,modified_date) VALUES ('taro yamada', datetime('now', 'localtime') )");
```

##● スクリプトを実行してデータベースにデータを1件登録する
```
node test.js
```

##● node.js + sqlite3 で使用できる クエリービルダー
http://knexjs.org  
https://hiddentao.com/squel/  

##● node.js + sqlite3  で使用できる O/Rマッパー
http://docs.sequelizejs.com/en/v3/  
No.1068
12/09 16:35

edit

SQLite

ヘッドレスブラウザ(phantomJS, slimerJS )でWEBサイトをスクレイピングする

ヘッドレスブラウザ

● phantomJS

WebKit(Safari) ベースのヘッドレス(画面なし)ブラウザ

・phantomJSのインストール方法(Mac)

brew install phantomjs

・phantomJSのインストール方法(CentOS7)

yum -y install freetype
yum -y install fontconfig
npm install -g phantomjs

● slimerJS

Gecko(firefox) ベースのヘッドレス(画面なし)ブラウザ

・slimerJSのインストール方法(Mac)

brew install slimerjs

・slimerJSのインストール方法(CentOS7)

npm install -g slimerjs

● casperJS

ヘッドレスブラウザを簡単に扱うライブラリ(JavaScript)です。 このcasperJSから「phantomJS」または「slimerJS」を操作します。

・casperJSのインストール方法(Mac)

brew install casperjs

・casperJSのインストール方法(CentOS7)

yum -y install freetype
yum -y install fontconfig
npm install -g casperjs

● casperJSからブラウザを操作して画面のスクリーンショットを撮る

```
var AnchorArrays = [];
var casper = require('casper').create();
casper.start('http://flatsystems.net/kakunin.php', function() {
});
casper.then(function() {
    this.capture('kakunin.png');
});
casper.run();
```

###● casperJSからphantomJSで起動する
```
casperjs  test.js
```

###● casperJSからslimerJSで起動する
```
casperjs  --engine=slimerjs test.js
```
slimerJSで起動するときは ```--engine=slimerjs``` を追加します。


###● casperJSコードを実際のブラウザソースから生成する Chrome拡張機能
#####・Resurrectio
https://chrome.google.com/webstore/detail/resurrectio/kicncbplfjgjlliddogifpohdhkbjogm

No.1067
12/17 23:31

edit

スクレイピング
xpath
slimerjs
phantomjs

ブラウザ slimerjs(firefox)の使い方

slimerjs のインストール

Mac OSX の場合は brew でインストールできます

brew install slimerjs

slimerjs のバージョンを確認する

インストールが完了したらバージョンを確認しておきます

slimerjs -v

slimerjs でWEBページのスクリーンショットを撮る

```
var page = require("webpage").create();
page.open('http://zozo.jp/')
    .then(function(status){
        if(status === 'success'){
            console.log(page.title);
            page.render('test.png');
        }
        phantom.exit();
    });
```
実行します
```
slimerjs test.js
```


# slimerjs をCUI環境で実行させる
slimerjsはGUI環境下でないと動作しません。
CUIで実行すると
```
slimerjs --debug=true XXXXX.js 
```
```
Error: no display specified
```
というエラーになります。

そこで  CUI でも実行できるように Xvfb( X virtual framebuffer ) をインストールします。

```
yum -y install xorg-x11-server-Xvfb
```
    
Xvfbの使い方は 実行したい処理の前に ```xvfb-run``` を付け加えます
```
Xvfb slimerjs --debug=true XXXXX.js 
```
これでCUI下の環境でも実行できます。


No.1063
12/17 22:34

edit

phantomjs
slimerjs

Herokuでphantomjsを使う

Heroku上でヘッドレスWEBブラウザ phantom.js を使用するにはビルドパックを追加します。 ビルドパックをGithub上で公開してくれている方がいるのでありがたく利用させていただきます。

● heroku-buildpack-phantomjs

https://github.com/stomita/heroku-buildpack-phantomjs

ターミナルから以下を実行

cd "アプリのあるディレクトリ"
heroku login
heroku buildpacks:add --index 1 https://github.com/stomita/heroku-buildpack-phantomjs
git push heroku master

● phantomjs がHeroku上にあるか確認する

heroku run phantomjs -v

バージョンが帰ってくればOK

● Heroku上のphantomjsから他のWEBサイトにアクセスできるか確認する

・1.アプリのあるディレクトリに `phantom_test.js` ファイルを以下の内容で作成します。

var page = require('webpage').create();
page.open('http://yahoo.co.jp/', function(status) {
  console.log("Status: " + status);
  if(status === "success") {
    page.render('example.png');
  }
  phantom.exit();
});

・2.Heroku上に再デプロイします。

git add .
git commit -m "add buildpack"
git push heroku master

・3.phantomjsでスクリプトを実行します。

heroku run phantomjs phantom_test.js

「Status: success」が帰ってくればOK

● 日本語フォントを追加して文字化けを解消する

フォントは `./fonts` ディレクトリに .ttf フォントファイルを置いて git push すればOKです。
フォントファイルは著作権に注意して使用しましょう

・フリーの日本語フォントファイル Google Noto Sans

https://www.google.com/get/noto/#sans-jpan

・Heroku上の日本語フォントが正しく認識されているか確認する

heroku run fc-match sans:lang=ja
No.1061
12/17 17:33

edit

Heroku
phantomjs

Herokuのビルドパック(buildpack)の扱い方

Buildpacks | Heroku Dev Center

● 現在使用中の buildpack を表示する

heroku buildpacks

● buildpack をセットする

heroku buildpacks:set "ビルドパック名またはURL"

● buildpack を追加する

heroku buildpacks:add "ビルドパック名またはURL"

● buildpack を削除する

heroku buildpacks:remove "ビルドパック名またはURL"

● 全てのbuildpack を削除する

heroku buildpacks:clear
No.1060
10/03 14:47

edit

Heroku

node.js で phantomJSを使用する

node.js から phantomJSを使用するには下記2つの方法がおすすめです。

  • 1.モジュール Nightmare を使う方法(実行経過が見えるのでおすすめです。)
  • 2.モジュール node-horseman を使う方法

● 1.モジュール Nightmare.js を使って phantomJS を操作する

● モジュール nightmare , vo のインストール

npm install nightmare
npm install vo

● テストプログラムを実行する(Googleへアクセスしてタイトルを取得)

・下記コードを `test.js` で保存

var Nightmare = require('nightmare');
var google = new Nightmare()
    .viewport(1000, 1000)
    .useragent("Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.111 Safari/537.36")
    .goto('http://google.com')
    .evaluate(function () {
      return {
        title: document.title,
        href : location.href
      };
    })
    .run(function(err, nightmare) {
        if (err) return console.log(err);
        console.log('Done!');
        console.log(nightmare);
    });

・テストコードを実行

node test.js

GoogleホームページのタイトルとURLが表示されればOKです。

● テストプログラムを実行する(niconicoへアクセスしてログインする)

・下記コードを `niconico_login.js` で保存

var Nightmare = require('nightmare');
var vo = require('vo');
vo(function* () {
  var nico_id   = '###メールアドレス###';
  var nico_pass = '###パスワード###';
  var nightmare = Nightmare({ show: true });
  var link = yield nightmare
    .goto('https://account.nicovideo.jp/login')
    .type('input[id="input__mailtel"]', nico_id)
    .type('input[id="input__password"]', nico_pass)
    .click('#login__submit')
    .wait(2000)
    .then(function() {
      console.log('終了しました');
    });
  yield nightmare.end();
  return link;
})(function (err, result) {
  if (err) return console.log(err);
});

・テストコードを実行

node niconico_login.js

ニコニコ動画にログインできればOKです。

● 2.モジュール node-horseman を使って phantomJS を操作する

● モジュール node-horseman のインストール

npm install node-horseman

● テストプログラムを実行する

・下記コードを `test.js` で保存

var Horseman = require('node-horseman');
var horseman = new Horseman();
var filename = 'test.png';
horseman
    .userAgent('Mozilla/5.0 (Windows NT 6.1; WOW64; rv:27.0) Gecko/20100101 Firefox/27.0')
    .open('http://www.google.com')
    .type('input[name="q"]', 'github')
    .click('[name="btnK"]')
    .keyboardEvent('keypress', 16777221)
    .waitForSelector('div.g')
    .count('div.g')
    .log() // prints out the number of results
    .screenshot(filename)
    .log(filename)
    .close();

・テストコードを実行

node test.js

Googleの検索結果の画面が test.png に保存されれば正常に動作しています。

参考 : https://www.sitepoint.com/?p=124173

No.1059
10/03 12:44

edit

PhantomJSの使い方

●インストール (MacOSX Homebrew を使ってインストール)

brew install phantomjs

●インストール (その他のインストール方法)

http://phantomjs.org/download.html

●PhantomJSの動作確認

`hello.js` という名前で下記のコードを保存します。

console.log('Hello, world!');
phantom.exit();

・実行します

phantomjs hello.js 

・実行結果



#●PhantomJSを使ってWEBページ(例:ヤフー)のページのスクリーンショットを撮る
####・page.js という名前で下記のコードを保存します。
```
var page = require('webpage').create();
page.open('http://www.yahoo.co.jp', function(status) {
  console.log("Status: " + status);
  if(status === "success") {
    page.render('page.png');
  }
  phantom.exit();
});
```

####・実行します
```
phantomjs page.js 
```

####・実行結果
同じフォルダに page.png というキャプチャ画像があれば成功です。
No.1058
09/25 13:59

edit

Herokuの使い方

● Herokuの使い方

(「ユーザー登録してWEBアプリをデプロイしてHeroku上で実行する」までの方法)

・1. Herokuへのユーザー登録

https://www.heroku.com/
からユーザー登録を行う

・2. Heroku Command Line(Heroku CLI)のインストール

https://devcenter.heroku.com/articles/heroku-command-line
からインストーラをインストール

・3. Herokuへログイン

heroku login

・4. ひな形を使ってデプロイをテスト

git clone https://github.com/heroku/ruby-getting-started.git
cd ruby-getting-started
heroku create

ここまで行うとURLが自動発行されます

https://XXXXX.herokuapp.com/ | https://git.heroku.com/XXXXX.git

git pushします

git push heroku master

```
git remote rm heroku
```
としてから
```
heroku create
git push heroku master
```
とします。

ブラウザで開く  
```
heroku open
```

##・5. node.js アプリをherokuにデプロイ
```
cd  "アプリのディレクトリ"

git init
git add .
git commit -m "first commit"

heroku create
git push heroku master
heroku open
```


##・6. node.js アプリを修正した時の再デプロイ
```
git add .
git commit -m "change xxxxx"
git push heroku master
heroku open
```



##・よく使うherokuコマンド
### ▼ herokuへログイン
```
heroku login
```
「メールアドレス」「パスワード」を入力してログインします。

### ▼ heroku上のアプリを表示
```
heroku apps
```
と入力すると herokuアプリが

```
hogehoge-fugafuga-12345
hunihuni-furifuri-67890
```
という風に表示されます。


### ▼ herokuアプリをブラウザで表示
アプリ ``` hogehoge-fugafuga-12345 ``` をブラウザで表示するには

```
heroku open --app hogehoge-fugafuga-12345
```
と入力します。
またはブラウザのアドレス欄に直接

```
https://hogehoge-fugafuga-12345.herokuapp.com
```
と入力してもOKです。



### ▼ heroku上のアプリを削除
アプリ ``` hogehoge-fugafuga-12345 ``` を削除するには

##### ● 確認なしで削除
```
heroku apps:destroy --app hogehoge-fugafuga-12345 --confirm hogehoge-fugafuga-12345
```

##### ● 確認ありで削除
```
heroku apps:destroy --app hogehoge-fugafuga-12345
```


### ▼ heroku上でbashを使用する
```
heroku run bash
```

### ▼ heroku上で任意のコマンドを使用する
・Heroku上のホームディレクトリのファイル一覧を表示
```
heroku run pwd ;  ls -la
```
・Heroku上のphantomjsのバージョンを表示
```
 heroku run phantomjs -v
```



#●その他 Node.js が使える Paas

- openshift
- Google App Engine

[node.js - How can I run latest version of node on Openshift? - Stack Overflow](http://stackoverflow.com/questions/35029560/how-can-i-run-latest-version-of-node-on-openshift)  
[Google App Engine Node.jsを試してみる。 GAE/Node.js - Qiita](http://qiita.com/n0bisuke/items/fbea48562441a8314d45)  
[Google App Engineを無料で運用する方法(2016年版) - koni blog](http://koni.hateblo.jp/entry/2016/01/06/130613)  
No.1057
10/03 15:04

edit

Heroku

node.jsのスクレイピングモジュール

● cheerio-httpcli

>Node.jsでWEBページのスクレイピングを行う際に必要となる文字コードの変換と、cheerioによってパースしたHTMLをjQueryのように操作できるHTTPクライアントモジュールです。

特徴 : `文字コード自動変換,jqueryライクなセレクタ,フォーム簡易送信機能`

https://www.npmjs.com/package/cheerio-httpcli

・インストール

npm install cheerio-httpcli

● osmosis

>HTML/XML parser and web scraper for NodeJS.

特徴 : `xpathで要素の取得が可能 ,Aタグのリンクを自動的に辿れる`

https://www.npmjs.com/package/osmosis
マニュアル : https://github.com/rchipka/node-osmosis/wiki

・インストール

npm install osmosis

・スクレイピング例

【osmosis node.js】で検索した結果のリンクURLをスクレイピングします。

var osmosis = require('osmosis');
var url     =  'https://www.google.co.jp/search?client=safari&rls=en&q=osmosis&ie=UTF-8&oe=UTF-8&gfe_rd=cr&ei=JXMyWLv2NOjC8AernaPYAg#q=osmosis+node.js';
osmosis
.get(url)
.paginate("//*[@id='pnnext']",3)    // 最大 3ページ目まで
.set({
    'link_url'  :  ["//*[@id='rso']//h3/a/@href"] ,
    'link_title':  ["//*[@id='rso']//h3/a"] ,
})
.then(function( context, data){
    // console.log(context.request);
    console.log(data);
})
.done(function(){
    console.log("=================================\nscrape done.\n");
});

その他のスクレイピングモジュール : http://blog.webkid.io/nodejs-scraping-libraries/

No.1051
11/21 13:25

edit

xpath
スクレイピング