ChatGPT 3.5 に聞きながら Excel ライクな入力を実現する Web アプリを作ってみた

誰かが「人間が想像できることは人間が必ず実現できる」という名言を残したように、自分が想像して実現できそうだと思えるものはほぼ実現できるので、実際に想像したものを仮説検証してみたくなります。しかしながら、日頃からその領域の仕事をしていればすぐに実現する手段がわかるのですが、自分の領域でなかったり、久しぶりすぎて忘れていたり、なかなか実現する手段がみつからない場合もあったりします。

そこで今回は、無料の ChatGPT 3.5 に聞きながら Excel ライクな入力を実現する Web アプリを作ってみました。

ChatGPT 3.5 に聞いたプロンプト

excelのような入力ができるuiでsqliteにデータ保存するサンプルコード

これをWebにしたサンプルコード

flaskでindex.htmlを配置するフォルダ名は？

javascriptでtableをExcelライクに使用するサンプルコード

console.logのあたりにsqliteに保存するサンプルコード

response.okの時にページリロードを追加

INSERT INTO dataの箇所にname age email が空じゃなかったらという条件を追加

ChatGPT 3.5 に聞いた例

ChatGPT 3.5 の回答を元に Flask アプリを作成

touch app.py

mkdir templates

touch templates/index.html

app.py のコード

from flask import Flask, render_template, request, jsonify
import sqlite3

app = Flask(__name__)

def create_table():
    conn = sqlite3.connect('data.db')
    c = conn.cursor()
    c.execute('''CREATE TABLE IF NOT EXISTS data
                 (id INTEGER PRIMARY KEY,
                 name TEXT,
                 age INTEGER,
                 email TEXT)''')
    conn.commit()
    conn.close()

create_table()

@app.route('/')
def index():
    conn = sqlite3.connect('data.db')
    c = conn.cursor()
    c.execute("SELECT * FROM data")
    rows = c.fetchall()
    conn.close()
    return render_template('index.html', rows=rows)

@app.route('/saveData', methods=['POST'])
def save_data():
    data = request.json
    if not data:
        return jsonify({'message': 'No data received'}), 400

    conn = sqlite3.connect('data.db')
    c = conn.cursor()
    c.execute("DELETE FROM data")
    for row in data:
        c.execute("INSERT INTO data (name, age, email) VALUES (?, ?, ?)", (row['name'], row['age'], row['email']))
    conn.commit()
    conn.close()

    return jsonify({'message': 'Data saved successfully'}), 200

if __name__ == '__main__':
    app.run(debug=True)

index.html のコード

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Excel Like Table</title>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

table, th, td {
  border: 1px solid black;
  padding: 8px;
}

th {
  background-color: #f2f2f2;
}
</style>
</head>
<body>

<table id="excelTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    {% for row in rows %}
    <tr>
        <td contenteditable="true">{{ row[1] }}</td>
        <td contenteditable="true">{{ row[2] }}</td>
        <td contenteditable="true">{{ row[3] }}</td>
    </tr>
    {% endfor %}
    <tr>
      <td contenteditable="true"></td>
      <td contenteditable="true"></td>
      <td contenteditable="true"></td>
    </tr>
  </tbody>
</table>

<button id="saveButton">Save Changes</button>

<script>
document.getElementById("saveButton").addEventListener("click", function() {
  const table = document.getElementById("excelTable");
  const data = [];

  for (let i = 1; i < table.rows.length; i++) {
    const row = table.rows[i];
    const rowData = {
      name: row.cells[0].textContent,
      age: row.cells[1].textContent,
      email: row.cells[2].textContent
    };
    if (rowData.name.trim() !== '' && rowData.age.trim() !== '' && rowData.email.trim() !== '') {
      data.push(rowData);
    }
  }

  // Send data to server
  fetch('/saveData', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)
  })
  .then(response => {
    if (response.ok) {
      console.log('Data saved successfully.');
      location.reload(); // Reload the page
    } else {
      console.error('Failed to save data.');
    }
  })
  .catch(error => {
    console.error('Error:', error);
  });
});
</script>

</body>
</html>

作成した Web アプリを実行

python3 app.py

作成した Web アプリの画面

タグ: ChatGPT, Flask, python