Chromeヘッドレスでスクレイピング Node.jsライブラリpuppeteer使ってみた

仕事の依頼でスクレイピングすることがあってヘッドレスブラウザを使ってみた。

目的

ホテルや病院などの検索WEBサイトから
検索結果の名前、住所、電話番号などCSVで取得する

ヘッドレスブラウザ

以前はPhantomJSが使われたようですが、Chromeのヘッドレスが今年リリースされたようで、実際両方使ってみたけどスピードはChromeの方が早い。

スクレイピングとは

ウェブサイトから情報を抽出するコンピュータソフトウェア技術のこと

ウェブスクレイピング - Wikipedia

Node.jsからChromeのヘッドレスを使うためのライブラリ

• chromy　https://github.com/OnetapInc/chromy
• puppeteer　https://github.com/GoogleChrome/puppeteer

chromyだとエラーが出てうまくいかなったし、以下の記事見てpuppeteerを使うことにしました。
ヘッドレスブラウザ(Chrome)を使ってSPAをスクレイピングする - Qiita

puppeteerがこれらのライブラリと一線を画すのは、なんと言っても本家ChromeのDevTool開発チームが作成・メンテナンスしている、という点でしょう。

環境

node v.8.9.1
npm 5.5.1
puppeteer

ソース

参考：puppeteer/search.js at main · puppeteer/puppeteer · GitHub

'use strict';

// puppeteer読込み
const puppeteer = require('puppeteer');
// ファイル読み書きライブラリ
const fs = require('fs');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto(【URL】);
  // スクレイピングするセレクタ
  await page.waitForSelector('#search_result .content');

  const links = await page.evaluate(() => {
    const anchors = Array.from(document.querySelectorAll('#search_result .content'));
    return anchors.map(anchor => anchor.textContent).map(text => text.trim().replace(/\s+/g, ','));
  });
  fs.writeFileSync( "puppeteer.csv" , links.join('\n') );

  await browser.close();
})();

スクレイピングも始めてて、Node.jsもほとんど未経験ですが結構簡単にできました！すごいね～。

参考

ヘッドレスブラウザ(Chrome)を使ってSPAをスクレイピングする - Qiita
--headless時代の本命？ Chrome を Node.jsから操作するライブラリ puppeteer について - Qiita

TechPlay 女子部の皆様へ謝罪

今回はTechPlay女子部のアドベンチャーカレンダーに参加させて頂きました！
初！アドベンチャーカレンダー！(*^^)v
TECH PLAY女子部 Advent Calendar 2017 - Qiita

ただ、私の担当は12日だったのに・・ずるずるずるるるうｚｚｚ
ここまで引き延ばしてすみませんでした。。しかも内容も予告してたのと違う・・
来年は計画的に頑張りまっす。

windows10 C++ コマンドプロンプトで実行した時に文字色・背景色を変える

環境

• windows 10
• visual studioでC++開発
• cmdで実行

やりたいこと

C++のソースにエスケープシーケンスを使って、ansiカラーを出力させる

#include <iostream>
using namespace std;

int main() {
 printf("\033[33m"); /* 文字色黄色 */
 cout << "HELLO" << endl;

 printf("\033[0m"); /* 色の初期化 */
 cout << "HELLO" << endl;
}

エスケープシーケンスでできること、色について

エスケープシーケンスとは、エスケープコードで始まる文字列で
その中で、ANSIエスケープコードを使って色を変える

• ANSIエスケープコードのフォーマット

