グリッチエフェクトのかかった文字列の画像を作成・ツイートできる"Text Glitcher"を作った
以下のようなグリッチエフェクトのかかった文字列を作れるWeb Appを作りました
— tenmihi (@tenmihi) 2019年5月25日
OGPを動的に作るようなアプリ面白そうだなと思ったので練習がてらに
加えていつもvueばかり触っていて、react殆ど触ったことなかったのでそっちで書いてみました
仕組み
フロントで入力された文字列をもとにcanvasで描画
ダウンロードする場合は直接canvasからDataURIを取得して落としてくる
ツイートする場合はcanvasの内容をfunctionを通してfirebase storeにアップロードして、ファイル名をもらってきてURLを組み立ててツイートに突っ込む
ツイートしたURLをTwitterクライアント側がたどると、functionを通じてURLに指定されたファイル名をもtに動的に画像やタイトルのOGPを設定したページを返す
躓いた箇所
Hostingのwritesでfunctionに向ける際に、us-central以外のfunctionには向けられない
writesで書き換えてちゃんとリダイレクトされてもいて大丈夫そうなのに、いざ動かしてみるとCorsが出て止まっているように見えて数十分ハマってました
リダイレクト先を確認してみてやっと気が付き、こちらのQiitaも参考にfunctionをus-centralに変更して解決
