100ユーザー記念。AutoProgramMaker GPTsの使い方を紹介します

2024年1月17日 09:27

私が作ったGPTsのAutoProgramMakerのユーザーが100名を超えたようなので改めて使い方を紹介しますね。

これは「プログラムを自動で書いてくれるGPTs」です。
作って欲しいプログラムを伝えるとJavaScriptでプログラムを書いてhtmlファイル１つに纏めて作ってくれます。
JavaScriptなのでブラウザがあれば開発環境無しで誰でも動かせます。

使い方ですが、まず作って欲しい物を伝えます。

要件一覧を抽出するので、ここで抜けている機能があれば追加してあげてください。問題無ければ「続けてください」と言ってください。
案件に基づいて「ユースケース図」「シーケンス図」「クラス図」をマーメード記法で生成します。

引き継ぎ「続けてください」というとコードを出力してくれます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>アナログ時計</title>
    <style>
        canvas {
            background-color: #f3f3f3;
            display: block;
            margin: auto;
        }
    </style>
</head>
<body>
    <canvas id="clockCanvas" width="400" height="400"></canvas>
    <script>
        class AnalogClock {
            constructor(canvasElement) {
                this.canvas = canvasElement;
                this.ctx = this.canvas.getContext('2d');
                this.radius = this.canvas.height / 2;
                this.ctx.translate(this.radius, this.radius);
                this.radius *= 0.90;
                setInterval(() => this.drawClock(), 1000);
            }

            drawClock() {
                this.drawFace(this.ctx, this.radius);
                this.drawNumbers(this.ctx, this.radius);
                this.drawTime(this.ctx, this.radius);
            }

            drawFace(ctx, radius) {
                ctx.beginPath();
                ctx.arc(0, 0, radius, 0, 2 * Math.PI);
                ctx.fillStyle = 'white';
                ctx.fill();
                ctx.strokeStyle = 'black';
                ctx.lineWidth = radius * 0.1;
                ctx.stroke();
                ctx.beginPath();
                ctx.arc(0, 0, radius * 0.1, 0, 2 * Math.PI);
                ctx.fillStyle = '#333';
                ctx.fill();
            }

            drawNumbers(ctx, radius) {
                let ang;
                let num;
                ctx.font = radius * 0.15 + "px arial";
                ctx.textBaseline = "middle";
                ctx.textAlign = "center";
                for(num = 1; num < 13; num++){
                    ang = num * Math.PI / 6;
                    ctx.rotate(ang);
                    ctx.translate(0, -radius * 0.85);
                    ctx.rotate(-ang);
                    ctx.fillText(num.toString(), 0, 0);
                    ctx.rotate(ang);
                    ctx.translate(0, radius * 0.85);
                    ctx.rotate(-ang);
                }
            }

            drawTime(ctx, radius){
                const now = new Date();
                let hour = now.getHours();
                let minute = now.getMinutes();
                let second = now.getSeconds();
                //hour
                hour = hour%12;
                hour = (hour*Math.PI/6) +
                (minute*Math.PI/(6*60))+
                (second*Math.PI/(360*60));
                this.drawHand(ctx, hour, radius*0.5, radius*0.07);
                //minute
                minute = (minute*Math.PI/30)+(second*Math.PI/(30*60));
                this.drawHand(ctx, minute, radius*0.8, radius*0.07);
                // second
                second = (second*Math.PI/30);
                this.drawHand(ctx, second, radius*0.9, radius*0.02);
            }

            drawHand(ctx, pos, length, width) {
                ctx.beginPath();
                ctx.lineWidth = width;
                ctx.lineCap = "round";
                ctx.moveTo(0,0);
                ctx.rotate(pos);
                ctx.lineTo(0, -length);
                ctx.stroke();
                ctx.rotate(-pos);
            }
        }

        document.addEventListener('DOMContentLoaded', () => {
            const canvas = document.getElementById('clockCanvas');
            const clock = new AnalogClock(canvas);
        });
    </script>
</body>
</html>