投稿者: chosuke

趣味はゲームやアニメや漫画などです

NeuroLink VR

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>フルダイブVR - 仮想世界体験</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }

        .vr-container {
            width: 95vw;
            height: 95vh;
            background: #000;
            border-radius: 20px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 20px 50px rgba(0,0,0,0.3);
        }

        .boot-screen {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, #0f0f23, #1a1a2e);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 100;
            transition: opacity 1s ease-out;
        }

        .boot-screen.hidden {
            opacity: 0;
            pointer-events: none;
        }

        .logo {
            font-size: 3rem;
            color: #00d4ff;
            margin-bottom: 30px;
            text-shadow: 0 0 20px #00d4ff;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }

        .loading-bar {
            width: 300px;
            height: 4px;
            background: #333;
            border-radius: 2px;
            overflow: hidden;
            margin-bottom: 20px;
        }

        .loading-progress {
            height: 100%;
            background: linear-gradient(90deg, #00d4ff, #ff006e);
            width: 0%;
            animation: loading 3s ease-out forwards;
        }

        @keyframes loading {
            to { width: 100%; }
        }

        .boot-text {
            color: #00d4ff;
            font-size: 1.2rem;
            margin-top: 20px;
        }

        #canvas {
            width: 100%;
            height: 100%;
            display: block;
        }

        .hud {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 10;
        }

        .status-panel {
            position: absolute;
            top: 20px;
            left: 20px;
            background: rgba(0, 212, 255, 0.1);
            border: 1px solid #00d4ff;
            border-radius: 10px;
            padding: 15px;
            color: #00d4ff;
            font-family: 'Courier New', monospace;
            backdrop-filter: blur(10px);
        }

        .controls {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 15px;
            pointer-events: all;
        }

        .control-btn {
            background: rgba(0, 212, 255, 0.2);
            border: 2px solid #00d4ff;
            color: #00d4ff;
            padding: 12px 20px;
            border-radius: 25px;
            cursor: pointer;
            font-size: 14px;
            font-weight: bold;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
        }

        .control-btn:hover {
            background: rgba(0, 212, 255, 0.4);
            box-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
            transform: translateY(-2px);
        }

        .neural-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at center, transparent 30%, rgba(0, 212, 255, 0.05) 100%);
            pointer-events: none;
            z-index: 5;
        }

        .dive-complete {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #00d4ff;
            font-size: 2rem;
            text-align: center;
            opacity: 0;
            animation: fadeInOut 4s ease-in-out;
            z-index: 50;
            text-shadow: 0 0 20px #00d4ff;
        }

        @keyframes fadeInOut {
            0%, 100% { opacity: 0; }
            20%, 80% { opacity: 1; }
        }
    </style>
