Herokuで動かす スクリーンショットサーバ
-
Upload
shinichi-tomita -
Category
Technology
-
view
1.292 -
download
0
Transcript of Herokuで動かす スクリーンショットサーバ
![Page 1: Herokuで動かす スクリーンショットサーバ](https://reader036.fdocument.pub/reader036/viewer/2022082605/554d1e51b4c905ab268b4748/html5/thumbnails/1.jpg)
-webkit-linear-gradient(#E3B686, #AA6A26)
© Mashmatrix, Inc. 2012
Herokuで動かすスクリーンショットサーバ
@stomitaShinichi Tomita
![Page 2: Herokuで動かす スクリーンショットサーバ](https://reader036.fdocument.pub/reader036/viewer/2022082605/554d1e51b4c905ab268b4748/html5/thumbnails/2.jpg)
© Mashmatrix, Inc. 2012
Who am I ?
❖ Shinichi Tomita❖ CEO at Mashmatrix, Inc.❖ JavaScript Developer❖ Digital Identity Lover
(NOT Security YAKUZA)
@stomita
![Page 3: Herokuで動かす スクリーンショットサーバ](https://reader036.fdocument.pub/reader036/viewer/2022082605/554d1e51b4c905ab268b4748/html5/thumbnails/3.jpg)
© Mashmatrix, Inc. 2012
今日のおはなし❖ Heroku上でスクリーンショットサーバを稼働できるようにしました
❖ 自社で現在開発中のサービスで活用してます
![Page 4: Herokuで動かす スクリーンショットサーバ](https://reader036.fdocument.pub/reader036/viewer/2022082605/554d1e51b4c905ab268b4748/html5/thumbnails/4.jpg)
© Mashmatrix, Inc. 2012
Pittile (ピッタイル)
❖ ウェブ上の写真をアレンジしてページとして公開できるスマホ向けサービス
❖ HTML5/CSS3で描画
❖ pittile.com で現在プライベートベータ中
![Page 5: Herokuで動かす スクリーンショットサーバ](https://reader036.fdocument.pub/reader036/viewer/2022082605/554d1e51b4c905ab268b4748/html5/thumbnails/5.jpg)
© Mashmatrix, Inc. 2012
なぜスクリーンショットが必要か
❖ 出来上がったページの画像が必要(サムネイル表示やFBにシェアする時)
❖ 現在公開されているWebページスクリーンショットサービスは、横幅サイズなどPCブラウザからのビューなので使えない
![Page 6: Herokuで動かす スクリーンショットサーバ](https://reader036.fdocument.pub/reader036/viewer/2022082605/554d1e51b4c905ab268b4748/html5/thumbnails/6.jpg)
© Mashmatrix, Inc. 2012
PhantomJS Buildpack❖ PhantomJSはサーバ上で動くGUIを持たないWebkitブラウザ
❖ Heroku Buildpack の仕組みを使って、PhantomJSをBuildpack化
❖ PhantomJSのレンダリング機能を使って、描画したページを画像ファイルに
![Page 7: Herokuで動かす スクリーンショットサーバ](https://reader036.fdocument.pub/reader036/viewer/2022082605/554d1e51b4c905ab268b4748/html5/thumbnails/7.jpg)
© 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
開始
作成
![Page 8: Herokuで動かす スクリーンショットサーバ](https://reader036.fdocument.pub/reader036/viewer/2022082605/554d1e51b4c905ab268b4748/html5/thumbnails/8.jpg)
© Mashmatrix, Inc. 2012
まとめ❖ Heroku Buildpackを使えば、スクリーンショットサーバとかIaaSでしかできなかったような事もできるよ
❖ 起動・停止・スケールも簡単スピーディ
❖ Heroku Schedulerと組み合わせて、Webサイトを定点観測して画像で保存とか
❖ Pittileは7月中にパブリックベータ予定です
![Page 9: Herokuで動かす スクリーンショットサーバ](https://reader036.fdocument.pub/reader036/viewer/2022082605/554d1e51b4c905ab268b4748/html5/thumbnails/9.jpg)
-webkit-linear-gradient(#E3B686, #AA6A26)
© Mashmatrix, Inc. 2012
http://pittile.com
![Page 10: Herokuで動かす スクリーンショットサーバ](https://reader036.fdocument.pub/reader036/viewer/2022082605/554d1e51b4c905ab268b4748/html5/thumbnails/10.jpg)
© Mashmatrix, Inc. 2012
補遺
❖ アーキテクチャ寄りの資料
- http://www.slideshare.net/shinichitomita/phantomjs-screenshot-server-on-heroku