カテゴリー: WEB

CSS クラスセレクター

index.html

@charset "utf-8";

body {
  margin: 0;
}

.container {
  width: 400px;
  margin: 32px auto 0;
  border: 8px solid blue;
}

.box-1 {
  width: 100px;
  height: 100px;
  background-color: pink;
}

.box-2 {
  width: 100px;
  height: 50px;
  background-color: skyblue;
}

.box-3 {
  width: 100px;
  height: 100px;
  background-color: orange;
}

style.css

@charset "utf-8";

body {
  margin: 0;
}

.container {
  width: 400px;
  margin: 32px auto 0;
  border: 8px solid blue;
}

.box-1 {
  width: 100px;
  height: 100px;
  background-color: pink;
}

.box-2 {
  width: 100px;
  height: 50px;
  background-color: skyblue;
}

.box-3 {
  width: 100px;
  height: 100px;
  background-color: orange;
}

マルチプレイヤー数当てゲーム

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

HTMLCSSJavascript Canvas

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>My Canvas</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <canvas width="600" height="240">
    Canvas not supported.
  </canvas>

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

css/styles.css

body {
  background: #222;
}
canvas {
  background: #fff;
}

js/main.js

'use strict';

{
  let t = 0;
  
  function draw() {
    const canvas = document.querySelector('canvas');
    if (typeof canvas.getContext === 'undefined') {
      return;
    }
    const ctx = canvas.getContext('2d');
    
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    ctx.beginPath();
    ctx.ellipse(100, 100, 40, 30, 0, 0, 2 * Math.PI);
    ctx.fillStyle = 'black';
    ctx.fill();
    
    ctx.beginPath();
    ctx.ellipse( 80 + Math.sin(t / 30), 100, 8, 8, 0, 0, 2 * Math.PI);
    ctx.ellipse(120 + Math.sin(t / 30), 100, 8, 8, 0, 0, 2 * Math.PI);
    ctx.fillStyle = 'skyblue';
    ctx.fill();
    
    t++;
    setTimeout(draw, 10);
 }

  draw();
}
sprite-1ダウンロード
logoダウンロード

Twitter Xで使えるWEBサービス

ChatGPT

Twitterと組み合わせて使用できるさまざまなWebサービスやツールがあります。以下は、Twitterと連携して利用できる一部のWebサービスの例です：

  1. Hootsuite: Hootsuiteは、Twitterを含む複数のソーシャルメディアプラットフォームを一元管理するためのツールです。スケジュール投稿、分析、モニタリングなどの機能が提供されています。
  2. Buffer: Bufferは、Twitter投稿のスケジュール管理とパフォーマンス分析を支援するソーシャルメディア管理ツールです。複数のソーシャルメディアプラットフォームと連携できます。
  3. TweetDeck: TweetDeckは、Twitterの公式クライアントの一部で、複数のカラムを使用してリアルタイムでツイートをモニタリングできます。リスト、検索クエリ、通知などを管理できます。
  4. Zapier: Zapierは、Twitterと他のアプリケーションやWebサービスを連携させる自動化プラットフォームです。例えば、新しいツイートを特定のアクションに関連付けることができます。
  5. Twilio: Twilioは、SMSや音声通話などのコミュニケーションを統合できるプラットフォームで、Twitter通知をカスタマイズするのに役立ちます。
  6. SocialBee: SocialBeeは、ツイートのスケジュール管理やカテゴリ別のコンテンツの自動投稿をサポートするソーシャルメディアマネージメントツールです。
  7. TweetBinder: TweetBinderは、ハッシュタグ分析やツイートのインサイトを提供するツールで、Twitterキャンペーンの効果をモニタリングするのに役立ちます。
  8. Social Mention: Social Mentionは、Twitterや他のソーシャルメディアプラットフォームでのブランドやキーワードのメンションを追跡し、リアルタイムの分析データを提供します。

これらは、Twitterと連携して使用できる一部のWebサービスの例です。Twitterを活用してコミュニケーション、マーケティング、分析などの目的を達成するために、さまざまなツールやサービスが利用可能です。具体的なニーズや目的に合わせて、適切なツールを選択できます。

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

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

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

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

Python Webcrawler

import requests
from bs4 import BeautifulSoup

def crawl(url, max_depth=2):
if max_depth < 0:
return

