さて、前回はとりあえず動かすをやってもらいました。
勘所の良い方であれば、前回の記事でなんとなくミニコデを利用するコツをつかんだのではないかなぁと思います。
とはいえ、ミニコデはスマホの開発に特化しているため、AIに指示を投げる時にコツがあります。
今回はAIにプログラムを組んでもらう超基本的なコツをご紹介いたします。ちなみに「ミニコデ」は開いた状態で読み進めましょう。
＼ 今すぐタップ ／
AIにプログラムを作ってもらうときの注意点
ミニコデはパソコンでも使えますが、スマホで見やすいように作られています。
そのためスマホで使いやすいプログラムを作ってもらう必要があるので、プロンプトには注意が必要です。
プロンプトの書き方はこんな感じ。
スマホで動作する●●●●●●をHTML、CSS，Javascriptで作成してください。ソースはHTMLに一つにまとめてください。
●●●●●●の部分に自分が作ってほしいプログラムを入れて、AIに入力すると、ひとつにまとまったHTMLソースが返ってきます。
例えば・・・
- TODOリスト
- ストップウォッチ
- 保存機能のあるメモ帳
こんな感じでOKです。補足ですが、AIも失敗はします。一発で正常に動作しない場合もあるので、複雑な処理のものではなく単純な機能とイメージできるものを依頼するのがコツです。
当方はChatGPTを利用していますが、GeminiでもClaudeでこのプロンプトでOKです。
このプロンプトをAIに貼り付けて出てきたコードをミニコデにコピーして、プレビューをすればOKです。
ChatGPTらくらくコード生成「WEBアプリメーカー」
ミニコデ用にチューニングしたChatGPT「WEBアプリメーカー」をご利用になることもできます。
＼ いますぐタップ ／
WEBアプリメーカーはミニコデ用に調整してあるので、作りたいものを伝えるだけでコードを生成してくれます。
●●●●●●を作成してください。
これだけでOK。オススメですよ。
AIに作ってほしいものを具体的伝える
生成AIはは優秀なので、ふんわりとした大雑把な内容でもそれっぽくプログラムを生成してくれます。
いくつかアプリを作ると、こんな気持ちになることがあるはず。
ボタンの位置はそこじゃないのに……
えっ、データ保存機能はないの！？
ということは正直よくあります。これって、指示が曖昧だからなんですよね。
TODOリスト作成のプロンプトを例にやってみましょう。まずは細かな指定をしないで、そのままのプロンプトで投げます。
上記のプログラムソースはこちら
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>スマホ用TODOリスト</title>
<style>
body {
font-family: sans-serif;
background: #f5f5f5;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
}
header {
background: #4CAF50;
color: white;
padding: 1rem;
text-align: center;
width: 100%;
font-size: 1.2rem;
}
main {
flex: 1;
width: 100%;
max-width: 500px;
padding: 1rem;
box-sizing: border-box;
}
#todo-form {
display: flex;
margin-bottom: 1rem;
}
#todo-input {
flex: 1;
padding: 0.5rem;
border: 1px solid #ccc;
border-radius: 4px 0 0 4px;
font-size: 1rem;
}
#add-btn {
padding: 0.5rem 1rem;
border: none;
background: #4CAF50;
color: white;
border-radius: 0 4px 4px 0;
cursor: pointer;
font-size: 1rem;
}
#add-btn:hover {
background: #45a049;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
background: white;
padding: 0.7rem;
margin-bottom: 0.5rem;
border-radius: 6px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.delete-btn {
border: none;
background: #e74c3c;
color: white;
padding: 0.4rem 0.6rem;
border-radius: 4px;
cursor: pointer;
font-size: 0.9rem;
}
.delete-btn:hover {
background: #c0392b;
}
</style>
</head>
<body>
<header>📋 スマホ用TODOリスト</header>
<main>
<form id="todo-form">
<input type="text" id="todo-input" placeholder="やることを入力…" required>
<button id="add-btn" type="submit">追加</button>
</form>
<ul id="todo-list"></ul>
</main>
<script>
const form = document.getElementById('todo-form');
const input = document.getElementById('todo-input');
const list = document.getElementById('todo-list');
// ローカルストレージから読み込み
const savedTodos = JSON.parse(localStorage.getItem('todos')) || [];
savedTodos.forEach(todo => addTodo(todo));
form.addEventListener('submit', e => {
e.preventDefault();
const text = input.value.trim();
if (text !== '') {
addTodo(text);
saveTodos();
input.value = '';
}
});
function addTodo(text) {
const li = document.createElement('li');
li.textContent = text;
const delBtn = document.createElement('button');
delBtn.textContent = '削除';
delBtn.className = 'delete-btn';
delBtn.onclick = () => {
list.removeChild(li);
saveTodos();
};
li.appendChild(delBtn);
list.appendChild(li);
}
function saveTodos() {
const todos = [];
list.querySelectorAll('li').forEach(li => {
todos.push(li.firstChild.textContent);
});
localStorage.setItem('todos', JSON.stringify(todos));
}
</script>
</body>
</html>
TODOを入力して追加。そして、追加したTODOリストは削除すれば消えるというシンプルスタイルです。悪くはないですが、完了したTODOもあとで見返したい・・・みたいなことには使えないですね。
ということで、もう少し具体的に記述してみたいと思います。
上記のプログラムはこちら
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TODOリスト</title>
<style>
body {
font-family: sans-serif;
margin: 0;
padding: 20px;
background: #f9f9f9;
}
h1 {
text-align: center;
}
.input-area {
display: flex;
justify-content: center;
margin-bottom: 15px;
}
.input-area input {
flex: 1;
padding: 10px;
font-size: 16px;
border: 1px solid #ddd;
border-radius: 8px 0 0 8px;
outline: none;
}
.input-area button {
padding: 10px 20px;
border: none;
background: #28a745;
color: white;
font-size: 16px;
border-radius: 0 8px 8px 0;
cursor: pointer;
}
.input-area button:hover {
background: #218838;
}
ul {
list-style: none;
padding: 0;
}
li {
display: flex;
justify-content: space-between;
align-items: center;
background: white;
margin-bottom: 8px;
padding: 10px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.todo-text {
flex: 1;
margin: 0 10px;
word-wrap: break-word;
}
.delete-btn {
background: #dc3545;
border: none;
color: white;
padding: 6px 10px;
border-radius: 6px;
cursor: pointer;
}
.delete-btn:hover {
background: #c82333;
}
.controls {
text-align: center;
margin-top: 15px;
}
.controls button {
padding: 8px 15px;
border: none;
background: #007bff;
color: white;
font-size: 14px;
border-radius: 8px;
cursor: pointer;
}
.controls button:hover {
background: #0069d9;
}
</style>
</head>
<body>
<h1>TODOリスト</h1>
<div class="input-area">
<input type="text" id="todoInput" placeholder="やることを入力">
<button onclick="addTodo()">追加</button>
</div>
<ul id="todoList"></ul>
<div class="controls">
<button onclick="toggleCompleted()">完了済みを表示/非表示</button>
</div>
<script>
let showCompleted = false;
function addTodo() {
const input = document.getElementById("todoInput");
const text = input.value.trim();
if (text === "") return;
const li = document.createElement("li");
const checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.onchange = function() {
li.dataset.completed = checkbox.checked;
updateVisibility(li);
};
const span = document.createElement("span");
span.className = "todo-text";
span.textContent = text;
const delBtn = document.createElement("button");
delBtn.textContent = "削除";
delBtn.className = "delete-btn";
delBtn.onclick = function() {
li.remove();
};
li.appendChild(checkbox);
li.appendChild(span);
li.appendChild(delBtn);
document.getElementById("todoList").appendChild(li);
input.value = "";
}
function updateVisibility(item) {
if (item.dataset.completed === "true" && !showCompleted) {
item.style.display = "none";
} else {
item.style.display = "flex";
}
}
function toggleCompleted() {
showCompleted = !showCompleted;
const items = document.querySelectorAll("#todoList li");
items.forEach(item => updateVisibility(item));
}
</script>
</body>
</html>こんな感じですね。書く時のポイントなんですが、機能単位で箇条書きにするのがオススメです。
経験則上の話なので書き方はお任せしますが、一文でプロンプトを書くとAIに誤解されて期待ハズレのものが出てきやすい印象はあります。
まとめ
WEBアプリを作ってもらう場合
スマホで動作する●●●●●●をHTML、CSS，Javascriptで作成してください。ソースはHTMLに一つにまとめてください。
上記のように指示すると確実にミニコデで動作するWEBアプリを作ってくれます。
AIに思い通りのものを作ってもらいたい場合
作ってほしいプログラムの大まかな説明を書きつつ、機能を具体的に説明するのがコツです。
因みに「#●●●●●の詳細仕様」とつけて箇条書きしていますが、頭に#をつけてタイトルとして認識させた方がChatGPTのような生成AIには意図が通じやすくなるそうです。
この辺はネットで探した情報をそのまま使っているので、本音を言うと「関係ないような？」と個人的には思っていますが、開発言語に寄せた書き方をすることを「疑似開発言語」と呼んだりするようです。
他にもAIにアプリ開発をしてもらうためのテクニックはあるのですが、その辺は「実践レシピ」で詳しく解説していきます。そちらをご参照ください。
ということで、残念パパいのっちでした。
では、また！
コメント