ESC[n1;n2;...X

• ESCの8進、16進変換

¥033 : 8進数で表記
¥x1b : 16進数で表記

参考

• ANSIエスケープコード - コンソール制御 - 碧色工房
• もう一度基礎からC言語 第47回 特殊な画面制御～コンソール入出力関数とエスケープシーケンス エスケープシーケンスによる画面制御

実行してもうまくいかない。

上手く読み込まれず、色のコードがそのまま文字列として出力される

エスケープシーケンスを読み込むために ansicon を使う

windows xp 以下は　System32¥config.nt というファイルに設定を追加するだけで
エスケープシーケンスが読み込めてたみたいだけど
windows10には config.nt 設定ファイル自体が存在しない。

ansiconを使う

以下のサイトを参考にしました。

• Windows環境でRSpecなどの出力に色を付けるには - 萬由無事覚書

ansiconをインストールする。

1. アーカイブを展開
2. 任意の場所にコピー。

Pathを通して、実行コマンドの前に「ansicon」コマンドを追加する。

※参考サイトにあるAutoRunレジストリエントリはよく理解できなかったので、使わない。

Project.exe の実行

ansicon Project

ほかに出来ること。

printf("¥033[2J"); /* 画面をクリア */
printf("¥033[5;10H"); /* カーソルを移動 */
printf("\033[33m"); /* 文字色を黄色に */
printf("Hello!¥n"); /* メッセージを出力 */

printf("Press [Enter]...¥n"); /* メッセージを出力 */
(void)getchar(); /* キー入力を待つ */
printf("¥033[93m"); /* 文字色を標準に */

参考

• Windows7のコマンドプロンプトでansiカラーが出ない - まーぽんって誰がつけたの？

phpフォームからスプレッドシートに書込み

Google Apps Script(以下、GAS)を使ってPOSTでデータを受取る

概要

WEBフォームからデータを送信し、スプレッドシートに登録する

1. フォームからPOSTでGASにデータを送る
2. GASからスプレッドシートにデータ書込み・メール配信
3. フォームは送信と同時にiFrameを使って完了画面を表示する

スプレッドシートとGASの作成

スプレッドシートの作成

スプレッドシートを作成したら
一行目に「timestamp」と「<input>のname属性」を記入する。

GASの作成

スクリプト エディタ画面を開く
「ツール」→「スクリプト エディタ」を選択

Main Script（コード.gs）

function doPost(e) {
 // スプレッドシート読込
 var ss = SpreadsheetApp.openById(ScriptProperties.getProperty('active'));
 var sheet = ss.getSheetByName("【要変更】シート名");
 var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0]; //headder取得
 var last_row = sheet.getLastRow(); //最終行を取得
  
 // スプレッドシートにフォームのデータを挿入
 for(var key in e.parameter){
  for(var i = 0; i < headers.length; i++){
   // 「timestamp」列に時刻を挿入
   if(headers[i] === 'timestamp'){
    sheet.getRange(last_row + 1, i + 1).setValue(new Date())
    break
   }
   if(headers[i] === key){
    // ヘッダーとkeyが一致した時、その列の最終行にデータを挿入
    sheet.getRange(last_row + 1, i + 1).setValue(e.parameter[key])
    break
   } else if(headers.length === i + 1){
    // ヘッダーとkeyが一致しなかった時、そのkeyを新しいヘッダーとして追加しデータを挿入
    var new_column = sheet.getLastColumn() + 1
    sheet.getRange(1, new_column).setValue(key)
    sheet.getRange(last_row + 1, new_column).setValue(e.parameter[key])
   }
  }
 }

 // メールアドレスへ送信
 if(e.parameter.mail){
  send_mail(e.parameter.mail, headers, e.parameter)
 }
  
 //デバック用
 var app = UiApp.createApplication();
 var panel = app.createVerticalPanel();
 for( p in e.parameters){
  panel.add(app.createLabel(p +" "+e.parameters[p]));
 }
 app.add(panel);
 return app; 
}

 //セットアップ用
 function setUp() {
  var scriptProperties = PropertiesService.getScriptProperties();
  scriptProperties.setProperty('active', SpreadsheetApp.getActiveSpreadsheet().getId());
 }

 function send_mail(mail_address, headers, form_data){
  var text_mail = HtmlService.createTemplateFromFile('mail_data')
  text_mail.headers = headers
  text_mail.form_data = form_data
  
  // メール送る際のオプションを設定する
  var options = {}
  options.noReply = true
  options.from = '【要変更】メールアドレス'
  options.name = '【要変更】受信者表示名'

  try{
   // テキストメールとオプションを設定してメールを送信。
   GmailApp.sendEmail(mail_address, '【要変更】メールタイトル',text_mail.evaluate().getContent(), options)
  }catch(e){
   // エラー発生時は管理者メールアドレスにエラー内容を通知する
   MailApp.sendEmail('管理者メールアドレス', '【要変更】メールタイトル', text_mail.evaluate().getContent(), options);
  }
}

メール本文（mail_data.html）

スクリプトエディタでhtmlを新規作成する。

<?= form_data.name ?> 様

登録ありがとうございます。
Sampleのメールを送信します。

ソースのセットアップ

「実行」→「setUp」を選択し、「承認」を選択

GASを公開

「公開」→「ウェブ アプリケーションとして導入」を選択

※公開した後の「現在のウェブ アプリケーションのURL」をメモ( ..)φメモ

フォームの作成

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta charset="UTF-8" />
  <title>テストフォームだよ</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 </head>
 <script>
 <!--
  function validateForm(){
   if(document.getElementById("name_input").value==""){
    alert("なんか書いてくださいよ！");
    return false;
   }else{
    document.getElementById("formID").submit();
    document.getElementById("thankyou").style.display="";
    document.getElementById("thankyou").innerHTML="<center>ありがとう</center>";
    document.getElementById("thanks_none").style.display="none";
   }
  }
 -->
 </script>
 <body>
  <div style="display:none;" id="thankyou"></div>
  <iframe src="#" id="fake-target" name="fake-target" style="width:0px; height:0px; border:0px;"></iframe>
  <div id="thanks_none">
   <form id="formID" action="【要変更】現在のウェブ アプリケーションの URL" method="post" target="fake-target">
    ご氏名<input id="name_input" name="name" type="text" style="ime-mode:active"/><br />
    メール<input name="mail" type="text" style="ime-mode:inactive"/>
    <button onClick="javascript:validateForm();">送信</button>
   </form>
  </div>
 </body>
