ぜひ引用してね
<!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;
}
#dictionary {
max-width: 600px;
margin: 20px auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 4px;
}
.word-entry {
margin-bottom: 20px;
}
.word-entry h2 {
margin: 0;
color: #00aa00;
}
.word-entry p {
margin: 5px 0;
}
.buttons {
display: flex;
justify-content: space-between;
}
.buttons button {
background-color: #00aa00;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
}
.buttons button:disabled {
background-color: #ccc;
cursor: not-allowed;
}
#dictionary-info {
margin-bottom: 20px;
text-align: center;
}
</style>
</head>
<body>
<div id="dictionary">
<div id="dictionary-info">
<p id="dictionary-description">これはチシア語の基本的な単語を集めた辞書です。</p>
<p id="current-status">現在の単語数: <span id="word-count"></span></p>
<p id="page-status">現在のページ: <span id="current-page"></span> / <span id="total-pages"></span></p>
<input type="text" id="searchInput" placeholder="単語を検索">
<button id="searchButton" onclick="searchDictionary()">検索</button>
</div>
<div id="word-container"></div>
<div class="buttons">
<button id="prevButton" onclick="showPreviousPage()">前へ</button>
<button id="nextButton" onclick="showNextPage()">次へ</button>
</div>
</div>
<script>
let dictionaryData = [];
let filteredData = [];
let currentPage = 0;
const wordsPerPage = 10;
async function fetchDictionaryData() {
try {
const response = await fetch('dictionary.json');
dictionaryData = await response.json();
filteredData = dictionaryData;
updateDictionaryInfo();
displayDictionary();
} catch (error) {
console.error('Error fetching dictionary data:', error);
}
}
function updateDictionaryInfo() {
document.getElementById('word-count').textContent = filteredData.length;
document.getElementById('total-pages').textContent = Math.ceil(filteredData.length / wordsPerPage);
}
function displayDictionary() {
const wordContainer = document.getElementById('word-container');
wordContainer.innerHTML = '';
const start = currentPage * wordsPerPage;
const end = start + wordsPerPage;
const currentWords = filteredData.slice(start, end);
currentWords.forEach(word => {
const wordEntry = document.createElement('div');
wordEntry.className = 'word-entry';
const wordTitle = document.createElement('h2');
wordTitle.textContent = word.tisian + ' - ' + word.japanese;
wordEntry.appendChild(wordTitle);
const wordDefinition = document.createElement('p');
wordDefinition.textContent = '定義: ' + word.definition;
wordEntry.appendChild(wordDefinition);
const wordExamples = document.createElement('p');
wordExamples.textContent = '例: ' + word.examples.join(', ');
wordEntry.appendChild(wordExamples);
wordContainer.appendChild(wordEntry);
});
document.getElementById('prevButton').disabled = currentPage === 0;
document.getElementById('nextButton').disabled = end >= filteredData.length;
document.getElementById('current-page').textContent = currentPage + 1;
}
function showPreviousPage() {
if (currentPage > 0) {
currentPage--;
displayDictionary();
}
}
function showNextPage() {
if ((currentPage + 1) * wordsPerPage < filteredData.length) {
currentPage++;
displayDictionary();
}
}
function searchDictionary() {
const searchInput = document.getElementById('searchInput').value.toLowerCase();
filteredData = dictionaryData.filter(word => word.tisian.toLowerCase().startsWith(searchInput));
currentPage = 0;
updateDictionaryInfo();
displayDictionary();
}
window.onload = fetchDictionaryData;
</script>
</body>
</html>
自分の言語の例
[
{"tisian": "saklon", "japanese": "私", "definition": "私を指す言葉", "examples": ["saklonは私"]},
{"tisian": "za", "japanese": "は", "definition": "主語を強調する助詞", "examples": ["saklon za tista"]},
{"tisian": "yan", "japanese": "リンゴ", "definition": "果物のリンゴ", "examples": ["yanが赤い"]},
{"tisian": "taf", "japanese": "を", "definition": "目的語を示す助詞", "examples": ["yan taf tista"]},
{"tisian": "tista", "japanese": "食べる", "definition": "食べる動作を表す動詞", "examples": ["yan taf tista"]},
{"tisian": "sas", "japanese": "過去形", "definition": "動詞の過去形を示す", "examples": ["tista sas"]},
{"tisian": "tend", "japanese": "現在形", "definition": "動詞の現在形を示す", "examples": ["tista tend"]},
{"tisian": "sak", "japanese": "命令形", "definition": "動詞の命令形を示す", "examples": ["tista sak"]},
{"tisian": "xesta", "japanese": "月", "definition": "月を表す", "examples": ["xestaが明るい"]},
{"tisian": "zafta", "japanese": "日", "definition": "日を表す", "examples": ["zaftaが眩しい"]},
{"tisian": "zak", "japanese": "火", "definition": "火を表す", "examples": ["zakが燃える"]},
{"tisian": "zal", "japanese": "水", "definition": "水を表す", "examples": ["zalが流れる"]},
{"tisian": "yaf", "japanese": "草", "definition": "草を表す", "examples": ["yafが生える"]},
{"tisian": "kafte", "japanese": "木", "definition": "木を表す", "examples": ["kafteが立つ"]},
{"tisian": "yan", "japanese": "金", "definition": "金属の金を表す", "examples": ["yanが光る"]},
{"tisian": "yatok", "japanese": "土", "definition": "土を表す", "examples": ["yatokが固い"]},
{"tisian": "tend", "japanese": "串", "definition": "串を表す", "examples": ["tendが刺さる"]},
{"tisian": "yag", "japanese": "山", "definition": "山を表す", "examples": ["yagが高い"]},
{"tisian": "yatok", "japanese": "林", "definition": "林を表す", "examples": ["yatokが広がる"]},
{"tisian": "saklon", "japanese": "森", "definition": "森を表す", "examples": ["saklonが深い"]}
]
Top comments (0)