タグ: Webdev

ECサイトGamazon

http://tyosuke20xx.com/Gamazon.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gamazon</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem;
            background-color: #131921;
            color: white;
        }
        .navbar h1 {
            font-size: 1.5rem;
        }
        .navbar nav ul {
            list-style: none;
            display: flex;
        }
        .navbar nav ul li {
            padding: 0 10px;
        }
        .navbar nav ul li a {
            text-decoration: none;
            color: white;
        }
        .product {
            border: 1px solid #ccc;
            margin: 10px;
            padding: 10px;
            width: 200px;
            float: left;
        }
        .product img {
            width: 100%;
            height: auto;
        }
        .featured-products .carousel {
            display: flex;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
        }
        .featured-products .carousel div {
            scroll-snap-align: start;
            flex: 0 0 90%;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <header>
        <div class="navbar">
            <h1>My Gmazon Store</h1>
            <input type="text" placeholder="商品を検索" id="search-box">
            <button onclick="searchProduct()">検索</button>
            <nav>
                <ul>
                    <li><a href="#">ホーム</a></li>
                    <li><a href="#">商品カテゴリ</a></li>
                    <li><a href="#">セール</a></li>
                    <li><a href="#">お問い合わせ</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <main>
        <section class="featured-products">
            <h2>特選商品</h2>
            <div class="carousel">
                <!-- カルーセル用のJavaScriptで動的に商品を挿入 -->
            </div>
        </section>

        <section class="product-list">
            <h2>商品リスト</h2>
            <div class="products">
                <!-- 商品リスト -->
            </div>
        </section>

        <section class="customer-reviews">
            <h2>ユーザーレビュー</h2>
            <div class="reviews">
                <!-- レビュー -->
            </div>
        </section>
    </main>

    <footer>
        <p>© 2024 My Gmazon Store. All rights reserved.</p>
    </footer>

    <script>
        function searchProduct() {
            const searchInput = document.getElementById('search-box').value;
            alert('検索した商品: ' + searchInput);
        }

        // 他にもカルーセルの動きやユーザーレビューを動的に表示する関数を追加
    </script>
</body>
</html>

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 Media Queries</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  
</body>
</html>

style.css

@charset "utf-8";

body {
    background: pink;
}

/* width >= 600px */
@media (min-width: 600px) {
    body {
        background: skyblue;
    }
}

@media (min-width: 800px) {
    body {
        background: orange;
    }
}

動画共有サイト

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>動画共有サイト</title>
    <style>
        /* スタイルは省略 */
    </style>
</head>
<body>
    <header>
        <h1>動画共有サイト</h1>
    </header>
    <main>
        <section id="video-container">
            <!-- 動画を表示 -->
            <iframe width="560" height="315" src="https://www.youtube.com/embed/Qkls4DCX_9I" frameborder="0" allowfullscreen></iframe>
        </section>
        <section id="comments-container">
            <!-- コメントを表示 -->
        </section>
        <section id="comment-form-container">
            <!-- コメントを投稿するフォーム -->
            <form id="comment-form">
                <textarea id="comment-input" rows="3" placeholder="コメントを入力してください"></textarea>
                <button type="submit">コメントを投稿</button>
            </form>
        </section>
        <section id="categories">
            <!-- カテゴリ一覧 -->
            <h2>カテゴリ</h2>
            <ul>
                <li><a href="#">音楽</a></li>
                <li><a href="#">スポーツ</a></li>
                <li><a href="#">ゲーム</a></li>
                <li><a href="#">ニュース</a></li>
            </ul>
        </section>
    </main>
    <footer>
        <!-- お気に入りボタン -->
        <button id="favorite-button">お気に入り</button>
        <!-- 検索フォーム -->
        <input type="text" id="search-input" placeholder="動画を検索">
        <button id="search-button">検索</button>
    </footer>
    <script>
        // コメントを追加する関数
        function addComment(comment) {
            var commentsContainer = document.getElementById('comments-container');
            var commentElement = document.createElement('div');
            commentElement.textContent = comment;
            commentsContainer.appendChild(commentElement);
        }

        // フォームの送信イベントを処理する
        document.getElementById('comment-form').addEventListener('submit', function(event) {
            event.preventDefault(); // フォームのデフォルトの動作を停止

            var commentInput = document.getElementById('comment-input');
            var commentText = commentInput.value.trim(); // 入力されたコメントを取得

            if (commentText !== '') {
                addComment(commentText); // コメントを追加
                commentInput.value = ''; // 入力欄をクリア
            }
        });

        // お気に入りボタンのクリックイベントを処理する
        document.getElementById('favorite-button').addEventListener('click', function() {
            alert('動画をお気に入りに追加しました！');
        });

        // 検索ボタンのクリックイベントを処理する
        document.getElementById('search-button').addEventListener('click', function() {
            var searchInput = document.getElementById('search-input').value.trim();
            alert('「' + searchInput + '」で検索しました！');
        });
    </script>
</body>
</html>

Slack風チャットボットサイト

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Slack風チャットボット</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        .chat-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .chat-window {
            width: 400px;
            background-color: #f4f4f4;
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 20px;
        }

        .chat-messages {
            height: 300px;
            overflow-y: auto;
            border-bottom: 1px solid #ddd;
            margin-bottom: 10px;
        }

        #message-input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            margin-bottom: 10px;
        }

        button {
            padding: 10px 20px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <div class="chat-container">
        <div class="chat-window">
            <div class="chat-messages" id="chat-messages">
                <!-- チャットメッセージが表示される部分 -->
            </div>
            <input type="text" id="message-input" placeholder="メッセージを入力してください...">
            <button onclick="sendMessage()">送信</button>
        </div>
    </div>

    <script>
        function sendMessage() {
            var messageInput = document.getElementById('message-input');
            var message = messageInput.value.trim();

            if (message !== '') {
                var chatMessages = document.getElementById('chat-messages');
                var messageElement = document.createElement('div');
                messageElement.textContent = message;
                chatMessages.appendChild(messageElement);
                messageInput.value = '';

                // メッセージをバックエンドに送信
                fetch('/send_message', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ message: message })
                });
            }
        }
    </script>