try:
response = requests.get(url)
content = response.content
soup = BeautifulSoup(content, ‘html.parser’)

links = set()

for link in soup.find_all(‘a’):
href = link.get(‘href’)
if href and href.startswith(‘http’):
links.add(href)

print(f”Found {len(links)} links at {url}”)

for link in links:
crawl(link, max_depth – 1)

except requests.RequestException as e:
print(f”Error during requests to {url} : {str(e)}”)

# 使用例
start_url = “https://b.hatena.ne.jp/” # スタートするURL
crawl(start_url, max_depth=2) # 深さ2でクロール

検索エンジンの作り方

検索エンジンの必要性

インターネットの普及により、情報検索の需要が増加しています。現在、私たちはさまざまな情報をインターネット上で検索する習慣がありますが、それぞれが自分の目的にあった情報を見つけることが求められています。しかし、情報がますます増えていく中で、目的の情報を短時間で正確に見つけることは容易ではありません。

また、現在の検索エンジンにはいくつかの課題が存在しています。例えば、検索結果の精度が求められていますが、検索エンジンが常に最適な結果を表示できるわけではありません。また、スパムサイトの排除も課題となっており、ユーザーが信頼できる情報を得るためには、信頼性が高い検索エンジンであることが重要です。以上のような課題を解決し、より使いやすい検索エンジンが求められています。

検索エンジンの仕組み

インターネットの普及により、情報検索の需要が増加しています。そのため、現在の検索エンジンの課題として、検索結果の精度やスパムサイトの排除が挙げられます。検索エンジンの仕組みとしては、まずホームページをクローリングし、インデックスを作成します。そして、ユーザーの検索クエリを受け取り、検索エンジンはそのクエリに対して適切な検索結果を表示します。検索エンジンのアルゴリズムは、検索結果の順位付けに用いられます。代表的なアルゴリズムとしては、GoogleのPageRankがあります。さらに、検索エンジンを独自で作成する際には、プログラミングの知識やツールが必要です。また、独自の検索エンジンを作る際には、注意点やノウハウもあります。検索エンジンの公開に際しては、SEO対策が重要です。SEO（Search Engine Optimization）とは、検索エンジン最適化のことを指します。情報検索に興味を持っている方にとって、検索エンジンの仕組みや作り方はとても興味をそそるものであり、自分でも作れる可能性があります。

検索エンジンのアルゴリズム

検索エンジンのアルゴリズムには、検索結果の順位付けに用いる手法があります。代表的なアルゴリズムの一つには、GoogleのPageRankがあります。PageRankは、Webページの重要度を計算するためのアルゴリズムで、リンクの数やリンク元の重要度などを考慮してページの順位付けを行います。検索エンジンのアルゴリズムは、検索結果の質を向上させるために定期的に改善されています。また、ユーザーの好みや検索クエリに合わせて、検索結果をカスタマイズすることも可能です。検索エンジンのアルゴリズムは、プログラミングの知識や統計学の知識が必要ですが、興味がある方には作れる可能性があります。自作の検索エンジンを作る際には、他の検索エンジンとの差別化や利便性の向上を考慮する必要があります。また、検索エンジンを公開する際には、適切なサーバー環境の構築やセキュリティ対策を行う必要があります。SEO対策としては、検索エンジンのアルゴリズムに適したサイトの作成やキーワードの適切な使用が重要です。

独自の検索エンジンの作成

興味が湧くキーワードである「検索エンジンの作り方」について、この章では独自の検索エンジンの作成について紹介します。まず、検索エンジンを作るためにはプログラミングの知識やツールが必要です。プログラミング言語としてはPythonやJavaなどが一般的であり、ウェブクローラーやインデックス作成ツールなどが有用です。独自の検索エンジンを作る際の注意点として、適切なクローリングの実装やインデックスのアップデート、検索結果の表示方法などが挙げられます。また、Googleなど既存の検索エンジンとは異なる特徴を持たせることで、ユーザーに新たな価値を提供することができます。具体的には、検索結果の順位付けに新しいアルゴリズムを適用したり、ユーザーのフィードバックを反映するなどのカスタマイズが可能です。最後に、公開に関してはウェブページとして公開するだけでなく、他のサイトに埋め込むなどの方法もあります。また、SEO（Search Engine Optimization）対策も重要であり、適切なキーワードの使用やメタタグの最適化などが効果的です。

