最新ブログ記事
新しい記事を投稿
ファイル管理
ファイルアップロード
アップロード済みファイル
// ブログ記事のデータ
let blogPosts = [
{
id: 1,
title: "ブログを始めました",
content: "今日からブログを始めることにしました。日々の思考や体験を記録していきたいと思います。",
date: "2024-07-15"
},
{
id: 2,
title: "Webデザインについて",
content: "最近のWebデザインのトレンドについて考えてみました。ユーザビリティとデザインの美しさのバランスが重要ですね。",
date: "2024-07-14"
}
];
// ファイルのデータ
let uploadedFiles = [];
// ブログ記事を表示
function displayBlogPosts() {
const blogGrid = document.getElementById('blogGrid');
blogGrid.innerHTML = '';
blogPosts.forEach(post => {
const blogCard = document.createElement('div');
blogCard.className = 'blog-card';
blogCard.innerHTML = `
${post.title}
${post.date}
${post.content.substring(0, 100)}...
`;
blogGrid.appendChild(blogCard);
});
}
// ファイルリストを表示
function displayFileList() {
const fileList = document.getElementById('fileList');
fileList.innerHTML = '';
if (uploadedFiles.length === 0) {
fileList.innerHTML = '
アップロードされたファイルはありません
';
return;
}
uploadedFiles.forEach((file, index) => {
const fileItem = document.createElement('div');
fileItem.className = 'file-item';
fileItem.innerHTML = `
`;
fileList.appendChild(fileItem);
});
}
// ファイルサイズのフォーマット
function formatFileSize(bytes) {
if (bytes === 0) return '0 Bytes';
const k = 1024;
const sizes = ['Bytes', 'KB', 'MB', 'GB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}
// ファイルを削除
function deleteFile(index) {
uploadedFiles.splice(index, 1);
displayFileList();
}
// ブログフォームの送信
document.getElementById('blogForm').addEventListener('submit', function(e) {
e.preventDefault();
const title = document.getElementById('blogTitle').value;
const content = document.getElementById('blogContent').value;
if (title && content) {
const newPost = {
id: blogPosts.length + 1,
title: title,
content: content,
date: new Date().toISOString().split('T')[0]
};
blogPosts.unshift(newPost);
displayBlogPosts();
// フォームをリセット
document.getElementById('blogTitle').value = '';
document.getElementById('blogContent').value = '';
alert('ブログ記事が投稿されました!');
}
});
// ファイルアップロード
document.getElementById('fileInput').addEventListener('change', function(e) {
const files = Array.from(e.target.files);
files.forEach(file => {
uploadedFiles.push(file);
});
displayFileList();
alert(`${files.length}個のファイルがアップロードされました!`);
});
// スムーズスクロール
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
target.scrollIntoView({
behavior: 'smooth'
});
});
});
// 初期表示
displayBlogPosts();
displayFileList();