# PHP # 日記 # HTML

【3日目】PHPでDTMガチャを作る

投稿日 2023/07/10 最終更新日 2023/07/10

2023年7月10日

おはようございます。

今日はPHPで見た目はダサくても機能だけでも完成させようと思う。

DTMをする時、音楽は作りたいけど、作りたい音楽がないっていうことがあるんだよね。そんな私みたいな人に向けて、DTMの音楽目標を乱数で作ってくれる物を目指す。

具体的には、1000円サイゼリヤみたいなやつがいいかな。

ガチャを回すボタンを押す
作る音楽の条件をランダムに出す

という単純なものなので、そんなに難しくは無いと思ってるけどどうだろうか。

今回はChatGPTをフルで使っていこうかな。初学者にChatGPTは本当におすすめ。
つい最近、ChatGPTにコードインタプリタという機能が追加されてコードを出力してくれるようになったので、それも使ってみる。

ChatGPTに頼ってみる

とりあえず、聞いてみた。

出力コードが以下みたいな感じ

<!DOCTYPE html>
<html>
<head>
    <title>DTMガチャ</title>
</head>
<body>
    <h1>DTMガチャ</h1>


    <form method="post">
        <input type="submit" name="gacha" value="ガチャを回す">
    </form>


    <?php
    if (isset($_POST['gacha'])) {
        $bpm_values = array(60, 80, 100, 120, 140, 160);
        $genre_values = array('ロック', 'ポップ', 'エレクトロニカ', 'ジャズ', 'ヒップホップ', 'クラシック');


        $random_bpm = $bpm_values[array_rand($bpm_values)];
        $random_genre = $genre_values[array_rand($genre_values)];


        echo "<p>選ばれたBPM: $random_bpm</p>";
        echo "<p>選ばれたジャンル: $random_genre</p>";
    }
    ?>
</body>
</html>

実際に開いてみるとこんな感じ

押す度にBPMとジャンルが変わるようになってる。こんな感じで作れるのね。

分からないこととしては、

<!DOCTYPE html>って何？

<form method="post">
    <input type="submit" name="gacha" value="ガチャを回す">
</form>

って何やってんの？

if (isset($\_POST\['gacha'\])) {ってどんな条件？

くらいかもしれない。

もっとわけわかんないことが沢山あるかと思ったけど、案外そんなことはないね。

ChatGPTに聞いてみよう。

なるほどね。なんか「!DOCTYPE htmlはそれがHTML5で書かれていることを伝える」というところに引っかかったので調べたけど、!DOCTYPEはHTMLのバージョンによって書き換えなきゃいけないっぽい。HTML5だったら!DOCTYPE htmlでいいっぽいね。参考サイト

まず、HTML5ってなんですかこれ？　艦これがHTML5に対応してスマホからでもアクセスできるようになったくらいしか知らないんだけど。

うーん、ちょっと調べて見たけど、このサイトが初心者にはわかりやすかった。とにかく、今はHTML5が主流で、マルチプラットフォーム化と動画やら音やらに対応した形になるのかな。個人的には文章構造がシンプルになってるのもありがたい。

HTMLは何となくわかってるからいいかなと思ったけど、そんなこともなさそうだね。

次に、POSTって何？　これは普通に公式ドキュメントがいいかなぁ。
うーん。何となくわかった。<form method="post">のボタンが押されたとき、postでサーバーにname=”gacha”の信号を送る→name=”gacha”のpostを受け取ったらifの処理が行われるみたいなことなのかな。

とりあえず、何となくわかったので、整えてみる。