Upgrade to Pro — share decks privately, control downloads, hide ads and more …

OGP画像を生成するNode.jsのライブラリを作ってみた / Create a Node.js module for generating Open Graph image

OGP画像を生成するNode.jsのライブラリを作ってみた / Create a Node.js module for generating Open Graph image

Kanazawa.js meetup #1 LT発表

Kentaro Matsushita

January 19, 2020
Tweet

More Decks by Kentaro Matsushita

Other Decks in Programming

Transcript

  1. OGP画像を⽣成するNode.jsの

    ライブラリを作ってみた
    Kentaro Matsushita
    Kanazawa.js meetup #1
    2020/01/19

    View Slide

  2. ⾃⼰紹介
    ⾦沢市内のゲーム会社で働くフロントエンドエンジニア
    ゲームプラットフォームのリプレイス開発に従事
    Kentaro Matsushita
    kentaro-m _kentaro_m

    View Slide

  3. Node.jsでOGP画像の動的⽣成に
    チャレンジした話をします
    今⽇のトピック

    View Slide

  4. ⽬次
    • OGP画像とは
    • Node.jsでOGP画像⽣成
    • 作成したライブラリ紹介
    • 画像⽣成の仕組み
    • 実装ハマりポイント
    • さいごに

    View Slide

  5. OGP画像とは
    • Open Graph Protocol (OGP)
    • SNSにWebサイトをシェアしたときにタイトルや概要、サムネイルな
    どのWebサイト情報を正しく伝えるための標準規格
    • OGP画像
    • SNSでWebサイトをシェアしたときにタイムラインに表⽰される画像
    • フォロワーの⽬を引いて、Webサイトを⾒てもらうのが⽬的で設定

    View Slide

  6. これがOGP画像です

    View Slide

  7. OGP画像のもやもや
    • 画像が設定されてない場合、寂しい⾒た⽬になる
    • 画像を毎回作成するのは⾯倒

    View Slide

  8. OGP画像の動的⽣成が増えている
    • 記事タイトルや作者名から動的に画像を⽣成する事例が増加
    • Qiitaやはてなブログ、dev.toなどがサポートしている
    • 画像配信CDNの画像へのテキスト追加機能やサーバーサイドの
    画像処理の仕組みで実現
    • 記事の作成者はOGP画像作成の考慮する必要がない
    • SNSにシェアしたときに統⼀感のある⾒た⽬になる

    View Slide

  9. Node.jsで動的に画像⽣成する

    ライブラリを作った
    ⾃分の課題解決のために

    View Slide

  10. 作例

    View Slide

  11. View Slide

  12. View Slide

  13. できること
    • 記事タイトルと作者名を含んだ画像⽣成
    • 各種カスタマイズ機能
    • テキスト周囲のパディング指定
    • 出⼒画像サイズの指定
    • 背景⾊や背景画像の指定、作者のアイコン指定
    • 任意のフォントの使⽤、フォントサイズやフォントカラーの指定
    • タイムアウト設定

    View Slide

  14. 画像⽣成の仕組み

    View Slide

  15. Node.jsで動的に画像⽣成する
    • ブラウザで処理するならCanvas APIで実現できそう
    • JavaScriptとHTMLのCanvas要素を使⽤し、ブラウザ上で図を描画を
    ⾏うHTML5の機能
    • GatsbyJSのビルド時に画像⽣成したいので、サーバーサイドで動かし
    たい
    • node-canvasというNode.jsモジュールがある
    • Canvas APIの機能がサーバーサイドでも利⽤できる

    View Slide

  16. node-canvasを簡単に触ってみる

    View Slide

  17. 正⽅形を描画するコード例
    • 描画したい位置の座標と図形の⼤きさを指定する

    View Slide

  18. テキストを描画するコード例
    • 描画したい位置の座標とテキストを指定する

    View Slide

  19. ⻑⽅形とテキストの描画を
    組み合わせて画像を⽣成を実現

    View Slide

  20. 実装ハマりポイント

    View Slide

  21. テキスト描画は座標計算との戦い

    View Slide

  22. テキスト描画は座標計算との戦い
    • キャンバスサイズに収まるようにテキスト配置が必要
    • ⾏間やフォントサイズの調整やテキストの折返しなどを

    ⾏う場合は描画位置の座標計算が必要
    • CSSのありがたみをすごく感じる
    • レイアウトの柔軟性は乏しい
    • テキストや画像の配置を柔軟に変えることは難しい

    View Slide

  23. テキスト描画は座標計算との戦い
    • こんにちは。こんばんは。を描画した例
    • キャンバスが400px、フォントサイズが48pxの

    場合、幅は8⽂字しか⼊らない
    • テキストを”こんにちは。こん”と”ばんは。”に

    わけて、2⾏に分割して描画する必要がある
    • measureText(text)を使⽤することで、引数に渡したテキストを描画す
    る際の幅や⾼さが分かる
    • 使⽤したフォントやフォントサイズによって、異なる計算結果が出る

    View Slide

  24. 停⽌しないタイムアウト処理

    View Slide

  25. タイムアウト処理を追加
    • 記事タイトルやフォントサイズはユーザー指定で⼊⼒する
    • テキストの⻑さやフォントサイズの値が⼤きい場合は計算に時間がか
    かることもある
    • ⼀定時間内に処理が終了しない場合にタイムアウトエラーを
    throwするようにした
    • タイムアウト制御をPromise.race()で⾏うようにした
    • タイムアウトの時間はユーザー指定可能

    View Slide

  26. 停⽌しないタイムアウト処理
    • Promise.race() は複数のPromise関数を実⾏して、最初に成功
    か失敗したPromise関数の結果を得る
    • 画像⽣成関数の成功かタイムアウト関数の失敗のいずれかの結果を得
    て、処理を終了したい

    View Slide

  27. 停⽌しないタイムアウト処理

    View Slide

  28. 停⽌しないタイムアウト処理
    • ⾃分の書いたコードは画像⽣成関数もタイムアウト関数も双⽅
    とも最後まで処理された
    • 本来であれば、⼀⽅の関数の結果が返却されたら、もう⼀⽅は停⽌し
    てほしい
    • Promise.race()は最初に成功か失敗したPromise関数の結果を
    得たあとに、他のPromise関数の停⽌は保証されない
    • つまり⾃分でもう⼀⽅の関数の処理を⽌める必要がある

    View Slide

  29. 正常なタイムアウト処理

    View Slide

  30. 今後の展望
    • ライブラリをnpmに公開する
    • ライブラリを使って、GatsbyJSのプラグインを作りたい
    • Kanazawa.jsのコミュニティページで動作させる

    View Slide

  31. さいごに
    • OGP画像の動的⽣成について紹介しました
    • 画像⽣成が⾃動化されて、楽をすることできた
    • OGP画像を⼿っ取り早く作成するにはCDN利⽤が良いと思う
    • カスタマイズ性を求めるならサーバーサイドでやるのもあり
    • ソースコードはGitHubに公開しているので、興味がある⽅はご
    覧ください
    • kentaro-m/generate-og-image

    View Slide