{"id":819,"date":"2025-12-12T11:33:56","date_gmt":"2025-12-12T02:33:56","guid":{"rendered":"https:\/\/marocchi-tencho.moo.jp\/pgschool\/?p=819"},"modified":"2025-12-12T12:09:03","modified_gmt":"2025-12-12T03:09:03","slug":"%e3%82%a2%e3%83%ab%e3%83%95%e3%82%a1%e3%83%99%e3%83%83%e3%83%88%e3%82%b2%e3%83%bc%e3%83%a0%e4%bd%9c%e3%81%a3%e3%81%9f%e3%82%88","status":"publish","type":"post","link":"https:\/\/marocchi-tencho.moo.jp\/pgschool\/%e3%82%a2%e3%83%ab%e3%83%95%e3%82%a1%e3%83%99%e3%83%83%e3%83%88%e3%82%b2%e3%83%bc%e3%83%a0%e4%bd%9c%e3%81%a3%e3%81%9f%e3%82%88\/","title":{"rendered":"# \u30df\u30cb\u30b2\u30fc\u30e0\uff1a\u30a2\u30eb\u30d5\u30a1\u30d9\u30c3\u30c8\u30b2\u30fc\u30e0\u4f5c\u3063\u305f\u3088"},"content":{"rendered":"\n<div id=\"alphaApp\" class=\"alpha-app\">\n\n  <!-- ===== \u30d5\u30e9\u30c3\u30b7\u30e5\u30ab\u30fc\u30c9\u753b\u9762 ===== -->\n  <div class=\"alpha-card\" id=\"cardScreen\">\n    <div class=\"alpha-top\">\n      <div class=\"alpha-badge\">\u30d5\u30e9\u30c3\u30b7\u30e5\u30ab\u30fc\u30c9<\/div>\n      <div class=\"alpha-progress\" id=\"progressText\">A \/ Z<\/div>\n    <\/div>\n\n    <div class=\"alpha-letter\" id=\"letterBig\">A<\/div>\n    <div class=\"alpha-sub\" id=\"letterSub\">a<\/div>\n    <div class=\"alpha-word\" id=\"exampleWord\">Apple<\/div>\n    <div class=\"alpha-hint\">\u30dc\u30bf\u30f3\u3067\u9032\u3081\u3066\u899a\u3048\u3088\u3046\uff01<\/div>\n\n    <div class=\"alpha-controls\">\n      <button class=\"btn\" id=\"prevBtn\">\u2190 \u524d<\/button>\n      <button class=\"btn btn-main\" id=\"nextBtn\">\u6b21 \u2192<\/button>\n    <\/div>\n\n    <div class=\"alpha-controls\">\n      <button class=\"btn\" id=\"randomBtn\">\u30e9\u30f3\u30c0\u30e0<\/button>\n      <button class=\"btn btn-main\" id=\"toQuizBtn\">\u30af\u30a4\u30ba\u306b\u5207\u66ff<\/button>\n    <\/div>\n\n    <div class=\"alpha-controls\">\n      <button class=\"btn\" id=\"speakBtn\">\u767a\u97f3<\/button>\n      <button class=\"btn\" id=\"toggleCaseBtn\">\u5927\/\u5c0f \u5207\u66ff<\/button>\n    <\/div>\n  <\/div>\n\n  <!-- ===== \u30af\u30a4\u30ba\u753b\u9762 ===== -->\n  <div class=\"alpha-card\" id=\"quizScreen\" style=\"display:none;\">\n    <div class=\"alpha-top\">\n      <div class=\"alpha-badge\">\u30af\u30a4\u30ba<\/div>\n      <div class=\"alpha-progress\">4\u629e<\/div>\n    <\/div>\n\n    <div class=\"alpha-quiz-q\" id=\"quizQuestion\">\u3053\u308c\u306f\u4f55\u306e\u6587\u5b57\uff1f<\/div>\n    <div class=\"alpha-choices\" id=\"choices\"><\/div>\n    <div class=\"alpha-result\" id=\"resultText\"><\/div>\n\n    <div class=\"alpha-controls\">\n      <button class=\"btn btn-main\" id=\"nextQuizBtn\">\u6b21\u306e\u554f\u984c<\/button>\n      <button class=\"btn\" id=\"backBtn\">\u30ab\u30fc\u30c9\u306b\u623b\u308b<\/button>\n    <\/div>\n  <\/div>\n\n<\/div>\n\n<style>\n.alpha-app{\n  font-family:\"Yu Gothic\",sans-serif;\n  display:flex;\n  justify-content:center;\n  padding:14px;\n}\n.alpha-card{\n  width:min(560px,100%);\n  background:#fff;\n  border:1px solid #ffe08a;\n  border-radius:18px;\n  padding:16px;\n}\n.alpha-top{\n  display:flex;\n  justify-content:space-between;\n  margin-bottom:10px;\n}\n.alpha-badge{\n  background:#fff6cc;\n  padding:6px 10px;\n  border-radius:999px;\n  font-size:12px;\n}\n.alpha-letter{\n  text-align:center;\n  font-size:96px;\n  font-weight:900;\n}\n.alpha-sub{\n  text-align:center;\n  font-size:32px;\n  color:#666;\n}\n.alpha-word{\n  text-align:center;\n  font-size:22px;\n  font-weight:700;\n  margin-top:10px;\n}\n.alpha-controls{\n  display:flex;\n  gap:10px;\n  margin-top:10px;\n}\n.btn{\n  flex:1;\n  padding:12px;\n  border-radius:14px;\n  border:1px solid #ffe08a;\n  background:#fffbe6;\n  color:#000;              \/* \u2190 \u8ffd\u52a0\uff1a\u6587\u5b57\u3092\u9ed2\u306b *\/\n  font-size:14px;\n  cursor:pointer;\n}\n\n.btn-main{\n  background:#ffe08a;\n  font-weight:800;\n  color:#000;              \/* \u2190 \u5ff5\u306e\u305f\u3081\u30e1\u30a4\u30f3\u3082\u9ed2\u6307\u5b9a *\/\n}\n\n.alpha-choices{\n  display:grid;\n  grid-template-columns:1fr 1fr;\n  gap:10px;\n}\n.choice{\n  padding:14px;\n  border-radius:14px;\n  border:1px solid #ffe08a;\n  background:#fffbe6;   \/* \u2190 #fff \u3092\u3084\u3081\u3066\u9ec4\u8272\u306b *\/\n  color:#000;           \/* \u2190 \u5ff5\u306e\u305f\u3081\u9ed2\u56fa\u5b9a *\/\n  font-size:18px;\n  font-weight:800;\n}\n\n.alpha-result{\n  text-align:center;\n  font-weight:800;\n  margin-top:10px;\n}\n\/* \u25bc \u30af\u30a4\u30ba\u6642\u306e\u6587\u5b57\u3092\u9ed2\u306b\u3059\u308b \u25bc *\/\n.alpha-quiz-q,\n.alpha-quiz-q span,\n.alpha-result {\n  color: #000;\n}\n\n<\/style>\n\n<script>\nconst ALPH=[\n{u:\"A\",l:\"a\",w:\"Apple\"},{u:\"B\",l:\"b\",w:\"Ball\"},{u:\"C\",l:\"c\",w:\"Cat\"},\n{u:\"D\",l:\"d\",w:\"Dog\"},{u:\"E\",l:\"e\",w:\"Egg\"},{u:\"F\",l:\"f\",w:\"Fish\"},\n{u:\"G\",l:\"g\",w:\"Grape\"},{u:\"H\",l:\"h\",w:\"Hat\"},{u:\"I\",l:\"i\",w:\"Ice\"},\n{u:\"J\",l:\"j\",w:\"Juice\"},{u:\"K\",l:\"k\",w:\"Key\"},{u:\"L\",l:\"l\",w:\"Lion\"},\n{u:\"M\",l:\"m\",w:\"Moon\"},{u:\"N\",l:\"n\",w:\"Nose\"},{u:\"O\",l:\"o\",w:\"Orange\"},\n{u:\"P\",l:\"p\",w:\"Pen\"},{u:\"Q\",l:\"q\",w:\"Queen\"},{u:\"R\",l:\"r\",w:\"Rabbit\"},\n{u:\"S\",l:\"s\",w:\"Sun\"},{u:\"T\",l:\"t\",w:\"Tiger\"},{u:\"U\",l:\"u\",w:\"Umbrella\"},\n{u:\"V\",l:\"v\",w:\"Violin\"},{u:\"W\",l:\"w\",w:\"Water\"},\n{u:\"X\",l:\"x\",w:\"Xylophone\"},{u:\"Y\",l:\"y\",w:\"Yellow\"},\n{u:\"Z\",l:\"z\",w:\"Zebra\"}\n];\n\nlet idx=0, upper=true, answer=0;\n\nconst card=document.getElementById(\"cardScreen\");\nconst quiz=document.getElementById(\"quizScreen\");\n\nfunction render(){\n  const a=ALPH[idx];\n  letterBig.textContent=upper?a.u:a.l;\n  letterSub.textContent=upper?a.l:a.u;\n  exampleWord.textContent=a.w;\n  progressText.textContent=`${a.u} \/ Z`;\n}\nrender();\n\nprevBtn.onclick=()=>{idx=(idx+25)%26;render();}\nnextBtn.onclick=()=>{idx=(idx+1)%26;render();}\nrandomBtn.onclick=()=>{idx=Math.floor(Math.random()*26);render();}\ntoggleCaseBtn.onclick=()=>{upper=!upper;render();}\nspeakBtn.onclick=()=>speechSynthesis.speak(new SpeechSynthesisUtterance(ALPH[idx].u));\n\ntoQuizBtn.onclick=()=>{card.style.display=\"none\";quiz.style.display=\"block\";startQuiz();}\nbackBtn.onclick=()=>{quiz.style.display=\"none\";card.style.display=\"block\";}\n\nfunction startQuiz(){\n  resultText.textContent=\"\";\n  answer=Math.floor(Math.random()*26);\n  quizQuestion.innerHTML=`\u3053\u308c\u306f\u4f55\u306e\u6587\u5b57\uff1f <span style=\"color:#e60033;font-size:1.3em;\">${ALPH[answer].u}<\/span>`;\n  const set=new Set([answer]);\n  while(set.size<4)set.add(Math.floor(Math.random()*26));\n  choices.innerHTML=\"\";\n  [...set].sort(()=>Math.random()-0.5).forEach(i=>{\n    const b=document.createElement(\"button\");\n    b.className=\"choice\";\n    b.textContent=`${ALPH[i].u} \/ ${ALPH[i].l}`;\n    b.onclick=()=>resultText.innerHTML=i===answer?\"<span style='color:#e60033;'>\u6b63\u89e3\uff01<\/span>\":\"\u4e0d\u6b63\u89e3\u2026 \u6b63\u89e3\u306f \"+ALPH[answer].u;\n    choices.appendChild(b);\n  });\n}\nnextQuizBtn.onclick=startQuiz;\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>\u30d5\u30e9\u30c3\u30b7\u30e5\u30ab\u30fc\u30c9 A \/ Z A a Apple \u30dc\u30bf\u30f3\u3067\u9032\u3081\u3066\u899a\u3048\u3088\u3046\uff01 \u2190 \u524d \u6b21 \u2192 \u30e9\u30f3\u30c0\u30e0 \u30af\u30a4\u30ba\u306b\u5207\u66ff \u767a\u97f3 \u5927\/\u5c0f \u5207\u66ff \u30af\u30a4\u30ba 4\u629e \u3053\u308c\u306f\u4f55\u306e\u6587\u5b57\uff1f \u6b21\u306e\u554f\u984c \u30ab\u30fc\u30c9\u306b\u623b\u308b<\/p>\n","protected":false},"author":1,"featured_media":821,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[17],"tags":[],"class_list":["post-819","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mini_app"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/marocchi-tencho.moo.jp\/pgschool\/wp-json\/wp\/v2\/posts\/819","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marocchi-tencho.moo.jp\/pgschool\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marocchi-tencho.moo.jp\/pgschool\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marocchi-tencho.moo.jp\/pgschool\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/marocchi-tencho.moo.jp\/pgschool\/wp-json\/wp\/v2\/comments?post=819"}],"version-history":[{"count":5,"href":"https:\/\/marocchi-tencho.moo.jp\/pgschool\/wp-json\/wp\/v2\/posts\/819\/revisions"}],"predecessor-version":[{"id":834,"href":"https:\/\/marocchi-tencho.moo.jp\/pgschool\/wp-json\/wp\/v2\/posts\/819\/revisions\/834"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marocchi-tencho.moo.jp\/pgschool\/wp-json\/wp\/v2\/media\/821"}],"wp:attachment":[{"href":"https:\/\/marocchi-tencho.moo.jp\/pgschool\/wp-json\/wp\/v2\/media?parent=819"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marocchi-tencho.moo.jp\/pgschool\/wp-json\/wp\/v2\/categories?post=819"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marocchi-tencho.moo.jp\/pgschool\/wp-json\/wp\/v2\/tags?post=819"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}