はじめに

こんにちは。emonoです。
こちらは、クソアプリ Advent Calendarの4の21の記事になります。

作ったもの

PicTwi（ピクツイ）という、画像でつぶやき出来るWebアプリを作成しました。
https://pictwi.vercel.app/

入力されたテキストデータ元に、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を使用しました。

https://nextjs.org/

全体設計は、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 というグラデーションサンプルが沢山載っているサイトから、合いそうなグラデーションを探し、実装しました。
「デザインよくわかんないけど、それっぽいグラデーションをつけたい」みたいな人は参考になるかも。と思います。
https://webgradients.com/
グラデーションの実装は、以下の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 でしたが、期限内に成果物を作成できてよかったなと思います。
思ったより便利そうなのができてしまった・・・というのが正直な感想です。匙加減が難しいですね。
最後まで読んで頂きありがとうございした。よければ、サービス使って頂けると嬉しいです。

https://pictwi.vercel.app/

参考

Discussion