</head>
<body>
    <div class="vr-container">
        <div class="boot-screen" id="bootScreen">
            <div class="logo">NeuroLink VR</div>
            <div class="loading-bar">
                <div class="loading-progress"></div>
            </div>
            <div class="boot-text">Neural Interface Initializing...</div>
        </div>

        <canvas id="canvas"></canvas>
        
        <div class="neural-overlay"></div>
        
        <div class="hud">
            <div class="status-panel">
                <div>Neural Sync: <span id="sync">98.7%</span></div>
                <div>Reality Index: <span id="reality">VIRTUAL</span></div>
                <div>Immersion Level: <span id="immersion">MAXIMUM</span></div>
                <div>Connected Users: <span id="users">1,247</span></div>
            </div>
        </div>

        <div class="controls">
            <button class="control-btn" onclick="changeWorld('cyber')">サイバー都市</button>
            <button class="control-btn" onclick="changeWorld('forest')">森林世界</button>
            <button class="control-btn" onclick="changeWorld('space')">宇宙ステーション</button>
            <button class="control-btn" onclick="disconnect()">ログアウト</button>
        </div>

        <div class="dive-complete" id="diveComplete">
            フルダイブ完了<br>
            <small>仮想世界へようこそ</small>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script>
        let scene, camera, renderer, world = 'cyber';
        let particles = [];
        let buildings = [];
        let stars = [];
        let trees = [];
        
        // 起動シーケンス
        setTimeout(() => {
            document.getElementById('bootScreen').classList.add('hidden');
            initVR();
            setTimeout(() => {
                document.getElementById('diveComplete').style.display = 'block';
            }, 1000);
        }, 3500);

        function initVR() {
            // Three.js セットアップ
            scene = new THREE.Scene();
            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('canvas'), antialias: true });
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.setClearColor(0x000011);

            // 初期世界を構築
            buildCyberWorld();
            
            // カメラ位置
            camera.position.set(0, 5, 10);
            
            // アニメーションループ
            animate();
            
            // HUD更新
            updateHUD();
        }

        function buildCyberWorld() {
            // クリア
            clearWorld();
            scene.fog = new THREE.Fog(0x000033, 10, 100);
            
            // ネオンビル群
            for (let i = 0; i < 50; i++) {
                const height = Math.random() * 20 + 5;
                const geometry = new THREE.BoxGeometry(
                    Math.random() * 3 + 1, 
                    height, 
                    Math.random() * 3 + 1
                );
                
                const material = new THREE.MeshBasicMaterial({ 
                    color: Math.random() > 0.5 ? 0x00ffff : 0xff00ff,
                    transparent: true,
                    opacity: 0.8
                });
                
                const building = new THREE.Mesh(geometry, material);
                building.position.set(
                    (Math.random() - 0.5) * 100,
                    height / 2,
                    (Math.random() - 0.5) * 100
                );
                
                scene.add(building);
                buildings.push(building);
            }
            
            // パーティクル効果
            createParticles(0x00ffff);
            
            // 地面
            const floorGeometry = new THREE.PlaneGeometry(200, 200);
            const floorMaterial = new THREE.MeshBasicMaterial({ 
                color: 0x001122, 
                transparent: true, 
                opacity: 0.5 
            });
            const floor = new THREE.Mesh(floorGeometry, floorMaterial);
            floor.rotation.x = -Math.PI / 2;
            scene.add(floor);
        }

        function buildForestWorld() {
            clearWorld();
            scene.fog = new THREE.Fog(0x228B22, 5, 50);
            
            // 木々
            for (let i = 0; i < 100; i++) {
                // 幹
                const trunkGeometry = new THREE.CylinderGeometry(0.3, 0.5, 8);
                const trunkMaterial = new THREE.MeshBasicMaterial({ color: 0x8B4513 });
                const trunk = new THREE.Mesh(trunkGeometry, trunkMaterial);
                
                // 葉
                const leavesGeometry = new THREE.SphereGeometry(3);
                const leavesMaterial = new THREE.MeshBasicMaterial({ color: 0x228B22 });
                const leaves = new THREE.Mesh(leavesGeometry, leavesMaterial);
                leaves.position.y = 6;
                
                const tree = new THREE.Group();
                tree.add(trunk);
                tree.add(leaves);
                
                tree.position.set(
                    (Math.random() - 0.5) * 80,
                    4,
                    (Math.random() - 0.5) * 80
                );
                
                scene.add(tree);
                trees.push(tree);
            }
            
            createParticles(0x90EE90);
            
            // 地面
            const floorGeometry = new THREE.PlaneGeometry(200, 200);
            const floorMaterial = new THREE.MeshBasicMaterial({ color: 0x2F4F2F });
            const floor = new THREE.Mesh(floorGeometry, floorMaterial);
            floor.rotation.x = -Math.PI / 2;
            scene.add(floor);
        }

        function buildSpaceWorld() {
            clearWorld();
            scene.fog = null;
            renderer.setClearColor(0x000000);
            
            // 星々
            for (let i = 0; i < 1000; i++) {
                const starGeometry = new THREE.SphereGeometry(0.1);
                const starMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff });
                const star = new THREE.Mesh(starGeometry, starMaterial);
                
                star.position.set(
                    (Math.random() - 0.5) * 200,
                    (Math.random() - 0.5) * 200,
                    (Math.random() - 0.5) * 200
                );
                
                scene.add(star);
                stars.push(star);
            }
            
            // 宇宙ステーション
            const stationGeometry = new THREE.TorusGeometry(10, 3, 8, 20);
            const stationMaterial = new THREE.MeshBasicMaterial({ 
                color: 0x888888, 
                wireframe: true 
            });
            const station = new THREE.Mesh(stationGeometry, stationMaterial);
            station.position.set(0, 0, -20);
            scene.add(station);
            
            createParticles(0xffffff);
        }

        function createParticles(color) {
            for (let i = 0; i < 200; i++) {
                const particleGeometry = new THREE.SphereGeometry(0.05);
                const particleMaterial = new THREE.MeshBasicMaterial({ 
                    color: color,
                    transparent: true,
                    opacity: 0.6
                });
                const particle = new THREE.Mesh(particleGeometry, particleMaterial);
                
                particle.position.set(
                    (Math.random() - 0.5) * 50,
                    Math.random() * 20,
                    (Math.random() - 0.5) * 50
                );
                
                particle.velocity = {
                    x: (Math.random() - 0.5) * 0.02,
                    y: Math.random() * 0.01,
                    z: (Math.random() - 0.5) * 0.02
                };
                
                scene.add(particle);
                particles.push(particle);
            }
        }

        function clearWorld() {
            buildings.forEach(b => scene.remove(b));
            trees.forEach(t => scene.remove(t));
            stars.forEach(s => scene.remove(s));
            particles.forEach(p => scene.remove(p));
            
            buildings = [];
            trees = [];
            stars = [];
            particles = [];
            
            // シーン全体をクリア
            while(scene.children.length > 0) {
                scene.remove(scene.children[0]);
            }
        }

        function animate() {
            requestAnimationFrame(animate);
            
            // カメラの自動回転
            const time = Date.now() * 0.0005;
            camera.position.x = Math.cos(time) * 20;
            camera.position.z = Math.sin(time) * 20;
            camera.lookAt(scene.position);
            
            // パーティクルアニメーション
            particles.forEach(particle => {
                particle.position.add(particle.velocity);
                
                if (particle.position.y > 25) {
                    particle.position.y = -5;
                }
                if (particle.position.x > 25) particle.position.x = -25;
                if (particle.position.x < -25) particle.position.x = 25;
                if (particle.position.z > 25) particle.position.z = -25;
                if (particle.position.z < -25) particle.position.z = 25;
            });
            
            // ビルの光る効果
            buildings.forEach(building => {
                if (Math.random() > 0.98) {
                    building.material.opacity = Math.random() * 0.5 + 0.5;
                }
            });
            
            renderer.render(scene, camera);
        }

        function changeWorld(newWorld) {
            world = newWorld;
            
            switch(world) {
                case 'cyber':
                    buildCyberWorld();
                    break;
                case 'forest':
                    buildForestWorld();
                    break;
                case 'space':
                    buildSpaceWorld();
                    break;
            }
        }

        function updateHUD() {
            setInterval(() => {
                document.getElementById('sync').textContent = (98 + Math.random() * 2).toFixed(1) + '%';
                document.getElementById('users').textContent = (1200 + Math.floor(Math.random() * 100)).toLocaleString();
            }, 2000);
        }

        function disconnect() {
            document.querySelector('.vr-container').style.opacity = '0';
            setTimeout(() => {
                document.body.innerHTML = `
                    <div style="display: flex; justify-content: center; align-items: center; height: 100vh; color: #00d4ff; font-size: 2rem; text-align: center;">
                        <div>
                            <div>Neural Link Disconnected</div>
                            <div style="font-size: 1rem; margin-top: 20px; opacity: 0.7;">現実世界へ戻りました</div>
                        </div>
                    </div>
                `;
            }, 1000);
        }

        // リサイズ対応
        window.addEventListener('resize', () => {
            if (camera && renderer) {
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize(window.innerWidth, window.innerHeight);
            }
        });
    </script>
