PhantomJSを使ってみた

4329 ワード
スクショ PhantomJS PhantomJS テキストリンク

PhantomJS

PhantomJSはヘッドレスなQtWebkitベースのブラウザのことらしい。
まぁ、画面のないブラウザみたいな。

今回やったこと

  • 環境はwindows
  • CSVと画像ファイルを読み込んでHTML表示させたモノをスクリーンショットをとる

流れ

以下、同じフォルダでのこと
- phantomjs.exeを格納
- batファイルを起動する（yamamow.bat）
- jsファイルが呼ばれる（yamamow.js）
- phpファイルが呼ばれる（yamamow.php）
- CSVファイルを読み込む（yamamow.csv）
- 画像ファイルを読み込む（yamamow_wedding.png）
- ブラウザで表示（見えない）
- スクリーンショットを取得（yamamow.png）

まず、bat

phantomjs yamamow.js

続いて、jsの内容

以下は、yamamow.phpを読み込んで、サイズ、ズーム、画像を指定してみた。

var page = require('webpage').create();

// webページファイルを指定（以下はphpで）
page.open('yamamow.php', function(status) {

    console.log("Status: " + status);

    // 5000ミリ秒後にキャプチャ。
    setTimeout(function(){
        if(status === "success") {

            //　サイズ指定
            page.viewportSize = { width: 1920, height: 1080 }

            // ズームを指定
            page.zoomFactor = 2.0;

            // 画像を指定
            page.render('yamamow.png');

        }
        phantom.exit();
    }, 5000);
});

読み込む、CSVの中身

３列３行を用意してみた。

田中家、加藤家　ご結婚式,1F,結婚式会場
Gitシンポジウム,1F,大ホール
あじゃいる発表会,2F,鳳凰の間

呼ばれた、phpの内容

画像を背景右に、読み込んだCSVはdiv３つにそれぞれ設定してみた。

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <meta http-equiv="content-style-type" content="text/css">
   <title>お試し</title>
   <style type="text/css">

      body
      {
　　　　background-image: url(./yamamow_wedding.png);
　　　　background-position: right center;
　　　　background-repeat: no-repeat;
　　　　background-color: skyblue;
　　　　background-size: contain;
      }

      *.floating1
      {
　　　　float: left;
　　　　height:150px;
　　　　width:300px;
　　　　background-color:royalblue;
　　　　vertical-align: middle;
　　　　border: solid 1px royalblue;
　　　　font-size: 1.5em;
       color: white;

　　　　display: -webkit-flex;
　　　　display: flex;
　　　　-webkit-align-items: center; 　　　/* 縦方向中央揃え（Safari用） */
　　　　align-items: center;　　　　　　　　/* 縦方向中央揃え */
　　　　-webkit-justify-content: center; 　/* 横方向中央揃え（Safari用） */
　　　　justify-content: center;　　　　　　/* 横方向中央揃え */
      }

      *.floating2
      {
　　　　float: left;
　　　　height:150px;
　　　　width:200px;
　　　　background-color:royalblue;
　　　　vertical-align: middle;
　　　　border: solid 1px royalblue;
       font-size: 1.5em;
       color: white;

　　　　display: -webkit-flex;
　　　　display: flex;
　　　　-webkit-align-items: center;　　　/* 縦方向中央揃え（Safari用） */
　　　　align-items: center;　　　　　　　/* 縦方向中央揃え */
　　　　-webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
　　　　justify-content: center;　　　　　/* 横方向中央揃え */
      }

      *.clear
      {
　　　　clear: left;
　　　　width: 500px;
　　　　border: solid 1px skyblue;
      }
   </style>
</head>
<body>
<?php
$file = new SplFileObject("./yamamow.csv"); 
$file->setFlags(SplFileObject::READ_CSV); 
foreach ($file as $line) {
  if(!is_null($line[0])){
    echo '<div class="floating1"><p>',$line[0],'</p></div>';
    echo '<div class="floating2"><p>フロアー：',$line[1],'<br>';
    echo '会場：',$line[2],'</p></div>';
    echo '<div class="clear"></div>';
  }
} 
?>
</body>
</html>

画像ファイル

試しながら適当にサイズで・・・。

バッチ実行

DOS画面が表示され、「SUCCESS」が出ればOK

結果

こんな感じ