1. Herokuで動かす
スクリーンショットサーバ
-webkit-linear-gradient(#E3B686, #AA6A26)
@stomita
Shinichi Tomita
© Mashmatrix, Inc. 2012

2. Who am I ?
❖ Shinichi Tomita
❖ CEO at Mashmatrix, Inc. @stomita
❖ JavaScript Developer
❖ Digital Identity Lover
(NOT Security YAKUZA)
© Mashmatrix, Inc. 2012

3. 今日のおはなし
❖ Heroku上でスクリーンショットサー
バを稼働できるようにしました
❖ 自社で現在開発中のサービスで活用
してます
© Mashmatrix, Inc. 2012

4. Pittile (ピッタイル)
❖ ウェブ上の写真をアレン
ジしてページとして公開で
きるスマホ向けサービス
❖ HTML5／CSS3で描画
❖ pittile.com で現在プライ
ベートベータ中
© Mashmatrix, Inc. 2012

5. なぜスクリーンショットが必要か
❖ 出来上がったページの画像が必要（サム
ネイル表示やFBにシェアする時）
❖ 現在公開されているWebページスクリー
ンショットサービスは、横幅サイズなど
PCブラウザからのビューなので使えない
© Mashmatrix, Inc. 2012

6. PhantomJS Buildpack
❖ PhantomJSはサーバ上で動くGUIを持
たないWebkitブラウザ
❖ Heroku Buildpack の仕組みを使って、
PhantomJSをBuildpack化
❖ PhantomJSのレンダリング機能を使っ
て、描画したページを画像ファイルに
© Mashmatrix, Inc. 2012

7. 利用方法
作成
$ heroku create --buildpack http://github.com/stomita/heroku-
buildpack-phantomjs.git
$ git push heroku master
Procfile
renderer: phantomjs screenshot.js
開始
$ heroku ps:scale renderer=1
© Mashmatrix, Inc. 2012

8. まとめ
❖ Heroku Buildpackを使えば、
スクリーンショットサーバとかIaaSでしか
できなかったような事もできるよ
❖ 起動・停止・スケールも簡単スピーディ
❖ Heroku Schedulerと組み合わせて、Webサ
イトを定点観測して画像で保存とか
❖ Pittileは７月中にパブリックベータ予定です
© Mashmatrix, Inc. 2012

9. -webkit-linear-gradient(#E3B686, #AA6A26)
http://pittile.com
© Mashmatrix, Inc. 2012

10. 補遺
❖ アーキテクチャ寄りの資料
- http://www.slideshare.net/
shinichitomita/phantomjs-screenshot-
server-on-heroku
© Mashmatrix, Inc. 2012