Photo by
ia19200102
【ChatGPT】AIといっしょにWebプログラミング!作業補助ツール【HTML】
昨日に引き続き、ChatGPTと一緒にHTMLでPC作業を補助するツールを作ってみました。
情報過多でお疲れモードなAI界隈。情報を遮断するために、何をするかを限定して作業をするためのシンプルなツールを作りました。
作ったツールの概要
作ったツールはかなり単純なUIのツールです。画面の左側に作業に使うものを開く欄を作り、右側に作業の手順を表示するようになっています。また、作業を区切るためにタイマーの機能も追加してあります。
このプログラムの内容もChatGPTにお願いすると仕様書にまとめてくれます。
実際に出力された仕様の全文です。これを同じようにChatGPTに投げてあげればプログラムを作ってくれます。
PC作業補助ツールの仕様書
機能:
作業用ツールを開く
対応ツール: Excel, Word, メモ帳, ブラウザ, PDF
ツールのパスまたはURLを入力し、開く
資料を開く
資料のURLまたはファイルパスを入力し、ブラウザで開く
タイマー機能
タイマーの時間（分）を入力し、開始
指定した時間が経過したら、ブラウザアラートで知らせる
作業手順書のテキスト表示
作業手順書のテキストを右側のパネルに大きく表示
テキストを外部の.txtファイルとして保存
ローカルファイルシステムから.txtファイルを読み込む
読み込んだ手順書ファイルの名称を表示
レイアウト:
画面を左右に分割
左側に作業用ツール、資料、タイマー機能を表示
右側に作業手順書のテキストエリアを大きく表示
実装:
HTML, CSS, JavaScriptを使用
ブラウザで動作
外部ライブラリは使用しない
この仕様書に基づいて、PC作業補助ツールが実装されています。ちなみにプログラムの全文はこちら。興味があったら使ってみて下さい。そのまま使ってもOK。ChatGPTに自分用カスタマイズをしてもらってもOKです。カスタマイズするなら上の仕様書の方が楽かもしれませんね。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>PC作業補助ツール</title>
<style>
body {
display: flex;
justify-content: space-between;
}
.left-panel {
width: 40%;
}
.right-panel {
width: 55%;
}
input, button {
display: block;
margin-bottom: 10px;
}
#procedureText {
width: 100%;
height: 90vh;
}
</style>
</head>
<body>
<div class="left-panel">
<h1>PC作業補助ツール</h1>
<h2>作業用ツールの開始</h2>
<input type="text" id="toolPath" placeholder="ツールのパス">
<button onclick="openTool()">ツールを開く</button>
<h2>資料の開始</h2>
<input type="text" id="documentPath" placeholder="資料のURLまたはファイルパス">
<button onclick="openDocument()">資料を開く</button>
<h2>タイマー機能</h2>
<input type="number" id="timerMinutes" placeholder="分">
<button onclick="startTimer()">タイマーを開始</button>
<h2>作業手順書のテキスト表示</h2>
<button onclick="saveText()">テキストを保存</button>
<input type="file" id="loadFile" style="display:none;" onchange="loadText()">
<button onclick="document.getElementById('loadFile').click()">テキストを開く</button>
</div>
<div class="right-panel">
<h2 id="fileName">手順書ファイル名</h2>
<textarea id="procedureText"></textarea>
</div>
<script>
function openTool() {
const toolPath = document.getElementById("toolPath").value;
window.open(toolPath);
}
function openDocument() {
const documentPath = document.getElementById("documentPath").value;
window.open(documentPath);
}
function startTimer() {
const minutes = document.getElementById("timerMinutes").value;
setTimeout(() => {
alert("タイマーが経過しました。");
}, minutes * 60 * 1000);
}
function saveText() {
const procedureText = document.getElementById("procedureText").value;
const blob = new Blob([procedureText], {type: "text/plain;charset=utf-8"});
const a = document.createElement("a");
a.href = URL.createObjectURL(blob);
a.download = "procedure.txt";
a.style.display = "none";
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
function loadText() {
const file = document.getElementById("loadFile").files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
document.getElementById("procedureText").value = e.target.result;
};
reader.readAsText(file);
}
}
function loadText() {
const file = document.getElementById("loadFile").files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
document.getElementById("procedureText").value = e.target.result;
};
reader.readAsText(file);
document.getElementById("fileName").innerText = "手順書ファイル名: " + file.name;
}
}
</script>
</body>
</html>
ChatGPTとどういうやりとりをしたか？
まずはどんなプログラムを作りたいかイメージしてみましょう。上手く伝えられないことや思いつかないことがあってもOK。ある程度あいまいな部分はChatGPTの方で上手くやってくれます。ただ、「必要なことがあったら聞いてください。」と付け加えると勝手に作らずに質問してくれます。
これに対して仕様と追加の質問が戻ってきます。
ちゃんとわからない部分を聞いてきてくれてますね。
わからないことがあれば、とにかく聞けばOK。対話できることがChatGPTの強みなので、何でも聞いてみましょう。
完璧に決めなくても、いい感じでやっといてという指示ができるのがChatGPTの強みです。
仕様ができてきたらコードを書いてもらいます。
プログラムを書いてもらったら実際に動かして試してみます。HTMLはメモ帳に貼り付けて、〇〇.htmlという名前で保存、ブラウザから開けば動作します。思ってたのと違う動きがあったら直してもらいましょう。
実際に作ると、結構レイアウトがイメージと違うことがあります。そういうものも、後から簡単に直せてしまいます。
このようなやり取りを繰り返して、ツールは無事完成しました。
このままツールを使ってもよし！細部にこだわってもよし！これを利用してプログラミングを勉強するもよし！聞けばだいたい何でもChatGPTは教えてくれます。
このツールを作成するために必要なプログラミング知識の詳細な項目は以下の通りです。
HTML (HyperText Markup Language)
基本的なタグと構造
入力フィールド（<input>）
ボタン（<button>）
テキストエリア（<textarea>）
ファイル選択（<input type="file">）
CSS (Cascading Style Sheets)
基本的なセレクタとプロパティ
レイアウト（Flexbox）
スタイルの適用（タグ、クラス、IDに対して）
JavaScript
基本的な構文とデータ型
DOM（Document Object Model）操作
要素の選択（getElementById()など）
要素の属性やスタイルの変更
イベントリスナーとイベントハンドラ
クリックイベント（onclick）
ファイル選択イベント（onchange）
タイマー関数（setTimeout()）
ブラウザアラート（alert()）
ファイルの読み書き
FileReader オブジェクト
Blob オブジェクト
URL.createObjectURL() を使用したダウンロードリンクの生成
ウィンドウ操作
新しいウィンドウやタブを開く（window.open()）
これらの知識を習得することで、HTML, CSS, およびJavaScriptを使用して、このPC作業補助ツールを実装することができます。さらに、これらの基本知識を応用して、他のウェブアプリケーションやツールも作成することができるでしょう。以下に、初心者向けの練習問題をいくつか提案します。これらの問題は、上記で説明したプログラミング知識の各領域を練習することを目的としています。
HTML: 自己紹介ページを作成してください。
あなたの名前、趣味、好きな食べ物などを含めてください。
段落（<p>）、見出し（<h1>、<h2> 等）、リスト（<ul>、<ol>、<li>）などの基本的なHTMLタグを使用してください。
CSS: 自己紹介ページにスタイルを追加してください。
テキストの色、フォント、サイズを変更してください。
見出しやリストに異なるスタイルを適用してください。
CSSを別のファイルに書いて、HTMLファイルにリンクしてください。
JavaScript: シンプルな電卓アプリケーションを作成してください。
2つの数値を入力するためのテキストボックス（<input type="number">）を作成してください。
四則演算（加算、減算、乗算、除算）のボタン（<button>）を作成してください。
各ボタンをクリックすると、対応する演算が実行され、結果が画面上に表示されるようにしてください。
JavaScript: シンプルなタイマーアプリケーションを作成してください。
タイマーの時間（秒）を入力するためのテキストボックス（<input type="number">）を作成してください。
タイマーを開始するボタン（<button>）を作成してください。
タイマーを開始すると、入力された秒数が経過したら、ブラウザアラート（alert()）で知らせるようにしてください。
これらの練習問題を通じて、HTML, CSS, およびJavaScriptの基本的な知識を身につけることができます。また、練習問題の難易度を上げることで、さらにスキルを向上させることができます。何から何まで面倒を見てくれるChatGPTでした。