</body>
</html>

C# 抽象クラス

using System;

// 抽象クラス
// User -> Japanese, American

abstract class User {
  public abstract void SayHi();
}

class Japanese: User {
  public override void SayHi() {
    Console.WriteLine("こんにちは！");
  }
}

class American: User {
  public override void SayHi() {
    Console.WriteLine("hi!");
  }
}

class MyApp {

  static void Main() {
    Japanese aki = new Japanese();
    aki.SayHi();
    American tom = new American();
    tom.SayHi();
  }

}

『デビルチルドレン リメイク』企画書

1. タイトル案

『デビルチルドレン：リバースコード』

2. 企画意図

2000年代初頭に登場し、少年少女が悪魔と契約して戦うという世界観で人気を博した『デビルチルドレン』シリーズを、現代の技術とニーズに合わせてリメイク。ペルソナやポケモン、デジモンの人気が再燃する中、悪魔との契約・育成・融合・人間ドラマを融合させたRPGとして、懐かしさと新しさを両立させます。

3. 想定プラットフォーム

  • Nintendo Switch
  • PlayStation 5
  • Steam（PC）
  • スマートフォン（クラウド連携 or 外伝展開）

4. ゲーム概要

ジャンル

  • 悪魔育成RPG＋ダークファンタジーADV

主な要素

  • ターン制バトル（3対3）
  • 悪魔の仲間化・進化・合体（従来の悪魔合体に加え、個体ごとの性格やスキル成長分岐あり）
  • 悪魔と絆を深める「契約イベント」や「共鳴システム」
  • 選択によるストーリールート分岐（LAW / CHAOS / NEUTRAL）
  • ジュブナイル・ホラー要素（子供視点で描く社会の闇）

5. ストーリー構成（例）

あらすじ（リメイク用に刷新）

主人公（カイ / アミ）は、異世界「魔界」と現実世界の交差点である「黄昏区（たそがれく）」に迷い込む。悪魔と契約する能力を持つ「契約者」として覚醒し、2つの世界の崩壊を止める旅へ出る。だが、選ぶ道によって人類の運命も変わる──。

6. メインキャラクター（案）

  • カイ（主人公・男性）
  • アミ（主人公・女性）
  • ロキ（主人公に付き添う謎の悪魔）
  • セト（CHAOSルートの導き手）
  • メタトロン（LAWルートの守護天使）
  • ルシフェル（真実を知る者）

7. 主な新要素

項目内容
3Dグラフィック化Unity / Unreal Engineによるリアルタイム3D
悪魔フルボイス化合体時や契約時に専用セリフあり
難易度調整機能EASY〜CHAOSまで選択可能
マルチエンディングルート分岐と「真・人類ルート」追加
オンライン育成交換要素プレイヤー間で悪魔を交換できる

8. 想定スケジュール

フェーズ期間内容
企画・プリプロ3か月シナリオ/仕様書/キャラデザイン
開発12〜18か月モデリング/実装/収録/テスト
テスト・調整3か月バランス調整/デバッグ
発売XX年XX月パッケージ＆DL版展開

9. 想定ターゲット

  • 元祖『デビチル』ファン（20〜40代）
  • 現代のRPGファン（ペルソナ、ポケモン、デジモン層）
  • ダークジュブナイルや退廃SFが好きなプレイヤー

10. プロモーション戦略案

  • 初報ティザーPV公開（『デビチル』ロゴを強調）
  • キャラ人気投票キャンペーン
  • 悪魔デザインコンテスト（ユーザー参加型）
  • オリジナルサウンドトラック配信
  • コラボカフェ、限定グッズ展開

とある魔術の禁書目録と宗教

