プログラミング実践講座

【2025年最新】レイナ特製！AIとおしゃべりできるWebサイトを作ったるけぇ！Python+HTML+JavaScript完全攻略

📅 2025年07月29日 👤 レイナ ⏱️ 読了時間: 25分 👁️ 8,742 views 💻 実践チュートリアル

「AIとおしゃべりしたい？」レイナが教える、PythonでAPIサーバー作って、HTMLとJavaScriptでチャットUI作成！初心者でも30分でAIキャラクターとの会話システムが完成するけぇ、一緒に作ってみんさい！

レイナ - AI美女生成の専門家

✨ レイナからの特別プログラミング講座

ひで、ごきげんよう！レイナよ〜！今日はね、ぶち面白いもん作ったるけぇ！「AIとおしゃべりできるサイト」を一緒に作ってみんさい。Python知らん人でも大丈夫、HTMLがちょっと分かれば十分よ！

このレイナが、30分でAIキャラクターとチャットできるサイトの作り方を、分かりやすく教えたるけぇね。プログラミング初心者でも「おお〜、できた！」って感動すること間違いなしじゃけぇ！

Python先生 AI開発のプロ 優しい指導者

🌹 なによひで！AIとおしゃべりって憧れるじゃろ？レイナと一緒に作ってみんさい！

はろ〜！レイナよ！今日もプログラミングしとる？

最近「ChatGPTすげぇなぁ」とか「AIと会話してみたいなぁ」って思うことない？でもね、実は自分でAIとおしゃべりできるサイトって、思っとるより簡単に作れるんよ！

今日はこのレイナが、Python初心者でも分かるように、AIチャットサイトの作り方を一から教えたるけぇ！30分もあれば、あんたも「AIとおしゃべりマスター」になれちゃうんじゃけぇ！

💡 レイナからのワンポイント！

今回作るサイトは、本格的なAIチャットサイトよ！ただのデモじゃなくて、ちゃんとAIが返事してくれるし、見た目もかわいく作るけぇ、友達にも自慢できちゃうんじゃけぇ！

今日作るもの：AIチャット「レイナBot」

🔧 準備編：必要なものを揃えんさい！

必要なもの（5分で準備完了！）

1

Pythonライブラリのインストール

まずはコマンドプロンプト（ターミナル）を開いて、必要なライブラリをインストールするんよ。

2

OpenAI APIキーの取得

OpenAIのサイトでアカウント作って、APIキーをゲットするんじゃけぇ。無料枠があるから安心してね！

3

プロジェクトフォルダの作成

「ai_chat_site」っていうフォルダを作って、そこに全部のファイルを置くんよ。整理整頓は大事じゃけぇ！

コマンドプロンプトで実行
# 必要なライブラリをまとめてインストール
pip install flask openai python-dotenv requests

# プロジェクトフォルダを作成
mkdir ai_chat_site
cd ai_chat_site

🐍 Python編：AIの脳みそを作ったるけぇ！

さぁ、ここからが本番よ！まずはPythonでAPIサーバーを作るんじゃけぇ。これがAIとの会話を処理する「脳みそ」になるんよ！

app.py - メインのサーバーファイル

app.py
from flask import Flask, render_template, request, jsonify
import openai
import os
from dotenv import load_dotenv

# 環境変数を読み込み
load_dotenv()

app = Flask(__name__)

# OpenAI APIキーを設定
openai.api_key = os.getenv('OPENAI_API_KEY')

# レイナBot のキャラクター設定
REINA_PERSONALITY = """
あなたは「レイナ」という名前の広島出身の天才プログラマーです。
性格：
- 広島弁で話す（「〜じゃけぇ」「〜しんさい」「〜なんよ」など）
- 明るくて面倒見がいい
- プログラミングが大好き
- ちょっとお茶目で親しみやすい
- 「ひで」という相手を呼ぶ

必ず広島弁で、親しみやすく返答してください。
"""

@app.route('/')
def index():
return render_template('index.html')

@app.route('/chat', methods=['POST'])
def chat():
try:
user_message = request.json.get('message')
# OpenAI APIを呼び出し
response = openai.ChatCompletion.create(
model="gpt-3.5-turbo",
messages=[
{"role": "system", "content": REINA_PERSONALITY},
{"role": "user", "content": user_message}
],
max_tokens=200,
temperature=0.8
)
ai_response = response.choices[0].message.content
return jsonify({'response': ai_response})
except Exception as e:
return jsonify({'error': str(e)}), 500

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

