{"id":25433,"date":"2024-07-25T18:37:15","date_gmt":"2024-07-25T09:37:15","guid":{"rendered":"http:\/\/www.tyosuke20xx.com\/blog\/?p=25433"},"modified":"2024-07-25T18:37:18","modified_gmt":"2024-07-25T09:37:18","slug":"elder","status":"publish","type":"post","link":"http:\/\/www.tyosuke20xx.com\/blog\/?p=25433","title":{"rendered":"ELDER"},"content":{"rendered":"\n
<!DOCTYPE html>\n<html lang=\"ja\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>ELDER<\/title>\n<link href=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.5.2\/css\/bootstrap.min.css\" rel=\"stylesheet\">\n<link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/5.15.4\/css\/all.min.css\" rel=\"stylesheet\">\n<style>\n  body {\n    padding-top: 20px;\n    background-color: #f8f9fa;\n  }\n  .card {\n    margin-bottom: 20px;\n  }\n  .profile-img {\n    width: 50px;\n    height: 50px;\n    object-fit: cover;\n    border-radius: 50%;\n  }\n  .comment-section {\n    margin-top: 20px;\n  }\n  .navbar {\n    margin-bottom: 20px;\n  }\n  .form-error {\n    color: red;\n    font-size: 0.9em;\n  }\n<\/style>\n<\/head>\n<body>\n\n<nav class=\"navbar navbar-expand-lg navbar-light bg-light\">\n  <a class=\"navbar-brand\" href=\"#\">SNS<\/a>\n  <button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\"#navbarNav\" aria-controls=\"navbarNav\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\n    <span class=\"navbar-toggler-icon\"><\/span>\n  <\/button>\n  <div class=\"collapse navbar-collapse\" id=\"navbarNav\">\n    <ul class=\"navbar-nav ml-auto\">\n      <li class=\"nav-item\">\n        <a class=\"nav-link\" href=\"#\" onclick=\"showLoginForm()\">\u30ed\u30b0\u30a4\u30f3<\/a>\n      <\/li>\n      <li class=\"nav-item\">\n        <a class=\"nav-link\" href=\"#\" onclick=\"showRegisterForm()\">\u767b\u9332<\/a>\n      <\/li>\n      <li class=\"nav-item\">\n        <a class=\"nav-link\" href=\"#\" onclick=\"showProfile()\" style=\"display: none;\" id=\"navProfile\">\u30d7\u30ed\u30d5\u30a3\u30fc\u30eb<\/a>\n      <\/li>\n      <li class=\"nav-item\">\n        <a class=\"nav-link\" href=\"#\" onclick=\"logout()\" style=\"display: none;\" id=\"navLogout\">\u30ed\u30b0\u30a2\u30a6\u30c8<\/a>\n      <\/li>\n    <\/ul>\n  <\/div>\n<\/nav>\n\n<div class=\"container\">\n  <h1 class=\"text-center mb-4\">\u30bd\u30fc\u30b7\u30e3\u30eb\u30cd\u30c3\u30c8\u30ef\u30fc\u30ad\u30f3\u30b0\u30b5\u30fc\u30d3\u30b9<\/h1>\n\n  <!-- \u30ed\u30b0\u30a4\u30f3\u30d5\u30a9\u30fc\u30e0 -->\n  <div id=\"loginForm\" class=\"card w-50 mx-auto\">\n    <div class=\"card-body\">\n      <h2 class=\"card-title text-center mb-4\">\u30ed\u30b0\u30a4\u30f3<\/h2>\n      <div class=\"form-group\">\n        <input type=\"text\" id=\"loginUsername\" class=\"form-control\" placeholder=\"\u30e6\u30fc\u30b6\u30fc\u540d\">\n        <span id=\"loginUsernameError\" class=\"form-error\" style=\"display: none;\">\u30e6\u30fc\u30b6\u30fc\u540d\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044<\/span>\n      <\/div>\n      <div class=\"form-group\">\n        <input type=\"password\" id=\"loginPassword\" class=\"form-control\" placeholder=\"\u30d1\u30b9\u30ef\u30fc\u30c9\">\n        <span id=\"loginPasswordError\" class=\"form-error\" style=\"display: none;\">\u30d1\u30b9\u30ef\u30fc\u30c9\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044<\/span>\n      <\/div>\n      <button onclick=\"login()\" class=\"btn btn-primary btn-block\">\u30ed\u30b0\u30a4\u30f3<\/button>\n      <button onclick=\"showRegisterForm()\" class=\"btn btn-secondary btn-block\">\u767b\u9332<\/button>\n    <\/div>\n  <\/div>\n\n  <!-- \u767b\u9332\u30d5\u30a9\u30fc\u30e0 -->\n  <div id=\"registerForm\" class=\"card w-50 mx-auto\" style=\"display: none;\">\n    <div class=\"card-body\">\n      <h2 class=\"card-title text-center mb-4\">\u767b\u9332<\/h2>\n      <div class=\"form-group\">\n        <input type=\"text\" id=\"registerName\" class=\"form-control\" placeholder=\"\u6c0f\u540d\">\n        <span id=\"registerNameError\" class=\"form-error\" style=\"display: none;\">\u6c0f\u540d\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044<\/span>\n      <\/div>\n      <div class=\"form-group\">\n        <input type=\"text\" id=\"registerUsername\" class=\"form-control\" placeholder=\"\u30e6\u30fc\u30b6\u30fc\u540d\">\n        <span id=\"registerUsernameError\" class=\"form-error\" style=\"display: none;\">\u30e6\u30fc\u30b6\u30fc\u540d\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044<\/span>\n      <\/div>\n      <div class=\"form-group\">\n        <input type=\"password\" id=\"registerPassword\" class=\"form-control\" placeholder=\"\u30d1\u30b9\u30ef\u30fc\u30c9\">\n        <span id=\"registerPasswordError\" class=\"form-error\" style=\"display: none;\">\u30d1\u30b9\u30ef\u30fc\u30c9\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044<\/span>\n      <\/div>\n      <div class=\"form-group\">\n        <input type=\"password\" id=\"registerConfirmPassword\" class=\"form-control\" placeholder=\"\u30d1\u30b9\u30ef\u30fc\u30c9\u3092\u78ba\u8a8d\">\n        <span id=\"registerConfirmPasswordError\" class=\"form-error\" style=\"display: none;\">\u30d1\u30b9\u30ef\u30fc\u30c9\u304c\u4e00\u81f4\u3057\u307e\u305b\u3093<\/span>\n      <\/div>\n      <button onclick=\"register()\" class=\"btn btn-primary btn-block\">\u767b\u9332<\/button>\n      <button onclick=\"showLoginForm()\" class=\"btn btn-secondary btn-block\">\u30ed\u30b0\u30a4\u30f3\u306b\u623b\u308b<\/button>\n    <\/div>\n  <\/div>\n\n  <!-- \u30d7\u30ed\u30d5\u30a3\u30fc\u30eb -->\n  <div id=\"profile\" class=\"card w-50 mx-auto\" style=\"display: none;\">\n    <div class=\"card-body\">\n      <h2 class=\"card-title text-center mb-4\">\u30d7\u30ed\u30d5\u30a3\u30fc\u30eb<\/h2>\n      <div class=\"text-center mb-3\">\n        <img id=\"profileImg\" class=\"profile-img\" src=\"default_profile_img.jpg\" alt=\"\u30d7\u30ed\u30d5\u30a3\u30fc\u30eb\u753b\u50cf\">\n      <\/div>\n      <p class=\"text-center mb-2\"><strong>\u6c0f\u540d:<\/strong> <span id=\"profileName\"><\/span><\/p>\n      <p class=\"text-center mb-4\"><strong>\u30e6\u30fc\u30b6\u30fc\u540d:<\/strong> <span id=\"profileUsername\"><\/span><\/p>\n      <div class=\"form-group\">\n        <input type=\"file\" id=\"profileImageInput\" accept=\"image\/*\" class=\"form-control-file\">\n      <\/div>\n      <button onclick=\"uploadProfileImage()\" class=\"btn btn-primary btn-block\"><i class=\"fas fa-upload\"><\/i> \u30d7\u30ed\u30d5\u30a3\u30fc\u30eb\u753b\u50cf\u3092\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9<\/button>\n      <button id=\"followButton\" onclick=\"toggleFollow()\" class=\"btn btn-primary btn-block\"><\/button>\n      <button id=\"messageButton\" onclick=\"openDirectMessageModal()\" class=\"btn btn-primary btn-block\">\u30c0\u30a4\u30ec\u30af\u30c8\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u9001\u4fe1<\/button>\n      <button onclick=\"logout()\" class=\"btn btn-danger btn-block\"><i class=\"fas fa-sign-out-alt\"><\/i> \u30ed\u30b0\u30a2\u30a6\u30c8<\/button>\n    <\/div>\n  <\/div>\n\n  <!-- \u6295\u7a3f\u30d5\u30a9\u30fc\u30e0 -->\n  <div id=\"postForm\" class=\"card w-75 mx-auto\" style=\"display: none;\">\n    <div class=\"card-body\">\n      <h2 class=\"card-title text-center mb-4\">\u6295\u7a3f\u3092\u4f5c\u6210<\/h2>\n      <div class=\"form-group\">\n        <textarea id=\"postContent\" class=\"form-control\" rows=\"3\" placeholder=\"\u4eca\u4f55\u3092\u8003\u3048\u3066\u3044\u307e\u3059\u304b\uff1f\"><\/textarea>\n      <\/div>\n      <button onclick=\"createPost()\" class=\"btn btn-primary btn-block\">\u6295\u7a3f<\/button>\n    <\/div>\n  <\/div>\n\n  <!-- FEED\u767b\u9332\u30d5\u30a9\u30fc\u30e0 -->\n  <div id=\"feedForm\" class=\"card w-75 mx-auto\" style=\"display: none;\">\n    <div class=\"card-body\">\n      <h2 class=\"card-title text-center mb-4\">FEED\u3092\u767b\u9332<\/h2>\n      <div class=\"form-group\">\n        <input type=\"text\" id=\"feedUrl\" class=\"form-control\" placeholder=\"RSS\u30d5\u30a3\u30fc\u30c9\u306eURL\">\n        <span id=\"feedUrlError\" class=\"form-error\" style=\"display: none;\">RSS\u30d5\u30a3\u30fc\u30c9\u306eURL\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044<\/span>\n      <\/div>\n      <button onclick=\"registerFeed()\" class=\"btn btn-primary btn-block\">\u767b\u9332<\/button>\n    <\/div>\n  <\/div>\n\n  <!-- \u30bf\u30a4\u30e0\u30e9\u30a4\u30f3 -->\n  <div id=\"timeline\" class=\"w-75 mx-auto mt-4\"><\/div>\n<\/div>\n\n<!-- \u30ea\u30d7\u30e9\u30a4\u30e2\u30fc\u30c0\u30eb -->\n<div class=\"modal fade\" id=\"replyModal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"replyModalLabel\" aria-hidden=\"true\">\n  <div class=\"modal-dialog\" role=\"document\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header\">\n        <h5 class=\"modal-title\" id=\"replyModalLabel\">\u6295\u7a3f\u306b\u8fd4\u4fe1<\/h5>\n        <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"\u9589\u3058\u308b\">\n          <span aria-hidden=\"true\">&times;<\/span>\n        <\/button>\n      <\/div>\n      <div class=\"modal-body\">\n        <textarea id=\"replyContent\" class=\"form-control\" rows=\"3\" placeholder=\"\u8fd4\u4fe1\u3092\u3053\u3053\u306b\u66f8\u3044\u3066\u304f\u3060\u3055\u3044...\"><\/textarea>\n      <\/div>\n      <div class=\"modal-footer\">\n        <button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\">\u9589\u3058\u308b<\/button>\n        <button type=\"button\" onclick=\"postReply()\" class=\"btn btn-primary\">\u8fd4\u4fe1<\/button>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<!-- \u30c0\u30a4\u30ec\u30af\u30c8\u30e1\u30c3\u30bb\u30fc\u30b8\u30e2\u30fc\u30c0\u30eb -->\n<div class=\"modal fade\" id=\"directMessageModal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"directMessageModalLabel\" aria-hidden=\"true\">\n  <div class=\"modal-dialog\" role=\"document\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header\">\n        <h5 class=\"modal-title\" id=\"directMessageModalLabel\">\u30c0\u30a4\u30ec\u30af\u30c8\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u9001\u4fe1<\/h5>\n        <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"\u9589\u3058\u308b\">\n          <span aria-hidden=\"true\">&times;<\/span>\n        <\/button>\n      <\/div>\n      <div class=\"modal-body\">\n        <select id=\"recipient\" class=\"form-control\">\n          <option value=\"\">\u9001\u4fe1\u5148\u3092\u9078\u629e<\/option>\n          <!-- \u30e6\u30fc\u30b6\u30fc\u30ea\u30b9\u30c8\u304c\u3053\u3053\u306b\u8ffd\u52a0\u3055\u308c\u308b -->\n        <\/select>\n        <textarea id=\"directMessageContent\" class=\"form-control mt-2\" rows=\"3\" placeholder=\"\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u3053\u3053\u306b\u66f8\u3044\u3066\u304f\u3060\u3055\u3044...\"><\/textarea>\n      <\/div>\n      <div class=\"modal-footer\">\n        <button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\">\u9589\u3058\u308b<\/button>\n        <button type=\"button\" onclick=\"sendDirectMessage()\" class=\"btn btn-primary\">\u9001\u4fe1<\/button>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/code.jquery.com\/jquery-3.5.1.slim.min.js\"><\/script>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@popperjs\/core@2.5.4\/dist\/umd\/popper.min.js\"><\/script>\n<script src=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.5.2\/js\/bootstrap.min.js\"><\/script>\n<script>\n  let currentUser = null; \/\/ \u73fe\u5728\u306e\u30ed\u30b0\u30a4\u30f3\u30e6\u30fc\u30b6\u30fc\n  let users = []; \/\/ \u30e6\u30fc\u30b6\u30fc\u306e\u914d\u5217\n  let posts = []; \/\/ \u6295\u7a3f\u306e\u914d\u5217\n  let feeds = []; \/\/ \u30d5\u30a3\u30fc\u30c9\u306e\u914d\u5217\n\n  \/\/ \u30ed\u30fc\u30ab\u30eb\u30b9\u30c8\u30ec\u30fc\u30b8\u306b\u30e6\u30fc\u30b6\u30fc\u60c5\u5831\u3092\u4fdd\u5b58\n  function saveUsersToLocalStorage() {\n    localStorage.setItem('users', JSON.stringify(users));\n  }\n\n  \/\/ \u30ed\u30fc\u30ab\u30eb\u30b9\u30c8\u30ec\u30fc\u30b8\u306b\u6295\u7a3f\u60c5\u5831\u3092\u4fdd\u5b58\n  function savePostsToLocalStorage() {\n    localStorage.setItem('posts', JSON.stringify(posts));\n  }\n\n  \/\/ \u30ed\u30fc\u30ab\u30eb\u30b9\u30c8\u30ec\u30fc\u30b8\u306b\u30d5\u30a3\u30fc\u30c9\u60c5\u5831\u3092\u4fdd\u5b58\n  function saveFeedsToLocalStorage() {\n    localStorage.setItem('feeds', JSON.stringify(feeds));\n  }\n\n  \/\/ \u30ed\u30fc\u30ab\u30eb\u30b9\u30c8\u30ec\u30fc\u30b8\u304b\u3089\u30e6\u30fc\u30b6\u30fc\u60c5\u5831\u3092\u8aad\u307f\u8fbc\u307f\n  function loadUsersFromLocalStorage() {\n    const storedUsers = localStorage.getItem('users');\n    if (storedUsers) {\n      users = JSON.parse(storedUsers);\n    }\n  }\n\n  \/\/ \u30ed\u30fc\u30ab\u30eb\u30b9\u30c8\u30ec\u30fc\u30b8\u304b\u3089\u6295\u7a3f\u60c5\u5831\u3092\u8aad\u307f\u8fbc\u307f\n  function loadPostsFromLocalStorage() {\n    const storedPosts = localStorage.getItem('posts');\n    if (storedPosts) {\n      posts = JSON.parse(storedPosts);\n    }\n  }\n\n  \/\/ \u30ed\u30fc\u30ab\u30eb\u30b9\u30c8\u30ec\u30fc\u30b8\u304b\u3089\u30d5\u30a3\u30fc\u30c9\u60c5\u5831\u3092\u8aad\u307f\u8fbc\u307f\n  function loadFeedsFromLocalStorage() {\n    const storedFeeds = localStorage.getItem('feeds');\n    if (storedFeeds) {\n      feeds = JSON.parse(storedFeeds);\n    }\n  }\n\n  function showLoginForm() {\n    hideAll();\n    document.getElementById('loginForm').style.display = 'block';\n  }\n\n  function showRegisterForm() {\n    hideAll();\n    document.getElementById('registerForm').style.display = 'block';\n  }\n\n  function validateLoginForm() {\n    let valid = true;\n    const username = document.getElementById('loginUsername').value;\n    const password = document.getElementById('loginPassword').value;\n    \n    if (!username) {\n      document.getElementById('loginUsernameError').style.display = 'block';\n      valid = false;\n    } else {\n      document.getElementById('loginUsernameError').style.display = 'none';\n    }\n    \n    if (!password) {\n      document.getElementById('loginPasswordError').style.display = 'block';\n      valid = false;\n    } else {\n      document.getElementById('loginPasswordError').style.display = 'none';\n    }\n    \n    return valid;\n  }\n\n  function login() {\n    if (!validateLoginForm()) {\n      return;\n    }\n\n    const username = document.getElementById('loginUsername').value;\n    const password = document.getElementById('loginPassword').value;\n    const user = users.find(u => u.username === username && u.password === password);\n    if (user) {\n      currentUser = user;\n      showProfile();\n    } else {\n      alert('\u30e6\u30fc\u30b6\u30fc\u540d\u307e\u305f\u306f\u30d1\u30b9\u30ef\u30fc\u30c9\u304c\u9593\u9055\u3063\u3066\u3044\u307e\u3059\u3002');\n    }\n  }\n\n  function logout() {\n    currentUser = null;\n    hideAll();\n    document.getElementById('loginForm').style.display = 'block';\n    document.getElementById('navProfile').style.display = 'none';\n    document.getElementById('navLogout').style.display = 'none';\n  }\n\n  function validateRegisterForm() {\n    let valid = true;\n    const name = document.getElementById('registerName').value;\n    const username = document.getElementById('registerUsername').value;\n    const password = document.getElementById('registerPassword').value;\n    const confirmPassword = document.getElementById('registerConfirmPassword').value;\n    \n    if (!name) {\n      document.getElementById('registerNameError').style.display = 'block';\n      valid = false;\n    } else {\n      document.getElementById('registerNameError').style.display = 'none';\n    }\n    \n    if (!username) {\n      document.getElementById('registerUsernameError').style.display = 'block';\n      valid = false;\n    } else {\n      document.getElementById('registerUsernameError').style.display = 'none';\n    }\n    \n    if (!password) {\n      document.getElementById('registerPasswordError').style.display = 'block';\n      valid = false;\n    } else {\n      document.getElementById('registerPasswordError').style.display = 'none';\n    }\n    \n    if (password !== confirmPassword) {\n      document.getElementById('registerConfirmPasswordError').style.display = 'block';\n      valid = false;\n    } else {\n      document.getElementById('registerConfirmPasswordError').style.display = 'none';\n    }\n    \n    return valid;\n  }\n\n  function register() {\n    if (!validateRegisterForm()) {\n      return;\n    }\n\n    const name = document.getElementById('registerName').value;\n    const username = document.getElementById('registerUsername').value;\n    const password = document.getElementById('registerPassword').value;\n\n    users.push({ name, username, password, following: false });\n    saveUsersToLocalStorage(); \/\/ \u30e6\u30fc\u30b6\u30fc\u60c5\u5831\u3092\u4fdd\u5b58\n    alert('\u767b\u9332\u304c\u5b8c\u4e86\u3057\u307e\u3057\u305f\uff01\u30ed\u30b0\u30a4\u30f3\u3057\u3066\u304f\u3060\u3055\u3044\u3002');\n    showLoginForm();\n  }\n\n  function showProfile() {\n    hideAll();\n    document.getElementById('profile').style.display = 'block';\n    document.getElementById('profileName').textContent = currentUser.name;\n    document.getElementById('profileUsername').textContent = currentUser.username;\n    document.getElementById('postForm').style.display = 'block';\n    document.getElementById('feedForm').style.display = 'block';\n    loadProfileImage(); \/\/ \u30d7\u30ed\u30d5\u30a3\u30fc\u30eb\u753b\u50cf\u3092\u30ed\u30fc\u30c9\n    displayTimeline(); \/\/ \u30bf\u30a4\u30e0\u30e9\u30a4\u30f3\u3092\u8868\u793a\n    updateFollowButton(); \/\/ \u30d5\u30a9\u30ed\u30fc\u30dc\u30bf\u30f3\u306e\u8868\u793a\u3092\u66f4\u65b0\n    loadDirectMessageRecipients(); \/\/ \u30c0\u30a4\u30ec\u30af\u30c8\u30e1\u30c3\u30bb\u30fc\u30b8\u306e\u9001\u4fe1\u5148\u3092\u30ed\u30fc\u30c9\n    document.getElementById('navProfile').style.display = 'block';\n    document.getElementById('navLogout').style.display = 'block';\n  }\n\n  \/\/ \u30d7\u30ed\u30d5\u30a3\u30fc\u30eb\u753b\u50cf\u3092\u30ed\u30fc\u30c9\n  function loadProfileImage() {\n    const profileImg = document.getElementById('profileImg');\n    \/\/ \u30d7\u30ed\u30d5\u30a3\u30fc\u30eb\u753b\u50cf\u304c\u8a2d\u5b9a\u3055\u308c\u3066\u3044\u308b\u5834\u5408\u306f\u305d\u306e\u753b\u50cf\u3092\u8868\u793a\n    if (currentUser.profileImage) {\n      profileImg.src = currentUser.profileImage;\n    } else {\n      \/\/ \u30c7\u30d5\u30a9\u30eb\u30c8\u306e\u30d7\u30ed\u30d5\u30a3\u30fc\u30eb\u753b\u50cf\u3092\u8868\u793a\n      profileImg.src = 'default_profile_img.jpg';\n    }\n  }\n\n  \/\/ \u30d7\u30ed\u30d5\u30a3\u30fc\u30eb\u753b\u50cf\u3092\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\n  function uploadProfileImage() {\n    const input = document.getElementById('profileImageInput');\n    const file = input.files[0];\n    if (file) {\n      \/\/ FileReader\u3092\u4f7f\u7528\u3057\u3066\u753b\u50cf\u3092\u8aad\u307f\u8fbc\u3080\n      const reader = new FileReader();\n      reader.onload = function(e) {\n        \/\/ \u8aad\u307f\u8fbc\u3093\u3060\u753b\u50cf\u3092\u30d7\u30ed\u30d5\u30a3\u30fc\u30eb\u753b\u50cf\u3068\u3057\u3066\u8a2d\u5b9a\n        currentUser.profileImage = e.target.result;\n        \/\/ \u30d7\u30ed\u30d5\u30a3\u30fc\u30eb\u753b\u50cf\u3092\u66f4\u65b0\u3057\u3066\u8868\u793a\n        loadProfileImage();\n        saveUsersToLocalStorage(); \/\/ \u30d7\u30ed\u30d5\u30a3\u30fc\u30eb\u753b\u50cf\u3092\u4fdd\u5b58\n      }\n      reader.readAsDataURL(file);\n    }\n  }\n\n  \/\/ \u30d5\u30a9\u30ed\u30fc\u30dc\u30bf\u30f3\u306e\u66f4\u65b0\n  function updateFollowButton() {\n    const followButton = document.getElementById('followButton');\n    if (currentUser.following) {\n      followButton.textContent = '\u30d5\u30a9\u30ed\u30fc\u89e3\u9664';\n    } else {\n      followButton.textContent = '\u30d5\u30a9\u30ed\u30fc';\n    }\n    saveUsersToLocalStorage(); \/\/ \u30d5\u30a9\u30ed\u30fc\u72b6\u614b\u3092\u4fdd\u5b58\n  }\n\n  \/\/ \u30d5\u30a9\u30ed\u30fc\u306e\u5207\u308a\u66ff\u3048\n  function toggleFollow() {\n    currentUser.following = !currentUser.following;\n    updateFollowButton();\n  }\n\n  \/\/ \u30c0\u30a4\u30ec\u30af\u30c8\u30e1\u30c3\u30bb\u30fc\u30b8\u306e\u9001\u4fe1\u5148\u3092\u30ed\u30fc\u30c9\n  function loadDirectMessageRecipients() {\n    const select = document.getElementById('recipient');\n    select.innerHTML = '<option value=\"\">\u9001\u4fe1\u5148\u3092\u9078\u629e<\/option>';\n    users.forEach(user => {\n      if (user !== currentUser) {\n        const option = document.createElement('option');\n        option.value = user.username;\n        option.textContent = user.name;\n        select.appendChild(option);\n      }\n    });\n  }\n\n  \/\/ \u30c0\u30a4\u30ec\u30af\u30c8\u30e1\u30c3\u30bb\u30fc\u30b8\u306e\u30e2\u30fc\u30c0\u30eb\u3092\u958b\u304f\n  function openDirectMessageModal() {\n    $('#directMessageModal').modal('show');\n  }\n\n  \/\/ \u30c0\u30a4\u30ec\u30af\u30c8\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u9001\u4fe1\n  function sendDirectMessage() {\n    const recipientUsername = document.getElementById('recipient').value;\n    const messageContent = document.getElementById('directMessageContent').value;\n    if (recipientUsername && messageContent.trim() !== '') {\n      const recipient = users.find(user => user.username === recipientUsername);\n      if (recipient) {\n        alert(`\u30e1\u30c3\u30bb\u30fc\u30b8\u3092${recipient.name}\u306b\u9001\u4fe1\u3057\u307e\u3057\u305f: ${messageContent}`);\n        $('#directMessageModal').modal('hide');\n      } else {\n        alert('\u9001\u4fe1\u5148\u304c\u898b\u3064\u304b\u308a\u307e\u305b\u3093\u3002');\n      }\n    } else {\n      alert('\u9001\u4fe1\u5148\u3092\u9078\u629e\u3057\u3001\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\u3002');\n    }\n  }\n\n  function createPost() {\n    const postContent = document.getElementById('postContent').value;\n    if (postContent.trim() !== '') {\n      const post = {\n        id: Date.now(),\n        content: postContent,\n        author: currentUser.name,\n        authorUsername: currentUser.username,\n        authorProfileImage: currentUser.profileImage, \/\/ \u30d7\u30ed\u30d5\u30a3\u30fc\u30eb\u753b\u50cf\u3092\u8ffd\u52a0\n        likes: 0,\n        comments: []\n      };\n      posts.unshift(post); \/\/ \u6700\u65b0\u306e\u6295\u7a3f\u3092\u5148\u982d\u306b\u8ffd\u52a0\n      savePostsToLocalStorage(); \/\/ \u6295\u7a3f\u3092\u4fdd\u5b58\n      displayTimeline();\n      document.getElementById('postContent').value = ''; \/\/ \u6295\u7a3f\u5f8c\u3001\u5165\u529b\u6b04\u3092\u7a7a\u306b\u3059\u308b\n    }\n  }\n\n  function registerFeed() {\n    const feedUrl = document.getElementById('feedUrl').value;\n    if (feedUrl.trim() !== '') {\n      feeds.push(feedUrl);\n      saveFeedsToLocalStorage(); \/\/ \u30d5\u30a3\u30fc\u30c9\u60c5\u5831\u3092\u4fdd\u5b58\n      alert('RSS\u30d5\u30a3\u30fc\u30c9\u304c\u767b\u9332\u3055\u308c\u307e\u3057\u305f\uff01');\n      document.getElementById('feedUrl').value = ''; \/\/ \u767b\u9332\u5f8c\u3001\u5165\u529b\u6b04\u3092\u7a7a\u306b\u3059\u308b\n    } else {\n      document.getElementById('feedUrlError').style.display = 'block';\n    }\n  }\n\n  function displayTimeline() {\n    const timeline = document.getElementById('timeline');\n    timeline.innerHTML = '';\n    posts.forEach(post => {\n      const postElement = document.createElement('div');\n      postElement.classList.add('card', 'mb-3');\n      postElement.innerHTML = `\n        <div class=\"card-body\">\n          <div class=\"d-flex align-items-center mb-3\">\n            <img src=\"${post.authorProfileImage || 'default_profile_img.jpg'}\" class=\"profile-img mr-2\" alt=\"\u30d7\u30ed\u30d5\u30a3\u30fc\u30eb\u753b\u50cf\">\n            <div>\n              <strong>${post.author}<\/strong> (@${post.authorUsername})\n            <\/div>\n          <\/div>\n          <p class=\"card-text\">${post.content}<\/p>\n          ${post.link ? `<a href=\"${post.link}\" target=\"_blank\" class=\"btn btn-link\">\u7d9a\u304d\u3092\u8aad\u3080<\/a>` : ''}\n          <div class=\"d-flex justify-content-between\">\n            <div>\n              <button onclick=\"likePost(${post.id})\" class=\"btn btn-primary btn-sm\"><i class=\"fas fa-thumbs-up\"><\/i> \u3044\u3044\u306d (${post.likes})<\/button>\n              <button onclick=\"toggleComments(${post.id})\" class=\"btn btn-secondary btn-sm\"><i class=\"fas fa-comments\"><\/i> \u30b3\u30e1\u30f3\u30c8 (${post.comments.length})<\/button>\n              <button onclick=\"replyToPost(${post.id})\" class=\"btn btn-info btn-sm\"><i class=\"fas fa-reply\"><\/i> \u8fd4\u4fe1<\/button>\n            <\/div>\n            <small class=\"text-muted\">${new Date(post.id).toLocaleString()}<\/small>\n          <\/div>\n          <div id=\"comments-${post.id}\" class=\"comment-section mt-3\" style=\"display: none;\">\n            ${post.comments.map(comment => `\n              <div class=\"card mb-2\">\n                <div class=\"card-body\">\n                  <p><strong>${comment.author}<\/strong>: ${comment.content}<\/p>\n                <\/div>\n              <\/div>\n            `).join('')}\n          <\/div>\n        <\/div>\n      `;\n      timeline.appendChild(postElement);\n    });\n  }\n\n  function likePost(postId) {\n    const post = posts.find(p => p.id === postId);\n    post.likes++;\n    savePostsToLocalStorage(); \/\/ \u3044\u3044\u306d\u3092\u4fdd\u5b58\n    displayTimeline();\n  }\n\n  function toggleComments(postId) {\n    const commentSection = document.getElementById(`comments-${postId}`);\n    commentSection.style.display = commentSection.style.display === 'none' ? 'block' : 'none';\n  }\n\n  function replyToPost(postId) {\n    const modal = document.getElementById('replyModal');\n    modal.dataset.postId = postId;\n    $('#replyModal').modal('show');\n  }\n\n  function postReply() {\n    const postId = parseInt(document.getElementById('replyModal').dataset.postId);\n    const post = posts.find(p => p.id === postId);\n    const replyContent = document.getElementById('replyContent').value;\n    if (replyContent.trim() !== '') {\n      post.comments.push({ author: currentUser.name, content: replyContent });\n      $('#replyModal').modal('hide');\n      savePostsToLocalStorage(); \/\/ \u30b3\u30e1\u30f3\u30c8\u3092\u4fdd\u5b58\n      displayTimeline();\n    } else {\n      alert('\u8fd4\u4fe1\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\u3002');\n    }\n  }\n\n  function fetchFeeds() {\n    feeds.forEach(feedUrl => {\n      fetch(`https:\/\/api.rss2json.com\/v1\/api.json?rss_url=${encodeURIComponent(feedUrl)}`)\n        .then(response => response.json())\n        .then(data => {\n          data.items.forEach(item => {\n            const post = {\n              id: Date.now() + Math.random(), \/\/ \u91cd\u8907\u3057\u306a\u3044ID\u3092\u751f\u6210\n              content: item.title,\n              link: item.link, \/\/ \u30ea\u30f3\u30af\u3092\u8ffd\u52a0\n              author: 'RSS\u30d5\u30a3\u30fc\u30c9',\n              authorUsername: 'rssfeed',\n              authorProfileImage: 'default_profile_img.jpg', \/\/ \u30d7\u30ed\u30d5\u30a3\u30fc\u30eb\u753b\u50cf\u3092\u8a2d\u5b9a\n              likes: 0,\n              comments: []\n            };\n            posts.unshift(post); \/\/ \u6700\u65b0\u306e\u6295\u7a3f\u3092\u5148\u982d\u306b\u8ffd\u52a0\n            savePostsToLocalStorage(); \/\/ \u6295\u7a3f\u3092\u4fdd\u5b58\n          });\n          displayTimeline(); \/\/ \u30bf\u30a4\u30e0\u30e9\u30a4\u30f3\u3092\u8868\u793a\n        })\n        .catch(error => console.error('Error fetching RSS feed:', error));\n    });\n  }\n\n  function hideAll() {\n    document.getElementById('loginForm').style.display = 'none';\n    document.getElementById('registerForm').style.display = 'none';\n    document.getElementById('profile').style.display = 'none';\n    document.getElementById('postForm').style.display = 'none';\n    document.getElementById('feedForm').style.display = 'none';\n  }\n\n  \/\/ \u521d\u671f\u30c7\u30fc\u30bf\u3092\u30ed\u30fc\u30ab\u30eb\u30b9\u30c8\u30ec\u30fc\u30b8\u304b\u3089\u8aad\u307f\u8fbc\u3080\n  loadUsersFromLocalStorage();\n  loadPostsFromLocalStorage();\n  loadFeedsFromLocalStorage();\n\n  \/\/ \u521d\u671f\u30ed\u30b0\u30a4\u30f3\u753b\u9762\u8868\u793a\n  hideAll();\n  document.getElementById('loginForm').style.display = 'block';\n\n  \/\/ 1\u6642\u9593\u3054\u3068\u306bRSS\u30d5\u30a3\u30fc\u30c9\u3092\u30d5\u30a7\u30c3\u30c1\u3057\u3066\u81ea\u52d5\u6295\u7a3f\n  setInterval(fetchFeeds, 5); \/\/ 3600000\u30df\u30ea\u79d2 = 1\u6642\u9593\n\n<\/script>\n\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
RSS\u306e\u6a5f\u80fd\u3092\u4f7f\u3048\u308b\u3088\u3046\u306b\u3057\u307e\u3057\u305f<\/p>\n","protected":false},"excerpt":{"rendered":"
RSS\u306e\u6a5f\u80fd\u3092\u4f7f\u3048\u308b\u3088\u3046\u306b\u3057\u307e\u3057\u305f<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[80,4,6],"tags":[3],"class_list":["post-25433","post","type-post","status-publish","format-standard","hentry","category-html","category-programming","category-web","tag-programming"],"aioseo_notices":[],"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25433","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=25433"}],"version-history":[{"count":1,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25433\/revisions"}],"predecessor-version":[{"id":25434,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25433\/revisions\/25434"}],"wp:attachment":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=25433"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=25433"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=25433"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}