テイスティングノート | BJCP 50点スコアシート

.tn-wrap{max-width:800px;margin:0 auto}
.tn-nav{margin-bottom:20px;font-size:.9em}
.tn-nav a{color:#D97706}
.tn-tabs{display:flex;gap:4px;margin-bottom:20px;flex-wrap:wrap}
.tn-tab{padding:10px 16px;border:2px solid #ddd;border-radius:8px 8px 0 0;background:#f9f9f9;cursor:pointer;font-size:.95em;font-weight:bold;border-bottom:none}
.tn-tab.active{background:#fff;border-color:#F59E0B;color:#D97706}
.tn-panel{display:none;border:2px solid #F59E0B;border-radius:0 8px 8px 8px;padding:20px}
.tn-panel.active{display:block}

/* Form */
.tn-info{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}
.tn-info label{font-size:.85em;color:#888;display:block;margin-bottom:4px}
.tn-info input,.tn-info select{width:100%;padding:8px;border:2px solid #ddd;border-radius:6px;font-size:1em;box-sizing:border-box}
.tn-info input:focus{border-color:#F59E0B;outline:none}
.tn-section{margin-bottom:24px;background:#f9f9f9;border-radius:12px;padding:16px}
.tn-section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.tn-section-title{font-weight:bold;font-size:1.1em}
.tn-section-score{font-size:1.2em;font-weight:bold;color:#D97706}
.tn-field{margin-bottom:10px}
.tn-field-label{font-size:.85em;color:#555;margin-bottom:4px;display:flex;justify-content:space-between}
.tn-field-val{font-weight:bold;color:#D97706}
.tn-slider{width:100%;-webkit-appearance:none;height:6px;border-radius:3px;background:#ddd;outline:none}
.tn-slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#F59E0B;cursor:pointer}
.tn-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#F59E0B;cursor:pointer;border:none}
.tn-memo{width:100%;min-height:80px;padding:10px;border:2px solid #ddd;border-radius:8px;font-size:.95em;resize:vertical;box-sizing:border-box}
.tn-memo:focus{border-color:#F59E0B;outline:none}

/* Results */
.tn-result{text-align:center;padding:20px;background:#FFFBEB;border-radius:12px;margin-bottom:20px}
.tn-total{font-size:2.5em;font-weight:bold;color:#D97706}
.tn-rating{font-size:1.3em;margin-top:4px}
.tn-rating-desc{font-size:.9em;color:#666;margin-top:4px}

/* Radar Chart (CSS) */
.tn-radar{display:flex;justify-content:center;margin:20px 0}
.tn-radar-bars{display:flex;gap:12px;align-items:flex-end;height:160px}
.tn-radar-bar{display:flex;flex-direction:column;align-items:center;width:60px}
.tn-radar-fill{width:40px;border-radius:6px 6px 0 0;background:linear-gradient(to top,#F59E0B,#FBBF24);transition:height .3s}
.tn-radar-pct{font-size:.8em;font-weight:bold;color:#D97706;margin-bottom:4px}
.tn-radar-name{font-size:.75em;color:#666;margin-top:6px;text-align:center}

/* Actions */
.tn-actions{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0}
.tn-btn{padding:10px 20px;border:none;border-radius:8px;font-weight:bold;cursor:pointer;font-size:.95em}
.tn-btn-primary{background:#F59E0B;color:#fff}
.tn-btn-primary:hover{background:#D97706}
.tn-btn-secondary{background:#e5e7eb;color:#333}
.tn-btn-secondary:hover{background:#d1d5db}
.tn-btn-danger{background:#fee2e2;color:#dc2626}
.tn-btn-danger:hover{background:#fecaca}

/* History */
.tn-history{margin-top:20px}
.tn-history-empty{color:#999;text-align:center;padding:40px}
.tn-history-list{display:flex;flex-direction:column;gap:8px}
.tn-history-item{display:flex;justify-content:space-between;align-items:center;padding:12px;border:1px solid #eee;border-radius:8px;cursor:pointer;transition:background .2s}
.tn-history-item:hover{background:#FFFBEB}
.tn-history-name{font-weight:bold}
.tn-history-meta{font-size:.85em;color:#888}
.tn-history-score{font-weight:bold;color:#D97706;font-size:1.1em}
.tn-history-del{background:none;border:none;color:#ccc;cursor:pointer;font-size:1.2em;padding:4px 8px}
.tn-history-del:hover{color:#dc2626}

/* Export modal */
.tn-modal-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:1000;justify-content:center;align-items:center}
.tn-modal-overlay.active{display:flex}
.tn-modal{background:#fff;border-radius:16px;padding:24px;max-width:600px;width:90%;max-height:80vh;overflow-y:auto;position:relative}
.tn-modal-close{position:absolute;top:12px;right:12px;background:none;border:none;font-size:1.5em;cursor:pointer;color:#999}
.tn-modal pre{background:#f5f5f5;padding:16px;border-radius:8px;overflow-x:auto;font-size:.85em;white-space:pre-wrap}
.tn-copy-btn{margin-top:8px}

/* Field descriptions */
.tn-field-desc{font-size:.75em;color:#aaa;margin-top:2px}

@media(max-width:480px){
.tn-info{grid-template-columns:1fr}
.tn-tabs{flex-direction:column}
.tn-tab{border-radius:8px;border-bottom:2px solid #ddd}
.tn-panel{border-radius:8px}
.tn-radar-bars{gap:6px}
.tn-radar-bar{width:48px}
.tn-radar-fill{width:32px}
.tn-total{font-size:2em}
.tn-actions{flex-direction:column}
.tn-btn{width:100%;text-align:center}
.tn-slider::-webkit-slider-thumb{width:28px;height:28px}
.tn-slider::-moz-range-thumb{width:28px;height:28px}
}

(function(){
const SECTIONS={
appearance:{name_ja:’外観’,maxScore:6,fields:[
{key:’color’,label:’色合い’,desc:’スタイルに適した色か’},
{key:’clarity’,label:’透明度’,desc:’クリア/ヘイジー/濁り’},
{key:’head_retention’,label:’泡持ち’,desc:’泡の持続性と量’},
{key:’head_color’,label:’泡の色’,desc:’白/クリーム/ブラウン’}
]},
aroma:{name_ja:’香り’,maxScore:12,fields:[
{key:’malt_aroma’,label:’モルト香’,desc:’パン/カラメル/ロースト等’},
{key:’hop_aroma’,label:’ホップ香’,desc:’柑橘/松/花/ハーブ等’},
{key:’fermentation_aroma’,label:’発酵由来の香り’,desc:’エステル/フェノール/ダイアセチル等’},
{key:’other_aroma’,label:’その他の香り’,desc:’スパイス/フルーツ/木樽等’}
]},
flavor:{name_ja:’味わい’,maxScore:20,fields:[
{key:’malt_flavor’,label:’モルトの味’,desc:’甘み/穀物/ロースト/チョコレート’},
{key:’hop_flavor’,label:’ホップの味’,desc:’苦味以外のホップフレーバー’},
{key:’bitterness’,label:’苦味’,desc:’苦味の強さとスタイル適合性’},
{key:’sweetness’,label:’甘さ’,desc:’残糖感のバランス’},
{key:’fermentation_flavor’,label:’発酵由来の味’,desc:’エステル/フェノール/酸味’},
{key:’balance’,label:’バランス’,desc:’モルトとホップの調和’},
{key:’finish’,label:’後味’,desc:’キレ/余韻/ドライ/スイート’},
{key:’overall_flavor’,label:’総合的な味わい’,desc:’複雑さ・深み・スタイル適合’}
]},
mouthfeel:{name_ja:’マウスフィール’,maxScore:5,fields:[
{key:’body’,label:’ボディ’,desc:’ライト/ミディアム/フル’},
{key:’carbonation’,label:’炭酸’,desc:’炭酸の強さと適切さ’},
{key:’warmth’,label:’アルコール感’,desc:’温かみ/熱さの有無’},
{key:’creaminess’,label:’クリーミーさ’,desc:’滑らかさ・口当たり’}
]},
overall:{name_ja:’総合印象’,maxScore:7,fields:[
{key:’style_accuracy’,label:’スタイル適合度’,desc:’スタイルガイドラインとの一致’},
{key:’drinkability’,label:’飲みやすさ’,desc:’もう一杯飲みたくなるか’},
{key:’technical_quality’,label:’醸造技術’,desc:’欠点の有無・完成度’}
]}
};
const TOTAL_MAX=50;
const RATINGS=[
{min:45,rating:’Outstanding’,ja:’卓越’,desc:’世界クラスのビール’},
{min:38,rating:’Excellent’,ja:’優秀’,desc:’醸造技術が非常に高い’},
{min:30,rating:’Very Good’,ja:’良好’,desc:’スタイルに概ね適合’},
{min:21,rating:’Good’,ja:’普通’,desc:’改善の余地あり’},
{min:14,rating:’Fair’,ja:’やや不足’,desc:’オフフレーバーや欠点あり’},
{min:0,rating:’Problematic’,ja:’問題あり’,desc:’重大な欠点が見られる’}
];
const STORAGE_KEY=’rihobeer_tasting_notes’;

// Build sections UI
function buildSections(){
const container=document.getElementById(‘tn-sections’);
let html=”;
for(const[secKey,sec]of Object.entries(SECTIONS)){
const stepSize=sec.fields.length;
const maxPerField=(sec.maxScore/stepSize);
html+=`

‘;
}
container.innerHTML=html;
}

// Update field value display + section total
window.updateField=function(fieldKey,secKey){
const slider=document.getElementById(‘slider-‘+fieldKey);
document.getElementById(‘val-‘+fieldKey).textContent=slider.value;
updateSectionScore(secKey);
updateTotal();
};

function updateSectionScore(secKey){
const sec=SECTIONS[secKey];
let sum=0;
for(const f of sec.fields){
sum+=parseFloat(document.getElementById(‘slider-‘+f.key).value)||0;
}
sum=Math.min(sum,sec.maxScore);
document.getElementById(‘sec-score-‘+secKey).textContent=`${sum} / ${sec.maxScore}`;
}

function getSectionScores(){
const scores={};
for(const[secKey,sec]of Object.entries(SECTIONS)){
let sum=0;
for(const f of sec.fields){
sum+=parseFloat(document.getElementById(‘slider-‘+f.key).value)||0;
}
scores[secKey]=Math.min(Math.round(sum*10)/10,sec.maxScore);
}
return scores;
}

function updateTotal(){
const scores=getSectionScores();
const total=Object.values(scores).reduce((a,b)=>a+b,0);
const rounded=Math.round(total*10)/10;
document.getElementById(‘tn-total’).textContent=`${rounded} / ${TOTAL_MAX}`;
const r=RATINGS.find(r=>rounded>=r.min);
document.getElementById(‘tn-rating’).textContent=`${r.ja}（${r.rating}）`;
document.getElementById(‘tn-rating-desc’).textContent=r.desc;
updateRadar(scores);
}

function updateRadar(scores){
const container=document.getElementById(‘tn-radar’);
let html=”;
for(const[key,sec]of Object.entries(SECTIONS)){
const val=scores[key]||0;
const pct=Math.round((val/sec.maxScore)*100);
const h=Math.max(4,pct*1.4);
html+=`

`;
}
container.innerHTML=html;
}

// Tabs
window.switchTab=function(tab){
document.querySelectorAll(‘.tn-tab’).forEach((t,i)=>{
t.classList.toggle(‘active’,[‘form’,’result’,’history’][i]===tab);
});
document.querySelectorAll(‘.tn-panel’).forEach((p,i)=>{
p.classList.toggle(‘active’,[‘form’,’result’,’history’][i]===tab);
});
if(tab===’result’)updateTotal();
if(tab===’history’)renderHistory();
};

// Save
window.saveNote=function(){
const beer=document.getElementById(‘tn-beer’).value.trim();
if(!beer){alert(‘ビール名を入力してください’);return;}
const scores=getSectionScores();
const total=Math.round(Object.values(scores).reduce((a,b)=>a+b,0)*10)/10;
const r=RATINGS.find(r=>total>=r.min);
const note={
id:Date.now().toString(36)+Math.random().toString(36).slice(2,6),
beerName:beer,
brewery:document.getElementById(‘tn-brewery’).value.trim(),
style:document.getElementById(‘tn-style’).value.trim(),
date:document.getElementById(‘tn-date’).value||new Date().toISOString().split(‘T’)[0],
location:document.getElementById(‘tn-location’).value.trim(),
scores,total,
rating:r.rating,rating_ja:r.ja,
memo:document.getElementById(‘tn-memo’).value.trim(),
createdAt:new Date().toISOString()
};
const notes=loadNotes();
notes.unshift(note);
localStorage.setItem(STORAGE_KEY,JSON.stringify(notes));
alert(`「${beer}」を保存しました（${total}点 / ${r.ja}）`);
switchTab(‘history’);
};

function loadNotes(){
try{return JSON.parse(localStorage.getItem(STORAGE_KEY))||[];}
catch{return[];}
}

// History
function renderHistory(){
const notes=loadNotes();
const el=document.getElementById(‘tn-history-content’);
if(notes.length===0){
el.innerHTML=’

‘;
return;
}
el.innerHTML=’

‘;
}

function esc(s){return s.replace(/[&”‘]/g,c=>({‘&’:’&’,”:’>’,'”‘:’"’,”‘”:’'’})[c]);}

window.loadNote=function(id){
const notes=loadNotes();
const note=notes.find(n=>n.id===id);
if(!note)return;
document.getElementById(‘tn-beer’).value=note.beerName;
document.getElementById(‘tn-brewery’).value=note.brewery||”;
document.getElementById(‘tn-style’).value=note.style||”;
document.getElementById(‘tn-date’).value=note.date||”;
document.getElementById(‘tn-location’).value=note.location||”;
document.getElementById(‘tn-memo’).value=note.memo||”;
// Reconstruct field sliders from section scores
for(const[secKey,sec]of Object.entries(SECTIONS)){
const secScore=note.scores[secKey]||0;
const perField=Math.round((secScore/sec.fields.length)*100)/100;
for(const f of sec.fields){
const slider=document.getElementById(‘slider-‘+f.key);
const max=parseFloat(slider.max);
const step=parseFloat(slider.step);
const val=Math.min(Math.round(perField/step)*step,max);
slider.value=val;
document.getElementById(‘val-‘+f.key).textContent=val;
}
updateSectionScore(secKey);
}
updateTotal();
switchTab(‘form’);
};

window.deleteNote=function(id){
if(!confirm(‘このノートを削除しますか？’))return;
const notes=loadNotes().filter(n=>n.id!==id);
localStorage.setItem(STORAGE_KEY,JSON.stringify(notes));
renderHistory();
};

// Export
window.exportMarkdown=function(){
const beer=document.getElementById(‘tn-beer’).value.trim()||’無題’;
const brewery=document.getElementById(‘tn-brewery’).value.trim();
const style=document.getElementById(‘tn-style’).value.trim();
const date=document.getElementById(‘tn-date’).value;
const location=document.getElementById(‘tn-location’).value.trim();
const memo=document.getElementById(‘tn-memo’).value.trim();
const scores=getSectionScores();
const total=Math.round(Object.values(scores).reduce((a,b)=>a+b,0)*10)/10;
const r=RATINGS.find(r=>total>=r.min);

let md=`# ${beer}nn`;
md+=`| 項目 | 内容 |n|—|—|n`;
md+=`| ブルワリー | ${brewery||’—’} |n`;
md+=`| スタイル | ${style||’—’} |n`;
md+=`| 日付 | ${date||’—’} |n`;
md+=`| 場所 | ${location||’—’} |nn`;
md+=`## スコア: ${total} / ${TOTAL_MAX} (${r.ja})nn`;
md+=`| セクション | スコア | 満点 | 達成率 |n|—|—|—|—|n`;
for(const[key,sec]of Object.entries(SECTIONS)){
const val=scores[key]||0;
const pct=Math.round((val/sec.maxScore)*100);
md+=`| ${sec.name_ja} | ${val} | ${sec.maxScore} | ${pct}% |n`;
}
md+=`n**評価**: ${r.ja} — ${r.desc}n`;
if(memo)md+=`n## メモnn${memo}n`;

document.getElementById(‘tn-export-md’).textContent=md;
document.getElementById(‘tn-export-overlay’).classList.add(‘active’);
};

window.closeExport=function(){document.getElementById(‘tn-export-overlay’).classList.remove(‘active’);};
document.addEventListener(‘keydown’,e=>{if(e.key===’Escape’)closeExport();});

window.copyMarkdown=function(){
const text=document.getElementById(‘tn-export-md’).textContent;
navigator.clipboard.writeText(text).then(()=>alert(‘コピーしました’)).catch(()=>{
const ta=document.createElement(‘textarea’);
ta.value=text;document.body.appendChild(ta);ta.select();document.execCommand(‘copy’);document.body.removeChild(ta);
alert(‘コピーしました’);
});
};

// Reset
window.resetForm=function(){
if(!confirm(‘入力内容をリセットしますか？’))return;
document.getElementById(‘tn-beer’).value=”;
document.getElementById(‘tn-brewery’).value=”;
document.getElementById(‘tn-style’).value=”;
document.getElementById(‘tn-date’).value=new Date().toISOString().split(‘T’)[0];
document.getElementById(‘tn-location’).value=”;
document.getElementById(‘tn-memo’).value=”;
for(const[secKey,sec]of Object.entries(SECTIONS)){
for(const f of sec.fields){
document.getElementById(‘slider-‘+f.key).value=0;
document.getElementById(‘val-‘+f.key).textContent=’0’;
}
updateSectionScore(secKey);
}
updateTotal();
};

// Init
document.getElementById(‘tn-date’).value=new Date().toISOString().split(‘T’)[0];
buildSections();
updateTotal();
})();

{
“@context”: “https://schema.org”,
“@graph”: [
{
“@type”: “WebApplication”,
“name”: “テイスティングノート – BJCP 50点スコアシート”,
“description”: “BJCP準拠の50点スコアシートでクラフトビールを本格評価。5セクション23項目をスライダーで採点、結果をMarkdown出力。ブラウザ内保存対応。”,
“url”: “https://rihobeer.com/tools/tasting/”,
“applicationCategory”: “UtilitiesApplication”,
“operatingSystem”: “Web Browser”,
“offers”: {
“@type”: “Offer”,
“price”: “0”,
“priceCurrency”: “JPY”
},
“inLanguage”: “ja”,
“author”: {
“@type”: “Person”,
“name”: “りほ”
},
“isPartOf”: {
“@type”: “WebSite”,
“name”: “rihobeer.com”,
“url”: “https://rihobeer.com/”
}
},
{
“@type”: “FAQPage”,
“mainEntity”: [
{
“@type”: “Question”,
“name”: “BJCPスコアシートとは？”,
“acceptedAnswer”: {
“@type”: “Answer”,
“text”: “Beer Judge Certification Program（BJCP）が定めるビール評価基準で、外観(6点)・香り(12点)・味わい(20点)・マウスフィール(5点)・総合印象(7点)の5セクション計50点満点で採点します。”
}
},
{
“@type”: “Question”,
“name”: “テイスティングノートのデータはどこに保存されますか？”,
“acceptedAnswer”: {
“@type”: “Answer”,
“text”: “ブラウザのlocalStorageに保存されます。サーバーには一切送信されません。同じブラウザ・デバイスであれば次回アクセス時も履歴が残ります。”
}
},
{
“@type”: “Question”,
“name”: “評価結果を共有できますか？”,
“acceptedAnswer”: {
“@type”: “Answer”,
“text”: “はい。「Markdown出力」ボタンでテイスティングノートをMarkdown形式でコピーできます。ブログ、SNS、メモアプリなどに貼り付けて共有できます。”
}
},
{
“@type”: “Question”,
“name”: “45点以上の「卓越」評価はどのレベルですか？”,
“acceptedAnswer”: {
“@type”: “Answer”,
“text”: “BJCP基準で45-50点は「Outstanding（卓越）」で、世界クラスのビールに相当します。国際コンペティションで金賞を取るレベルの品質です。”
}
},
{
“@type”: “Question”,
“name”: “初心者でも使えますか？”,
“acceptedAnswer”: {
“@type”: “Answer”,
“text”: “はい。各評価項目にガイド説明が付いているので、初めての方でもスライダーを動かすだけで直感的に評価できます。まずは好きなビールで試してみてください。”
}
}
]
}
]
}