</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">
  <link rel="stylesheet" href="styles.css">
  <title>マルチプレイヤー数当てゲーム</title>
</head>
<body>
<header>
  <h1>マルチプレイヤー数当てゲーム</h1>
</header>

<div class="player-registration">
  <input type="text" id="playerName" placeholder="プレイヤー名">
  <input type="file" id="profileImage" accept="image/*">
  <button id="submitPlayer">プレイヤー登録</button>
</div>

<!-- モーダルウィンドウの追加 -->
<div id="modal" class="modal">
  <div class="modal-content">
    <span class="close-button">×</span>
    <p id="modalMessage"></p>
  </div>
</div>

<section class="game-rules">
  <h2>ゲームのルール</h2>
  <p>1から100までの数字を10回以内に当ててください。正解するとポイントが獲得できます。</p>
</section>

<div class="game-container">
  <div class="user-stats">
    <p>総プレイゲーム数: <span id="totalGamesPlayed">0</span></p>
    <p>正解総数: <span id="totalCorrectGuesses">0</span></p>
  </div>

  <div class="live-feedback" id="liveFeedback"></div>

  <input type="number" id="guessInput" min="1" max="100" placeholder="あなたの予想">
  <button id="guessButton">予想する</button>
  <p id="message"></p>
  <p>残り予想回数: <span id="remainingGuesses">10</span></p>
</div>

<div class="leaderboard">
  <h2>トッププレイヤー</h2>
  <ul id="topPlayers"></ul>
</div>

<footer>
  <p>© 2023 数当てゲーム開発者</p>
  <p>お問い合わせ: <a href="mailto:contact:tyosuke2010@gmail.com">contact:tyosuke2010@gmail.com</a></p>
</footer>

<script src="script.js"></script>
</body>
</html>

script.js

