Reactで画像を作成してTwitterAPIを使って画像投稿する。
ReactでCanvasを使う
探したところReact-Kanvaが便利そうだった。使い方は公式や他の方の記事を参照。
公式：https://konvajs.org/docs/react/
使い方：https://qiita.com/YSRKEN/items/bb8b34510d70ec90eb50
画像をDataURLとして取得
作成したCanvasの画像データを取得する。
useRefのHookを使ってCanvasの要素を取得し、.toDataURL()を呼び出せばOK
（https://qiita.com/YSRKEN/items/bb8b34510d70ec90eb50 から引用）
import React, { useRef } from "react";
import { Stage as StageType } from 'konva/types/Stage';
const stageRef = useRef<StageType>(null);
const process = () => {
const temp = stageRef.current;
// stageRefの中身(temp )がnullな可能性を考慮してチェック
if (temp !== null) {
// dataUrlに、画像データがdata URL(MIME Type + base64文字列)形式で書き込まれる。
// toDataURLの引数を変更すれば、PNG以外の画像形式への変換も可能
const dataUrl = temp.toDataURL();
// これ以降、dataUrlを使った操作(画像保存、画像加工等)を行う
}
};
return <Stage ref={stageRef} width={500} height={500}>
<Layer>
<Rect stroke='black' strokeWidth={4} x={5} y={5} width={490} height={490} />
<Rect fill='red' x={100} y={100} width={300} height={200} />
</Layer>
</Stage>;
余談だが、画像をダウンロードしたい場合は<a>タグにDataURLを入れてダウンロードする。
const downloadCanvas = () => {
// dataUrlを取得
const url = stageRef.current.toDataURL();
// <a>タグを作成してdataUrlを入れる
const a = document.createElement("a");
a.href = url;
a.download = "image.png";
// <a>タグをクリックする処理
a.click();
}
ブラウザの幅に合わせてCanvasの拡大率を変える
ブラウザのサイズに合わせてCanvasの拡大率を変更したい場合は、<div>要素などでブラウザのフレームサイズを取得して、拡大率を算出する。
// Stageの要素
const stageRef = useRef(null);
// 画像を表示するフレームの要素
const frameRef = useRef(null);
// Canvasで生成する画像のサイズ
const sceneWidth = 960;
const sceneHight = 1280;
// ブラウザ表示時の拡大率
const [scale, setScale] = useState(1);
useEffect(() => {
// ブラウザ表示時の拡大率を設定
// ここでは横幅(offsetWidth)に合わせる
setScale(frameRef.current.offsetWidth / sceneWidth);
}, []);
return (
<div ref={frameRef}>
<Stage
width={sceneWidth * scale}
height={sceneHight * scale}
scale={{ x: scale, y: scale }}
ref={stageRef}
>
...
</Stage>
</div>
)
ただ、これを行うと初期表示の一瞬だけブラウザに拡大率１の画像が表示されてしまう。ひとまずCSSのpositionを使って画面外に表示することで対応した。
display:hiddenにしてもいいのだが、画像取得の際にhiddenだと取れなくなってしまう。
{/* 拡大率が１のときは画面外へ飛ばす */}
<style jsx>
{`
.canvas {
${scale == 1 ? " position: absolute; right: -10000px;" : ""}
}
`}
</style>
画像取得時に拡大率を戻す
ブラウザのサイズに合わせて拡大率を変更したままDataURLを取得すると、そのサイズの画像が取得されてしまう。
画像取得前に拡大率を１に変更し、取得後にブラウザの拡大率に戻す。
ボタン押下時にツイートフラグ（isTweetCanvas）をtrueにして、useEffectで拡大率(scale)を変更。scaleが１になった次のレンダリングで画像を取得する。
// ブラウザ表示時の拡大率
const [scale, setScale] = useState(1);
// ボタン押下のフラグ
const [isTweetCanvas, setIsTweetCanvas] = useState(false);
useEffect(() => {
if (isTweetCanvas) {
// 画像を取得する前に画像の拡大率を１にする
if (scale != 1) {
setScale(1);
} else {
// 画像取得、ツイート処理（後述）
getDataUrlAndTweet();
// 拡大率、ツイートフラグを元に戻す
setScale(frameRef.current.offsetWidth / sceneWidth);
setisTweetCanvas(false);
}
}
}, [isTweetCanvas, scale]);
return (<>
<div ref={frameRef}>
<Stage
width={sceneWidth * scale}
height={sceneHight * scale}
scale={{ x: scale, y: scale }}
ref={stageRef}
>
...
</Stage>
</div>
<button onClick={setIsTweetCanvas(true)}>画像をツイート</button>
</>)
TwitterAPIの呼び出し
TwitterAPIのライブラリは見た感じスターが一番多かったTwitを使用。
※現時点（2021/12/19）でTwitter公式がオススメしているnode-twitter-api-v2は、DataURLを使った画像アップロードはできないので注意。
ブラウザで呼び出すとCORSエラーやfsが開けませんといったエラーになるので、BFFなどnode.jsが動く環境で呼び出す。Next.jsならmiddlewareで良さそう。
DataURLをそのまま入れるとエラーになるので冒頭の「data:image/png;base64」を削除する。
ブラウザ側
browser.tsx
async function getDataUrlAndTweet() {
// axiosでミドルウェアを呼び出し
await axios.post("/api/tweet-canvas", {
dataUrl: stageRef.current
.toDataURL()
// 「data:image/png;base64」を削除
.replace(/^data:image\/png;base64,/, ""),
});
}
バックエンド側
大体Twitのサンプルをコピー
pages/api/tweet-canvas.ts
export default async function handler(
req: NextApiRequest,
res: NextApiResponse
) {
// ブラウザ側から取得したデータ
const body = req.body;
// トークンを設定
// トークンの取得方法は「TwitterAPI トークン取得方法」などでググってください
var T = new Twit({
consumer_key: process.env.TWITTER_APP_KEY,
consumer_secret: process.env.TWITTER_APP_SECRET,
access_token: process.env.TWITTER_TOKEN,
access_token_secret: process.env.TWITTER_TOKEN_SECRET,
timeout_ms: 60 * 1000,
strictSSL: true,
});
// 画像をツイッターにアップロード
T.post(
"media/upload",
// ここにDataURLを入れる。
// 「media」ではなく「media_data」を使用する。
{ media_data: body.dataUrl },
function (err, data, response) {
var mediaIdStr = data.media_id_string;
var altText =
var meta_params = { media_id: mediaIdStr, alt_text: { text: altText } };
T.post(
"media/metadata/create",
meta_params,
function (err, data, response) {
if (!err) {
var params = {
// ツイート文
status: "loving life #nofilter",
media_ids: [mediaIdStr],
};
T.post("statuses/update", params, function (err, data, response) {
console.log(data);
});
}
}
);
}
);
おわり
これで画像付きツイートがツイートされているはず。
最初にnode-twitter-api-v2を使ったせいで上手くいかず色々悩んでしまった。
DataURLから「data:image/png;base64」を削除するのも忘れずに。
↧