Go to Qiita Advent Calendar 2024 Top
LoginSignup
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@qqn5192

htmlとjavascriptで簡単なtwitterのクローン的な何か（？）を作る

Last updated at Posted at 2024-09-27

はじめに

今回はhtmlとcssとjsを使ってtwitterのクローン（？）を書きます（外装だけです）

ファイル構成

今回は同じフォルダに、style.css, main.htmlを置きます

コピペ

以下のコードをコピペしましょう

main.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Twitter Clone</title>
  <link rel="stylesheet" href="style.css">
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="sidebar" style="height: 100vh;">
      <h2>メニュー</h2>
      <ul style="text-decoration: none;">
        <li><a href="#" id="home-link">ホーム</a></li>
        <li><a href="#" id="profile-link">プロフィール</a></li>
        <li><a href="#">通知</a></li>
        <li><a href="#" id="Settings">設定</a></li>
      </ul>
    </div>
  
    <div id="main-content">
      <h1>Twitter Clone</h1>
      <div id="tweetsSection">
        <form id="tweetForm">
          <input type="text" id="tweetInput" placeholder="What's happening?" required>
          <button type="submit">Tweet</button>
        </form>
        <div id="tweetsList"></div>
      </div>

      <div id="profileSection" hidden>
        <div class="profile-header">
          <h2>プロフィール</h2>
          <button id="editProfileButton">プロフィールを編集</button>
        </div>
        <div class="profile-info">
          <img src="profile-pic.jpeg" alt="プロフィール画像" class="profile-pic">
          <h3 id="profile-name">test</h3>
          <p id="profile-bio">テストです</p>
          <p><strong>フォロワー:</strong> 100 <strong>フォロー中:</strong> 50</p>
          <strong id="Profile-Tweets">Profile name's Tweet</strong>
          <div class="tweet">
            <img src="profile-pic.jpeg" style="border-radius: 100px; width: 25px; height: 25px;" alt=""><strong>test</strong>
            <p>test</p>
          </div>
        </div>
      </div>

      <div id="ProfileSetting" hidden>
        <div class="profile-info">
          <h1 style="color: black;">プロフィール編集</h1>
          <p>ユーザー名:</p>
          <input type="text" id="newname" style="width: 300px;margin-top: 10px">
          <p style="margin-top: 20px;" id="description">説明</p>
          <textarea id="newdescription" style="border-radius: 5px; resize: none; width: 300px; height: 70px; margin-top: 10px;"></textarea>
          <br>
          <button onclick="NewProfileData();" style="width: 120px !important; height: 30px !important; padding: 0 !important;margin-top: none !important; margin-top: 20px;">変更を適応</button>
          <a href="" style="width: 200px; text-align: center !important; margin-top: 20px;">アカウント情報などの変更はこちらから（工事中）</a>
        </div>
      </div>
    </div>

    <script>
      let DisplayName = "test_account";
      let description;
  const sampleTweets = [
      { id: 1, name: "testAccount", content: "こんにちは、みなさん！(Hello everyone)", likes: 10 },
      { id: 2, name: "test_desu", content: "Twitterクローンを作っています!", likes: 15 },
      { id: 3, name: "test", content: "基本機能終わりました！", likes: 8 },
      { id: 4, name: "tesutodayo!", content: "テストです!", likes: 20 }
    ];

    function updateProfile(newName, newdescription) {
      if(newName == "") {
        console.log('名前の変更をキャンセルしました')
        description.textContent = newdescription;
      } else {
        document.getElementById('profile-name').textContent = newName;
        document.getElementById('profile-bio').textContent = newdescription;
        document.getElementById('Profile-Tweets').textContent = newName+" 's Tweet";
      }
          document.getElementById('tweetsSection').hidden = true; // ツイートセクションを隠す
          document.getElementById('profileSection').hidden = false; // プロフィールセクションを表示
          document.getElementById('ProfileSetting').hidden = true; // プロフィール設定を隠す
          return newName;
    }
    // サンプルツイートを表示する関数
    function displayTweet(tweet) {
      const tweetElement = document.createElement('div');
      tweetElement.className = 'tweet'; // CSSのクラスを追加
      tweetElement.innerHTML = `
        <strong>${tweet.name}</strong>
        <p>${tweet.content}</p>
        <button class="like-btn" data-id="${tweet.id}">いいね (${tweet.likes})</button>
        <button style="background-color: white; padding: 0; color: black;">返信</button>
      
      `

      // 「いいね」ボタンのクリックイベントを設定
      const likeButton = tweetElement.querySelector('.like-btn');
      likeButton.addEventListener('click', () => {
        likeTweet(tweet.id, likeButton); // いいね機能を実行
      });

      document.getElementById('tweetsList').appendChild(tweetElement);
    }

    // いいね機能
    function likeTweet(tweetId, likeButton) {
      const tweet = sampleTweets.find(t => t.id === tweetId);
      if (tweet) {
        tweet.likes++; // いいね数を増やす
        likeButton.textContent = `いいね (${tweet.likes})`; // ボタン表示を更新
      }
    }

    // サンプルツイートをロード
    window.onload = function() {
     updateProfile('test_account', "テスト垢です")
      sampleTweets.forEach(tweet => {
        displayTweet(tweet);
      });
    };
    function NewProfileData() {
     let Name = updateProfile(document.getElementById('newname').value, document.getElementById('newdescription').value);
      DisplayName = Name;
      
    }

    // 新しいツイートを投稿する機能
    document.getElementById('tweetForm').addEventListener('submit', function(event) {
      event.preventDefault(); // ページ再読み込みを防止

      const newTweetContent = tweetInput.value.trim();

      if (newTweetContent) {
        let newTweet = {}
          newTweet = {
            name: DisplayName,
            id: sampleTweets.length + 1, // IDをユニークにする
            content: newTweetContent,
            likes: 0
          };
        
        sampleTweets.unshift(newTweet); // 新しいツイートをリストの先頭に追加
        displayTweet(newTweet); // 画面に表示
        
        tweetInput.value = ''; // 入力欄をクリア
      }
    });

      // ページ切り替えの処理
      document.getElementById('home-link').addEventListener('click', function(event) {
          event.preventDefault(); // リンクのデフォルト動作を防止
          document.getElementById('tweetsSection').hidden = false; // ツイートセクションを表示
          document.getElementById('profileSection').hidden = true; // プロフィールセクションを隠す
          document.getElementById('ProfileSetting').hidden = true; // プロフィール設定を隠す
      });

      document.getElementById('profile-link').addEventListener('click', function(event) {
          event.preventDefault(); // リンクのデフォルト動作を防止
          document.getElementById('tweetsSection').hidden = true; // ツイートセクションを隠す
          document.getElementById('profileSection').hidden = false; // プロフィールセクションを表示
          document.getElementById('ProfileSetting').hidden = true; // プロフィール設定を隠す
      });

      // プロフィール編集ボタンの処理
      document.getElementById('editProfileButton').addEventListener('click', function() {
          document.getElementById('profileSection').hidden = true; // プロフィールセクションを隠す
          document.getElementById('ProfileSetting').hidden = false; // プロフィール設定を表示
      });
    </script>
