ローカル環境のリンク集を作成するためのHTMLファイルと、それに埋め込むCSSとJavaScriptのサンプルを提供します。このリンク集はカレンダー、プルダウンリスト、ツリービューを配置し、カレンダーとリストの選択によって動的にツリービューとリンク先が変更されるように設計されています。
以下はその実装例です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>リンク集</title>
<style>
/* CSSの内容をここに追加します */
body {
font-family: Arial, sans-serif;
margin: 20px;
}
#calendar {
margin-bottom: 20px;
}
#dropdown {
margin-bottom: 20px;
}
#treeview {
list-style-type: none;
padding-left: 20px;
}
.tree-item {
cursor: pointer;
margin: 5px 0;
}
.tree-item ul {
list-style-type: none;
padding-left: 20px;
}
/* 背景色用のクラス */
.category1 {
background-color: lightblue;
}
.category2 {
background-color: lightgreen;
}
.category3 {
background-color: lightyellow;
}
</style>
</head>
<body>
<h1>リンク集</h1>
<input type="date" id="calendar">
<select id="dropdown">
<option value="category1">カテゴリー1</option>
<option value="category2">カテゴリー2</option>
<option value="category3">カテゴリー3</option>
</select>
<ul id="treeview">
<!-- ツリービューの内容がここに動的に追加されます -->
</ul>
<script>
document.addEventListener('DOMContentLoaded', function() {
const calendar = document.getElementById('calendar');
const dropdown = document.getElementById('dropdown');
const treeview = document.getElementById('treeview');
// 今日の日付を取得し、カレンダーの初期値に設定
const today = new Date().toISOString().split('T')[0];
calendar.value = today;
const data = {
"category1": {
"2024-05-29": [
{
"title": "リンク1-1",
"details": ["詳細1-1-1", "詳細1-1-2"]
},
{
"title": "リンク1-2",
"details": ["詳細1-2-1", "詳細1-2-2"]
}
],
"2024-05-30": [
{
"title": "リンク1-3",
"details": ["詳細1-3-1", "詳細1-3-2"]
},
{
"title": "リンク1-4",
"details": ["詳細1-4-1", "詳細1-4-2"]
}
]
},
"category2": {
"2024-05-29": [
{
"title": "リンク2-1",
"details": ["詳細2-1-1", "詳細2-1-2"]
},
{
"title": "リンク2-2",
"details": ["詳細2-2-1", "詳細2-2-2"]
}
],
"2024-05-30": [
{
"title": "リンク2-3",
"details": ["詳細2-3-1", "詳細2-3-2"]
},
{
"title": "リンク2-4",
"details": ["詳細2-4-1", "詳細2-4-2"]
}
]
},
"category3": {
"2024-05-29": [
{
"title": "リンク3-1",
"details": ["詳細3-1-1", "詳細3-1-2"]
},
{
"title": "リンク3-2",
"details": ["詳細3-2-1", "詳細3-2-2"]
}
],
"2024-05-30": [
{
"title": "リンク3-3",
"details": ["詳細3-3-1", "詳細3-3-2"]
},
{
"title": "リンク3-4",
"details": ["詳細3-4-1", "詳細3-4-2"]
}
]
}
};
function updateTreeview() {
const selectedDate = calendar.value;
const selectedCategory = dropdown.value;
treeview.innerHTML = '';
if (selectedDate && selectedCategory) {
const links = data[selectedCategory][selectedDate] || [];
links.forEach(link => {
const li = document.createElement('li');
li.classList.add('tree-item');
li.textContent = link.title;
const detailsUl = document.createElement('ul');
link.details.forEach(detail => {
const detailLi = document.createElement('li');
detailLi.textContent = detail;
detailsUl.appendChild(detailLi);
});
li.appendChild(detailsUl);
treeview.appendChild(li);
});
}
}
function updateBackgroundColor() {
const selectedCategory = dropdown.value;
document.body.className = selectedCategory; // クラスを変更
}
calendar.addEventListener('change', updateTreeview);
dropdown.addEventListener('change', function() {
updateTreeview();
updateBackgroundColor();
});
// 初回ロード時にツリービューと背景色を更新
updateTreeview();
updateBackgroundColor();
});
</script>
</body>
</html>
input type="date"を使用してカレンダーを表示。selectを使用してプルダウンリストを表示。ulを使用してツリービューを表示し、JavaScriptで動的に項目を追加。DOMContentLoadedイベントで初期化。この例では、リンク先のデータをJavaScriptオブジェクトとしてハードコードしています。実際の使用状況に応じて、このデータをサーバーから取得したり、より複雑なロジックを追加することができます。
修正されたコードは以下の通りです。リンクをクリックすると、デスクトップ上の特定のフォルダが開くようにしました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>リンク集</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
#calendar {
margin-bottom: 20px;
}
#dropdown {
margin-bottom: 20px;
}
#treeview {
list-style-type: none;
padding-left: 20px;
}
.tree-item {
cursor: pointer;
margin: 5px 0;
}
.tree-item ul {
list-style-type: none;
padding-left: 20px;
}
.category1 {
background-color: lightblue;
}
.category2 {
background-color: lightgreen;
}
.category3 {
background-color: lightyellow;
}
</style>
</head>
<body>
<h1>リンク集</h1>
<input type="date" id="calendar">
<select id="dropdown">
<option value="category1">カテゴリー1</option>
<option value="category2">カテゴリー2</option>
<option value="category3">カテゴリー3</option>
</select>
<ul id="treeview">
<!-- ツリービューの内容がここに動的に追加されます -->
</ul>
<script>
document.addEventListener('DOMContentLoaded', function() {
const calendar = document.getElementById('calendar');
const dropdown = document.getElementById('dropdown');
const treeview = document.getElementById('treeview');
// 今日の日付を取得し、カレンダーの初期値に設定
const today = new Date().toISOString().split('T')[0];
calendar.value = today;
const data = {
"category1": {
"2024-05-29": [
{
"title": "リンク1-1",
"details": ["詳細1-1-1", "詳細1-1-2"]
},
{
"title": "リンク1-2",
"details": ["詳細1-2-1", "詳細1-2-2"]
}
],
"2024-05-30": [
{
"title": "リンク1-3",
"details": ["詳細1-3-1", "詳細1-3-2"]
},
{
"title": "リンク1-4",
"details": ["詳細1-4-1", "詳細1-4-2"]
}
]
},
"category2": {
"2024-05-29": [
{
"title": "リンク2-1",
"details": ["詳細2-1-1", "詳細2-1-2"]
},
{
"title": "リンク2-2",
"details": ["詳細2-2-1", "詳細2-2-2"]
}
],
"2024-05-30": [
{
"title": "リンク2-3",
"details": ["詳細2-3-1", "詳細2-3-2"]
},
{
"title": "リンク2-4",
"details": ["詳細2-4-1", "詳細2-4-2"]
}
]
},
"category3": {
"2024-05-29": [
{
"title": "リンク3-1",
"details": ["詳細3-1-1", "詳細3-1-2"]
},
{
"title": "リンク3-2",
"details": ["詳細3-2-1", "詳細3-2-2"]
}
],
"2024-05-30": [
{
"title": "リンク3-3",
"details": ["詳細3-3-1", "詳細3-3-2"]
},
{
"title": "リンク3-4",
"details": ["詳細3-4-1", "詳細3-4-2"]
}
]
}
};
function updateTreeview() {
const selectedDate = calendar.value;
const selectedCategory = dropdown.value;
treeview.innerHTML = '';
if (selectedDate && selectedCategory) {
const links = data[selectedCategory][selectedDate] || [];
links.forEach(link => {
const li = document.createElement('li');
li.classList.add('tree-item');
li.textContent = link.title;
li.addEventListener('click', () => {
openFolder(selectedCategory, selectedDate, link.title.split('-')[1]);
});
const detailsUl = document.createElement('ul');
link.details.forEach(detail => {
const detailLi = document.createElement('li');
detailLi.textContent = detail;
detailsUl.appendChild(detailLi);
});
li.appendChild(detailsUl);
treeview.appendChild(li);
});
}
}
function updateBackgroundColor() {
const selectedCategory = dropdown.value;
document.body.className = selectedCategory;
}
function openFolder(category, date, number) {
const formattedDate = date.replace(/-/g, '');
const folderName = `${category}-${formattedDate}-${number}`;
// フォルダを開く処理
const fs = require('fs');
const { exec } = require('child_process');
const desktopPath = require('path').join(require('os').homedir(), 'Desktop');
exec(`explorer "${desktopPath}\\\\\\\\${folderName}"`, (error) => {
if (error) {
console.error(`フォルダを開く際にエラーが発生しました: ${error.message}`);
}
});
}
calendar.addEventListener('change', updateTreeview);
dropdown.addEventListener('change', function() {
updateTreeview();
updateBackgroundColor();
});
// 初回ロード時にツリービューと背景色を更新
updateTreeview();
updateBackgroundColor();
});
</script>
</body>
</html>
openFolder関数を呼び出して指定されたフォルダを開くようにしました。openFolder関数内で、フォルダ名を生成し、デスクトップ上の該当フォルダを開くためのコマンドを実行します。以下のホットキーを使用して次のアクションを選択できます：