メモ。コードの校閲すらしていない。
質問
Pythonを用いて、次の３つのページを持つwebサイトを制作する方法を教えてください。
①日記作成。
②予定を追加できるカレンダー。
③Notionと連携したページ。
POEの回答
Pythonを用いて、3つのページを持つWebサイトを制作する方法を以下に示します。Flaskをフレームワークとして使用し、データベースにはSQLiteを利用する例を示します。
準備
- Flaskのインストール:
pip install Flask Flask-SQLAlchemy requests - プロジェクト構造:
/your_project ├── app.py ├── templates │ ├── diary.html │ ├── calendar.html │ └── notion.html └── static └── style.css
1. 日記作成ページ
app.py (Flaskアプリケーション)
from flask import Flask, render_template, request, redirect
from flask_sqlalchemy import SQLAlchemy
app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///diary.db'
db = SQLAlchemy(app)
class DiaryEntry(db.Model):
id = db.Column(db.Integer, primary_key=True)
date = db.Column(db.String(10), nullable=False)
entry = db.Column(db.Text, nullable=False)
@app.route('/diary', methods=['GET', 'POST'])
def diary():
if request.method == 'POST':
date = request.form['date']
entry = request.form['entry']
new_entry = DiaryEntry(date=date, entry=entry)
db.session.add(new_entry)
db.session.commit()
return redirect('/diary')
entries = DiaryEntry.query.all()
return render_template('diary.html', entries=entries)
if __name__ == '__main__':
db.create_all()
app.run(debug=True)
templates/diary.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<title>日記作成</title>
</head>
<body>
<h1>日記作成</h1>
<form method="POST">
<input type="date" name="date" required>
<textarea name="entry" required></textarea>
<button type="submit">保存</button>
</form>
<div>
<h2>日記の一覧</h2>
<ul>
{% for entry in entries %}
<li><strong>{{ entry.date }}</strong>: {{ entry.entry }}</li>
{% endfor %}
</ul>
</div>
</body>
</html>
2. 予定を追加できるカレンダーページ
app.py (続き)
@app.route('/calendar', methods=['GET', 'POST'])
def calendar():
if request.method == 'POST':
# 予定の保存ロジックをここに追加
pass
return render_template('calendar.html')
templates/calendar.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/5.11.3/main.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/5.11.3/main.min.css" />
<title>カレンダー</title>
</head>
<body>
<h1>予定カレンダー</h1>
<div id="calendar"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
dateClick: function(info) {
// 予定追加処理
alert('日付: ' + info.dateStr);
}
});
calendar.render();
});
</script>
</body>
</html>
3. Notionと連携したページ
Notion APIの設定
- APIキーの取得: NotionのAPIキーを取得し、必要なデータベースのIDを入手。
app.py (続き)
import requests
@app.route('/notion', methods=['GET'])
def notion():
notion_data = fetch_notion_data()
return render_template('notion.html', data=notion_data)
def fetch_notion_data():
url = "https://api.notion.com/v1/databases/YOUR_DATABASE_ID/query"
headers = {
"Authorization": "Bearer YOUR_INTEGRATION_TOKEN",
"Notion-Version": "2021-05-13",
"Content-Type": "application/json"
}
response = requests.post(url, headers=headers)
return response.json().get('results', [])
templates/notion.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<title>Notion連携</title>
</head>
<body>
<h1>Notionデータ</h1>
<ul>
{% for item in data %}
<li>{{ item.properties.Name.title[0].text.content }}</li>
{% endfor %}
</ul>
</body>
</html>
アプリケーションの実行
- Flaskアプリを実行します。
python app.py - ブラウザで
http://127.0.0.1:5000/diaryにアクセスして日記作成ページを確認します。
デプロイ
- HerokuやVercelなどのプラットフォームを使用してサイトをデプロイします。
この方法で、Pythonを使用した日記作成、カレンダー、Notion連携の3つのページを持つWebサイトを構築できます。必要に応じて、機能やデザインをカスタマイズしてください。