</html>

※nameに入力がないと、ポップアップのアラートがなります。

送信元メールアドレスの設定

送信元メールアドレスをスプレッドシートを作成したアカウントとは
別のメールアドレスを指定する場合はエイリアスの設定を行います。
[gmail][設定] → [アカウント] → [名前：メールアドレスの追加]
※参考
メール エイリアス アドレスの追加と削除 - G Suite 管理者 ヘルプ

スプレッドシートをDBにする利点

• 登録されたデータを誰でも簡単に見る・消すことが出来るから
• 登録者数がExcel上で一覧表示しても苦痛じゃない数なら便利だと思う
• 共有も簡単
• Excelなのですぐに集計、データ加工ができる（別でプログラムを書く必要がない）

次回挑戦したいこと

・Google App Engine for PHPを使ってみたい
→GASとの違いを明確にしたいな。

参考サイト

• 【短いコードで色々出来る】Google Apps Scriptでスプレッドシートと連携した無料Ajaxフォームの作り方※サンプル付き【自動返信メールもあるよ】 - Qiita
• スプレットシートをデータベースとして利用する - 錬金術師の歩き方
• Google Apps ScriptにてPOSTで受け取って書き込む | eye4brain
• カゲンぱぱのイイカゲンメモ帳: フォームからPOSTし、googleスプレットシートを更新するサンプル

ESXi 踏み台接続 PuTTyでSSHトンネル・ポート転送設定

要望

・vSpherClientからESXiに接続するのに踏み台サーバを使用する

概要

1. PuTTyでSSHトンネル・ポート転送を設定
2. クライアントPCのhostsファイルを更新
3. vSpherClientから、hostsで設定した名前(127.0.0.1)へアクセスする
4. 踏み台サーバへのSSHトンネルを通り、踏み台サーバから接続先ESXiへポートを転送する

ターミナルソフトとは？

絵とか入ってたので、リンクはるよ。例：PuTTy、Teratermとか
http://wa3.i-3-i.info/word12678.html:plain

SSHトンネル・ポートフォワーディングとは？

わかりやすいので、リンクはるよ。
PuTTY を用いた SSH ポート転送の手順

PuTTyの場合

＜例＞
踏み台サーバ　→　1.1.1.1
接続先ESXi　→　2.2.2.2

接続先ホスト名に踏み台サーバIP「1.1.1.1」の記入

左側のCategory欄：Connection → SSH → Tunnels　を選択

※転送ポート
○ 443　通信用のデフォルト ポート
○ 902　VMのコンソール用

Source port：localhost:443
Destination：接続先ESXiIP:443
※902ポートも同様に設定

hostsファイルの更新

127.0.0.1 esxi

vSpherClientから接続確認

IPアドレス/名前　にはhostsファイルで設定した127.0.0.1の名前を記入する。

Teratermの場合

vSphere ClientをSSHのポートフォワーディングで使うメモ [ESXi](fkimura.com)

参考

ESXi本体に直接ポートフォワードさせてしまえ - earthlabの雑記

jQueryプラグイン[select2] セレクトボックスの拡張（検索）

要望

セレクトボックス上でデータを検索（絞込み）できるように

概要

jQuery プラグイン「Select2」を使用する。

プログラム

ダウンロード

select2

ソース

 <link rel="stylesheet" href="select2.css" type="text/css" />
 <script type="text/javascript" src="jquery-1.12.0.min.js"></script>
 <script type="text/javascript" src="select2.js"></script>
 <script type="text/javascript">
  $(document).ready(function(){
   $('.js-example-basic-single').select2();
  });
 </script>


 <select class="js-example-basic-single">
  <OPTION value="0">好きな食べ物なんですか？</OPTION>
  <OPTION value="1">りんご</OPTION>
  <OPTION value="2">バナナ</OPTION>
  <OPTION value="3">キウイ</OPTION>
 </select>

詰まった点

• セレクトボックスが未選択の場合<option></option>の最上部データが表示される。ただ、value値を空欄にすると最上部データが表示されず空白のままになるので、value値は「0」や「スペース」を入れる。　

• 本家サイトからダウンロードしたselect2.jsを使うと、プルダウンのスタイルがずれてしまった・・。以下、サンプルで使用されている「select2.js」を使用したら上手くいった。

Select2 – ホームページの作り方

他にも出来ること

セレクトボックス上で、複数データを選択したり、データをカテゴリごとに分けたり。

サンプル

※本家のサンプル
select2

次回挑戦したいこと

・jsonデータから、selectデータ呼び出し