programming - 長留裕平のブログ

Tailwind 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>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>

Tailwind 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>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>

Tailwind CSS 要素のサイズを設定してみよう

<!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>

Tailwind CSS 色を指定する

<!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>

TailwindCSS テキスト周りのスタイルを設定する

<!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>

Tailwind 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>My Tailwind CSS</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <h1 class="text-center">Hello</h1>
</body>
</html>

tailwind.config.js

python AI

プロジェクトのファイル構成

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)

python プログラミング言語

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()

CSS ローディングアイコン

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);
    }
}