</body>
</html>

css:

style.css
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
  }
  
  body {
    background-color: #e6ecf0;
    color: #14171a;
    font-size: 14px;
    line-height: 1.5;
    display: flex; /* フレックスボックスを使ってレイアウトを調整 */
  }
  
  #sidebar {
    width: 200px; /* サイドバーの幅 */
    margin: 0 auto;
    height: 100vh; /* サイドバーの高さを画面に合わせる */
    background-color: #f0f0f0; /* 背景色 */
    padding: 20px; /* 内側の余白 */
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); /* 影をつける */
    position: fixed; /* スクロールしても固定する */
  }
  
  #main-content {
    flex: 1; /* 残りのスペースを埋める */
    margin-left: 220px; /* サイドバーの幅を考慮して左に余白を作る */
    padding: 20px; /* 内側の余白 */
    display: flex;
    flex-direction: column; /* 縦に並べる */
    align-items: center; /* 中央に寄せる */
  }
  
  h1 {
    text-align: center;
    color: #1da1f2;
    margin: 20px 0;
  }
  
  #tweetForm {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
  }
  
  #tweetInput {
    width: 60%;
    padding: 10px;
    border: 2px solid #1da1f2;
    border-radius: 30px;
    font-size: 16px;
  }
  
  button {
    padding: 10px 20px;
    background-color: #1da1f2;
    color: white;
    border: none;
    border-radius: 30px;
    margin-left: 10px;
    cursor: pointer;
    font-size: 16px;
  }
  
  button:hover {
    background-color: #0d8bcd;
  }
  
  #tweetsList {
    max-width: 600px;
    margin: 0 auto; /* 中央寄せ */
  }
  
  .tweet {
    text-align: left;
    background-color: white;
    border: 1px solid #e1e8ed;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 8px; /* 角を丸くする */
    width: 100%; /* 幅を100%に */
    max-width: 600px; /* 最大幅を設定 */
  }
  
  .like-btn {
    background-color: transparent;
    border: none;
    color: #1da1f2;
    cursor: pointer;
    font-size: 14px;
    margin-top: 10px;
  }
  
  .like-btn:hover {
    text-decoration: underline;
  }
  
  /* プロフィールセクションのスタイル */
  #profile {
    margin-top: 20px; /* サイドバーとメインコンテンツの間にスペース */
  }
  
  .profile-header {
    display: flex;
    justify-content: space-between; /* ヘッダーの内容を両端に配置 */
    width: 100%; /* 幅を100%に */
  }
  
  .profile-info {
    background-color: #ffffff; /* 背景色 */
    padding: 20px; /* 内側の余白 */
    border-radius: 10px; /* 角を丸くする */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); /* 影をつける */
    margin-top: 10px; /* 上の余白 */
    text-align: center; /* 中央揃え */
    min-height: 100vh;
    min-width: 100vh;
    max-width: 100vh; /* 最大幅 */
    width: 100%; /* 幅を100%に */
  }
  
  .profile-pic {
    width: 100px; /* 画像の幅 */
    height: 100px; /* 画像の高さ */
    border-radius: 50%; /* 円形にする */
    margin-bottom: 15px; /* 下の余白 */
  }
  
  #profile-name {
    font-size: 1.5em; /* 名前のフォントサイズ */
    margin: 10px 0; /* 上下の余白 */
  }
  
  #profile-bio {
    font-size: 1em; /* バイオのフォントサイズ */
    color: #666; /* テキストの色 */
    margin-bottom: 15px; /* 下の余白 */
  }
  
  #follow-button {
    background-color: #007bff; /* ボタンの背景色 */
    color: white; /* テキストの色 */
    border: none; /* ボーダーを消す */
    border-radius: 5px; /* 角を丸くする */
    padding: 10px 15px; /* 内側の余白 */
    cursor: pointer; /* カーソルをポインタに */
    transition: background-color 0.3s; /* ホバー時のトランジション */
  }
  
  #follow-button:hover {
    background-color: #0056b3; /* ホバー時の背景色 */
  }
  
  /* メニューのリスト */
  ul {
    list-style-type: none; /* リストのスタイルを消す */
    padding: 0; /* パディングを消す */
  }
  
  ul li {
    margin: 10px 0; /* リスト項目の間隔 */
  }
  
  a {
    text-decoration: none; /* 下線を消す */
    color: #333; /* テキストの色 */
    display: block; /* リスト項目をブロックに */
    padding: 10px; /* 内側の余白 */
  }
  
  a:hover {
    background-color: #d1e8ff; /* ホバー時の背景色 */
  }

画像は好きな画像をjpegでダウンロードしてフォルダーに移動してください。（jpegじゃない場合は、img属性のsrc属性のファイルパスの拡張子をダウンロードしたファイルの拡張子に置き換えてください。）

最後に

今回はhtmlとcssを使ってtwitterのクローンを書きました。ちなみに今回もjavascriptとcssの修正などはGPTにやってもらいました
それではまたお会いしましょう！

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?