ahomu/ajax_page.html

## ajax_page.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Ajax Page</title>
</head>
<body style="background-color: #fff;">
<h1>Ajax的にナニかするよー</h1>
<div id="content">
  <p>loading...</p>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  // お手軽にTimerで再現 $.ajax().done() 的なイメージ
  setTimeout(function() {
    var content = '<h2>ようかんマン参上</h2>'+
              '<div style="font-size:500%;">ヽ|・∀・|ノ</div>'+
              '<p>'+navigator.userAgent+'</p>';

    // 内容つっこむ
    document.getElementById('content').innerHTML = content;

    // windowからphantomの呼び出しが生えてるときだけ
    'callPhantom' in window && window.callPhantom();

  }, 1000);
}, false);
</script>
</body>
</html>

## make_static.js
var page = require('webpage').create(),
    system = require('system');

// スクショ用に小さめViewport
page.viewportSize = {
  width: 480,
  height: 320
};

if (system.args.length === 1) {
  console.log('Usage: make_static.js <target URL>');
  phantom.exit(1);
} else {
  page.open(system.args[1], function() {
    // 1. ページを開いた直後のとき
    page.render('./1-initial.png');

    // 2. Ajax完了時、callPhantomされたとき
    page.onCallback = function() {
      page.render('./2-loaded.png');

      // 標準出力にHTML Contentをはき出す
      console.log(page.content);
      phantom.exit();
    };
  });
}
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<title>Ajax Page</title>
	</head>
	<body style="background-color: #fff;">
	<h1>Ajax的にナニかするよー</h1>
	<div id="content">
	<p>loading...</p>
	</div>

	<script>
	document.addEventListener('DOMContentLoaded', function() {
	// お手軽にTimerで再現 $.ajax().done() 的なイメージ
	setTimeout(function() {
	var content = '<h2>ようかんマン参上</h2>'+
	'<div style="font-size:500%;">ヽ\|・∀・\|ノ</div>'+
	'<p>'+navigator.userAgent+'</p>';

	// 内容つっこむ
	document.getElementById('content').innerHTML = content;

	// windowからphantomの呼び出しが生えてるときだけ
	'callPhantom' in window && window.callPhantom();

	}, 1000);
	}, false);
	</script>
	</body>
	</html>
	var page = require('webpage').create(),
	system = require('system');

	// スクショ用に小さめViewport
	page.viewportSize = {
	width: 480,
	height: 320
	};

	if (system.args.length === 1) {
	console.log('Usage: make_static.js <target URL>');
	phantom.exit(1);
	} else {
	page.open(system.args[1], function() {
	// 1. ページを開いた直後のとき
	page.render('./1-initial.png');

	// 2. Ajax完了時、callPhantomされたとき
	page.onCallback = function() {
	page.render('./2-loaded.png');

	// 標準出力にHTML Contentをはき出す
	console.log(page.content);
	phantom.exit();
	};
	});
	}