ポンコツエンジニアのごじゃっぺ開発日記。

いろいろポンコツだけど、気にするな。エンジニアの日々の開発などの記録を残していきます。 自動で収入を得られるサービスやシステムを作ることが目標！！

トップ > ブログ > 【無料】簡単に独自アイキャッチ画像を生成できる仕組みを作る

【無料】簡単に独自アイキャッチ画像を生成できる仕組みを作る

ブログ gas javascript

まずは、今回の独自システムで作成したアイキャッチ画像はこちらになります。

f:id:ponkotsu0605:20210603101111p:plain

今回は、これを作成できる仕組みを作ったので、それを紹介しようと思います。

概要

完全無料で作りたかったので、有料のサーバは用意していません。そのため、簡単に無料でスクリプトを実行できるGoogle Apps Script（以下、GAS）を利用しました。

ウェブサイトの公開をGASで行ってはいるのですが、HTML（とJava Scriptによるスクリプト）だけなので、HTMLファイルをPC上に作成するだけでも利用することができます。 自分の場合は、PCが変わっても利用したかったので、GASを利用してウェブサイトに公開しています。

ざっくりとしたフローは以下になります。

  1. ブックマーク等からGASで作成したウェブサイトを開く
  2. 記事タイトルを入力する（window.promptの利用）
  3. 自動でcanvasにゴリゴリ作成して画像を作成
  4. 生成された画像をダウンロード

HTMLのソースコード

早速ですが、今回プログラミングしたソースコードを紹介したいと思います。

とりあえず動けばいいやって思って作成したので、雑なコードになっていますが。。

<!DOCTYPE html>
<html>
    <head>
       <base target="_top">
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
       <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
       <link href="https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap" rel="stylesheet">
   </head>
    <body>
        <p style="font-family: 'Kosugi Maru', sans-serif;">ポンコツエンジニアのごじゃっぺ開発日記。</p>
        <canvas id="canvas" width="1200" height="630"></canvas>
        <script>
           var text =   window.prompt("記事タイトルを入力してください", "");
           var fontSize = 68;
           // フォントを利用するためにいったんHTMLに出力する
           $('p').text(text);
           // canvas内で画像を使用するために、一度セットしておく
           img = new Image();
           img.src = "data:image/png;base64,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";
            $(function(){
                setTimeout(function() {
                    var canvas = document.getElementById('canvas');
                    if (canvas.getContext) {
                        var context = canvas.getContext('2d');
                        context.fillStyle = "rgb(251, 176, 59)";
                        context.fillRect(0,0,1200,630);

                        // 影
                        context.shadowColor = "rgb(0, 0, 0)";
                        context.shadowOffsetX = 3;
                        context.shadowOffsetY = 3;
                        context.shadowBlur = 3;

                        context.fillStyle = "rgb(255, 255, 255)";
                        var diff = 40;
                        var r = 20;
                        context.beginPath();
                        context.moveTo(diff,630 / 2);

                        context.arcTo(diff,diff, 1200 - diff,diff, r);
                        context.arcTo(1200 - diff, diff, 1200 - diff, 630 - diff, r);
                        context.arcTo(1200 - diff,630 - diff, diff,630 - diff, r);
                        context.arcTo(diff,630 - diff, diff,diff, r);
                        context.lineTo(diff,diff);
                        context.closePath();
                        context.fill()

                        context.fillStyle = "rgb(0, 0, 0)";

                        context.shadowOffsetX = 0;
                        context.shadowOffsetY = 0;
                        context.shadowBlur = 0;
                        context.font = "bold " + fontSize + "px 'Kosugi Maru', sans-serif";

                        printAt(context, text, 100, 180, fontSize * 1.5, 1000)

                        fontSize = 30
                        context.font = "bold " + fontSize + "px 'Kosugi Maru', sans-serif";
                        printAt(context, 'ポンコツエンジニアのごじゃっぺ開発日記。', 230, 520, fontSize * 1.5, 1000)

                        context.beginPath();
                        context.arc(100 + 50, 450 + 50, 50, 0, 2 * Math.PI);
                        context.clip();

                        context.beginPath();
                        context.drawImage(img, 0, 0, 100, 100, 100, 450, 100, 100);
                        let link = document.createElement('a');
                        link.href = canvas.toDataURL('image/png');
                        link.download = text + '.png';
                        link.click();

                        window.close();
                    }
                }, 1000); // フォントダウンロード時間のため遅らせて描画させる
            })

            // https://www.it-swarm-ja.com/ja/javascript/html5%E3%82%AD%E3%83%A3%E3%83%B3%E3%83%90%E3%82%B9ctxfilltext%E3%81%AF%E6%94%B9%E8%A1%8C%E3%82%92%E3%81%97%E3%81%BE%E3%81%9B%E3%82%93%E3%81%8B%EF%BC%9F/971773981/
            function printAt( context , text, x, y, lineHeight, fitWidth)
            {
                fitWidth = fitWidth || 0;
                if (fitWidth <= 0)
                {
                    context.fillText( text, x, y );
                    return;
                }
                for (var idx = 1; idx <= text.length; idx++)
                {
                    var str = text.substr(0, idx);
                    if (context.measureText(str).width > fitWidth)
                    {
                        context.fillText( text.substr(0, idx-1), x, y );
                        printAt(context, text.substr(idx-1), x, y + lineHeight, lineHeight, fitWidth);
                        return;
                    }
                }
                context.fillText( text, x, y );
            }
        </script>
    </body>
</html>

ぜひ、JavaScriptが書ける方は読んでいただきたいのですが、少し工夫した点を紹介したいと思います。

Webフォントを利用する工夫

Webフォントを利用するために、Google Fontsを利用しています。

fonts.google.com

canvasでWebフォントを表示するための工夫として、HTML上で一度表示したい文字列をそのフォントで表示してからではないと、canvas内で出力できなかったので、あえてpタグで文字を出力させています。

また、記事タイトルの入力後にも、jQueryを利用してpタグの文字を置き換えてからcanvasで出力するようにしています。

ダウンロードで時間がかかるっぽいので、canvasに描画するのはsetTimeout()を利用してあえて1秒遅延させてからにしています。

独自の画像を表示させるための工夫

canvas内に自分のアイコンを表示させています。

f:id:ponkotsu0605:20210603102507p:plain

しかしGAS上で画像を表示するためには、同じドメインからアクセスできるように、同じところに画像をアップロードしておく必要があります。（CORS：クロスオリジンの対策）

ただ、GAS上だと画像のアップロードができなかったので、表示させたい画像をbase64にエンコードさせて、その文字列をHTML上にベタ書きしました。ソースコードは汚いですが、実現できればOKなのです。

画像をbase64エンコードした文字列に変換させるためには、以下のサイトを利用させていただきました。

lab.syncer.jp

canvasでの文字列の自動改行

記事タイトルが画像の右端まで行ったら改行したいです。 そこで、以下のサイトのソースコードが良さそうだったので、丸コピしてきました。

www.it-swarm-ja.com

canvas内の描画のがんばり

以下のcanvasリファレンスを頑張って読んで勉強しました。久しぶりなので、canvasのいろいろを忘れてました。

www.htmq.com

HTMLをウェブサイトとして公開

上記で作成したHTMLを後は公開するだけです。

GASのソースコードをウェブサイトとして公開する方法は、以下の記事にまとめているので、そちらを参考にしてみてください。

www.pnkts.net

公開したウェブサイトをブックマーク

上記で公開したウェブサイトのURLをブックマークしておけば、簡単に呼び出すことができます。

さいごに

今回、このようにして、簡単にアイキャッチ画像を作成するシステムを構築しました。

以降、このブログのアイキャッチ画像に適用していけたらなと思います。（記事内画像がないものに関して）

お問い合わせ｜プライバシーポリシー｜制作物