Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
Copyright © M&A Cloud All rights reserved. SSGなサイトでOGP画像を動的生成したい Shizuoka.js#6 LT Kenjiro Kubota
Slide 2
Slide 2 text
Copyright © M&A Cloud All rights reserved. Profile 2 久保田 賢二朗 kubotak-is kubotak_public kenjiro.kubota 株式会社M&Aクラウド JavaScript Go PHP https://kubotak.page
Slide 3
Slide 3 text
Copyright © M&A Cloud All rights reserved. SSGとは
Slide 4
Slide 4 text
Copyright © M&A Cloud All rights reserved. Static Site Generator Static Site Generator ● HTMLを事前に生成して配信すること ○ サーバーに動的な処理がない ● いわゆるJamStackとかそれ
Slide 5
Slide 5 text
Copyright © M&A Cloud All rights reserved. OGPとは
Slide 6
Slide 6 text
Copyright © M&A Cloud All rights reserved. Open Graph Protocol Open Graph Protocol ● Facebookでシェアされるときにいい感じに画像やタイトルを出す 仕組み(雑に) ● プロトコルの初期バージョンはRDFaに基づいている ○ HTMLをマークアップするための記述仕様の一つ
Slide 7
Slide 7 text
Copyright © M&A Cloud All rights reserved. どうやって作ったらいいの?
Slide 8
Slide 8 text
Copyright © M&A Cloud All rights reserved. QiitaやZennはどうなってるのか QiitaやZennはどうなってるのか ● Qiita ○ 画像配信サービス(CDN)のimgixを利用 ○ クエリパラメータによる文字と台紙の合成 ● Zenn ○ 画像配信サービス(CDN)のCloudinaryを利用 ○ Qiitaとたぶん同じ
Slide 9
Slide 9 text
Copyright © M&A Cloud All rights reserved. 外部サービス(CDN)を使おう
Slide 10
Slide 10 text
Copyright © M&A Cloud All rights reserved. 完
Slide 11
Slide 11 text
Copyright © M&A Cloud All rights reserved. そうじゃない、他には?
Slide 12
Slide 12 text
Copyright © M&A Cloud All rights reserved. vercel/og-image vercel/og-image ● Open Graph Image as a Service!!! ● リポジトリをフォークしてカスタマイズしてVercelにデプロイ ● デフォルトでは日本語フォントが無いので注意
Slide 13
Slide 13 text
Copyright © M&A Cloud All rights reserved. 「Vercel使ってないし、ホスティン グサービスは1個に集約したい」 私
Slide 14
Slide 14 text
Copyright © M&A Cloud All rights reserved. 「Vercel使ってないし、ホスティン グサービスは1個に集約したい」 私 「というか、大したページ数ないの で事前に生成しちゃおう」 私
Slide 15
Slide 15 text
Copyright © M&A Cloud All rights reserved. 材料 recipe ● 台紙 ● フリーフォント ● sharp ● text-svg ● tiny-segmenter ● image-size
Slide 16
Slide 16 text
Copyright © M&A Cloud All rights reserved. 台紙 台紙 ● これがないと始まらない! ○ 文字と合成する際のベースとなるテンプレート
Slide 17
Slide 17 text
Copyright © M&A Cloud All rights reserved. フリーフォント フリーフォント ● 日本語を出力するなら日本語フォントは必須 ● おすすめはGoogleFonts https://fonts.google.com/?subset=japanese
Slide 18
Slide 18 text
Copyright © M&A Cloud All rights reserved. sharp sharp ● node.js製画像変換ライブラリ ○ リサイズ ○ 合成 ○ 回転・反転・etc ○ 色を操作 ○ etc ■ imageMagicよりも高速にリサイズできる(らしい)
Slide 19
Slide 19 text
Copyright © M&A Cloud All rights reserved. text-svg text-svg ● node-canvasを利用してテキストからsvgを生成する ○ text2pngというライブラリのフォーク ○ 類似のライブラリにtext-to-svgがあるが改行に対応してない のでtext-svgを利用
Slide 20
Slide 20 text
Copyright © M&A Cloud All rights reserved. ここまでの流れ 台紙と合成する文字だけの画像を生成
Slide 21
Slide 21 text
Copyright © M&A Cloud All rights reserved. ここまでの流れ 台紙と合成する文字だけの画像を生成 fontファイルの読み込み
Slide 22
Slide 22 text
Copyright © M&A Cloud All rights reserved. ここまでの流れ 台紙と合成する文字だけの画像を生成 台紙が黒いので白文字
Slide 23
Slide 23 text
Copyright © M&A Cloud All rights reserved. ここまでの流れ 台紙と合成する文字だけの画像を生成 文字は中央寄せ
Slide 24
Slide 24 text
Copyright © M&A Cloud All rights reserved. ここまでの流れ 台紙と文字を合成してファイル書き出し
Slide 25
Slide 25 text
Copyright © M&A Cloud All rights reserved. ここまでの流れ 台紙と文字を合成してファイル書き出し 台紙の読み込み
Slide 26
Slide 26 text
Copyright © M&A Cloud All rights reserved. ここまでの流れ 台紙と文字を合成してファイル書き出し 合成!
Slide 27
Slide 27 text
Copyright © M&A Cloud All rights reserved. ここまでの流れ 台紙と文字を合成してファイル書き出し 出力サイズを決めて書き出し
Slide 28
Slide 28 text
Copyright © M&A Cloud All rights reserved. やったか?
Slide 29
Slide 29 text
Copyright © M&A Cloud All rights reserved. やってない
Slide 30
Slide 30 text
Copyright © M&A Cloud All rights reserved. なにがいけないのか なにがいけないのか ● svgで生成したタイトル画像が台紙のサイズを超えたのでsharpで エラー ● タイトルはcontentfulから取得した文字列を使ってるので改行 コードがない ○ 長いタイトルで大きい画像が生成されてしまう
Slide 31
Slide 31 text
Copyright © M&A Cloud All rights reserved. タイトルを改行しよう
Slide 32
Slide 32 text
Copyright © M&A Cloud All rights reserved. タイトルの改行 タイトルの改行 ● n文字間隔で「\n」(改行コード)を追加する ● ただ追加しただけではいい感じにならない可能性がある
Slide 33
Slide 33 text
Copyright © M&A Cloud All rights reserved.
Slide 34
Slide 34 text
Copyright © M&A Cloud All rights reserved. 禁則処理 禁則処理 ● 禁則処理のようなものを行いたい ● また、単語の途中で折り返さないようにしたい 禁則処理(きんそくしょり)とは、特に日本語の文書作成・組版におい て、「約物などが行頭・行末などにあってはならない」などとされる禁止 事項、または、それらを回避するために、字詰めや文の長さを調整したり すること。 “ ”
Slide 35
Slide 35 text
Copyright © M&A Cloud All rights reserved. tiny-segmenter tiny-segmenter ● 軽量な分かち書きを行うライブラリ(形態素解析)
Slide 36
Slide 36 text
Copyright © M&A Cloud All rights reserved.
Slide 37
Slide 37 text
Copyright © M&A Cloud All rights reserved. 禁則処理風に「、」や「。」 の前で改行しない
Slide 38
Slide 38 text
Copyright © M&A Cloud All rights reserved. image-size image-size ● 画像サイズを取得するライブラリ ○ 形態素解析の結果、長い固有名詞や英語ワードなどで一行が 長くなってしまった場合、台紙サイズを越える可能性がある ○ サイズが大きかったら台紙以下になるようにリサイズしてか ら合成する
Slide 39
Slide 39 text
Copyright © M&A Cloud All rights reserved.
Slide 40
Slide 40 text
Copyright © M&A Cloud All rights reserved. 完成!
Slide 41
Slide 41 text
Copyright © M&A Cloud All rights reserved.
Slide 42
Slide 42 text
Copyright © M&A Cloud All rights reserved. まとめ まとめ ● OGP画像を作りたかったらCDNサービスを使おう ● 自前で頑張るなら形態素解析とか使えばいい感じになると思う ● デプロイのたびに毎回生成するのめんどくさくない?件数が多かっ たらどうするの? ○ 個人ブログ用に作ったので気にしない! ○ 件数が多いならCDNサービスに任せよう!
Slide 43
Slide 43 text
Copyright © M&A Cloud All rights reserved. Thank you for watching :)