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
結果
こんな感じ
