-webkit-linear-gradient(#E3B686, #AA6A26)

© Mashmatrix, Inc. 2012

Herokuで動かすスクリーンショットサーバ

@stomitaShinichi Tomita

© Mashmatrix, Inc. 2012

Who am I ?

❖ Shinichi Tomita❖ CEO at Mashmatrix, Inc.❖ JavaScript Developer❖ Digital Identity Lover

(NOT Security YAKUZA)

@stomita

© Mashmatrix, Inc. 2012

今日のおはなし❖ Heroku上でスクリーンショットサーバを稼働できるようにしました

❖ 自社で現在開発中のサービスで活用してます

© Mashmatrix, Inc. 2012

Pittile (ピッタイル)

❖ ウェブ上の写真をアレンジしてページとして公開できるスマホ向けサービス

❖ HTML5／CSS3で描画

❖ pittile.com で現在プライベートベータ中

© Mashmatrix, Inc. 2012

なぜスクリーンショットが必要か

❖ 出来上がったページの画像が必要（サムネイル表示やFBにシェアする時）

❖ 現在公開されているWebページスクリーンショットサービスは、横幅サイズなどPCブラウザからのビューなので使えない

© Mashmatrix, Inc. 2012

PhantomJS Buildpack❖ PhantomJSはサーバ上で動くGUIを持たないWebkitブラウザ

❖ Heroku Buildpack の仕組みを使って、PhantomJSをBuildpack化

❖ PhantomJSのレンダリング機能を使って、描画したページを画像ファイルに

© Mashmatrix, Inc. 2012

利用方法

$ heroku create --buildpack http://github.com/stomita/heroku-buildpack-phantomjs.git

$ git push heroku master

renderer: phantomjs screenshot.js

$ heroku ps:scale renderer=1

Procfile

開始

作成

© Mashmatrix, Inc. 2012

まとめ❖ Heroku Buildpackを使えば、スクリーンショットサーバとかIaaSでしかできなかったような事もできるよ

❖ 起動・停止・スケールも簡単スピーディ

❖ Heroku Schedulerと組み合わせて、Webサイトを定点観測して画像で保存とか

❖ Pittileは７月中にパブリックベータ予定です

-webkit-linear-gradient(#E3B686, #AA6A26)

© Mashmatrix, Inc. 2012

http://pittile.com

© Mashmatrix, Inc. 2012

補遺

❖ アーキテクチャ寄りの資料

- http://www.slideshare.net/shinichitomita/phantomjs-screenshot-server-on-heroku