Cloud FunctionsでOpen Graph Protocolの画像を自動生成する

FUKUOKA Engineers Day 2018 ~Autumn~

Transcript

1. Cloud Functionsで Open Graph Protocolの画像 を自動生成する pixiv Inc. 森内 建太 2018.9.22
2. 2 自己紹介まわり • ピクシブ福岡オフィス アルバイト • フロントエンドエンジニア • なんだかんだ iOS アプリも Rails も触る • 副業として GFTD. Fukuoka Works で Web 技術を 教えている 森建 petamoriken
3. 3 pixiv chatstory • チャット小説形式の作品が投稿 閲覧できるサービス • iOS ネイティブアプリと PWA • PWA は Firebase Hosting, Cloud Functions for Firebase で SSR
4. • チャット小説？ • 認知度を上げるために OGP の画像に アプリの画面を描画した 4 pixiv chatstory
5. 5 Cloud Functions で画像のレンダリング
6. 基本的には公式サンプルを見てください 6
7. ここではハマった項目を紹介します 7
8. フォントの問題 8
9. • 日本語フォントが入っていないので Noto Sans CJK JP を使った • node-canvas v2.0.0-alpha にローカルファイルのフォントを読み込ませる registerFont というメソッドがある 9 フォントの問題
10. CanvasRenderingContext2D の改行問題 10
11. • fillText を使ってテキストを描画する ◦ 改行文字は無視される ▪ pixiv chatstory は仕様で改行文字は入らないので今回は関係ない ◦ measureText で描画する前に横幅を測り、自前で改行を実装しなけらばならない ▪ “一文字”ずつ切り出して measureText をしまくる 11 CanvasRenderingContext2D の改行問題
12. JavaScript の文字列の分割 12
13. JavaScript 13 const str = " " ; // [0xD842, 0xDFB7], 0x91CE, 0x5C4B str.length; // 4 // ES2015 String#[@@itarator] [...str].length; // 3 [...str]; // [" ", " ", " "]
14. JavaScript 14 const str = " "; [...str].length; // 7 [...str]; // [" ", "\u200d", " ", "\u200d", " ", "\u200d", " "] Twemoji Copyright 2018 Twitter, Inc and other contributors
15. ＿人人人人人人人人人＿ ＞　一家離散の危機　＜ ￣Y^Y^Y^Y^Y^Y^Y^Y￣ 15
16. • ES2015 String#[@@iterator] はコードポイントで分割するが、これは ”一文字”ではない • ちゃんとやるには Unicode で定義されている Grapheme Cluster アルゴリズムを使う http://unicode.org/reports/tr29/ JavaScript 実装: https://github.com/orling/grapheme-splitter • “一文字” = 書記素（grapheme） 16 JavaScript の文字列の分割
17. • 将来的には ESNext Stage 3 Intl.Segmenter を使えばよくなる • 書記素で分割できるのはもちろんのこと、 locale を渡すと改行すべきかどうかも判定出来 る http://unicode.org/reports/tr14/ ◦ 英単語内の途中で改行されないだとか、句読点の字下げとかも考慮できる 17 JavaScript の文字列の分割（おまけ）
18. ユーザーの入力したテキストを元に いい感じの画像生成していきましょう　 18 Twemoji Copyright 2018 Twitter, Inc and other contributors
19. fin. 19
20. カラー絵文字の問題（未解決） 20
21. • カラー絵文字の OpenType フォントは4種類ある ◦ CBDT/CBLC: Noto Color Emoji ◦ COLR/CPAL: Segoe UI Emoji ◦ sbix: Apple Color Emoji ◦ SVG: Twitter Color Emoji • 詳しくは「カラー絵文字〜OpenTypeフォントの仕様を中心に〜」 https://qiita.com/496_/items/6910dd76283ba1347327 21 カラー絵文字の問題
22. • CBDT/CBLC, SVG を node-canvas に読み込ませてみたが上手く行かなかった ◦ Cairo/Pango の最新バージョンに対応しないといけないっぽい ◦ Cairo and Pango have to do some coordinating to get emojis working, I would try to compile the latest of both from source. Supposedly it should work but as you can see above we couldn't get it working, and I sunk a lot of time into it https://github.com/Automattic/node-canvas/issues/760#issuecomment-380205365 22 カラー絵文字の問題
23. • Twemoji には PNG があるので自分で位置調節して drawImage したらなんとか出来る ◦ node-canvas の measureText が最新の canvas の仕様に則って width 以外の情 報も取れたらなんとかなりそうな気がする ◦ 一旦描画してピクセル単位で解析するライブラリが一応存在する https://github.com/dy/font-measure ▪ 重そう 23 カラー絵文字の問題 Twemoji Copyright 2018 Twitter, Inc and other contributors