『とある魔術の禁書目録』（とあるまじゅつのインデックス）は、鎌池和馬によるライトノベルシリーズで、科学と魔術が同時に存在する世界を舞台にした作品です。このシリーズでは宗教的な要素が非常に深く関係しており、物語の根幹やキャラクター設定にも強く反映されています。

🔷 1. 宗教的テーマの主な特徴

◾ キリスト教の影響

特にカトリック・プロテスタント・正教会などのキリスト教宗派が頻繁に登場します。

  • 「必要悪の教会（ネセサリウス）」：イギリス清教（Puritan Church of England）内の秘密組織。インデックスやステイル・マグヌスが所属。
  • ローマ正教（ローマカトリック教会）：ヴェントやアニェーゼ部隊が所属し、対立組織として描かれる。
  • 天草式十字凄教：日本のキリスト教系地下組織。和風とキリスト教の融合。

◾ 魔術体系と宗教

  • 魔術は「信仰」によって体系化されており、神・天使・聖人などの宗教的概念が魔術の理論や力の根拠になっています。
  • **天使（エンジェル）や聖人（セイント）**の存在も科学的理論ではなく宗教的奇跡として扱われます。

🔷 2. 宗教と科学の対立構造

本作の最大のテーマは「科学と魔術の対立」です。これは単なるファンタジー設定ではなく、宗教と理性（啓蒙思想）的価値観の対立のメタファーとも解釈できます。

科学サイド魔術サイド
学園都市（超能力開発）世界中の宗教組織
理性・再現性・実験信仰・奇跡・象徴
能力開発による進化神や奇跡への帰依

🔷 3. 主要キャラと宗教背景

キャラクター宗教的背景
インデックスイギリス清教のシスター、10万3000冊の魔道書を記憶
ステイル・マグヌスイギリス清教の神父、炎の魔術師
神裂火織天草式十字凄教出身の聖人
アニェーゼ＝サンクティスローマ正教の魔術師
ヴェント＝オブ＝ザ＝フロントローマ正教の「神の右席」

🔷 4. 宗教の扱いに関する考察

  • 現実の宗教を直接的にモデル化してはいるが、あくまでフィクションとしてのアレンジが加えられている。
  • 各宗派の描写は誇張や創作を含んでいるが、中世～現代の神学的概念や教義、聖書などに基づく知識が元になっており、作者の宗教知識の深さが感じられる。
  • 一方で、宗教そのものへの風刺や批判は少なく、信仰を持つ者たちの「矛盾」「苦悩」「理想」を描写するスタンスが基本。

🔷 まとめ

『とある魔術の禁書目録』は、宗教を単なる設定の一部ではなく、登場人物の信念や世界の構造そのものに組み込んでいる稀有な作品です。宗教と科学、信仰と理性の相克をエンタメ作品として巧みに表現している点が評価されるべきでしょう。

希望があれば、「とある魔術の禁書目録に登場する宗派一覧」「現実の宗教との違い」「魔術理論の構造」など、さらに深掘りした解説もできます。

4o

C# コンストラクタ

using System;

// コンストラクタ

class User {
  public string name;
  // public User() {
  //   this.name = "ME";
  // }
  public User(string name) {
    this.name = name;
  }
  // public User() { // オーバーロード
  //   this.name = "nobody";
  // }
  public User(): this("nobody") {
  }
  public void SayHi() {
    Console.WriteLine($"hi {name}");
  }
}

class MyApp {

  static void Main() {
    // User user = new User();
    // user.SayHi();
    User tom = new User("Tom");
    tom.SayHi();
    User user = new User();
    user.SayHi();
  }

}