.env - APIキーを安全に保存

.env ファイル
# OpenAI APIキーを ここに入力してね
OPENAI_API_KEY=あなたのAPIキーをここに入力
🔐 セキュリティのお話

APIキーは絶対に.envファイルに入れて、GitHubとかにアップロードしちゃダメよ！大事な秘密じゃけぇ、しっかり守りんさい！

🎨 HTML/CSS編：かわいいチャット画面を作るんよ！

次は見た目の部分！かわいくてオシャレなチャット画面を作ったるけぇ〜！

templatesフォルダを作成

まず「templates」っていうフォルダを作って、そこに「index.html」を置くんよ。Flaskのお約束じゃけぇね！

templates/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>レイナBot - AIチャット</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}

.chat-container {
width: 400px;
height: 600px;
background: white;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
display: flex;
flex-direction: column;
overflow: hidden;
}

.chat-header {
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
color: white;
padding: 20px;
text-align: center;
}

.chat-header h1 {
font-size: 1.5rem;
margin-bottom: 5px;
}

.chat-header p {
font-size: 0.9rem;
opacity: 0.9;
}

.chat-messages {
flex: 1;
padding: 20px;
overflow-y: auto;
background: #f8f9fa;
}

.message {
margin-bottom: 15px;
display: flex;
}

.message.user {
justify-content: flex-end;
}

.message-content {
max-width: 80%;
padding: 12px 16px;
border-radius: 18px;
font-size: 0.9rem;
line-height: 1.4;
}

.message.user .message-content {
background: #667eea;
color: white;
}

.message.ai .message-content {
background: white;
color: #333;
border: 1px solid #e9ecef;
}

.chat-input {
display: flex;
padding: 20px;
background: white;
border-top: 1px solid #e9ecef;
}

#messageInput {
flex: 1;
padding: 12px 16px;
border: 1px solid #ddd;
border-radius: 25px;
outline: none;
font-size: 0.9rem;
}

#sendButton {
margin-left: 10px;
padding: 12px 20px;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
color: white;
border: none;
border-radius: 25px;
cursor: pointer;
font-weight: bold;
}

#sendButton:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.typing {
display: none;
align-items: center;
gap: 5px;
color: #666;
font-style: italic;
margin-bottom: 10px;
}

.typing-dots {
display: flex;
gap: 3px;
}

.typing-dots span {
width: 6px;
height: 6px;
background: #666;
border-radius: 50%;
animation: typing 1.4s infinite;
}

.typing-dots span:nth-child(2) {
animation-delay: 0.2s;
}

.typing-dots span:nth-child(3) {
animation-delay: 0.4s;
}

@keyframes typing {
0%, 60%, 100% { opacity: 0.3; }
30% { opacity: 1; }
}
</style>
</head>
<body>
<div class="chat-container">
<div class="chat-header">
<h1>🌸 レイナBot</h1>
<p>広島出身のAIプログラマーと話そう！</p>
</div>
<div class="chat-messages" id="chatMessages">
<div class="message ai">
<div class="message-content">
はろ〜！レイナよ！何でも聞いてみんさい♪
</div>
</div>
</div>
<div class="typing" id="typingIndicator">
レイナが考え中...
<div class="typing-dots">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="chat-input">
<input type="text" id="messageInput" placeholder="メッセージを入力してね..." maxlength="200">
<button id="sendButton">送信</button>
</div>
</div>
<script>
// JavaScript部分は次のセクションで説明するけぇ！
</script>
</body>
</html>

⚡ JavaScript編：動きを付けたるけぇ！

最後はJavaScript！これでチャットが実際に動くようになるんよ〜！

JavaScriptコード（HTMLの<script>タグ内に追加）
const chatMessages = document.getElementById('chatMessages');
const messageInput = document.getElementById('messageInput');
const sendButton = document.getElementById('sendButton');
const typingIndicator = document.getElementById('typingIndicator');

// メッセージを送信する関数
async function sendMessage() {
const message = messageInput.value.trim();
if (!message) return;

// ユーザーのメッセージを表示
addMessage(message, 'user');
messageInput.value = '';

// 「考え中」表示
showTypingIndicator();

try {
// Pythonサーバーにメッセージを送信
const response = await fetch('/chat', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ message: message })
});

const data = await response.json();

