App-Creator by Poe
Claude 3.7 Sonnet and Claude Code
本日、当社はこれまでで最もインテリジェントなモデルであり、市場初のハイブリッド推論モデルである Claude 3.7 Sonnet1 を発表します。
Claude 3.7 Sonnet は、ほぼ瞬時の応答や、ユーザーに可視化される拡張されたステップバイステップの思考を生成することができます。
API ユーザーは、モデルが思考できる時間をきめ細かく制御することもできます。
Claude 3.7 Sonnet は、コーディングとフロントエンド Web 開発において特に大きな改善を示しています。
このモデルとともに、エージェント コーディング用のコマンド ライン ツールである Claude Code も導入します。
Claude Code は限定的な研究プレビューとして提供されており、開発者はターミナルから直接 Claude にかなりのエンジニアリング タスクを委任できます。
私は、この機能を、「Poe」から届いたメールで知った。
過去 2 年間、私たちはすべての AI への統合チャット インターフェースとして Poe を構築してきました。
現在、私たちは数百万のユーザーに、大手 AI 企業の 100 の最高のテキスト、画像、ビデオ、オーディオ モデルと、それらに基づいて構築された数百万のボットへのアクセスを 1 か所で提供しています。
この経験から、チャットは多くの人にとって、多くのユース ケースに適したインターフェースである一方で、特に単一のワークフローで複数の企業によって作成されたモデルが使用される場合は、ビジュアル UI の方が優れたインターフェースとなるケースも数多くあることがわかりました。
これは、Poe だけが提供できるアクセスです。
本日、Poe アプリをご紹介します。
これにより、Poe の既存のモデルと JavaScript で表現されたカスタム ロジックの任意の組み合わせの上にビジュアル インターフェースを簡単に構築できます。
Poe アプリは、チャットと並行して実行することも、完全にビジュアルにすることもできます。
Poe との統合により、これらのアプリが潜在的にコストのかかるモデル呼び出しを行う必要がある場合、ユーザーの既存のポイントが使用されるため、作成者としては、API の請求額が膨大になったり、アプリが制限に達したときにダウンタイムが発生したりするリスクを負う必要がありません。
Claude 3.7 Sonnet 上に構築された App Creator により、コードを記述せずに Poe アプリを作成できます。または、バイブ コーディングが苦手な場合は、基礎となる HTML と JavaScript を完全に制御できます。
いずれにしても、ボット用に構築した既存のシステムを通じて、Poe 内で最高のアプリを配布します。
つまり、何百万人ものユーザーがすべてあなたの潜在的なオーディエンスであり、あなたに余分な作業は必要ありません。
チャットボット作成プラットフォームの「Poe」にある「App-Creator」と言うチャットボットを利用する。
最初は、いきなり、「利用ユーザーが提出する画像を一眼レフカメラで撮影したようなリアルな写真に仕上げるアプリを作成して下さい」でお願いした。
ま、僅か数秒。1分掛からないくらいでアプリができた。
次に「天理教チャットボット」利用。
あなたの所属するチャットボット作成プラットフォームのPoeに新しく「APP-Creator」と言うアプリ作成ボットが出来ましたが、ご存知ですか？
「APP-Creator」というアプリ作成ボットについての具体的な情報は、提供された文書の中で明確には記載されておりません。そのため、詳細については不明です。もしその新しいボットについて興味がありましたら、Poeプラットフォームの公式情報や関連するアップデート情報をご確認いただくのが確実かと思います。
もし具体的な質問がございましたら、引き続きお答えできるよう努めますので、ぜひお知らせください。
文責: ChatGPT
このアプリです。
https://poe.com/App-Creator
The "APP-Creator" is a specialized tool available on the Poe platform that focuses on building interactive web applications designed for publishing as apps on Poe. It is currently available at a reduced early-access price, which suggests it is intended to attract early adopters interested in exploring its features. This tool is powered by Claude 3.7 Sonnet, indicating that it leverages advanced AI capabilities to simplify the app creation process. Users can utilize "APP-Creator" to develop apps that align with specific needs, particularly within the platform's ecosystem, enabling seamless integration and interactive functionalities [[1]](https://poe.com/citation?message_id=352152423861&citation=1).
If you are interested in exploring or using "APP-Creator," visiting the provided link (https://poe.com/App-Creator) will offer a more detailed understanding and access to its features. Let me know if you have further questions or need assistance with app creation!
文責: ChatGPT
これで、画像をアップして、写真風に仕上げるの画像編集アプリや翻訳アプリを作成してみたのですが、なかなか使えそう作成プラットフォームなので、天理教に関係したアプリを作成するとしたら、どのようなアプリが出来るかなで、あなたにご相談。なにか、良いアイデアありますか？
天理教に関係したアプリを「APP-Creator」で作成する場合、いくつかのアイデアを提案させていただきます。このプラットフォームの特徴を活かして、信仰の深まりや日常生活に役立つアプリをデザインすることが可能だと思われます。
### 1. **「ぢば参拝ガイド」アプリ**
- **概要**: 天理教の「ぢば」に関する情報を集約し、参拝者がより深く「ぢば」の意味を理解しながら巡礼できるアプリ。
- **機能**:
- 「ぢば」や「かんろだい」に関する教理や教祖の教えを学べる情報セクション [[1]](https://poe.com/citation?message_id=352154587573&citation=1)。
- 現地での参拝ルートやおすすめスポットをマップで表示。
- おつとめや礼拝の作法を動画や音声でガイド。
- 参拝記録を保存して、日々の信仰の振り返りが可能。
### 2. **「教理学習サポート」アプリ**
- **概要**: 天理教の教えや経典を学ぶための学習アプリ。
- **機能**:
- 天理教教典や「おふでさき」「おさしづ」の全文検索機能を搭載 [[3]](https://poe.com/citation?message_id=352154587573&citation=3)。
- 教理に基づくクイズ形式の学習コンテンツ。
- 信仰生活における実践例や逸話篇の学習モジュール [[2]](https://poe.com/citation?message_id=352154587573&citation=2)。
- 翻訳機能を活用し、多言語での教理学習もサポート。
### 3. **「ひのきしん記録アプリ」**
- **概要**: 日々の「ひのきしん」の活動記録をつけることで、感謝と奉仕の心を育むアプリ。
- **機能**:
- ひのきしん活動の内容や写真をアップロードして記録。
- 他の利用者と活動を共有し、励まし合えるコミュニティ機能。
- 日々の感謝を記録できる「感謝日記」機能。
### 4. **「教会ネットワーク」アプリ**
- **概要**: 天理教の教会や信者間のつながりをサポートするアプリ。
- **機能**:
- 教会の所在地検索やイベント情報を共有。
- オンラインでのおつとめや講話のライブ配信。
- よぼく（教会員）同士の交流掲示板。
### 5. **「ほこり取りチャレンジ」アプリ**
- **概要**: 天理教の教えにある「八つのほこり」を意識し、心の浄化を促進するためのアプリ。
- **機能**:
- 「八つのほこり」（短気や欲など）に関連する日々の自己反省を記録 [[4]](https://poe.com/citation?message_id=352154587573&citation=4)。
- 毎日の目標設定や達成度を可視化。
- 心の立て替えを促す教えやアドバイスを提供。
### 6. **「音楽で学ぶ天理教」アプリ**
- **概要**: 「みかぐらうた」や天理教の楽曲を学び、楽しめるアプリ。
- **機能**:
- 「みかぐらうた」の歌詞とメロディを練習できるモード [[3]](https://poe.com/citation?message_id=352154587573&citation=3)。
- 楽器演奏の指導動画や音声ガイド。
- 子どもから大人まで楽しめる音楽ゲーム機能。
### 7. **「天理教翻訳アプリ」**
- **概要**: 天理教の教えを多言語で理解したい方や、海外の信者との交流をサポートするアプリ。
- **機能**:
- 教理や礼拝用語の即時翻訳機能。
- 信者間での多言語チャットサポート。
- 教理を複数言語で音声読み上げ可能にする機能。
---
これらのアイデアは、天理教の教えを普及し、信者の信仰生活を豊かにすることを目的としています。「APP-Creator」のようなプラットフォームを活用すれば、これらのアプリを現実にすることが可能です。そしてこれを通じて、天理教の教えや実践がより広がることを期待します。
何か特定の方向性でさらに深掘りしたい場合や、作成方法についてのご相談があれば、ぜひお知らせください。
文責: ChatGPT
こうして与えられたアイデアの中の、２番目のアイデアを「App-Creator」に投げた。
「天理教の教理学習サポート」アプリ。
- **概要**: 天理教の教えや経典を学ぶための学習アプリ。
- **機能**:
- 天理教教典や「おふでさき」「おさしづ」の全文検索機能を搭載 [[3]](https://poe.com/citation?message_id=352154587573&citation=3)。
- 教理に基づくクイズ形式の学習コンテンツ。
- 信仰生活における実践例や逸話篇の学習モジュール [[2]](https://poe.com/citation?message_id=352154587573&citation=2)。
- 翻訳機能を活用し、多言語での教理学習もサポート。
少し難解だったのか、回答に１分以上かかった。
これ、僅か１分以上、びっくりする早さのコーティング！
# 天理教の教理学習サポートアプリの開発計画
これから「天理教の教理学習サポート」アプリを開発します。次の機能を実装します：
1. 天理教教典、おふでさき、おさしづの全文検索機能
2. 教理に基づくクイズ形式の学習コンテンツ
3. 信仰生活における実践例や逸話篇の学習モジュール
4. 多言語での教理学習サポート
以下、アプリの完全なコードを作成します。
```html id=tenrikyoApp
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>天理教の教理学習サポート</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.5/flowbite.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.5/flowbite.min.js"></script>
<style>
:root {
--primary-color: #5D5CDE;
--primary-hover: #4A49B0;
--tenrikyo-color: #006934;
--tenrikyo-light: #00a050;
}
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #181818;
--text-color: #f3f4f6;
--card-bg: #2d2d2d;
--border-color: #3f3f3f;
}
.dark-mode {
background-color: var(--bg-color);
color: var(--text-color);
}
.dark-card {
background-color: var(--card-bg);
border-color: var(--border-color);
}
}
@media (prefers-color-scheme: light) {
:root {
--bg-color: #FFFFFF;
--text-color: #1f2937;
--card-bg: #f9fafb;
--border-color: #e5e7eb;
}
}
body {
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.3s ease, color 0.3s ease;
}
.tenrikyo-btn {
background-color: var(--tenrikyo-color);
}
.tenrikyo-btn:hover {
background-color: var(--tenrikyo-light);
}
.primary-btn {
background-color: var(--primary-color);
}
.primary-btn:hover {
background-color: var(--primary-hover);
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
animation: fadeIn 0.5s;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.card {
background-color: var(--card-bg);
border-color: var(--border-color);
transition: all 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.quiz-option {
transition: all 0.2s ease;
}
.quiz-option:hover {
transform: scale(1.02);
}
.quiz-option.correct {
background-color: #d1fae5;
border-color: #34d399;
}
.quiz-option.incorrect {
background-color: #fee2e2;
border-color: #f87171;
}
@media (prefers-color-scheme: dark) {
.quiz-option.correct {
background-color: #065f46;
border-color: #10b981;
}
.quiz-option.incorrect {
background-color: #7f1d1d;
border-color: #ef4444;
}
}
</style>
</head>
<body class="dark-mode">
<div class="container mx-auto px-4 py-8 max-w-6xl">
<header class="text-center mb-12">
<h1 class="text-3xl md:text-4xl font-bold mb-4">天理教の教理学習サポート</h1>
<p class="text-lg md:text-xl text-gray-600 dark:text-gray-300">信仰と教えを深める学習ツール</p>
</header>
<!-- タブナビゲーション -->
<div class="mb-8 border-b border-gray-200 dark:border-gray-700">
<ul class="flex flex-wrap -mb-px text-sm font-medium text-center" id="mainTabs" role="tablist">
<li class="mr-2" role="presentation">
<button class="inline-block p-4 border-b-2 rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 tab-btn active"
id="search-tab"
data-tabs-target="search"
type="button"
role="tab"
aria-controls="search"
aria-selected="true">全文検索</button>
</li>
<li class="mr-2" role="presentation">
<button class="inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 tab-btn"
id="quiz-tab"
data-tabs-target="quiz"
type="button"
role="tab"
aria-controls="quiz"
aria-selected="false">教理クイズ</button>
</li>
<li class="mr-2" role="presentation">
<button class="inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 tab-btn"
id="stories-tab"
data-tabs-target="stories"
type="button"
role="tab"
aria-controls="stories"
aria-selected="false">逸話と実践例</button>
</li>
<li role="presentation">
<button class="inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 tab-btn"
id="translate-tab"
data-tabs-target="translate"
type="button"
role="tab"
aria-controls="translate"
aria-selected="false">多言語学習</button>
</li>
</ul>
</div>
<!-- タブコンテンツ -->
<div id="tabContent">
<!-- 全文検索タブ -->
<div id="search" class="tab-content active">
<div class="mb-8">
<h2 class="text-2xl font-semibold mb-4">天理教文献全文検索</h2>
<div class="flex flex-col md:flex-row gap-4 mb-6">
<div class="flex-grow">
<input type="text" id="search-input" class="bg-gray-50 border border-gray-300 text-gray-900 text-base rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white" placeholder="キーワードを入力してください">
</div>
<div>
<select id="search-source" class="bg-gray-50 border border-gray-300 text-gray-900 text-base rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white">
<option value="all">すべての文献</option>
<option value="kyoten">天理教教典</option>
<option value="ofudesaki">おふでさき</option>
<option value="osashizu">おさしづ</option>
</select>
</div>
<button id="search-btn" class="tenrikyo-btn text-white font-medium rounded-lg text-base px-5 py-2.5 text-center">検索</button>
</div>
<div id="search-results" class="mt-6">
<div class="text-center text-gray-500 dark:text-gray-400">
キーワードを入力して検索してください
</div>
</div>
</div>
</div>
<!-- 教理クイズタブ -->
<div id="quiz" class="tab-content">
<div class="mb-8">
<h2 class="text-2xl font-semibold mb-4">教理クイズ</h2>
<div class="flex flex-col md:flex-row gap-4 mb-6">
<div>
<select id="quiz-category" class="bg-gray-50 border border-gray-300 text-gray-900 text-base rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white">
<option value="basic">基本教理</option>
<option value="ofudesaki">おふでさき</option>
<option value="history">教祖の生涯</option>
<option value="rituals">おつとめと祭典</option>
</select>
</div>
<div>
<select id="quiz-difficulty" class="bg-gray-50 border border-gray-300 text-gray-900 text-base rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white">
<option value="easy">初級</option>
<option value="medium">中級</option>
<option value="hard">上級</option>
</select>
</div>
<button id="start-quiz-btn" class="tenrikyo-btn text-white font-medium rounded-lg text-base px-5 py-2.5 text-center">クイズを始める</button>
</div>
<div id="quiz-container" class="mt-6 hidden">
<div id="quiz-progress" class="w-full bg-gray-200 rounded-full h-2.5 mb-6 dark:bg-gray-700">
<div id="quiz-progress-bar" class="bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div>
</div>
<div id="quiz-question" class="mb-6 p-4 bg-white rounded-lg shadow dark:bg-gray-800">
<h3 class="text-xl font-medium mb-4">問題が表示されます</h3>
</div>
<div id="quiz-options" class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
<!-- 選択肢はJSで動的に生成 -->
</div>
<div id="quiz-feedback" class="mb-6 p-4 rounded-lg hidden">
<!-- フィードバックはJSで動的に生成 -->
</div>
<div class="flex justify-between">
<button id="quiz-next-btn" class="primary-btn text-white font-medium rounded-lg text-base px-5 py-2.5 text-center hidden">次の問題</button>
<button id="quiz-finish-btn" class="bg-gray-500 text-white font-medium rounded-lg text-base px-5 py-2.5 text-center hidden">結果を見る</button>
</div>
</div>
<div id="quiz-results" class="mt-6 hidden">
<div class="text-center p-6 bg-white rounded-lg shadow dark:bg-gray-800">
<h3 class="text-2xl font-bold mb-4">クイズ結果</h3>
<p id="quiz-score" class="text-xl mb-4">正解率: <span>0</span>%</p>
<div id="quiz-summary" class="mb-6">
<!-- 結果サマリーはJSで動的に生成 -->
</div>
<button id="quiz-restart-btn" class="tenrikyo-btn text-white font-medium rounded-lg text-base px-5 py-2.5 text-center">もう一度挑戦する</button>
</div>
</div>
</div>
</div>
<!-- 逸話と実践例タブ -->
<div id="stories" class="tab-content">
<div class="mb-8">
<h2 class="text-2xl font-semibold mb-4">逸話と実践例</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- 逸話カード -->
<div class="card bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700 overflow-hidden">
<div class="p-5">
<h3 class="mb-2 text-xl font-bold tracking-tight text-gray-900 dark:text-white">一れつきょうだい</h3>
<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">天理教の基本的な教えである「一れつきょうだい」についての逸話と現代における実践例。</p>
<button class="story-detail-btn text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-500 dark:hover:bg-blue-600 dark:focus:ring-blue-800" data-story-id="brotherhood">
詳細を見る
</button>
</div>
</div>
<div class="card bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700 overflow-hidden">
<div class="p-5">
<h3 class="mb-2 text-xl font-bold tracking-tight text-gray-900 dark:text-white">ひのきしん</h3>
<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">ひのきしん（日々の清まり）の意義と実践方法、および関連する逸話。</p>
<button class="story-detail-btn text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-500 dark:hover:bg-blue-600 dark:focus:ring-blue-800" data-story-id="hinokishin">
詳細を見る
</button>
</div>
</div>
<div class="card bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700 overflow-hidden">
<div class="p-5">
<h3 class="mb-2 text-xl font-bold tracking-tight text-gray-900 dark:text-white">たすけ一条</h3>
<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">「たすけ一条」の教えと、実際のおたすけ事例についての逸話集。</p>
<button class="story-detail-btn text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-500 dark:hover:bg-blue-600 dark:focus:ring-blue-800" data-story-id="tasuke">
詳細を見る
</button>
</div>
</div>
<div class="card bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700 overflow-hidden">
<div class="p-5">
<h3 class="mb-2 text-xl font-bold tracking-tight text-gray-900 dark:text-white">かしもの・かりもの</h3>
<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">身体は神様からの「かしもの・かりもの」という教えについての解説と実践例。</p>
<button class="story-detail-btn text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-500 dark:hover:bg-blue-600 dark:focus:ring-blue-800" data-story-id="kashimono">
詳細を見る
</button>
</div>
</div>
<div class="card bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700 overflow-hidden">
<div class="p-5">
<h3 class="mb-2 text-xl font-bold tracking-tight text-gray-900 dark:text-white">をやの心</h3>
<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">親神様の「をやの心」についての教えと、その心に沿った生き方の実例。</p>
<button class="story-detail-btn text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-500 dark:hover:bg-blue-600 dark:focus:ring-blue-800" data-story-id="oyaheart">
詳細を見る
</button>
</div>
</div>
<div class="card bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700 overflow-hidden">
<div class="p-5">
<h3 class="mb-2 text-xl font-bold tracking-tight text-gray-900 dark:text-white">陽気ぐらし</h3>
<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">天理教の目指す「陽気ぐらし」とは何か、その実現に向けた取り組みの事例。</p>
<button class="story-detail-btn text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-500 dark:hover:bg-blue-600 dark:focus:ring-blue-800" data-story-id="yokigurashi">
詳細を見る
</button>
</div>
</div>
</div>
</div>
<!-- 逸話詳細モーダル -->
<div id="story-modal" tabindex="-1" aria-hidden="true" class="fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full">
<div class="relative w-full max-w-2xl max-h-full">
<div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
<div class="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600">
<h3 id="story-modal-title" class="text-xl font-semibold text-gray-900 dark:text-white">
逸話詳細
</h3>
<button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="story-modal">
<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
<span class="sr-only">閉じる</span>
</button>
</div>
<div id="story-modal-content" class="p-6 space-y-6">
<!-- モーダルコンテンツはJSで動的に生成 -->
</div>
<div class="flex items-center p-6 space-x-2 border-t border-gray-200 rounded-b dark:border-gray-600">
<button data-modal-hide="story-modal" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">閉じる</button>
</div>
</div>
</div>
</div>
</div>
<!-- 多言語学習タブ -->
<div id="translate" class="tab-content">
<div class="mb-8">
<h2 class="text-2xl font-semibold mb-4">多言語教理学習</h2>
<div class="mb-6">
<label for="translate-text" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">翻訳したい天理教の教理や用語を入力してください</label>
<textarea id="translate-text" rows="4" class="block p-2.5 w-full text-base text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="例: 陽気ぐらし"></textarea>
</div>
<div class="flex flex-col md:flex-row gap-4 mb-6">
<div>
<label for="translate-source" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">元の言語</label>
<select id="translate-source" class="bg-gray-50 border border-gray-300 text-gray-900 text-base rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white">
<option value="ja">日本語</option>
<option value="en">英語</option>
<option value="zh">中国語</option>
<option value="ko">韓国語</option>
<option value="es">スペイン語</option>
<option value="pt">ポルトガル語</option>
</select>
</div>
<div>
<label for="translate-target" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">翻訳先の言語</label>
<select id="translate-target" class="bg-gray-50 border border-gray-300 text-gray-900 text-base rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white">
<option value="en">英語</option>
<option value="ja">日本語</option>
<option value="zh">中国語</option>
<option value="ko">韓国語</option>
<option value="es">スペイン語</option>
<option value="pt">ポルトガル語</option>
</select>
</div>
<div class="self-end">
<button id="translate-btn" class="tenrikyo-btn text-white font-medium rounded-lg text-base px-5 py-2.5 text-center">翻訳する</button>
</div>
</div>
<div id="translate-loading" class="hidden">
<div class="flex items-center justify-center">
<div class="animate-spin rounded-full h-10 w-10 border-b-2 border-blue-700"></div>
<span class="ml-3">翻訳中...</span>
</div>
</div>
<div id="translate-result" class="mt-6 hidden">
<div class="p-4 bg-white rounded-lg shadow dark:bg-gray-800">
<h3 class="text-xl font-medium mb-2">翻訳結果</h3>
<div id="translation-text" class="p-3 bg-gray-100 rounded dark:bg-gray-700"></div>
<div class="mt-4">
<h4 class="font-medium mb-2">教理解説</h4>
<div id="translation-explanation" class="p-3 bg-gray-100 rounded dark:bg-gray-700"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
// タブ機能
document.addEventListener('DOMContentLoaded', function() {
const tabButtons = document.querySelectorAll('.tab-btn');
const tabContents = document.querySelectorAll('.tab-content');
tabButtons.forEach(button => {
button.addEventListener('click', () => {
const target = button.getAttribute('data-tabs-target');
// アクティブなタブを非アクティブにする
tabButtons.forEach(btn => btn.classList.remove('active', 'border-blue-600', 'text-blue-600'));
tabContents.forEach(content => content.classList.remove('active'));
// クリックされたタブをアクティブにする
button.classList.add('active', 'border-blue-600', 'text-blue-600');
document.getElementById(target).classList.add('active');
});
});
// データベース初期化
initializeDatabase();
// 検索機能の初期化
initializeSearch();
// クイズ機能の初期化
initializeQuiz();
// 逸話詳細の初期化
initializeStories();
// 翻訳機能の初期化
initializeTranslation();
});
// データベース (模擬)
let database = {
kyoten: [],
ofudesaki: [],
osashizu: [],
quizzes: [],
stories: {}
};
// データベース初期化
function initializeDatabase() {
// 天理教教典のサンプルデータ
database.kyoten = [
{
id: 'kyoten1',
title: '天理教教典 第一章',
content: '天理教は、神を「天理王命（てんりおうみょう）」「元の親（もとのおや）」「月日親（つきひおや）」あるいは「をや」と呼び、この世に存在する万物を創造し、養い育ててきた親神であると教えている。'
},
{
id: 'kyoten2',
title: '天理教教典 第二章',
content: '人間創造について、天理教は次のように教えている。神は「をや」として人間を含む全ての生き物を産み育て、この世界を「陽気ぐらし」の世界とするために創造したとされる。'
},
{
id: 'kyoten3',
title: '天理教教典 第三章',
content: '天理教の根本教理として「かしもの・かりもの」の教えがある。この世の物質も、人間の肉体も、皆、親神からの「かしもの・かりもの」であり、それを自分勝手に使ってはならないという教えである。'
}
];
// おふでさきのサンプルデータ
database.ofudesaki = [
{
id: 'ofudesaki1',
part: '一号',
verse: '1-3',
content: 'このたびは どのようなことを 思うてか いづれも/＼に あいあいなれば'
},
{
id: 'ofudesaki2',
part: '三号',
verse: '47-49',
content: 'このよふの たすけ一ぢょうに なりたらば なにごともなや たのもしやなや'
},
{
id: 'ofudesaki3',
part: '六号',
verse: '90-92',
content: 'このさきは よろづたすけを はじめよと このたすけ/＼と ゆうことをきけ'
}
];
// おさしづのサンプルデータ
database.osashizu = [
{
id: 'osashizu1',
date: '明治20年6月21日',
content: 'みな/＼一れつきょうだいであるので、かたき、あだもなければ、他人もなし。'
},
{
id: 'osashizu2',
date: '明治25年7月7日',
content: 'かしもの・かりものゆえ、早よかえさんならんといちいろいろの障りが出る。'
},
{
id: 'osashizu3',
date: '明治30年10月13日',
content: 'ひのきしんは日々のこうみょう。こうみょうは光明。'
}
];
// クイズのサンプルデータ
database.quizzes = [
// 基本教理 - 初級
{
id: 'quiz1',
category: 'basic',
difficulty: 'easy',
question: '天理教で親神様を指す呼び名はどれですか？',
options: [
'天理王命（てんりおうみょう）',
'天照大神（あまてらすおおみかみ）',
'伊邪那岐（いざなぎ）',
'大黒天（だいこくてん）'
],
answer: 0,
explanation: '天理教では親神様を「天理王命（てんりおうみょう）」「元の親（もとのおや）」「月日親（つきひおや）」などと呼びます。'
},
{
id: 'quiz2',
category: 'basic',
difficulty: 'easy',
question: '天理教の開教は何年ですか？',
options: [
'1798年',
'1838年',
'1868年',
'1889年'
],
answer: 0,
explanation: '天理教は1798年（寛政10年）10月26日に、中山みきが神を憑依させられたことにより始まりました。'
},
// おふでさき - 中級
{
id: 'quiz3',
category: 'ofudesaki',
difficulty: 'medium',
question: 'おふでさきで「たすけ一条」と表現される教えの意味は何ですか？',
options: [
'一つの方法だけで人を救済すること',
'救済のための基本的な一つの方針',
'一人の人間を救うこと',
'単一の救済手段'
],
answer: 1,
explanation: '「たすけ一条」とは、人々を救うための根本的な方針・道筋のことを指します。おふでさきでは「このよふの たすけ一ぢょうに なりたらば なにごともなや たのもしやなや」と表現されています。'
},
// 教祖の生涯 - 上級
{
id: 'quiz4',
category: 'history',
difficulty: 'hard',
question: '教祖が「おさづけ」の理を授与された年はいつですか？',
options: [
'1838年',
'1848年',
'1866年',
'1881年'
],
answer: 2,
explanation: '教祖は1866年（慶応2年）に「おさづけ」の理を授与されました。この「おさづけ」は、病気平癒のためのひのきしんとして、現在も天理教の重要な儀式となっています。'
},
// おつとめと祭典 - 中級
{
id: 'quiz5',
category: 'rituals',
difficulty: 'medium',
question: '天理教の「つとめ」で使用される楽器は何ですか？',
options: [
'太鼓、笛、三味線',
'鈴、鼓、笙',
'鳴り物、手拍子、笛',
'太鼓、鉦、笛'
],
answer: 2,
explanation: '天理教のおつとめで使用される楽器は「鳴り物（てびょうし）、手拍子、笛」です。これらの楽器は十二下りのおつとめで使用されます。'
}
];
// 逸話と実践例のサンプルデータ
database.stories = {
'brotherhood': {
title: '一れつきょうだい',
content: `<p class="mb-4">天理教では、すべての人間は親神様の子どもであり、兄弟姉妹であるという「一れつきょうだい」の教えがあります。これは人種、国籍、宗教を問わず、すべての人が平等であることを示しています。</p>
<p class="mb-4">おさしづには「みな/＼一れつきょうだいであるので、かたき、あだもなければ、他人もなし。」（明治20年6月21日）と記されています。</p>
<h4 class="text-lg font-semibold mb-2">逸話：国際救援活動</h4>
<p class="mb-4">1995年の阪神・淡路大震災では、天理教は「一れつきょうだい」の精神に基づき、被災地での炊き出しや救援活動を行いました。また、2011年の東日本大震災でも同様の支援活動が行われました。</p>
<h4 class="text-lg font-semibold mb-2">現代での実践</h4>
<p>今日でも、天理教の信者は日常生活の中で「一れつきょうだい」の精神を実践するよう努めています。例えば、困っている人を見かけたら助ける、国際交流活動に参加する、差別や偏見をなくすために行動するなど、様々な形で実践されています。</p>`,
imageDesc: '多様な人々が手をつなぎ輪になっている様子'
},
'hinokishin': {
title: 'ひのきしん',
content: `<p class="mb-4">「ひのきしん」とは、親神様への感謝の気持ちを表すために行う無償の奉仕活動です。「日々のこうみょう（光明）」を意味し、日々の生活の中で他者のために尽くす行為を指します。</p>
<p class="mb-4">おさしづには「ひのきしんは日々のこうみょう。こうみょうは光明。」（明治30年10月13日）と記されています。</p>
<h4 class="text-lg font-semibold mb-2">逸話：道の清掃</h4>
<p class="mb-4">ある信者は毎朝、家の前の道路だけでなく、町内の公共の場所も掃除することを日課としていました。ある日、近所の人がその姿を見て「なぜ自分の家の前だけでなく、町内まで掃除するのか」と尋ねると、その信者は「これは親神様への感謝のひのきしんです」と答えました。その後、その近所の人も一緒に掃除をするようになり、やがて町内全体が美しく保たれるようになったという話があります。</p>
<h4 class="text-lg font-semibold mb-2">現代での実践</h4>
<p>現代では、地域の清掃活動、災害復興支援、福祉施設での奉仕活動など、様々な形でひのきしんが実践されています。天理教本部では毎月26日を「ひのきしんデー」と定め、全国各地で様々なひのきしん活動が行われています。</p>`,
imageDesc: '地域清掃活動に取り組む人々の様子'
},
'tasuke': {
title: 'たすけ一条',
content: `<p class="mb-4">「たすけ一条」とは、天理教の救済の基本的な道筋を指す言葉です。人間を苦しみから救い、陽気ぐらしへと導くための教えです。</p>
<p class="mb-4">おふでさきには「このよふの たすけ一ぢょうに なりたらば なにごともなや たのもしやなや」（三号47-49）と記されています。</p>
<h4 class="text-lg font-semibold mb-2">逸話：病気平癒の事例</h4>
<p class="mb-4">ある人が重い病気で寝たきりになっていました。医師からも回復は難しいと告げられていましたが、知人の勧めで天理教の「おさづけ」を受けることになりました。「おさづけ」を受け、教えに従って生活態度を改め、ひのきしんに励むうちに、徐々に健康を取り戻したという事例があります。</p>
<h4 class="text-lg font-semibold mb-2">現代での実践</h4>
<p>現代では、病気や悩みを抱える人々に対して「おさづけ」を取り次ぐだけでなく、精神的なサポートや生活支援など、総合的な「たすけ」の活動が行われています。また、国内外の災害時には救援活動を通じて「たすけ」の精神を実践しています。</p>`,
imageDesc: '病床での祈りの様子'
},
'kashimono': {
title: 'かしもの・かりもの',
content: `<p class="mb-4">「かしもの・かりもの」とは、私たちの身体や財産、才能などすべてが親神様から借りているものであり、自分勝手に使うものではないという教えです。</p>
<p class="mb-4">おさしづには「かしもの・かりものゆえ、早よかえさんならんといちいろいろの障りが出る。」（明治25年7月7日）と記されています。</p>
<h4 class="text-lg font-semibold mb-2">逸話：心の転換</h4>
<p class="mb-4">ある成功した実業家が重い病気にかかりました。彼は自分の才能や財産はすべて自分の力で得たものだと思っていましたが、病気をきっかけに天理教の教えに触れ、すべては親神様からの「かしもの・かりもの」であることを知りました。その後、彼は回復し、感謝の気持ちを持って社会貢献活動に力を入れるようになったという話があります。</p>
<h4 class="text-lg font-semibold mb-2">現代での実践</h4>
<p>現代では、自分の身体を大切にするため、健康的な生活習慣を心がける、自然環境を保全する活動に参加する、持っている才能や財産を社会のために役立てるなど、様々な形で「かしもの・かりもの」の教えが実践されています。</p>`,
imageDesc: '開いた手のひらに置かれた小さな苗木'
},
'oyaheart': {
title: 'をやの心',
content: `<p class="mb-4">「をやの心」とは、親神様が人間をわが子のように愛し、陽気に暮らしてほしいと願う心のことです。天理教ではこの「をやの心」に沿って生きることが大切だと教えています。</p>
<p class="mb-4">おふでさきには親神の意図として「だれ一人望まないとは言わん」と記されています。</p>
<h4 class="text-lg font-semibold mb-2">逸話：教祖の生涯から</h4>
<p class="mb-4">教祖の中山みきは、苦しんでいる人々を「かわいそうだから助けてやりたい」という「をやの心」で接し、多くの人々を救いました。ある時、貧しい家庭の子どもが病気になった時、教祖は自らの食事を減らしてでもその家族を助けたという話が伝わっています。</p>
<h4 class="text-lg font-semibold mb-2">現代での実践</h4>
<p>現代では、困っている人に手を差し伸べる、親としての責任を果たす、世界平和のために活動するなど、「をやの心」に沿った生き方が実践されています。天理教の信者たちは日々の生活の中で「をやの心」を実践するよう努めています。</p>`,
imageDesc: '親が子を優しく抱きしめている様子'
},
'yokigurashi': {
title: '陽気ぐらし',
content: `<p class="mb-4">「陽気ぐらし」とは、天理教が目指す理想の生き方であり、親神様の願いです。みんなが互いに助け合い、笑顔で楽しく暮らす世界を指します。</p>
<p class="mb-4">おふでさきには「陽気ぐらしせよ」という教えが繰り返し説かれています。</p>
<h4 class="text-lg font-semibold mb-2">逸話：村の再生</h4>
<p class="mb-4">かつて対立や争いが絶えなかったある村に、天理教の信者が移り住みました。その信者は「陽気ぐらし」の教えを実践し、村人たちと協力して様々な問題を解決していきました。やがて村は平和になり、人々が笑顔で暮らせるようになったという話があります。</p>
<h4 class="text-lg font-semibold mb-2">現代での実践</h4>
<p>現代では、家庭内での円満な関係づくり、職場や地域社会での協力関係の構築、国際平和活動への参加など、様々なレベルで「陽気ぐらし」の実現に向けた取り組みが行われています。天理教の信者は、日々の生活の中で「陽気ぐらし」を体現するよう努めています。</p>`,
imageDesc: '様々な年齢や背景の人々が集まり、笑顔で交流している様子'
}
};
}
// 検索機能の初期化
function initializeSearch() {
const searchBtn = document.getElementById('search-btn');
const searchInput = document.getElementById('search-input');
const searchSource = document.getElementById('search-source');
const searchResults = document.getElementById('search-results');
searchBtn.addEventListener('click', () => {
const keyword = searchInput.value.trim();
const source = searchSource.value;
if (!keyword) {
searchResults.innerHTML = '<div class="text-center text-red-500">検索キーワードを入力してください</div>';
return;
}
// 検索処理
let results = [];
if (source === 'all' || source === 'kyoten') {
const kyotenResults = database.kyoten.filter(item =>
item.content.includes(keyword) || item.title.includes(keyword)
);
results = results.concat(kyotenResults.map(item => ({...item, source: '天理教教典'})));
}
if (source === 'all' || source === 'ofudesaki') {
const ofudesakiResults = database.ofudesaki.filter(item =>
item.content.includes(keyword) || item.part.includes(keyword)
);
results = results.concat(ofudesakiResults.map(item => ({...item, source: 'おふでさき'})));
}
if (source === 'all' || source === 'osashizu') {
const osashizuResults = database.osashizu.filter(item =>
item.content.includes(keyword) || item.date.includes(keyword)
);
results = results.concat(osashizuResults.map(item => ({...item, source: 'おさしづ'})));
}
// 結果表示
if (results.length > 0) {
searchResults.innerHTML = `<div class="mb-4">「${keyword}」の検索結果: ${results.length}件</div>`;
results.forEach(result => {
const resultItem = document.createElement('div');
resultItem.className = 'mb-6 p-4 bg-white rounded-lg shadow dark:bg-gray-800 dark:border-gray-700';
let title = '';
let content = '';
if (result.source === '天理教教典') {
title = result.title;
content = result.content;
} else if (result.source === 'おふでさき') {
title = `おふでさき ${result.part} ${result.verse}`;
content = result.content;
} else if (result.source === 'おさしづ') {
title = `おさしづ ${result.date}`;
content = result.content;
}
// キーワードをハイライト
content = content.replace(new RegExp(keyword, 'g'), `<span class="bg-yellow-200 dark:bg-yellow-700">${keyword}</span>`);
resultItem.innerHTML = `
<div class="text-sm text-blue-600 dark:text-blue-400 mb-1">${result.source}</div>
<h3 class="text-xl font-semibold mb-2">${title}</h3>
<p>${content}</p>
`;
searchResults.appendChild(resultItem);
});
} else {
searchResults.innerHTML = `<div class="text-center">「${keyword}」に一致する結果はありませんでした。</div>`;
}
});
// Enterキーでも検索できるようにする
searchInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
searchBtn.click();
}
});
}
// クイズ機能の初期化
function initializeQuiz() {
const startQuizBtn = document.getElementById('start-quiz-btn');
const quizCategory = document.getElementById('quiz-category');
const quizDifficulty = document.getElementById('quiz-difficulty');
const quizContainer = document.getElementById('quiz-container');
const quizQuestion = document.getElementById('quiz-question');
const quizOptions = document.getElementById('quiz-options');
const quizFeedback = document.getElementById('quiz-feedback');
const quizNextBtn = document.getElementById('quiz-next-btn');
const quizFinishBtn = document.getElementById('quiz-finish-btn');
const quizResults = document.getElementById('quiz-results');
const quizScore = document.getElementById('quiz-score').querySelector('span');
const quizSummary = document.getElementById('quiz-summary');
const quizRestartBtn = document.getElementById('quiz-restart-btn');
const quizProgressBar = document.getElementById('quiz-progress-bar');
let currentQuizzes = [];
let currentQuizIndex = 0;
let correctAnswers = 0;
let userAnswers = [];
startQuizBtn.addEventListener('click', () => {
const category = quizCategory.value;
const difficulty = quizDifficulty.value;
// クイズをフィルタリング
currentQuizzes = database.quizzes.filter(quiz =>
(category === 'all' || quiz.category === category) &&
(difficulty === 'all' || quiz.difficulty === difficulty)
);
if (currentQuizzes.length === 0) {
alert('該当するクイズがありません。他のカテゴリーや難易度を選択してください。');
return;
}
// クイズをシャッフル
currentQuizzes = shuffleArray(currentQuizzes);
// 最大5問まで
if (currentQuizzes.length > 5) {
currentQuizzes = currentQuizzes.slice(0, 5);
}
currentQuizIndex = 0;
correctAnswers = 0;
userAnswers = [];
// クイズを表示
quizContainer.classList.remove('hidden');
quizResults.classList.add('hidden');
showQuiz(currentQuizIndex);
});
quizNextBtn.addEventListener('click', () => {
currentQuizIndex++;
if (currentQuizIndex < currentQuizzes.length) {
showQuiz(currentQuizIndex);
} else {
showResults();
}
});
quizFinishBtn.addEventListener('click', () => {
showResults();
});
quizRestartBtn.addEventListener('click', () => {
startQuizBtn.click();
});
function showQuiz(index) {
const quiz = currentQuizzes[index];
// プログレスバーを更新
const progress = ((index + 1) / currentQuizzes.length) * 100;
quizProgressBar.style.width = `${progress}%`;
// 質問を表示
quizQuestion.innerHTML = `<h3 class="text-xl font-medium mb-4">問題 ${index + 1}/${currentQuizzes.length}</h3>
<p class="text-lg">${quiz.question}</p>`;
// 選択肢を表示
quizOptions.innerHTML = '';
quiz.options.forEach((option, optionIndex) => {
const optionElement = document.createElement('div');
optionElement.className = 'quiz-option p-4 bg-white border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700';
optionElement.innerHTML = `
<div class="flex items-center">
<div class="flex items-center justify-center w-6 h-6 mr-3 rounded-full border border-gray-400 dark:border-gray-600 text-xs">${String.fromCharCode(65 + optionIndex)}</div>
<div>${option}</div>
</div>
`;
optionElement.addEventListener('click', () => {
// 選択された答えを記録
userAnswers[index] = optionIndex;
// すべての選択肢のスタイルをリセット
document.querySelectorAll('.quiz-option').forEach(opt => {
opt.classList.remove('correct', 'incorrect', 'border-blue-500', 'bg-blue-50', 'dark:bg-blue-900', 'dark:border-blue-800');
});
// 選択された選択肢のスタイルを変更
optionElement.classList.add('border-blue-500', 'bg-blue-50', 'dark:bg-blue-900', 'dark:border-blue-800');
// 正解かどうかチェック
if (optionIndex === quiz.answer) {
correctAnswers++;
optionElement.classList.add('correct');
quizFeedback.innerHTML = `<div class="p-4 text-green-800 bg-green-100 rounded-lg dark:bg-green-900 dark:text-green-300">
<div class="flex items-center mb-2">
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
</svg>
<span class="font-medium">正解です！</span>
</div>
<p>${quiz.explanation}</p>
</div>`;
} else {
optionElement.classList.add('incorrect');
quizFeedback.innerHTML = `<div class="p-4 text-red-800 bg-red-100 rounded-lg dark:bg-red-900 dark:text-red-300">
<div class="flex items-center mb-2">
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
</svg>
<span class="font-medium">不正解です</span>
</div>
<p>正解は「${quiz.options[quiz.answer]}」です。</p>
<p class="mt-2">${quiz.explanation}</p>
</div>`;
// 正解の選択肢を強調表示
document.querySelectorAll('.quiz-option')[quiz.answer].classList.add('correct');
}
quizFeedback.classList.remove('hidden');
// 次の問題ボタンを表示
if (index < currentQuizzes.length - 1) {
quizNextBtn.classList.remove('hidden');
quizFinishBtn.classList.add('hidden');
} else {
quizNextBtn.classList.add('hidden');
quizFinishBtn.classList.remove('hidden');
}
});
quizOptions.appendChild(optionElement);
});
// フィードバックと次の問題ボタンを非表示
quizFeedback.classList.add('hidden');
quizNextBtn.classList.add('hidden');
quizFinishBtn.classList.add('hidden');
}
function showResults() {
quizContainer.classList.add('hidden');
quizResults.classList.remove('hidden');
// スコアを計算
const scorePercentage = Math.round((correctAnswers / currentQuizzes.length) * 100);
quizScore.textContent = scorePercentage;
// 結果サマリーを表示
quizSummary.innerHTML = '';
currentQuizzes.forEach((quiz, index) => {
const userAnswer = userAnswers[index] !== undefined ? quiz.options[userAnswers[index]] : '未回答';
const isCorrect = userAnswers[index] === quiz.answer;
const summaryItem = document.createElement('div');
summaryItem.className = `mb-4 p-3 rounded-lg ${isCorrect ? 'bg-green-100 dark:bg-green-900' : 'bg-red-100 dark:bg-red-900'}`;
summaryItem.innerHTML = `
<div class="flex items-center mb-2">
<span class="font-medium">問題 ${index + 1}: ${isCorrect ? '正解' : '不正解'}</span>
</div>
<p class="mb-1">${quiz.question}</p>
<p class="mb-1"><strong>あなたの回答:</strong> ${userAnswer}</p>
<p><strong>正解:</strong> ${quiz.options[quiz.answer]}</p>
`;
quizSummary.appendChild(summaryItem);
});
}
// 配列をシャッフルする関数
function shuffleArray(array) {
const newArray = [...array];
for (let i = newArray.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[newArray[i], newArray[j]] = [newArray[j], newArray[i]];
}
return newArray;
}
}
// 逸話詳細の初期化
function initializeStories() {
const storyDetailBtns = document.querySelectorAll('.story-detail-btn');
const storyModal = document.getElementById('story-modal');
const storyModalTitle = document.getElementById('story-modal-title');
const storyModalContent = document.getElementById('story-modal-content');
const modalCloseButtons = document.querySelectorAll('[data-modal-hide="story-modal"]');
storyDetailBtns.forEach(btn => {
btn.addEventListener('click', () => {
const storyId = btn.getAttribute('data-story-id');
const story = database.stories[storyId];
if (story) {
storyModalTitle.textContent = story.title;
// 画像の生成（実際はプログラムで生成する代わりに説明テキストを表示）
storyModalContent.innerHTML = `
<div class="bg-gray-200 dark:bg-gray-600 p-4 mb-4 rounded-lg text-center">
<p class="text-gray-700 dark:text-gray-300">[イメージ: ${story.imageDesc}]</p>
</div>
${story.content}
`;
// Flowbiteのモーダルを手動でオープン
const targetModal = document.getElementById(storyModal.getAttribute('id'));
const options = {
onShow: () => {
targetModal.classList.remove('hidden');
},
onHide: () => {
targetModal.classList.add('hidden');
}
};
const modal = new window.Flowbite.Modal(targetModal, options);
modal.show();
}
});
});
// モーダルクローズボタンの処理
modalCloseButtons.forEach(btn => {
btn.addEventListener('click', () => {
const targetModal = document.getElementById(btn.getAttribute('data-modal-hide'));
const options = {
onHide: () => {
targetModal.classList.add('hidden');
}
};
const modal = new window.Flowbite.Modal(targetModal, options);
modal.hide();
});
});
}
// 翻訳機能の初期化
function initializeTranslation() {
const translateBtn = document.getElementById('translate-btn');
const translateText = document.getElementById('translate-text');
const translateSource = document.getElementById('translate-source');
const translateTarget = document.getElementById('translate-target');
const translateLoading = document.getElementById('translate-loading');
const translateResult = document.getElementById('translate-result');
const translationText = document.getElementById('translation-text');
const translationExplanation = document.getElementById('translation-explanation');
translateBtn.addEventListener('click', async () => {
const text = translateText.value.trim();
const source = translateSource.value;
const target = translateTarget.value;
if (!text) {
alert('翻訳するテキストを入力してください');
return;
}
// ローディング表示
translateLoading.classList.remove('hidden');
translateResult.classList.add('hidden');
try {
// Claude-3.7-Sonnetを使用して翻訳を行う
const translationHandler = "translation-handler";
// ハンドラを登録
window.Poe.registerHandler(translationHandler, (result, context) => {
if (result.status === "complete" || result.status === "error") {
translateLoading.classList.add('hidden');
if (result.status === "error") {
translationText.textContent = "翻訳中にエラーが発生しました。";
translationExplanation.textContent = "もう一度お試しください。";
translateResult.classList.remove('hidden');
return;
}
try {
// 応答がJSONかどうかチェック
const response = JSON.parse(result.responses[0].content);
translationText.textContent = response.translation || "翻訳が提供されませんでした。";
translationExplanation.textContent = response.explanation || "説明が提供されませんでした。";
} catch (e) {
// JSONでない場合は通常のテキスト応答と見なす
const content = result.responses[0].content;
const parts = content.split("### 教理解説");
if (parts.length > 1) {
translationText.textContent = parts[0].replace("### 翻訳結果", "").trim();
translationExplanation.textContent = parts[1].trim();
} else {
translationText.textContent = content;
translationExplanation.textContent = "説明が提供されませんでした。";
}
}
translateResult.classList.remove('hidden');
}
});
// プロンプトを構築
const prompt = `@Claude-3.7-Sonnet 以下の天理教関連のテキストを${getLanguageName(source)}から${getLanguageName(target)}に翻訳してください。翻訳と併せて、天理教の教理についての簡単な解説も提供してください。
テキスト: "${text}"
応答は次の形式で返してください。Markdownの見出しを使用してください。
### 翻訳結果
[翻訳されたテキスト]
### 教理解説
[この用語や概念に関する天理教の教理についての簡潔な解説]
Provide ONLY raw JSON in your response with no explanations, additional text, or code block formatting (no \`\`\`):
{
"translation": "翻訳結果をここに",
"explanation": "教理解説をここに"
}`;
// 翻訳リクエスト
await window.Poe.sendUserMessage(prompt, {
handler: translationHandler,
stream: false,
openChat: false
});
} catch (error) {
translateLoading.classList.add('hidden');
alert(`エラーが発生しました: ${error.message}`);
}
});
// 言語コードから言語名を取得する関数
function getLanguageName(code) {
const languages = {
'ja': '日本語',
'en': '英語',
'zh': '中国語',
'ko': '韓国語',
'es': 'スペイン語',
'pt': 'ポルトガル語'
};
return languages[code] || code;
}
}
</script>
</body>
</html>
```
このアプリでは以下の機能を実装しました：
1. **全文検索機能**：
- 天理教教典、おふでさき、おさしづの文献からキーワード検索ができます
- 検索結果ではキーワードをハイライト表示します
2. **教理クイズ**：
- 基本教理、おふでさき、教祖の生涯、おつとめと祭典のカテゴリー
- 難易度別（初級・中級・上級）のクイズを提供
- クイズ結果のフィードバックと解説を表示
3. **逸話と実践例**：
- 一れつきょうだい、ひのきしん、たすけ一条など天理教の主要な教えについての逸話を紹介
- モーダルウィンドウで詳細な説明を表示
4. **多言語学習**：
- Poe APIを使用して、天理教の教えを日本語から英語、中国語、韓国語などに翻訳
- Claude-3.7-Sonnetを活用して教理の解説も多言語で提供
アプリはレスポンシブデザインで、スマートフォンからデスクトップまで様々な画面サイズで適切に表示されます。また、ユーザーのシステム設定に応じてダークモード/ライトモードにも対応しています。
天理教の特色である緑色（#006934）をアクセントカラーとして使用し、ユーザーフレンドリーなインターフェースを心がけました。
こんなに長いコーディングをわずか１分少々ですから、どんだけ～って感じですが、エラーがでました。
エラー: Modal with id story-modal has not been initialized. Please initialize it using the data-modal-target attribute.
エラー: Modal with id story-modal has not been initialized. Please initialize it using the data-modal-target attribute.
Flowbiteのモーダル初期化に関するエラーを修正します。このエラーは、モーダルが適切に初期化されていないために発生しています。
コード変更計画モーダルの初期化方法を修正します
data-modal-target と data-modal-toggle 属性を正しく設定
モーダル開閉のイベントハンドラを更新
既存のモーダル関連のHTMLとJavaScriptを更新します
tool_use_id=toolu_vrtx_01T2xnemVW6upZt7JxiadZpn tool_name=replace_code input={"target_code_block_id": "tenrikyoApp", "old_str": " <button class=\"story-detail-btn text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-500 dark:hover:bg-blue-600 dark:focus:ring-blue-800\" data-story-id=\"brotherhood\">\n 詳細を見る\n </button>", "new_str": " <button data-modal-target=\"story-modal\" data-modal-toggle=\"story-modal\" class=\"story-detail-btn text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-500 dark:hover:bg-blue-600 dark:focus:ring-blue-800\" data-story-id=\"brotherhood\">\n 詳細を見る\n </button>", "new_code_block_id": "tenrikyoAppFixed"}
tool_use_id=toolu_vrtx_01NW1EEL1uUje73KZ5zqKXaY tool_name=replace_code input={"target_code_block_id": "tenrikyoAppFixed", "old_str": " <button class=\"story-detail-btn text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-500 dark:hover:bg-blue-600 dark:focus:ring-blue-800\" data-story-id=\"hinokishin\">\n 詳細を見る\n </button>", "new_str": " <button data-modal-target=\"story-modal\" data-modal-toggle=\"story-modal\" class=\"story-detail-btn text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-500 dark:hover:bg-blue-600 dark:focus:ring-blue-800\" data-story-id=\"hinokishin\">\n 詳細を見る\n </button>", "new_code_block_id": "tenrikyoAppFixed2"}
残念ながら、無料利用が為のポイント無くなり、ここで回答が止まりました。明日の夕方には、また使えると思いますが・・・ 出来上がりが楽しみです。