chatGPTに質問する際、プログラムとエラーの表示をコピペして渡すのが面倒なので、複数の文章を一度に結合してクリップボードにコピーするツールを作ることにしました。
最初に、chatGPTに以下の文章を入力して質問をして、コードを出力させました。
ブラウザで動くアプリを作りたい。
具体的には、以下のような動作である。・文章の入力欄が２つある
・文章を入力して結合ボタンを押すと、その２つの文章が結合されて出力される
・出力された文章はコピーボタンを押すとクリップボードにコピーできる
以下、chatGPTの回答で出てきたコードです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文章結合アプリ</title>
</head>
<body>
<textarea id="input1" placeholder="文章を入力"></textarea>
<textarea id="input2" placeholder="文章を入力"></textarea>
<button onclick="combineText()">結合</button>
<p id="output"></p>
<button onclick="copyToClipboard()">コピー</button>
<script src="script.js"></script>
</body>
</html>function combineText() {
// 入力欄から文章を取得
var text1 = document.getElementById('input1').value;
var text2 = document.getElementById('input2').value;
// 2つの文章を結合
var combinedText = text1 + '\n' + text2;
// 結果を表示
document.getElementById('output').textContent = combinedText;
}
function copyToClipboard() {
const textArea = document.createElement('textarea');
textArea.value = document.getElementById('output').textContent;
document.body.appendChild(textArea);
textArea.select();
document.execCommand('copy');
document.body.removeChild(textArea);
alert("コピーしました！");
}これにより作りたい文章結合のツールの雛形ができました。
あとは入力欄の大きさなどを調節します。
何度かchatGPTに質問し、出来たのが以下のコードになります。
・htmlファイル index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文章結合アプリ</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="buttonWrapper">
<div id="dummyMessage" class="messageContainer"></div>
<div id="copyMessage" class="messageContainer">クリップボードにコピーしました</div>
<button onclick="combineAndCopy()">結合 & コピー</button>
</div>
<textarea id="input1" placeholder="文章を入力">以下のプログラムは、</textarea>
<textarea id="input2" placeholder="文章を入力">・プログラム</textarea>
<textarea id="input3" placeholder="文章を入力"></textarea>
<textarea id="input4" placeholder="文章を入力">・エラー</textarea>
<textarea id="input5" placeholder="文章を入力"></textarea>
<textarea id="input6" placeholder="文章を入力"></textarea>
<textarea id="input7" placeholder="文章を入力"></textarea>
<pre id="output"></pre>
<script src="script.js"></script>
</body>
</html>・javascriptファイル script.js
function combineAndCopy() {
// 結合の処理
var texts = [];
// 1から7までのidを持つテキストエリアの値を取得してtexts配列に追加
for (let i = 1; i <= 7; i++) {
var text = document.getElementById('input' + i).value.trim();
if (text !== "") {
texts.push(text);
}
}
var combinedText = texts.join('\n\n');
document.getElementById('output').textContent = combinedText;
// コピーの処理
const textArea = document.createElement('textarea');
textArea.value = combinedText;
document.body.appendChild(textArea);
textArea.select();
document.execCommand('copy');
document.body.removeChild(textArea);
// メッセージを表示
const copyMessage = document.getElementById('copyMessage');
dummyMessage.style.display = 'none';
copyMessage.style.display = 'block';
setTimeout(function() {
copyMessage.style.display = 'none';
dummyMessage.style.display = 'block';
}, 3000);
}・cssファイル styles.css
/* 1つ目の入力欄のスタイル */
#input1,#input3,#input5,#input7 {
width: 500px; /* 例として500pxに設定 */
height: 50px; /* 例として200pxに設定 */
display: block;
margin: 15px auto;
}
#input2,#input4,#input6 {
width: 500px; /* 例として500pxに設定 */
height: 20px; /* 例として200pxに設定 */
display: block;
margin: 15px auto;
}
#buttonWrapper {
display: flex; /* flexboxを使用 */
flex-direction: column; /* 子要素を縦方向に並べる */
align-items: center; /* 子要素を垂直方向の中央に配置 */
}
.messageContainer {
height: 20px; /* この高さは、実際のコピーメッセージの高さに合わせて調整する */
padding: 10px;
margin-top: 10px;
margin-bottom: 5px;
display: flex;
align-items: center; /* テキストを縦方向の中央に配置 */
justify-content: center; /* テキストを横方向の中央に配置 */
}
#dummyMessage {
display: block; /* 最初は表示 */
background-color: transparent; /* 背景を透明に */
}
#copyMessage {
display: none; /* 最初は非表示 */
background-color: #d4edda;
color: #155724;
}
button {
display: inline-block;
margin: 10px;
}
#output {
width: 500px; /* 設定されたテキストエリアの幅と同じにします */
margin: 15px auto; /* これで中央揃えになります */
text-align: left; /* テキストは左寄せにします */
padding: 10px;
border: 1px solid #ddd; /* 枠線を追加 */
}
/* 新しいスタイルを追加 */
pre {
white-space: pre-wrap; /* 改行やスペースを保持しながら折り返しを有効にする */
word-wrap: break-word; /* 単語の途中でも折り返す */
border: 1px solid #ddd; /* 枠線を追加（オプション） */
padding: 10px; /* 内部のスペースを追加（オプション） */
}使うときは同じディレクトリに置いてhtmlファイルを開きます。
ftpでサイトにアップしてもOKです。
これで文章を結合するツールが出来ました。
chatGPTに質問するときに都度コードコピペして貼り付けるのが面倒だったので時短になります。
一番苦戦したのがボタン押下時のメッセージ表示で、これが表示される位置が変だったり、表示されると他の要素が押しのけられたりしていました。
最初にダミーを表示して、メッセージ表示とともにダミーを消すことで解消しました。
