index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Tailwind CSS</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="bg-red-400 w-40 h-40 m-4">Box 1</div>
<div class="bg-sky-400 w-[160px] mb-4">Box 2</div>
<div class="bg-orange-400 w-3/4 mx-auto">Box 3</div>
<div class="bg-green-400 w-[75%]-pl-4">Box 4</div>
</body>
</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>My Tailwind CSS</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="bg-red-400 w-40 h-40">Box 1</div>
<div class="bg-sky-400 w-[160px]">Box 2</div>
<div class="bg-orange-400 w-3/4">Box 3</div>
<div class="bg-green-400 w-[75%]">Box 4</div>
</body>
</html><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Tailwind CSS</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="bg-red-400 w-40 h-40">Box 1</div>
<div class="bg-sky-400 w-[160px]">Box 2</div>
<div class="bg-orange-400 w-3/4">Box 3</div>
<div class="bg-green-400 w-[75%]">Box 4</div>
</body>
</html><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Tailwind CSS</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<h1 class="text-center text-4xl font-bold text-red-500 opacity-50">Hello</h1>
</body>
</html><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ニコニコ動画風サイト</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background-color: #333;
color: #fff;
padding: 10px 20px;
text-align: center;
}
nav {
background-color: #555;
color: #fff;
display: flex;
justify-content: space-around;
padding: 10px 0;
}
nav a {
color: #fff;
text-decoration: none;
padding: 10px 20px;
}
main {
display: flex;
margin: 20px;
}
aside {
width: 25%;
background-color: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
section {
width: 75%;
padding: 20px;
}
.video-player {
background-color: #000;
height: 400px;
margin-bottom: 20px;
position: relative;
}
.video-player video {
width: 100%;
height: 100%;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px 0;
}
.comments {
list-style: none;
padding: 0;
}
.comments li {
background-color: #fff;
margin-bottom: 10px;
padding: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.comment-form {
display: flex;
margin-top: 20px;
}
.comment-form input {
flex: 1;
padding: 10px;
margin-right: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
.comment-form button {
padding: 10px 20px;
border: none;
background-color: #333;
color: #fff;
border-radius: 5px;
cursor: pointer;
}
.thumbnail {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.thumbnail img {
width: 120px;
height: 90px;
margin-right: 10px;
}
.login-form, .register-form, .upload-form, .profile {
background-color: #fff;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.login-form h2, .register-form h2, .upload-form h2, .profile h2 {
margin-top: 0;
}
.login-form input, .register-form input, .upload-form input {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
.login-form button, .register-form button, .upload-form button {
width: 100%;
padding: 10px;
border: none;
background-color: #333;
color: #fff;
border-radius: 5px;
cursor: pointer;
}
.search-form {
display: flex;
justify-content: center;
margin: 20px 0;
}
.search-form input {
width: 70%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
.search-form button {
padding: 10px 20px;
border: none;
background-color: #333;
color: #fff;
border-radius: 5px;
cursor: pointer;
}
.rating {
display: flex;
align-items: center;
margin-top: 10px;
}
.rating button {
border: none;
background: none;
cursor: pointer;
font-size: 1.2em;
margin-right: 10px;
}
.rating span {
margin-right: 20px;
}
</style>
</head>
<body>
<header>
<h1>ニコニコ動画風サイト</h1>
</header>
<nav>
<a href="index.html">ホーム</a>
<a href="ranking.html">ランキング</a>
<a href="categories.html">カテゴリー</a>
<a href="mypage.html">マイページ</a>
</nav>
<div class="search-form">
<input type="text" id="searchInput" placeholder="検索...">
<button onclick="search()">検索</button>
</div>
<main>
<aside>
<h2>おすすめ動画</h2>
<div class="thumbnail">
<a href="video.html"><img src="thumbnail1.jpg" alt="動画1"></a>
<a href="video.html">動画1のタイトル</a>
</div>
<div class="thumbnail">
<a href="video.html"><img src="thumbnail2.jpg" alt="動画2"></a>
<a href="video.html">動画2のタイトル</a>
</div>
<div class="thumbnail">
<a href="video.html"><img src="thumbnail3.jpg" alt="動画3"></a>
<a href="video.html">動画3のタイトル</a>
</div>
<div class="thumbnail">
<a href="video.html"><img src="thumbnail4.jpg" alt="動画4"></a>
<a href="video.html">動画4のタイトル</a>
</div>
</aside>
<section>
<div class="video-player">
<video controls>
<source src="sample.mp4" type="video/mp4">
あなたのブラウザは動画タグに対応していません。
</video>
</div>
<h2>動画タイトル</h2>
<p>動画の説明文がここに入ります。</p>
<div class="rating">
<button onclick="like()">👍</button><span id="likeCount">0</span>
<button onclick="dislike()">👎</button><span id="dislikeCount">0</span>
</div>
<h3>コメント</h3>
<ul class="comments" id="comments">
<li><span class="timestamp">12:34</span> コメント1</li>
<li><span class="timestamp">12:35</span> コメント2</li>
<li><span class="timestamp">12:36</span> コメント3</li>
<li><span class="timestamp">12:37</span> コメント4</li>
</ul>
<div class="comment-form">
<input type="text" id="commentInput" placeholder="コメントを入力してください">
<button onclick="addComment()">コメントを投稿</button>
</div>
</section>
</main>
<footer>
</footer>
<!-- Register Form -->
<div class="register-form">
<h2>ユーザー登録</h2>
<input type="text" id="registerUsername" placeholder="ユーザー名">
<input type="password" id="registerPassword" placeholder="パスワード">
<button onclick="register()">登録</button>
</div>
<!-- Login Form -->
<div class="login-form">
<h2>ログイン</h2>
<input type="text" id="loginUsername" placeholder="ユーザー名">
<input type="password" id="loginPassword" placeholder="パスワード">
<button onclick="login()">ログイン</button>
</div>
<!-- Upload Form -->
<div class="upload-form">
<h2>動画アップロード</h2>
<input type="file" id="uploadVideo">
<input type="text" id="uploadTitle" placeholder="タイトル">
<button onclick="upload()">アップロード</button>
</div>
<!-- Profile Page -->
<div class="profile">
<h2>プロフィール</h2>
<p>ユーザー名: <span id="profileUsername"></span></p>
<p>登録日: <span id="profileDate"></span></p>
</div>
<script>
let likeCount = 0;
let dislikeCount = 0;
function addComment() {
var commentInput = document.getElementById('commentInput');
var commentText = commentInput.value.trim();
if (commentText !== "") {
var commentsList = document.getElementById('comments');
var newComment = document.createElement('li');
var timestamp = new Date().toLocaleTimeString();
newComment.innerHTML = '<span class="timestamp">' + timestamp + '</span> ' + commentText;
commentsList.appendChild(newComment);
commentInput.value = "";
}
}
function like() {
likeCount++;
document.getElementById('likeCount').innerText = likeCount;
}
function dislike() {
dislikeCount++;
document.getElementById('dislikeCount').innerText = dislikeCount;
}
function search() {
var searchInput = document.getElementById('searchInput').value.trim();
if (searchInput !== "") {
alert('検索結果: ' + searchInput);
}
}
function register() {
var username = document.getElementById('registerUsername').value.trim();
var password = document.getElementById('registerPassword').value.trim();
if (username !== "" && password !== "") {
alert('ユーザー登録が完了しました: ' + username);
localStorage.setItem('username', username);
localStorage.setItem('password', password);
document.getElementById('registerUsername').value = "";
document.getElementById('registerPassword').value = "";
}
}
function login() {
var username = document.getElementById('loginUsername').value.trim();
var password = document.getElementById('loginPassword').value.trim();
var storedUsername = localStorage.getItem('username');
var storedPassword = localStorage.getItem('password');
if (username === storedUsername && password === storedPassword) {
alert('ログイン成功');
document.getElementById('profileUsername').innerText = username;
document.getElementById('profileDate').innerText = new Date().toLocaleDateString();
document.getElementById('loginUsername').value = "";
document.getElementById('loginPassword').value = "";
} else {
alert('ユーザー名またはパスワードが間違っています');
}
}
function upload() {
var video = document.getElementById('uploadVideo').files[0];
var title = document.getElementById('uploadTitle').value.trim();
if (video && title !== "") {
alert('動画アップロードが完了しました: ' + title);
document.getElementById('uploadVideo').value = "";
document.getElementById('uploadTitle').value = "";
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Tailwind CSS</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<h1 class="text-center text-4xl font-bold">Hello</h1>
</body>
</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>My Tailwind CSS</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<h1 class="text-center">Hello</h1>
</body>
</html>tailwind.config.js
chatbot_project/
│
├── app.py
├── chatbot.db (自動生成されます)
├── requirements.txt
├── templates/
│ └── index.html
└── static/
└── css/
└── style.css
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AIチャットボット</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
<style>
.chat-container {
max-width: 700px;
margin: 50px auto;
background: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.messages {
height: 500px;
overflow-y: auto;
border-bottom: 1px solid #ddd;
padding: 20px;
}
.message {
margin: 10px 0;
}
.user .message-content {
background: #007bff;
color: #fff;
border-radius: 15px 15px 0 15px;
padding: 10px 15px;
display: inline-block;
}
.bot .message-content {
background: #f1f1f1;
border-radius: 15px 15px 15px 0;
padding: 10px 15px;
display: inline-block;
}
.input-group {
padding: 20px;
}
</style>
</head>
<body>
<div class="chat-container">
<div class="messages" id="messages"></div>
<div class="input-group">
<input type="text" id="userInput" class="form-control" placeholder="メッセージを入力">
<div class="input-group-append">
<button class="btn btn-primary" onclick="sendMessage()">送信</button>
</div>
</div>
</div>
<script>
async function sendMessage() {
const userInput = document.getElementById('userInput').value;
if (userInput.trim() === "") return;
displayMessage(userInput, 'user');
document.getElementById('userInput').value = "";
try {
const response = await fetch('/chat', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ message: userInput })
});
const data = await response.json();
displayMessage(data.reply, 'bot');
} catch (error) {
displayMessage('エラーが発生しました。', 'bot');
}
}
function displayMessage(message, sender) {
const messagesDiv = document.getElementById('messages');
const messageDiv = document.createElement('div');
messageDiv.className = `message ${sender}`;
const messageContent = document.createElement('div');
messageContent.className = 'message-content';
messageContent.textContent = message;
messageDiv.appendChild(messageContent);
messagesDiv.appendChild(messageDiv);
messagesDiv.scrollTop = messagesDiv.scrollHeight;
}
</script>
</body>
</html>style.css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
app.py
from flask import Flask, request, jsonify, render_template
import nltk
from nltk.chat.util import Chat, reflections
import spacy
import sqlite3
import os
app = Flask(__name__)
nlp = spacy.load('en_core_web_sm')
pairs = [
[
r"こんにちは|やあ|おはよう",
["こんにちは！", "やあ！", "おはようございます！"]
],
[
r"あなたの名前は何ですか？",
["私はAIチャットボットです。", "私の名前はまだありません。"]
],
[
r"さようなら|バイバイ",
["さようなら！", "またね！"]
]
]
chat = Chat(pairs, reflections)
# SQLiteデータベース接続
def get_db_connection():
conn = sqlite3.connect('chatbot.db')
conn.row_factory = sqlite3.Row
return conn
with get_db_connection() as conn:
c = conn.cursor()
c.execute('''
CREATE TABLE IF NOT EXISTS messages (
id INTEGER PRIMARY KEY AUTOINCREMENT,
user_message TEXT,
bot_response TEXT
)
''')
conn.commit()
@app.route('/')
def index():
return render_template('index.html')
@app.route('/chat', methods=['POST'])
def chat_response():
user_message = request.json.get('message')
response = chat.respond(user_message)
if response is None:
response = advanced_nlp_response(user_message)
with get_db_connection() as conn:
c = conn.cursor()
c.execute('INSERT INTO messages (user_message, bot_response) VALUES (?, ?)', (user_message, response))
conn.commit()
return jsonify({'reply': response})
def advanced_nlp_response(user_message):
doc = nlp(user_message)
if doc.ents:
entities = [ent.text for ent in doc.ents]
return f"あなたのメッセージには次のエンティティが含まれています: {', '.join(entities)}"
else:
return "ごめんなさい、理解できませんでした。"
@app.route('/history', methods=['GET'])
def chat_history():
with get_db_connection() as conn:
c = conn.cursor()
c.execute('SELECT * FROM messages')
rows = c.fetchall()
history = [{"user_message": row["user_message"], "bot_response": row["bot_response"]} for row in rows]
return jsonify(history)
if __name__ == '__main__':
nltk.download('punkt')
app.run(debug=True)
import re
# トークナイザー
def tokenize(code):
token_specification = [
('NUMBER', r'\d+'), # 整数
('ID', r'[A-Za-z_]\w*'), # 識別子
('ASSIGN', r'='), # 代入演算子
('END', r';'), # 文の終わり
('OP', r'[+\-*/]'), # 演算子
('NEWLINE', r'\n'), # 改行
('SKIP', r'[ \t]'), # 空白とタブ
('MISMATCH', r'.'), # 一致しない文字
]
tok_regex = '|'.join('(?P<%s>%s)' % pair for pair in token_specification)
get_token = re.compile(tok_regex).finditer
tokens = []
for mo in get_token(code):
kind = mo.lastgroup
value = mo.group()
if kind == 'NUMBER':
value = int(value)
elif kind == 'ID' and value in {'if', 'while', 'def'}:
kind = value.upper()
elif kind == 'SKIP':
continue
elif kind == 'NEWLINE':
value = '\n'
elif kind == 'MISMATCH':
raise RuntimeError(f'{value} unexpected on line {code}')
tokens.append((kind, value))
return tokens
# パーサークラス
class Parser:
def __init__(self, tokens):
self.tokens = tokens
self.pos = 0
def parse(self):
statements = []
while self.pos < len(self.tokens):
statement = self.statement()
if statement:
statements.append(statement)
return statements
def statement(self):
if self.pos >= len(self.tokens):
return None
token = self.tokens[self.pos]
if token[0] == 'ID' and self.pos + 1 < len(self.tokens) and self.tokens[self.pos + 1][0] == 'ASSIGN':
return self.assignment()
elif token[0] in {'ID', 'NUMBER'} or (token[0] == 'OP' and token[1] == '-'):
return self.expression()
else:
raise SyntaxError(f'Unexpected token: {token}')
def assignment(self):
id_token = self.tokens[self.pos]
self.pos += 1 # skip ID
self.pos += 1 # skip ASSIGN
expr = self.expression()
self.expect('END')
return ('assign', id_token[1], expr)
def expression(self):
term = self.term()
while self.pos < len(self.tokens) and self.tokens[self.pos][0] == 'OP':
op = self.tokens[self.pos]
self.pos += 1
term = (op[1], term, self.term())
return term
def term(self):
token = self.tokens[self.pos]
if token[0] == 'NUMBER':
self.pos += 1
return token[1]
elif token[0] == 'ID':
self.pos += 1
return ('var', token[1])
else:
raise SyntaxError(f'Unexpected token: {token}')
def expect(self, kind):
if self.pos < len(self.tokens) and self.tokens[self.pos][0] == kind:
self.pos += 1
else:
raise SyntaxError(f'Expected {kind}')
# インタプリタクラス
class Interpreter:
def __init__(self):
self.variables = {}
def evaluate(self, node):
if isinstance(node, int):
return node
elif isinstance(node, tuple):
if node[0] == 'assign':
self.variables[node[1]] = self.evaluate(node[2])
return self.variables[node[1]]
elif node[0] == 'var':
if node[1] in self.variables:
return self.variables[node[1]]
else:
raise NameError(f"Variable '{node[1]}' is not defined")
else:
left = self.evaluate(node[1])
right = self.evaluate(node[2])
if node[0] == '+':
return left + right
elif node[0] == '-':
return left - right
elif node[0] == '*':
return left * right
elif node[0] == '/':
return left / right
return None
# REPL (Read-Eval-Print Loop)
def repl():
interpreter = Interpreter()
while True:
try:
code = input('>>> ')
if code == 'exit':
break
tokens = tokenize(code)
parser = Parser(tokens)
tree = parser.parse()
for statement in tree:
result = interpreter.evaluate(statement)
if result is not None:
print(result)
except Exception as e:
print(f"Error: {e}")
if __name__ == "__main__":
repl()
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="loading"></div>
</body>
</html>style.css
@charset "utf-8";
.loading{
width: 32px;
height: 32px;
border-top: 8px solid red;
border-right: 8px solid blue;
border-bottom: 8px solid green;
border-left: 8px solid yellow;
border-radius: 50%;
animation: spin 800ms infinite linear;
/*animation-timing-function: linear;*/
}
@keyframes spin {
100%{
transform: rotate(360deg);
}
}