GAミント至上主義

Web Monomaniacal Developer@ビズオーシャン

5000兆円欲しい!.cssをHeadless Chrome+Google App Engineを使いサーバーで画像化する

Headless Chromeの登場で、HTML+CSSのPDF化だけでなく、画像化においてもWEB系開発者にとっては最強の手段となった気がする。

やりたいこと

この5000兆円欲しい!の装飾で動的にテキストを画像化したい。こんな素敵なCSSを公開してくれたVoQnさんに感謝と畏敬の念しかない
codepen.io

そしておみくじ機能?で使う(かもしれない)

5000兆円食べたい!
※画面は開発中のものです

こんなのができる
f:id:uyamazak:20180912111059p:plain

なぜわざわざサーバーで画像化するのか

最初はHTML+CSSのままやろうと思ったけど、いろいろ問題が出てきた。次にcanvasで画像化も考えたけど、難しすぎて力尽きた。
サーバー側で画像化することで下記の問題を解決できる

ブラウザ依存の問題(IE、Edge士ね)

上記のCSSChromeだとちゃんと出るけど、Edge、IEだとしょぼい

画像の方がサイズ変更が容易

スマホの時など画面幅によって改行されてしまったり、文字サイズを変えるとグラデなど装飾のバランスがおかしくなってしまう。
画像化されていればcssなどで問題なく拡大縮小できる。

シェア+保存しやすい

画像なので右クリで保存できるし、URLができるので、そのままTwitterなどでも共有できる

あとサーバーで描画処理をするので、ユーザー端末に優しいというのもある。

Headless Chromeを使う利点

  1. CSSとそれに対応するブラウザの進化でこれまでフォトショなどが無いとできないグラデなどの複雑な装飾ができるようになった
  2. 普段使いのChromeで表示されるHTML+CSSならそのまま画像化でき、ユーザー側のブラウザ(IE市ね)は全く気にしなくていい
  3. 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は開発用でいつか止めるかもしれないので、念のため出力された画像も
f:id:uyamazak:20180912111059p:plain

まだ解決できてない問題としてキャッシュだと304でcontent typeが画像で返らないため?、Twitterなどで画像として認識されないことがある。あとファイルサイズがちょっと大きいので縮小する機能も必要かも。

ゲームとかで使うバナーなどもフォトショいらずで、全部WEBデザイナーがHTML+CSSでつくり、こんなサーバーで画像化して配信っていう未来も来るかもしれない。
すべてコードかできるのでGit管理できるしフォトショを起動しなくてもよいので変更がめっちゃ楽だと思う。

Nodeクックブック

Nodeクックブック

Node.js 超入門

Node.js 超入門