有限会社アテージ » コラム

NightmareJSでファイルのダウンロード、アップロード

admin — Wed, 28 Sep 2016 22:44:14 +0000

WebシステムでCSVによるデータのインポートやエクスポートの機能をよく見かけます。
求人サイトや不動産サイトなどを複数利用していて、あるサイトからデータをエクスポート、加工・編集して別のサイトへインポートしている方もいらっしゃるのではないでしょうか。

面倒な作業ですし、ついつい忘れてしまうこともあります。このような作業を自動化したいと思われた方も多いと思います。

今回は、NightmareJSというブラウザを使った自動処理を行えるツール(ホームページにはhigh-level browser automation libraryと書かれています)を使ってファイルのダウンロード、アップロードを自動化する方法を紹介します。

■ダウンロード

nightmare-download-managerというプラグインを利用します。

var Nightmare = require('nightmare');
require('nightmare-download-manager')(Nightmare);
var vo = require('vo');

vo(function* () {
  var nightmare = Nightmare({ show: true });
  nightmare.on('download', function(state, downloadItem){
    if(state == 'started'){
      nightmare.emit('download', './data.csv', downloadItem);
    }
  });

  var ret = yield nightmare
    .goto('http://localhost/admin/index.php')
    .insert('input[name="id"]', 'username')
    .insert('input[name="pass"]', 'password')
    .click('input[type="submit"]')
    .wait('input[value="ダウンロード"]')
    .downloadManager()
    .click('input[value="ダウンロード"]')
    .waitDownloadsComplete()
    .then(function () {
      console.log('done');
    });

  yield nightmare.end();

})(function (err, result) {
  if (err) return console.log(err);
});

■アップロード

nightmare-uploadというプラグインを利用します。

var Nightmare = require('nightmare');
require('nightmare-upload')(Nightmare);
var vo = require('vo');
const path = require('path');

vo(function* () {
  var nightmare = Nightmare({ show: true });

  yield nightmare
    .goto('http://localhost/admin/index.php')
    .insert('input[name="id"]', 'username')
    .insert('input[name="pass"]', 'password')
    .click('input[type="submit"]')
    .wait('input[value="アップロード"]')
    .upload('input[name="file"]', path.join(__dirname, 'data.csv'))
    .click('input[value="アップロード"]')
    .then(function () {
      console.log('done');
    });

  yield nightmare.end();

})(function (err, result) {
  if (err) return console.log(err);
});

NightmareJSに限らずスクレイピングツールはブラウザを使った操作をそのまま書き下すようにコードを書けばよいので何をやっているか一目瞭然だと思います。

ブラウザで行っている作業を自動化したいという方は是非一度弊社にご相談ください。スクレイピング、クローラーのご相談も承っております。

Node.jsでメール送信

admin — Wed, 24 Aug 2016 11:41:26 +0000

このところスクレイピングのご相談が多く、HTMLのみであればPHP+Goutte、
JSでページを書き換えているものならNode.js+NightmareJS+Electronを利用しています。

先日もNightmareJSでスクレイピングツールを作ったのですが、
結果をメールに添付して飛ばしてほしいというご要望がございました。

そのときに使ったメール送信モジュール Nodemailer を紹介します。

SMTPでの送信がデフォルトで組み込まれていて、
sendmailコマンドでの送信はモジュールを組み込むことで可能になっています。（PHPとは逆）
その他の送信モジュールはこちら。

以下は、画像を入れたHTMLメールにPDFを添付して送信したサンプルです。
説明の必要はないと思いますが、cid（Content-ID）は見慣れない方もいるかもしれません。
HTMLから添付した画像を参照する場合は、添付ファイルのファイル名ではなく、
このIDを使う決まりになっています。https://tools.ietf.org/html/rfc2392
（これはNodemailerに限った話でありません）

日本語はUTF-8を使用します。（これはNodemailerの決まり）

var  nodemailer = require('nodemailer');

var transporter = nodemailer.createTransport({
  host : 'XXXX.XXXX.ne.jp',
  port : 25,
  auth : {
    user : 'XXXX@XXXX.XXXX.ne.jp',
    pass : 'XXXX'
  }
});

transporter.sendMail({
  from : 'info@atage.jp',
  to : 'XXXX@XXXX.com',
  subject : 'お問い合わせありがとうございます。',
  html : {
    path : './message.html'
  },
  attachments : [
    {
      filename : '会社案内.pdf',
      path : './profile.pdf'
    },
    {
      cid : 'logo',
      path : './logo.png'
    }
  ]
}, function (error, info) {
  console.log(info);
});

message.html






この度はお問い合わせいただきありがとうございます。



弊社は、ウェブとデータベースの開発を承っておりまして、

ユーザー目線で使いやすいシステムを心がけております。



３営業日以内に担当者より連絡をさせていただきます。

よろしくお願い申し上げます。





東京都練馬区南大泉5-38-7　プレイン昭代103

TEL：03-5308-5198

URL: https://www.atage.jp/

Gmail宛に送信されたメール

libHaruを使ってPHPでPDFを生成(3)

admin — Tue, 20 May 2014 11:06:40 +0000

少し間が開きましたがlibHaruを使ったPDFの生成でパスワードと使用権限の設定について紹介します。

パスワードの設定

HaruDoc::setPasswordでパスワードを指定するだけです。