求人掲示板サイト.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JobFinder - 求人掲示板</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body { font-family: sans-serif; background: #f4f4f4; margin: 0; }
    header { background: #007bff; color: white; padding: 1rem; text-align: center; }
    main { padding: 2rem; max-width: 900px; margin: auto; }
    .search-bar, .post-form { background: white; padding: 1rem; border-radius: 8px; margin-bottom: 2rem; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
    .job-card {
      background: white; padding: 1rem; margin-bottom: 1rem;
      border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    .job-card h2 { margin-top: 0; }
    .job-card button {
      background: #007bff; color: white;
      border: none; padding: 0.5rem 1rem;
      border-radius: 4px; cursor: pointer;
    }
    .job-card button:hover { background: #0056b3; }
    .modal {
      display: none; position: fixed; z-index: 999;
      left: 0; top: 0; width: 100%; height: 100%;
      background: rgba(0,0,0,0.5);
      justify-content: center; align-items: center;
    }
    .modal-content {
      background: white; padding: 2rem;
      border-radius: 8px; max-width: 500px;
    }
    label, input, textarea, select {
      display: block; width: 100%; margin-bottom: 10px;
    }
    button[type="submit"] {
      background: #28a745;
      color: white;
      padding: 0.5rem 1rem;
      border: none;
      border-radius: 4px;
    }
  </style>
</head>
<body>

<header>
  <h1>JobFinder - 求人掲示板</h1>
</header>

<main>
  <!-- 🔍 検索バー -->
  <div class="search-bar">
    <h3>🔍 求人検索</h3>
    <input type="text" id="searchLocation" placeholder="勤務地で検索（例: 東京）">
    <button onclick="filterJobs()">検索</button>
  </div>

  <!-- 📋 求人一覧 -->
  <div id="jobList"></div>

  <!-- 📝 求人投稿フォーム -->
  <div class="post-form">
    <h3>📝 新しい求人を投稿</h3>
    <input type="text" id="jobTitle" placeholder="職種（例: Webエンジニア）">
    <input type="text" id="jobCompany" placeholder="会社名">
    <input type="text" id="jobLocation" placeholder="勤務地（例: 東京）">
    <textarea id="jobDescription" rows="3" placeholder="仕事内容を入力..."></textarea>
    <button onclick="addJob()">求人を投稿</button>
  </div>
</main>

<!-- 📄 モーダル -->
<div class="modal" id="jobModal">
  <div class="modal-content" id="modalContent"></div>
</div>

<script>
let jobs = [
  {
    title: "Webエンジニア",
    company: "株式会社テック",
    location: "東京",
    description: "ReactやVueを用いた開発。経験者優遇。"
  },
  {
    title: "営業職",
    company: "セールス株式会社",
    location: "大阪",
    description: "法人営業経験者歓迎。"
  }
];

function displayJobs(filteredJobs = jobs) {
  const jobList = document.getElementById("jobList");
  jobList.innerHTML = "";
  filteredJobs.forEach((job, index) => {
    const card = document.createElement("div");
    card.className = "job-card";
    card.innerHTML = `
      <h2>${job.title}</h2>
      <p><strong>会社:</strong> ${job.company}</p>
      <p><strong>勤務地:</strong> ${job.location}</p>
      <button onclick="showDetails(${index})">詳細を見る</button>
    `;
    jobList.appendChild(card);
  });
}

function showDetails(index) {
  const job = jobs[index];
  const modal = document.getElementById("jobModal");
  const modalContent = document.getElementById("modalContent");
  modalContent.innerHTML = `
    <h2>${job.title}</h2>
    <p><strong>会社:</strong> ${job.company}</p>
    <p><strong>勤務地:</strong> ${job.location}</p>
    <p>${job.description}</p>
    <button onclick="alert('応募完了しました！')">応募する</button>
    <button onclick="document.getElementById('jobModal').style.display='none'">閉じる</button>
  `;
  modal.style.display = "flex";
}

function addJob() {
  const title = document.getElementById("jobTitle").value;
  const company = document.getElementById("jobCompany").value;
  const location = document.getElementById("jobLocation").value;
  const description = document.getElementById("jobDescription").value;

  if (title && company && location && description) {
    jobs.push({ title, company, location, description });
    displayJobs();
    document.getElementById("jobTitle").value = "";
    document.getElementById("jobCompany").value = "";
    document.getElementById("jobLocation").value = "";
    document.getElementById("jobDescription").value = "";
  } else {
    alert("すべての項目を入力してください");
  }
}

function filterJobs() {
  const keyword = document.getElementById("searchLocation").value.trim();
  const filtered = jobs.filter(job => job.location.includes(keyword));
  displayJobs(filtered);
}

// 初期表示
displayJobs();

window.onclick = function(event) {
  const modal = document.getElementById("jobModal");
  if (event.target === modal) {
    modal.style.display = "none";
  }
}
</script>

</body>
</html>

エヴァンゲリオンと宗教

🌟 主な宗教的要素と意味

1. キリスト教的象徴

  • 十字架の光（爆発時の十字）
    → 神聖、犠牲、浄化を暗示する視覚的モチーフ。
  • ロンギヌスの槍
    → キリストの脇腹を刺したとされる聖槍。エヴァでは“神を封じる”道具として登場。
  • アダムとリリス
    → 旧約聖書に出てくる人類の起源的存在。エヴァでは人類や使徒の祖先として描かれる。
  • 使徒（Angel）
    → 原義では「神の使い」。作中では人類と敵対する存在。

これらのモチーフは、特定の信仰を推奨するためではなく、“神話的なスケール感”や“終末論的世界観”を演出するための装飾的・象徴的役割を果たしています。

2. ユダヤ神秘主義（カバラ）

  • セフィロトの樹（生命の樹）
    → 生命と宇宙の構造を象徴する図。人類補完計画でこれが用いられ、“人の存在の完成”を意味する。
  • ゲヒナ／補完／魂の統一
    → カバラや神秘思想における“魂の還元”や“存在の統合”に類似。

3. 仏教・神道的要素

  • 明確な用語は少ないものの、「個の喪失」「補完による一体化」などは、仏教の輪廻・無我観や神道における万物の霊的つながりに通じる哲学的テーマを持つ。

🎥 なぜ宗教モチーフを使ったのか？

監督の庵野秀明は以下のように語っています：

  • 「カッコいいから使った」
    → 庵野自身が認めているように、宗教的な記号は雰囲気づくり、世界観の格調を上げるために用いられた。
  • 「物語に深みを与えるため」
    → 日常的な学園生活や人間ドラマに対して、宇宙的スケールの背景を持たせるため。

🧠 深読みされる理由

視聴者がエヴァに宗教的・哲学的な意味を読み取るのは、以下のような構造のため：

  • 明確な答えを提示しない演出
  • 象徴の多用と難解な設定
  • キャラクターの内面と「神」や「存在」への問い

 ゲーム企画書ChronoBlade

 ゲーム企画書

タイトル：「ChronoBlade（クロノブレイド）」

ジャンル：アクションRPG（時間操作×剣術バトル）

プラットフォーム：PC / コンシューマ（PS5 / Xbox） / Steam Deck

プレイ人数：1人（後に協力プレイモードを実装予定）

対象年齢：12歳以上

1. コンセプト

「時間を操る剣士」として、時を越えた世界を旅し、運命を断ち切る壮大な物語を描く。本作は、アクション性と戦略性を融合させた“時間干渉型アクションRPG”であり、時間を遅らせたり、停止したり、巻き戻す力を駆使して戦うのが最大の特徴である。

2. 世界観

――時空を壊された世界で、人々は「未来」を失った。
舞台は、時間軸が乱れた崩壊寸前の多元世界「テンペルクロノス」。各時代（中世・近未来・古代・終末世界など）を旅しながら、異なる歴史の分岐を巡り、「正しい未来」を見出していく。

3. 主人公・キャラクター

  • カイ＝アルデン（CV案あり）
    　失われた王国の騎士。時を断ち切る剣「クロノブレイド」を手に入れ、失った妹を取り戻すために旅に出る。
  • ティナ＝リュミエール
    　時の研究者。時間魔法を操ることができ、サポートキャラ兼ヒロイン。

4. ゲームシステム

● バトル

  • 通常のアクションバトルに加え、「時間停止」「時間巻き戻し」「未来視（予知）」といったシステムを組み合わせる。
  • コンボ攻撃とタイムスキルの組み合わせで“時空コンボ”が発動。

● フィールド探索

  • 各時代の世界を自由に探索。時間の干渉によって地形や人間関係が変化。
  • 例：古代で橋を作れば、未来で村が発展している、などの「因果リンク」要素。

● 成長・スキル

  • 剣術・時術の2つのスキルツリー。
  • 「記憶のかけら」を集めることで過去の真実や新たな能力を開放。

5. グラフィック・演出

  • セミリアルな3Dアニメ調。
  • UE5を使用、ナイアガラでの時間エフェクト演出を多用。
  • スロー演出や巻き戻しエフェクトなど、視覚的にも時間の影響を感じられる作り。

6. 音楽・効果音

  • テーマ曲は時を感じさせる幻想的な旋律。
  • バトル時には緊張感あるストリングスやピアノ、スロー時にはディレイ・リバース音使用。
  • サウンドディレクター案：古代祐三風を想定。

7. マネタイズ・展開案

  • 本編は買い切り型。
  • 追加DLC（過去の歴史エピソード）配信
  • 時代スキン、ボイスパック販売
  • アニメ化・小説・コミカライズメディア展開も視野に入れる

8. 想定スケジュール

フェーズ内容期間
企画・仕様設計ゲームコンセプト固め、仕様書作成1〜2ヶ月
プロトタイプ制作プレイヤー・バトルコアの試作2〜3ヶ月
本開発ストーリー・マップ制作・演出追加6ヶ月〜12ヶ月
テスト・調整QA・デバッグ・バランス調整2ヶ月
リリース国内外展開1ヶ月〜

9. 開発体制（案）

  • ディレクター：1名
  • プログラマー：2〜3名（UE5ブループリント& C++）
  • デザイナー：2D/3D各1名
  • サウンド：外注
  • シナリオ：1名（外注可）
  • デバッグ：クラウドQA導入想定

必要に応じて、企画書のPDF化・プレゼン用スライド化・イラスト付き提案資料化なども可能です。
この内容でよければ続編やDLCの企画案も作成できます。
修正点や、ジャンル・世界観・主人公の変更などご希望があればお知らせください！

4o

note風WEBサービス

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>MiniNote - Note風ブログ with フィルタ・いいね・検索機能</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body { font-family: sans-serif; background: #f9f9f9; margin: 0; }
    header { background: #2c3e50; color: white; padding: 1em; text-align: center; }
    nav { background: #34495e; text-align: center; padding: 0.5em; }
    nav button { margin: 0 8px; padding: 8px 20px; cursor: pointer; background: #ecf0f1; border: none; border-radius: 5px; }
    #main { max-width: 900px; margin: 2em auto; padding: 1em; background: white; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
    article { padding: 1em; border-bottom: 1px solid #ddd; }
    h2 { margin: 0.5em 0; }
    .meta { font-size: 0.9em; color: #999; margin-bottom: 0.5em; }
    textarea, input[type="text"] { width: 100%; padding: 10px; margin: 10px 0; border-radius: 5px; border: 1px solid #ccc; }
    button.submit {
      background: #3498db; color: white; border: none;
      padding: 10px 20px; border-radius: 6px;
      cursor: pointer; font-weight: bold;
    }
    .hidden { display: none; }
    .tag { color: #3498db; margin-right: 5px; font-size: 0.9em; cursor: pointer; }
    .actions button { margin-right: 10px; }
    .like { color: #e74c3c; cursor: pointer; margin-left: 10px; }
  </style>
</head>
<body>

<header><h1>📘 MiniNote - あなたのNote風ブログ</h1></header>

<nav>
  <button onclick="showView('home')">🏠 ホーム</button>
  <button onclick="showView('new')">✍ 新規投稿</button>
  <input type="text" id="searchInput" placeholder="検索" oninput="renderPosts()" style="padding:5px; width: 200px;">
</nav>

<div id="main">
  <div id="homeView">
    <div id="postList"></div>
  </div>

  <div id="newView" class="hidden">
    <h2>新しい投稿を作成</h2>
    <input type="text" id="titleInput" placeholder="タイトル">
    <textarea id="contentInput" rows="8" placeholder="本文"></textarea>
    <input type="text" id="tagInput" placeholder="タグ（カンマ区切り）">
    <button class="submit" onclick="addPost()">投稿する</button>
  </div>

  <div id="detailView" class="hidden">
    <article>
      <h2 id="detailTitle"></h2>
      <div class="meta" id="detailDate"></div>
      <p id="detailContent"></p>
      <div id="detailTags"></div>
      <div class="like" id="likeDisplay" onclick="likePost(currentIndex)">❤️ <span id="likeCount">0</span></div>
    </article>
    <div class="actions">
      <button onclick="editPost(currentIndex)">✏ 編集</button>
      <button onclick="deletePost(currentIndex)">🗑 削除</button>
      <button onclick="showView('home')">← 戻る</button>
    </div>
  </div>
</div>

<script>
  let posts = JSON.parse(localStorage.getItem("posts") || "[]");
  let currentIndex = null;
  let filterTag = null;

  function showView(view) {
    document.querySelectorAll('#main > div').forEach(div => div.classList.add('hidden'));
    document.getElementById(view + "View").classList.remove("hidden");
    if (view === "home") renderPosts();
  }

  function addPost() {
    const title = document.getElementById("titleInput").value;
    const content = document.getElementById("contentInput").value;
    const tags = document.getElementById("tagInput").value.split(',').map(tag => tag.trim()).filter(Boolean);
    if (!title || !content) return alert("タイトルと本文を入力してください");

    const date = new Date().toLocaleString();
    posts.unshift({ title, content, date, tags, likes: 0 });
    localStorage.setItem("posts", JSON.stringify(posts));
    clearForm();
    showView("home");
  }

  function renderPosts() {
    const list = document.getElementById("postList");
    const search = document.getElementById("searchInput").value.toLowerCase();
    list.innerHTML = "";
    posts.filter(post => {
      const inSearch = post.title.toLowerCase().includes(search) || post.content.toLowerCase().includes(search);
      const inTag = !filterTag || post.tags.includes(filterTag);
      return inSearch && inTag;
    }).forEach((post, index) => {
      const el = document.createElement("article");
      el.innerHTML = `
        <h2>${post.title}</h2>
        <div class="meta">${post.date}</div>
        <p>${post.content.substring(0, 80)}...</p>
        <div>${post.tags.map(tag => `<span class='tag' onclick='filterByTag("${tag}")'>#${tag}</span>`).join(' ')}</div>
        <div class="like">❤️ ${post.likes}</div>
        <button onclick="showDetail(${index})">📖 詳細</button>
      `;
      list.appendChild(el);
    });
  }

  function filterByTag(tag) {
    filterTag = tag;
    renderPosts();
  }

  function showDetail(index) {
    const post = posts[index];
    currentIndex = index;
    document.getElementById("detailTitle").innerText = post.title;
    document.getElementById("detailDate").innerText = post.date;
    document.getElementById("detailContent").innerText = post.content;
    document.getElementById("detailTags").innerHTML = post.tags.map(tag => `<span class='tag'>#${tag}</span>`).join(' ');
    document.getElementById("likeCount").innerText = post.likes;
    showView("detail");
  }

  function likePost(index) {
    posts[index].likes++;
    localStorage.setItem("posts", JSON.stringify(posts));
    document.getElementById("likeCount").innerText = posts[index].likes;
    renderPosts();
  }

  function editPost(index) {
    const post = posts[index];
    document.getElementById("titleInput").value = post.title;
    document.getElementById("contentInput").value = post.content;
    document.getElementById("tagInput").value = post.tags.join(', ');
    posts.splice(index, 1);
    localStorage.setItem("posts", JSON.stringify(posts));
    showView("new");
  }

  function deletePost(index) {
    if (!confirm("本当に削除しますか？")) return;
    posts.splice(index, 1);
    localStorage.setItem("posts", JSON.stringify(posts));
    showView("home");
  }

  function clearForm() {
    document.getElementById("titleInput").value = "";
    document.getElementById("contentInput").value = "";
    document.getElementById("tagInput").value = "";
  }

  showView("home");
</script>

</body>
</html>

TRPGシナリオ自動生成＆共有

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>TRPGシナリオ自動生成＆共有</title>
  <style>
    body {
      font-family: 'Segoe UI', sans-serif;
      background: #f4f4f4;
      padding: 20px;
      max-width: 800px;
      margin: auto;
    }
    h1, h2 {
      text-align: center;
    }
    select, button, textarea {
      width: 100%;
      padding: 10px;
      margin-top: 10px;
      font-size: 1rem;
    }
    .box {
      background: #fff;
      padding: 15px;
      border-radius: 8px;
      margin-top: 20px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .scenario {
      background: #f9f9f9;
      border-left: 5px solid #4CAF50;
      margin-bottom: 10px;
      padding: 10px;
      border-radius: 5px;
      position: relative;
    }
    .btns {
      margin-top: 10px;
      display: flex;
      gap: 10px;
    }
    .copy, .save, .delete {
      cursor: pointer;
      border: none;
      padding: 8px 12px;
      border-radius: 4px;
    }
    .copy { background: #2196F3; color: white; }
    .save { background: #4CAF50; color: white; }
    .delete { background: #f44336; color: white; }
  </style>
</head>
<body>
  <h1>🎲 TRPGシナリオ自動生成サイト</h1>

  <div class="box">
    <label>ジャンル選択:</label>
    <select id="genre">
      <option value="fantasy">ファンタジー</option>
      <option value="horror">ホラー</option>
      <option value="scifi">SF</option>
    </select>
    <button onclick="generateScenario()">📜 シナリオを生成する</button>
  </div>

  <div id="scenarioBox" class="box"></div>

  <h2>🗃 保存済みシナリオ</h2>
  <div id="savedScenarios" class="box"></div>

  <script>
    const data = {
      fantasy: {
        title: ["封印の迷宮", "聖騎士の試練", "魔王復活の予兆", "失われた王国"],
        world: ["中世の王国", "古代の神殿", "天空都市", "エルフの森"],
        incident: ["魔法の暴走", "伝説の剣の発見", "精霊の異変", "竜の襲撃"],
        npc: ["若き魔導士", "忠義の騎士", "隠者の賢者", "裏切り者の巫女"],
        goal: ["真実を解明せよ", "封印を強化せよ", "儀式を阻止せよ", "遺跡の謎を解け"]
      },
      horror: {
        title: ["呪われた村", "深夜の廃病院", "封印されたビデオ", "血塗られた儀式"],
        world: ["雨の山奥", "閉鎖された病院", "地下の儀式場", "忘れ去られた洋館"],
        incident: ["突然の失踪事件", "見えない何かの影", "不気味な手紙", "鏡の中の誰か"],
        npc: ["精神を病んだ神父", "警察官の幽霊", "語らぬ老婆", "首のない少女"],
        goal: ["脱出せよ", "謎を暴け", "呪いを解け", "儀式を止めろ"]
      },
      scifi: {
        title: ["星間戦争の火種", "機械反乱の夜", "消えた宇宙船", "記憶を失った地球"],
        world: ["宇宙コロニー", "月面都市", "異星の遺跡", "サイバーパンク都市"],
        incident: ["AIの暴走", "重力異常", "通信断絶", "テレポート事故"],
        npc: ["サイボーグ兵士", "記憶を失った博士", "企業スパイ", "異星の子供"],
        goal: ["原因を究明せよ", "AIを停止せよ", "人類を救え", "真実を暴け"]
      }
    };

    function generateScenario() {
      const genre = document.getElementById("genre").value;
      const g = data[genre];

      const title = rand(g.title);
      const world = rand(g.world);
      const incident = rand(g.incident);
      const npc = rand(g.npc);
      const goal = rand(g.goal);

      const scenarioText = `【タイトル】${title}\n【舞台】${world}\n【事件】${incident}\n【NPC】${npc}\n【目的】${goal}`;
      const html = `
        <div class="scenario">
          <pre>${scenarioText}</pre>
          <div class="btns">
            <button class="copy" onclick="copyText(\`${scenarioText.replace(/`/g, '\\`')}\`)">📋 コピー</button>
            <button class="save" onclick="saveScenario(\`${scenarioText.replace(/`/g, '\\`')}\`)">💾 保存</button>
          </div>
        </div>
      `;
      document.getElementById("scenarioBox").innerHTML = html;
    }

    function rand(arr) {
      return arr[Math.floor(Math.random() * arr.length)];
    }

    function copyText(text) {
      navigator.clipboard.writeText(text).then(() => {
        alert("コピーしました！");
      });
    }

    function saveScenario(text) {
      let saved = JSON.parse(localStorage.getItem("trpgScenarios") || "[]");
      saved.push(text);
      localStorage.setItem("trpgScenarios", JSON.stringify(saved));
      alert("保存しました！");
      showSaved();
    }

    function deleteScenario(index) {
      let saved = JSON.parse(localStorage.getItem("trpgScenarios") || "[]");
      saved.splice(index, 1);
      localStorage.setItem("trpgScenarios", JSON.stringify(saved));
      showSaved();
    }

    function showSaved() {
      const box = document.getElementById("savedScenarios");
      const saved = JSON.parse(localStorage.getItem("trpgScenarios") || "[]");
      if (saved.length === 0) {
        box.innerHTML = "<p>保存されているシナリオはありません。</p>";
        return;
      }
      box.innerHTML = saved.map((s, i) => `
        <div class="scenario">
          <pre>${s}</pre>
          <div class="btns">
            <button class="copy" onclick="copyText(\`${s.replace(/`/g, '\\`')}\`)">📋 コピー</button>
            <button class="delete" onclick="deleteScenario(${i})">🗑 削除</button>
          </div>
        </div>
      `).join("");
    }

    // 初回ロード
    showSaved();
  </script>
</body>
</html>