レンタルサーバでWebアプリ作り： tldraw + GPT で画面デザイン
ロリポップレンタルサーバではできることが限られていたので、ホスティングサービスの DigitalOcean を使ってWebアプリを公開するまでの道のりを記録します。
以下は DigitalOcean の紹介リンクですが、ここから手続きを進めてもらえると200ドル分の無料チケット（有効期間２ヶ月）がもらえるようですので、ぜひご活用ください。（2024/1/2時点）
背景
前回までで、複数ページでSocket通信ができるようになり、機能面はかなり充実してきました。
なので、今度は画面デザインに挑戦します。絵的センスは皆無でデザインなんかまったくやったことがないのですが（CSSの書き方も知らない）、そんな私でもGPTのおかげで何とかなりました。
tldraw( https://makereal.tldraw.com/ )というサービスで骨格を作り、GPT先生に微調整してもらうという進め方です。
ゴール１＝tldraw で骨格作り
tldraw というサービスをご存じでしょうか？ 適当な絵を書いたら、HTMLに変換してくれる夢のようなサービスです！これまたウェブ職TVさんのYoutubeを見てたら紹介されていて、衝撃的でした。
※ その動画 : https://www.youtube.com/watch?v=OLPEeSFEIiY&t=323s
動画では「cursorという、VSCodeと似たアプリを使うといいですよ」と紹介されていますが、cursorを使わずWeb上で使えば十分だと思います。ただ、プレビュー機能で紹介されていた HTML Preview は便利なのでインストールしました。
ということで、tldraw で以下のような絵を作りました。
作り方のポイント
大前提として、適当に作ってもいい塩梅に仕上げてくれます。より的確に指示を伝えるため、私は以下のようなルールで作りました。
コマンドは薄字の英語で矢印で指示
日本語で黒字でもいい塩梅で「それが画面要素ではなく指示文」というのを読み取ってくれるのですが、なんか違和感があったので指示文のマイルールを作りました。
また、日本語でうまく読み取ってくれないことがあったので、英語で書くようにしました（日本語よりつたない英語のほうが伝わった）
領域を意識する
領域を意識したほうが配置がうまくいきます。例えば真ん中にあるメインのテキストボックスの下にボタンを配置して、それをマルっと枠で囲みます。
その右にラジオボタンが２つありますが、これも２つまとめて枠で囲みます。この枠がないと、仕上がりの時に結構ぐちゃぐちゃなレイアウトになることが多かったです。
上記の例では、タイトルのところに枠を囲んでおりませんが、タイトルのところのレイアウトが結構ダメダメになってしまいました。（あとでGPT修正）
意識したのはそれくらいで、基本フリーハンドで作ればOKです。
GPT先生に修正をお願い
CSSを知っている人であれば、手動でチャカチャカ修正できるんだと思うのですが、私は全く分かりません。。。右寄せにすることすらできないｗ
ということで、修正も全部ＧＰＴ先生にお願いしました。最初にHTML文をマルっと渡し、その後ちょいちょい修正してもらい、最後に清書をしてもらうというステップです。
まず最初に、HTMLをマルっと渡します。プログラム修正など渡す情報が多いときは、最初にその情報を渡して、追加で質問をしていくほうが効率的です。
HTMLコードを渡します。これにいろいろな修正を重ねていきます。
まずはHTMLコードを渡します。
＜＜ここにtldrawが作ってくれたHTML文をまるっと貼り付け＞＞
それでは質問します。よろしいですか？
次からは、具体的に調整指示を出していきます。
input-groupを、500x300pxにしてください。
radio-groupが、input-groupの右側に来るように配置してください。
もう一つラジオボタンのグループを追加してください。 選択肢は「男性」と「女性」の２つです。
その他もろもろ調整してもらい、最後に以下の一文です。
いろいろな修正を加えて、現在以下のようになっている。矛盾などが生じていないかをチェックし、清書してください。
＜＜ここに修正したHTML文をまるっと貼り付け＞＞
この清書で、以下のアドバイスももらえました。
radio-group の margin-top: -2em; と margin-bottom: 2em; は意図的なスタイリングでしょうか？ これにより、ラジオボタンのグループ間の間隔が独特になります。これが意図したデザインでなければ、これらの値を調整することをお勧めします。
最後におまけ。
今回のチャットを題材に横長の画像を生成してください。 暖色系のパステルカラーで、人物や文字は出さないで、風景画でお願いします。
冒頭のイメージ図は、これで作ったものです ♪
仕上がり
というわけで、最終的には以下のような画面になりました。
作ってくれたプログラムの全文は以下の通り。自分が書いた部分はゼロｗ ほんと便利な世の中です ♪
次回は、ココに今まで作ってきた機能を組み込んでいきたいと思います。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GPTeacher - Make Lyrics</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #0A192F; /* ダークブルーの背景色 */
color: #8892B0; /* ソフトなブルーグレーのテキスト色 */
margin: 0;
padding: 0;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1em;
border-bottom: 2px solid #112240; /* ダークブルーのボーダー */
}
.logo {
font-size: 1.5em;
font-weight: bold;
color: #64FFDA; /* 明るいブルーグリーンのロゴカラー */
}
nav {
display: flex;
}
nav a {
text-decoration: none;
color: #8892B0;
margin-right: 1em;
font-weight: bold;
}
.active {
text-decoration: underline;
color: #64FFDA; /* アクティブリンクのカラー */
}
.container {
display: flex;
height: calc(100vh - 66px);
}
.sidebar {
flex: 0 0 250px;
background-color: #020C1B; /* より濃いブルーのサイドバー */
padding: 1em;
}
.listbox {
list-style: none;
padding: 0;
margin-bottom: 2em;
}
.listbox li {
background-color: #112240;
padding: 1em;
margin-bottom: 0.5em;
cursor: pointer;
}
.listbox li:hover,
.listbox .selected {
background-color: #233554; /* ホバーと選択時のカラー */
}
.content {
flex-grow: 1;
padding: 2em;
}
.title {
font-size: 2em;
margin-bottom: 0.5em;
color: #CCD6F6; /* タイトルの色 */
}
.subtitle {
font-size: 1.2em;
color: #8892B0;
margin-bottom: 1em;
}
.input-radio-container {
display: flex;
align-items: flex-start;
}
.input-group, .radio-group-area {
margin-right: 30px; /* 両者の間の余白を調整 */
}
.radio-group-area {
display: flex;
flex-direction: column;
}
.input-group {
margin-bottom: 1em;
}
.input-group textarea {
width: 500px;
height: 300px;
background-color: #112240;
color: white;
border: 1px solid #233554;
padding: 1em;
resize: none;
}
.radio-group {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.radio-group > .radio-button {
margin-bottom: 0.5em;
}
.radio-group > .radio-button > input {
margin-right: 0.5em;
}
.radio-group > .radio-button > label {
display: inline;
color: #8892B0;
}
.button {
background-color: #112240;
color: #64FFDA;
border: none;
padding: 1em 2em;
cursor: pointer;
text-transform: uppercase;
}
.button:hover {
background-color: #233554; /* ホバーエフェクト */
}
</style>
</head>
<body>
<header>
<div class="logo">GPTeacher</div>
<nav>
<a href="/">Top page</a>
<a href="/make-lyrics" class="active">Make Lyrics</a>
<a href="/minutes">Minutes</a>
<a href="/marketing">Marketing</a>
</nav>
</header>
<div class="container">
<aside class="sidebar">
<ul class="listbox">
<li class="selected">gpt-3.5</li>
<li>gpt-4</li>
<li>gpt-4-turbo</li>
</ul>
</aside>
<main class="content">
<h1 class="title">歌詞メーカー</h1>
<p class="subtitle">曲に乗せたいメッセージや想いを書き出してください。</p>
<div class="input-radio-container">
<div class="input-group">
<textarea id="message" name="message" placeholder="Type your message here..."></textarea>
</div>
<div class="radio-group-area">
<p>味付け</p>
<div class="radio-group">
<div class="radio-button">
<input type="radio" id="select1" name="model" value="select1" checked>
<label for="select1">select1</label>
</div>
<div class="radio-button">
<input type="radio" id="select2" name="model" value="select2">
<label for="select2">select2</label>
</div>
<div class="radio-button">
<input type="radio" id="select3" name="model" value="select3">
<label for="select3">select3</label>
</div>
</div>
<p></p>
<div class="radio-group">
<div class="radio-button">
<input type="radio" id="gender-male" name="gender" value="male">
<label for="gender-male">男性</label>
</div>
<div class="radio-button">
<input type="radio" id="gender-female" name="gender" value="female">
<label for="gender-female">女性</label>
</div>
</div>
</div>
</div>
<button class="button">Make Lyrics</button>
</main>
</div>
</body>
</html>最後まで見ていただきありがとうございました！
CSSを知っていればもっと素敵な画面が作れるんだろうなぁと思いつつ、まったく知らない私にとっては十分すぎる画面ができました。皆様のご参考になれば幸いです。
DigitalOceanのアカウント登録
（200ドル分チケット付き）
以下は紹介リンクですが、ここから手続きを進めてもらえると200ドル分の無料チケット（有効期間２ヶ月）がもらえるようですので、ぜひご活用ください。
※ 2023/12/29時点
紹介リンク : https://m.do.co/c/a8b31ed34b75
サポート問い合わせ先
DigitalOceanのサポート問い合わせリンクがなかなか見つからないので、リンクを載せておきます。
https://cloudsupport.digitalocean.com/s/
場所は、トップページの右下にある「Ask a question」に行き、そのページの一番下（欄外っぽいところ）にひっそりと「Support」というリンクがあります（Contact内）。そのページの一番最後に「Contact Support」ボタンがあります。