検索エンジンの公開とSEO対策

検索エンジンを作ることに興味がある方にとって、自作の検索エンジンを公開することは大きな一歩です。公開することで、多くの人々があなたの検索エンジンを利用することができます。公開するためには、まず検索エンジンのホームページを作成する必要があります。ホームページでは、検索エンジンの機能や特徴をわかりやすく説明し、利用者にアピールすることが重要です。また、プログラミングの知識やツールも必要です。検索エンジンの作り方やアルゴリズムについて学び、それを実装するためのプログラミングスキルが必要です。加えて、公開後に利用者が増えるためのSEO対策も重要です。SEO対策を行うことで、検索エンジンの検索結果に表示される順位を上げることができます。具体的なSEO対策としては、キーワードの適切な使用やメタタグの最適化などがあります。検索エンジンの公開とSEO対策を適切に行うことで、より多くの人々にあなたの検索エンジンを使ってもらえるようになります。

TwitterRSS

Twitterには直接RSSフィードを自動投稿する機能はありませんが、いくつかの方法を使用してTwitterに自動投稿することができます。以下にいくつかの一般的な方法を紹介します。

IFTTT（If This Then That）: IFTTTは、さまざまなウェブサービスやアプリケーションを連携させるためのプラットフォームです。IFTTTを使用して、RSSフィードの新しいエントリがある場合にTwitterに投稿するルールを作成できます。

Zapier: ZapierはIFTTTと同様のサービスで、さまざまなアプリケーションやサービスを統合するための自動化ツールです。Zapierを使用して、RSSフィードの更新をトリガーとしてTwitterに投稿するワークフローを作成できます。

カスタムスクリプト: プログラミングやスクリプトの知識がある場合は、RSSフィードを監視し、新しいエントリがある場合にTwitterに投稿するカスタムスクリプトを作成することもできます。Pythonなどのプログラミング言語を使用して、フィードを解析し、Twitter APIを介してツイートを投稿する方法があります。

これらの方法の詳細な手順は、それぞれのサービスやツールのドキュメントやチュートリアルを参照してください。また、開発者にとってはTwitter APIを直接使用する方法もありますが、それには開発者アカウントの登録とAPIキーの取得が必要です。

ソーシャルゲームの作り方

ソーシャルゲームを作成するための基本的な手順を以下に示します。

ゲームのアイデアの構築: 最初に、どのようなゲームを作りたいのか、どのような要素や目標を持つかを明確にする必要があります。ゲームのジャンル、プレイヤーの目標、プレイの流れなどを考えます。

プラットフォームの選択: ゲームを提供するプラットフォームを選択します。モバイルデバイス向けのアプリケーション、Webブラウザ、ソーシャルメディアプラットフォームなど、利用者層や予算に応じて最適なプラットフォームを選びましょう。

開発環境のセットアップ: ゲームを開発するための環境を整えます。プログラミング言語やゲームエンジンの選択、必要なツールやリソースのインストールなどを行います。

ゲームデザインの作成: ゲームデザインの要素を詳細に定義します。キャラクター、レベルデザイン、ゲームプレイのルール、報酬システムなど、ゲームの仕組みを設計します。

プログラミングと開発: ゲームのプログラミングを始めます。選択したプログラミング言語やゲームエンジンを使用して、ゲームの基本的な機能を実装します。プレイヤーの操作、アイテムの管理、ゲーム内の進行などをプログラムします。

グラフィックとサウンドの作成: ゲームの見た目や音声効果を作成します。キャラクターデザイン、背景アート、アニメーション、効果音など、ゲームのビジュアルとオーディオ要素を開発します。

テストとデバッグ: ゲームのテストを行い、不具合やバグを修正します。実際にゲームをプレイして、プレイヤーの体験やパフォーマンスの問題を特定し、修正します。

リリースと運営: ゲームを公開するために、適切なストアやプラットフォームに申請します。ゲームのプロモーションやマーケティングも行い、ユーザーのフィードバックを収集しながら運営していきます。

これらの手順はゲーム開発の一般的なプロセスですが、実際の開発は非常に複雑で時間がかかる場合もあります。チームメンバーの役割分担やスケジュール管理も重要です。また、ゲーム開発にはプログラミングスキルやデザインスキルが必要ですので、必要なスキルを身につけることも重要です。

Django makemigrations No changes detected

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

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

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

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