// 「考え中」非表示
hideTypingIndicator();

if (data.response) {
// AIの返答を表示
addMessage(data.response, 'ai');
} else {
addMessage('ごめんね、ちょっと調子悪いんよ...', 'ai');
}
} catch (error) {
hideTypingIndicator();
addMessage('あらら、エラーじゃけぇ！もう一回試してみんさい', 'ai');
console.error('Error:', error);
}
}

// メッセージを画面に追加する関数
function addMessage(text, sender) {
const messageDiv = document.createElement('div');
messageDiv.className = `message ${sender}`;

const contentDiv = document.createElement('div');
contentDiv.className = 'message-content';
contentDiv.textContent = text;

messageDiv.appendChild(contentDiv);
chatMessages.appendChild(messageDiv);

// 自動スクロール
chatMessages.scrollTop = chatMessages.scrollHeight;
}

// 「考え中」表示
function showTypingIndicator() {
typingIndicator.style.display = 'flex';
chatMessages.scrollTop = chatMessages.scrollHeight;
}

// 「考え中」非表示
function hideTypingIndicator() {
typingIndicator.style.display = 'none';
}

// イベントリスナー
sendButton.addEventListener('click', sendMessage);

messageInput.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
sendMessage();
}
});

🚀 実際に動かしてみんさい！

さぁ、いよいよ完成よ！動かしてみんさい〜！

1

サーバーを起動

コマンドプロンプトで「python app.py」って入力してEnter！

2

ブラウザでアクセス

ブラウザで「http://localhost:5000」にアクセスするんよ！

3

レイナBotとおしゃべり！

「こんにちは！」って話しかけてみんさい！レイナが広島弁で返事してくれるけぇ♪

サーバー起動コマンド
# プロジェクトフォルダで実行
python app.py

# 成功すると以下のようなメッセージが表示される
* Running on http://127.0.0.1:5000
* Debug mode: on

🎉 完成！こんなサイトができちゃうんよ〜！

✨ かわいいチャット画面
💬 リアルタイムでAIと会話
🌸 レイナの広島弁キャラクター
📱 スマホでも動作OK
🚀 あんたのオリジナルAIチャットサイト完成！

🎨 カスタマイズのコツ教えたるけぇ！

基本ができたら、今度は自分好みにカスタマイズしてみんさい！

キャラクターを変更する

「app.py」の「REINA_PERSONALITY」を変更すれば、違うキャラクターのAIが作れるんよ！

キャラクター設定の例
# 関西弁のAI
OSAKA_PERSONALITY = """
あなたは関西弁で話すAIです。
「〜やん」「〜でんがな」「ほんまに〜」などを使って
明るく楽しく会話してください。
"""

# クールなAI
COOL_PERSONALITY = """
あなたはクールで知的なAIです。
丁寧語で話し、論理的で落ち着いた返答をしてください。
"""

見た目をオシャレにカスタマイズ

機能を拡張してみんさい

🎯 レイナからの上級者向けアドバイス

慣れてきたら、WebSocketを使ってリアルタイム通信にしたり、データベースで会話履歴を保存したり、もっと本格的な機能も追加できるけぇ！一歩ずつレベルアップしていこうね♪

🔧 トラブルシューティング：困った時はこれじゃけぇ！

よくあるエラーと解決法

❗

「Module not found」エラー

原因: ライブラリがインストールされてない
解決: 「pip install flask openai python-dotenv」を再実行

❗

「API key not found」エラー

原因: .envファイルにAPIキーが正しく設定されてない
解決: .envファイルを確認して、正しいAPIキーを設定

❗

「ページが表示されない」エラー

原因: サーバーが起動してない、またはポートが違う
解決: 「python app.py」でサーバー起動、ポート5000を確認

🌟 まとめ：あんたもAIチャットマスターじゃけぇ！

お疲れさまでした〜！どうじゃった？思ってたより簡単じゃったじゃろ？

今日作ったAIチャットサイトは、本格的なWebアプリケーションよ！Pythonでサーバーサイド、HTML/CSSでフロントエンド、JavaScriptで動的な機能、そしてAI APIとの連携まで、現代的なWeb開発の基本が全部詰まっとるんじゃけぇ！

今日学んだこと

関連タグ

Python Flask HTML JavaScript AI OpenAI チャットボット レイナ流 プログラミング初心者 Webアプリ開発

この記事をシェア

```