document.addEventListener('DOMContentLoaded', () => {
    let secretNumber = Math.floor(Math.random() * 100) + 1;
    let guessesRemaining = 10;
    let gamesPlayed = 0;
    let correctGuesses = 0;

    const playerNameInput = document.getElementById('playerName');
    const submitPlayerButton = document.getElementById('submitPlayer');
    const guessInput = document.getElementById('guessInput');
    const guessButton = document.getElementById('guessButton');
    const message = document.getElementById('message');
    const totalGamesPlayed = document.getElementById('totalGamesPlayed');
    const totalCorrectGuesses = document.getElementById('totalCorrectGuesses');
    const remainingGuesses = document.getElementById('remainingGuesses');
    const liveFeedback = document.getElementById('liveFeedback');

    submitPlayerButton.addEventListener('click', () => {
        const playerName = playerNameInput.value;
        if (playerName) {
            alert(`ようこそ、${playerName}さん！`);
            playerNameInput.disabled = true;
            submitPlayerButton.disabled = true;
        } else {
            alert('プレイヤー名を入力してください。');
        }
    });

    guessButton.addEventListener('click', () => {
        const userGuess = parseInt(guessInput.value);
        if (!userGuess || userGuess < 1 || userGuess > 100) {
            alert('1から100までの数字を入力してください。');
            return;
        }

        guessesRemaining--;
        remainingGuesses.textContent = guessesRemaining;

        if (userGuess === secretNumber) {
            correctGuesses++;
            totalCorrectGuesses.textContent = correctGuesses;
            message.textContent = `正解！ ${userGuess} が正しい数字です！`;
            resetGame();
        } else if (guessesRemaining === 0) {
            message.textContent = `ゲームオーバー！正しい数字は ${secretNumber} でした。`;
            resetGame();
        } else {
            message.textContent = userGuess > secretNumber ? 'もっと低い数字です！' : 'もっと高い数字です！';
            liveFeedback.textContent = `あなたの予想: ${userGuess}`;
        }
    });

    function resetGame() {
        secretNumber = Math.floor(Math.random() * 100) + 1;
        guessesRemaining = 10;
        remainingGuesses.textContent = guessesRemaining;
        guessInput.value = '';
        gamesPlayed++;
        totalGamesPlayed.textContent = gamesPlayed;
    }
});

style.css

body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f4;
    color: #333;
    line-height: 1.6;
    padding: 0;
    margin: 0;
    text-align: center;
}

header {
    background: #333;
    color: #fff;
    padding: 1rem 0;
    margin-bottom: 15px;
}

header h1 {
    margin: 0;
}

.player-registration, .game-container, .game-rules, .leaderboard {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 10px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}

input[type='text'], input[type='number'], input[type='file'], button {
    display: block;
    width: 90%;
    padding: 10px;
    margin: 10px auto;
    border-radius: 5px;
    border: 1px solid #ddd;
}

button {
    background-color: #5f9ea0;
    color: #fff;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #486f70;
}

footer {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 1rem 0;
    position: absolute;
    bottom: 0;
    width: 100%;
}

footer p {
    margin: 0;
}

/* 追加スタイル */
ul {
    list-style-type: none;
    padding: 0;
}

li {
    margin-bottom: 5px;
    
}

お名前ドットコムにSSHで接続する方法

https://kuchikarasuni.com/blog/onamae-rs-server-ssh/

Pythonをレンタルサーバーで使う方法を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン

Pythonをレンタルサーバーで使う方法を現役エンジニアが解説【初心者向け】

Django makemigrations No changes detected

https://noauto-nolife.com/post/django-makemigrations-not-applied/

Youtube見てもググっても分からなかったので本のソースコードを使いました

基本的に先にアプリを作っておくといいかもしれないですね

Djangoを習得するとWEBサービス,WEBアプリが作れそうです

Djanogo test.py

test.py

from django.test import TestCase
from django.urls import resolve

from snippets.views import snippet_new, snippet_edit, snippet_detail

class CreateSnippetTest(TestCase):
def test_should_resolve_snippet_new(self):
found = resolve(“/snippets/new/”)
self.assertEqual(snippet_new, found.func)

class SnippetDetailTest(TestCase):
def test_should_resolve_snippet_detail(self):
found = resolve(“/snippets/1/”)
self.assertEqual(snippet_detail, found.func)

class EditSnippetTest(TestCase):
def test_should_resolve_snippet_edit(self):
found = resolve(“/snippets/1/edit/”)
self.assertEqual(snippet_edit, found.func)