「News Adviser」
・ダウンロードされる方はこちら。↓
・ソースコードはこちら。↓
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>News Advisor</title>
<style>
:root {
--neon-blue: #00f3ff;
--neon-pink: #ff00ea;
--bg-color: #050510;
--panel-bg: rgba(0, 20, 40, 0.7);
--border-glow: 0 0 10px var(--neon-blue);
}
body {
background-color: var(--bg-color);
color: var(--neon-blue);
font-family: 'Courier New', Courier, monospace;
margin: 0;
padding: 20px;
background-image:
linear-gradient(rgba(0, 243, 255, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 243, 255, 0.05) 1px, transparent 1px);
background-size: 20px 20px;
display: flex;
flex-direction: column;
height: 100vh;
box-sizing: border-box;
}
h1 {
text-align: center;
text-shadow: 0 0 15px var(--neon-blue);
margin-top: 0;
letter-spacing: 5px;
font-size: 1.5rem;
border-bottom: 2px solid var(--neon-blue);
padding-bottom: 10px;
}
.container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
flex-grow: 1;
overflow: hidden;
}
.panel {
background: var(--panel-bg);
border: 1px solid var(--neon-blue);
box-shadow: var(--border-glow);
padding: 15px;
display: flex;
flex-direction: column;
border-radius: 5px;
position: relative;
}
.panel::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 10px; height: 10px;
border-top: 2px solid var(--neon-pink);
border-left: 2px solid var(--neon-pink);
}
h2 {
font-size: 1.2rem;
margin-top: 0;
color: var(--neon-pink);
text-shadow: 0 0 10px var(--neon-pink);
}
textarea, select {
background: rgba(0, 0, 0, 0.5);
border: 1px solid var(--neon-blue);
color: #fff;
font-family: 'Courier New', Courier, monospace;
padding: 10px;
resize: none;
flex-grow: 1;
margin-bottom: 10px;
box-sizing: border-box;
width: 100%;
}
textarea:focus {
outline: none;
box-shadow: inset 0 0 10px var(--neon-blue);
}
button {
background: transparent;
color: var(--neon-blue);
border: 1px solid var(--neon-blue);
padding: 10px 15px;
cursor: pointer;
font-family: inherit;
font-weight: bold;
transition: all 0.3s;
text-transform: uppercase;
}
button:hover {
background: var(--neon-blue);
color: #000;
box-shadow: 0 0 15px var(--neon-blue);
}
.controls {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
align-items: center;
}
.mode-switch {
display: flex;
gap: 10px;
}
.api-mode-ui {
display: none;
color: var(--neon-pink);
font-weight: bold;
text-align: center;
padding: 20px;
border: 1px dashed var(--neon-pink);
margin-top: 10px;
}
/* スクロールバーのカスタマイズ */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: var(--neon-blue); }
</style>
</head>
<body>
<h1>[ SYS.CORE ] AI FEED ADVISOR INTERFACE</h1>
<div class="controls">
<div class="mode-switch">
<button id="btnManual" style="background: var(--neon-blue); color: #000;">MANUAL MODE (ブラウザ版)</button>
<button id="btnApi">API MODE (自動版)</button>
</div>
<button onclick="generatePrompt()">[ EXECUTE: プロンプト生成 ]</button>
</div>
<div class="container">
<div class="panel">
<h2>USER PROFILE & CONFIG</h2>
<textarea id="userProfile" placeholder="ユーザーのプロフィール・目標を入力...">・職業: フリーランスエンジニア / クリエイター
・目標: 効率的なAIツールの開発と、ゲーム制作の進行
・興味: C#プログラミング、生成AI、自動化ツール</textarea>
<h2>AGGREGATED DATA SUMMARY</h2>
<textarea id="feedSummary" placeholder="各期間のニュース要約...">[日別] AIの最新画像生成モデルがリリース。高速化が話題。
[週間] C#の新しいバージョンに関するベストプラクティス記事が多数。
[月間] インディーゲーム市場におけるシミュレーションRPGの需要が増加傾向。
[年間] AIを活用した開発プロセスの自動化が業界標準になりつつある。</textarea>
</div>
<div class="panel">
<h2>GENERATED PROMPT</h2>
<textarea id="generatedPrompt" readonly placeholder="ここにAIへの指示プロンプトが生成されます..."></textarea>
<button onclick="copyToClipboard()" id="copyBtn">[ COPY TO CLIPBOARD ]</button>
<div id="manualInputSection">
<h2>AI RESPONSE INPUT</h2>
<textarea id="aiResponse" placeholder="AIからの回答をここにペーストして下さい..."></textarea>
<button onclick="processAiResponse()">[ ANALYZE RESPONSE ]</button>
</div>
<div id="apiModeSection" class="api-mode-ui">
>>> SYSTEM: API MODE ACTIVE <<< <br>
プロンプトの生成、AIへの送信、回答の取得・保存を自動でバックグラウンド実行します。
</div>
</div>
</div>
<script>
// モード切替ロジック
const btnManual = document.getElementById('btnManual');
const btnApi = document.getElementById('btnApi');
const manualSection = document.getElementById('manualInputSection');
const apiSection = document.getElementById('apiModeSection');
const copyBtn = document.getElementById('copyBtn');
let isApiMode = false;
btnManual.addEventListener('click', () => {
isApiMode = false;
btnManual.style.background = 'var(--neon-blue)';
btnManual.style.color = '#000';
btnApi.style.background = 'transparent';
btnApi.style.color = 'var(--neon-blue)';
manualSection.style.display = 'block';
apiSection.style.display = 'none';
copyBtn.style.display = 'block';
});
btnApi.addEventListener('click', () => {
isApiMode = true;
btnApi.style.background = 'var(--neon-blue)';
btnApi.style.color = '#000';
btnManual.style.background = 'transparent';
btnManual.style.color = 'var(--neon-blue)';
manualSection.style.display = 'none';
apiSection.style.display = 'block';
copyBtn.style.display = 'none';
});
// プロンプト生成ロジック
function generatePrompt() {
const profile = document.getElementById('userProfile').value;
const summary = document.getElementById('feedSummary').value;
const date = new Date().toLocaleDateString('ja-JP');
const prompt = `あなたは私の専属のキャリア＆ライフアドバイザーAIです。
以下の【私のプロフィール】と、巡回してまとめた【最新のニュース要約】を照らし合わせ、本日の具体的なアクションプランとアドバイスを提案してください。
【実行日】: ${date}
【私のプロフィール】
${profile}
【最新のニュース要約（日・週・月・年）】
${summary}
【出力要件】
1. ニュースから読み取れる、私にとっての「本日のチャンス」
2. プロフィール目標を達成するための「具体的なネクストアクション」
3. モチベーションを上げる一言`;
document.getElementById('generatedPrompt').value = prompt;
if (isApiMode) {
// APIモード時のモック処理
setTimeout(() => {
alert('API経由でAIに送信しました（モック動作）');
}, 500);
}
}
// クリップボードへのコピー
function copyToClipboard() {
const promptText = document.getElementById('generatedPrompt');
promptText.select();
document.execCommand('copy');
const btn = document.getElementById('copyBtn');
const originalText = btn.innerText;
btn.innerText = '[ COPIED! ]';
btn.style.color = 'var(--neon-pink)';
btn.style.borderColor = 'var(--neon-pink)';
setTimeout(() => {
btn.innerText = originalText;
btn.style.color = 'var(--neon-blue)';
btn.style.borderColor = 'var(--neon-blue)';
}, 2000);
}
// AI回答の処理（手動モード時）
function processAiResponse() {
const response = document.getElementById('aiResponse').value;
if(response.trim() === "") {
alert("AIの回答が入力されていません。");
return;
}
alert("回答をデータベースに保存・分析しました（モック動作）\nダッシュボードを更新します。");
document.getElementById('aiResponse').value = "";
}
</script>
</body>
</html>
コメント