Headless Chromeの登場で、HTML+CSSのPDF化だけでなく、画像化においてもWEB系開発者にとっては最強の手段となった気がする。
やりたいこと
この5000兆円欲しい!の装飾で動的にテキストを画像化したい。こんな素敵なCSSを公開してくれたVoQnさんに感謝と畏敬の念しかない
codepen.io
そしておみくじ機能?で使う(かもしれない)
こんなのができる
Headless Chromeを使う利点
- CSSとそれに対応するブラウザの進化でこれまでフォトショなどが無いとできないグラデなどの複雑な装飾ができるようになった
- 普段使いのChromeで表示されるHTML+CSSならそのまま画像化でき、ユーザー側のブラウザ(IE市ね)は全く気にしなくていい
- HTMLなのでプログラムでの操作が簡単で動的に内容を変更もやりやすい
つくるもの
途中まではPDF化と同じなので自作の下記アプリを流用する。
各種インストール・デプロイ詳細などはこちら参照。
github.com
express部分をいろいろ書き換える。
https://github.com/uyamazak/hcep-pdf-server/blob/gosenchoen/app/gosenExpressApp.js
HTMLテンプレートを使いたいのでEJSを使った
www.npmjs.com
受け取ったテキストなどのクエリはvalidatorを使ってバリエーションしておく。
HTMLファイルはこれ
https://github.com/uyamazak/hcep-pdf-server/blob/gosenchoen/app/gosen.html
指定した要素(今回は.gosen-preview)だけ出力したいので下記を参考にscreenshot時に座標を指定して切り出す。
Capture DOM element screenshot using Chrome headless · GitHub
フォントはfonts/にM+をダウンロードして使うやつ入れておく
M+ FONTS
screenshotの下記オプションで下記背景を透明化もできる。(デフォは白)
omitBackground: true
デフォルトだと横幅が狭く切れたり、改行したりするのでViewPortを大きくしておく
gosenExpressApp.js
await page.setViewport({ width: 3000, height: 1000 })
開発はDockerでやって、あとはGAEにデプロイする(雑)
こんな感じで動的に画像を作れるようになった
https://gosenchoen-dot-hcep-pdf.appspot.com/?line1=Google%20Pixelbook&line2=%E6%AC%B2%E3%81%97%E3%81%84%EF%BC%81
GAEは開発用でいつか止めるかもしれないので、念のため出力された画像も
まだ解決できてない問題としてキャッシュだと304でcontent typeが画像で返らないため?、Twitterなどで画像として認識されないことがある。あとファイルサイズがちょっと大きいので縮小する機能も必要かも。
ゲームとかで使うバナーなどもフォトショいらずで、全部WEBデザイナーがHTML+CSSでつくり、こんなサーバーで画像化して配信っていう未来も来るかもしれない。
すべてコードかできるのでGit管理できるしフォトショを起動しなくてもよいので変更がめっちゃ楽だと思う。
- 作者: David Mark Clements,和田祐一郎
- 出版社/メーカー: オライリージャパン
- 発売日: 2013/02/23
- メディア: 大型本
- 購入: 2人 クリック: 4回
- この商品を含むブログ (5件) を見る
- 作者: 掌田津耶乃
- 出版社/メーカー: 秀和システム
- 発売日: 2017/09/19
- メディア: Kindle版
- この商品を含むブログを見る