zoomの背景で自己紹介できるようにジェネレーター作った

どうも！ kazz です！

今回は、OthloTech運営メンバーで制作した「Zoom名札ジェネレーター」の紹介と、作った経緯、アプリの仕組みについてお話しさせていただきたいと思います！

Zoom名札ジェネレーター
作った経緯
アプリの仕組み
デザインについて
まとめ

Zoom名札ジェネレーター

バーチャル背景用の画像に簡単にテキストを合成できるジェネレーターを作りました。16:9の画像または背景色を選んで、あとは文字を打ち込むだけでいい感じに背景画像を生成してくれます。

ジェネレーターの画面

Zoom名札ジェネレーター

zoom-bg-namecard.s3-website-ap-northeast-1.amazonaws.com

作った経緯

先日、zoomを使って行われた「Zli x OthloTech LT会」に向けて、イベント1週間前に発案されました。（なんとか間に合った）

オフラインイベントの際は、懇親会で話のタネになればと思い、名札を配り記入し使ってもらっていましたが、オンラインでのイベントにおいてはそれができません。

ただでさえオンラインでは視覚的な情報が削られるため、初めて会話する人達が多くいるオンライン懇親会においてはどうにかしたい問題でした。

このアプリを通じて、今後のオンライン懇親会でのコミュニケーションが少しでも円滑になればいいなと思います。

アプリの仕組み

Canvasを用いたWebアプリケーションです。通信は発生しず、クライアントサイドで動作が完結します。

CanvasAPIという適役

HTML5のCanvasAPIはご存知ですか？

Canvas API - Web API | MDN より

Canvas API は JavaScript と HTML の <canvas> 要素によってグラフィックを描く方法を提供します。他にも、アニメーション、ゲームのグラフィック、データの可視化、写真加工、リアルタイム動画処理などに使用することができます。
Canvas API は全体的に 2D グラフィックを対象としています。 WebGL API は、こちらも <canvas> 要素を使用して、ハードウェアで高速化された 2D および 3D グラフィックを描きます。

Canvasを使えば、javascriptのAPI経由で文字や図形の描画、画像データとしての出力が可能なので、今回の要件にぴったりでした。処理はクライアントで完結しますし。

うまく使えば、ゲームなども作れます。また、canvasAPIをラッピングして扱いやすくしてくれるライブラリもあったりするので、よかったら調べてみてください。

リポジトリ

最小構成です。シンプルでいいですね。

github.com

ざっくりソース解説

htmlにcanvasタグを設置します。後々、このエリアに色々描画されていきます。

index.html

<canvas id="preview" class="preview" width="1920px" height="1080px">
    ブラウザを変えてお試しください。
</canvas>

jsでcanvasのelementを抽出します。また、elementから2Dのcontextを生成します。このcontextに描画したりするAPIが詰まってます。

main.js

const preview = document.getElementById("preview");
const previewContext = preview.getContext("2d");

描画時の関数を定義します。例えば、テキストエリアの入力イベントが呼ばれるたびに実行させたりします。

main.js

function drawPreview() {
    // 全体クリア（引数：xの始点, yの始点, xの幅, yの幅）
    previewContext.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
    // 以下に描画していく
    // ...
}

// テキストエリアのinputイベント時に描画しなおす。
textarea.addEventListener("input", () => {
    drawPreview();
});

最後、canvasに描画されたイメージを画像ソースに変換し、リンクとしてoutputに出力します。形式はBASE64で吐き出されるので、そのままhrefに乗っけるとリンクを開いた際にダウンロードされます。

main.js

generateButton.addEventListener("click", () => {
    const imgData = preview.toDataURL();
    outputArea.innerHTML = `
    <a href="${imgData}" download="file.png">🙋‍♀️ ダウンロードする</a>
  `;
});