1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <span class="pun"><?</span><span class="pln">php</span><span class="kwd">class</span><span class="pln"> </span><span class="typ">User</span><span class="pln"></span><span class="pun">{</span><span class="pln"> </span><span class="kwd">public</span><span class="pln"> $name</span><span class="pun">;</span><span class="pln"> </span><span class="kwd">public</span><span class="pln"> $score</span><span class="pun">;</span><span class="pln"> </span><span class="kwd">public</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> __construct</span><span class="pun">(</span><span class="pln">$name</span><span class="pun">,</span><span class="pln"> $score</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> $this</span><span class="pun">-></span><span class="pln">name </span><span class="pun">=</span><span class="pln"> $name</span><span class="pun">;</span><span class="pln"> $this</span><span class="pun">-></span><span class="pln">score </span><span class="pun">=</span><span class="pln"> $score</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">public</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> getInfo</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">return</span><span class="pln"> </span><span class="str">"{$this->name}, {$this->score}"</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"></span><span class="pun">}</span><span class="pln">$user1 </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">User</span><span class="pun">(</span><span class="str">"Taro"</span><span class="pun">,</span><span class="pln"> </span><span class="lit">70</span><span class="pun">);</span><span class="pln">$user2 </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">User</span><span class="pun">(</span><span class="str">"Jiro"</span><span class="pun">,</span><span class="pln"> </span><span class="lit">90</span><span class="pun">);</span><span class="pln">$user1</span><span class="pun">-></span><span class="pln">score </span><span class="pun">=</span><span class="pln"> </span><span class="lit">900</span><span class="pun">;</span><span class="pln">echo $user1</span><span class="pun">-></span><span class="pln">getInfo</span><span class="pun">()</span><span class="pln"> </span><span class="pun">.</span><span class="pln"> PHP_EOL</span><span class="pun">;</span><span class="pln">echo $user2</span><span class="pun">-></span><span class="pln">getInfo</span><span class="pun">()</span><span class="pln"> </span><span class="pun">.</span><span class="pln"> PHP_EOL</span><span class="pun">;</span> |
月: 2024年10月
企画書：「テイルズオブゴッド」〜神を目指すカインの物語〜
企画書：「テイルズオブゴッド」〜神を目指すカインの物語〜
- タイトル
テイルズオブゴッド
〜神を目指すカインの旅〜 - ジャンル
ファンタジー・アクションRPG - ターゲット層
・ファンタジーや神話の物語が好きなプレイヤー
・深いストーリーとキャラクター成長を楽しみたいRPGファン
・過去の「テイルズオブ」シリーズを愛するファン - コンセプト
神に近づくことで、絶対的な力を手にすることができる。人間の枠を超えることを望む者もいれば、神を討ち破ろうとする者もいる。カインは、両親カイルとリアラの影響を受け、神への道を模索しつつ、人間性を維持する葛藤を抱えて成長していく。神に近づく過程での選択や試練を通じ、善悪を超えた力と責任についての理解を深める旅。 - ストーリー概要
プロローグ
魔王との戦いが終わり、平和を取り戻した世界で、カインは平凡に育つ。しかし、ある日、彼の内に秘められた特別な力が覚醒し、「神」に近づくための試練の存在を知ることになる。
「神になること」が自らの運命と信じて疑わないカインは、強さと知恵、そして大きな責任を背負う神を目指すことを決意する。
第一章：選ばれし者の覚醒
カインは神々の力を手に入れるための「試練の地」を目指し、旅立つ。様々な神の眷属や、神を討ち破ろうとする者たちと出会いながら、自己の内面と向き合う旅が始まる。
中盤：仲間との出会いと葛藤
道中で共に神の力を目指す仲間と出会うが、力の使い道や目的で対立することもある。カインは彼らを通じて、力そのものの意味や自分の心の闇と向き合うことになる。
最終章：真実の神との邂逅
試練の最終段階で、カインは「真の神」と呼ばれる存在に出会い、彼が長い間に秘めていた壮大な真実を知る。そして、神になることの重みと、それが人間や世界に及ぼす影響を理解する。
- キャラクター設定
カイン（主人公）
カイルとリアラの息子で、神の力に憧れを抱く青年。心優しく強い意志を持つが、その力が周囲にどう影響するかを学びながら成長していく。
カイル（父親）
元勇者。カインの旅を遠くから見守る。彼自身も神との接触経験があり、カインにその重みを伝えようとする。
リアラ（母親）
癒しの力を持つ存在であり、カインの精神的な支え。彼女は、神を目指すことの危険性を知っているため、息子の旅に不安を抱きつつも信じて見守る。
セリア（仲間）
神に挑む宿命を持つ女性。かつての家族の悲劇をきっかけに、カインと共に力を目指し、次第に深い信頼関係が生まれる。
真の神（最終試練の相手）
世界を司る存在で、神の力を求める者に試練を与える。カインの決意を試し、彼に本当の力と責任を教えようとする。
- ゲームシステム
選択と影響：カインが旅の途中で行う選択が物語の結末に影響を与える。善と悪を超えた選択肢がプレイヤーに提示され、彼の成長がプレイヤー次第で変化。
仲間との絆：仲間の信頼度や絆によって、能力やイベントが変化するシステム。カインの成長に影響を与える。
試練バトル：各試練ごとに、神の眷属や守護者たちとのバトルが発生。バトルでは神の力に関連するスキルやアビリティが解放され、戦略的な選択が求められる。 - ビジュアルイメージ・世界観
幻想的で神秘的な世界：伝説の神殿や、神々の住む高次元の空間、異世界に接する「試練の地」など、神秘的な雰囲気を持つロケーション。
壮大で美麗なキャラクターデザイン：カインの内面の成長と共にビジュアルが変化するようなデザイン。 - 開発スケジュール
フェーズ1：キャラクターやストーリーの設定（3ヶ月）
フェーズ2：バトルと選択システムの実装（6ヶ月）
フェーズ3：アートワークとサウンドデザイン（4ヶ月）
フェーズ4：テストとフィードバックを反映した調整（2ヶ月）
合計開発期間：15ヶ月 - アピールポイント
神に挑む壮大なテーマと、人間としての成長の物語が融合したファンタジーRPG。
プレイヤーの選択によって変化する物語と、エモーショナルなキャラクターの成長が深い感動を与える。
高度な戦略性と美麗なビジュアルが融合したバトルシステム。
カインの葛藤と成長、仲間との絆が紡ぐ「テイルズオブゴッド」は、ファンタジーRPGファンにとって心に残る体験を提供するものです。
PHP getInfoメソッド
<?php
class User
{
public $name;
public $score;
public function __construct($name, $score)
{
$this->name = $name;
$this->score = $score;
}
public function getInfo()
{
return "{$this->name}, {$this->score}";
}
}
$user1 = new User("Taro", 70);
$user2 = new User("Jiro", 90);
echo $user1->getInfo() . PHP_EOL;
echo $user2->getInfo() . PHP_EOL;PHP プロパティにアクセス
<?php
class User
{
public $name;
public $score;
}
$user1 = new User();
$user1->name = "Taro";
$user1->score = 70;
$user2 = new User();
$user2->name = "Jiro";
$user2->score = 90;
echo $user1->name . PHP_EOL;
echo $user1->score . PHP_EOL;
echo $user2->name . PHP_EOL;
echo $user2->score . PHP_EOL;新作ゲームのアイディア
1. 時間操作アクションゲーム
- コンセプト: 主人公が時間を操る力を持っており、時間を巻き戻したり、止めたり、早送りしたりして敵を倒したりパズルを解いたりする。
- シナリオ: 主人公は時間を操る特殊能力者で、世界が崩壊しつつある中、過去や未来を行き来しながらその原因を探り、世界を救う。
- 特徴:
- プレイヤーはリアルタイムで時間を操作し、敵の動きを一時停止したり、過去の行動を反映させて戦う。
- パズル要素もあり、時間の概念を使ったステージクリアが鍵。
2. ファンタジー農業シミュレーション＋RPG
- コンセプト: ファンタジーの世界で農業をしながら冒険するシミュレーションとRPGの融合。
- シナリオ: プレイヤーは魔法の力を使って農場を経営しつつ、隣接するモンスターの領域を探索する冒険者でもある。土地の力を回復させ、伝説の植物や動物を育てることが目標。
- 特徴:
- 異なる季節や気候に応じて農作物や動物を育て、売買や冒険の装備品を作成。
- 冒険パートでは、農場で育てたアイテムを活用し、モンスターと戦いながら新しいエリアを解放。
3. ロボットカスタマイズ対戦アクション
- コンセプト: 自分でロボットをカスタマイズして対戦するオンラインアクションゲーム。
- シナリオ: 未来の世界で、プレイヤーはカスタマイズ可能なバトルロボットのパイロットとなり、さまざまなアリーナで他のプレイヤーと戦う。
- 特徴:
- パーツの組み合わせで異なる性能や武器を持つロボットを作成。
- 対戦モードや協力プレイモードを搭載し、友達と協力して巨大なボスに挑むモードも。
4. 異世界転生シュミレーションRPG
- コンセプト: プレイヤーが異世界に転生し、新たな運命を切り開くシミュレーションRPG。
- シナリオ: 異世界に転生した主人公が、戦略的な選択をしながら国を築いたり、ギルドを統率したり、仲間を集めて世界の運命を左右する。
- 特徴:
- 戦闘だけでなく、仲間との絆を深めたり、外交や内政を行う要素も充実。
- ターン制バトルと、拠点経営のバランスが取れたゲーム進行。
5. ソーシャルAIと連携した未来型RPG
- コンセプト: プレイヤーの選択や行動がAIで生成されるストーリーやクエストに影響を与えるRPG。
- シナリオ: 近未来の世界でAIが人々の生活に密接に関わっており、プレイヤーが様々な選択肢を通じてAIとの共存を探る。
- 特徴:
- プレイヤーの行動に基づき、AIがリアルタイムで新しいクエストやストーリー展開を生成。
- AIの発展やプレイヤーとのインタラクションによってエンディングが変わるマルチエンディング方式。
どのアイディアも、ユーザーの興味に応じてカスタマイズできる要素があります。気になる方向性や詳細を教えてもらえれば、さらに深掘りした提案もできますよ！
4o
あなた:
もっと
ChatGPT:
ChatGPT
さらにいくつかの新作ゲームのアイディアを提案します。ユニークな体験を提供できる要素を意識してみました。
6. 迷宮生成ローグライクRPG
- コンセプト: 毎回ランダム生成される迷宮を攻略し、深部にいるボスを倒すローグライクRPG。
- シナリオ: 古代の迷宮を探索する冒険者となり、迷宮内で集めたアイテムや能力を駆使して、変化し続けるダンジョンを攻略。
- 特徴:
- 毎回異なるマップや敵配置で、新鮮な挑戦を提供。
- 迷宮からの脱出を目指す他に、特定のミッション（救出やアイテム収集）をこなすサブクエストも充実。
7. 夢世界探検ゲーム
- コンセプト: プレイヤーが夢の中の不思議な世界を探検するアドベンチャーゲーム。
- シナリオ: 主人公が毎晩見る夢の中で、現実と夢が交錯する世界を旅し、謎を解き明かしていく。夢世界には奇妙で魅力的なキャラクターが多数登場し、現実世界に影響を与える出来事が起こる。
- 特徴:
- 独特のアートスタイルやデザインで夢の世界を表現。
- 夢の中で起こる出来事が、現実世界にも影響を与えるユニークな双方向システム。
8. 巨大都市の経済シミュレーション
- コンセプト: プレイヤーが巨大都市の経済を管理し、発展させるシミュレーションゲーム。
- シナリオ: プレイヤーは市長として、都市の成長や市民の幸福を目指してインフラ整備や産業発展に取り組む。技術の発展や自然災害などのランダムイベントに対応しながら、理想の都市を築く。
- 特徴:
- リアルタイムで変動する経済や社会の要素を管理。
- プレイヤーの選択によって異なる都市が形成され、結果的に平和的な都市や技術先進都市など多様な都市像が生まれる。
9. 進化型モンスター育成アクション
- コンセプト: 自分の育てたモンスターが戦闘で進化し、独自の能力を得て成長するアクションゲーム。
- シナリオ: プレイヤーは未知のモンスターを発見し、それを育てて進化させる。そのモンスターと共に世界を冒険し、強力な敵や他のモンスターと戦う。
- 特徴:
- モンスターの進化はプレイヤーの戦い方や選択に応じて分岐。
- モンスター同士の合体やスキルのカスタマイズが可能で、無限の成長パターンを実現。
10. 環境破壊がテーマのサバイバルRPG
- コンセプト: 破壊された自然環境を修復しながら生き延びるサバイバルゲーム。
- シナリオ: 未来の世界で環境破壊が進んだ地球を舞台に、プレイヤーは自然を回復させつつ生存していく。生態系を守り、植物や動物を保護しながら、資源を集めて自分の拠点を強化する。
- 特徴:
- 環境保護とサバイバルがテーマで、プレイヤーの選択が世界の再生に直接影響。
- プレイヤーの行動によって、エコシステムが回復し、動植物が蘇る演出。
11. 音楽バトルRPG
- コンセプト: 音楽を武器にして戦うリズムアクションRPG。
- シナリオ: 音楽の力が世界を支配している未来都市で、プレイヤーは楽器を使って敵とリズムに乗って戦う。楽曲のリズムに合わせて攻撃や防御を行い、敵の音波攻撃を跳ね返す。
- 特徴:
- リズムに基づいたバトルシステムで、音楽とアクションが一体化。
- プレイヤーが自由に作曲し、バトルに使用できる楽曲エディター機能。
12. マルチプレイヤー探偵ゲーム
- コンセプト: プレイヤー全員が探偵役となり、事件の真相を解明する協力型オンラインゲーム。
- シナリオ: 一つの都市で連続殺人事件が発生し、プレイヤーたちは各自異なる手がかりを手にして、犯人を突き止めるため協力し合う。情報交換や推理を重ねて解決に導く。
- 特徴:
- 各プレイヤーに異なる情報が提供され、それを元に推理を進める協力型ゲーム。
- リアルタイムで変化するストーリーや証拠が、毎回異なる結末を生む。
13. 多次元空間を探索する冒険ゲーム
- コンセプト: 異なる次元に存在する無限の世界を探索しながら、失われた技術を取り戻すSFアドベンチャー。
- シナリオ: プレイヤーは次元を行き来する能力を持った主人公として、崩壊寸前の世界を救うため、各次元に散らばる技術を集める。
- 特徴:
- 各次元ごとに異なる物理法則やルールがあり、次元ごとの攻略方法が異なる。
- サバイバル、パズル、アクション要素がバランスよく融合。
これらのアイディアは、ジャンルやテーマごとに異なる特徴を持たせることで、プレイヤーに多様な体験を提供することを意識しています。興味があるアイディアについて、さらに詳細を考えたい場合は、どうぞお知らせください！
勇者の聖典.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 | <span class="dec"><!DOCTYPE html></span><span class="pln"></span><span class="tag"><html</span><span class="pln"> </span><span class="atn">lang</span><span class="pun">=</span><span class="atv">"ja"</span><span class="tag">></span><span class="pln"></span><span class="tag"><head></span><span class="pln"> </span><span class="tag"><meta</span><span class="pln"> </span><span class="atn">charset</span><span class="pun">=</span><span class="atv">"UTF-8"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><meta</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"viewport"</span><span class="pln"> </span><span class="atn">content</span><span class="pun">=</span><span class="atv">"width=device-width, initial-scale=1.0"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><title></span><span class="pln">勇者の聖典 - クエスト＆バトル</span><span class="tag"></title></span><span class="pln"> </span><span class="tag"><style></span><span class="pln"> body </span><span class="pun">{</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">family</span><span class="pun">:</span><span class="pln"> </span><span class="str">'Verdana'</span><span class="pun">,</span><span class="pln"> sans</span><span class="pun">-</span><span class="pln">serif</span><span class="pun">;</span><span class="pln"> background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#121212;</span><span class="pln"> color</span><span class="pun">:</span><span class="pln"> white</span><span class="pun">;</span><span class="pln"> margin</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln"> padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln"> display</span><span class="pun">:</span><span class="pln"> flex</span><span class="pun">;</span><span class="pln"> flex</span><span class="pun">-</span><span class="pln">direction</span><span class="pun">:</span><span class="pln"> column</span><span class="pun">;</span><span class="pln"> justify</span><span class="pun">-</span><span class="pln">content</span><span class="pun">:</span><span class="pln"> center</span><span class="pun">;</span><span class="pln"> align</span><span class="pun">-</span><span class="pln">items</span><span class="pun">:</span><span class="pln"> center</span><span class="pun">;</span><span class="pln"> height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">100vh</span><span class="pun">;</span><span class="pln"> overflow</span><span class="pun">:</span><span class="pln"> hidden</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> header </span><span class="pun">{</span><span class="pln"> text</span><span class="pun">-</span><span class="pln">align</span><span class="pun">:</span><span class="pln"> center</span><span class="pun">;</span><span class="pln"> padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">20px</span><span class="pun">;</span><span class="pln"> background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> rgba</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0.9</span><span class="pun">);</span><span class="pln"> width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">100</span><span class="pun">%;</span><span class="pln"> position</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">fixed</span><span class="pun">;</span><span class="pln"> top</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln"> box</span><span class="pun">-</span><span class="pln">shadow</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="lit">4px</span><span class="pln"> </span><span class="lit">8px</span><span class="pln"> rgba</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0.6</span><span class="pun">);</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> h1 </span><span class="pun">{</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="pln"> </span><span class="lit">50px</span><span class="pun">;</span><span class="pln"> margin</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln"> text</span><span class="pun">-</span><span class="pln">shadow</span><span class="pun">:</span><span class="pln"> </span><span class="lit">2px</span><span class="pln"> </span><span class="lit">2px</span><span class="pln"> </span><span class="lit">10px</span><span class="pln"> </span><span class="com">#ffcc00;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">container </span><span class="pun">{</span><span class="pln"> background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> rgba</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0.9</span><span class="pun">);</span><span class="pln"> padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">30px</span><span class="pun">;</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">15px</span><span class="pun">;</span><span class="pln"> text</span><span class="pun">-</span><span class="pln">align</span><span class="pun">:</span><span class="pln"> center</span><span class="pun">;</span><span class="pln"> width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">90</span><span class="pun">%;</span><span class="pln"> max</span><span class="pun">-</span><span class="pln">width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">600px</span><span class="pun">;</span><span class="pln"> margin</span><span class="pun">-</span><span class="pln">top</span><span class="pun">:</span><span class="pln"> </span><span class="lit">100px</span><span class="pun">;</span><span class="pln"> box</span><span class="pun">-</span><span class="pln">shadow</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="lit">4px</span><span class="pln"> </span><span class="lit">8px</span><span class="pln"> rgba</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0.6</span><span class="pun">);</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">button </span><span class="pun">{</span><span class="pln"> padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">15px</span><span class="pln"> </span><span class="lit">30px</span><span class="pun">;</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="pln"> </span><span class="lit">18px</span><span class="pun">;</span><span class="pln"> margin</span><span class="pun">:</span><span class="pln"> </span><span class="lit">10px</span><span class="pun">;</span><span class="pln"> cursor</span><span class="pun">:</span><span class="pln"> pointer</span><span class="pun">;</span><span class="pln"> background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#ffcc00;</span><span class="pln"> border</span><span class="pun">:</span><span class="pln"> none</span><span class="pun">;</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">5px</span><span class="pun">;</span><span class="pln"> transition</span><span class="pun">:</span><span class="pln"> background</span><span class="pun">-</span><span class="pln">color </span><span class="lit">0.3s</span><span class="pln"> ease</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">button</span><span class="pun">:</span><span class="pln">hover </span><span class="pun">{</span><span class="pln"> background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#ffaa00;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">hidden </span><span class="pun">{</span><span class="pln"> display</span><span class="pun">:</span><span class="pln"> none</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> footer </span><span class="pun">{</span><span class="pln"> background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> rgba</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0.9</span><span class="pun">);</span><span class="pln"> padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">20px</span><span class="pun">;</span><span class="pln"> width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">100</span><span class="pun">%;</span><span class="pln"> text</span><span class="pun">-</span><span class="pln">align</span><span class="pun">:</span><span class="pln"> center</span><span class="pun">;</span><span class="pln"> position</span><span class="pun">:</span><span class="pln"> absolute</span><span class="pun">;</span><span class="pln"> bottom</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">select</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="pln"> </span><span class="lit">18px</span><span class="pun">;</span><span class="pln"> padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">10px</span><span class="pun">;</span><span class="pln"> margin</span><span class="pun">:</span><span class="pln"> </span><span class="lit">10px</span><span class="pun">;</span><span class="pln"> background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#444;</span><span class="pln"> color</span><span class="pun">:</span><span class="pln"> white</span><span class="pun">;</span><span class="pln"> border</span><span class="pun">:</span><span class="pln"> none</span><span class="pun">;</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">5px</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="tag"></style></span><span class="pln"></span><span class="tag"></head></span><span class="pln"></span><span class="tag"><body></span><span class="pln"></span><span class="tag"><header></span><span class="pln"> </span><span class="tag"><h1></span><span class="pln">勇者の聖典 - クエスト＆バトル</span><span class="tag"></h1></span><span class="pln"></span><span class="tag"></header></span><span class="pln"></span><span class="com"><!-- メニュー画面 --></span><span class="pln"></span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"container"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"menu-container"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><h2></span><span class="pln">メニュー</span><span class="tag"></h2></span><span class="pln"> </span><span class="tag"><button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">onclick</span><span class="pun">=</span><span class="atv">"</span><span class="pln">showTraining</span><span class="pun">()</span><span class="atv">"</span><span class="tag">></span><span class="pln">訓練場</span><span class="tag"></button></span><span class="pln"> </span><span class="tag"><button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">onclick</span><span class="pun">=</span><span class="atv">"</span><span class="pln">showQuests</span><span class="pun">()</span><span class="atv">"</span><span class="tag">></span><span class="pln">クエストへ</span><span class="tag"></button></span><span class="pln"> </span><span class="tag"><button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">onclick</span><span class="pun">=</span><span class="atv">"</span><span class="pln">showEquipment</span><span class="pun">()</span><span class="atv">"</span><span class="tag">></span><span class="pln">装備</span><span class="tag"></button></span><span class="pln"> </span><span class="tag"><button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">onclick</span><span class="pun">=</span><span class="atv">"</span><span class="pln">showEnhancement</span><span class="pun">()</span><span class="atv">"</span><span class="tag">></span><span class="pln">装備の強化</span><span class="tag"></button></span><span class="pln"></span><span class="tag"></div></span><span class="pln"></span><span class="com"><!-- 訓練場画面 --></span><span class="pln"></span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"container hidden"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"training-container"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><h2></span><span class="pln">訓練を行ってレベルアップしましょう！</span><span class="tag"></h2></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"training-actions"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">onclick</span><span class="pun">=</span><span class="atv">"</span><span class="pln">train</span><span class="pun">(</span><span class="str">'軽い訓練'</span><span class="pun">,</span><span class="pln"> </span><span class="lit">50</span><span class="pun">)</span><span class="atv">"</span><span class="tag">></span><span class="pln">軽い訓練 (50 XP)</span><span class="tag"></button></span><span class="pln"> </span><span class="tag"><button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">onclick</span><span class="pun">=</span><span class="atv">"</span><span class="pln">train</span><span class="pun">(</span><span class="str">'中程度の訓練'</span><span class="pun">,</span><span class="pln"> </span><span class="lit">100</span><span class="pun">)</span><span class="atv">"</span><span class="tag">></span><span class="pln">中程度の訓練 (100 XP)</span><span class="tag"></button></span><span class="pln"> </span><span class="tag"><button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">onclick</span><span class="pun">=</span><span class="atv">"</span><span class="pln">train</span><span class="pun">(</span><span class="str">'厳しい訓練'</span><span class="pun">,</span><span class="pln"> </span><span class="lit">200</span><span class="pun">)</span><span class="atv">"</span><span class="tag">></span><span class="pln">厳しい訓練 (200 XP)</span><span class="tag"></button></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"><button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">onclick</span><span class="pun">=</span><span class="atv">"</span><span class="pln">returnToMenu</span><span class="pun">()</span><span class="atv">"</span><span class="tag">></span><span class="pln">メニューに戻る</span><span class="tag"></button></span><span class="pln"></span><span class="tag"></div></span><span class="pln"></span><span class="com"><!-- クエスト選択画面 --></span><span class="pln"></span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"container hidden"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"quest-container"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><h2></span><span class="pln">クエストを選んでください</span><span class="tag"></h2></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"quests"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">onclick</span><span class="pun">=</span><span class="atv">"</span><span class="pln">startQuest</span><span class="pun">(</span><span class="str">'王国への召喚'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'なし'</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">50</span><span class="pun">,</span><span class="pln"> </span><span class="str">'なし'</span><span class="pun">)</span><span class="atv">"</span><span class="tag">></span><span class="pln"> 王国への召喚 (50 XP) </span><span class="tag"></button></span><span class="pln"> </span><span class="tag"><button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">onclick</span><span class="pun">=</span><span class="atv">"</span><span class="pln">startQuest</span><span class="pun">(</span><span class="str">'初めての試練'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'ゴブリン'</span><span class="pun">,</span><span class="pln"> </span><span class="lit">500</span><span class="pun">,</span><span class="pln"> </span><span class="lit">50</span><span class="pun">,</span><span class="pln"> </span><span class="lit">70</span><span class="pun">,</span><span class="pln"> </span><span class="str">'光の剣'</span><span class="pun">)</span><span class="atv">"</span><span class="tag">></span><span class="pln"> 初めての試練 (70 XP) </span><span class="tag"></button></span><span class="pln"> </span><span class="tag"><button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">onclick</span><span class="pun">=</span><span class="atv">"</span><span class="pln">startQuest</span><span class="pun">(</span><span class="str">'燃え盛る山の危機'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'火山の魔物'</span><span class="pun">,</span><span class="pln"> </span><span class="lit">1800</span><span class="pun">,</span><span class="pln"> </span><span class="lit">250</span><span class="pun">,</span><span class="pln"> </span><span class="lit">200</span><span class="pun">,</span><span class="pln"> </span><span class="str">'炎の剣'</span><span class="pun">)</span><span class="atv">"</span><span class="tag">></span><span class="pln"> 燃え盛る山の危機 (200 XP) </span><span class="tag"></button></span><span class="pln"> </span><span class="tag"><button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">onclick</span><span class="pun">=</span><span class="atv">"</span><span class="pln">startQuest</span><span class="pun">(</span><span class="str">'氷の洞窟の秘宝'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'氷の魔物'</span><span class="pun">,</span><span class="pln"> </span><span class="lit">2000</span><span class="pun">,</span><span class="pln"> </span><span class="lit">220</span><span class="pun">,</span><span class="pln"> </span><span class="lit">250</span><span class="pun">,</span><span class="pln"> </span><span class="str">'アイススピア'</span><span class="pun">)</span><span class="atv">"</span><span class="tag">></span><span class="pln"> 氷の洞窟の秘宝 (250 XP) </span><span class="tag"></button></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"><button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">onclick</span><span class="pun">=</span><span class="atv">"</span><span class="pln">returnToMenu</span><span class="pun">()</span><span class="atv">"</span><span class="tag">></span><span class="pln">メニューに戻る</span><span class="tag"></button></span><span class="pln"></span><span class="tag"></div></span><span class="pln"></span><span class="com"><!-- 装備画面 --></span><span class="pln"></span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"container hidden"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"equipment-container"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><h2></span><span class="pln">装備を選んでください</span><span class="tag"></h2></span><span class="pln"> </span><span class="tag"><select</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"equipment-select"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"光の剣"</span><span class="tag">></span><span class="pln">光の剣 (攻撃力 +20)</span><span class="tag"></option></span><span class="pln"> </span><span class="tag"><option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"ドラゴンの鱗の盾"</span><span class="tag">></span><span class="pln">ドラゴンの鱗の盾 (防御力 +30)</span><span class="tag"></option></span><span class="pln"> </span><span class="tag"><option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"精霊の指輪"</span><span class="tag">></span><span class="pln">精霊の指輪 (防御力 +10, 攻撃力 +10)</span><span class="tag"></option></span><span class="pln"> </span><span class="tag"><option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"炎の剣"</span><span class="tag">></span><span class="pln">炎の剣 (攻撃力 +40)</span><span class="tag"></option></span><span class="pln"> </span><span class="tag"><option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"アイススピア"</span><span class="tag">></span><span class="pln">アイススピア (攻撃力 +25, 防御力 +10)</span><span class="tag"></option></span><span class="pln"> </span><span class="tag"><option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"暗黒の大剣"</span><span class="tag">></span><span class="pln">暗黒の大剣 (攻撃力 +50, 防御力 -10)</span><span class="tag"></option></span><span class="pln"> </span><span class="tag"></select></span><span class="pln"> </span><span class="tag"><button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">onclick</span><span class="pun">=</span><span class="atv">"</span><span class="pln">equipItem</span><span class="pun">()</span><span class="atv">"</span><span class="tag">></span><span class="pln">装備する</span><span class="tag"></button></span><span class="pln"> </span><span class="tag"><button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">onclick</span><span class="pun">=</span><span class="atv">"</span><span class="pln">returnToMenu</span><span class="pun">()</span><span class="atv">"</span><span class="tag">></span><span class="pln">メニューに戻る</span><span class="tag"></button></span><span class="pln"></span><span class="tag"></div></span><span class="pln"></span><span class="com"><!-- 装備の強化画面 --></span><span class="pln"></span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"container hidden"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"enhancement-container"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><h2></span><span class="pln">装備の強化</span><span class="tag"></h2></span><span class="pln"> </span><span class="tag"><select</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"enhance-select"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"光の剣"</span><span class="tag">></span><span class="pln">光の剣 (攻撃力 +20)</span><span class="tag"></option></span><span class="pln"> </span><span class="tag"><option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"ドラゴンの鱗の盾"</span><span class="tag">></span><span class="pln">ドラゴンの鱗の盾 (防御力 +30)</span><span class="tag"></option></span><span class="pln"> </span><span class="tag"><option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"精霊の指輪"</span><span class="tag">></span><span class="pln">精霊の指輪 (防御力 +10, 攻撃力 +10)</span><span class="tag"></option></span><span class="pln"> </span><span class="tag"><option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"炎の剣"</span><span class="tag">></span><span class="pln">炎の剣 (攻撃力 +40)</span><span class="tag"></option></span><span class="pln"> </span><span class="tag"><option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"アイススピア"</span><span class="tag">></span><span class="pln">アイススピア (攻撃力 +25, 防御力 +10)</span><span class="tag"></option></span><span class="pln"> </span><span class="tag"><option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"暗黒の大剣"</span><span class="tag">></span><span class="pln">暗黒の大剣 (攻撃力 +50, 防御力 -10)</span><span class="tag"></option></span><span class="pln"> </span><span class="tag"></select></span><span class="pln"> </span><span class="tag"><button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">onclick</span><span class="pun">=</span><span class="atv">"</span><span class="pln">enhanceItem</span><span class="pun">()</span><span class="atv">"</span><span class="tag">></span><span class="pln">強化する</span><span class="tag"></button></span><span class="pln"> </span><span class="tag"><button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">onclick</span><span class="pun">=</span><span class="atv">"</span><span class="pln">returnToMenu</span><span class="pun">()</span><span class="atv">"</span><span class="tag">></span><span class="pln">メニューに戻る</span><span class="tag"></button></span><span class="pln"></span><span class="tag"></div></span><span class="pln"></span><span class="com"><!-- 戦闘画面 --></span><span class="pln"></span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"container hidden"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"battle-container"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><h2</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"battle-title"</span><span class="tag">></span><span class="pln">敵と戦っています...</span><span class="tag"></h2></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"status"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"player-status"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><h3></span><span class="pln">勇者のステータス</span><span class="tag"></h3></span><span class="pln"> </span><span class="tag"><p></span><span class="pln">HP: </span><span class="tag"><span</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"player-hp"</span><span class="tag">></span><span class="pln">1000</span><span class="tag"></span></p></span><span class="pln"> </span><span class="tag"><p></span><span class="pln">攻撃力: </span><span class="tag"><span</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"player-attack"</span><span class="tag">></span><span class="pln">100</span><span class="tag"></span></p></span><span class="pln"> </span><span class="tag"><p></span><span class="pln">防御力: </span><span class="tag"><span</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"player-defense"</span><span class="tag">></span><span class="pln">50</span><span class="tag"></span></p></span><span class="pln"> </span><span class="tag"><p></span><span class="pln">レベル: </span><span class="tag"><span</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"player-level"</span><span class="tag">></span><span class="pln">1</span><span class="tag"></span></p></span><span class="pln"> </span><span class="tag"><p></span><span class="pln">経験値: </span><span class="tag"><span</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"player-xp"</span><span class="tag">></span><span class="pln">0</span><span class="tag"></span></span><span class="pln"> / </span><span class="tag"><span</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"xp-to-next-level"</span><span class="tag">></span><span class="pln">100</span><span class="tag"></span></p></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"enemy-status"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><h3></span><span class="pln">敵のステータス</span><span class="tag"></h3></span><span class="pln"> </span><span class="tag"><p></span><span class="pln">名前: </span><span class="tag"><span</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"enemy-name"</span><span class="tag">></span><span class="pln">ドラゴン</span><span class="tag"></span></p></span><span class="pln"> </span><span class="tag"><p></span><span class="pln">HP: </span><span class="tag"><span</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"enemy-hp"</span><span class="tag">></span><span class="pln">1000</span><span class="tag"></span></p></span><span class="pln"> </span><span class="tag"><p></span><span class="pln">攻撃力: </span><span class="tag"><span</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"enemy-attack"</span><span class="tag">></span><span class="pln">150</span><span class="tag"></span></p></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"actions"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">onclick</span><span class="pun">=</span><span class="atv">"</span><span class="pln">attack</span><span class="pun">()</span><span class="atv">"</span><span class="tag">></span><span class="pln">攻撃</span><span class="tag"></button></span><span class="pln"> </span><span class="tag"><button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">onclick</span><span class="pun">=</span><span class="atv">"</span><span class="pln">useSkill</span><span class="pun">()</span><span class="atv">"</span><span class="tag">></span><span class="pln">スキル使用</span><span class="tag"></button></span><span class="pln"> </span><span class="tag"><button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">onclick</span><span class="pun">=</span><span class="atv">"</span><span class="pln">useItem</span><span class="pun">()</span><span class="atv">"</span><span class="tag">></span><span class="pln">アイテム使用</span><span class="tag"></button></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"></span><span class="tag"></div></span><span class="pln"></span><span class="com"><!-- 報酬画面 --></span><span class="pln"></span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"container hidden"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"reward-container"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><h2></span><span class="pln">クエスト完了！</span><span class="tag"></h2></span><span class="pln"> </span><span class="tag"><p</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"reward-message"</span><span class="tag">></span><span class="pln">報酬を受け取って次のクエストへ進みましょう。</span><span class="tag"></p></span><span class="pln"> </span><span class="tag"><p</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"item-reward"</span><span class="tag">></span><span class="pln">獲得したアイテム: </span><span class="tag"><span</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"reward-item"</span><span class="tag">></span></p></span><span class="pln"> </span><span class="tag"><button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">onclick</span><span class="pun">=</span><span class="atv">"</span><span class="pln">startNextQuest</span><span class="pun">()</span><span class="atv">"</span><span class="tag">></span><span class="pln">次のクエストへ</span><span class="tag"></button></span><span class="pln"> </span><span class="tag"><button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">onclick</span><span class="pun">=</span><span class="atv">"</span><span class="pln">returnToMenu</span><span class="pun">()</span><span class="atv">"</span><span class="tag">></span><span class="pln">メニューに戻る</span><span class="tag"></button></span><span class="pln"></span><span class="tag"></div></span><span class="pln"></span><span class="tag"><script></span><span class="pln"> </span><span class="kwd">let</span><span class="pln"> player </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">class</span><span class="pun">:</span><span class="pln"> </span><span class="str">''</span><span class="pun">,</span><span class="pln"> hp</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1000</span><span class="pun">,</span><span class="pln"> maxHp</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1000</span><span class="pun">,</span><span class="pln"> attack</span><span class="pun">:</span><span class="pln"> </span><span class="lit">100</span><span class="pun">,</span><span class="pln"> defense</span><span class="pun">:</span><span class="pln"> </span><span class="lit">50</span><span class="pun">,</span><span class="pln"> level</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1</span><span class="pun">,</span><span class="pln"> xp</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> xpToNextLevel</span><span class="pun">:</span><span class="pln"> </span><span class="lit">100</span><span class="pun">,</span><span class="pln"> skills</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[],</span><span class="pln"> inventory</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> healingPotion</span><span class="pun">:</span><span class="pln"> </span><span class="lit">2</span><span class="pun">,</span><span class="pln"> items</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[]</span><span class="pln"> </span><span class="pun">},</span><span class="pln"> equipped</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> weapon</span><span class="pun">:</span><span class="pln"> </span><span class="str">''</span><span class="pun">,</span><span class="pln"> shield</span><span class="pun">:</span><span class="pln"> </span><span class="str">''</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">};</span><span class="pln"> </span><span class="kwd">let</span><span class="pln"> enemy </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> name</span><span class="pun">:</span><span class="pln"> </span><span class="str">''</span><span class="pun">,</span><span class="pln"> hp</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> attack</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="pun">};</span><span class="pln"> </span><span class="kwd">let</span><span class="pln"> currentQuestReward </span><span class="pun">=</span><span class="pln"> </span><span class="str">''</span><span class="pun">;</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> train</span><span class="pun">(</span><span class="pln">trainingType</span><span class="pun">,</span><span class="pln"> xpEarned</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> alert</span><span class="pun">(`</span><span class="pln">$</span><span class="pun">{</span><span class="pln">trainingType</span><span class="pun">}を行い、</span><span class="pln">$</span><span class="pun">{</span><span class="pln">xpEarned</span><span class="pun">}</span><span class="pln"> XP</span><span class="pun">を獲得しました！`);</span><span class="pln"> player</span><span class="pun">.</span><span class="pln">xp </span><span class="pun">+=</span><span class="pln"> xpEarned</span><span class="pun">;</span><span class="pln"> checkLevelUp</span><span class="pun">();</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> checkLevelUp</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">while</span><span class="pln"> </span><span class="pun">(</span><span class="pln">player</span><span class="pun">.</span><span class="pln">xp </span><span class="pun">>=</span><span class="pln"> player</span><span class="pun">.</span><span class="pln">xpToNextLevel</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> player</span><span class="pun">.</span><span class="pln">level</span><span class="pun">++;</span><span class="pln"> player</span><span class="pun">.</span><span class="pln">xp </span><span class="pun">-=</span><span class="pln"> player</span><span class="pun">.</span><span class="pln">xpToNextLevel</span><span class="pun">;</span><span class="pln"> player</span><span class="pun">.</span><span class="pln">xpToNextLevel </span><span class="pun">+=</span><span class="pln"> </span><span class="lit">50</span><span class="pun">;</span><span class="pln"> </span><span class="com">// 次のレベルアップに必要なXPを増加</span><span class="pln"> player</span><span class="pun">.</span><span class="pln">maxHp </span><span class="pun">+=</span><span class="pln"> </span><span class="lit">100</span><span class="pun">;</span><span class="pln"> </span><span class="com">// レベルアップでHPが上昇</span><span class="pln"> player</span><span class="pun">.</span><span class="pln">attack </span><span class="pun">+=</span><span class="pln"> </span><span class="lit">10</span><span class="pun">;</span><span class="pln"> </span><span class="com">// レベルアップで攻撃力が上昇</span><span class="pln"> player</span><span class="pun">.</span><span class="pln">defense </span><span class="pun">+=</span><span class="pln"> </span><span class="lit">5</span><span class="pun">;</span><span class="pln"> </span><span class="com">// レベルアップで防御力が上昇</span><span class="pln"> alert</span><span class="pun">(`レベルアップ！現在のレベルは</span><span class="pln"> $</span><span class="pun">{</span><span class="pln">player</span><span class="pun">.</span><span class="pln">level</span><span class="pun">}</span><span class="pln"> </span><span class="pun">です！`);</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> updateStatus</span><span class="pun">();</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> updateStatus</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'player-hp'</span><span class="pun">).</span><span class="pln">textContent </span><span class="pun">=</span><span class="pln"> player</span><span class="pun">.</span><span class="pln">hp</span><span class="pun">;</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'player-attack'</span><span class="pun">).</span><span class="pln">textContent </span><span class="pun">=</span><span class="pln"> player</span><span class="pun">.</span><span class="pln">attack</span><span class="pun">;</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'player-defense'</span><span class="pun">).</span><span class="pln">textContent </span><span class="pun">=</span><span class="pln"> player</span><span class="pun">.</span><span class="pln">defense</span><span class="pun">;</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'player-level'</span><span class="pun">).</span><span class="pln">textContent </span><span class="pun">=</span><span class="pln"> player</span><span class="pun">.</span><span class="pln">level</span><span class="pun">;</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'player-xp'</span><span class="pun">).</span><span class="pln">textContent </span><span class="pun">=</span><span class="pln"> player</span><span class="pun">.</span><span class="pln">xp</span><span class="pun">;</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'xp-to-next-level'</span><span class="pun">).</span><span class="pln">textContent </span><span class="pun">=</span><span class="pln"> player</span><span class="pun">.</span><span class="pln">xpToNextLevel</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> showTraining</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'menu-container'</span><span class="pun">).</span><span class="pln">classList</span><span class="pun">.</span><span class="pln">add</span><span class="pun">(</span><span class="str">'hidden'</span><span class="pun">);</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'training-container'</span><span class="pun">).</span><span class="pln">classList</span><span class="pun">.</span><span class="pln">remove</span><span class="pun">(</span><span class="str">'hidden'</span><span class="pun">);</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> returnToMenu</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'training-container'</span><span class="pun">).</span><span class="pln">classList</span><span class="pun">.</span><span class="pln">add</span><span class="pun">(</span><span class="str">'hidden'</span><span class="pun">);</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'quest-container'</span><span class="pun">).</span><span class="pln">classList</span><span class="pun">.</span><span class="pln">add</span><span class="pun">(</span><span class="str">'hidden'</span><span class="pun">);</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'battle-container'</span><span class="pun">).</span><span class="pln">classList</span><span class="pun">.</span><span class="pln">add</span><span class="pun">(</span><span class="str">'hidden'</span><span class="pun">);</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'reward-container'</span><span class="pun">).</span><span class="pln">classList</span><span class="pun">.</span><span class="pln">add</span><span class="pun">(</span><span class="str">'hidden'</span><span class="pun">);</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'equipment-container'</span><span class="pun">).</span><span class="pln">classList</span><span class="pun">.</span><span class="pln">add</span><span class="pun">(</span><span class="str">'hidden'</span><span class="pun">);</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'enhancement-container'</span><span class="pun">).</span><span class="pln">classList</span><span class="pun">.</span><span class="pln">add</span><span class="pun">(</span><span class="str">'hidden'</span><span class="pun">);</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'menu-container'</span><span class="pun">).</span><span class="pln">classList</span><span class="pun">.</span><span class="pln">remove</span><span class="pun">(</span><span class="str">'hidden'</span><span class="pun">);</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> showQuests</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'menu-container'</span><span class="pun">).</span><span class="pln">classList</span><span class="pun">.</span><span class="pln">add</span><span class="pun">(</span><span class="str">'hidden'</span><span class="pun">);</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'quest-container'</span><span class="pun">).</span><span class="pln">classList</span><span class="pun">.</span><span class="pln">remove</span><span class="pun">(</span><span class="str">'hidden'</span><span class="pun">);</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> showEquipment</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'menu-container'</span><span class="pun">).</span><span class="pln">classList</span><span class="pun">.</span><span class="pln">add</span><span class="pun">(</span><span class="str">'hidden'</span><span class="pun">);</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'equipment-container'</span><span class="pun">).</span><span class="pln">classList</span><span class="pun">.</span><span class="pln">remove</span><span class="pun">(</span><span class="str">'hidden'</span><span class="pun">);</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> showEnhancement</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'menu-container'</span><span class="pun">).</span><span class="pln">classList</span><span class="pun">.</span><span class="pln">add</span><span class="pun">(</span><span class="str">'hidden'</span><span class="pun">);</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'enhancement-container'</span><span class="pun">).</span><span class="pln">classList</span><span class="pun">.</span><span class="pln">remove</span><span class="pun">(</span><span class="str">'hidden'</span><span class="pun">);</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> startQuest</span><span class="pun">(</span><span class="pln">questName</span><span class="pun">,</span><span class="pln"> enemyName</span><span class="pun">,</span><span class="pln"> enemyHp</span><span class="pun">,</span><span class="pln"> enemyAttack</span><span class="pun">,</span><span class="pln"> xpReward</span><span class="pun">,</span><span class="pln"> rewardItem</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> enemy</span><span class="pun">.</span><span class="pln">name </span><span class="pun">=</span><span class="pln"> enemyName</span><span class="pun">;</span><span class="pln"> enemy</span><span class="pun">.</span><span class="pln">hp </span><span class="pun">=</span><span class="pln"> enemyHp</span><span class="pun">;</span><span class="pln"> enemy</span><span class="pun">.</span><span class="pln">attack </span><span class="pun">=</span><span class="pln"> enemyAttack</span><span class="pun">;</span><span class="pln"> currentQuestReward </span><span class="pun">=</span><span class="pln"> rewardItem</span><span class="pun">;</span><span class="pln"> </span><span class="com">// クエスト報酬アイテム</span><span class="pln"> player</span><span class="pun">.</span><span class="pln">xp </span><span class="pun">+=</span><span class="pln"> xpReward</span><span class="pun">;</span><span class="pln"> </span><span class="com">// クエスト完了時にXPを加算</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'battle-title'</span><span class="pun">).</span><span class="pln">textContent </span><span class="pun">=</span><span class="pln"> </span><span class="pun">`</span><span class="pln">$</span><span class="pun">{</span><span class="pln">enemyName</span><span class="pun">}との戦い`;</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'enemy-name'</span><span class="pun">).</span><span class="pln">textContent </span><span class="pun">=</span><span class="pln"> enemy</span><span class="pun">.</span><span class="pln">name</span><span class="pun">;</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'enemy-hp'</span><span class="pun">).</span><span class="pln">textContent </span><span class="pun">=</span><span class="pln"> enemy</span><span class="pun">.</span><span class="pln">hp</span><span class="pun">;</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'enemy-attack'</span><span class="pun">).</span><span class="pln">textContent </span><span class="pun">=</span><span class="pln"> enemy</span><span class="pun">.</span><span class="pln">attack</span><span class="pun">;</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'quest-container'</span><span class="pun">).</span><span class="pln">classList</span><span class="pun">.</span><span class="pln">add</span><span class="pun">(</span><span class="str">'hidden'</span><span class="pun">);</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'battle-container'</span><span class="pun">).</span><span class="pln">classList</span><span class="pun">.</span><span class="pln">remove</span><span class="pun">(</span><span class="str">'hidden'</span><span class="pun">);</span><span class="pln"> updateStatus</span><span class="pun">();</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> equipItem</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> selectedItem </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'equipment-select'</span><span class="pun">).</span><span class="pln">value</span><span class="pun">;</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">selectedItem </span><span class="pun">===</span><span class="pln"> </span><span class="str">'光の剣'</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> player</span><span class="pun">.</span><span class="pln">attack </span><span class="pun">+=</span><span class="pln"> </span><span class="lit">20</span><span class="pun">;</span><span class="pln"> player</span><span class="pun">.</span><span class="pln">equipped</span><span class="pun">.</span><span class="pln">weapon </span><span class="pun">=</span><span class="pln"> </span><span class="str">'光の剣'</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">selectedItem </span><span class="pun">===</span><span class="pln"> </span><span class="str">'ドラゴンの鱗の盾'</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> player</span><span class="pun">.</span><span class="pln">defense </span><span class="pun">+=</span><span class="pln"> </span><span class="lit">30</span><span class="pun">;</span><span class="pln"> player</span><span class="pun">.</span><span class="pln">equipped</span><span class="pun">.</span><span class="pln">shield </span><span class="pun">=</span><span class="pln"> </span><span class="str">'ドラゴンの鱗の盾'</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">selectedItem </span><span class="pun">===</span><span class="pln"> </span><span class="str">'精霊の指輪'</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> player</span><span class="pun">.</span><span class="pln">attack </span><span class="pun">+=</span><span class="pln"> </span><span class="lit">10</span><span class="pun">;</span><span class="pln"> player</span><span class="pun">.</span><span class="pln">defense </span><span class="pun">+=</span><span class="pln"> </span><span class="lit">10</span><span class="pun">;</span><span class="pln"> player</span><span class="pun">.</span><span class="pln">equipped</span><span class="pun">.</span><span class="pln">weapon </span><span class="pun">=</span><span class="pln"> </span><span class="str">'精霊の指輪'</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">selectedItem </span><span class="pun">===</span><span class="pln"> </span><span class="str">'炎の剣'</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> player</span><span class="pun">.</span><span class="pln">attack </span><span class="pun">+=</span><span class="pln"> </span><span class="lit">40</span><span class="pun">;</span><span class="pln"> player</span><span class="pun">.</span><span class="pln">equipped</span><span class="pun">.</span><span class="pln">weapon </span><span class="pun">=</span><span class="pln"> </span><span class="str">'炎の剣'</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">selectedItem </span><span class="pun">===</span><span class="pln"> </span><span class="str">'アイススピア'</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> player</span><span class="pun">.</span><span class="pln">attack </span><span class="pun">+=</span><span class="pln"> </span><span class="lit">25</span><span class="pun">;</span><span class="pln"> player</span><span class="pun">.</span><span class="pln">defense </span><span class="pun">+=</span><span class="pln"> </span><span class="lit">10</span><span class="pun">;</span><span class="pln"> player</span><span class="pun">.</span><span class="pln">equipped</span><span class="pun">.</span><span class="pln">weapon </span><span class="pun">=</span><span class="pln"> </span><span class="str">'アイススピア'</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">selectedItem </span><span class="pun">===</span><span class="pln"> </span><span class="str">'暗黒の大剣'</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> player</span><span class="pun">.</span><span class="pln">attack </span><span class="pun">+=</span><span class="pln"> </span><span class="lit">50</span><span class="pun">;</span><span class="pln"> player</span><span class="pun">.</span><span class="pln">defense </span><span class="pun">-=</span><span class="pln"> </span><span class="lit">10</span><span class="pun">;</span><span class="pln"> player</span><span class="pun">.</span><span class="pln">equipped</span><span class="pun">.</span><span class="pln">weapon </span><span class="pun">=</span><span class="pln"> </span><span class="str">'暗黒の大剣'</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> alert</span><span class="pun">(`</span><span class="pln">$</span><span class="pun">{</span><span class="pln">selectedItem</span><span class="pun">}を装備しました！`);</span><span class="pln"> updateStatus</span><span class="pun">();</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> enhanceItem</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> selectedItem </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'enhance-select'</span><span class="pun">).</span><span class="pln">value</span><span class="pun">;</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">selectedItem </span><span class="pun">===</span><span class="pln"> </span><span class="str">'光の剣'</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> player</span><span class="pun">.</span><span class="pln">attack </span><span class="pun">+=</span><span class="pln"> </span><span class="lit">10</span><span class="pun">;</span><span class="pln"> </span><span class="com">// 強化による攻撃力アップ</span><span class="pln"> alert</span><span class="pun">(</span><span class="str">'光の剣を強化して攻撃力 +10！'</span><span class="pun">);</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">selectedItem </span><span class="pun">===</span><span class="pln"> </span><span class="str">'ドラゴンの鱗の盾'</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> player</span><span class="pun">.</span><span class="pln">defense </span><span class="pun">+=</span><span class="pln"> </span><span class="lit">10</span><span class="pun">;</span><span class="pln"> </span><span class="com">// 強化による防御力アップ</span><span class="pln"> alert</span><span class="pun">(</span><span class="str">'ドラゴンの鱗の盾を強化して防御力 +10！'</span><span class="pun">);</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">selectedItem </span><span class="pun">===</span><span class="pln"> </span><span class="str">'精霊の指輪'</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> player</span><span class="pun">.</span><span class="pln">attack </span><span class="pun">+=</span><span class="pln"> </span><span class="lit">5</span><span class="pun">;</span><span class="pln"> player</span><span class="pun">.</span><span class="pln">defense </span><span class="pun">+=</span><span class="pln"> </span><span class="lit">5</span><span class="pun">;</span><span class="pln"> alert</span><span class="pun">(</span><span class="str">'精霊の指輪を強化して攻撃力 +5、防御力 +5！'</span><span class="pun">);</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">selectedItem </span><span class="pun">===</span><span class="pln"> </span><span class="str">'炎の剣'</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> player</span><span class="pun">.</span><span class="pln">attack </span><span class="pun">+=</span><span class="pln"> </span><span class="lit">15</span><span class="pun">;</span><span class="pln"> alert</span><span class="pun">(</span><span class="str">'炎の剣を強化して攻撃力 +15！'</span><span class="pun">);</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">selectedItem </span><span class="pun">===</span><span class="pln"> </span><span class="str">'アイススピア'</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> player</span><span class="pun">.</span><span class="pln">attack </span><span class="pun">+=</span><span class="pln"> </span><span class="lit">10</span><span class="pun">;</span><span class="pln"> player</span><span class="pun">.</span><span class="pln">defense </span><span class="pun">+=</span><span class="pln"> </span><span class="lit">5</span><span class="pun">;</span><span class="pln"> alert</span><span class="pun">(</span><span class="str">'アイススピアを強化して攻撃力 +10、防御力 +5！'</span><span class="pun">);</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">selectedItem </span><span class="pun">===</span><span class="pln"> </span><span class="str">'暗黒の大剣'</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> player</span><span class="pun">.</span><span class="pln">attack </span><span class="pun">+=</span><span class="pln"> </span><span class="lit">20</span><span class="pun">;</span><span class="pln"> player</span><span class="pun">.</span><span class="pln">defense </span><span class="pun">+=</span><span class="pln"> </span><span class="lit">5</span><span class="pun">;</span><span class="pln"> </span><span class="com">// 強化による防御力の補正</span><span class="pln"> alert</span><span class="pun">(</span><span class="str">'暗黒の大剣を強化して攻撃力 +20、防御力 +5！'</span><span class="pun">);</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> updateStatus</span><span class="pun">();</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> attack</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> damage </span><span class="pun">=</span><span class="pln"> </span><span class="typ">Math</span><span class="pun">.</span><span class="pln">max</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,</span><span class="pln"> player</span><span class="pun">.</span><span class="pln">attack </span><span class="pun">-</span><span class="pln"> enemy</span><span class="pun">.</span><span class="pln">attack </span><span class="pun">/</span><span class="pln"> </span><span class="lit">4</span><span class="pun">);</span><span class="pln"> enemy</span><span class="pun">.</span><span class="pln">hp </span><span class="pun">-=</span><span class="pln"> damage</span><span class="pun">;</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'enemy-hp'</span><span class="pun">).</span><span class="pln">textContent </span><span class="pun">=</span><span class="pln"> </span><span class="typ">Math</span><span class="pun">.</span><span class="pln">max</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,</span><span class="pln"> enemy</span><span class="pun">.</span><span class="pln">hp</span><span class="pun">);</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">enemy</span><span class="pun">.</span><span class="pln">hp </span><span class="pun"><=</span><span class="pln"> </span><span class="lit">0</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> victory</span><span class="pun">();</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> enemyAttack</span><span class="pun">();</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> enemyAttack</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> damage </span><span class="pun">=</span><span class="pln"> </span><span class="typ">Math</span><span class="pun">.</span><span class="pln">max</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,</span><span class="pln"> enemy</span><span class="pun">.</span><span class="pln">attack </span><span class="pun">-</span><span class="pln"> player</span><span class="pun">.</span><span class="pln">defense </span><span class="pun">/</span><span class="pln"> </span><span class="lit">4</span><span class="pun">);</span><span class="pln"> player</span><span class="pun">.</span><span class="pln">hp </span><span class="pun">-=</span><span class="pln"> damage</span><span class="pun">;</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'player-hp'</span><span class="pun">).</span><span class="pln">textContent </span><span class="pun">=</span><span class="pln"> </span><span class="typ">Math</span><span class="pun">.</span><span class="pln">max</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,</span><span class="pln"> player</span><span class="pun">.</span><span class="pln">hp</span><span class="pun">);</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">player</span><span class="pun">.</span><span class="pln">hp </span><span class="pun"><=</span><span class="pln"> </span><span class="lit">0</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> defeat</span><span class="pun">();</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> useSkill</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">player</span><span class="pun">.</span><span class="pln">skills</span><span class="pun">.</span><span class="pln">length </span><span class="pun">></span><span class="pln"> </span><span class="lit">0</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> skillDamage </span><span class="pun">=</span><span class="pln"> </span><span class="lit">150</span><span class="pun">;</span><span class="pln"> </span><span class="com">// スキルのダメージ</span><span class="pln"> enemy</span><span class="pun">.</span><span class="pln">hp </span><span class="pun">-=</span><span class="pln"> skillDamage</span><span class="pun">;</span><span class="pln"> alert</span><span class="pun">(`スキルを使用して</span><span class="pln">$</span><span class="pun">{</span><span class="pln">skillDamage</span><span class="pun">}ダメージを与えました！`);</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'enemy-hp'</span><span class="pun">).</span><span class="pln">textContent </span><span class="pun">=</span><span class="pln"> </span><span class="typ">Math</span><span class="pun">.</span><span class="pln">max</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,</span><span class="pln"> enemy</span><span class="pun">.</span><span class="pln">hp</span><span class="pun">);</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">enemy</span><span class="pun">.</span><span class="pln">hp </span><span class="pun"><=</span><span class="pln"> </span><span class="lit">0</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> victory</span><span class="pun">();</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> enemyAttack</span><span class="pun">();</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> alert</span><span class="pun">(</span><span class="str">"スキルをまだ習得していません！"</span><span class="pun">);</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> useItem</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">player</span><span class="pun">.</span><span class="pln">inventory</span><span class="pun">.</span><span class="pln">healingPotion </span><span class="pun">></span><span class="pln"> </span><span class="lit">0</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> player</span><span class="pun">.</span><span class="pln">hp </span><span class="pun">=</span><span class="pln"> </span><span class="typ">Math</span><span class="pun">.</span><span class="pln">min</span><span class="pun">(</span><span class="pln">player</span><span class="pun">.</span><span class="pln">maxHp</span><span class="pun">,</span><span class="pln"> player</span><span class="pun">.</span><span class="pln">hp </span><span class="pun">+</span><span class="pln"> </span><span class="lit">200</span><span class="pun">);</span><span class="pln"> player</span><span class="pun">.</span><span class="pln">inventory</span><span class="pun">.</span><span class="pln">healingPotion</span><span class="pun">--;</span><span class="pln"> alert</span><span class="pun">(</span><span class="str">"回復薬を使用してHPを200回復しました！"</span><span class="pun">);</span><span class="pln"> updateStatus</span><span class="pun">();</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> alert</span><span class="pun">(</span><span class="str">"回復薬がありません！"</span><span class="pun">);</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> victory</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> alert</span><span class="pun">(</span><span class="str">"勝利しました！"</span><span class="pun">);</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'battle-container'</span><span class="pun">).</span><span class="pln">classList</span><span class="pun">.</span><span class="pln">add</span><span class="pun">(</span><span class="str">'hidden'</span><span class="pun">);</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'reward-container'</span><span class="pun">).</span><span class="pln">classList</span><span class="pun">.</span><span class="pln">remove</span><span class="pun">(</span><span class="str">'hidden'</span><span class="pun">);</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'reward-item'</span><span class="pun">).</span><span class="pln">textContent </span><span class="pun">=</span><span class="pln"> currentQuestReward</span><span class="pun">;</span><span class="pln"> player</span><span class="pun">.</span><span class="pln">inventory</span><span class="pun">.</span><span class="pln">items</span><span class="pun">.</span><span class="pln">push</span><span class="pun">(</span><span class="pln">currentQuestReward</span><span class="pun">);</span><span class="pln"> </span><span class="com">// Add reward to player's items</span><span class="pln"> checkLevelUp</span><span class="pun">();</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> defeat</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> alert</span><span class="pun">(</span><span class="str">"敗北しました！"</span><span class="pun">);</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'battle-container'</span><span class="pun">).</span><span class="pln">classList</span><span class="pun">.</span><span class="pln">add</span><span class="pun">(</span><span class="str">'hidden'</span><span class="pun">);</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'quest-container'</span><span class="pun">).</span><span class="pln">classList</span><span class="pun">.</span><span class="pln">remove</span><span class="pun">(</span><span class="str">'hidden'</span><span class="pun">);</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> startNextQuest</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'reward-container'</span><span class="pun">).</span><span class="pln">classList</span><span class="pun">.</span><span class="pln">add</span><span class="pun">(</span><span class="str">'hidden'</span><span class="pun">);</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'quest-container'</span><span class="pun">).</span><span class="pln">classList</span><span class="pun">.</span><span class="pln">remove</span><span class="pun">(</span><span class="str">'hidden'</span><span class="pun">);</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> window</span><span class="pun">.</span><span class="pln">onload </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'training-container'</span><span class="pun">).</span><span class="pln">classList</span><span class="pun">.</span><span class="pln">add</span><span class="pun">(</span><span class="str">'hidden'</span><span class="pun">);</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'quest-container'</span><span class="pun">).</span><span class="pln">classList</span><span class="pun">.</span><span class="pln">add</span><span class="pun">(</span><span class="str">'hidden'</span><span class="pun">);</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'battle-container'</span><span class="pun">).</span><span class="pln">classList</span><span class="pun">.</span><span class="pln">add</span><span class="pun">(</span><span class="str">'hidden'</span><span class="pun">);</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'reward-container'</span><span class="pun">).</span><span class="pln">classList</span><span class="pun">.</span><span class="pln">add</span><span class="pun">(</span><span class="str">'hidden'</span><span class="pun">);</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'equipment-container'</span><span class="pun">).</span><span class="pln">classList</span><span class="pun">.</span><span class="pln">add</span><span class="pun">(</span><span class="str">'hidden'</span><span class="pun">);</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'enhancement-container'</span><span class="pun">).</span><span class="pln">classList</span><span class="pun">.</span><span class="pln">add</span><span class="pun">(</span><span class="str">'hidden'</span><span class="pun">);</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'menu-container'</span><span class="pun">).</span><span class="pln">classList</span><span class="pun">.</span><span class="pln">remove</span><span class="pun">(</span><span class="str">'hidden'</span><span class="pun">);</span><span class="pln"> updateStatus</span><span class="pun">();</span><span class="pln"> </span><span class="pun">};</span><span class="pln"></span><span class="tag"></script></span><span class="pln"></span><span class="tag"></body></span><span class="pln"></span><span class="tag"></html></span> |
NekoNekodouga.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: white;
padding: 10px;
text-align: center;
position: fixed;
width: 100%;
top: 0;
z-index: 100;
}
header h1 {
margin: 0;
font-size: 24px;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 10px 0 0 0;
text-align: center;
}
nav ul li {
display: inline-block;
margin-right: 15px;
}
nav ul li a {
color: white;
text-decoration: none;
font-size: 16px;
}
#searchBar {
margin-top: 10px;
padding: 5px;
width: 300px;
max-width: 80%;
border: none;
border-radius: 4px;
}
.container {
margin-top: 100px;
padding: 20px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.upload-container, .video-info, .description, .comments, .related-videos, .gallery {
background-color: white;
padding: 20px;
margin-top: 20px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.upload-container h2, .video-info h2, .description h2, .comments h2, .related-videos h2, .gallery h2 {
margin-top: 0;
}
.upload-container form input[type="file"],
.upload-container form input[type="text"],
.upload-container form textarea,
.upload-container form select {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border-radius: 4px;
border: 1px solid #ccc;
}
.upload-container form button {
padding: 10px 20px;
background-color: #333;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.upload-container form button:hover {
background-color: #555;
}
.video-container {
position: relative;
text-align: center;
width: 100%;
max-width: 800px;
margin: 0 auto;
}
.video-container video {
width: 100%;
height: auto;
border-radius: 10px;
}
.comment-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 10;
}
.comment {
position: absolute;
white-space: nowrap;
font-size: 20px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
animation: moveComment linear forwards;
}
@keyframes moveComment {
from {
left: 100%;
}
to {
left: -100%;
}
}
.description p, .comments p, .gallery p {
margin: 10px 0;
}
.comments form textarea {
width: 100%;
padding: 10px;
border-radius: 4px;
border: 1px solid #ccc;
resize: vertical;
margin-bottom: 10px;
}
.comments form select {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border-radius: 4px;
}
.comments form button {
padding: 10px 20px;
background-color: #333;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.comments form button:hover {
background-color: #555;
}
.comment-list .comment {
background-color: #f9f9f9;
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
}
.like-button, .dislike-button {
background-color: #333;
color: white;
border: none;
padding: 5px 10px;
margin: 5px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.like-button:hover, .dislike-button:hover {
background-color: #555;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 20px;
margin-top: 40px;
}
footer p {
margin: 0;
}
@media (max-width: 768px) {
nav ul li {
display: block;
margin: 10px 0;
}
#searchBar {
width: 80%;
}
.video-container {
max-width: 100%;
}
}
</style>
</head>
<body>
<!-- ヘッダー開始 -->
<header>
<h1>ねこねこ動画</h1>
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">人気動画</a></li>
<li><a href="#">カテゴリ</a></li>
<li><a href="#">ログイン</a></li>
</ul>
</nav>
<input type="text" id="searchBar" placeholder="動画を検索..." />
</header>
<!-- ヘッダー終了 -->
<div class="container">
<!-- 動画アップロードエリア -->
<div class="upload-container">
<h2>動画をアップロード</h2>
<form id="uploadForm" enctype="multipart/form-data">
<input type="file" id="videoFile" name="video" accept="video/*" required><br>
<input type="text" id="videoTitle" name="title" placeholder="動画タイトル" required><br>
<textarea id="videoDescription" name="description" rows="4" placeholder="動画の説明" required></textarea><br>
<button type="submit">アップロード</button>
</form>
<div id="uploadStatus"></div>
</div>
<!-- プレビューエリア -->
<div class="video-container" id="previewContainer" style="display: none;">
<h2 id="previewTitle">プレビュー: 動画タイトル</h2>
<video controls id="videoPreview"></video>
<div class="comment-overlay" id="commentOverlay"></div>
<p id="previewDescription">プレビュー: 動画の説明</p>
</div>
<!-- コメント投稿エリア -->
<div class="comments">
<h2>コメントを投稿</h2>
<form id="commentForm">
<textarea id="commentText" rows="4" cols="50" placeholder="コメントを追加..." required></textarea><br>
<label for="commentTime">表示タイミング (秒):</label>
<input type="number" id="commentTime" placeholder="0" min="0" required><br>
<label for="commentColor">コメントの色:</label>
<select id="commentColor">
<option value="white">白</option>
<option value="red">赤</option>
<option value="blue">青</option>
<option value="green">緑</option>
<option value="yellow">黄色</option>
</select><br>
<label for="commentFontSize">フォントサイズ:</label>
<select id="commentFontSize">
<option value="20px">小</option>
<option value="24px">中</option>
<option value="28px">大</option>
</select><br>
<label for="commentSpeed">表示速度 (秒):</label>
<input type="number" id="commentSpeed" placeholder="10" min="5" max="20" required><br>
<button type="submit">投稿</button>
</form>
<div id="commentList" class="comment-list"></div>
</div>
<!-- 評価機能 -->
<div class="rating">
<button class="like-button" id="likeButton">
いいね</button>
<span id="likeCount">0</span>
<button class="dislike-button" id="dislikeButton">
バッド</button>
<span id="dislikeCount">0</span>
</div>
</div>
<!-- フッター開始 -->
<footer>
<p>© 2023 ねこねこ動画. All Rights Reserved.</p>
</footer>
<!-- フッター終了 -->
<script>
let comments = [];
// 動画のアップロードとプレビュー処理
document.getElementById("uploadForm").addEventListener("submit", function(event) {
event.preventDefault();
const fileInput = document.getElementById("videoFile");
const file = fileInput.files[0];
const title = document.getElementById("videoTitle").value;
const description = document.getElementById("videoDescription").value;
if (!file) {
alert("動画ファイルを選択してください。");
return;
}
const reader = new FileReader();
reader.onload = function(e) {
const videoData = e.target.result;
document.getElementById("previewContainer").style.display = "block";
document.getElementById("videoPreview").src = videoData;
document.getElementById("previewTitle").textContent = "プレビュー: " + title;
document.getElementById("previewDescription").textContent = "プレビュー: " + description;
};
reader.readAsDataURL(file);
});
// コメント投稿処理
document.getElementById("commentForm").addEventListener("submit", function(event) {
event.preventDefault();
const commentText = document.getElementById("commentText").value;
const commentTime = parseInt(document.getElementById("commentTime").value);
const commentColor = document.getElementById("commentColor").value;
const commentFontSize = document.getElementById("commentFontSize").value;
const commentSpeed = parseInt(document.getElementById("commentSpeed").value);
if (commentText && commentTime >= 0) {
const comment = {
text: commentText,
time: commentTime,
color: commentColor,
fontSize: commentFontSize,
speed: commentSpeed
};
comments.push(comment);
displayCommentInList(comment);
document.getElementById("commentForm").reset();
}
});
// コメントリストに表示
function displayCommentInList(comment) {
const commentList = document.getElementById("commentList");
const commentDiv = document.createElement("div");
commentDiv.classList.add("comment");
commentDiv.textContent = `タイミング: ${comment.time}秒 - ${comment.text}`;
commentList.appendChild(commentDiv);
}
// 動画の再生に合わせてコメントを表示
const videoElement = document.getElementById("videoPreview");
videoElement.addEventListener("timeupdate", function() {
const currentTime = Math.floor(videoElement.currentTime);
comments.forEach(comment => {
if (comment.time === currentTime) {
displayCommentOnVideo(comment);
}
});
});
// 動画上にコメントを流す
function displayCommentOnVideo(comment) {
const overlay = document.getElementById("commentOverlay");
const commentElement = document.createElement("div");
commentElement.classList.add("comment");
commentElement.textContent = comment.text;
commentElement.style.color = comment.color;
commentElement.style.fontSize = comment.fontSize;
commentElement.style.animationDuration = `${comment.speed}s`;
commentElement.style.top = Math.random() * 80 + "%"; // ランダムな位置
overlay.appendChild(commentElement);
// 一定時間後にコメントを削除
setTimeout(() => {
commentElement.remove();
}, comment.speed * 1000);
}
// いいね・バッド機能
document.getElementById("likeButton").addEventListener("click", function() {
let likeCount = parseInt(document.getElementById("likeCount").textContent);
likeCount++;
document.getElementById("likeCount").textContent = likeCount;
});
document.getElementById("dislikeButton").addEventListener("click", function() {
let dislikeCount = parseInt(document.getElementById("dislikeCount").textContent);
dislikeCount++;
document.getElementById("dislikeCount").textContent = dislikeCount;
});
</script>
</body>
</html>ELDER.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 774 775 776 777 778 779 780 781 782 783 784 785 786 787 788 789 790 791 792 793 794 795 796 797 798 799 800 801 802 803 804 805 806 807 808 809 810 811 812 813 814 815 816 817 818 819 820 821 822 823 824 825 826 827 828 829 830 831 832 833 834 835 836 837 838 839 840 841 842 843 844 845 846 847 848 849 850 851 852 853 854 855 856 857 858 859 860 861 862 863 864 865 866 867 868 869 870 871 872 873 874 875 876 877 878 879 880 881 882 883 884 885 886 887 888 889 890 891 892 893 894 895 896 897 898 899 900 901 902 903 904 905 906 907 908 909 910 911 912 | <span class="dec"><!DOCTYPE html></span><span class="pln"></span><span class="tag"><html</span><span class="pln"> </span><span class="atn">lang</span><span class="pun">=</span><span class="atv">"ja"</span><span class="tag">></span><span class="pln"></span><span class="tag"><head></span><span class="pln"> </span><span class="tag"><meta</span><span class="pln"> </span><span class="atn">charset</span><span class="pun">=</span><span class="atv">"UTF-8"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><meta</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"viewport"</span><span class="pln"> </span><span class="atn">content</span><span class="pun">=</span><span class="atv">"width=device-width, initial-scale=1.0"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><title></span><span class="pln">ELDER - ソーシャルネットワーキングサービス</span><span class="tag"></title></span><span class="pln"> </span><span class="com"><!-- CSSファイルの読み込み --></span><span class="pln"> </span><span class="tag"><link</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"stylesheet"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><link</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"stylesheet"</span><span class="tag">></span><span class="pln"> </span><span class="com"><!-- RiTa.jsライブラリの読み込み --></span><span class="pln"> </span><span class="tag"><script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"https://cdnjs.cloudflare.com/ajax/libs/rita/1.3.63/rita-full.min.js"</span><span class="tag">></script></span><span class="pln"> </span><span class="tag"><style></span><span class="pln"> </span><span class="com">/* 既存のスタイルシート */</span><span class="pln"> body </span><span class="pun">{</span><span class="pln"> padding</span><span class="pun">-</span><span class="pln">top</span><span class="pun">:</span><span class="pln"> </span><span class="lit">20px</span><span class="pun">;</span><span class="pln"> background</span><span class="pun">:</span><span class="pln"> linear</span><span class="pun">-</span><span class="pln">gradient</span><span class="pun">(</span><span class="pln">to right</span><span class="pun">,</span><span class="pln"> </span><span class="com">#f8f9fa, #e9ecef);</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">family</span><span class="pun">:</span><span class="pln"> </span><span class="str">'Arial'</span><span class="pun">,</span><span class="pln"> sans</span><span class="pun">-</span><span class="pln">serif</span><span class="pun">;</span><span class="pln"> color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#343a40;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">navbar </span><span class="pun">{</span><span class="pln"> background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#007bff;</span><span class="pln"> box</span><span class="pun">-</span><span class="pln">shadow</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="lit">4px</span><span class="pln"> </span><span class="lit">6px</span><span class="pln"> rgba</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0.1</span><span class="pun">);</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">navbar</span><span class="pun">-</span><span class="pln">brand</span><span class="pun">,</span><span class="pln"> </span><span class="pun">.</span><span class="pln">nav</span><span class="pun">-</span><span class="pln">link </span><span class="pun">{</span><span class="pln"> color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#fff !important;</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">weight</span><span class="pun">:</span><span class="pln"> bold</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">navbar</span><span class="pun">-</span><span class="pln">toggler </span><span class="pun">{</span><span class="pln"> border</span><span class="pun">:</span><span class="pln"> none</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">card </span><span class="pun">{</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">12px</span><span class="pun">;</span><span class="pln"> box</span><span class="pun">-</span><span class="pln">shadow</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="lit">4px</span><span class="pln"> </span><span class="lit">15px</span><span class="pln"> rgba</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0.1</span><span class="pun">);</span><span class="pln"> transition</span><span class="pun">:</span><span class="pln"> transform </span><span class="lit">0.3s</span><span class="pun">,</span><span class="pln"> box</span><span class="pun">-</span><span class="pln">shadow </span><span class="lit">0.3s</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">card</span><span class="pun">:</span><span class="pln">hover </span><span class="pun">{</span><span class="pln"> transform</span><span class="pun">:</span><span class="pln"> translateY</span><span class="pun">(-</span><span class="lit">5px</span><span class="pun">);</span><span class="pln"> box</span><span class="pun">-</span><span class="pln">shadow</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="lit">8px</span><span class="pln"> </span><span class="lit">20px</span><span class="pln"> rgba</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0.15</span><span class="pun">);</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">card</span><span class="pun">-</span><span class="pln">body </span><span class="pun">{</span><span class="pln"> padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">30px</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">form</span><span class="pun">-</span><span class="pln">control </span><span class="pun">{</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">20px</span><span class="pun">;</span><span class="pln"> border</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1px</span><span class="pln"> solid </span><span class="com">#ced4da;</span><span class="pln"> padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">15px</span><span class="pun">;</span><span class="pln"> transition</span><span class="pun">:</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">color </span><span class="lit">0.3s</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">form</span><span class="pun">-</span><span class="pln">control</span><span class="pun">:</span><span class="pln">focus </span><span class="pun">{</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#007bff;</span><span class="pln"> box</span><span class="pun">-</span><span class="pln">shadow</span><span class="pun">:</span><span class="pln"> none</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">btn</span><span class="pun">-</span><span class="pln">primary </span><span class="pun">{</span><span class="pln"> background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#007bff;</span><span class="pln"> border</span><span class="pun">:</span><span class="pln"> none</span><span class="pun">;</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">20px</span><span class="pun">;</span><span class="pln"> padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">10px</span><span class="pln"> </span><span class="lit">20px</span><span class="pun">;</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">weight</span><span class="pun">:</span><span class="pln"> bold</span><span class="pun">;</span><span class="pln"> transition</span><span class="pun">:</span><span class="pln"> background</span><span class="pun">-</span><span class="pln">color </span><span class="lit">0.3s</span><span class="pun">,</span><span class="pln"> transform </span><span class="lit">0.3s</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">btn</span><span class="pun">-</span><span class="pln">primary</span><span class="pun">:</span><span class="pln">hover </span><span class="pun">{</span><span class="pln"> background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#0056b3;</span><span class="pln"> transform</span><span class="pun">:</span><span class="pln"> translateY</span><span class="pun">(-</span><span class="lit">3px</span><span class="pun">);</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">btn</span><span class="pun">-</span><span class="pln">secondary </span><span class="pun">{</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">20px</span><span class="pun">;</span><span class="pln"> padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">10px</span><span class="pln"> </span><span class="lit">20px</span><span class="pun">;</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">weight</span><span class="pun">:</span><span class="pln"> bold</span><span class="pun">;</span><span class="pln"> transition</span><span class="pun">:</span><span class="pln"> background</span><span class="pun">-</span><span class="pln">color </span><span class="lit">0.3s</span><span class="pun">,</span><span class="pln"> transform </span><span class="lit">0.3s</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">btn</span><span class="pun">-</span><span class="pln">secondary</span><span class="pun">:</span><span class="pln">hover </span><span class="pun">{</span><span class="pln"> background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#6c757d;</span><span class="pln"> transform</span><span class="pun">:</span><span class="pln"> translateY</span><span class="pun">(-</span><span class="lit">3px</span><span class="pun">);</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">profile</span><span class="pun">-</span><span class="pln">img </span><span class="pun">{</span><span class="pln"> width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">80px</span><span class="pun">;</span><span class="pln"> height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">80px</span><span class="pun">;</span><span class="pln"> </span><span class="kwd">object</span><span class="pun">-</span><span class="pln">fit</span><span class="pun">:</span><span class="pln"> cover</span><span class="pun">;</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">50</span><span class="pun">%;</span><span class="pln"> box</span><span class="pun">-</span><span class="pln">shadow</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="lit">2px</span><span class="pln"> </span><span class="lit">6px</span><span class="pln"> rgba</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0.15</span><span class="pun">);</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">text</span><span class="pun">-</span><span class="pln">center h1 </span><span class="pun">{</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">weight</span><span class="pun">:</span><span class="pln"> </span><span class="lit">700</span><span class="pun">;</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="pln"> </span><span class="lit">2.5em</span><span class="pun">;</span><span class="pln"> margin</span><span class="pun">-</span><span class="pln">bottom</span><span class="pun">:</span><span class="pln"> </span><span class="lit">20px</span><span class="pun">;</span><span class="pln"> color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#007bff;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">comment</span><span class="pun">-</span><span class="pln">section </span><span class="pun">{</span><span class="pln"> margin</span><span class="pun">-</span><span class="pln">top</span><span class="pun">:</span><span class="pln"> </span><span class="lit">20px</span><span class="pun">;</span><span class="pln"> padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">20px</span><span class="pun">;</span><span class="pln"> background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#f1f3f5;</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">8px</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">comment</span><span class="pun">-</span><span class="pln">section </span><span class="pun">.</span><span class="pln">card </span><span class="pun">{</span><span class="pln"> border</span><span class="pun">:</span><span class="pln"> none</span><span class="pun">;</span><span class="pln"> background</span><span class="pun">:</span><span class="pln"> </span><span class="com">#ffffff;</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">8px</span><span class="pun">;</span><span class="pln"> box</span><span class="pun">-</span><span class="pln">shadow</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="lit">2px</span><span class="pln"> </span><span class="lit">8px</span><span class="pln"> rgba</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0.1</span><span class="pun">);</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">modal</span><span class="pun">-</span><span class="pln">content </span><span class="pun">{</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">15px</span><span class="pun">;</span><span class="pln"> overflow</span><span class="pun">:</span><span class="pln"> hidden</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">modal</span><span class="pun">-</span><span class="pln">header </span><span class="pun">{</span><span class="pln"> background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#007bff;</span><span class="pln"> color</span><span class="pun">:</span><span class="pln"> white</span><span class="pun">;</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">bottom</span><span class="pun">:</span><span class="pln"> none</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">modal</span><span class="pun">-</span><span class="pln">footer </span><span class="pun">{</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">top</span><span class="pun">:</span><span class="pln"> none</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">form</span><span class="pun">-</span><span class="pln">error </span><span class="pun">{</span><span class="pln"> color</span><span class="pun">:</span><span class="pln"> red</span><span class="pun">;</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0.9em</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="com">/* タイムラインのデザイン */</span><span class="pln"> </span><span class="com">#timeline {</span><span class="pln"> margin</span><span class="pun">-</span><span class="pln">top</span><span class="pun">:</span><span class="pln"> </span><span class="lit">20px</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="com">#timeline .card {</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">15px</span><span class="pun">;</span><span class="pln"> box</span><span class="pun">-</span><span class="pln">shadow</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="lit">4px</span><span class="pln"> </span><span class="lit">10px</span><span class="pln"> rgba</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0.1</span><span class="pun">);</span><span class="pln"> margin</span><span class="pun">-</span><span class="pln">bottom</span><span class="pun">:</span><span class="pln"> </span><span class="lit">20px</span><span class="pun">;</span><span class="pln"> overflow</span><span class="pun">:</span><span class="pln"> hidden</span><span class="pun">;</span><span class="pln"> background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#fff;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="com">#timeline .card-body {</span><span class="pln"> padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">20px</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="com">#timeline .btn {</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">20px</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="com">/* 投稿のシェアボタン */</span><span class="pln"> </span><span class="pun">.</span><span class="pln">btn</span><span class="pun">-</span><span class="pln">share </span><span class="pun">{</span><span class="pln"> background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#ff9800;</span><span class="pln"> border</span><span class="pun">:</span><span class="pln"> none</span><span class="pun">;</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">20px</span><span class="pun">;</span><span class="pln"> padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">5px</span><span class="pln"> </span><span class="lit">10px</span><span class="pun">;</span><span class="pln"> color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#fff;</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">weight</span><span class="pun">:</span><span class="pln"> bold</span><span class="pun">;</span><span class="pln"> transition</span><span class="pun">:</span><span class="pln"> background</span><span class="pun">-</span><span class="pln">color </span><span class="lit">0.3s</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">btn</span><span class="pun">-</span><span class="pln">share</span><span class="pun">:</span><span class="pln">hover </span><span class="pun">{</span><span class="pln"> background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#e68900;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="com">/* X（旧Twitter）シェアボタン */</span><span class="pln"> </span><span class="pun">.</span><span class="pln">btn</span><span class="pun">-</span><span class="pln">share</span><span class="pun">-</span><span class="pln">twitter </span><span class="pun">{</span><span class="pln"> background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#1da1f2;</span><span class="pln"> border</span><span class="pun">:</span><span class="pln"> none</span><span class="pun">;</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">20px</span><span class="pun">;</span><span class="pln"> padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">5px</span><span class="pln"> </span><span class="lit">10px</span><span class="pun">;</span><span class="pln"> color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#fff;</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">weight</span><span class="pun">:</span><span class="pln"> bold</span><span class="pun">;</span><span class="pln"> transition</span><span class="pun">:</span><span class="pln"> background</span><span class="pun">-</span><span class="pln">color </span><span class="lit">0.3s</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">btn</span><span class="pun">-</span><span class="pln">share</span><span class="pun">-</span><span class="pln">twitter</span><span class="pun">:</span><span class="pln">hover </span><span class="pun">{</span><span class="pln"> background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#1480bf;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="com">/* 通知エリア */</span><span class="pln"> </span><span class="com">#notificationArea {</span><span class="pln"> position</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">fixed</span><span class="pun">;</span><span class="pln"> top</span><span class="pun">:</span><span class="pln"> </span><span class="lit">80px</span><span class="pun">;</span><span class="pln"> right</span><span class="pun">:</span><span class="pln"> </span><span class="lit">20px</span><span class="pun">;</span><span class="pln"> z</span><span class="pun">-</span><span class="pln">index</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1000</span><span class="pun">;</span><span class="pln"> max</span><span class="pun">-</span><span class="pln">width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">300px</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="com">/* FEEDアイコンをRSSの文字に変更 */</span><span class="pln"> </span><span class="pun">.</span><span class="pln">nav</span><span class="pun">-</span><span class="pln">item </span><span class="pun">.</span><span class="pln">rss</span><span class="pun">-</span><span class="pln">icon </span><span class="pun">{</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">weight</span><span class="pun">:</span><span class="pln"> bold</span><span class="pun">;</span><span class="pln"> color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#fff;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="tag"></style></span><span class="pln"></span><span class="tag"></head></span><span class="pln"></span><span class="tag"><body></span><span class="pln"></span><span class="com"><!-- ナビゲーションバー --></span><span class="pln"></span><span class="tag"><nav</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"navbar navbar-expand-lg navbar-light bg-light"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><a</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"navbar-brand"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">></span><span class="pln">ELDER</span><span class="tag"></a></span><span class="pln"> </span><span class="tag"><button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"navbar-toggler"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">data-toggle</span><span class="pun">=</span><span class="atv">"collapse"</span><span class="pln"> </span><span class="atn">data-target</span><span class="pun">=</span><span class="atv">"#navbarNav"</span><span class="pln"> </span><span class="atn">aria-controls</span><span class="pun">=</span><span class="atv">"navbarNav"</span><span class="pln"> </span><span class="atn">aria-expanded</span><span class="pun">=</span><span class="atv">"false"</span><span class="pln"> </span><span class="atn">aria-label</span><span class="pun">=</span><span class="atv">"ナビゲーションの切り替え"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"navbar-toggler-icon"</span><span class="tag">></span></span><span class="pln"> </span><span class="tag"></button></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"collapse navbar-collapse"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"navbarNav"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><ul</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"navbar-nav ml-auto"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"nav-item"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><a</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"nav-link"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="pln"> </span><span class="atn">onclick</span><span class="pun">=</span><span class="atv">"</span><span class="pln">showLoginForm</span><span class="pun">()</span><span class="atv">"</span><span class="tag">></span><span class="pln">ログイン</span><span class="tag"></a></span><span class="pln"> </span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"nav-item"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><a</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"nav-link"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="pln"> </span><span class="atn">onclick</span><span class="pun">=</span><span class="atv">"</span><span class="pln">showRegisterForm</span><span class="pun">()</span><span class="atv">"</span><span class="tag">></span><span class="pln">登録</span><span class="tag"></a></span><span class="pln"> </span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"nav-item"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><a</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"nav-link"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="pln"> </span><span class="atn">onclick</span><span class="pun">=</span><span class="atv">"</span><span class="pln">showProfile</span><span class="pun">()</span><span class="atv">"</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">display</span><span class="pun">:</span><span class="pln"> none</span><span class="pun">;</span><span class="atv">"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"navProfile"</span><span class="tag">></span><span class="pln">プロフィール</span><span class="tag"></a></span><span class="pln"> </span><span class="tag"></li></span><span class="pln"> </span><span class="tag"><li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"nav-item"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><a</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"nav-link"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="pln"> </span><span class="atn">onclick</span><span class="pun">=</span><span class="atv">"</span><span class="pln">logout</span><span class="pun">()</span><span class="atv">"</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">display</span><span class="pun">:</span><span class="pln"> none</span><span class="pun">;</span><span class="atv">"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"navLogout"</span><span class="tag">></span><span class="pln">ログアウト</span><span class="tag"></a></span><span class="pln"> </span><span class="tag"></li></span><span class="pln"> </span><span class="com"><!-- FEEDアイコンをRSSの文字に変更 --></span><span class="pln"> </span><span class="tag"><li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"nav-item"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"navFeed"</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">display</span><span class="pun">:</span><span class="pln"> none</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><a</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"nav-link rss-icon"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="pln"> </span><span class="atn">onclick</span><span class="pun">=</span><span class="atv">"</span><span class="pln">showFeedForm</span><span class="pun">()</span><span class="atv">"</span><span class="tag">></span><span class="pln">RSS</span><span class="tag"></a></span><span class="pln"> </span><span class="tag"></li></span><span class="pln"> </span><span class="tag"></ul></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"></span><span class="tag"></nav></span><span class="pln"></span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"container"</span><span class="tag">></span><span class="pln"> </span><span class="com"><!-- ログインフォーム --></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"loginForm"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card w-50 mx-auto"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card-body"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><h2</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card-title text-center mb-4"</span><span class="tag">></span><span class="pln">ログイン</span><span class="tag"></h2></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"loginUsername"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"ユーザー名"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><span</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"loginUsernameError"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-error"</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">display</span><span class="pun">:</span><span class="pln"> none</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln">ユーザー名を入力してください</span><span class="tag"></span></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"password"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"loginPassword"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"パスワード"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><span</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"loginPasswordError"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-error"</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">display</span><span class="pun">:</span><span class="pln"> none</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln">パスワードを入力してください</span><span class="tag"></span></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"><button</span><span class="pln"> </span><span class="atn">onclick</span><span class="pun">=</span><span class="atv">"</span><span class="pln">login</span><span class="pun">()</span><span class="atv">"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-primary btn-block"</span><span class="tag">></span><span class="pln">ログイン</span><span class="tag"></button></span><span class="pln"> </span><span class="tag"><button</span><span class="pln"> </span><span class="atn">onclick</span><span class="pun">=</span><span class="atv">"</span><span class="pln">showRegisterForm</span><span class="pun">()</span><span class="atv">"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-secondary btn-block"</span><span class="tag">></span><span class="pln">登録</span><span class="tag"></button></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="com"><!-- 登録フォーム --></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"registerForm"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card w-50 mx-auto"</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">display</span><span class="pun">:</span><span class="pln"> none</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card-body"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><h2</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card-title text-center mb-4"</span><span class="tag">></span><span class="pln">登録</span><span class="tag"></h2></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"registerName"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"氏名"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><span</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"registerNameError"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-error"</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">display</span><span class="pun">:</span><span class="pln"> none</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln">氏名を入力してください</span><span class="tag"></span></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"registerUsername"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"ユーザー名"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><span</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"registerUsernameError"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-error"</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">display</span><span class="pun">:</span><span class="pln"> none</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln">ユーザー名を入力してください</span><span class="tag"></span></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"password"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"registerPassword"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"パスワード"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><span</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"registerPasswordError"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-error"</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">display</span><span class="pun">:</span><span class="pln"> none</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln">パスワードを入力してください</span><span class="tag"></span></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"password"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"registerConfirmPassword"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"パスワードを確認"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><span</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"registerConfirmPasswordError"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-error"</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">display</span><span class="pun">:</span><span class="pln"> none</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln">パスワードが一致しません</span><span class="tag"></span></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"><button</span><span class="pln"> </span><span class="atn">onclick</span><span class="pun">=</span><span class="atv">"</span><span class="kwd">register</span><span class="pun">()</span><span class="atv">"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-primary btn-block"</span><span class="tag">></span><span class="pln">登録</span><span class="tag"></button></span><span class="pln"> </span><span class="tag"><button</span><span class="pln"> </span><span class="atn">onclick</span><span class="pun">=</span><span class="atv">"</span><span class="pln">showLoginForm</span><span class="pun">()</span><span class="atv">"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-secondary btn-block"</span><span class="tag">></span><span class="pln">ログインに戻る</span><span class="tag"></button></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="com"><!-- プロフィール --></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"profile"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card w-50 mx-auto"</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">display</span><span class="pun">:</span><span class="pln"> none</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card-body"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><h2</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card-title text-center mb-4"</span><span class="tag">></span><span class="pln">プロフィール</span><span class="tag"></h2></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text-center mb-3"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><img</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"profileImg"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"profile-img"</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"default_profile_img.jpg"</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">"プロフィール画像"</span><span class="tag">></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"><p</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text-center mb-2"</span><span class="tag">><strong></span><span class="pln">氏名:</span><span class="tag"></strong></span><span class="pln"> </span><span class="tag"><span</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"profileName"</span><span class="tag">></span></p></span><span class="pln"> </span><span class="tag"><p</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text-center mb-4"</span><span class="tag">><strong></span><span class="pln">ユーザー名:</span><span class="tag"></strong></span><span class="pln"> </span><span class="tag"><span</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"profileUsername"</span><span class="tag">></span></p></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"file"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"profileImageInput"</span><span class="pln"> </span><span class="atn">accept</span><span class="pun">=</span><span class="atv">"image/*"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control-file"</span><span class="tag">></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"><button</span><span class="pln"> </span><span class="atn">onclick</span><span class="pun">=</span><span class="atv">"</span><span class="pln">uploadProfileImage</span><span class="pun">()</span><span class="atv">"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-primary btn-block"</span><span class="tag">><i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"fas fa-upload"</span><span class="tag">></i></span><span class="pln"> プロフィール画像をアップロード</span><span class="tag"></button></span><span class="pln"> </span><span class="tag"><button</span><span class="pln"> </span><span class="atn">onclick</span><span class="pun">=</span><span class="atv">"</span><span class="pln">logout</span><span class="pun">()</span><span class="atv">"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-danger btn-block"</span><span class="tag">><i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"fas fa-sign-out-alt"</span><span class="tag">></i></span><span class="pln"> ログアウト</span><span class="tag"></button></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="com"><!-- 投稿フォーム --></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"postForm"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card w-75 mx-auto"</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">display</span><span class="pun">:</span><span class="pln"> none</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card-body"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><h2</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card-title text-center mb-4"</span><span class="tag">></span><span class="pln">投稿を作成</span><span class="tag"></h2></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><textarea</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"postContent"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">rows</span><span class="pun">=</span><span class="atv">"3"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"今何を考えていますか？"</span><span class="tag">></textarea></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"><button</span><span class="pln"> </span><span class="atn">onclick</span><span class="pun">=</span><span class="atv">"</span><span class="pln">createPost</span><span class="pun">()</span><span class="atv">"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-primary btn-block"</span><span class="tag">></span><span class="pln">投稿</span><span class="tag"></button></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="com"><!-- FEED登録フォーム --></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"feedForm"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card w-75 mx-auto"</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">display</span><span class="pun">:</span><span class="pln"> none</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card-body"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><h2</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card-title text-center mb-4"</span><span class="tag">></span><span class="pln">FEEDを登録</span><span class="tag"></h2></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"feedUrl"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"RSSフィードのURL"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><span</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"feedUrlError"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-error"</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">display</span><span class="pun">:</span><span class="pln"> none</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln">RSSフィードのURLを入力してください</span><span class="tag"></span></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"><button</span><span class="pln"> </span><span class="atn">onclick</span><span class="pun">=</span><span class="atv">"</span><span class="pln">registerFeed</span><span class="pun">()</span><span class="atv">"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-primary btn-block"</span><span class="tag">></span><span class="pln">登録</span><span class="tag"></button></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group mt-4"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"feedInterval"</span><span class="tag">></span><span class="pln">自動投稿の間隔（秒）:</span><span class="tag"></label></span><span class="pln"> </span><span class="tag"><input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"number"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"feedInterval"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"例：60"</span><span class="pln"> </span><span class="atn">min</span><span class="pun">=</span><span class="atv">"1"</span><span class="tag">></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"><button</span><span class="pln"> </span><span class="atn">onclick</span><span class="pun">=</span><span class="atv">"</span><span class="pln">setFeedInterval</span><span class="pun">()</span><span class="atv">"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-secondary btn-block"</span><span class="tag">></span><span class="pln">間隔を設定</span><span class="tag"></button></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="com"><!-- AIBOT投稿登録フォーム --></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"aiBotForm"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card w-75 mx-auto"</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">display</span><span class="pun">:</span><span class="pln"> none</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card-body"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><h2</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card-title text-center mb-4"</span><span class="tag">></span><span class="pln">BOT投稿を登録</span><span class="tag"></h2></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><textarea</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"aiBotContent"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">rows</span><span class="pun">=</span><span class="atv">"3"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"BOTに投稿させたい内容を入力してください"</span><span class="tag">></textarea></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"><button</span><span class="pln"> </span><span class="atn">onclick</span><span class="pun">=</span><span class="atv">"</span><span class="pln">registerAiBotPost</span><span class="pun">()</span><span class="atv">"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-primary btn-block"</span><span class="tag">></span><span class="pln">BOT投稿を登録</span><span class="tag"></button></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="com"><!-- タイムライン --></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"timeline"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"w-75 mx-auto mt-4"</span><span class="tag">></div></span><span class="pln"> </span><span class="com"><!-- 通知エリア --></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"notificationArea"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"alert alert-info"</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">display</span><span class="pun">:</span><span class="pln"> none</span><span class="pun">;</span><span class="atv">"</span><span class="tag">></div></span><span class="pln"></span><span class="tag"></div></span><span class="pln"></span><span class="com"><!-- リプライモーダル --></span><span class="pln"></span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"modal fade"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"replyModal"</span><span class="pln"> </span><span class="atn">tabindex</span><span class="pun">=</span><span class="atv">"-1"</span><span class="pln"> </span><span class="atn">role</span><span class="pun">=</span><span class="atv">"dialog"</span><span class="pln"> </span><span class="atn">aria-labelledby</span><span class="pun">=</span><span class="atv">"replyModalLabel"</span><span class="pln"> </span><span class="atn">aria-hidden</span><span class="pun">=</span><span class="atv">"true"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"modal-dialog"</span><span class="pln"> </span><span class="atn">role</span><span class="pun">=</span><span class="atv">"document"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"modal-content"</span><span class="tag">></span><span class="pln"> </span><span class="com"><!-- モーダルの内容は後ほどJavaScriptで制御します --></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"modal-header"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><h5</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"modal-title"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"replyModalLabel"</span><span class="tag">></span><span class="pln">投稿に返信</span><span class="tag"></h5></span><span class="pln"> </span><span class="tag"><button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"close"</span><span class="pln"> </span><span class="atn">data-dismiss</span><span class="pun">=</span><span class="atv">"modal"</span><span class="pln"> </span><span class="atn">aria-label</span><span class="pun">=</span><span class="atv">"閉じる"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><span</span><span class="pln"> </span><span class="atn">aria-hidden</span><span class="pun">=</span><span class="atv">"true"</span><span class="tag">></span><span class="pln">×</span><span class="tag"></span></span><span class="pln"> </span><span class="tag"></button></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"modal-body"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><textarea</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"replyContent"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">rows</span><span class="pun">=</span><span class="atv">"3"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"返信をここに書いてください..."</span><span class="tag">></textarea></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"modal-footer"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-secondary"</span><span class="pln"> </span><span class="atn">data-dismiss</span><span class="pun">=</span><span class="atv">"modal"</span><span class="tag">></span><span class="pln">閉じる</span><span class="tag"></button></span><span class="pln"> </span><span class="tag"><button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">onclick</span><span class="pun">=</span><span class="atv">"</span><span class="pln">postReply</span><span class="pun">()</span><span class="atv">"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-primary"</span><span class="tag">></span><span class="pln">返信</span><span class="tag"></button></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"></span><span class="tag"></div></span><span class="pln"></span><span class="com"><!-- スクリプトの読み込み --></span><span class="pln"></span><span class="tag"><script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"https://code.jquery.com/jquery-3.5.1.slim.min.js"</span><span class="tag">></script></span><span class="pln"></span><span class="com"><!-- BootstrapのJavaScript --></span><span class="pln"></span><span class="tag"><script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"</span><span class="tag">></script></span><span class="pln"></span><span class="com"><!-- RiTa.jsライブラリの読み込み（既にhead内で読み込み済み） --></span><span class="pln"></span><span class="tag"><script></span><span class="pln"> </span><span class="com">// ユーザー、投稿、フィード、チャット関連のデータ</span><span class="pln"> </span><span class="kwd">let</span><span class="pln"> currentUser </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">null</span><span class="pun">;</span><span class="pln"> </span><span class="kwd">let</span><span class="pln"> users </span><span class="pun">=</span><span class="pln"> </span><span class="pun">[];</span><span class="pln"> </span><span class="kwd">let</span><span class="pln"> posts </span><span class="pun">=</span><span class="pln"> </span><span class="pun">[];</span><span class="pln"> </span><span class="kwd">let</span><span class="pln"> feeds </span><span class="pun">=</span><span class="pln"> </span><span class="pun">[];</span><span class="pln"> </span><span class="kwd">let</span><span class="pln"> notifications </span><span class="pun">=</span><span class="pln"> </span><span class="pun">[];</span><span class="pln"> </span><span class="kwd">let</span><span class="pln"> aiBotPosts </span><span class="pun">=</span><span class="pln"> </span><span class="pun">[];</span><span class="pln"> </span><span class="kwd">let</span><span class="pln"> feedFetchInterval </span><span class="pun">=</span><span class="pln"> </span><span class="lit">60000</span><span class="pun">;</span><span class="pln"> </span><span class="com">// デフォルトは60,000ミリ秒（60秒）</span><span class="pln"> </span><span class="kwd">let</span><span class="pln"> feedFetchTimer</span><span class="pun">;</span><span class="pln"> </span><span class="kwd">let</span><span class="pln"> markovBotInterval </span><span class="pun">=</span><span class="pln"> </span><span class="lit">60000</span><span class="pun">;</span><span class="pln"> </span><span class="com">// マルコフ連鎖BOTの投稿間隔</span><span class="pln"> </span><span class="com">// ローカルストレージの読み込み・保存関連の関数</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> saveUsersToLocalStorage</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> localStorage</span><span class="pun">.</span><span class="pln">setItem</span><span class="pun">(</span><span class="str">'users'</span><span class="pun">,</span><span class="pln"> JSON</span><span class="pun">.</span><span class="pln">stringify</span><span class="pun">(</span><span class="pln">users</span><span class="pun">));</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> savePostsToLocalStorage</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> localStorage</span><span class="pun">.</span><span class="pln">setItem</span><span class="pun">(</span><span class="str">'posts'</span><span class="pun">,</span><span class="pln"> JSON</span><span class="pun">.</span><span class="pln">stringify</span><span class="pun">(</span><span class="pln">posts</span><span class="pun">));</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> saveFeedsToLocalStorage</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> localStorage</span><span class="pun">.</span><span class="pln">setItem</span><span class="pun">(</span><span class="str">'feeds'</span><span class="pun">,</span><span class="pln"> JSON</span><span class="pun">.</span><span class="pln">stringify</span><span class="pun">(</span><span class="pln">feeds</span><span class="pun">));</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> saveAiBotPostsToLocalStorage</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> localStorage</span><span class="pun">.</span><span class="pln">setItem</span><span class="pun">(</span><span class="str">'aiBotPosts'</span><span class="pun">,</span><span class="pln"> JSON</span><span class="pun">.</span><span class="pln">stringify</span><span class="pun">(</span><span class="pln">aiBotPosts</span><span class="pun">));</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> saveCurrentUserToLocalStorage</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">currentUser</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> localStorage</span><span class="pun">.</span><span class="pln">setItem</span><span class="pun">(</span><span class="str">'currentUser'</span><span class="pun">,</span><span class="pln"> JSON</span><span class="pun">.</span><span class="pln">stringify</span><span class="pun">(</span><span class="pln">currentUser</span><span class="pun">));</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> localStorage</span><span class="pun">.</span><span class="pln">removeItem</span><span class="pun">(</span><span class="str">'currentUser'</span><span class="pun">);</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> loadUsersFromLocalStorage</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> storedUsers </span><span class="pun">=</span><span class="pln"> localStorage</span><span class="pun">.</span><span class="pln">getItem</span><span class="pun">(</span><span class="str">'users'</span><span class="pun">);</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">storedUsers</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> users </span><span class="pun">=</span><span class="pln"> JSON</span><span class="pun">.</span><span class="pln">parse</span><span class="pun">(</span><span class="pln">storedUsers</span><span class="pun">);</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> loadPostsFromLocalStorage</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> storedPosts </span><span class="pun">=</span><span class="pln"> localStorage</span><span class="pun">.</span><span class="pln">getItem</span><span class="pun">(</span><span class="str">'posts'</span><span class="pun">);</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">storedPosts</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> posts </span><span class="pun">=</span><span class="pln"> JSON</span><span class="pun">.</span><span class="pln">parse</span><span class="pun">(</span><span class="pln">storedPosts</span><span class="pun">);</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> loadFeedsFromLocalStorage</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> storedFeeds </span><span class="pun">=</span><span class="pln"> localStorage</span><span class="pun">.</span><span class="pln">getItem</span><span class="pun">(</span><span class="str">'feeds'</span><span class="pun">);</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">storedFeeds</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> feeds </span><span class="pun">=</span><span class="pln"> JSON</span><span class="pun">.</span><span class="pln">parse</span><span class="pun">(</span><span class="pln">storedFeeds</span><span class="pun">);</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> loadAiBotPostsFromLocalStorage</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> storedAiBotPosts </span><span class="pun">=</span><span class="pln"> localStorage</span><span class="pun">.</span><span class="pln">getItem</span><span class="pun">(</span><span class="str">'aiBotPosts'</span><span class="pun">);</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">storedAiBotPosts</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> aiBotPosts </span><span class="pun">=</span><span class="pln"> JSON</span><span class="pun">.</span><span class="pln">parse</span><span class="pun">(</span><span class="pln">storedAiBotPosts</span><span class="pun">);</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> loadCurrentUserFromLocalStorage</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> storedCurrentUser </span><span class="pun">=</span><span class="pln"> localStorage</span><span class="pun">.</span><span class="pln">getItem</span><span class="pun">(</span><span class="str">'currentUser'</span><span class="pun">);</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">storedCurrentUser</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> currentUser </span><span class="pun">=</span><span class="pln"> JSON</span><span class="pun">.</span><span class="pln">parse</span><span class="pun">(</span><span class="pln">storedCurrentUser</span><span class="pun">);</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="com">// フォームの表示・非表示</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> hideAll</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'loginForm'</span><span class="pun">).</span><span class="pln">style</span><span class="pun">.</span><span class="pln">display </span><span class="pun">=</span><span class="pln"> </span><span class="str">'none'</span><span class="pun">;</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'registerForm'</span><span class="pun">).</span><span class="pln">style</span><span class="pun">.</span><span class="pln">display </span><span class="pun">=</span><span class="pln"> </span><span class="str">'none'</span><span class="pun">;</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'profile'</span><span class="pun">).</span><span class="pln">style</span><span class="pun">.</span><span class="pln">display </span><span class="pun">=</span><span class="pln"> </span><span class="str">'none'</span><span class="pun">;</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'postForm'</span><span class="pun">).</span><span class="pln">style</span><span class="pun">.</span><span class="pln">display </span><span class="pun">=</span><span class="pln"> </span><span class="str">'none'</span><span class="pun">;</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'feedForm'</span><span class="pun">).</span><span class="pln">style</span><span class="pun">.</span><span class="pln">display </span><span class="pun">=</span><span class="pln"> </span><span class="str">'none'</span><span class="pun">;</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'aiBotForm'</span><span class="pun">).</span><span class="pln">style</span><span class="pun">.</span><span class="pln">display </span><span class="pun">=</span><span class="pln"> </span><span class="str">'none'</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> showLoginForm</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> hideAll</span><span class="pun">();</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'loginForm'</span><span class="pun">).</span><span class="pln">style</span><span class="pun">.</span><span class="pln">display </span><span class="pun">=</span><span class="pln"> </span><span class="str">'block'</span><span class="pun">;</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'navProfile'</span><span class="pun">).</span><span class="pln">style</span><span class="pun">.</span><span class="pln">display </span><span class="pun">=</span><span class="pln"> </span><span class="str">'none'</span><span class="pun">;</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'navLogout'</span><span class="pun">).</span><span class="pln">style</span><span class="pun">.</span><span class="pln">display </span><span class="pun">=</span><span class="pln"> </span><span class="str">'none'</span><span class="pun">;</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'navFeed'</span><span class="pun">).</span><span class="pln">style</span><span class="pun">.</span><span class="pln">display </span><span class="pun">=</span><span class="pln"> </span><span class="str">'none'</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> showRegisterForm</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> hideAll</span><span class="pun">();</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'registerForm'</span><span class="pun">).</span><span class="pln">style</span><span class="pun">.</span><span class="pln">display </span><span class="pun">=</span><span class="pln"> </span><span class="str">'block'</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> showProfile</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> hideAll</span><span class="pun">();</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'profile'</span><span class="pun">).</span><span class="pln">style</span><span class="pun">.</span><span class="pln">display </span><span class="pun">=</span><span class="pln"> </span><span class="str">'block'</span><span class="pun">;</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'profileName'</span><span class="pun">).</span><span class="pln">textContent </span><span class="pun">=</span><span class="pln"> currentUser</span><span class="pun">.</span><span class="pln">name</span><span class="pun">;</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'profileUsername'</span><span class="pun">).</span><span class="pln">textContent </span><span class="pun">=</span><span class="pln"> currentUser</span><span class="pun">.</span><span class="pln">username</span><span class="pun">;</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'postForm'</span><span class="pun">).</span><span class="pln">style</span><span class="pun">.</span><span class="pln">display </span><span class="pun">=</span><span class="pln"> </span><span class="str">'block'</span><span class="pun">;</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'feedForm'</span><span class="pun">).</span><span class="pln">style</span><span class="pun">.</span><span class="pln">display </span><span class="pun">=</span><span class="pln"> </span><span class="str">'block'</span><span class="pun">;</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'aiBotForm'</span><span class="pun">).</span><span class="pln">style</span><span class="pun">.</span><span class="pln">display </span><span class="pun">=</span><span class="pln"> </span><span class="str">'block'</span><span class="pun">;</span><span class="pln"> loadProfileImage</span><span class="pun">();</span><span class="pln"> </span><span class="com">// プロフィール画像をロード</span><span class="pln"> displayTimeline</span><span class="pun">();</span><span class="pln"> </span><span class="com">// タイムラインを表示</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'navProfile'</span><span class="pun">).</span><span class="pln">style</span><span class="pun">.</span><span class="pln">display </span><span class="pun">=</span><span class="pln"> </span><span class="str">'block'</span><span class="pun">;</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'navLogout'</span><span class="pun">).</span><span class="pln">style</span><span class="pun">.</span><span class="pln">display </span><span class="pun">=</span><span class="pln"> </span><span class="str">'block'</span><span class="pun">;</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'navFeed'</span><span class="pun">).</span><span class="pln">style</span><span class="pun">.</span><span class="pln">display </span><span class="pun">=</span><span class="pln"> </span><span class="str">'block'</span><span class="pun">;</span><span class="pln"> </span><span class="com">// RSSナビゲーションを表示</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> showFeedForm</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> hideAll</span><span class="pun">();</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'feedForm'</span><span class="pun">).</span><span class="pln">style</span><span class="pun">.</span><span class="pln">display </span><span class="pun">=</span><span class="pln"> </span><span class="str">'block'</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="com">// ユーザー認証関連の関数</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> validateLoginForm</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">let</span><span class="pln"> valid </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">;</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> username </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'loginUsername'</span><span class="pun">).</span><span class="pln">value</span><span class="pun">;</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> password </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'loginPassword'</span><span class="pun">).</span><span class="pln">value</span><span class="pun">;</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(!</span><span class="pln">username</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'loginUsernameError'</span><span class="pun">).</span><span class="pln">style</span><span class="pun">.</span><span class="pln">display </span><span class="pun">=</span><span class="pln"> </span><span class="str">'block'</span><span class="pun">;</span><span class="pln"> valid </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'loginUsernameError'</span><span class="pun">).</span><span class="pln">style</span><span class="pun">.</span><span class="pln">display </span><span class="pun">=</span><span class="pln"> </span><span class="str">'none'</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(!</span><span class="pln">password</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'loginPasswordError'</span><span class="pun">).</span><span class="pln">style</span><span class="pun">.</span><span class="pln">display </span><span class="pun">=</span><span class="pln"> </span><span class="str">'block'</span><span class="pun">;</span><span class="pln"> valid </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'loginPasswordError'</span><span class="pun">).</span><span class="pln">style</span><span class="pun">.</span><span class="pln">display </span><span class="pun">=</span><span class="pln"> </span><span class="str">'none'</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">return</span><span class="pln"> valid</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> login</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(!</span><span class="pln">validateLoginForm</span><span class="pun">())</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">return</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> username </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'loginUsername'</span><span class="pun">).</span><span class="pln">value</span><span class="pun">;</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> password </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'loginPassword'</span><span class="pun">).</span><span class="pln">value</span><span class="pun">;</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> user </span><span class="pun">=</span><span class="pln"> users</span><span class="pun">.</span><span class="pln">find</span><span class="pun">(</span><span class="pln">u </span><span class="pun">=></span><span class="pln"> u</span><span class="pun">.</span><span class="pln">username </span><span class="pun">===</span><span class="pln"> username </span><span class="pun">&&</span><span class="pln"> u</span><span class="pun">.</span><span class="pln">password </span><span class="pun">===</span><span class="pln"> password</span><span class="pun">);</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">user</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> currentUser </span><span class="pun">=</span><span class="pln"> user</span><span class="pun">;</span><span class="pln"> saveCurrentUserToLocalStorage</span><span class="pun">();</span><span class="pln"> </span><span class="com">// currentUserを保存</span><span class="pln"> showProfile</span><span class="pun">();</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> alert</span><span class="pun">(</span><span class="str">'ユーザー名またはパスワードが間違っています。'</span><span class="pun">);</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> logout</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> currentUser </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">null</span><span class="pun">;</span><span class="pln"> saveCurrentUserToLocalStorage</span><span class="pun">();</span><span class="pln"> </span><span class="com">// currentUserを削除</span><span class="pln"> hideAll</span><span class="pun">();</span><span class="pln"> showLoginForm</span><span class="pun">();</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> validateRegisterForm</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">let</span><span class="pln"> valid </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">;</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> name </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'registerName'</span><span class="pun">).</span><span class="pln">value</span><span class="pun">;</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> username </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'registerUsername'</span><span class="pun">).</span><span class="pln">value</span><span class="pun">;</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> password </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'registerPassword'</span><span class="pun">).</span><span class="pln">value</span><span class="pun">;</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> confirmPassword </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'registerConfirmPassword'</span><span class="pun">).</span><span class="pln">value</span><span class="pun">;</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(!</span><span class="pln">name</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'registerNameError'</span><span class="pun">).</span><span class="pln">style</span><span class="pun">.</span><span class="pln">display </span><span class="pun">=</span><span class="pln"> </span><span class="str">'block'</span><span class="pun">;</span><span class="pln"> valid </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'registerNameError'</span><span class="pun">).</span><span class="pln">style</span><span class="pun">.</span><span class="pln">display </span><span class="pun">=</span><span class="pln"> </span><span class="str">'none'</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(!</span><span class="pln">username</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'registerUsernameError'</span><span class="pun">).</span><span class="pln">style</span><span class="pun">.</span><span class="pln">display </span><span class="pun">=</span><span class="pln"> </span><span class="str">'block'</span><span class="pun">;</span><span class="pln"> valid </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'registerUsernameError'</span><span class="pun">).</span><span class="pln">style</span><span class="pun">.</span><span class="pln">display </span><span class="pun">=</span><span class="pln"> </span><span class="str">'none'</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="com">// ユーザー名の重複チェック</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">users</span><span class="pun">.</span><span class="pln">find</span><span class="pun">(</span><span class="pln">u </span><span class="pun">=></span><span class="pln"> u</span><span class="pun">.</span><span class="pln">username </span><span class="pun">===</span><span class="pln"> username</span><span class="pun">))</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'registerUsernameError'</span><span class="pun">).</span><span class="pln">textContent </span><span class="pun">=</span><span class="pln"> </span><span class="str">'このユーザー名は既に使用されています'</span><span class="pun">;</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'registerUsernameError'</span><span class="pun">).</span><span class="pln">style</span><span class="pun">.</span><span class="pln">display </span><span class="pun">=</span><span class="pln"> </span><span class="str">'block'</span><span class="pun">;</span><span class="pln"> valid </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'registerUsernameError'</span><span class="pun">).</span><span class="pln">style</span><span class="pun">.</span><span class="pln">display </span><span class="pun">=</span><span class="pln"> </span><span class="str">'none'</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(!</span><span class="pln">password</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'registerPasswordError'</span><span class="pun">).</span><span class="pln">style</span><span class="pun">.</span><span class="pln">display </span><span class="pun">=</span><span class="pln"> </span><span class="str">'block'</span><span class="pun">;</span><span class="pln"> valid </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'registerPasswordError'</span><span class="pun">).</span><span class="pln">style</span><span class="pun">.</span><span class="pln">display </span><span class="pun">=</span><span class="pln"> </span><span class="str">'none'</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">password </span><span class="pun">!==</span><span class="pln"> confirmPassword</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'registerConfirmPasswordError'</span><span class="pun">).</span><span class="pln">style</span><span class="pun">.</span><span class="pln">display </span><span class="pun">=</span><span class="pln"> </span><span class="str">'block'</span><span class="pun">;</span><span class="pln"> valid </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'registerConfirmPasswordError'</span><span class="pun">).</span><span class="pln">style</span><span class="pun">.</span><span class="pln">display </span><span class="pun">=</span><span class="pln"> </span><span class="str">'none'</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">return</span><span class="pln"> valid</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> </span><span class="kwd">register</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(!</span><span class="pln">validateRegisterForm</span><span class="pun">())</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">return</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> name </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'registerName'</span><span class="pun">).</span><span class="pln">value</span><span class="pun">;</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> username </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'registerUsername'</span><span class="pun">).</span><span class="pln">value</span><span class="pun">;</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> password </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'registerPassword'</span><span class="pun">).</span><span class="pln">value</span><span class="pun">;</span><span class="pln"> users</span><span class="pun">.</span><span class="pln">push</span><span class="pun">({</span><span class="pln"> name</span><span class="pun">,</span><span class="pln"> username</span><span class="pun">,</span><span class="pln"> password</span><span class="pun">,</span><span class="pln"> profileImage</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">null</span><span class="pln"> </span><span class="pun">});</span><span class="pln"> saveUsersToLocalStorage</span><span class="pun">();</span><span class="pln"> </span><span class="com">// ユーザー情報を保存</span><span class="pln"> alert</span><span class="pun">(</span><span class="str">'登録が完了しました！ログインしてください。'</span><span class="pun">);</span><span class="pln"> showLoginForm</span><span class="pun">();</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="com">// プロフィール画像の処理</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> loadProfileImage</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> profileImg </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'profileImg'</span><span class="pun">);</span><span class="pln"> </span><span class="com">// プロフィール画像が設定されている場合はその画像を表示</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">currentUser</span><span class="pun">.</span><span class="pln">profileImage</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> profileImg</span><span class="pun">.</span><span class="pln">src </span><span class="pun">=</span><span class="pln"> currentUser</span><span class="pun">.</span><span class="pln">profileImage</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="com">// デフォルトのプロフィール画像を表示</span><span class="pln"> profileImg</span><span class="pun">.</span><span class="pln">src </span><span class="pun">=</span><span class="pln"> </span><span class="str">'default_profile_img.jpg'</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> uploadProfileImage</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> input </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'profileImageInput'</span><span class="pun">);</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> file </span><span class="pun">=</span><span class="pln"> input</span><span class="pun">.</span><span class="pln">files</span><span class="pun">[</span><span class="lit">0</span><span class="pun">];</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">file</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="com">// FileReaderを使用して画像を読み込む</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> reader </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">FileReader</span><span class="pun">();</span><span class="pln"> reader</span><span class="pun">.</span><span class="pln">onload </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">e</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="com">// 読み込んだ画像をプロフィール画像として設定</span><span class="pln"> currentUser</span><span class="pun">.</span><span class="pln">profileImage </span><span class="pun">=</span><span class="pln"> e</span><span class="pun">.</span><span class="pln">target</span><span class="pun">.</span><span class="pln">result</span><span class="pun">;</span><span class="pln"> </span><span class="com">// プロフィール画像を更新して表示</span><span class="pln"> loadProfileImage</span><span class="pun">();</span><span class="pln"> saveUsersToLocalStorage</span><span class="pun">();</span><span class="pln"> </span><span class="com">// プロフィール画像を保存</span><span class="pln"> saveCurrentUserToLocalStorage</span><span class="pun">();</span><span class="pln"> </span><span class="com">// currentUserを更新</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> reader</span><span class="pun">.</span><span class="pln">readAsDataURL</span><span class="pun">(</span><span class="pln">file</span><span class="pun">);</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="com">// AIBOT投稿を登録</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> registerAiBotPost</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> content </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'aiBotContent'</span><span class="pun">).</span><span class="pln">value</span><span class="pun">;</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">content</span><span class="pun">.</span><span class="pln">trim</span><span class="pun">()</span><span class="pln"> </span><span class="pun">!==</span><span class="pln"> </span><span class="str">''</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> aiBotPosts</span><span class="pun">.</span><span class="pln">push</span><span class="pun">(</span><span class="pln">content</span><span class="pun">);</span><span class="pln"> saveAiBotPostsToLocalStorage</span><span class="pun">();</span><span class="pln"> alert</span><span class="pun">(</span><span class="str">"BOTの投稿が登録されました！"</span><span class="pun">);</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'aiBotContent'</span><span class="pun">).</span><span class="pln">value </span><span class="pun">=</span><span class="pln"> </span><span class="str">''</span><span class="pun">;</span><span class="pln"> </span><span class="com">// 入力欄を空にする</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="com">// AIBOTが定期的に投稿</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> postAiBotContent</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">aiBotPosts</span><span class="pun">.</span><span class="pln">length </span><span class="pun">></span><span class="pln"> </span><span class="lit">0</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> content </span><span class="pun">=</span><span class="pln"> aiBotPosts</span><span class="pun">[</span><span class="typ">Math</span><span class="pun">.</span><span class="pln">floor</span><span class="pun">(</span><span class="typ">Math</span><span class="pun">.</span><span class="pln">random</span><span class="pun">()</span><span class="pln"> </span><span class="pun">*</span><span class="pln"> aiBotPosts</span><span class="pun">.</span><span class="pln">length</span><span class="pun">)];</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> aiUser </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> name</span><span class="pun">:</span><span class="pln"> </span><span class="str">'BOT'</span><span class="pun">,</span><span class="pln"> username</span><span class="pun">:</span><span class="pln"> </span><span class="str">'bot'</span><span class="pun">,</span><span class="pln"> profileImage</span><span class="pun">:</span><span class="pln"> </span><span class="str">'default_ai_profile_img.jpg'</span><span class="pln"> </span><span class="pun">};</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> post </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> id</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Date</span><span class="pun">.</span><span class="pln">now</span><span class="pun">(),</span><span class="pln"> content</span><span class="pun">:</span><span class="pln"> content</span><span class="pun">,</span><span class="pln"> author</span><span class="pun">:</span><span class="pln"> aiUser</span><span class="pun">.</span><span class="pln">name</span><span class="pun">,</span><span class="pln"> authorUsername</span><span class="pun">:</span><span class="pln"> aiUser</span><span class="pun">.</span><span class="pln">username</span><span class="pun">,</span><span class="pln"> authorProfileImage</span><span class="pun">:</span><span class="pln"> aiUser</span><span class="pun">.</span><span class="pln">profileImage</span><span class="pun">,</span><span class="pln"> likes</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> comments</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[]</span><span class="pln"> </span><span class="pun">};</span><span class="pln"> posts</span><span class="pun">.</span><span class="pln">unshift</span><span class="pun">(</span><span class="pln">post</span><span class="pun">);</span><span class="pln"> savePostsToLocalStorage</span><span class="pun">();</span><span class="pln"> displayTimeline</span><span class="pun">();</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> setInterval</span><span class="pun">(</span><span class="pln">postAiBotContent</span><span class="pun">,</span><span class="pln"> </span><span class="lit">500000</span><span class="pun">);</span><span class="pln"> </span><span class="com">// 50,000ミリ秒 = 50秒</span><span class="pln"> </span><span class="com">// マルコフ連鎖を使用した自動投稿BOT</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> generateMarkovChainText</span><span class="pun">(</span><span class="pln">order </span><span class="pun">=</span><span class="pln"> </span><span class="lit">2</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> allTexts </span><span class="pun">=</span><span class="pln"> posts</span><span class="pun">.</span><span class="pln">map</span><span class="pun">(</span><span class="pln">post </span><span class="pun">=></span><span class="pln"> post</span><span class="pun">.</span><span class="pln">content</span><span class="pun">).</span><span class="pln">join</span><span class="pun">(</span><span class="str">' '</span><span class="pun">);</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">allTexts</span><span class="pun">.</span><span class="pln">length </span><span class="pun"><</span><span class="pln"> </span><span class="lit">100</span><span class="pun">)</span><span class="pln"> </span><span class="kwd">return</span><span class="pln"> </span><span class="kwd">null</span><span class="pun">;</span><span class="pln"> </span><span class="com">// テキストが短すぎる場合は生成しない</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> markov </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">RiTa</span><span class="pun">.</span><span class="typ">Markov</span><span class="pun">(</span><span class="pln">order</span><span class="pun">);</span><span class="pln"> markov</span><span class="pun">.</span><span class="pln">addText</span><span class="pun">(</span><span class="pln">allTexts</span><span class="pun">);</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> sentences </span><span class="pun">=</span><span class="pln"> markov</span><span class="pun">.</span><span class="pln">generate</span><span class="pun">(</span><span class="lit">1</span><span class="pun">);</span><span class="pln"> </span><span class="kwd">return</span><span class="pln"> sentences</span><span class="pun">[</span><span class="lit">0</span><span class="pun">];</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> postMarkovBotContent</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> generatedText </span><span class="pun">=</span><span class="pln"> generateMarkovChainText</span><span class="pun">(</span><span class="lit">3</span><span class="pun">);</span><span class="pln"> </span><span class="com">// 階数を3に設定</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">generatedText</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> botUser </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> name</span><span class="pun">:</span><span class="pln"> </span><span class="str">'MarkovBot'</span><span class="pun">,</span><span class="pln"> username</span><span class="pun">:</span><span class="pln"> </span><span class="str">'markovbot'</span><span class="pun">,</span><span class="pln"> profileImage</span><span class="pun">:</span><span class="pln"> </span><span class="str">'markov_bot_profile_img.jpg'</span><span class="pln"> </span><span class="pun">};</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> post </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> id</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Date</span><span class="pun">.</span><span class="pln">now</span><span class="pun">(),</span><span class="pln"> content</span><span class="pun">:</span><span class="pln"> generatedText</span><span class="pun">,</span><span class="pln"> author</span><span class="pun">:</span><span class="pln"> botUser</span><span class="pun">.</span><span class="pln">name</span><span class="pun">,</span><span class="pln"> authorUsername</span><span class="pun">:</span><span class="pln"> botUser</span><span class="pun">.</span><span class="pln">username</span><span class="pun">,</span><span class="pln"> authorProfileImage</span><span class="pun">:</span><span class="pln"> botUser</span><span class="pun">.</span><span class="pln">profileImage</span><span class="pun">,</span><span class="pln"> likes</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> comments</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[]</span><span class="pln"> </span><span class="pun">};</span><span class="pln"> posts</span><span class="pun">.</span><span class="pln">unshift</span><span class="pun">(</span><span class="pln">post</span><span class="pun">);</span><span class="pln"> savePostsToLocalStorage</span><span class="pun">();</span><span class="pln"> displayTimeline</span><span class="pun">();</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> setInterval</span><span class="pun">(</span><span class="pln">postMarkovBotContent</span><span class="pun">,</span><span class="pln"> markovBotInterval</span><span class="pun">);</span><span class="pln"> </span><span class="com">// マルコフ連鎖BOTの投稿間隔</span><span class="pln"> </span><span class="com">// 投稿関連の関数</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> createPost</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> postContent </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'postContent'</span><span class="pun">).</span><span class="pln">value</span><span class="pun">;</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">postContent</span><span class="pun">.</span><span class="pln">trim</span><span class="pun">()</span><span class="pln"> </span><span class="pun">!==</span><span class="pln"> </span><span class="str">''</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> post </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> id</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Date</span><span class="pun">.</span><span class="pln">now</span><span class="pun">(),</span><span class="pln"> content</span><span class="pun">:</span><span class="pln"> postContent</span><span class="pun">,</span><span class="pln"> author</span><span class="pun">:</span><span class="pln"> currentUser</span><span class="pun">.</span><span class="pln">name</span><span class="pun">,</span><span class="pln"> authorUsername</span><span class="pun">:</span><span class="pln"> currentUser</span><span class="pun">.</span><span class="pln">username</span><span class="pun">,</span><span class="pln"> authorProfileImage</span><span class="pun">:</span><span class="pln"> currentUser</span><span class="pun">.</span><span class="pln">profileImage</span><span class="pun">,</span><span class="pln"> likes</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> comments</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[],</span><span class="pln"> shares</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="pun">};</span><span class="pln"> posts</span><span class="pun">.</span><span class="pln">unshift</span><span class="pun">(</span><span class="pln">post</span><span class="pun">);</span><span class="pln"> </span><span class="com">// 最新の投稿を先頭に追加</span><span class="pln"> savePostsToLocalStorage</span><span class="pun">();</span><span class="pln"> </span><span class="com">// 投稿を保存</span><span class="pln"> displayTimeline</span><span class="pun">();</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'postContent'</span><span class="pun">).</span><span class="pln">value </span><span class="pun">=</span><span class="pln"> </span><span class="str">''</span><span class="pun">;</span><span class="pln"> </span><span class="com">// 投稿後、入力欄を空にする</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> displayTimeline</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> timeline </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'timeline'</span><span class="pun">);</span><span class="pln"> timeline</span><span class="pun">.</span><span class="pln">innerHTML </span><span class="pun">=</span><span class="pln"> </span><span class="str">''</span><span class="pun">;</span><span class="pln"> posts</span><span class="pun">.</span><span class="pln">forEach</span><span class="pun">(</span><span class="pln">post </span><span class="pun">=></span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> postElement </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">createElement</span><span class="pun">(</span><span class="str">'div'</span><span class="pun">);</span><span class="pln"> postElement</span><span class="pun">.</span><span class="pln">classList</span><span class="pun">.</span><span class="pln">add</span><span class="pun">(</span><span class="str">'card'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'mb-3'</span><span class="pun">);</span><span class="pln"> postElement</span><span class="pun">.</span><span class="pln">innerHTML </span><span class="pun">=</span><span class="pln"> </span><span class="pun">`</span><span class="pln"> </span><span class="pun"><</span><span class="pln">div </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"card-body"</span><span class="pun">></span><span class="pln"> </span><span class="pun"><</span><span class="pln">div </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"d-flex align-items-center mb-3"</span><span class="pun">></span><span class="pln"> </span><span class="pun"><</span><span class="pln">img src</span><span class="pun">=</span><span class="str">"${post.authorProfileImage || 'default_profile_img.jpg'}"</span><span class="pln"> </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"profile-img mr-2"</span><span class="pln"> alt</span><span class="pun">=</span><span class="str">"プロフィール画像"</span><span class="pun">></span><span class="pln"> </span><span class="pun"><</span><span class="pln">div</span><span class="pun">></span><span class="pln"> </span><span class="pun"><</span><span class="pln">strong</span><span class="pun">></span><span class="pln">$</span><span class="pun">{</span><span class="pln">post</span><span class="pun">.</span><span class="pln">author</span><span class="pun">}</</span><span class="pln">strong</span><span class="pun">></span><span class="pln"> </span><span class="pun">(</span><span class="lit">@$</span><span class="pun">{</span><span class="pln">post</span><span class="pun">.</span><span class="pln">authorUsername</span><span class="pun">})</span><span class="pln"> $</span><span class="pun">{</span><span class="pln">post</span><span class="pun">.</span><span class="pln">shared </span><span class="pun">?</span><span class="pln"> </span><span class="str">'<span class="badge badge-info ml-2">シェア</span>'</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="str">''</span><span class="pun">}</span><span class="pln"> </span><span class="pun"></</span><span class="pln">div</span><span class="pun">></span><span class="pln"> </span><span class="pun"></</span><span class="pln">div</span><span class="pun">></span><span class="pln"> </span><span class="pun"><</span><span class="pln">p </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"card-text"</span><span class="pun">></span><span class="pln">$</span><span class="pun">{</span><span class="pln">post</span><span class="pun">.</span><span class="pln">content</span><span class="pun">}</</span><span class="pln">p</span><span class="pun">></span><span class="pln"> $</span><span class="pun">{</span><span class="pln">post</span><span class="pun">.</span><span class="pln">link </span><span class="pun">?</span><span class="pln"> </span><span class="pun">`<</span><span class="pln">a href</span><span class="pun">=</span><span class="str">"${post.link}"</span><span class="pln"> target</span><span class="pun">=</span><span class="str">"_blank"</span><span class="pln"> </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"btn btn-link"</span><span class="pun">>続きを読む</</span><span class="pln">a</span><span class="pun">>`</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="str">''</span><span class="pun">}</span><span class="pln"> </span><span class="pun"><</span><span class="pln">div </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"d-flex justify-content-between"</span><span class="pun">></span><span class="pln"> </span><span class="pun"><</span><span class="pln">div</span><span class="pun">></span><span class="pln"> </span><span class="pun"><</span><span class="pln">button onclick</span><span class="pun">=</span><span class="str">"likePost(${post.id})"</span><span class="pln"> </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"btn btn-primary btn-sm"</span><span class="pun">><</span><span class="pln">i </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"fas fa-thumbs-up"</span><span class="pun">><</span><span class="str">/i> いいね (${post.likes})</</span><span class="pln">button</span><span class="pun">></span><span class="pln"> </span><span class="pun"><</span><span class="pln">button onclick</span><span class="pun">=</span><span class="str">"toggleComments(${post.id})"</span><span class="pln"> </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"btn btn-secondary btn-sm"</span><span class="pun">><</span><span class="pln">i </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"fas fa-comments"</span><span class="pun">><</span><span class="str">/i> コメント (${post.comments.length})</</span><span class="pln">button</span><span class="pun">></span><span class="pln"> </span><span class="pun"><</span><span class="pln">button onclick</span><span class="pun">=</span><span class="str">"replyToPost(${post.id})"</span><span class="pln"> </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"btn btn-info btn-sm"</span><span class="pun">><</span><span class="pln">i </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"fas fa-reply"</span><span class="pun">><</span><span class="str">/i> 返信</</span><span class="pln">button</span><span class="pun">></span><span class="pln"> </span><span class="pun"><</span><span class="pln">button onclick</span><span class="pun">=</span><span class="str">"sharePost(${post.id})"</span><span class="pln"> </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"btn btn-share btn-sm"</span><span class="pun">><</span><span class="pln">i </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"fas fa-share"</span><span class="pun">><</span><span class="str">/i> シェア (${post.shares || 0})</</span><span class="pln">button</span><span class="pun">></span><span class="pln"> </span><span class="pun"><</span><span class="pln">button onclick</span><span class="pun">=</span><span class="str">"shareToTwitter(${post.id})"</span><span class="pln"> </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"btn btn-share-twitter btn-sm"</span><span class="pun">><</span><span class="pln">i </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"fab fa-twitter"</span><span class="pun">><</span><span class="str">/i> Xでシェア</</span><span class="pln">button</span><span class="pun">></span><span class="pln"> </span><span class="pun"></</span><span class="pln">div</span><span class="pun">></span><span class="pln"> </span><span class="pun"><</span><span class="pln">small </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"text-muted"</span><span class="pun">></span><span class="pln">$</span><span class="pun">{</span><span class="kwd">new</span><span class="pln"> </span><span class="typ">Date</span><span class="pun">(</span><span class="pln">post</span><span class="pun">.</span><span class="pln">id</span><span class="pun">).</span><span class="pln">toLocaleString</span><span class="pun">()}</</span><span class="pln">small</span><span class="pun">></span><span class="pln"> </span><span class="pun"></</span><span class="pln">div</span><span class="pun">></span><span class="pln"> </span><span class="pun"><</span><span class="pln">div id</span><span class="pun">=</span><span class="str">"comments-${post.id}"</span><span class="pln"> </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"comment-section mt-3"</span><span class="pln"> style</span><span class="pun">=</span><span class="str">"display: none;"</span><span class="pun">></span><span class="pln"> $</span><span class="pun">{</span><span class="pln">post</span><span class="pun">.</span><span class="pln">comments</span><span class="pun">.</span><span class="pln">map</span><span class="pun">(</span><span class="pln">comment </span><span class="pun">=></span><span class="pln"> </span><span class="pun">`</span><span class="pln"> </span><span class="pun"><</span><span class="pln">div </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"card mb-2"</span><span class="pun">></span><span class="pln"> </span><span class="pun"><</span><span class="pln">div </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"card-body"</span><span class="pun">></span><span class="pln"> </span><span class="pun"><</span><span class="pln">p</span><span class="pun">><</span><span class="pln">strong</span><span class="pun">></span><span class="pln">$</span><span class="pun">{</span><span class="pln">comment</span><span class="pun">.</span><span class="pln">author</span><span class="pun">}<</span><span class="str">/strong>: ${comment.content}</</span><span class="pln">p</span><span class="pun">></span><span class="pln"> </span><span class="pun"></</span><span class="pln">div</span><span class="pun">></span><span class="pln"> </span><span class="pun"></</span><span class="pln">div</span><span class="pun">></span><span class="pln"> </span><span class="pun">`).</span><span class="pln">join</span><span class="pun">(</span><span class="str">''</span><span class="pun">)}</span><span class="pln"> </span><span class="pun"></</span><span class="pln">div</span><span class="pun">></span><span class="pln"> </span><span class="pun"></</span><span class="pln">div</span><span class="pun">></span><span class="pln"> </span><span class="pun">`;</span><span class="pln"> timeline</span><span class="pun">.</span><span class="pln">appendChild</span><span class="pun">(</span><span class="pln">postElement</span><span class="pun">);</span><span class="pln"> </span><span class="pun">});</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="com">// いいね機能</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> likePost</span><span class="pun">(</span><span class="pln">postId</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> post </span><span class="pun">=</span><span class="pln"> posts</span><span class="pun">.</span><span class="pln">find</span><span class="pun">(</span><span class="pln">p </span><span class="pun">=></span><span class="pln"> p</span><span class="pun">.</span><span class="pln">id </span><span class="pun">===</span><span class="pln"> postId</span><span class="pun">);</span><span class="pln"> post</span><span class="pun">.</span><span class="pln">likes</span><span class="pun">++;</span><span class="pln"> savePostsToLocalStorage</span><span class="pun">();</span><span class="pln"> displayTimeline</span><span class="pun">();</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="com">// コメント表示切替</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> toggleComments</span><span class="pun">(</span><span class="pln">postId</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> commentSection </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(`</span><span class="pln">comments</span><span class="pun">-</span><span class="pln">$</span><span class="pun">{</span><span class="pln">postId</span><span class="pun">}`);</span><span class="pln"> commentSection</span><span class="pun">.</span><span class="pln">style</span><span class="pun">.</span><span class="pln">display </span><span class="pun">=</span><span class="pln"> commentSection</span><span class="pun">.</span><span class="pln">style</span><span class="pun">.</span><span class="pln">display </span><span class="pun">===</span><span class="pln"> </span><span class="str">'none'</span><span class="pln"> </span><span class="pun">?</span><span class="pln"> </span><span class="str">'block'</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="str">'none'</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="com">// リプライ機能</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> replyToPost</span><span class="pun">(</span><span class="pln">postId</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> modal </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'replyModal'</span><span class="pun">);</span><span class="pln"> modal</span><span class="pun">.</span><span class="pln">dataset</span><span class="pun">.</span><span class="pln">postId </span><span class="pun">=</span><span class="pln"> postId</span><span class="pun">;</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#replyModal'</span><span class="pun">).</span><span class="pln">modal</span><span class="pun">(</span><span class="str">'show'</span><span class="pun">);</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> postReply</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> postId </span><span class="pun">=</span><span class="pln"> parseInt</span><span class="pun">(</span><span class="pln">document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'replyModal'</span><span class="pun">).</span><span class="pln">dataset</span><span class="pun">.</span><span class="pln">postId</span><span class="pun">);</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> post </span><span class="pun">=</span><span class="pln"> posts</span><span class="pun">.</span><span class="pln">find</span><span class="pun">(</span><span class="pln">p </span><span class="pun">=></span><span class="pln"> p</span><span class="pun">.</span><span class="pln">id </span><span class="pun">===</span><span class="pln"> postId</span><span class="pun">);</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> replyContent </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'replyContent'</span><span class="pun">).</span><span class="pln">value</span><span class="pun">;</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">replyContent</span><span class="pun">.</span><span class="pln">trim</span><span class="pun">()</span><span class="pln"> </span><span class="pun">!==</span><span class="pln"> </span><span class="str">''</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> post</span><span class="pun">.</span><span class="pln">comments</span><span class="pun">.</span><span class="pln">push</span><span class="pun">({</span><span class="pln"> author</span><span class="pun">:</span><span class="pln"> currentUser</span><span class="pun">.</span><span class="pln">name</span><span class="pun">,</span><span class="pln"> content</span><span class="pun">:</span><span class="pln"> replyContent </span><span class="pun">});</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#replyModal'</span><span class="pun">).</span><span class="pln">modal</span><span class="pun">(</span><span class="str">'hide'</span><span class="pun">);</span><span class="pln"> savePostsToLocalStorage</span><span class="pun">();</span><span class="pln"> displayTimeline</span><span class="pun">();</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> alert</span><span class="pun">(</span><span class="str">'返信を入力してください。'</span><span class="pun">);</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="com">// 投稿のシェア機能</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> sharePost</span><span class="pun">(</span><span class="pln">postId</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> post </span><span class="pun">=</span><span class="pln"> posts</span><span class="pun">.</span><span class="pln">find</span><span class="pun">(</span><span class="pln">p </span><span class="pun">=></span><span class="pln"> p</span><span class="pun">.</span><span class="pln">id </span><span class="pun">===</span><span class="pln"> postId</span><span class="pun">);</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">post</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> sharedPost </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="pun">...</span><span class="pln">post</span><span class="pun">,</span><span class="pln"> id</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Date</span><span class="pun">.</span><span class="pln">now</span><span class="pun">(),</span><span class="pln"> author</span><span class="pun">:</span><span class="pln"> currentUser</span><span class="pun">.</span><span class="pln">name</span><span class="pun">,</span><span class="pln"> authorUsername</span><span class="pun">:</span><span class="pln"> currentUser</span><span class="pun">.</span><span class="pln">username</span><span class="pun">,</span><span class="pln"> authorProfileImage</span><span class="pun">:</span><span class="pln"> currentUser</span><span class="pun">.</span><span class="pln">profileImage</span><span class="pun">,</span><span class="pln"> shared</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">,</span><span class="pln"> likes</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> comments</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[],</span><span class="pln"> shares</span><span class="pun">:</span><span class="pln"> post</span><span class="pun">.</span><span class="pln">shares </span><span class="pun">?</span><span class="pln"> post</span><span class="pun">.</span><span class="pln">shares </span><span class="pun">+</span><span class="pln"> </span><span class="lit">1</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="lit">1</span><span class="pln"> </span><span class="pun">};</span><span class="pln"> posts</span><span class="pun">.</span><span class="pln">unshift</span><span class="pun">(</span><span class="pln">sharedPost</span><span class="pun">);</span><span class="pln"> savePostsToLocalStorage</span><span class="pun">();</span><span class="pln"> displayTimeline</span><span class="pun">();</span><span class="pln"> alert</span><span class="pun">(</span><span class="str">'投稿をシェアしました。'</span><span class="pun">);</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="com">// X（旧Twitter）にシェアする機能</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> shareToTwitter</span><span class="pun">(</span><span class="pln">postId</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> post </span><span class="pun">=</span><span class="pln"> posts</span><span class="pun">.</span><span class="pln">find</span><span class="pun">(</span><span class="pln">p </span><span class="pun">=></span><span class="pln"> p</span><span class="pun">.</span><span class="pln">id </span><span class="pun">===</span><span class="pln"> postId</span><span class="pun">);</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">post</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">let</span><span class="pln"> shareText </span><span class="pun">=</span><span class="pln"> post</span><span class="pun">.</span><span class="pln">content</span><span class="pun">;</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">post</span><span class="pun">.</span><span class="pln">link</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> shareText </span><span class="pun">+=</span><span class="pln"> </span><span class="str">' '</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> post</span><span class="pun">.</span><span class="pln">link</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> shareUrl </span><span class="pun">=</span><span class="pln"> </span><span class="pun">`</span><span class="pln">https</span><span class="pun">:</span><span class="com">//twitter.com/intent/tweet?text=${encodeURIComponent(shareText)}&url=${encodeURIComponent(window.location.href)}`;</span><span class="pln"> window</span><span class="pun">.</span><span class="pln">open</span><span class="pun">(</span><span class="pln">shareUrl</span><span class="pun">,</span><span class="pln"> </span><span class="str">'_blank'</span><span class="pun">);</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="com">// FEEDの登録と自動投稿機能</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> registerFeed</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> feedUrl </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'feedUrl'</span><span class="pun">).</span><span class="pln">value</span><span class="pun">;</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">feedUrl</span><span class="pun">.</span><span class="pln">trim</span><span class="pun">()</span><span class="pln"> </span><span class="pun">!==</span><span class="pln"> </span><span class="str">''</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> feeds</span><span class="pun">.</span><span class="pln">push</span><span class="pun">(</span><span class="pln">feedUrl</span><span class="pun">);</span><span class="pln"> saveFeedsToLocalStorage</span><span class="pun">();</span><span class="pln"> </span><span class="com">// フィード情報を保存</span><span class="pln"> alert</span><span class="pun">(</span><span class="str">'RSSフィードが登録されました！'</span><span class="pun">);</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'feedUrl'</span><span class="pun">).</span><span class="pln">value </span><span class="pun">=</span><span class="pln"> </span><span class="str">''</span><span class="pun">;</span><span class="pln"> </span><span class="com">// 登録後、入力欄を空にする</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'feedUrlError'</span><span class="pun">).</span><span class="pln">style</span><span class="pun">.</span><span class="pln">display </span><span class="pun">=</span><span class="pln"> </span><span class="str">'block'</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> fetchFeeds</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> feeds</span><span class="pun">.</span><span class="pln">forEach</span><span class="pun">(</span><span class="pln">feedUrl </span><span class="pun">=></span><span class="pln"> </span><span class="pun">{</span><span class="pln"> fetch</span><span class="pun">(`</span><span class="pln">https</span><span class="pun">:</span><span class="com">//api.rss2json.com/v1/api.json?rss_url=${encodeURIComponent(feedUrl)}`)</span><span class="pln"> </span><span class="pun">.</span><span class="pln">then</span><span class="pun">(</span><span class="pln">response </span><span class="pun">=></span><span class="pln"> response</span><span class="pun">.</span><span class="pln">json</span><span class="pun">())</span><span class="pln"> </span><span class="pun">.</span><span class="pln">then</span><span class="pun">(</span><span class="pln">data </span><span class="pun">=></span><span class="pln"> </span><span class="pun">{</span><span class="pln"> data</span><span class="pun">.</span><span class="pln">items</span><span class="pun">.</span><span class="pln">forEach</span><span class="pun">(</span><span class="pln">item </span><span class="pun">=></span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="com">// 同じ投稿が既に存在するかチェック</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(!</span><span class="pln">posts</span><span class="pun">.</span><span class="pln">some</span><span class="pun">(</span><span class="pln">p </span><span class="pun">=></span><span class="pln"> p</span><span class="pun">.</span><span class="pln">link </span><span class="pun">===</span><span class="pln"> item</span><span class="pun">.</span><span class="pln">link</span><span class="pun">))</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> post </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> id</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Date</span><span class="pun">.</span><span class="pln">now</span><span class="pun">()</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> </span><span class="typ">Math</span><span class="pun">.</span><span class="pln">random</span><span class="pun">(),</span><span class="pln"> </span><span class="com">// 重複しないIDを生成</span><span class="pln"> content</span><span class="pun">:</span><span class="pln"> item</span><span class="pun">.</span><span class="pln">title</span><span class="pun">,</span><span class="pln"> link</span><span class="pun">:</span><span class="pln"> item</span><span class="pun">.</span><span class="pln">link</span><span class="pun">,</span><span class="pln"> </span><span class="com">// リンクを追加</span><span class="pln"> author</span><span class="pun">:</span><span class="pln"> </span><span class="str">'FEEDBOT'</span><span class="pun">,</span><span class="pln"> authorUsername</span><span class="pun">:</span><span class="pln"> </span><span class="str">'feedbot'</span><span class="pun">,</span><span class="pln"> authorProfileImage</span><span class="pun">:</span><span class="pln"> </span><span class="str">'feedbot_profile_img.jpg'</span><span class="pun">,</span><span class="pln"> </span><span class="com">// FEEDBOTのプロフィール画像を設定</span><span class="pln"> likes</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> comments</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[]</span><span class="pln"> </span><span class="pun">};</span><span class="pln"> posts</span><span class="pun">.</span><span class="pln">unshift</span><span class="pun">(</span><span class="pln">post</span><span class="pun">);</span><span class="pln"> </span><span class="com">// 最新の投稿を先頭に追加</span><span class="pln"> savePostsToLocalStorage</span><span class="pun">();</span><span class="pln"> </span><span class="com">// 投稿を保存</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">});</span><span class="pln"> displayTimeline</span><span class="pun">();</span><span class="pln"> </span><span class="com">// タイムラインを表示</span><span class="pln"> </span><span class="pun">})</span><span class="pln"> </span><span class="pun">.</span><span class="kwd">catch</span><span class="pun">(</span><span class="pln">error </span><span class="pun">=></span><span class="pln"> console</span><span class="pun">.</span><span class="pln">error</span><span class="pun">(</span><span class="str">'RSSフィードの取得エラー:'</span><span class="pun">,</span><span class="pln"> error</span><span class="pun">));</span><span class="pln"> </span><span class="pun">});</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> setFeedInterval</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> intervalInput </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'feedInterval'</span><span class="pun">).</span><span class="pln">value</span><span class="pun">;</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">intervalInput </span><span class="pun">&&</span><span class="pln"> parseInt</span><span class="pun">(</span><span class="pln">intervalInput</span><span class="pun">)</span><span class="pln"> </span><span class="pun">></span><span class="pln"> </span><span class="lit">0</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> feedFetchInterval </span><span class="pun">=</span><span class="pln"> parseInt</span><span class="pun">(</span><span class="pln">intervalInput</span><span class="pun">)</span><span class="pln"> </span><span class="pun">*</span><span class="pln"> </span><span class="lit">1000</span><span class="pun">;</span><span class="pln"> </span><span class="com">// ミリ秒に変換</span><span class="pln"> clearInterval</span><span class="pun">(</span><span class="pln">feedFetchTimer</span><span class="pun">);</span><span class="pln"> feedFetchTimer </span><span class="pun">=</span><span class="pln"> setInterval</span><span class="pun">(</span><span class="pln">fetchFeeds</span><span class="pun">,</span><span class="pln"> feedFetchInterval</span><span class="pun">);</span><span class="pln"> alert</span><span class="pun">(`自動投稿の間隔が</span><span class="pln">$</span><span class="pun">{</span><span class="pln">intervalInput</span><span class="pun">}秒に設定されました。`);</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> alert</span><span class="pun">(</span><span class="str">'有効な間隔を入力してください（1以上の数字）。'</span><span class="pun">);</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="com">// ページロード時にフィードの自動取得を開始</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> startFeedFetch</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> feedFetchTimer </span><span class="pun">=</span><span class="pln"> setInterval</span><span class="pun">(</span><span class="pln">fetchFeeds</span><span class="pun">,</span><span class="pln"> feedFetchInterval</span><span class="pun">);</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="com">// 初期化</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> init</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> loadUsersFromLocalStorage</span><span class="pun">();</span><span class="pln"> loadPostsFromLocalStorage</span><span class="pun">();</span><span class="pln"> loadFeedsFromLocalStorage</span><span class="pun">();</span><span class="pln"> loadAiBotPostsFromLocalStorage</span><span class="pun">();</span><span class="pln"> loadCurrentUserFromLocalStorage</span><span class="pun">();</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">currentUser</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> showProfile</span><span class="pun">();</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> hideAll</span><span class="pun">();</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'loginForm'</span><span class="pun">).</span><span class="pln">style</span><span class="pun">.</span><span class="pln">display </span><span class="pun">=</span><span class="pln"> </span><span class="str">'block'</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> displayTimeline</span><span class="pun">();</span><span class="pln"> startFeedFetch</span><span class="pun">();</span><span class="pln"> </span><span class="com">// フィードの自動取得を開始</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="com">// ページロード時に初期化</span><span class="pln"> window</span><span class="pun">.</span><span class="pln">onload </span><span class="pun">=</span><span class="pln"> init</span><span class="pun">;</span><span class="pln"></span><span class="tag"></script></span><span class="pln"></span><span class="tag"></body></span><span class="pln"></span><span class="tag"></html></span> |
PHP array_map
<?php
// $addFive = function($n)
// {
// return $n + 5;
// };
// $addFive = fn($n) => $n + 5;
$scores = [70, 90, 80];
// $updatedScores = array_map($addFive, $scores);
$updatedScores = array_map(fn($n) => $n + 5, $scores);
print_r($updatedScores);新作アニメのアイディア
タイトル: 「無限の境界（Infinity Edge）」
ジャンル: SF、ファンタジー、サスペンス
あらすじ:
未来の地球、人類は高度な技術と魔法が融合した世界に生きている。しかし、この世界は「無限の境界」という謎の空間によって二つの異なる次元に分断されていた。一方の次元では人々が技術と魔法を調和させて平和に暮らし、もう一方の次元では技術は廃れ、魔法が暴走し、混乱と戦争が続いている。
主人公は、次元を渡る力を持つ少女「レイナ」。彼女はある日、両次元をつなぐ「無限の境界」を越える使命を与えられ、平和な次元から混乱する次元へと旅立つ。しかし、彼女が境界を越えるたびに、次元のバランスが崩れ、現実そのものが歪んでいくことに気づく。
レイナは、各次元に存在する「守護者」と呼ばれる異能の者たちと協力しながら、両次元を救うための方法を探し出さなければならない。だが、彼女が渡り歩く先々で出会う者たちには、それぞれ異なる真実があり、次元の崩壊には隠された陰謀が絡んでいる。
主なキャラクター:
- レイナ: 主人公。次元を渡る力を持つが、その力は彼女自身も完全には制御できない。優しく聡明だが、次第に重い決断を迫られる。
- エイジ: 混乱する次元の守護者で、冷静かつ戦略的なリーダータイプ。かつては平和な次元の人間だったが、ある事件でこの次元に送り込まれた。
- ミラ: 平和な次元の科学者で、技術と魔法の融合を研究している。レイナを支援し、次元崩壊の原因を探る。
- カイン: 次元崩壊を引き起こしている影の組織のリーダー。両次元を破壊して新しい世界を創ろうとしている野心家。
特徴:
- 次元移動: 異なる次元に行くたびに、風景やルール、物理法則が変化する。魔法が支配する世界、テクノロジーが主流の未来都市、荒廃した戦場など、様々な舞台設定が可能。
- 深い世界観: 技術と魔法が共存する未来、異なる次元の歴史や文化が詳細に描かれ、視聴者を没入させる。
- サスペンス要素: 両次元の背後に隠された秘密や、登場人物たちの裏切り、陰謀が物語を盛り上げる。
- ダークファンタジー要素: レイナは次元を救うために善悪の境界に悩むことになり、苦しい選択を迫られる。
このアイディアは、壮大なスケールで次元や時間、陰謀が絡み合うSFファンタジーとして展開することができ、視覚的にもドラマティックな演出が期待できると思います