画像ジェネレータ？みたいなサイトをよく見かけてて
どういう風にしたら作れるのか気になっていた
こちらの記事読んだら素人でもできんじゃね？と思ってこういうものをつくった
概要
- 動的な画像生成の簡単な方法を試した
- 生成された画像をFirebaseに保存した
- OGP用のメタタグを設定して生成した画像をTwitter Cardsに登録できるようにした
実際にやったこと
かいつまんで…
画像を動的に生成する
クライアント側で画像を生成する方法、なんか楽できないか考えたところ
とりあえずdom-to-imageというライブラリがあったので使ってみた
これを使うと指定したDOMを画像として吐き出してくれる
雰囲気こんな感じ
<template>
<div>
<target-component ref="target"/>
</div>
</template>
<script>
import domtoimage from "dom-to-image";
export default {
//中略
methods: {
async submit() {
const el = this.$refs.target.$el;
const options = {
type: "dataURL"
};
const output = await domtoimage.toPng(el, { height: 370, width: 370 });
await this.upload(output);
},
async upload(data) {//////}
}
</script>
こういう感じで吐き出される
dom-to-imageだとWebフォントがうまくとってこれないなど
見たままのDOMを生成することはできない
また、クライアントの環境に仕上がりがめちゃくちゃ左右される
ここで生成するのはTwitter Cardsに貼り付けるためだけの画像なので
割り切ることにした
動的に生成された画像をどこかに保管する
Firebaseに保存することにした
import firebase from "firebase";
const config = {
//呪文
};
if (!firebase.apps.length) {
firebase.initializeApp(config);
}
export default firebase
本体
<script>
import firebase from "~/plugins/firebase";
export default {
methods: {
async upload(data) {
const db = firebase.firestore();
const sRef = firebase.storage().ref();
const name = "test"
const fileRef = sRef.child(`${name}.png`);
fileRef
.putString(data, "data_url")
.then(ss => {
const card = db.collection("example").doc(name);
return card.set(
{
message: this.forms
},
{ merge: false }
);
})
.then(docRef => {
})
.catch(err => {
});
}
}
</script>
めちゃめちゃ簡単だった
え、ほんとにこれでいいのか？
OGP用にタグを設定する
コードでやることはmetaタグをheadに書くだけ
<script>
export default {
head() {
return {
meta: [//中略]
}
}
</script>
Herokuを使うことにしたので、Heroku用にSSRの設定を書く
web: npm run start
nuxtにも、SSRの設定をしとく
module.exports = {
mode: 'universal'
}
できたもの
わーいTwitter Cardsが表示された
わけわからんと思うので、文脈を補足
応援しているVtuberのパンチラインを個人的に集めたサイトを作っていた
たまたまその時期が正月だったから、カルタという形でパンチラインを取りまとめていた
作って公開して、ほかの人も好きなパンチラインを共有できるようにできればちょっと面白いかもなと思った
そんなときにこちらの記事読んだら、これっておれでもできんじゃね？と思ってこういうものを試した
感想
JavaScript触り始めて一年満たないくらいでも
ひとのもの参考にしながらやったらなんかしら作れるんだな という実感
とりあえずこの手のサイトを作るうえでの、一通りの流れはつかめた
これ作るの多分1人日くらいだった
firebaseすごい
バックエンド用意すんのかったるそうだと思ってたけど
こんな簡単にできちまうのか、とビビっている
画像生成のところもいけそうな気がするし、簡単な修整もfirebaseでできそうだ
最後に
至らない点が多々あるかと思いますが、
「こうすべきだ」というポイントなどあれば
教えていただけたら嬉しいです。