setPassword('foo', 'bar');

  $doc->setPageMode(HaruDoc::PAGE_MODE_USE_THUMBS);

  $doc->useJPFonts();
  $doc->useJPEncodings();

  $page = $doc->addPage();
  $page->setSize(HaruPage::SIZE_A4, HaruPage::LANDSCAPE);

  $page_w = $page->getWidth();
  $page_h = $page->getHeight();

  $font_name = $doc->loadTTF('/usr/share/fonts/opentype/ipafont-mincho/ipam.ttf', true);
  $ipam = $doc->getFont($font_name,'90msp-RKSJ-H');

  $page->setRGBStroke(1, 0, 0);
  $page->setRGBFill(0, 0, 0);

  $page->beginText();

  $page->setTextRenderingMode(HaruPage::FILL);

  $text = mb_convert_encoding('パスワード', 'SJIS-win', 'UTF-8');

  $page->setFontAndSize($ipam, 36);
  $page->textOut(350, $page_h - 200, $text);

  $page->endText();

  header('Content-Type: application/pdf');
  header('Content-Disposition: attachment; filename=test.pdf');
  $doc->output();

} catch(Exception $e) {
  echo $e->getFile().'('.$e->getLine().'):'.$e->getMessage();
}
?>

生成されたPDFのプロパティをAcrobat Readerで見ると40bitのRC4で暗号化されていることが確認できます。

現状ではlibHaruはRC4のみの対応となっていますが、鍵の長さを128bitにすることができます。

setPassword('foo', 'bar');
  $doc->setEncryptionMode(HaruDoc::ENCRYPT_R3, 16);

使用権限の設定

使用権限の設定も簡単で、HaruDoc::setPermissionで権限を指定するだけです。

たとえば印刷とドキュメント内のテキストや画像をコピーする権限を有効にする場合は以下のようにします。

setPassword('foo', 'bar');
  $doc->setEncryptionMode(HaruDoc::ENCRYPT_R3, 16);
  $doc->setPermission(HaruDoc::ENABLE_PRINT | HaruDoc::ENABLE_COPY);

マニュアルには記述はありませんが、すべての権限を無効にするには0を指定すればよさそうです。

setPassword('foo', 'bar');
  $doc->setEncryptionMode(HaruDoc::ENCRYPT_R3, 16);
  $doc->setPermission(0);

3回に渡ってlibHaruによるPDF生成を紹介しましたが、PHPで動的にPDFを生成する必要に迫られたときの選択肢としては上位に入るという印象を持ちました。

emacs24

admin — Mon, 28 Apr 2014 12:23:58 +0000

開発で使っているUbuntu12.04のパッケージのemacsのバージョンが23ということもあり、23を使っていたのですが、先日遅ればせながら24にアップデートしてパッケージ周りを見直しました。便利なパッケージや設定を紹介します。

パッケージ管理

24からpackage.elが標準でバンドルされていて、melpla、marmaladeという非公式なリポジトリも利用可能です。

