Monthly Archives: 9月 2015

Walking #017

 

日付 曜日 歩数
2015.09.20 8951
2015.09.21 6894
2015.09.22 7124
2015.09.23 5533
2015.09.24 4576
2015.09.25 4669
2015.09.26 18777
合計
56524

 

Node.js #005 – 指定したURLのキャプチャ画像作成

 

Node.jsで指定したURLのキャプチャ画像作成をしたい場合は下記のように記述していきます。

まず、npmでPhantomJSとCasperJSをグローバルインストールする必要があります。
PhantomJS:ブラウザ操作の自動化をサポートしてくれるツール
CasperJS:PhantomJSをより手軽に使うためのライブラリ

 

 

※CasperJSをnpmでインストールする場合はPythonもインストールされている必要があります。

 

script.js

 

下記のコマンドでscript.jsを実行すると指定URLのキャプチャ画像が作成されます。

 

node.js_005_01

 

node.js_005_02

 
 

  • 参考文献
JS+Node.jsによるWebクローラー/ネットエージェント開発テクニック

 

Node.js #004 – ローカルWebサーバー構築

 

Node.jsでローカルWebサーバーを構築する方法を探していて
「http-server」というモジュールを見つけたので紹介したいと思います。

 

まずNode.jsのインストールをします。
サイトから最新バージョンのインストーラーをダウンロードします。

Node.js
 

node.js_004_01

 

ダウンロードされたインストーラーを実行して
画面通りに進んでいくとNode.jsがインストールされます。

 

次に、インストールされた「Node.js command prompt」を起動します。

下記コマンドを記述してバージョン情報が表示されていれば正常にインストールされています。

 

node.js_004_02

 

次に、Node.jsのモジュールを管理するためのツール「npm」を利用して
「http-server」モジュールをグローバルインストールします。

 

node.js_004_03

 

これで準備完了です。
後は下記コマンドを実行するだけでWebサーバーを起動できます。

 

パスを指定したい場合:

 

Webサーバー起動時にブラウザも起動:

 

node.js_004_04

 

Node.jsではApacheよりも手軽にWebサーバーが構築できてすごく便利です。

 
 

  • 参考文献

http-server

 

Node.js #003 – RSSを取得

 

Node.jsでRSSを取得したい場合は下記のように記述します。

 

script.js

 

script.jsを実行すると下記のようにRSSのタイトルがコマンドプロンプトに表示されます。

node.js_003_01

 

HTMLをjQueryライクにパースしてくれる「cheerio-httpcli」モジュールを利用することで手軽にRSSが取得できます。

 

日付を取得:

 
 

  • 参考文献
JS+Node.jsによるWebクローラー/ネットエージェント開発テクニック

 

Node.js #002 – 画像をダウンロード

 

Node.jsで任意のWebsite画像をダウンロードしたい場合は下記のように記述します。

 

script.js

 

script.jsを実行すると下記のように画像がダウンロードされます。

node.js_002_01

 

node.js_002_02

 

ダウンロード処理には手軽に記述できる「request」モジュールを利用します。

 

非同期ではない状態でカレントディレクトリにimgフォルダを作成:

 

ダウンロード処理:

 
 

  • 参考文献
JS+Node.jsによるWebクローラー/ネットエージェント開発テクニック

 

Node.js #001 – 画像のURL取得

 

Node.jsで任意のWebsite画像のURLを取得したい場合は下記のように記述します。

 

script.js

 

script.jsを実行すると下記のようにコマンドプロンプトに表示されます。

node.js_001_01

 

HTMLをjQueryライクにパースしてくれる「cheerio-httpcli」モジュールとパスを操作する「url」モジュールを利用することで手軽に取得することができます。

 
 

  • 参考文献
JS+Node.jsによるWebクローラー/ネットエージェント開発テクニック

 

Walking #016

 

日付 曜日 歩数
2015.09.13 3749
2015.09.14 6384
2015.09.15 6684
2015.09.16 5196
2015.09.17 5102
2015.09.18 6252
2015.09.19 3969
合計
37336

 

CSS3 #008 – 画像の加工

 

CSS3で画像の加工をしたい場合は下記のように記述します。

 

index.html

 

stylesheet.css

 

index.htmlを実行すると下記のようにブラウザで表示されます。
利用する場合にはベンダープレフィックスが必要です。

CSS3_008_03

 

グレースケールに加工:

 

セピアに加工:

 
 

CSS3 #007 – マウスオーバーで要素変更

 

CSS3でマウスオーバーで要素変更したい場合は下記のように記述します。

 

index.html

 

stylesheet.css

 

index.htmlを実行すると下記のようにブラウザで表示されます。

CSS3_007_02

 

要素にマウスオーバーすると要素が拡大されます。

 

要素を2秒で変更:

 

要素を拡大:

 
 

CSS3 #006 – 要素を移動

 

CSS3で要素を移動したい場合は下記のように記述します。

 

index.html

 

stylesheet.css

 

index.htmlを実行すると下記のようにブラウザで表示されます。

CSS3_006_02
 

移動位置を変更:

 
 

CSS3 #005 – 要素を歪ませる

 

CSS3で要素を歪ませる場合は下記のように記述します。

 

index.html

 

stylesheet.css

 

index.htmlを実行すると下記のようにブラウザで表示されます。

CSS3_005_01

 

歪みの角度を変更:

 
 

CSS3 #004 – 要素を拡大縮小

 

CSS3で要素を拡大縮小したい場合は下記のように記述します。

 

index.html

 

stylesheet.css

 

index.htmlを実行すると下記のようにブラウザで表示されます。

CSS3_004_02

 

要素を縮小:

 
 

CSS3 #003 – 要素を回転

 

CSS3で要素を回転したい場合は下記のように記述します。

 

index.html

 

stylesheet.css

 

index.htmlを実行すると下記のようにブラウザで表示されます。

CSS3_003_01

 

回転角度を変更: