見出し画像

【自作ジェネレーター】ブラウザー上で駅名標を自動生成できます！【HTML】

Lemon_Slime

はじめに

現実に存在するものから、この世には存在しない架空のものまで、いろんな駅名標を効率的に作りたいと思ったことはありませんか？少なくとも、私はあります。

というわけで、今回はそんな駅名標への情熱で溢れた私が作成した「駅名標ジェネレーター」を紹介したいと思います。このジェネレーターを使うことで、簡単に様々な駅名標を作成できます。本記事は、この駅名標ジェネレーターの概要と使い方を説明する、いわゆる「公式ドキュメント」に相当するものです。
詳細については、こちらの動画が詳しいです：


ジェネレーターの使い方

まずはこちらのサイト：

にアクセスしましょう。私のサイトです。

こんな感じのページです
試しに架空の駅「沖縄市駅」を生成する図。

以下では、本ジェネレーターにおける機能について説明します。

  1. 入力フォーム

    • サイトにアクセスすると、いくつかのテキストボックスが表示されます。ここに駅情報を入力していきます。

    • 入力する情報は左側に表示されている通りです。動画内では例として東京駅を作成していますが、ご自身でお好きなように入力してください。

  2. プレビュー機能

    • 入力が完了したら、下部にあるプレビューが自動的に更新されます。これにより、入力内容に基づいて駅名標が表示されます。

    • 「駅の所在地」の右側にあるチェックボックスを切り替えることで、表示形式の変更（カッコの有無の変更）ができます。当初は強制的にカッコが付与される設定でしたが、それだと些か問題があると考え、当設定機能を追加しました。

    • 隣駅の情報を追加することもできます。こだわる方は是非。動画内では神田と有楽町を設定しています。

  3. 詳細設定

    • 追加の設定をオンにすることで、さらに詳細なカスタマイズが可能です。具体的には、動画内で説明している通り、フォントの設定および駅名標データの読み書きが可能です。一々入力などしてられないよ、って方におススメの機能です。出力・入力の形式はjsonファイルとなります。

  4. 出力機能

    • 駅名標が完成したら、「駅名標をダウンロード」ボタンをクリックして画像形式（png）で保存することができます。あとは煮るなり焼くなりお好きにどうぞ。

ジェネレータの注意点

詳細については上記ページの下部で説明している通りです。
出力された駅名標について、商用・非商用目的を問わず利用・転載・改変は自由ですが、利用・転載する場合、URL（https://lemon-slime.com/?p=839）を明記して頂きますようお願い申し上げます。
不具合やご意見がありましたら、遠慮なくコメント欄でお知らせください。随時改善を図ってまいります。また、チャンネル登録および記事の「スキ」をしていただきますと、次回の動画やジェネレーターの開発の励みになりますのでよろしくお願いします。

ぜひ、この駅名標ジェネレーターを活用して、自分だけのオリジナル駅名標を作成してみてください。

【参考】 javascriptについて

以下では、本ジェネレーターの制作にあたって使用したjavascriptのソースコードを公開＆解説します。全136行で、そんなに複雑な機能はありません。

１，入力の処理

document.addEventListener('DOMContentLoaded', function() {
    for (let i = 1; i <= 8; i++) {
        document.getElementById(`${i}_text`).addEventListener("change",function(){
            drawimage();
        });
    }
    document.getElementById(`1_check`).addEventListener("change",function(){
        drawimage();
    });
    document.getElementById(`fonts`).addEventListener("change",function(){
        drawimage();
    });
});

HTML上にある各種テキストボックスやチェックボックスのidと変数名を紐づけて、それらに変化があったときにイベントdrawimage()関数を発火させます。drawimage()は、その名の通り駅名標を描画する関数です。詳細については後述します。

２，駅名標の描画

// 描画用のキャンバスとコンテキストを取得
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 画像オブジェクトを作成
const img = new Image();

// 駅名標の作成
function drawimage() {
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        ctx.fillStyle = 'black';
        ctx.font = `75px ${document.getElementById("fonts").value}`;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        // 駅情報
        ctx.fillText(document.getElementById("1_text").value, canvas.width * 0.5, canvas.height * 0.32);
        ctx.font = `22.5px ${document.getElementById("fonts").value}`;
        ctx.fillText(document.getElementById("2_text").value, canvas.width * 0.5, canvas.height * 0.54);
        ctx.fillStyle = 'white';
        ctx.fillText(document.getElementById("3_text").value, canvas.width * 0.5, canvas.height * 0.685);
        ctx.fillStyle = 'black';
        ctx.fillText(document.getElementById("1_check").checked ? "（"+document.getElementById("4_text").value+"）" : document.getElementById("4_text").value, canvas.width * 0.5, canvas.height * 0.825);
        ctx.fillText(document.getElementById("5_text").value, canvas.width * 0.1, canvas.height * 0.825);
        ctx.fillText(document.getElementById("7_text").value, canvas.width * 0.9, canvas.height * 0.825);
        // 隣接駅（英語）
        ctx.font = `15px ${document.getElementById("fonts").value}`;
        ctx.fillText(document.getElementById("6_text").value, canvas.width * 0.1, canvas.height * 0.9);
        ctx.fillText(document.getElementById("8_text").value, canvas.width * 0.9, canvas.height * 0.9);
};

// 背景画像
img.src = 'https://lemon-slime.com/resources/background.jpg';

ここではdrawimage()関数を定義し、具体的に駅名標の作成を行います。これはHTML上のcanvasと紐づいています。

３，駅名標のダウンロード

document.getElementById('downloadBtn').addEventListener('click', function() {
    const dataURL = canvas.toDataURL('image/png');
    const a = document.createElement('a');
    a.href = dataURL;
    a.download = document.getElementById("1_text").value != "" ? `${document.getElementById("1_text").value}.png` : '無題.png';
    a.click();
});

「駅名標のダウンロード」ボタンを押したときに発火する関数を定義し、駅名標をpng形式でダウンロードできるようにします。この機能の実装が一番大変でした。

この記事が気に入ったらサポートをしてみませんか？