<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="theme-color" content="#183a4c">
<title>ひかりのことば PLUS | 聖書・祈り・学習BOT</title>
<style>
:root{--bg:#f4f4ee;--surface:#fff;--ink:#233546;--muted:#647586;--line:#e0e6e8;--deep:#183a4c;--deep2:#315a6d;--accent:#ae8950;--soft:#edf4f5;--shadow:0 12px 35px #1b364014;--bubble:#edf4f4}
body.dark{--bg:#101d28;--surface:#192c3a;--ink:#f2f3f0;--muted:#acbcc7;--line:#385061;--deep:#243f52;--deep2:#376177;--soft:#243c4b;--shadow:0 15px 40px #030b1080;--bubble:#253e4b;color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.7 system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif}button,input,textarea,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #d0a86b;outline-offset:2px}a{color:inherit}.wrap{max-width:1250px;margin:auto;padding:20px 18px 50px}.hero{position:relative;overflow:hidden;border-radius:26px;background:linear-gradient(125deg,#112c40,#2f5868 75%,#56727a);color:white;padding:28px 32px;box-shadow:var(--shadow)}.hero:after{content:'✦';position:absolute;right:50px;top:-80px;font-size:260px;color:#fff1;pointer-events:none}.hero .kicker{letter-spacing:.23em;text-transform:uppercase;font-size:11px;color:#dfc99f}.hero h1{font-size:clamp(27px,4vw,42px);line-height:1.25;margin:8px 0}.hero p{margin:0;max-width:680px;color:#e4edef}.top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.top-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;z-index:2}.ghost{border:1px solid #ffffff77;background:#ffffff16;color:white;border-radius:11px;padding:8px 12px}.ghost:hover{background:#ffffff30}.shell{display:grid;grid-template-columns:255px minmax(0,1fr) 276px;gap:17px;margin-top:18px;align-items:start}.panel{background:var(--surface);border:1px solid var(--line);border-radius:19px;box-shadow:var(--shadow)}.left,.right{padding:20px}.panel h2{font-size:16px;margin:0 0 11px}.group-label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);margin:18px 0 9px}.nav{display:flex;flex-direction:column;gap:5px}.nav button{width:100%;border:1px solid transparent;border-radius:11px;background:transparent;color:var(--ink);padding:11px 12px;text-align:left}.nav button:hover{background:var(--soft)}.nav button.active{background:var(--soft);border-color:var(--line);font-weight:800}.small{font-size:12px;color:var(--muted)}.notice{font-size:12px;color:var(--muted);line-height:1.85;padding:12px;background:var(--soft);border-radius:12px;margin-top:18px}.main{min-width:0}.view{display:none}.view.active{display:block}.view-header{padding:18px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:10px}.view-header h2{margin:0}.primary,.secondary,.chip{border-radius:11px;padding:10px 13px}.primary{background:var(--deep2);color:white;border:1px solid transparent;font-weight:700}.primary:hover{filter:brightness(1.12)}.secondary{background:var(--surface);border:1px solid var(--line);color:var(--ink)}.secondary:hover,.chip:hover{background:var(--soft)}.subtle{border:0;background:transparent;color:var(--muted);padding:6px}.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.column{display:flex;flex-direction:column;gap:13px}.chat-window{height:490px;overflow-y:auto;padding:19px;display:flex;flex-direction:column;gap:15px;background:linear-gradient(180deg,transparent,var(--soft))}.chat-row{max-width:91%;display:flex;flex-direction:column;align-items:flex-start;gap:4px}.chat-row.user{align-self:flex-end;align-items:flex-end}.bubble{padding:13px 16px;border-radius:16px;border:1px solid var(--line);background:var(--bubble);white-space:pre-wrap;overflow-wrap:anywhere}.chat-row.user .bubble{background:var(--deep2);border-color:transparent;color:#fff}.bubble small{display:block;margin-top:9px;border-top:1px solid var(--line);padding-top:7px;color:var(--muted)}.chat-row.user .bubble small{color:#fff}.stamp{color:var(--muted);font-size:10px;padding:0 5px}.composer{padding:15px;border-top:1px solid var(--line)}textarea,input,select{color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px;width:100%;min-width:0}textarea{resize:vertical;min-height:90px}.composer textarea{min-height:75px}.toolbar{display:flex;gap:8px;justify-content:space-between;align-items:center;margin-top:8px}.padded{padding:20px}.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:12px;padding:8px 11px;border-radius:99px}.quote{background:var(--soft);border-left:4px solid var(--accent);border-radius:0 12px 12px 0;padding:12px 14px;margin:11px 0}.quote p{margin:0}.quote small{display:block;color:var(--muted);margin-top:7px}.stat{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.stat .tile{background:var(--soft);padding:12px;border-radius:11px}.stat b{display:block;font-size:21px}.tile small{color:var(--muted)}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}.card{padding:15px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}.card h3{font-size:15px;margin:0 0 7px}.card p{font-size:13px;color:var(--muted);margin:0 0 8px}.card .row{justify-content:space-between}.reading{padding:12px;border:1px solid var(--line);border-radius:12px;margin:8px 0;background:var(--surface)}.reading h3{font-size:14px;margin:0 0 7px}.reading p{font-size:13px;margin:0 0 10px}.tag{display:inline-block;font-size:11px;color:var(--muted);background:var(--soft);padding:3px 8px;border-radius:30px}.books{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:7px;max-height:380px;overflow:auto;padding:6px 0}.book{border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:9px;text-align:left;border-radius:9px}.book:hover{background:var(--soft)}.tabs{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 14px}.tabs button{border:1px solid var(--line);background:var(--surface);padding:8px 12px;border-radius:9px;color:var(--ink)}.tabs button.active{background:var(--deep2);color:white}.muted{color:var(--muted)}.hide{display:none!important}.quiz-option{display:block;width:100%;text-align:left;padding:12px;border:1px solid var(--line);border-radius:11px;background:var(--surface);color:var(--ink);margin-top:8px}.quiz-option:hover{background:var(--soft)}.quiz-option.correct{border-color:#3da57a;background:#dcf8e8;color:#174c37}.quiz-option.wrong{border-color:#c96b65;background:#ffe9e7;color:#833028}.progress{height:9px;border-radius:30px;background:var(--line);overflow:hidden;margin:12px 0}.progress i{display:block;background:var(--accent);height:100%;transition:width .2s}.footer{text-align:center;color:var(--muted);font-size:12px;margin-top:24px}.right .reading{border:0;background:var(--soft)}.danger{color:#b74b52}.divider{border:0;border-top:1px solid var(--line);margin:18px 0}#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#16374b;color:#fff;padding:10px 16px;border-radius:12px;box-shadow:0 10px 40px #0004;z-index:10;display:none;max-width:95vw;text-align:center}@media(max-width:1080px){.shell{grid-template-columns:220px minmax(0,1fr)}.right{grid-column:1/-1}.right .stat{grid-template-columns:repeat(4,1fr)}}@media(max-width:700px){.shell{display:flex;flex-direction:column}.shell>*,.main{width:100%}.left{padding:13px}.nav{flex-direction:row;overflow-x:auto;white-space:nowrap}.nav button{width:auto;flex:0 0 auto}.group-label{display:none}.hero{padding:24px 20px}.top{flex-direction:column}.top-actions{justify-content:flex-start}.chat-window{height:440px}.right .stat{grid-template-columns:repeat(2,1fr)}.wrap{padding:12px}.view-header{padding:15px}.padded{padding:15px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
</style>
</head>
<body>
<div class="wrap">
<header class="hero"><div class="top"><div><div class="kicker">WORDS OF LIGHT · PERSONAL STUDY</div><h1>✝ ひかりのことば <span style="font-size:.35em;vertical-align:middle;letter-spacing:.14em">PLUS</span></h1><p>聖書の学び、日々の祈り、疑問や悩みを静かに整理する、オフラインのキリスト教学習BOT。</p></div><div class="top-actions"><button class="ghost" id="themeButton">☾ 表示切替</button><button class="ghost" id="exportButton">⇩ データ保存</button></div></div></header>
<div class="shell">
<aside class="panel left"><h2>メニュー</h2><nav class="nav" aria-label="メインメニュー"><button data-view="chat" class="active">💬 聖書BOT</button><button data-view="study">📖 聖書を学ぶ</button><button data-view="prayer">🕊 祈りのノート</button><button data-view="quiz">✏️ 聖書クイズ</button><button data-view="saved">☆ 保存したことば</button><button data-view="settings">⚙ 設定・管理</button></nav><div class="group-label">おすすめの話題</div><div class="chips" id="quickTopics"><button class="chip" data-ask="神とは何ですか">神について</button><button class="chip" data-ask="イエスの教え">イエス</button><button class="chip" data-ask="赦しについて">赦し</button><button class="chip" data-ask="仕事で疲れました">疲れ</button><button class="chip" data-ask="不安で眠れません">不安</button><button class="chip" data-ask="今日のことば">今日のことば</button><button class="chip" data-ask="なぜ苦しみがあるの">苦しみ</button><button class="chip" data-ask="祈りを作って">祈り</button></div><div class="notice">このBOTはローカルの応答ルールを使っています。実在の牧師・神・イエスとして発言するものではなく、回答は信仰上の解釈の一例です。</div></aside>
<main class="main">
<section class="panel view active" id="view-chat"><div class="view-header"><div><h2>聖書のことば案内BOT</h2><div class="small">テーマに応じた説明と聖書箇所の案内</div></div><button id="clearChat" class="secondary">履歴消去</button></div><div id="chatLog" class="chat-window" role="log" aria-live="polite" aria-label="会話履歴"></div><form id="chatForm" class="composer"><label class="small" for="chatInput">メッセージを入力</label><textarea id="chatInput" maxlength="800" placeholder="例:希望について教えてください(Ctrl + Enterで送信)"></textarea><div class="toolbar"><span class="small" id="charCount">0 / 800</span><button class="primary" type="submit">送信 ↗</button></div></form></section>
<section class="panel view" id="view-study"><div class="view-header"><div><h2>聖書を学ぶ</h2><div class="small">入門テーマ・書巻一覧・聖句の要約検索</div></div></div><div class="padded"><h2>テーマ別ガイド</h2><div class="cards" id="guideCards"></div><hr class="divider"><h2>聖句のテーマを探す</h2><input id="studySearch" placeholder="例:愛、平和、希望、マタイ、ローマ" aria-label="聖句検索"><div id="studyResults" aria-live="polite"></div><hr class="divider"><h2>聖書66書巻</h2><p class="small">プロテスタントの一般的な書巻区分です。カトリック・正教会では収録書巻が異なります。書巻を選ぶと概要を表示します。</p><div class="tabs"><button id="oldButton" class="active" data-testament="old">旧約聖書(39)</button><button id="newButton" data-testament="new">新約聖書(27)</button></div><div id="bookGrid" class="books"></div><div id="bookDetail" class="reading" aria-live="polite">書巻を選択してください。</div></div></section>
<section class="panel view" id="view-prayer"><div class="view-header"><div><h2>祈りのノート</h2><div class="small">テーマ別の祈り例と、自分の記録</div></div></div><div class="padded column"><label>祈りのテーマ<select id="prayerTopic"><option value="gratitude">感謝</option><option value="peace">心の平安</option><option value="strength">疲れと回復</option><option value="wisdom">知恵・仕事・学び</option><option value="others">家族や大切な人</option><option value="forgiveness">赦し</option></select></label><button id="prayerGenerate" class="primary">祈りの例文を作る</button><label>祈りの文(編集できます)<textarea id="prayerText" rows="7" maxlength="3000" placeholder="自分のことばで書いてください"></textarea></label><div class="row"><button id="prayerSave" class="primary">ノートに保存</button><button id="prayerCopy" class="secondary">コピー</button></div><h2>祈りの記録</h2><div id="prayerHistory"></div><p class="small">自分の言葉で書いた祈りはこの端末のブラウザにのみ保存します。共有端末では注意してください。</p></div></section>
<section class="panel view" id="view-quiz"><div class="view-header"><div><h2>聖書クイズ</h2><div class="small">10問の入門クイズ・復習つき</div></div><button id="quizRestart" class="secondary">はじめから</button></div><div class="padded"><div class="row" style="justify-content:space-between"><b id="quizCount">第1問 / 10問</b><span id="quizScore" class="small">正解 0問</span></div><div class="progress"><i id="quizProgress" style="width:0"></i></div><h2 id="quizQuestion"></h2><div id="quizOptions"></div><div id="quizFeedback" class="reading hide" role="status"></div><button id="quizNext" class="primary hide">次の問題 →</button></div></section>
<section class="panel view" id="view-saved"><div class="view-header"><div><h2>保存したことば</h2><div class="small">気になった聖書のテーマを保存</div></div></div><div class="padded"><div id="savedItems"></div></div></section>
<section class="panel view" id="view-settings"><div class="view-header"><div><h2>設定・データ管理</h2><div class="small">端末内だけで完結します</div></div></div><div class="padded column"><div class="card"><h3>データのバックアップ</h3><p>会話履歴・祈りのノート・保存項目・設定をJSONファイルに保存できます。</p><div class="row"><button id="exportButton2" class="primary">JSONを書き出す</button><button id="importButton" class="secondary">JSONを読み込む</button><input type="file" id="importFile" accept=".json,application/json" class="hide"></div></div><div class="card"><h3>データの削除</h3><p>このアプリの保存内容をすべて削除します。元に戻せません。</p><button id="resetAll" class="secondary danger">すべて消去</button></div><div class="card"><h3>このアプリについて</h3><p>HTML・CSS・JavaScriptだけで動作する、学習・対話向けのキーワードBOTです。生成AIとの接続、ネット通信、会員登録機能はありません。返答内容は事前に設定した説明文です。保存データはブラウザ内にあり、ブラウザのデータ削除によって失われます。</p><p>聖書本文の逐語引用ではなく、趣旨を簡潔にまとめています。原文の確認や教派別の教義については、実際の聖書や信頼できる教会・専門資料を参照してください。</p></div></div></section>
</main>
<aside class="panel right"><h2>今日の聖書テーマ</h2><div class="reading"><b id="dailyName"></b><p id="dailyText" style="margin-top:8px"></p><span id="dailyRef" class="tag"></span><div class="row" style="margin-top:10px"><button id="saveDaily" class="secondary">☆ 保存する</button><button id="askDaily" class="secondary">話してみる</button></div></div><h2 style="margin-top:23px">学習の記録</h2><div class="stat"><div class="tile"><b id="statMessages">0</b><small>質問数</small></div><div class="tile"><b id="statSaved">0</b><small>保存項目</small></div><div class="tile"><b id="statPrayer">0</b><small>祈りの記録</small></div><div class="tile"><b id="statQuiz">0</b><small>クイズ最高点</small></div></div><p class="notice">つらい気持ちへの宗教的な励ましは、医療や緊急支援の代わりにはなりません。差し迫った危険がある場合は119などに連絡してください。</p></aside>
</div><footer class="footer">ひかりのことば PLUS · Offline Bible Study Companion · 聖句は要約で紹介しています</footer></div><div id="toast" role="status" aria-live="polite"></div>
<script>
(()=>{'use strict';
const KEY='hikari_plus_v2';const LEGACY='hikari_christian_bot_chat_v1';const $=id=>document.getElementById(id);const clamp=(n,a,b)=>Math.max(a,Math.min(b,n));
const library=[
{id:'love',title:'愛',ref:'コリントの信徒への手紙一 13章4〜7節',text:'愛は忍耐や親切さとして表れ、相手を大切にする態度につながると教えられます。',tags:'愛 思いやり 親切 優しさ',related:'ヨハネによる福音書 13章34節'},
{id:'rest',title:'休息',ref:'マタイによる福音書 11章28〜30節',text:'イエスは重荷を負う人々に向けて休息へ招く言葉を語りました。',tags:'疲れ 眠気 仕事 休息',related:'詩編 23編'},
{id:'hope',title:'希望',ref:'ローマの信徒への手紙 5章3〜5節',text:'苦難の中でも忍耐や経験を通して希望を見いだす、という考えが示されています。',tags:'希望 絶望 未来 勇気',related:'ローマの信徒への手紙 15章13節'},
{id:'anxiety',title:'不安と祈り',ref:'フィリピの信徒への手紙 4章6〜7節',text:'思い煩いを神に伝え、感謝をもって祈ることが勧められています。',tags:'不安 心配 怖い 祈り',related:'マタイによる福音書 6章25〜34節'},
{id:'peace',title:'平和',ref:'マタイによる福音書 5章9節',text:'平和をつくる人々への祝福が語られます。',tags:'平和 戦争 平安',related:'ローマの信徒への手紙 12章18節'},
{id:'neighbor',title:'隣人',ref:'マルコによる福音書 12章29〜31節',text:'神を愛することと、隣人を自分のように愛することが大切な教えとして示されています。',tags:'隣人 愛 関係 家族',related:'ルカによる福音書 10章25〜37節'},
{id:'forgive',title:'赦し',ref:'マタイによる福音書 18章21〜22節',text:'赦しの大切さを繰り返し教える場面があります。ただし不当な扱いを放置することとは異なります。',tags:'許し 赦し 罪 謝罪',related:'エフェソの信徒への手紙 4章32節'},
{id:'gratitude',title:'感謝',ref:'テサロニケの信徒への手紙一 5章16〜18節',text:'喜びと祈り、感謝を大切にする姿勢が勧められています。',tags:'感謝 ありがとう 喜び',related:'詩編 100編'},
{id:'wisdom',title:'知恵',ref:'ヤコブの手紙 1章5節',text:'知恵を必要とする人が神に願い求めることについて語られています。',tags:'知恵 学び 勉強 仕事',related:'箴言 3章5〜6節'},
{id:'mercy',title:'あわれみ',ref:'ルカによる福音書 10章25〜37節',text:'善いサマリア人のたとえでは、境界を越えて困っている人を助ける姿が描かれます。',tags:'慈悲 助ける 困っている人',related:'マタイによる福音書 25章35〜40節'},
{id:'creation',title:'創造',ref:'創世記 1章',text:'聖書の冒頭は神による世界の創造を語ります。受け止め方は教派や信者によって異なります。',tags:'創世記 世界 創造 宇宙',related:'詩編 8編'},
{id:'faith',title:'信仰',ref:'ヘブライ人への手紙 11章1節',text:'信仰について、希望するものや目に見えないものとの関わりを説明しています。',tags:'信仰 神 信じる',related:'マルコによる福音書 9章24節'},
{id:'compassion',title:'悲しみの中で',ref:'マタイによる福音書 5章4節',text:'悲しむ人々への慰めが、山上の説教の一部として語られます。',tags:'悲しい 孤独 喪失 涙',related:'詩編 34編18節'},
{id:'truth',title:'真理',ref:'ヨハネによる福音書 8章31〜32節',text:'真理を知ることと自由についての教えが語られます。',tags:'真理 自由 生き方',related:'ヨハネによる福音書 14章6節'},
{id:'justice',title:'正義',ref:'ミカ書 6章8節',text:'正義を行い、あわれみを愛し、へりくだって歩むことが勧められます。',tags:'正義 公平 悪 善悪',related:'イザヤ書 1章17節'},
{id:'time',title:'時',ref:'コヘレトの言葉 3章1〜8節',text:'人生のさまざまな出来事には、それぞれ時があるという詩的な表現があります。',tags:'時間 人生 焦り',related:'詩編 90編12節'}
];
const guides=[{name:'キリスト教の中心',desc:'イエス・キリスト、福音書、隣人愛を知る',refs:['マルコによる福音書 1章','ヨハネによる福音書 3章16節']},{name:'祈りの基本',desc:'感謝や願いを言葉にし、主の祈りに触れる',refs:['マタイによる福音書 6章5〜13節']},{name:'旧約から新約へ',desc:'創造、預言者、福音書、初代教会の流れ',refs:['創世記 1章','ルカによる福音書 1章','使徒言行録 2章']},{name:'愛と行動',desc:'愛・親切・隣人への配慮を学ぶ',refs:['コリントの信徒への手紙一 13章','ルカによる福音書 10章25〜37節']},{name:'苦難と希望',desc:'苦しみを単純化せず、希望の言葉を探す',refs:['ヨブ記 1章','ローマの信徒への手紙 5章3〜5節']},{name:'平和と正義',desc:'平和づくり、公平さ、弱い立場の人への配慮',refs:['マタイによる福音書 5章9節','ミカ書 6章8節']}];
const oldBooks='創世記,出エジプト記,レビ記,民数記,申命記,ヨシュア記,士師記,ルツ記,サムエル記上,サムエル記下,列王記上,列王記下,歴代誌上,歴代誌下,エズラ記,ネヘミヤ記,エステル記,ヨブ記,詩編,箴言,コヘレトの言葉,雅歌,イザヤ書,エレミヤ書,哀歌,エゼキエル書,ダニエル書,ホセア書,ヨエル書,アモス書,オバデヤ書,ヨナ書,ミカ書,ナホム書,ハバクク書,ゼファニヤ書,ハガイ書,ゼカリヤ書,マラキ書'.split(',');
const newBooks='マタイによる福音書,マルコによる福音書,ルカによる福音書,ヨハネによる福音書,使徒言行録,ローマの信徒への手紙,コリントの信徒への手紙一,コリントの信徒への手紙二,ガラテヤの信徒への手紙,エフェソの信徒への手紙,フィリピの信徒への手紙,コロサイの信徒への手紙,テサロニケの信徒への手紙一,テサロニケの信徒への手紙二,テモテへの手紙一,テモテへの手紙二,テトスへの手紙,フィレモンへの手紙,ヘブライ人への手紙,ヤコブの手紙,ペトロの手紙一,ペトロの手紙二,ヨハネの手紙一,ヨハネの手紙二,ヨハネの手紙三,ユダの手紙,ヨハネの黙示録'.split(',');
const bookNotes={'創世記':'天地創造、族長たちの物語から始まる書巻。','出エジプト記':'モーセと出エジプト、契約の物語。','詩編':'賛美、祈り、嘆き、感謝などの詩歌。','箴言':'日常の判断と知恵を扱う格言集。','ヨブ記':'正しい人の苦しみと神への問いを扱う文学作品。','イザヤ書':'預言、裁き、慰めと希望を語る書巻。','マタイによる福音書':'イエスの生涯と教えを伝える四福音書の一つ。','マルコによる福音書':'イエスの活動を簡潔に描く福音書。','ルカによる福音書':'イエスの生涯を伝え、弱い立場への配慮も描く福音書。','ヨハネによる福音書':'独特の語り口でイエスの存在と教えを伝える福音書。','使徒言行録':'初代教会と宣教の広がりを伝える書巻。','ローマの信徒への手紙':'信仰、恵み、共同体の生き方を論じる書簡。','ヨハネの黙示録':'象徴表現で苦難と終末の希望を描く黙示文学。'};
const prayers={gratitude:'神さま、今日という日を与えてくださりありがとうございます。小さな恵みに目を向け、周りの人への感謝を忘れずに過ごせますように。アーメン。',peace:'神さま、心が落ち着かないとき、深呼吸して目の前の一歩を見つめられるよう助けてください。安心して休める時間と、必要な支えを与えてください。アーメン。',strength:'神さま、疲れている私に休息と回復の時を与えてください。無理を重ねず、身体と心を大切にする知恵をください。アーメン。',wisdom:'神さま、今日の学びや仕事に必要な知恵を与えてください。焦らず、一つずつ丁寧に進められますように。アーメン。',others:'神さま、家族や大切な人たちを覚えます。互いを思いやり、必要な助けを分かち合えますように。アーメン。',forgiveness:'神さま、自分の過ちを見つめ直す勇気と、正しい行いへ進む知恵をください。傷ついた人の尊厳と安全も守られますように。アーメン。'};
const quiz=[
{q:'キリスト教の中心となる人物は?',a:['モーセ','イエス・キリスト','ダビデ','パウロ'],right:1,ex:'キリスト教ではイエスを救い主として信じます。'},
{q:'聖書の冒頭にある書巻は?',a:['創世記','詩編','マタイによる福音書','出エジプト記'],right:0,ex:'創世記は天地創造などから始まります。'},
{q:'イエスの生涯を伝える「福音書」は何書ありますか?',a:['2','3','4','5'],right:2,ex:'マタイ、マルコ、ルカ、ヨハネの4つです。'},
{q:'「善いサマリア人」のたとえが登場するのは?',a:['ルカによる福音書','創世記','黙示録','詩編'],right:0,ex:'ルカ10章に登場し、隣人愛を考える話です。'},
{q:'モーセがエジプトから民を導く物語は主にどの書巻?',a:['箴言','出エジプト記','ヨブ記','使徒言行録'],right:1,ex:'出エジプト記に書かれています。'},
{q:'詩編に多い表現はどれ?',a:['賛美と祈り','法律条文だけ','旅行案内','建築手順だけ'],right:0,ex:'詩編には賛美、嘆き、感謝などが含まれます。'},
{q:'「愛は忍耐強い」などの教えがある書簡は?',a:['ヤコブの手紙','コリントの信徒への手紙一','ローマの信徒への手紙','ユダの手紙'],right:1,ex:'コリント一13章は愛についてよく読まれます。'},
{q:'初代教会の歩みを描く書巻は?',a:['使徒言行録','レビ記','雅歌','コヘレトの言葉'],right:0,ex:'使徒言行録は初代教会の活動を伝えます。'},
{q:'旧約聖書に含まれるのは?',a:['マルコによる福音書','ヨブ記','ヨハネの手紙一','ローマの信徒への手紙'],right:1,ex:'ヨブ記は旧約聖書の知恵文学です。'},
{q:'山上の説教を収めている福音書は?',a:['マタイによる福音書','使徒言行録','ダニエル書','ガラテヤの信徒への手紙'],right:0,ex:'マタイ5〜7章で知られます。'}
];
const defaults=()=>({chat:[],saved:[],prayers:[],best:0,dark:false});let state=defaults();
function safeLoad(){try{const x=JSON.parse(localStorage.getItem(KEY)||'null');if(x&&typeof x==='object'){state.chat=Array.isArray(x.chat)?x.chat.filter(m=>m&&['user','bot'].includes(m.role)&&typeof m.text==='string').slice(-120):[];state.saved=Array.isArray(x.saved)?x.saved.filter(v=>typeof v==='string').slice(0,100):[];state.prayers=Array.isArray(x.prayers)?x.prayers.filter(p=>p&&typeof p.text==='string').slice(-100):[];state.best=clamp(Number(x.best)||0,0,10);state.dark=x.dark===true;return;}}catch(e){}try{const prev=JSON.parse(localStorage.getItem(LEGACY)||'[]');if(Array.isArray(prev))state.chat=prev.filter(m=>m&&['user','bot'].includes(m.role)&&typeof m.text==='string').slice(-120).map(m=>({role:m.role,text:m.text,ref:m.ref||'',at:Date.now()}));}catch(e){}}
let warned=false;function persist(){try{localStorage.setItem(KEY,JSON.stringify(state));}catch(e){if(!warned){toast('保存容量が不足しています。バックアップを取ってください。');warned=true;}}}
let toastTimer;function toast(s){$('toast').textContent=s;$('toast').style.display='block';clearTimeout(toastTimer);toastTimer=setTimeout(()=>$('toast').style.display='none',3500)}
function el(tag,cls,text){const n=document.createElement(tag);if(cls)n.className=cls;if(text!==undefined)n.textContent=text;return n;}
function jump(view){document.querySelectorAll('.view').forEach(n=>n.classList.toggle('active',n.id==='view-'+view));document.querySelectorAll('[data-view]').forEach(n=>n.classList.toggle('active',n.dataset.view===view));if(view==='saved')renderSaved();if(view==='prayer')renderPrayers();if(view==='study')renderSearch();window.scrollTo({top:0,behavior:'smooth'});}
function stat(){ $('statMessages').textContent=state.chat.filter(x=>x.role==='user').length;$('statSaved').textContent=state.saved.length;$('statPrayer').textContent=state.prayers.length;$('statQuiz').textContent=state.best;}
function addChat(role,text,ref=''){state.chat.push({role,text,ref,at:Date.now()});state.chat=state.chat.slice(-120);persist();renderChat();stat();}
function renderChat(){const root=$('chatLog');root.replaceChildren();for(const m of state.chat){const row=el('div','chat-row '+m.role);const bubble=el('div','bubble',m.text);if(m.ref){bubble.appendChild(el('small','',`参考:${m.ref}`));}row.appendChild(bubble);row.appendChild(el('span','stamp',m.role==='bot'?'ひかりのことば':'あなた'));root.appendChild(row);}root.scrollTop=root.scrollHeight;}
const risky=/(死にたい|自殺|自傷|命を絶|消えてしまいたい|殺したい|人を傷つけたい)/;
const patterns=[
{p:/祈り|祈る|祈祷|お祈り/,id:'anxiety',answer:'祈りは神に心を向け、感謝や願い、悩みを言葉にする営みです。立派な言葉でなくても構いません。祈りの例文を作るには「祈りのノート」を開いてください。',ref:'マタイによる福音書 6章5〜13節'},
{p:/イエス|キリスト|救世主|復活/,id:'neighbor',answer:'イエス・キリストはキリスト教の中心となる人物です。四福音書はその生涯、教え、十字架と復活について伝えています。歴史上の人物としての研究と、信仰上の受け止め方は区別して考えられます。',ref:'マルコによる福音書 1章/ヨハネによる福音書 20章'},
{p:/三位一体|聖霊|父なる神/,id:'faith',answer:'多くのキリスト教教派では、父・子・聖霊の三位一体を重要な教理として理解します。詳しい説明や表現には教派間の違いがあります。',ref:'マタイによる福音書 28章19節'},
{p:/神とは|神様|神さま|信仰|教会|宗教/,id:'faith',answer:'キリスト教は神の愛や恵み、イエス・キリストへの信仰を中心としています。疑問を持ちながら学ぶこともできます。教派によって解釈や礼拝の形は異なります。',ref:'マルコによる福音書 12章29〜31節'},
{p:/苦しみ|苦難|なぜ悪|理不尽|不幸/,id:'compassion',answer:'「なぜ苦しみがあるのか」は聖書でも簡単な答えが出ない大きな問いです。ヨブ記は正しい人の苦しみを扱い、福音書には悲しむ人への慰めの言葉があります。苦しみを本人の信仰不足のせいにする必要はありません。',ref:'ヨブ記/マタイによる福音書 5章4節'},
{p:/不安|怖い|恐怖|心配|緊張|眠れ/,id:'anxiety',answer:'不安なとき、気持ちを無理に押さえ込む必要はありません。フィリピ書には心配を祈りのうちに伝える教えがあります。睡眠や体調の問題が続く場合は、休息や医療的な支援も大切です。',ref:'フィリピの信徒への手紙 4章6〜7節'},
{p:/疲れ|仕事|しんどい|きつい|休み|休息/,id:'rest',answer:'イエスは重荷を負う人に休息を招く言葉を語りました。休むことは怠けることと同じではありません。今日は食事、水分、睡眠など身体の必要も大切にしてください。',ref:'マタイによる福音書 11章28〜30節'},
{p:/赦|許し|罪|後悔|謝罪/,id:'forgive',answer:'赦しと悔い改めはキリスト教の大きなテーマです。過ちに向き合うことは大切ですが、赦しは被害の否定でも、危険な状況に戻る義務でもありません。',ref:'マタイによる福音書 18章21〜22節'},
{p:/愛|恋|思いやり|やさしさ|優しさ/,id:'love',answer:'新約聖書では、愛は相手に対する忍耐、親切、尊重など、日々の行いに表れるものとして語られます。自分を大切にする視点も忘れないでください。',ref:'コリントの信徒への手紙一 13章4〜7節'},
{p:/希望|明日|絶望|未来|勇気/,id:'hope',answer:'ローマ書は苦難の中で育まれる希望を語ります。希望とは常に明るくいることではなく、助けを求めたり小さな一歩を選んだりすることも含むと思います。',ref:'ローマの信徒への手紙 5章3〜5節'},
{p:/平和|戦争|争い|喧嘩/,id:'peace',answer:'山上の説教には平和をつくる人への祝福があります。平和は争いを見ないふりすることではなく、尊厳や公平を守る行いとも関わります。',ref:'マタイによる福音書 5章9節'},
{p:/家族|友達|隣人|人間関係|孤独/,id:'neighbor',answer:'イエスは隣人を大切にすることを強調しました。善いサマリア人の話は、相手の立場にかかわらず手を差し伸べることを考えさせます。',ref:'ルカによる福音書 10章25〜37節'},
{p:/感謝|ありがとう|喜び/,id:'gratitude',answer:'聖書は祈りや感謝を大切にするよう勧めます。つらい日まで楽しいふりをする必要はありません。今日ありがたかったことを一つ思い出すところからでもよいでしょう。',ref:'テサロニケの信徒への手紙一 5章16〜18節'},
{p:/創造|宇宙|世界|地球|創世記/,id:'creation',answer:'創世記の冒頭は世界の創造を語ります。現代の科学が扱う「どのように」と信仰が問う「なぜ」をどう関係づけるかは、キリスト教徒の中でも複数の立場があります。',ref:'創世記 1〜2章'},
{p:/勉強|学び|知恵|判断|選択/,id:'wisdom',answer:'知恵を求めることは、聖書の重要なテーマの一つです。考えたり学んだり、必要なときに周囲に相談したりする姿勢も大切でしょう。',ref:'ヤコブの手紙 1章5節'},
{p:/今日|聖書のことば|一節|聖句/,id:'daily',answer:'今日のテーマを案内します。',ref:''}
];
function respond(text){if(risky.test(text))return {text:'とても切迫した内容ですね。もし今、自分や誰かを傷つけそうなら、危険な物から離れ、近くにいる人や医療者へ今すぐ伝えてください。日本で緊急の危険がある場合は119(救急)や110(警察)を利用できます。宗教的な話だけで抱える必要はありません。',ref:''};
if(/^(こんにちは|こんばんは|おはよう|やあ)[!!。\s]*$/.test(text))return{text:'こんにちは。今日は何について考えてみましょうか。祈り、イエス、希望、疲れ、聖書の疑問など、気になるテーマをどうぞ。',ref:''};
const p=patterns.find(x=>x.p.test(text));if(p){if(p.id==='daily'){const item=dailyItem();return{text:`今日のテーマは「${item.title}」です。\n${item.text}`,ref:item.ref};}return{text:p.answer,ref:p.ref};}
const keys=library.filter(item=>text.includes(item.title)||item.tags.split(' ').some(t=>t.length>=2&&text.includes(t))).slice(0,2);if(keys.length){return {text:keys.map(x=>`${x.title}:${x.text}`).join('\n\n'),ref:keys.map(x=>x.ref).join('/')};}
return{text:'お話ししてくださってありがとうございます。私は事前に用意された聖書のテーマから案内するBOTです。質問の意味を十分には理解できないことがあります。「愛」「祈り」「不安」「イエス」「赦し」「希望」など、話題を短い言葉で尋ねてみてください。',ref:''};}
function send(raw){const text=String(raw||'').trim().slice(0,800);if(!text)return;addChat('user',text);const r=respond(text);addChat('bot',r.text,r.ref);$('chatInput').value='';updateCount();}
function updateCount(){$('charCount').textContent=$('chatInput').value.length+' / 800';}
function dailyItem(){const d=new Date();const stamp=Date.UTC(d.getFullYear(),d.getMonth(),d.getDate());return library[Math.floor(stamp/86400000)%library.length];}
function renderDaily(){const d=dailyItem();$('dailyName').textContent=d.title;$('dailyText').textContent=d.text;$('dailyRef').textContent=d.ref;$('saveDaily').textContent=state.saved.includes(d.id)?'★ 保存済み':'☆ 保存する';}
function toggleSaved(id){const exists=state.saved.indexOf(id);if(exists>=0)state.saved.splice(exists,1);else state.saved.push(id);persist();stat();renderDaily();renderSaved();renderSearch();toast(exists>=0?'保存を解除しました':'ことばを保存しました');}
function renderSaved(){const root=$('savedItems');root.replaceChildren();const found=state.saved.map(id=>library.find(x=>x.id===id)).filter(Boolean);if(!found.length){root.appendChild(el('p','muted','保存したことばはまだありません。「今日の聖書テーマ」や検索結果から追加できます。'));return;}for(const x of found)root.appendChild(libraryCard(x));}
function libraryCard(x){const box=el('div','reading');box.append(el('h3','',x.title),el('p','',x.text),el('span','tag',x.ref));const row=el('div','row');row.style.marginTop='10px';const button=el('button','secondary',state.saved.includes(x.id)?'★ 保存解除':'☆ 保存');button.onclick=()=>toggleSaved(x.id);const ask=el('button','secondary','BOTに質問');ask.onclick=()=>{jump('chat');send(x.title+'について教えて');};row.append(button,ask);box.appendChild(row);return box;}
function renderSearch(){const root=$('studyResults');root.replaceChildren();const q=$('studySearch').value.trim().toLowerCase();const result=library.filter(x=>!q||(x.title+' '+x.ref+' '+x.tags+' '+x.text).toLowerCase().includes(q));root.appendChild(el('p','small',`${result.length}件のテーマ`));if(!result.length)root.appendChild(el('p','muted','一致する項目がありません。別の言葉で検索してください。'));result.forEach(x=>root.appendChild(libraryCard(x)));}
function renderGuides(){const root=$('guideCards');for(const x of guides){const div=el('div','card');div.append(el('h3','',x.name),el('p','',x.desc),el('span','tag',x.refs.join('・')));root.appendChild(div);}}
let testament='old';function renderBooks(){const books=testament==='old'?oldBooks:newBooks;const root=$('bookGrid');root.replaceChildren();books.forEach((name,i)=>{const b=el('button','book',`${i+1}. ${name}`);b.onclick=()=>{$('bookDetail').replaceChildren(el('h3','',name),el('p','',bookNotes[name]||'聖書を構成する書巻の一つです。本文はお手元の聖書でご確認ください。'),el('span','tag',testament==='old'?'旧約聖書':'新約聖書'));};root.appendChild(b);});$('oldButton').classList.toggle('active',testament==='old');$('newButton').classList.toggle('active',testament==='new');}
function renderPrayers(){const root=$('prayerHistory');root.replaceChildren();if(!state.prayers.length){root.appendChild(el('p','muted','まだ記録がありません。祈りの文を書いて保存できます。'));return;}[...state.prayers].reverse().forEach(x=>{const box=el('div','reading');box.append(el('div','small',new Date(x.at||Date.now()).toLocaleString('ja-JP')),el('p','',x.text));const b=el('button','secondary','削除');b.onclick=()=>{if(confirm('この祈りの記録を削除しますか?')){state.prayers=state.prayers.filter(p=>p.id!==x.id);persist();renderPrayers();stat();}};box.appendChild(b);root.appendChild(box);});}
function generatePrayer(){$('prayerText').value=prayers[$('prayerTopic').value]||'';}
let qi=0,score=0,answered=false;function renderQuiz(){const root=$('quizOptions');root.replaceChildren();$('quizFeedback').classList.add('hide');$('quizNext').classList.add('hide');answered=false;if(qi>=quiz.length){$('quizCount').textContent='終了';$('quizQuestion').textContent=`10問中 ${score}問 正解しました`;if(score>state.best){state.best=score;persist();stat();}$('quizScore').textContent='正解 '+score+'問';$('quizProgress').style.width='100%';root.appendChild(el('p','muted','もう一度挑戦するときは「はじめから」を押してください。'));return;}const q=quiz[qi];$('quizCount').textContent=`第${qi+1}問 / ${quiz.length}問`;$('quizScore').textContent='正解 '+score+'問';$('quizProgress').style.width=`${qi/quiz.length*100}%`;$('quizQuestion').textContent=q.q;q.a.forEach((option,index)=>{const b=el('button','quiz-option',`${index+1}. ${option}`);b.onclick=()=>{if(answered)return;answered=true;const ok=index===q.right;if(ok)score++;[...root.children].forEach((node,i)=>{node.disabled=true;if(i===q.right)node.classList.add('correct');else if(i===index)node.classList.add('wrong');});$('quizScore').textContent='正解 '+score+'問';$('quizFeedback').textContent=(ok?'正解です。':'今回は違いました。')+' '+q.ex;$('quizFeedback').classList.remove('hide');$('quizNext').classList.remove('hide');$('quizNext').textContent=qi===quiz.length-1?'結果を見る →':'次の問題 →';};root.appendChild(b);});}
function download(){const blob=new Blob([JSON.stringify({format:'hikari-plus-v2',exportedAt:new Date().toISOString(),data:state},null,2)],{type:'application/json'});const url=URL.createObjectURL(blob);const a=el('a');a.href=url;a.download='hikari_backup_'+new Date().toISOString().slice(0,10)+'.json';document.body.appendChild(a);a.click();a.remove();setTimeout(()=>URL.revokeObjectURL(url),1000);toast('バックアップをダウンロードしました');}
function importJson(file){if(!file)return;if(file.size>2*1024*1024){toast('2MB以下のバックアップを選択してください');return;}file.text().then(str=>{const parsed=JSON.parse(str);if(parsed.format!=='hikari-plus-v2'||!parsed.data||typeof parsed.data!=='object')throw Error('形式が違います');const data=parsed.data;if(!Array.isArray(data.chat)||!Array.isArray(data.saved)||!Array.isArray(data.prayers))throw Error('データ形式が不正です');if(!confirm('現在のデータを読み込んだバックアップで置き換えますか?'))return;state=defaults();state.chat=data.chat.filter(x=>x&&['user','bot'].includes(x.role)&&typeof x.text==='string').slice(-120).map(x=>({role:x.role,text:x.text.slice(0,3000),ref:String(x.ref||'').slice(0,200),at:Number(x.at)||Date.now()}));state.saved=data.saved.filter(x=>typeof x==='string'&&library.some(y=>y.id===x)).slice(0,100);state.prayers=data.prayers.filter(x=>x&&typeof x.text==='string').slice(-100).map(x=>({id:String(x.id||''),text:x.text.slice(0,3000),at:Number(x.at)||Date.now()}));state.best=clamp(Number(data.best)||0,0,10);state.dark=data.dark===true;persist();refresh();toast('読み込みました');}).catch(e=>toast('読み込み失敗:'+e.message));}
function applyTheme(){document.body.classList.toggle('dark',state.dark);$('themeButton').textContent=state.dark?'☀ 明るくする':'☾ 暗くする';}
function refresh(){applyTheme();renderChat();renderDaily();renderPrayers();renderSaved();renderSearch();stat();}
function init(){safeLoad();renderGuides();renderBooks();if(!state.chat.length)addChat('bot','こんにちは。「ひかりのことば PLUS」です。聖書や祈りについて、一緒に考えていきましょう。右側の「今日の聖書テーマ」やメニューも使えます。');
refresh();renderQuiz();document.querySelectorAll('[data-view]').forEach(b=>b.onclick=()=>jump(b.dataset.view));document.querySelectorAll('[data-ask]').forEach(b=>b.onclick=()=>{jump('chat');send(b.dataset.ask)});
$('chatForm').onsubmit=e=>{e.preventDefault();send($('chatInput').value);};$('chatInput').oninput=updateCount;$('chatInput').onkeydown=e=>{if(e.key==='Enter'&&e.ctrlKey){e.preventDefault();send(e.target.value);}};
$('clearChat').onclick=()=>{if(!confirm('会話履歴を消去しますか?'))return;state.chat=[];addChat('bot','履歴を消去しました。新しくお話ししましょう。');};
$('saveDaily').onclick=()=>toggleSaved(dailyItem().id);$('askDaily').onclick=()=>{jump('chat');send('今日のことば');};$('studySearch').oninput=renderSearch;
$('oldButton').onclick=()=>{testament='old';renderBooks();};$('newButton').onclick=()=>{testament='new';renderBooks();};
$('prayerGenerate').onclick=generatePrayer;$('prayerSave').onclick=()=>{const text=$('prayerText').value.trim();if(!text)return toast('祈りの文を入力してください');state.prayers.push({id:String(Date.now())+'_'+Math.random().toString(36).slice(2,7),text:text.slice(0,3000),at:Date.now()});state.prayers=state.prayers.slice(-100);persist();renderPrayers();stat();toast('祈りの文を保存しました');};$('prayerCopy').onclick=async()=>{try{await navigator.clipboard.writeText($('prayerText').value);toast('コピーしました');}catch(e){$('prayerText').select();toast('文章を選択しました。手動でコピーしてください');}};
$('quizRestart').onclick=()=>{qi=0;score=0;renderQuiz();};$('quizNext').onclick=()=>{qi++;renderQuiz();};
$('themeButton').onclick=()=>{state.dark=!state.dark;persist();applyTheme();};$('exportButton').onclick=download;$('exportButton2').onclick=download;$('importButton').onclick=()=>$('importFile').click();$('importFile').onchange=e=>{importJson(e.target.files[0]);e.target.value='';};
$('resetAll').onclick=()=>{if(!confirm('会話、祈り、保存項目を含むすべてのアプリデータを削除しますか?'))return;localStorage.removeItem(KEY);state=defaults();state.chat=[{role:'bot',text:'初期化しました。聖書について、気軽に話しかけてください。',ref:'',at:Date.now()}];qi=0;score=0;renderQuiz();refresh();toast('初期化しました');};}
init();
})();
</script>
</body></html>
タグ: 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: sans-serif;
background: #f9f9f9;
padding: 2rem;
margin: 0;
display: flex;
justify-content: center;
}
.container {
max-width: 600px;
width: 100%;
background: white;
padding: 2rem;
border-radius: 12px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
h1 {
color: #e60033;
text-align: center;
margin-bottom: 1.5rem;
}
.form {
display: flex;
gap: 0.5rem;
margin-bottom: 1rem;
}
input {
flex: 1;
padding: 0.8rem;
border: 1px solid #ccc;
border-radius: 8px;
font-size: 1rem;
}
button {
padding: 0.8rem 1rem;
background-color: #e60033;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
}
.result {
margin-top: 1rem;
}
.item {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #eee;
padding: 0.5rem 0;
}
.available {
color: green;
font-weight: bold;
}
.unavailable {
color: red;
font-weight: bold;
}
.buy-btn {
background-color: #0070f3;
color: white;
padding: 0.3rem 0.7rem;
border-radius: 6px;
text-decoration: none;
font-size: 0.9rem;
}
</style>
</head>
<body>
<div class="container">
<h1>ドメイン検索</h1>
<div class="form">
<input type="text" id="domainInput" placeholder="例: mydomain" />
<button onclick="search()">検索</button>
</div>
<div class="result" id="resultArea"></div>
</div>
<script>
const takenDomains = ["example.com", "mydomain.net", "taken.jp"];
const tlds = [".com", ".net", ".jp"];
function search() {
const name = document.getElementById("domainInput").value.trim().toLowerCase();
const area = document.getElementById("resultArea");
area.innerHTML = "";
if (!name) {
area.innerHTML = "<p>⚠ ドメイン名を入力してください。</p>";
return;
}
tlds.forEach(tld => {
const domain = name + tld;
const available = !takenDomains.includes(domain);
const item = document.createElement("div");
item.className = "item";
item.innerHTML = `
<span>${domain}</span>
${available
? `<span class="available">取得可能</span>
<a href="https://buy.stripe.com/test_checkout_link" class="buy-btn" target="_blank">購入する</a>`
: `<span class="unavailable">登録済み</span>`}
`;
area.appendChild(item);
});
}
</script>
</body>
</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;
display: flex;
flex-direction: column;
align-items: center;
background-color: var(--background-color, #f4f6f9);
}
.container {
max-width: 800px;
width: 90%;
padding: 20px;
text-align: center;
background-color: var(--chat-bg-color, #ffffff);
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
margin-top: 20px;
}
.title {
font-size: 24px;
margin-bottom: 15px;
}
.theme-toggle-btn {
position: absolute;
right: 15px;
top: 15px;
padding: 5px 10px;
cursor: pointer;
border: none;
background-color: #0078d7;
color: #ffffff;
border-radius: 5px;
}
.dropdown, .input, .button {
width: 80%;
margin: 5px;
padding: 10px;
font-size: 16px;
}
.idea-display {
margin-top: 20px;
font-size: 18px;
padding: 15px;
color: #333;
background-color: #f4f4f4;
border-radius: 10px;
text-align: left;
}
.related-ideas {
font-size: 14px;
color: #555;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1 class="title">創作アイディア生成サイト</h1>
<button class="theme-toggle-btn" onclick="toggleTheme()">🌙 ダークモード</button>
<label for="categorySelect">カテゴリを選択</label>
<select id="categorySelect" class="dropdown">
<option value="fantasy">ファンタジー</option>
<option value="sci-fi">SF</option>
<option value="mystery">ミステリー</option>
<option value="horror">ホラー</option>
</select>
<BR>
<label for="elementSelect">詳細要素を選択</label>
<select id="elementSelect" class="dropdown">
<option value="character">キャラクター</option>
<option value="plot">プロット</option>
<option value="setting">舞台設定</option>
<option value="theme">テーマ</option>
</select>
<button class="button" onclick="generateIdea()">アイディア生成</button>
<div class="idea-display" id="ideaDisplay">ここに生成されたアイディアが表示されます。</div>
<div class="related-ideas" id="relatedIdeas"></div>
</div>
<script>
const ideas = {
"fantasy": {
"character": ["勇敢な騎士", "神秘的な魔法使い", "不思議な生物"],
"plot": ["王国を救うための冒険", "魔法の秘宝を巡る争い", "禁断の魔法を探求する旅"],
"setting": ["ドラゴンが住む山", "不思議な森", "海底の王国"],
"theme": ["友情と勇気", "運命と戦い", "魔法と現実の対立"]
},
"sci-fi": {
"character": ["宇宙飛行士", "AIロボット", "サイボーグ"],
"plot": ["異星人との接触", "未来都市の陰謀", "宇宙戦争"],
"setting": ["宇宙ステーション", "荒廃した地球", "人工惑星"],
"theme": ["人間と機械の共存", "進化の危機", "文明の崩壊と再生"]
}
};
const relatedIdeas = {
"友情と勇気": ["戦場での友情", "共に戦う友人の絆"],
"運命と戦い": ["運命に抗うヒーロー", "過去を背負う主人公の決意"]
};
let isDarkMode = false;
function toggleTheme() {
isDarkMode = !isDarkMode;
document.body.style.setProperty("--background-color", isDarkMode ? "#333" : "#f4f6f9");
document.body.style.setProperty("--chat-bg-color", isDarkMode ? "#444" : "#ffffff");
document.querySelector(".theme-toggle-btn").textContent = isDarkMode ? "🌞 ライトモード" : "🌙 ダークモード";
}
function generateIdea() {
const category = document.getElementById("categorySelect").value;
const element = document.getElementById("elementSelect").value;
const ideaArray = ideas[category][element];
const randomIdea = ideaArray[Math.floor(Math.random() * ideaArray.length)];
document.getElementById("ideaDisplay").textContent = randomIdea;
displayRelatedIdeas(randomIdea);
}
function displayRelatedIdeas(idea) {
const relatedDiv = document.getElementById("relatedIdeas");
relatedDiv.innerHTML = "<h4>関連するアイディア:</h4>";
const relatedItems = relatedIdeas[idea] || ["関連アイディアが見つかりません"];
relatedItems.forEach(item => {
const relatedItemDiv = document.createElement("div");
relatedItemDiv.textContent = `- ${item}`;
relatedDiv.appendChild(relatedItemDiv);
});
}
</script>
</body>
</html>
神と対話するAI
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>神と対話するAI</title>
<style>
/* 神秘的な背景とエフェクト */
body {
font-family: 'Georgia', serif;
background-color: #1a1a2e;
color: #d1d1e9;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
overflow: hidden;
}
.chat-container {
width: 100%;
max-width: 600px;
background-color: rgba(43, 43, 63, 0.9);
border-radius: 10px;
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.6);
padding: 20px;
position: relative;
overflow: hidden;
}
.messages {
height: 300px;
overflow-y: auto;
margin-bottom: 10px;
padding-right: 10px;
}
.message {
margin: 10px 0;
line-height: 1.5;
}
.user-message {
text-align: right;
color: #00aaff;
}
.ai-message {
text-align: left;
color: #e6e6fa;
font-style: italic;
}
.typing-indicator {
font-size: 1.5em;
color: #e6e6fa;
}
.input-container {
display: flex;
}
input[type="text"] {
flex: 1;
padding: 10px;
border-radius: 5px;
border: 1px solid #555;
background-color: #444;
color: #e6e6fa;
margin-right: 10px;
}
button {
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #5a5adb;
color: white;
cursor: pointer;
}
/* 背景アニメーション */
.background-animation {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle, rgba(255,255,255,0.1), rgba(0,0,0,0) 70%);
animation: glow 5s infinite alternate;
pointer-events: none;
}
@keyframes glow {
from {
opacity: 0.4;
}
to {
opacity: 0.7;
}
}
</style>
</head>
<body>
<div class="chat-container">
<h2>神と対話するAI</h2>
<div class="messages" id="messages"></div>
<div class="input-container">
<input type="text" id="userInput" placeholder="質問を入力してください...">
<button onclick="sendMessage()">送信</button>
</div>
<div class="background-animation"></div>
</div>
<script>
const messagesContainer = document.getElementById("messages");
function addMessage(content, className) {
const message = document.createElement("div");
message.className = "message " + className;
message.innerHTML = content;
messagesContainer.appendChild(message);
messagesContainer.scrollTop = messagesContainer.scrollHeight;
}
function getAIResponse(userMessage) {
const responses = {
"目的": [
"あなたの目的はあなたの選択の中にあります。心を澄まし、その小さな声に耳を傾けなさい。",
"目的は定まっているものではなく、あなたが形作るものです。勇気を持って探し続けなさい。"
],
"未来": [
"未来は揺れ動く霧のようなもの…手の中にありながら捉えられぬもの。だが、あなたの意思がその霧を晴らすだろう。",
"未来は、あなたの内にある希望が灯し出すもの。信じる道を歩みなさい。"
],
"愛": [
"愛とは、無限に与えること。光のようにあなたを包み、他者を受け入れるものです。",
"愛とは、心の中の静けさと繋がり、他者の存在をただあるがままに受け入れること。"
],
"default": [
"その問いの答えは、あなた自身が見つけ出すもの。内なる声を信じなさい。",
"すべての答えは既にあなたの心の中にあります。耳を澄まし、その声に従いなさい。"
]
};
const keywords = Object.keys(responses);
for (let keyword of keywords) {
if (userMessage.includes(keyword)) {
const possibleResponses = responses[keyword];
return possibleResponses[Math.floor(Math.random() * possibleResponses.length)];
}
}
const defaultResponses = responses["default"];
return defaultResponses[Math.floor(Math.random() * defaultResponses.length)];
}
function sendMessage() {
const userInput = document.getElementById("userInput").value.trim();
if (userInput === "") return;
addMessage(userInput, "user-message");
document.getElementById("userInput").value = "";
const aiResponse = getAIResponse(userInput);
// タイピングエフェクトを表示
setTimeout(() => {
addMessage(`<span class="typing-indicator">...</span>`, "ai-message");
setTimeout(() => {
messagesContainer.lastChild.remove();
addMessage(aiResponse, "ai-message");
}, 2000); // タイピングエフェクト表示後の応答
}, 800); // 遅延で自然な応答
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>神と対話するAI</title>
<style>
/* 神秘的な背景とエフェクト */
body {
font-family: 'Georgia', serif;
background-color: #1a1a2e;
color: #d1d1e9;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
overflow: hidden;
}
.chat-container {
width: 100%;
max-width: 600px;
background-color: rgba(43, 43, 63, 0.9);
border-radius: 10px;
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.6);
padding: 20px;
position: relative;
overflow: hidden;
}
.messages {
height: 300px;
overflow-y: auto;
margin-bottom: 10px;
padding-right: 10px;
}
.message {
margin: 10px 0;
line-height: 1.5;
}
.user-message {
text-align: right;
color: #00aaff;
}
.ai-message {
text-align: left;
color: #e6e6fa;
font-style: italic;
}
.typing-indicator {
font-size: 1.5em;
color: #e6e6fa;
}
.input-container {
display: flex;
}
input[type="text"] {
flex: 1;
padding: 10px;
border-radius: 5px;
border: 1px solid #555;
background-color: #444;
color: #e6e6fa;
margin-right: 10px;
}
button {
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #5a5adb;
color: white;
cursor: pointer;
}
/* 背景アニメーション */
.background-animation {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle, rgba(255,255,255,0.1), rgba(0,0,0,0) 70%);
animation: glow 5s infinite alternate;
pointer-events: none;
}
@keyframes glow {
from {
opacity: 0.4;
}
to {
opacity: 0.7;
}
}
</style>
</head>
<body>
<div class="chat-container">
<h2>神と対話するAI</h2>
<div class="messages" id="messages"></div>
<div class="input-container">
<input type="text" id="userInput" placeholder="質問を入力してください...">
<button onclick="sendMessage()">送信</button>
</div>
<div class="background-animation"></div>
</div>
<script>
const messagesContainer = document.getElementById("messages");
function addMessage(content, className) {
const message = document.createElement("div");
message.className = "message " + className;
message.innerHTML = content;
messagesContainer.appendChild(message);
messagesContainer.scrollTop = messagesContainer.scrollHeight;
}
function getAIResponse(userMessage) {
const responses = {
"目的": [
"あなたの目的はあなたの選択の中にあります。心を澄まし、その小さな声に耳を傾けなさい。",
"目的は定まっているものではなく、あなたが形作るものです。勇気を持って探し続けなさい。"
],
"未来": [
"未来は揺れ動く霧のようなもの…手の中にありながら捉えられぬもの。だが、あなたの意思がその霧を晴らすだろう。",
"未来は、あなたの内にある希望が灯し出すもの。信じる道を歩みなさい。"
],
"愛": [
"愛とは、無限に与えること。光のようにあなたを包み、他者を受け入れるものです。",
"愛とは、心の中の静けさと繋がり、他者の存在をただあるがままに受け入れること。"
],
"default": [
"その問いの答えは、あなた自身が見つけ出すもの。内なる声を信じなさい。",
"すべての答えは既にあなたの心の中にあります。耳を澄まし、その声に従いなさい。"
]
};
const keywords = Object.keys(responses);
for (let keyword of keywords) {
if (userMessage.includes(keyword)) {
const possibleResponses = responses[keyword];
return possibleResponses[Math.floor(Math.random() * possibleResponses.length)];
}
}
const defaultResponses = responses["default"];
return defaultResponses[Math.floor(Math.random() * defaultResponses.length)];
}
function sendMessage() {
const userInput = document.getElementById("userInput").value.trim();
if (userInput === "") return;
addMessage(userInput, "user-message");
document.getElementById("userInput").value = "";
const aiResponse = getAIResponse(userInput);
// タイピングエフェクトを表示
setTimeout(() => {
addMessage(`<span class="typing-indicator">...</span>`, "ai-message");
setTimeout(() => {
messagesContainer.lastChild.remove();
addMessage(aiResponse, "ai-message");
}, 2000); // タイピングエフェクト表示後の応答
}, 800); // 遅延で自然な応答
}
</script>
</body>
</html>
タスク管理.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AIベースのタスク管理アプリ</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
}
h1 {
color: #333;
}
.task-container {
width: 90%;
max-width: 1200px;
padding: 20px;
}
.task-form {
display: flex;
flex-direction: column;
margin-bottom: 20px;
}
.task-form input, .task-form textarea {
margin-bottom: 10px;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
}
.task-form button {
padding: 10px;
background-color: #28a745;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
.task-form button:hover {
background-color: #218838;
}
.kanban-board {
display: flex;
justify-content: space-around;
}
.kanban-column {
background-color: #f8f9fa;
padding: 20px;
width: 30%;
border-radius: 10px;
min-height: 300px;
}
.kanban-column h2 {
text-align: center;
}
.task-list {
margin-top: 10px;
}
.task-item {
display: flex;
justify-content: space-between;
background-color: #e9ecef;
margin-bottom: 10px;
padding: 10px;
border-radius: 5px;
}
.task-item.high {
background-color: #ffcccc;
}
.task-item.medium {
background-color: #fff3cd;
}
.task-item.low {
background-color: #d4edda;
}
.task-item button {
background-color: #dc3545;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
.task-item button:hover {
background-color: #c82333;
}
</style>
</head>
<body>
<h1>タスク管理</h1>
<div class="task-container">
<form class="task-form" id="taskForm">
<input type="text" id="taskTitle" placeholder="タスクタイトル" required>
<textarea id="taskDescription" placeholder="タスク詳細" rows="4"></textarea>
<input type="date" id="taskDueDate" required>
<button type="submit">タスクを追加</button>
</form>
<div class="kanban-board">
<div class="kanban-column" id="notStarted">
<h2>未着手</h2>
<div class="task-list" id="notStartedList"></div>
</div>
<div class="kanban-column" id="inProgress">
<h2>進行中</h2>
<div class="task-list" id="inProgressList"></div>
</div>
<div class="kanban-column" id="completed">
<h2>完了</h2>
<div class="task-list" id="completedList"></div>
</div>
</div>
</div>
<script>
let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
// 優先度予測(ルールベース)
function predictPriority(taskDueDate) {
const daysLeft = (new Date(taskDueDate) - new Date()) / (1000 * 60 * 60 * 24);
if (daysLeft < 2) {
return 'High'; // 緊急度が高い
} else if (daysLeft < 7) {
return 'Medium'; // 1週間以内
} else {
return 'Low'; // 余裕がある
}
}
// タスクをローカルストレージに保存
function saveTasks() {
localStorage.setItem('tasks', JSON.stringify(tasks));
}
// タスク表示
function loadTasks() {
const notStartedList = document.getElementById('notStartedList');
const inProgressList = document.getElementById('inProgressList');
const completedList = document.getElementById('completedList');
notStartedList.innerHTML = '';
inProgressList.innerHTML = '';
completedList.innerHTML = '';
tasks.forEach(task => {
const taskItem = document.createElement('div');
taskItem.classList.add('task-item', task.priority.toLowerCase());
taskItem.setAttribute('draggable', true);
taskItem.innerHTML = `
<div>
<strong>${task.title}</strong>
<p>${task.description}</p>
<small>期限: ${new Date(task.dueDate).toLocaleDateString()}</small>
<p>優先度: ${task.priority}</p>
</div>
<button onclick="deleteTask('${task.id}')">削除</button>
`;
taskItem.addEventListener('dragstart', (e) => {
e.dataTransfer.setData('text/plain', task.id);
});
if (task.status === 'notStarted') {
notStartedList.appendChild(taskItem);
} else if (task.status === 'inProgress') {
inProgressList.appendChild(taskItem);
} else if (task.status === 'completed') {
completedList.appendChild(taskItem);
}
});
}
// タスク追加
document.getElementById('taskForm').addEventListener('submit', (e) => {
e.preventDefault();
const title = document.getElementById('taskTitle').value;
const description = document.getElementById('taskDescription').value;
const dueDate = document.getElementById('taskDueDate').value;
const priority = predictPriority(dueDate);
const newTask = {
id: Date.now().toString(),
title,
description,
dueDate,
priority,
status: 'notStarted' // 初期状態は未着手
};
tasks.push(newTask);
saveTasks();
document.getElementById('taskForm').reset();
loadTasks();
});
// タスク削除
function deleteTask(taskId) {
tasks = tasks.filter(task => task.id !== taskId);
saveTasks();
loadTasks();
}
// ドラッグ&ドロップの設定
document.querySelectorAll('.kanban-column').forEach(column => {
column.addEventListener('dragover', (e) => {
e.preventDefault();
});
column.addEventListener('drop', (e) => {
const taskId = e.dataTransfer.getData('text/plain');
const newStatus = column.id;
const task = tasks.find(task => task.id === taskId);
task.status = newStatus;
saveTasks();
loadTasks();
});
});
// ページ読み込み時にタスクを表示
loadTasks();
</script>
</body>
</html>
ドメイン取得サイト.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Domain Acquisition</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
text-align: center;
width: 100%;
max-width: 600px;
}
h1 {
margin-bottom: 20px;
}
input[type="text"] {
width: 80%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
}
button {
padding: 10px 20px;
border: none;
background-color: #007BFF;
color: white;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
.result {
margin-top: 20px;
}
.loading {
display: none;
margin-top: 20px;
}
.domain-list {
margin-top: 20px;
}
.domain-list ul {
list-style-type: none;
padding: 0;
}
.domain-list li {
background-color: #f9f9f9;
margin: 10px 0;
padding: 10px;
border-radius: 5px;
border: 1px solid #ddd;
text-align: left;
display: flex;
justify-content: space-between;
}
.price {
color: green;
}
.purchase-link {
text-decoration: none;
background-color: #28a745;
color: white;
padding: 5px 10px;
border-radius: 5px;
}
.error {
color: red;
margin-top: 20px;
}
@media (max-width: 600px) {
input[type="text"] {
width: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Check Domain Availability</h1>
<form id="domain-form">
<input type="text" id="domain-name" placeholder="Enter domain name" required>
<button type="submit">Search</button>
</form>
<div class="loading" id="loading">
<p>Searching...</p>
<img src="https://i.gifer.com/ZZ5H.gif" alt="Loading" width="50">
</div>
<div class="result" id="result"></div>
<div class="error" id="error"></div>
<div class="domain-list" id="domain-list"></div>
</div>
<script>
const form = document.getElementById('domain-form');
const resultDiv = document.getElementById('result');
const loadingDiv = document.getElementById('loading');
const errorDiv = document.getElementById('error');
const domainListDiv = document.getElementById('domain-list');
form.addEventListener('submit', function (event) {
event.preventDefault();
const domainName = document.getElementById('domain-name').value.trim();
// フィールドをリセット
resultDiv.innerHTML = '';
errorDiv.innerHTML = '';
domainListDiv.innerHTML = '';
loadingDiv.style.display = 'block'; // ローディング表示
if (validateDomainName(domainName)) {
// ダミーデータの使用例(実際にはAPIを呼び出します)
setTimeout(() => {
loadingDiv.style.display = 'none'; // ローディング終了
// 検索結果の仮表示
const available = Math.random() > 0.5; // ランダムに結果を生成
if (available) {
resultDiv.innerHTML = `<strong>${domainName}</strong> is available!`;
// 他のTLDを提案し、価格と購入リンクを表示
const suggestions = [
{ tld: '.com', price: '$10.99', link: 'https://buydomain.com/com' },
{ tld: '.net', price: '$9.99', link: 'https://buydomain.com/net' },
{ tld: '.org', price: '$11.99', link: 'https://buydomain.com/org' },
{ tld: '.info', price: '$8.99', link: 'https://buydomain.com/info' },
{ tld: '.co', price: '$12.99', link: 'https://buydomain.com/co' }
];
let domainList = '<ul>';
suggestions.forEach(({ tld, price, link }) => {
domainList += `<li>${domainName}${tld} <span class="price">${price}</span> <a href="${link}" target="_blank" class="purchase-link">Buy</a></li>`;
});
domainList += '</ul>';
domainListDiv.innerHTML = domainList;
} else {
resultDiv.innerHTML = `<strong>${domainName}</strong> is already taken.`;
}
}, 2000); // 実際のAPIではこのタイミングで結果を取得
} else {
errorDiv.innerHTML = 'Please enter a valid domain name. It should follow the format: example.com';
loadingDiv.style.display = 'none'; // エラー時はローディングを停止
}
});
// ドメイン名のバリデーション関数
function validateDomainName(domain) {
const domainPattern = /^[a-zA-Z0-9-]{1,63}\.[a-zA-Z]{2,}$/;
return domainPattern.test(domain);
}
</script>
</body>
</html>
Bootstrapフッターを配置
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<title>My Site</title>
</head>
<body>
<header class="bg-primary text-center text-light p-5">
<h1 class="fs-3">My Admin</h1>
</header>
<div class="container mt-5">
<section class="row">
<section class="col-md-4 mb-5">
こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。
</section>
<section class="col-md-8">
こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。
</section>
</section>
</div>
<footer class="bg-secondary text-center text-light p-5 mt-5">
(c) chodomeyuhei
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
crossorigin="anonymous"></script>
</body>
</html>
ブックマークサイト.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>
:root {
--bg-color: #f4f4f9;
--text-color: #000;
--link-color: #007bff;
--btn-bg-color: #007bff;
--btn-hover-color: #0056b3;
--delete-btn-bg-color: #dc3545;
--delete-btn-hover-color: #c82333;
}
[data-theme="dark"] {
--bg-color: #2e2e2e;
--text-color: #fff;
--link-color: #66b2ff;
--btn-bg-color: #0056b3;
--btn-hover-color: #007bff;
--delete-btn-bg-color: #c82333;
--delete-btn-hover-color: #dc3545;
}
body {
font-family: Arial, sans-serif;
margin: 20px;
padding: 0;
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.3s, color 0.3s;
}
.container {
max-width: 800px;
margin: auto;
padding: 20px;
background: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.3s, color 0.3s;
}
.bookmark-form {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 20px;
}
.bookmark-form input, .bookmark-form select {
padding: 10px;
font-size: 16px;
border: 1px solid #ddd;
border-radius: 5px;
background-color: var(--bg-color);
color: var(--text-color);
}
.bookmark-form button {
padding: 10px;
font-size: 16px;
background-color: var(--btn-bg-color);
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.bookmark-form button:hover {
background-color: var(--btn-hover-color);
}
.bookmark-list {
list-style-type: none;
padding: 0;
}
.bookmark-item {
display: flex;
justify-content: space-between;
align-items: center;
margin: 10px 0;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
background-color: #fafafa;
background-color: var(--bg-color);
color: var(--text-color);
}
.bookmark-item a {
text-decoration: none;
color: var(--link-color);
}
.bookmark-item button {
padding: 5px 10px;
font-size: 14px;
background-color: var(--delete-btn-bg-color);
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.bookmark-item button:hover {
background-color: var(--delete-btn-hover-color);
}
.controls {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
</style>
</head>
<body data-theme="light">
<div class="container">
<h1>ブックマークサイト</h1>
<div class="controls">
<input type="text" id="search-bar" placeholder="ブックマークを検索" oninput="filterBookmarks()">
<select id="category-filter" onchange="filterByCategory()">
<option value="all">すべてのカテゴリー</option>
</select>
<button onclick="toggleTheme()">ダークモード切り替え</button>
</div>
<div class="bookmark-form">
<input type="text" id="bookmark-title" placeholder="タイトルを入力してください" required>
<input type="url" id="bookmark-url" placeholder="URLを入力してください" required>
<input type="text" id="bookmark-category" placeholder="カテゴリーを入力してください">
<button onclick="addBookmark()">ブックマークを追加</button>
</div>
<ul id="bookmark-list" class="bookmark-list"></ul>
</div>
<script>
document.addEventListener('DOMContentLoaded', loadBookmarks);
function loadBookmarks() {
const bookmarks = JSON.parse(localStorage.getItem('bookmarks')) || [];
const categories = new Set();
bookmarks.forEach(bookmark => {
renderBookmark(bookmark);
categories.add(bookmark.category);
});
updateCategoryFilter(Array.from(categories));
}
function addBookmark() {
const titleInput = document.getElementById('bookmark-title');
const urlInput = document.getElementById('bookmark-url');
const categoryInput = document.getElementById('bookmark-category');
const title = titleInput.value.trim();
const url = urlInput.value.trim();
const category = categoryInput.value.trim();
if (title === '' || url === '') {
alert('タイトルとURLを入力してください。');
return;
}
const bookmark = { title, url, category };
saveBookmark(bookmark);
renderBookmark(bookmark);
titleInput.value = '';
urlInput.value = '';
categoryInput.value = '';
updateCategoryFilter([category]);
}
function saveBookmark(bookmark) {
const bookmarks = JSON.parse(localStorage.getItem('bookmarks')) || [];
bookmarks.push(bookmark);
localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
}
function renderBookmark(bookmark) {
const bookmarkList = document.getElementById('bookmark-list');
const listItem = document.createElement('li');
listItem.className = 'bookmark-item';
listItem.innerHTML = `
<span>${bookmark.title} (${bookmark.category})</span>
<div>
<a href="${bookmark.url}" target="_blank">訪問</a>
<button onclick="editBookmark('${bookmark.url}')">編集</button>
<button onclick="deleteBookmark('${bookmark.url}')">削除</button>
</div>
`;
bookmarkList.appendChild(listItem);
}
function deleteBookmark(url) {
let bookmarks = JSON.parse(localStorage.getItem('bookmarks')) || [];
bookmarks = bookmarks.filter(bookmark => bookmark.url !== url);
localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
refreshBookmarkList();
}
function editBookmark(url) {
let bookmarks = JSON.parse(localStorage.getItem('bookmarks')) || [];
const bookmark = bookmarks.find(bookmark => bookmark.url === url);
if (bookmark) {
document.getElementById('bookmark-title').value = bookmark.title;
document.getElementById('bookmark-url').value = bookmark.url;
document.getElementById('bookmark-category').value = bookmark.category;
deleteBookmark(url); // 編集のために一旦削除
}
}
function refreshBookmarkList() {
const bookmarkList = document.getElementById('bookmark-list');
bookmarkList.innerHTML = '';
loadBookmarks();
}
function filterBookmarks() {
const query = document.getElementById('search-bar').value.toLowerCase();
const bookmarkItems = document.querySelectorAll('.bookmark-item');
bookmarkItems.forEach(item => {
const title = item.querySelector('span').innerText.toLowerCase();
item.style.display = title.includes(query) ? 'flex' : 'none';
});
}
function filterByCategory() {
const category = document.getElementById('category-filter').value;
const bookmarkItems = document.querySelectorAll('.bookmark-item');
bookmarkItems.forEach(item => {
const itemCategory = item.querySelector('span').innerText.split(' (')[1].slice(0, -1);
item.style.display = (category === 'all' || itemCategory === category) ? 'flex' : 'none';
});
}
function updateCategoryFilter(categories) {
const filter = document.getElementById('category-filter');
categories.forEach(category => {
if (![...filter.options].some(option => option.value === category)) {
const option = document.createElement('option');
option.value = category;
option.textContent = category;
filter.appendChild(option);
}
});
}
function toggleTheme() {
const body = document.body;
const currentTheme = body.getAttribute('data-theme');
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
body.setAttribute('data-theme', newTheme);
}
</script>
</body>
</html>
React className属性
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My React App</title>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<link rel="stylesheet" href="style.css">
<body>
<div id="container"></div>
<script type="text/babel">
'use strict';
{
const container = document.querySelector('#container');
const root = ReactDOM.createRoot(container);
root.render(
<>
<h1>アイテム</h1>
<ul className="menus">
<li>ポーション</li>
<li>エリクサー</li>
<li>ラストエリクサー</li>
</ul>
<p>合計: 0G</p>
</>
);
}
</script>
</body>
</html>
style.css
@charset "utf-8";
body{
margin: 0;
}
#container{
width: 400px;
margin: auto;
}
h1{
margin: 16px 0 0 0;
font-size: 20px;
text-align: center;
}
.menus{
margin: 0;
padding: 0;
list-style-type: none;
}
.menus > li{
border: 1px solid #ccc;
padding: 8px;
border-radius: 8px;
margin-top: 16px;
}
p{
margin: 0;
text-align: right;
}
CSS 画像を左右に振り分ける
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Flexbox</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<article>
<img src="forest.png" width="240" height="160">
<div class="text">
<h1>タイトル</h1>
<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
</div>
</article>
<article>
<img src="forest.png" width="240" height="160">
<div class="text">
<h1>タイトル</h1>
<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
</div>
</article>
<article>
<img src="forest.png" width="240" height="160">
<div class="text">
<h1>タイトル</h1>
<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
</div>
</article>
<article>
<img src="forest.png" width="240" height="160">
<div class="text">
<h1>タイトル</h1>
<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
</div>
</article>
</body>
</html>
style.css
@charset "utf-8";
article {
display: flex;
gap: 16px;
align-items: center;
}
article+article {
margin-top: 32px;
}
article:nth-child(even) {
flex-direction: row-reverse;
}
.text {
flex: 1;
}
h1 {
margin: 0;
font-size: 22px;
}
