【Next.js / Vercel】画像でつぶやくクソアプリを作った💩
はじめに
こんにちは。emonoです。
こちらは、クソアプリ Advent Calendarの4の21の記事になります。
作ったもの
PicTwi（ピクツイ）という、画像でつぶやき出来るWebアプリを作成しました。
入力されたテキストデータ元に、OGPを動的に作成して共有できます。
使い方
OGPで共有したいテキストを入力して、ツイートする または URLをコピー を押下します。
URLをコピーした画像をSlack等で共有すると、下記の様に動的に生成されたOGP画像が展開され、つぶやくことが出来ます。
同じ要領でツイートするから、Twitterに投稿することも可能です。
フォントも選択もできます。
絵文字もいけます。
どんな時に使うか・・・・・ですか。それは、僕にもわかりません。好きに使って下さい。
作るまでに考えたこと
コンセプト検討
meetyやbosyuの様に、目的を持ったものではなく、
「用途をしぼらずにOGP画像を生成して共有でたら面白そう。」 と思い作ることにしました。
TwitterやSlackに共有する際も、テキストよりOGPの方が物理的な大きさもあり、インパクトが大きいので、自己主張したい時に使ったら楽しそうです。
ex) こんな感じで自己主張して頂ければ。と思います。
UIイメージ検討
Instagramのストーリーを触りながら、UIを検討しました。だれかにUIを依頼する場合は、Figma等を用いますが、自分でラフ案を作って雑に作るだけなので、ノートに書いたメモを自分でUIに起こす作業で対応しました。
ノートにさくっと描いたUIイメージです。文字色・背景の変更は、実装を省略しました。
技術的なこと
使用した技術
Next.js /TypeScript / Vercelで開発、デプロイをしました。
現在の仕事でReact / TypeScriptで開発している為、新しいキャッチアップが少ない Next.jsを選択。Next.jsを楽をdeployするなら、Vercelという順でdeploy先を選択しました。
また、GOPのpreviewやOGP自体の作成は、node-canvasを使用しました。
全体設計は、Next.jsのAPI機能 を使用して、フロントから入力したtextとfontをパラメーターで渡し、前述のAPI機能で、画像を動的生成する形の設計で、Next.js / vercel のみで完結できました。
また、実装の多くを以下の記事を参考にしました。丁寧な記事をありがとうございます。
つまったこと
yarn add canvas@2.6.1 でこける
前提として、Vercelにて最新のnode-canvasが動作せず、canvas@2.6.1で固定してinstallする必要があります。
そのために、 yarn add canvas@2.6.1 を実施しましたが、 Please upgrade to @mapbox/node-pre-gyp をエラーになりinstallできませんでした。（動作環境はM1 Mac）
のコメントにあるように、下記のコマンドで依存ライブラリをインストールし、該当のエラーでこけなくなりました。
brew install pkg-config cairo pango libpng jpeg giflib librsvg
brew doctor
その後、 fatal error: 'jpeglib.h' file not found という別のエラーでインストールが完了しなかったため、別のissueを参考に指定の環境変数で yarn add したところ無事インストールできました。
CPLUS_INCLUDE_PATH=/opt/homebrew/include yarn add canvas@2.6.1
canvasで背景色をグラデーションにする
PicTwi（ピクツイ）ではそれっぽく見せるために、OGPの背景色にグラデーションを用いてます。
グラデーションは、 webgradients というグラデーションサンプルが沢山載っているサイトから、合いそうなグラデーションを探し、実装しました。
「デザインよくわかんないけど、それっぽいグラデーションをつけたい」みたいな人は参考になるかも。と思います。
グラデーションの実装は、以下のstackoverflowを参考に、
下記の様に実装しました。
const grd = ctx.createLinearGradient(0, 0, canvas.width, 0);
grd.addColorStop(0, "#4facfe");
grd.addColorStop(1, "#00f2fe");
ctx.fillStyle = grd;
絵文字を使えるようにする
node-canvas では現時点では絵文字のサポートがされていないようなので、
node-canvas-with-twemoji というcanvas用のライブラリを用いて絵文字の描画をしました。
上記のライブラリを用いると、文字化けしていた絵文字が表示されます。
import { fillTextWithTwemoji } from 'node-canvas-with-twemoji';
const ctx = canvas.getContext("2d");
# 絵文字を含むテキストを、node-canvas-with-twemojiで描画
await fillTextWithTwemoji(ctx, '💩💩💩💩💩💩💩💩💩💩', OGP_WIDTH, OGP_HEIGHT);
終わりに
初めての クソアプリ Advent Calendar でしたが、期限内に成果物を作成できてよかったなと思います。
思ったより便利そうなのができてしまった・・・というのが正直な感想です。匙加減が難しいですね。
最後まで読んで頂きありがとうございした。よければ、サービス使って頂けると嬉しいです。
Discussion