(require 'package)
(add-to-list 'package-archives '("melpa" . "http://melpa.milkbox.net/packages/") t)
(add-to-list 'package-archives '("marmalade" . "http://marmalade-repo.org/packages/"))
(package-initialize)

フォント設定

いままでVLゴシックを使っていましたが、Ricty Diminishedに移行しました。

ttfファイルを~/.fontsにコピーしてフォントキャッシュを再作成して~/.emacs.d/init.elに以下を追加すればOKです。

フォントキャッシュの再作成

$ fc-cache -vf

(set-face-attribute 'default nil
                    :family "Ricty Diminished Discord"
                    :height 110)
(set-fontset-font (frame-parameter nil 'font)
                  'japanese-jisx0208
                  (cons "Ricty Diminished Discord" "iso10646-1"))
(set-fontset-font (frame-parameter nil 'font)
                  'japanese-jisx0212
                  (cons "Ricty Diminished Discord" "iso10646-1"))
(set-fontset-font (frame-parameter nil 'font)
                  'katakana-jisx0201
                  (cons "Ricty Diminished Discord" "iso10646-1"))

helm

anythingの後継で、関連パッケージの開発も活発に行われています。キーバインドに違和感があるのでキーバインドを変更しています。

(require 'helm-config)
(global-set-key (kbd "C-c h") 'helm-mini)
(helm-mode 1)
(custom-set-variables '(helm-ff-auto-update-initial-value nil))
(define-key helm-c-read-file-map (kbd "TAB") 'helm-execute-persistent-action)
(define-key helm-c-read-file-map (kbd "") 'backward-kill-word)
(require 'helm-descbinds)
(helm-descbinds-mode)
(require 'helm-ls-git)
(require 'helm-ag)

icicles

(require 'icicles)
(icy-mode)
(setq icicle-sort-function nil)
(setq icicle-sort-functions-alist nil)

multi-term

複数のターミナルを開くことができます。24.3からは文字色の指定方法が変更されています。

(require 'multi-term)
(add-hook 'term-mode-hook '(lambda ()
                           (setq show-trailing-whitespace nil)))
(global-set-key (kbd "C-c t")
               '(lambda () (interactive) (multi-term)))
(global-set-key (kbd "C-c n") 'multi-term-next)
(global-set-key (kbd "C-c p") 'multi-term-prev)
(setq multi-term-program shell-file-name
     ansi-term-color-vector [term
                             term-color-black
                             term-color-green
                             term-color-yellow
                             term-color-blue
                             term-color-magenta
                             term-color-cyan
                             term-color-white])

migemo

ローマ字入力で日本語検索ができます。ruby版を使っていましたが、C版に移行しました。Ubuntu12.04にはcmigemoのパッケージも用意されていますが、辞書ファイルの文字コードがUTF-8ではないので、ソースから入れました。

(setq migemo-dictionary "/usr/local/share/migemo/utf-8/migemo-dict")
(setq migemo-command "cmigemo")
(setq migemo-options '("-q" "-e"))
(setq migemo-user-dictionary nil)
(setq migemo-regex-dictionary nil)
(setq migemo-coding-system 'utf-8)
(load-library "migemo")
(migemo-init)

magit, git-gutter

バージョン管理システムgit関連。magitは従来から使っていたのですが、git-gutterを新たに追加しました。コミットからの変更箇所が一目で分かります。

(require 'magit)
(require 'git-gutter)
(global-git-gutter-mode +1)

flycheck

構文チェックにはflymakeを使っていましたが、flycheckに移行しました。flymakeは言語ごとにパッケージをインストールする必要がありましたが、flycheckではそれ自身で多くの言語に対応していて簡単に導入できます。

(require 'flycheck)
(add-hook 'after-init-hook #'global-flycheck-mode)

web-mode

htmlの編集にはhtml-helper-modeを使っていましたが、インデントに不満がありました。web-modeでインデントの問題が解消されました。

(require 'web-mode)
(add-to-list 'auto-mode-alist '("\\.html\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.tpl\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.php\\'" . web-mode))

elscreen

emacs上でscreenライクなインターフェイスを実現できます。パッケージからインストールした新しいバージョンでは、以下の1行を書くだけで利用できます。最近はtabbarというパッケージもあるようです。

(elscreen-start)

sdic

英辞郎の検索に使っています。

(autoload 'sdic-describe-word "sdic" "英単語の意味を調べるW" t nil)
(autoload 'sdic-describe-word-at-point "sdic" "カーソルの位置の英単語の意味を調べる" t nil)
(global-set-key "\C-cw" 'sdic-describe-word)
(global-set-key "\C-cW" 'sdic-describe-word-at-point)
(setq sdic-eiwa-dictionary-list
      '((sdicf-client "/usr/share/dict/eijiro112.sdic")))
(setq sdic-waei-dictionary-list
      '((sdicf-client "/usr/share/dict/waeiji112.sdic"
                      (add-keys-to-headword t))))
(setq sdic-default-coding-system 'utf-8-unix)

mozc

emacsで日本語入力にmozcが使えます。

(require 'mozc)
(setq default-input-method "japanese-mozc")
(define-key global-map "\C-o" 'toggle-input-method)

w3m

emacsでw3mが使えます。

(setq w3m-profile-directory "`/.w3m")
(setq w3m-language "Japanese")
(setq w3m-use-japanese-menu t)
(require 'w3m)
(require 'w3m-session)
(add-hook 'w3m-mode-hook '(lambda ()
                            (define-key w3m-mode-map "W" 'w3m-session-save)
                            (define-key w3m-mode-map "L" 'w3m-session-load)
                            (define-key w3m-mode-map "\C-c\C-k" 'copy-region-as-kill)
                            (define-key w3m-mode-map "\C-t" 'other-window-or-split)
                            (setq show-trailing-whitespace nil)))
(setq newsticker-html-renderer 'w3m-region
      browse-url-browser-function 'w3m-browse-url)

sequential-command

コマンドを連続入力した場合に動作を変えることができます。ちょっとしたツールですが便利です。

(require 'sequential-command-config)
(global-set-key "\C-a" 'seq-home)
(global-set-key "\C-e" 'seq-end)

各種言語モード

php-mode, js2-mode, less-css-mode, ruby-mode, lua-modeなどの言語モードを使っています。

他にもいくつか使ってるモードもありますが、主なものをざっと並べてみました。

libHaruを使ってPHPでPDFを生成(2)

admin — Wed, 26 Mar 2014 08:48:18 +0000

前回からの続きでlibHaruを使って文字列を扱ってみます。

文字の表示

IPAゴシック、IPA明朝の等幅フォントを使って文字を表示してみます。主なポイントは次の通りです。

日本語を使う場合は、useJPEncodings()で日本語エンコーディングを有効にする必要があります。今回はIPAフォントを使いますが、組み込みの日本語フォントを使う場合は、useJPFonts()で有効にします。
getFont()の第2引数でエンコーディングを指定します。エンコーディングの一覧はこちら。日本語でつかえるのは、RKSJの付く3つとEUCで始まる2つです。名前の通り、前3つはSJIS、後の2つはEUCです。Hは横書き、Vは縦書きです。
文字をレンダリングするときのモードが塗りつぶしや外形のみなど8種類あり、setTextRenderingMode()で指定できます。
beginText()でテキストの挿入開始、endText()終了。
textOut()で挿入位置を指定しますが、文字のベースラインの開始点(横書きなら左端)が基準になります。文字の左下、左上ではないことに注意が必要です。
ベースラインからの上下の幅はgetAscent(), getDescent()で得られます。フォントサイズに対するパーミル値を返しますので、1000で除したものをフォントサイズに乗ずれば幅が得られます。

コード例：日本語の表示

setPageMode(HaruDoc::PAGE_MODE_USE_THUMBS);

  $doc->useJPFonts();
  $doc->useJPEncodings();

  $page = $doc->addPage();
  $page->setSize(HaruPage::SIZE_A4, HaruPage::LANDSCAPE);

  $page_w = $page->getWidth();
  $page_h = $page->getHeight();

  $font_name = $doc->loadTTF('/usr/share/fonts/opentype/ipafont-gothic/ipag.ttf', true);
  $ipag = $doc->getFont($font_name,'90msp-RKSJ-H');

  $font_name = $doc->loadTTF('/usr/share/fonts/opentype/ipafont-mincho/ipam.ttf', true);
  $ipam = $doc->getFont($font_name,'90msp-RKSJ-H');

  $page->setRGBStroke(1, 0, 0);
  $page->setRGBFill(0, 0, 0);

  $modes = array(
    HaruPage::FILL,
    HaruPage::STROKE,
    HaruPage::FILL_THEN_STROKE,
    HaruPage::INVISIBLE,
    HaruPage::FILL_CLIPPING,
    HaruPage::STROKE_CLIPPING,
    HaruPage::FILL_STROKE_CLIPPING,
    HaruPage::CLIPPING
  );

  $page->beginText();

  $i = 0;
  foreach($modes as $mode) {
    $page->setTextRenderingMode($mode);

    $page->setFontAndSize($ipag, 40);
    $ascent = ($ipag->getAscent() / 1000) * 40;
    $page->textOut(0, $page_h - $ascent - 40 * $i, mb_convert_encoding("薔薇、憂鬱、麒麟", 'SJIS-win', 'UTF-8'));

    $page->setFontAndSize($ipam, 40);
    $ascent = ($ipam->getAscent() / 1000) * 40;
    $page->textOut(400, $page_h - $ascent - 40 * $i, mb_convert_encoding("薔薇、憂鬱、麒麟", 'SJIS-win', 'UTF-8'));

    $i++;
  }

  $page->endText();

  header('Content-Type: application/pdf');
  header('Content-Disposition: attachment; filename=test.pdf');
  $doc->output();

} catch(Exception $e) {
  echo $e->getFile().'('.$e->getLine().'):'.$e->getMessage();
}
?>

出力されたPDFはこちら

文字列の幅

描画した文字列の幅を求めるには、HaruPage::getTextWidth()を使います。HaruFontにも同じ名前のメソッドがあるので要注意です。

コード例：アンダーライン

setPageMode(HaruDoc::PAGE_MODE_USE_THUMBS);

  $doc->useJPFonts();
  $doc->useJPEncodings();

  $page = $doc->addPage();
  $page->setSize(HaruPage::SIZE_A4, HaruPage::LANDSCAPE);

  $page_w = $page->getWidth();
  $page_h = $page->getHeight();

  $font_name = $doc->loadTTF('/usr/share/fonts/opentype/ipafont-mincho/ipam.ttf', true);
  $ipam = $doc->getFont($font_name,'90msp-RKSJ-H');

  $font_name = $doc->loadTTF('/usr/share/fonts/opentype/ipafont-mincho/ipamp.ttf', true);
  $ipamp = $doc->getFont($font_name,'90msp-RKSJ-H');

  $page->setRGBStroke(1, 0, 0);
  $page->setRGBFill(0, 0, 0);

  $page->beginText();

  $page->setTextRenderingMode(HaruPage::FILL);

  $text = mb_convert_encoding('等幅フォントとプロポーショナルフォント', 'SJIS-win', 'UTF-8');

  $page->setFontAndSize($ipam, 36);
  $page->textOut(50, $page_h - 50, $text);
  $ipam_width = $page->getTextWidth($text);
  $ipam_descent = $ipam->getDescent();

  $page->setFontAndSize($ipamp, 36);
  $page->textOut(50, $page_h - 100, $text);
  $ipamp_width = $page->getTextWidth($text);
  $ipamp_descent = $ipamp->getDescent();

  $page->endText();

  $page->moveTo(50, $page_h - 50);
  $page->lineTo(50 + $ipam_width, $page_h - 50);
  $page->stroke();

  $page->moveTo(50, $page_h - 100);
  $page->lineTo(50 + $ipamp_width, $page_h - 100);
  $page->stroke();

  header('Content-Type: application/pdf');
  header('Content-Disposition: attachment; filename=test.pdf');
  $doc->output();

} catch(Exception $e) {
  echo $e->getFile().'('.$e->getLine().'):'.$e->getMessage();
}
?>

出力されたPDFはこちら

moveToTextPos()による位置決め

長い文章を表示する場合、textOut()での位置決めは大変ですので、moveTextPos()を使います。行の送り幅を定義(setTextLeading())して改行(showTextNextLine())で改行することもできます。

コード例：改行

setPageMode(HaruDoc::PAGE_MODE_USE_THUMBS);

  $doc->useJPFonts();
  $doc->useJPEncodings();

  $page = $doc->addPage();
  $page->setSize(HaruPage::SIZE_A4, HaruPage::LANDSCAPE);

  $page_w = $page->getWidth();
  $page_h = $page->getHeight();

  $font_name = $doc->loadTTF('/usr/share/fonts/opentype/ipafont-mincho/ipam.ttf', true);
  $ipam = $doc->getFont($font_name,'90msp-RKSJ-H');

  $font_name = $doc->loadTTF('/usr/share/fonts/opentype/ipafont-mincho/ipamp.ttf', true);
  $ipamp = $doc->getFont($font_name,'90msp-RKSJ-H');

  $page->setRGBStroke(1, 0, 0);
  $page->setRGBFill(0, 0, 0);

  $page->beginText();

  $page->setTextRenderingMode(HaruPage::FILL);

  $text = mb_convert_encoding('moveToText()とshowText()で文字列を表示', 'SJIS-win', 'UTF-8');

  $page->setFontAndSize($ipam, 18);
  $page->setTextLeading(18);
  $page->moveTextPos(0, $page_h - 18);
  $page->showText($text);
  $page->showText($text);
  $page->showTextNextLine($text);

  $page->endText();

  header('Content-Type: application/pdf');
  header('Content-Disposition: attachment; filename=test.pdf');
  $doc->output();

} catch(Exception $e) {
  echo $e->getFile().'('.$e->getLine().'):'.$e->getMessage();
}
?>

出力されたPDFはこちら

文字列の変形

setTextMatrix()で文字列を変形させることができます。

コード例：文字列の変形

setPageMode(HaruDoc::PAGE_MODE_USE_THUMBS);

  $doc->useJPFonts();
  $doc->useJPEncodings();

  $page = $doc->addPage();
  $page->setSize(HaruPage::SIZE_A4, HaruPage::LANDSCAPE);

  $page_w = $page->getWidth();
  $page_h = $page->getHeight();

  $font_name = $doc->loadTTF('/usr/share/fonts/opentype/ipafont-mincho/ipam.ttf', true);
  $ipam = $doc->getFont($font_name,'90msp-RKSJ-H');

  $font_name = $doc->loadTTF('/usr/share/fonts/opentype/ipafont-mincho/ipamp.ttf', true);
  $ipamp = $doc->getFont($font_name,'90msp-RKSJ-H');

  $page->setRGBStroke(1, 0, 0);
  $page->setRGBFill(0, 0, 0);

  $page->beginText();

  $page->setTextRenderingMode(HaruPage::FILL);

  $text = mb_convert_encoding('変形', 'SJIS-win', 'UTF-8');

  $page->setTextMatrix(2, pi()/8, pi()/4, 1, 0, 0);

  $page->setFontAndSize($ipam, 36);
  $page->textOut(50, $page_h - 200, $text);

  $page->setTextMatrix(1, pi()/4, pi()/4, 2, 0, 0);

  $page->setFontAndSize($ipam, 36);
  $page->textOut(250, $page_h - 200, $text);

  $page->setTextMatrix(1, pi(), pi(), 1, 0, 0);

  $page->setFontAndSize($ipam, 36);
  $page->textOut(350, $page_h - 200, $text);

  $page->endText();

  header('Content-Type: application/pdf');
  header('Content-Disposition: attachment; filename=test.pdf');
  $doc->output();

} catch(Exception $e) {
  echo $e->getFile().'('.$e->getLine().'):'.$e->getMessage();
}
?>

出力されたPDFはこちら

次回はパスワードの設定などについてみていきます。

libHaruを使ってPHPでPDFを生成(1)

admin — Sun, 23 Mar 2014 02:44:22 +0000

PHPでPDFを生成する方法はいろいろありますが、実験的なモジュールではありますが、PHPのマニュアルにも掲載のあるlibHaruを使ったものを使ってみました。

環境は、Ubuntu12.04、PHP5.3です。

インストール

libharuを入れて、peclでインストールできます。

$ sudo apt-get install libhpdf-dev
$ sudo pecl install haru

PHPにharu.soを読み込む設定を追加してapacheを再起動します。

/etc/php5/apache2/conf.d/haru.ini

extension=haru.so

phpinfo()の出力にharuが追加されていればOKです。

日本語文字出力にIPAフォントを使いますので、インストールしていない場合は、インストールします。

$ sudo apt-get install fonts-ipafont-gothic fonts-ipafont-mincho

図形の描画

ドキュメントの左下が座標の原点となり、長さの単位はDTPポイントを使います。A4横の場合、幅は841.89001464844、高さは595.27600097656です。

コード例：ページの背景色をグレーに

setPageMode(HaruDoc::PAGE_MODE_USE_THUMBS);

  $page = $doc->addPage();
  $page->setSize(HaruPage::SIZE_A4, HaruPage::LANDSCAPE);

  $page_w = $page->getWidth();
  $page_h = $page->getHeight();

  $page->setRGBStroke(0.7, 0.7, 0.7);
  $page->setRGBFill(0.7, 0.7, 0.7);

  $page->rectangle(0, 0, $page_w, $page_h);
  $page->fillStroke();

  header('Content-Type: application/pdf');
  header('Content-Disposition: attachment; filename=test.pdf');
  $doc->output();

} catch(Exception $e) {
  echo $e->getFile().'('.$e->getLine().'):'.$e->getMessage();
}
?>

コード例：基本的な図形の描画

図形の描画はペン(setRBGStroke, setDash, setLineWidth etc)と刷毛(setRGBFill etc)を選んで、描画(stroke, fillStroke)を行います。

直線はペンを始点に移動して終点を指定して描画します。少し違和感があるのが、円弧の開始角、終了角で、時計の12時の位置を0度として時計回りに角度を測ります。

setPageMode(HaruDoc::PAGE_MODE_USE_THUMBS);

  $page = $doc->addPage();
  $page->setSize(HaruPage::SIZE_A4, HaruPage::LANDSCAPE);

  $page_w = $page->getWidth();
  $page_h = $page->getHeight();

  $page->setRGBStroke(0.7, 0.7, 0.7);
  $page->setRGBFill(0.7, 0.7, 0.7);

  $page->rectangle(0, 0, $page_w, $page_h);
  $page->fillStroke();

  $page->setRGBStroke(1, 0, 0);
  $page->setRGBFill(0, 0, 1);

  // 直線
  $page->moveTo(0, $page_h);
  $page->lineTo(100, $page_h - 100);
  $page->stroke();

  // 円弧
  $page->arc(100, $page_h - 100, 100, 0, 225);
  $page->stroke();

  // 円
  $page->setLineWidth(5);
  $page->circle(310, $page_h - 100, 100);
  $page->fillStroke();

  // 楕円
  $page->setDash(array(15, 3), 0);
  $page->ellipse(420, $page_h - 100, 120, 80);
  $page->stroke();

  // 傾いた矩形
  $page->setLineWidth(1);
  $page->setDash(array(), 0);
  $page->moveTo(200, $page_h - 350);
  $page->lineTo(200 + 80, $page_h - 350 + 60);
  $page->lineTo(200 + 80 - 30, $page_h - 350 + 60 + 40);
  $page->lineTo(200 + 80 - 30 - 80, $page_h - 350 + 60 + 40 - 60);
  $page->closePath();
  $page->fillStroke();

  header('Content-Type: application/pdf');
  header('Content-Disposition: attachment; filename=test.pdf');
  $doc->output();

} catch(Exception $e) {
  echo $e->getFile().'('.$e->getLine().'):'.$e->getMessage();
}
?>

出力されたPDFはこちら

ベジェ曲線も描画できますが今回は割愛します。

画像の挿入

画像を挿入するときに指定する座標は、画像の左上の位置になります。

コード例：PNG画像の挿入

setPageMode(HaruDoc::PAGE_MODE_USE_THUMBS);

  $page = $doc->addPage();
  $page->setSize(HaruPage::SIZE_A4, HaruPage::LANDSCAPE);

  $page_w = $page->getWidth();
  $page_h = $page->getHeight();

  $page->setRGBStroke(0.7, 0.7, 0.7);
  $page->setRGBFill(0.7, 0.7, 0.7);

  $page->rectangle(0, 0, $page_w, $page_h);
  $page->fillStroke();

  $img = $doc->loadPNG(__DIR__ . '/Emacs23.png');

  $page->drawImage($img, 0, $page_h - $img->getHeight(), $img->getWidth(), $img->getHeight());

  header('Content-Type: application/pdf');
  header('Content-Disposition: attachment; filename=test.pdf');
  $doc->output();

} catch(Exception $e) {
  echo $e->getFile().'('.$e->getLine().'):'.$e->getMessage();
}
?>

出力されたPDFはこちら

次回は文字についてみていきます。

CasperJSでWebスクレイピング

admin — Wed, 26 Feb 2014 09:34:56 +0000

JavaScriptを使用したページが多くなり、一昔前のツールではスクレイピングできないページに行き当たることが多くなりました。そこでSeleniumのようなブラウザを操ることができるツールが出てきて、JavaScriptを使用したページのスクレイピングやテストができるようになりました。

しかし、GUIブラウザを起動してコントロールさせてとなると、とても時間がかかる。そこでGUIのないブラウザ、ヘッドレスブラウザの登場となりました。

CasperJSは、ヘッドレスブラウザを使ったクライアントサイドテストやスクレイピングをより簡単に記述できるツールです。

対応しているヘッドレスブラウザは、PhantomJS(WebKitベース)とSlimerJS(Gekoベース)です。ただし、SlimerJSは厳密にはヘッドレスではなく、GUIブラウザを起動しています。

実例

以下のようなページを用意します。一昔前のスクレイピングツールではtitleを取り出した場合、”書き換え前”となってJavaScriptによる処理を拾えませんでした。

html

CasperJSスクリプト

"use strict";

var casper = require('casper').create({
  verbose: true,
  logLevel: 'debug'
});

casper.start('http://test/index.html', function() {
  this.echo(this.getTitle());
});

casper.run(function() {
  this.exit();
});

CasperJSをPhantomJS、SlimerJSで実行すると以下の通り、いずれも”書き換え後”が取り出せていて、JavaScriptによる処理が拾えています。

処理時間は、SlimerJSはPhantomJSの3倍近くかかっていて、GUIブラウザを使う分かなり遅いです。

$ casperjs --engine=phantomjs scraper.js 
[info] [phantom] Starting...
[info] [phantom] Running suite: 2 steps
[debug] [phantom] opening url: http://test/index.html, HTTP GET
[debug] [phantom] Navigation requested: url=http://test/index.html, type=Other, willNavigate=true, isMainFrame=true
[debug] [phantom] url changed to "http://test/index.html"
[debug] [phantom] Successfully injected Casper client-side utilities
[info] [phantom] Step anonymous 2/2 http://test/index.html (HTTP 200)
書き換え後
[info] [phantom] Step anonymous 2/2: done in 227ms.
[info] [phantom] Done 2 steps in 244ms

$ casperjs --engine=slimerjs scraper.js
[info] [phantom] Starting...
[info] [phantom] Running suite: 2 steps
[debug] [phantom] opening url: http://test/index.html, HTTP GET
[debug] [phantom] Navigation requested: url=http://test/index.html, type=Undefined, willNavigate=true, isMainFrame=true
[debug] [phantom] url changed to "http://test/index.html"
[debug] [phantom] Successfully injected Casper client-side utilities
[info] [phantom] Step anonymous 2/2 http://test/index.html (HTTP 200)
書き換え後
[info] [phantom] Step anonymous 2/2: done in 683ms.
[info] [phantom] Done 2 steps in 696ms

mustacheのphp実装でフィルター

admin — Thu, 20 Feb 2014 09:24:41 +0000

以前紹介したこちらのmustacheのphp実装ではsmartyやtwigで使えるパイプ記法のフィルターが使えます。今回はこのパイプ記法について紹介します。

※mustacheには本来ない機能ですので、テンプレートを他の言語でも使いたいという場合には注意が必要です。

実例

例えば、フィルターを使ってゼロパッディングとゼロサプレスを行うには以下のようにします。テンプレートに{{%FILTERS}}pragmaを入れることでフィルタ記法を解釈するようになります。

php

 new Mustache_Loader_FilesystemLoader(dirname(__FILE__).'/../views'),
  'partials_loader' => new Mustache_Loader_FilesystemLoader(dirname(__FILE__).'/../views/partials'),
  'escape' => function($v) {
    return htmlspecialchars($v, ENT_QUOTES, 'UTF-8');
  },
));

$m->addHelper('zero', array(
  'padding' => function($v) { return sprintf('%04d', $v); },
  'suppress' => function($v) { return preg_replace('/^0+/', '', $v); }));

$v = array(
  'code1' => '1',
  'code2' => '0001',
);

$tpl = $m->loadTemplate('index');
echo $tpl->render($v);
?>

mustache template



  
    
    mustache
  
  
    {{%FILTERS}}
    {{code1|zero.padding}}
    {{code1|zero.suppress}}

注意！

mustache準拠のlambdaを使えば同じことができるように思えますが、lambdaでは変数の展開が行われる前に関数に”{{変数}}”が文字列として渡ってしまうためエラーや想定外の結果となることがあります。いつ展開が行われるか、注意が必要です。

php

 new Mustache_Loader_FilesystemLoader(dirname(__FILE__).'/../views'),
  'partials_loader' => new Mustache_Loader_FilesystemLoader(dirname(__FILE__).'/../views/partials'),
  'escape' => function($v) {
    return htmlspecialchars($v, ENT_QUOTES, 'UTF-8');
  },
));

$v = array(
  'code' => '1',
  'zeropadding' => function($v) { return sprintf('%04d', $v); },
);

$tpl = $m->loadTemplate('index');
echo $tpl->render($v);
?>

mustache template



  
    
    mustache
  
  
    {{#zeropadding}}{{code}}{{/zeropadding}}

展開結果

mustache

0000

NginxのSPDY3.1パッチがリリース

admin — Tue, 28 Jan 2014 12:08:30 +0000

当ホームページは現在SPDY2に対応しておりましたが、NginxのSPDY3.1パッチがリリースされましたので、バージョンアップしてみました。

バージョンアップの前後でchrome://net-internals/#spdyの出力とコマンドラインで使えるSPDYのクライアントspdycatの出力は以下の通り。

バージョンアップ前

$ spdycat -nv https://www.atage.jp/
[  0.080] NPN select next protocol: the remote server offers:
          * spdy/2
          * http/1.1
          NPN selected the protocol: spdy/2
[  0.100] Handshake complete
[  0.100] send SYN_STREAM frame 
          (stream_id=1, assoc_stream_id=0, pri=3)
          :host: www.atage.jp
          :method: GET
          :path: /
          :scheme: https
          :version: HTTP/1.1
          accept: */*
          accept-encoding: gzip, deflate
          user-agent: spdylay/1.2.3-DEV
[  0.890] recv SYN_REPLY frame 
          (stream_id=1)
          content-encoding: gzip
          content-type: text/html; charset=UTF-8
          date: Tue, 28 Jan 2014 12:03:53 GMT
          server: nginx/1.5.8
          set-cookie: wassup=ODQ4Njk4NmNlZWZlMTMxZmMwZTA5MmIwYWU2NWMyMTI6OjEzOTA5MTMzMzI6Ojo6MjE4LjIxOS4yNDcuMTAwOjpsMjQ3MTAwLnBwcC5hc2FoaS1uZXQub3IuanA6Og%253D%253D; expires=Tue, 28-Jan-2014 12:53:52 GMT; path=/
          :status: 200 OK
          :version: HTTP/1.1
          x-pingback: https://www.atage.jp/xmlrpc.php
[  0.891] recv SETTINGS frame 
          (niv=1)
          [4(1):100]
[  0.934] recv DATA frame (stream_id=1, flags=1, length=6911)
[  0.934] send GOAWAY frame 
          (last_good_stream_id=0)

バージョンアップ後

$ spdycat -nv https://www.atage.jp/
[  0.074] NPN select next protocol: the remote server offers:
          * spdy/3.1
          * http/1.1
          NPN selected the protocol: spdy/3.1
[  0.096] Handshake complete
[  0.097] send SYN_STREAM frame 
          (stream_id=1, assoc_stream_id=0, pri=3)
          :host: www.atage.jp
          :method: GET
          :path: /
          :scheme: https
          :version: HTTP/1.1
          accept: */*
          accept-encoding: gzip, deflate
          user-agent: spdylay/1.2.3-DEV
[  0.116] recv SETTINGS frame 
          (niv=2)
          [4(0):100]
          [7(0):2147483647]
[  0.116] recv WINDOW_UPDATE frame 
          (stream_id=0, delta_window_size=2147418111)
[  0.956] recv SYN_REPLY frame 
          (stream_id=1)
          :status: 200 OK
          :version: HTTP/1.1
          content-encoding: gzip
          content-type: text/html; charset=UTF-8
          date: Tue, 28 Jan 2014 12:58:47 GMT
          server: nginx/1.5.9
          set-cookie: wassup=OTUxMWI1OTA3OWU2YjEyNjdhM2YwZjgwMWRmMzZiYmM6OjEzOTA5MTY2MjY6Ojo6MjE4LjIxOS4yNDcuMTAwOjpsMjQ3MTAwLnBwcC5hc2FoaS1uZXQub3IuanA6Og%253D%253D; expires=Tue, 28-Jan-2014 13:48:46 GMT; path=/
          x-pingback: https://www.atage.jp/xmlrpc.php
[  0.956] recv DATA frame (stream_id=1, flags=1, length=6911)
[  0.956] send GOAWAY frame 
          (last_good_stream_id=0)

バージョンが3.1に上がっていて、send windowやreceive windowの項目が追加されていることが確認できます。バージョンアップの効果は機会があれば検証したいと思います。

grunt-useminでJS、CSSを結合

admin — Fri, 17 Jan 2014 01:02:05 +0000

昨今のWebアプリでは複数のJavaScriptライブラリを当たり前のように使うようになりましたが、パッケージマネージャとしてbowerを使っている方も多いと思います。

読み込むJavaScriptファイルが多くなるに連れて、読み込みの時間に悩まされることが多くなります。そこで個別に読み込むのではなく、1ファイルに結合してロード時間を短縮するということが行われます。

タスク自動化ツールのGruntには、パッケージマネージャbowerで落としたJSファイルを1つにまとめるためのタスクがいくつかあります。ただ、bowerパッケージのディレクトリ構成の規約が甘く、パッケージによっては依存関係をいちいち書き下す必要があるものがほとんどです。

今回紹介するgrunt-useminは依存関係はhtmlを参照すればよいということに目を付けたのがポイント。使い勝手のよいタスクになっています。JSだけでなく、CSSの結合もできます。

ディレクトリ構成

以下のようなディレクトリ構成でappが開発用、distが本番デプロイ用のディレクトリです。テンプレートエンジンを使っていて、テンプレート(拡張子は.html)がapp/views以下にあるものとします。

やりたいことは、以下の2つ。

app/views以下にあるテンプレートを読み込んでそこに書かれているJS、CSSをそれぞれ結合、圧縮してdistのpublic/scripts、public/stylesにファイルを作る。
app/views以下にあるテンプレートをdist/viewsにコピーして、読み込むJS、CSSを上で作ったファイルに置き換える。

.
├── .bowerrc
├── .git
├── .gitignore
├── Gruntfile.js
├── app // 開発用
│   ├── cache
│   ├── database
│   ├── include
│   ├── public // DocumentRoot
│   │   ├── bower_components
│   │   ├── images
│   │   ├── index.php
│   │   ├── scripts
│   │   └── styles
│   ├── test
│   ├── upload
│   ├── vendor
│   └── views // テンプレート
├── bower.json
├── composer.json
├── dist // 本番デプロイ用
├── node_modules
└── package.json

htmlに結合ルールを記述

app/views以下のhtmlの結合したいJS、CSSの前後に以下のようなコメントを入れます。

CSS

コメントのルールは以下の通りで、typeの部分にjs or cssを指定します。(alternate search path)の部分は今回は使わず、Gruntfileで指定します。

(alternate search path) –>
… HTML Markup, list of script / link tags.

Gruntfile

Gruntfile.jsは以下の通り。useminPrepareはGruntのタスクを生成、useminはhtmlのJS、CSSの読み込み部分の書き換えを行います。

Gruntfile.js

copy: {
      main: {
        files: [{
          expand: true,
          cwd: 'app/',
          src: ['views/**/*.html'],
          dest: 'dist/'
        }]
      }
    },

    useminPrepare: {
      html: ['app/views/**/*.html'],
      options: {
        root: 'app/public',
        dest: 'dist'
      }
    },
    usemin: {
      html: ['dist/views/**/*.html'],
      options: {
        root: 'app/public',
        dirs: ['dist']
      }
    }

useminPrepareを実行するとconcatやuglifyの処理を事前に確認できます。

$ grunt useminPrepare
(...)
Configuration is now:

  concat:
  { generated: 
   { files: 
      [ { dest: '.tmp/concat/styles/common.css',
          src: 
           [ 'app/public/bower_components/bootstrap/dist/css/bootstrap.css',
             'app/public/bower_components/jquery.ui/dist/jquery-ui.min.css' ] },
        { dest: '.tmp/concat/scripts/common.js',
          src: 
           [ 'app/public/bower_components/less.js/dist/less-1.5.1.min.js',
             'app/public/bower_components/jquery/jquery.min.js',
             'app/public/bower_components/bootstrap/dist/js/bootstrap.js',
             'app/public/bower_components/jquery.ui/dist/jquery-ui.min.js' ] } ] } }

  uglify:
  { generated: 
   { files: 
      [ { dest: 'dist/scripts/common.js',
          src: [ '.tmp/concat/scripts/common.js' ] } ] } }

  cssmin:
  { generated: 
   { files: 
      [ { dest: 'dist/styles/common.css',
          src: [ '.tmp/concat/styles/common.css' ] } ] } }

Done, without errors.

タスクを実行するとdist以下に結合、圧縮後のJS、CSSファイルとそのファイルを使うように書き換えられたhtmlが生成されます。

$ grunt useminPrepare concat uglify cssmin copy usemin

上のコマンドを打つのは面倒なので、Gruntfileにタスクを登録しておきましょう。

grunt.registerTask('myusemin', ['useminPrepare', 'concat', 'uglify', 'cssmin', 'copy', 'usemin']);

感想

grunt-useminはhtmlに簡単なコメントを入れるだけで、結合、圧縮ファイルが生成され、それにあわせてhtmlも書き換えてくれるという優れもので、重宝しそうです。