<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Automation Studio</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
:root {
--primary-color: #00c7b7;
--secondary-color: #2d3436;
--background-color: #f8f9fa;
--card-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', system-ui;
}
body {
background: var(--background-color);
color: var(--secondary-color);
}
/* ヘッダー */
.dashboard-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem;
background: white;
box-shadow: var(--card-shadow);
}
.brand {
display: flex;
align-items: center;
gap: 1rem;
}
.brand-logo {
width: 40px;
height: 40px;
}
/* メインコンテンツ */
.main-container {
max-width: 1200px;
margin: 2rem auto;
padding: 0 1rem;
}
/* アプレットカード */
.applet-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 1.5rem;
margin-top: 2rem;
}
.applet-card {
background: white;
border-radius: 12px;
padding: 1.5rem;
box-shadow: var(--card-shadow);
transition: transform 0.2s;
position: relative;
}
.applet-card:hover {
transform: translateY(-5px);
}
.applet-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.toggle-switch {
position: relative;
display: inline-block;
width: 48px;
height: 24px;
}
.toggle-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
border-radius: 34px;
}
.toggle-slider:before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
border-radius: 50%;
}
input:checked + .toggle-slider {
background-color: var(--primary-color);
}
input:checked + .toggle-slider:before {
transform: translateX(24px);
}
.service-flow {
display: flex;
align-items: center;
gap: 1rem;
margin: 1.5rem 0;
}
.service-icon {
width: 48px;
height: 48px;
border-radius: 12px;
padding: 8px;
box-shadow: var(--card-shadow);
}
.divider-arrow {
flex-grow: 1;
border-top: 2px dashed #ddd;
position: relative;
}
.divider-arrow::after {
content: "➔";
position: absolute;
right: -10px;
top: -12px;
background: white;
padding: 0 4px;
color: var(--primary-color);
}
/* 作成モーダル */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
}
.modal-content {
background: white;
border-radius: 16px;
width: 90%;
max-width: 600px;
max-height: 90vh;
overflow-y: auto;
padding: 2rem;
animation: modalSlideIn 0.3s ease-out;
}
@keyframes modalSlideIn {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.service-picker {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin: 2rem 0;
}
.service-option {
text-align: center;
padding: 1rem;
border: 2px solid #eee;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
}
.service-option:hover {
border-color: var(--primary-color);
background: #f7f7f7;
}
.service-option img {
width: 64px;
height: 64px;
margin-bottom: 0.5rem;
}
/* レスポンシブデザイン */
@media (max-width: 768px) {
.applet-grid {
grid-template-columns: 1fr;
}
.service-picker {
grid-template-columns: repeat(2, 1fr);
}
}
</style>
</head>
<body>
<header class="dashboard-header">
<div class="brand">
<img src="https://img.icons8.com/color/96/automation.png" class="brand-logo" alt="Logo">
<h1>Automation Studio</h1>
</div>
<button class="create-button" onclick="openModal()">
<i class="fas fa-plus"></i> New Automation
</button>
</header>
<div class="main-container">
<div class="applet-grid">
<!-- アプレットが動的に追加されます -->
</div>
</div>
<!-- 作成モーダル -->
<div class="modal-overlay" id="modal">
<div class="modal-content">
<h2>Create New Automation</h2>
<div class="service-picker" id="triggerServices">
<!-- トリガーサービスが動的に追加されます -->
</div>
<div class="service-picker" id="actionServices">
<!-- アクションサービスが動的に追加されます -->
</div>
<div class="modal-actions">
<button class="btn-secondary" onclick="closeModal()">Cancel</button>
<button class="btn-primary" onclick="createApplet()">Create</button>
</div>
</div>
</div>
<script>
// ダミーデータ
const services = {
triggers: [
{ id: 'email', name: 'Email', icon: 'https://img.icons8.com/color/96/new-post.png' },
{ id: 'calendar', name: 'Calendar', icon: 'https://img.icons8.com/color/96/google-calendar.png' },
{ id: 'weather', name: 'Weather', icon: 'https://img.icons8.com/color/96/partly-cloudy-day.png' }
],
actions: [
{ id: 'slack', name: 'Slack', icon: 'https://img.icons8.com/color/96/slack.png' },
{ id: 'drive', name: 'Google Drive', icon: 'https://img.icons8.com/color/96/google-drive.png' },
{ id: 'notification', name: 'Notification', icon: 'https://img.icons8.com/color/96/appointment-reminders.png' }
]
};
// モーダル制御
function openModal() {
document.getElementById('modal').style.display = 'flex';
populateServices();
}
function closeModal() {
document.getElementById('modal').style.display = 'none';
}
// サービスの表示
function populateServices() {
const triggerContainer = document.getElementById('triggerServices');
const actionContainer = document.getElementById('actionServices');
triggerContainer.innerHTML = services.triggers.map(service => `
<div class="service-option" onclick="selectTrigger('${service.id}')">
<img src="${service.icon}" alt="${service.name}">
<div>${service.name}</div>
</div>
`).join('');
actionContainer.innerHTML = services.actions.map(service => `
<div class="service-option" onclick="selectAction('${service.id}')">
<img src="${service.icon}" alt="${service.name}">
<div>${service.name}</div>
</div>
`).join('');
}
// アプレット作成
let selectedTrigger = null;
let selectedAction = null;
function selectTrigger(serviceId) {
selectedTrigger = services.triggers.find(s => s.id === serviceId);
updateSelections();
}
function selectAction(serviceId) {
selectedAction = services.actions.find(s => s.id === serviceId);
updateSelections();
}
function updateSelections() {
document.querySelectorAll('.service-option').forEach(el => {
el.style.borderColor = '#eee';
});
if (selectedTrigger) {
const triggerEl = document.querySelector(`[onclick="selectTrigger('${selectedTrigger.id}')"]`);
triggerEl.style.borderColor = 'var(--primary-color)';
}
if (selectedAction) {
const actionEl = document.querySelector(`[onclick="selectAction('${selectedAction.id}')"]`);
actionEl.style.borderColor = 'var(--primary-color)';
}
}
function createApplet() {
if (!selectedTrigger || !selectedAction) return;
const appletGrid = document.querySelector('.applet-grid');
const newApplet = document.createElement('div');
newApplet.className = 'applet-card';
newApplet.innerHTML = `
<div class="applet-header">
<h3>${selectedTrigger.name} → ${selectedAction.name}</h3>
<label class="toggle-switch">
<input type="checkbox">
<span class="toggle-slider"></span>
</label>
</div>
<div class="service-flow">
<img src="${selectedTrigger.icon}" class="service-icon">
<div class="divider-arrow"></div>
<img src="${selectedAction.icon}" class="service-icon">
</div>
<p>Last triggered: Never</p>
`;
appletGrid.appendChild(newApplet);
closeModal();
selectedTrigger = null;
selectedAction = null;
}
// モーダル外をクリックで閉じる
window.onclick = function(event) {
if (event.target.classList.contains('modal-overlay')) {
closeModal();
}
}
</script>
</body>
</html>月: 2025年1月
C# スライムの攻撃
using System;
public class Program{
public static void Main(){
var random = new Random();
var dice = random.Next(1, 7);
Console.WriteLine("サイコロは" + dice);
if (dice >= 4) {
Console.WriteLine("スライムの攻撃をかわした");
} else {
Console.WriteLine("スライムから10のダメージを受けた");
}
}
}C# if文による条件分岐 比較演算子
// if文による条件分岐 比較演算子
using System;
public class Program{
public static void Main(){
var time = 12;
if(time < 12){
Console.WriteLine("午前中"); // 条件式が成立したときの処理
} else if (time == 12){
Console.WriteLine("正午");
} else if (time > 12){
Console.WriteLine("午後");
}
}
}ライブストリーミングサイト
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>疑似配信サイト - PC画面＆システム音声</title>
<style>
/* ベースリセット */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: sans-serif;
background: #f5f5f5;
color: #333;
}
header, footer {
background: #333;
color: #fff;
padding: 15px;
text-align: center;
}
header h1 {
margin: 0;
font-size: 1.5rem;
letter-spacing: 0.05em;
}
footer p {
margin: 0;
font-size: 0.9rem;
}
main {
max-width: 1200px;
margin: 20px auto;
padding: 20px;
background: #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.page-title {
text-align: center;
margin-bottom: 20px;
font-size: 1.4rem;
}
/* 2カラムレイアウト */
.container {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.video-section {
flex: 1 1 600px;
min-width: 300px;
}
.aside-section {
flex: 1 1 350px;
min-width: 300px;
background: #fafafa;
border-left: 1px solid #ccc;
padding: 10px;
}
/* 動画表示領域 */
.video-wrapper {
background: #000;
overflow: hidden;
}
.video-wrapper video {
display: block;
width: 100%;
height: auto;
background: #000;
}
.video-title {
margin: 10px 0;
font-weight: bold;
}
.video-controls {
text-align: center;
margin-top: 10px;
}
.video-controls button {
margin: 0 5px;
padding: 8px 16px;
font-size: 1rem;
cursor: pointer;
}
/* チャットUI */
.chat-section {
display: flex;
flex-direction: column;
height: 400px;
}
.chat-log {
flex: 1;
border: 1px solid #ccc;
padding: 10px;
overflow-y: auto;
margin-bottom: 10px;
background: #fff;
}
.chat-log p {
margin: 0 0 5px 0;
}
.chat-log p span.username {
font-weight: bold;
color: #3366cc;
margin-right: 5px;
}
.chat-input-area {
display: flex;
gap: 5px;
}
.chat-input-area input[type="text"] {
flex: 1;
padding: 8px;
font-size: 1rem;
}
.chat-input-area button {
padding: 8px 16px;
font-size: 1rem;
cursor: pointer;
}
/* スケジュール */
.schedule {
margin-top: 20px;
}
.schedule h2 {
font-size: 1.2rem;
margin-bottom: 10px;
}
.schedule table {
width: 100%;
border-collapse: collapse;
}
.schedule th, .schedule td {
border: 1px solid #ccc;
padding: 10px;
text-align: center;
}
.schedule th {
background: #f0f0f0;
}
.schedule tr:nth-child(even) {
background: #fafafa;
}
</style>
</head>
<body>
<!-- ヘッダー -->
<header>
<h1>My Advanced Live Streaming (Local Demo)</h1>
</header>
<!-- メインコンテンツ -->
<main>
<div class="page-title">PC画面＆システム音声をローカル再生するデモ</div>
<div class="container">
<!-- ▼ 動画エリア ▼ -->
<section class="video-section">
<div class="video-title">疑似ライブ映像</div>
<div class="video-wrapper">
<video id="liveVideo" controls autoplay></video>
</div>
<!-- ボタン類 -->
<div style="text-align: center; margin-top: 10px;">
<button id="screenShareBtn">画面共有(システム音声)</button>
<button id="cameraShareBtn">カメラ＆マイク</button>
<button id="stopBtn">停止</button>
</div>
<!-- 再生/一時停止/ミュート/全画面 -->
<div class="video-controls">
<button id="playBtn">再生</button>
<button id="pauseBtn">一時停止</button>
<button id="muteBtn">ミュート/解除</button>
<button id="fullscreenBtn">全画面</button>
</div>
<div class="schedule">
<h2>配信スケジュール（仮）</h2>
<table>
<thead>
<tr>
<th>日付</th>
<th>配信タイトル</th>
<th>開始時間</th>
<th>予定</th>
</tr>
</thead>
<tbody>
<tr>
<td>2/15</td>
<td>PC画面共有テスト</td>
<td>18:00</td>
<td>30分</td>
</tr>
<tr>
<td>2/18</td>
<td>音声ミキシング練習</td>
<td>20:00</td>
<td>1時間</td>
</tr>
<tr>
<td>2/20</td>
<td>週末雑談</td>
<td>21:30</td>
<td>2時間</td>
</tr>
</tbody>
</table>
</div>
</section>
<!-- ▼ チャットエリア ▼ -->
<aside class="aside-section">
<h2>チャット</h2>
<div class="chat-section">
<!-- チャットログ -->
<div id="chatLog" class="chat-log"></div>
<!-- 入力フォーム -->
<div class="chat-input-area">
<input type="text" id="usernameInput" placeholder="ユーザー名" />
<input type="text" id="messageInput" placeholder="メッセージを入力…" />
<button id="sendBtn">送信</button>
</div>
</div>
</aside>
</div><!-- /container -->
</main>
<!-- フッター -->
<footer>
<p>© 2025 My Advanced Live Streaming (Local Demo)</p>
</footer>
<script>
/*****************************************************************
* 1. PC画面＆システム音声 or カメラ＆マイクを取得
*****************************************************************/
const video = document.getElementById('liveVideo');
const screenShareBtn = document.getElementById('screenShareBtn');
const cameraShareBtn = document.getElementById('cameraShareBtn');
const stopBtn = document.getElementById('stopBtn');
let localStream = null;
// 画面共有 (PC画面 + システム音声)
async function startScreenShare() {
stopMedia(); // 既存ストリームを止めてから開始
try {
// getDisplayMediaで画面を共有
// audio:true -> Chromeの場合「システム音声を共有」オプションが表示される
localStream = await navigator.mediaDevices.getDisplayMedia({
video: true,
audio: true // ただしブラウザやOSによっては無視される可能性あり
});
video.srcObject = localStream;
// システム音声をモニタリングする場合、ミュートOFFにする
video.muted = false;
console.log('画面共有開始 (システム音声含む可能性)');
} catch (err) {
alert('画面共有を開始できませんでした: ' + err.message);
}
}
// カメラ＆マイク
async function startCameraShare() {
stopMedia();
try {
localStream = await navigator.mediaDevices.getUserMedia({video: true, audio: true});
video.srcObject = localStream;
// 自分のマイク音声がループしないようにしたい場合は video.muted = true;
video.muted = true;
console.log('カメラ＆マイク開始');
} catch (err) {
alert('カメラ/マイクを取得できませんでした: ' + err.message);
}
}
// 停止
function stopMedia() {
if (!localStream) return;
localStream.getTracks().forEach(track => track.stop());
localStream = null;
video.srcObject = null;
console.log('メディア停止');
}
screenShareBtn.addEventListener('click', startScreenShare);
cameraShareBtn.addEventListener('click', startCameraShare);
stopBtn.addEventListener('click', stopMedia);
/*****************************************************************
* 2. 再生/一時停止/ミュート/全画面など動画コントロール
*****************************************************************/
const playBtn = document.getElementById('playBtn');
const pauseBtn = document.getElementById('pauseBtn');
const muteBtn = document.getElementById('muteBtn');
const fullscreenBtn = document.getElementById('fullscreenBtn');
playBtn.addEventListener('click', () => {
video.play();
});
pauseBtn.addEventListener('click', () => {
video.pause();
});
muteBtn.addEventListener('click', () => {
video.muted = !video.muted;
});
fullscreenBtn.addEventListener('click', () => {
if (!document.fullscreenElement) {
video.requestFullscreen().catch(err => {
console.warn('フルスクリーンモードにできません:', err);
});
} else {
document.exitFullscreen();
}
});
/*****************************************************************
* 3. 簡易チャット機能（ローカルのみ）
*****************************************************************/
const chatLog = document.getElementById('chatLog');
const usernameInput = document.getElementById('usernameInput');
const messageInput = document.getElementById('messageInput');
const sendBtn = document.getElementById('sendBtn');
let messages = [];
function renderChatLog() {
chatLog.innerHTML = '';
messages.forEach(msg => {
const p = document.createElement('p');
const userSpan = document.createElement('span');
userSpan.className = 'username';
userSpan.textContent = msg.username + ': ';
const textNode = document.createTextNode(msg.text);
p.appendChild(userSpan);
p.appendChild(textNode);
chatLog.appendChild(p);
});
chatLog.scrollTop = chatLog.scrollHeight;
}
function sendMessage() {
const username = usernameInput.value.trim();
const text = messageInput.value.trim();
if (!username || !text) return;
messages.push({ username, text });
renderChatLog();
messageInput.value = '';
}
sendBtn.addEventListener('click', sendMessage);
messageInput.addEventListener('keydown', e => {
if (e.key === 'Enter') sendMessage();
});
// デモ用メッセージ
(function initDemoChat() {
messages.push(
{ username: 'Alice', text: 'こんにちは！' },
{ username: 'Bob', text: 'システム音声聞こえる？' },
{ username: 'Carol', text: 'タブの音は共有できてます〜' }
);
renderChatLog();
})();
</script>
</body>
</html>ARTBOOK
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ARTBOOK - アートSNS</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
background-color: #f9fafb;
color: #333;
}
header {
background-color: #4a5568;
color: white;
padding: 1.5rem;
text-align: center;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
header h1 {
margin: 0;
font-size: 2.5rem;
}
header p {
margin: 0.5rem 0;
font-size: 1.2rem;
}
header nav {
margin-top: 1rem;
}
header nav a {
color: white;
text-decoration: none;
margin: 0 1rem;
font-weight: bold;
font-size: 1.1rem;
padding: 0.5rem 1rem;
border-radius: 5px;
transition: background-color 0.3s;
}
header nav a:hover {
background-color: #2d3748;
}
.container {
max-width: 1200px;
margin: 2rem auto;
padding: 1rem;
}
.form-group {
margin-bottom: 1rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: bold;
}
.form-group input, .form-group textarea {
width: 100%;
padding: 0.8rem;
border: 1px solid #d2d6dc;
border-radius: 6px;
background-color: #f7fafc;
font-size: 1rem;
}
.form-group button {
background-color: #3182ce;
color: white;
border: none;
padding: 0.8rem 1.5rem;
font-size: 1rem;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.3s;
}
.form-group button:hover {
background-color: #2b6cb0;
}
.profile {
text-align: center;
}
.profile img {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
margin-bottom: 1rem;
}
footer {
text-align: center;
padding: 1.5rem;
background-color: #4a5568;
color: white;
margin-top: 2rem;
}
footer p {
margin: 0;
font-size: 1rem;
}
</style>
</head>
<body>
<header>
<h1>ARTBOOK</h1>
<p>あなたのアートをシェアしよう！</p>
<nav>
<a href="#home" onclick="navigateTo('home')">ホーム</a>
<a href="#gallery" onclick="navigateTo('gallery')">作品一覧</a>
<a href="#post" onclick="navigateTo('post')">投稿する</a>
<a href="#profile" onclick="navigateTo('profile')">プロフィール</a>
</nav>
</header>
<div id="content" class="container">
<!-- コンテンツがここに動的に挿入されます -->
</div>
<footer>
<p>© 2025 ARTBOOK. All Rights Reserved.</p>
</footer>
<script>
let posts = JSON.parse(localStorage.getItem('posts')) || [];
let profile = JSON.parse(localStorage.getItem('profile')) || {
name: "未設定",
bio: "ここに自己紹介が表示されます",
image: "https://via.placeholder.com/150"
};
function navigateTo(section) {
const content = document.getElementById('content');
content.innerHTML = '';
if (section === 'home') {
content.innerHTML = `<h2>ホーム</h2><p>ようこそ、ARTBOOKへ！最新のアート作品をご覧ください。</p>`;
} else if (section === 'gallery') {
content.innerHTML = `<h2>作品一覧</h2><div id='gallery'>${renderPosts()}</div>`;
} else if (section === 'post') {
content.innerHTML = `
<h2>投稿する</h2>
<form id="postForm">
<div class="form-group">
<label for="title">タイトル</label>
<input type="text" id="title" name="title" required>
</div>
<div class="form-group">
<label for="description">説明</label>
<textarea id="description" name="description" rows="4" required></textarea>
</div>
<div class="form-group">
<label for="upload">画像アップロード</label>
<input type="file" id="upload" name="upload" accept="image/*" required>
</div>
<div class="form-group">
<button type="button" onclick="submitPost()">投稿する</button>
</div>
</form>`;
} else if (section === 'profile') {
content.innerHTML = `
<h2>プロフィール</h2>
<div class="profile">
<img src="${profile.image}" alt="プロフィール画像">
<h3>${profile.name}</h3>
<p>${profile.bio}</p>
<form id="profileForm">
<div class="form-group">
<label for="name">名前</label>
<input type="text" id="name" value="${profile.name}" required>
</div>
<div class="form-group">
<label for="bio">自己紹介</label>
<textarea id="bio" rows="4" required>${profile.bio}</textarea>
</div>
<div class="form-group">
<label for="profileImage">プロフィール画像</label>
<input type="file" id="profileImage" accept="image/*">
</div>
<div class="form-group">
<button type="button" onclick="updateProfile()">更新する</button>
</div>
</form>
</div>`;
}
}
function submitPost() {
const title = document.getElementById('title').value;
const description = document.getElementById('description').value;
const upload = document.getElementById('upload').files[0];
if (title && description && upload) {
const reader = new FileReader();
reader.onload = function(event) {
posts.push({ title, description, image: event.target.result });
localStorage.setItem('posts', JSON.stringify(posts));
alert('投稿が完了しました！');
navigateTo('gallery');
};
reader.readAsDataURL(upload);
} else {
alert('すべてのフィールドを入力してください。');
}
}
function updateProfile() {
const name = document.getElementById('name').value;
const bio = document.getElementById('bio').value;
const profileImage = document.getElementById('profileImage').files[0];
if (name && bio) {
if (profileImage) {
const reader = new FileReader();
reader.onload = function(event) {
profile.image = event.target.result;
saveProfile(name, bio);
};
reader.readAsDataURL(profileImage);
} else {
saveProfile(name, bio);
}
} else {
alert('すべてのフィールドを入力してください。');
}
}
function saveProfile(name, bio) {
profile.name = name;
profile.bio = bio;
localStorage.setItem('profile', JSON.stringify(profile));
alert('プロフィールが更新されました！');
navigateTo('profile');
}
function renderPosts() {
if (posts.length === 0) {
return '<p>まだ投稿がありません。</p>';
}
return posts.map(post => `
<div class="art-card">
<img src="${post.image}" alt="${post.title}">
<h2>${post.title}</h2>
<p>${post.description}</p>
</div>`).join('');
}
// 初期表示
navigateTo('home');
</script>
</body>
</html>百科事典サイト
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Encyclopedia</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background-color: #2c3e50;
color: white;
padding: 20px;
text-align: center;
}
nav {
display: flex;
justify-content: center;
background-color: #34495e;
padding: 10px;
}
nav a {
color: white;
text-decoration: none;
margin: 0 15px;
font-weight: bold;
}
nav a:hover {
text-decoration: underline;
}
.search-bar {
display: flex;
justify-content: center;
margin: 20px 0;
}
.search-bar input {
width: 60%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
}
.search-bar button {
padding: 10px 20px;
background-color: #2c3e50;
color: white;
border: none;
border-radius: 5px;
margin-left: 5px;
cursor: pointer;
font-size: 16px;
}
.search-bar button:hover {
background-color: #34495e;
}
.categories, .articles, .about {
margin: 20px;
padding: 20px;
background-color: white;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.categories h2, .articles h2, .about h2 {
margin-bottom: 15px;
font-size: 24px;
}
.categories ul, .articles ul {
list-style: none;
padding: 0;
}
.categories li, .articles li {
margin-bottom: 10px;
}
.categories a, .articles a {
color: #2c3e50;
text-decoration: none;
font-size: 18px;
}
.categories a:hover, .articles a:hover {
text-decoration: underline;
}
.about p {
line-height: 1.6;
font-size: 18px;
color: #333;
}
.featured {
margin: 20px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
}
.featured-item {
background-color: white;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.featured-item img {
width: 100%;
height: auto;
}
.featured-item h3 {
margin: 15px;
font-size: 20px;
color: #2c3e50;
}
.featured-item p {
margin: 15px;
line-height: 1.5;
color: #666;
}
.featured-item a {
display: block;
text-align: center;
padding: 10px;
margin: 15px;
background-color: #2c3e50;
color: white;
text-decoration: none;
border-radius: 5px;
}
.featured-item a:hover {
background-color: #34495e;
}
footer {
background-color: #2c3e50;
color: white;
text-align: center;
padding: 10px 0;
margin-top: 20px;
}
</style>
</head>
<body>
<header>
<h1>Welcome to the Encyclopedia</h1>
<p>Your go-to source for comprehensive knowledge</p>
</header>
<nav>
<a href="#">Home</a>
<a href="#categories">Categories</a>
<a href="#articles">Popular Articles</a>
<a href="#about">About</a>
</nav>
<div class="search-bar">
<input type="text" placeholder="Search articles...">
<button>Search</button>
</div>
<section id="categories" class="categories">
<h2>Categories</h2>
<ul>
<li><a href="#">Science</a></li>
<li><a href="#">Technology</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Geography</a></li>
<li><a href="#">Culture</a></li>
</ul>
</section>
<section id="articles" class="articles">
<h2>Featured Articles</h2>
<ul>
<li><a href="#">The Wonders of Space Exploration</a></li>
<li><a href="#">The Rise and Fall of Ancient Civilizations</a></li>
<li><a href="#">Understanding Quantum Mechanics</a></li>
<li><a href="#">The Impact of AI on Modern Society</a></li>
<li><a href="#">World's Most Breathtaking Landscapes</a></li>
</ul>
</section>
<section class="featured">
<div class="featured-item">
<img src="https://via.placeholder.com/300" alt="Space Exploration">
<h3>The Wonders of Space Exploration</h3>
<p>Discover the mysteries of the universe and the advances in space technology that bring us closer to the stars.</p>
<a href="#">Read More</a>
</div>
<div class="featured-item">
<img src="https://via.placeholder.com/300" alt="Ancient Civilizations">
<h3>The Rise and Fall of Ancient Civilizations</h3>
<p>Explore the history of ancient empires and their lasting impact on the modern world.</p>
<a href="#">Read More</a>
</div>
<div class="featured-item">
<img src="https://via.placeholder.com/300" alt="Quantum Mechanics">
<h3>Understanding Quantum Mechanics</h3>
<p>Dive into the complex and fascinating world of quantum physics and its real-world applications.</p>
<a href="#">Read More</a>
</div>
</section>
<section id="about" class="about">
<h2>About This Encyclopedia</h2>
<p>This online encyclopedia is dedicated to providing reliable and well-researched information on a wide range of topics. From science and technology to history and culture, we aim to empower curious minds with knowledge.</p>
<p>Our content is curated by experts and enthusiasts from around the world, ensuring a comprehensive and engaging learning experience for all users.</p>
</section>
<footer>
<p>© 2025 Encyclopedia. All rights reserved.</p>
</footer>
</body>
</html>ソースから Unreal Engine をビルドする
MyCarousel
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 Carousel</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section class="carousel">
<div class="container">
<ul>
<li><img src="img/pic1.png"></li>
<li><img src="img/pic2.png"></li>
<li><img src="img/pic3.png"></li>
<li><img src="img/pic4.png"></li>
</ul>
<button id="prev">«</button>
<button id="next">»</button>
</div>
<nav>
</nav>
</section>
<script src="js/main.js"></script>
</body>
</html>js/main.js
'use strict';
{
const next = document.getElementById('next');
const prev = document.getElementById('prev');
const ul = document.querySelector('ul');
const slides = ul.children;
const dots = [];
let currentIndex = 0;
function updateButtons() {
prev.classList.remove('hidden');
next.classList.remove('hidden');
if (currentIndex === 0) {
prev.classList.add('hidden');
}
if (currentIndex === slides.length - 1) {
next.classList.add('hidden');
}
}
function moveSlides() {
const slideWidth = slides[0].getBoundingClientRect().width;
ul.style.transform = `translateX(${-1 * slideWidth * currentIndex}px)`;
}
function setupDots() {
for (let i = 0; i < slides.length; i++) {
const button = document.createElement('button');
button.addEventListener('click', () => {
currentIndex = i;
updateDots();
updateButtons();
moveSlides();
});
dots.push(button);
document.querySelector('nav').appendChild(button);
}
dots[0].classList.add('current');
}
function updateDots() {
dots.forEach(dot => {
dot.classList.remove('current');
});
dots[currentIndex].classList.add('current');
}
updateButtons();
setupDots();
next.addEventListener('click', () => {
currentIndex++;
updateButtons();
updateDots();
moveSlides();
});
prev.addEventListener('click', () => {
currentIndex--;
updateButtons();
updateDots();
moveSlides();
});
window.addEventListener('resize', () => {
moveSlides();
});
}css/style.css
.carousel {
width: 80%;
margin: 16px auto;
}
.container {
width: 100%;
height: 220px;
overflow: hidden;
position: relative;
}
ul {
list-style: none;
margin: 0;
padding: 0;
height: 100%;
display: flex;
transition: transform .3s;
}
li {
height: 100%;
min-width: 100%;
}
li img {
width: 100%;
height: 100%;
object-fit: cover;
}
#prev,
#next {
position: absolute;
top: 50%;
transform: translateY(-50%);
border: none;
background: rgba(0, 0, 0, .8);
color: #fff;
font-size: 24px;
padding: 0 8px 4px;
cursor: pointer;
}
#prev:hover,
#next:hover {
opacity: .8;
}
#prev {
left: 0;
}
#next {
right: 0;
}
.hidden {
display: none;
}
nav {
margin-top: 16px;
text-align: center;
}
nav button+button {
margin-left: 8px;
}
nav button {
border: none;
width: 16px;
height: 16px;
background: #ddd;
border-radius: 50%;
cursor: pointer;
}
nav .current {
background: #999;
}ペルソナ6 企画書
ペルソナ6 企画書
1. プロジェクト概要
- プロジェクト名: ペルソナ6
- ジャンル: JRPG (Japanese Role-Playing Game)
- ターゲットプラットフォーム: PlayStation 5, PC (Steam/Epic Games Store)，その他次世代コンソール
- ターゲットユーザー: シリーズファン、RPG愛好者、新規ユーザー層（20代～40代）
2. プロジェクトの目的
- 「ペルソナ」シリーズの世界観を制断しつつ、復制的な要素を用いて新しいファン層にも反応するゲーム体験を提供する。
- 深い社会テーマや人間関係を詰め込んだストーリーテリングを実現。
- 新革的なゲームシステムとビジュアルで、シリーズの次の進化を提示。
3. コンセプト
- テーマ: 「選択と責任」
- キーワード: 多重人格、社会コンフリクト、幸福の定義
- ターゲット: 実世界と想像世界の分裂、個人のアイデンティティと社会のルールの衝突
4. ストーリー概要
- 若者達が、個人の問題や社会問題を中心に、ペルソナを駐らせ、想像世界での戦いを通して我々の社会の問題を問いかける。
- 主人公と不思議なペルソナ達との関係の構築。
- 大部分が新しい大部事件で構成される一方、これまでの作品の世界観の続きもさりげなく組み込み、シリーズファンの期待に対応。
5. ゲームシステム
- ダンジョンシステム
- コンフィグとストイリーベースの自由な選択を重要視。
- 毎日の生活と戦闘の構成のバランスを改善。
- ペルソナシステム
- 主人公の想像を反映する個性を持つペルソナを検索。
- ペルソナのカスタマイズ可能な進化、新たなスキルの実装。
- 世界設定システム
- 実世界の「社会」と想像世界の「サブワールド」の分裂を描く。
- 想像世界の裏に与えられた意味深い設定を検討。
6. ビジュアルスタイル
- アニメ風のキャラクターデザイン、実写風エフェクトとのバランスを持たせる。
- 光と影の表現を重視したビジュアル。
7. 開発スケジュール
- 開発期間: 3年規模
- 開発チーム: プロデューサー、ディレクター、アーティスト、シナリオライター、デバッグチーム
8. 予想売上高
- 日本内: 150万本
- 国外: 300万本
9. 総括とメッセージ
Persona 6は、新たな社会テーマを描き出し、それによって主人公たちが自分たちの存在意義を問う。これは現代社会を我々に問いかける作品として、新たな次元を提示する。
「ゴエモンリメイク」企画書
「ゴエモンリメイク」企画書
タイトル
ゴエモンリメイク (仮タイトル)
概要
「ゴエモン」シリーズを現代のゲームプレイ環境に合わせてリメイクする企画。原作の魅力を残しながら、グラフィックとゲームシステムを現代化し、新たなプレイヤーや世代に展開。
目的
- 原作ファンの幸福感を増大させる。
- 新たなファン層の開拓。
- シリーズのブランドリフィング。
ターゲットオーディエンス
- 原作のファン
- レトロゲーマー
- 若年層
- 和風世界観が好きな人
ゲームジャンル
- アクションゲーム ハイテンポの探索やダイナミックアクションを重視。
- ハイフンディエンスアクション テンポを駆使した手験性の高いアクション。
要素
- 新しいグラフィックデザイン 原作の和風感を残しながら、高解像度や現代的エッセンスを解釈。
- コオプレイモード ローカルマルチプレイとオンラインマルチプレイに対応。
- シリーズ企画
- 原作をフルリメイク。
- 新規ストーリーの追加。
- 付加要素 オリジナルゲーム音楽のリプリント。
スケジュール
- 開発階段とスケジュール
- 企画フェース
- デザインフェース
- 開発
- テスト
- リリース
- 予定開発期間 18ヶ月
カバーター
- ゴエモン 新たな3Dモデルで再現。
- エビゾン コミック作品やキャラを重視。
- 新キャラクターを追加
市場調査と要望
- 原作ファンからの強い要望。
- 和風ゲームの展開に希望。
計画予算
- 開発費
- マーケティング費
- オープンワールド開発費
結論
「ゴエモン」リメイクは、現代のゲームプレイやグラフィックデザインに適応させながら、原作の魅力を残す作品として展開。