あいうえおブロック知育パズルアプリしゃべる英語ブロック

あいう
ABC

あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの
はひふへほ
まみむめも
や゛ゆ゜よ
らりるれろ
わ？を！ん

ABCD
EFGH
IJKL
MNOP
QRST
UVWX
YZ+-
=@*$


  view source
  JavaScript
  document.title = 'あいうえおブロック 知育パズルアプリ しゃべる 英語ブロック';

$(function(){
  var zIndex = 99;
  var colors = [
    'rgb(180,9,5)',
    'rgb(240,90,7)',
    'rgb(240,230,10)',
    'rgb(100,230,50)',
    'rgb(10,120,70)',
    'rgb(20,190,200)',
    'rgb(30,200,250)',
    'rgb(0,50,230)',
    'rgb(90,90,250)',
    'rgb(130,40,200)',
  ];
  var consonantAry = [
    '','k','s','t','n','h','m','y','r','w',
  ];
  var vowelAry = [
    'a','i','u','e','o',
  ];

  var textWords = {
a:{kana:'あひる',yomi:'アヒル'},
i:{kana:'いぬ',yomi:'犬'},
u:{kana:'うま',yomi:'馬'},
e:{kana:'えんぴつ',yomi:'鉛筆'},
o:{kana:'おにぎり',yomi:'おにぎり'},

ka:{kana:'かえる',yomi:'カエル'},
ki:{kana:'きのこ',yomi:'キノコ'},
ku:{kana:'くつ',yomi:'靴'},
ke:{kana:'けーき',yomi:'ケーキ'},
ko:{kana:'ころっけ',yomi:'コロッケ'},

sa:{kana:'さかな',yomi:'さかな'},
si:{kana:'しんごう',yomi:'信号'},
su:{kana:'すいか',yomi:'スイカ'},
se:{kana:'せみ',yomi:'蝉'},
so:{kana:'そーせーじ',yomi:'ソーセージ'},


ta:{kana:'たぬき',yomi:'たぬき'},
ti:{kana:'ちきゅう',yomi:'地球'},
tu:{kana:'つみき',yomi:'積み木'},
te:{kana:'てれび',yomi:'テレビ'},
to:{kana:'とけい',yomi:'時計'},

na:{kana:'なっとう',yomi:'納豆'},
ni:{kana:'にんじん',yomi:'人参'},
nu:{kana:'ぬいぐるみ',yomi:'ぬいぐるみ'},
ne:{kana:'ねこ',yomi:'猫'},
no:{kana:'のりもの',yomi:'乗り物'},

ha:{kana:'はな',yomi:'花'},
hi:{kana:'ひつじ',yomi:'羊'},
hu:{kana:'ふうせん',yomi:'風船'},
he:{kana:'へび',yomi:'蛇'},
ho:{kana:'ほし',yomi:'星'},

ma:{kana:'まんが',yomi:'漫画'},
mi:{kana:'みず',yomi:'水'},
mu:{kana:'むし',yomi:'虫'},
me:{kana:'めがね',yomi:'メガネ'},
mo:{kana:'もも',yomi:'桃'},

ya:{kana:'やま',yomi:'やま'},
yu:{kana:'ゆきだるま',yomi:'雪だるま'},
yo:{kana:'よる',yomi:'夜'},


ra:{kana:'らいおん',yomi:'ライオン'},
ri:{kana:'りんご',yomi:'りんご'},
ru:{kana:'るすばん',yomi:'留守番'},
re:{kana:'れもん',yomi:'レモン'},
ro:{kana:'ろけっと',yomi:'ロケット'},


wa:{kana:'わかんない',yomi:'わかんない'},
wo:{kana:'んこ',yomi:'うんこ'},

en_A:{kana:'Apple'},
en_B:{kana:'Book'},
en_C:{kana:'Cat'},
en_D:{kana:'Dog'},
en_E:{kana:'Egg'},
en_F:{kana:'Flower'},
en_G:{kana:'Gold'},
en_H:{kana:'Heart'},
en_I:{kana:'Ice'},
en_J:{kana:'Juce'},
en_K:{kana:'King'},
en_L:{kana:'Lion'},
en_M:{kana:'Monkey'},
en_N:{kana:'Notebook'},
en_O:{kana:'Orange'},
en_P:{kana:'Pineapple'},
en_Q:{kana:'Queen'},
en_R:{kana:'Rabbit'},
en_S:{kana:'Star'},
en_T:{kana:'Train'},
en_U:{kana:'Umbrella'},
en_V:{kana:'Violin'},
en_W:{kana:'Watch'},
en_X:{kana:'Xmas'},
en_Y:{kana:'Yen'},
en_Z:{kana:'Zebra'},
  };
//https://www.irasutoya.com/

  var setText = function(_target){
    var target = _target || '#aiueo';
    $('table').remove();
    var ele = $(target);
    var text = ele.text();
    ele.hide();
    var lines = text.split('\n');
    var table = $('<table>');
    if(_target === '#abc'){
      table.addClass('en')
    }
    
    $('#demo').append(table);
    lines.forEach(function(line,i){
      var tr = $('<tr>');
      table.append(tr)
      var chars = line.split('');
      chars.forEach(function(v,j){
        var td = $('<td>');
        var title = consonantAry[i] + vowelAry[j];
        if(_target === '#abc'){
          title = 'en_'+v;
        }
        var p = $('<p>').text(v)
          .attr({title:title})
          .css({backgroundColor:colors[i]});
        if(v==='゛' || v==='゜'){
          p.addClass('dot');
        }
        var ii = $('<i>').text(v);

        p.on('mousedown', function(){
          zIndex++;
          $(this).css({zIndex:zIndex})
        });
        p.on('click', function(){
          var v = $(this).text();
          if(v.match(/[あ-んA-Z]/)){
            talk(v);
          }
        });
        p.on('dblclick', function(){
          var v = $(this).text();
          if(v.match(/゜/)){
            setText('#abc')
          }
          if(v.match(/@/)){
            setText('#aiueo')
          }
        });

        td
          .append(p)
          .append(ii);
        p.draggable();
        tr.append(td);

        var word = textWords[title];
        if(word !== undefined){
          console.log(word);
          td.css({backgroundImage:'url(/img/irasutoya/'+title+'.png)'});
          b = $('<b>').text(word.kana);
          td .append(b)
          b.on('click', function(){
            var lang = 'ja-JP';
            if(!word.yomi){word.yomi = word.kana;lang = 'en-US'}
            talk(word.yomi, lang);
          });
        }

      });
    });
  }
  setText();

  $('li').on('click', function(){
    _target = $(this).attr('target');
    setText(_target);
  });
});






var url = new URL(location);
var ch = '';


window.speechSynthesis.onvoiceschanged = () => {
  this.voices = window.speechSynthesis.getVoices();
};
var voices = window.speechSynthesis.getVoices();
function talk(v, lang='ja-JP'){
  voices = window.speechSynthesis.getVoices();
  var voiceJa = voices[5];
  var utter = new SpeechSynthesisUtterance(v);
  utter.voice = voiceJa;
  utter.volume = 1;
  utter.rate = 1;
  utter.pitch = 1;
  utter.lang   = lang;
  voices = window.speechSynthesis.getVoices();
  utter.voice = voices[1];
  console.log(utter);
  var langText = '日本';
  if(lang === 'en-US'){
    langText = 'Eng';
  }
  var reg = new RegExp(langText);
  voices.forEach(function(v, i){
    if(v.name.match(reg)){
      utter.voice = voices[i];
    }
  });
  window.speechSynthesis.speak(utter);
}

  CSS
  html,body{
  overflow:hidden;
}

pre{
  display:none;
}
table,tr,td,p{
  box-sizing:border-box;
}
ul{
  width:100%;
  display:flex;
}
ul li{
  width:50%;
  height:5vh;
  line-height:5vh;
  text-align:center;
  font-weight:bold;
  color:#fff;
  font-size:3vh;
}
ul li:nth-child(1){
  background-color:#a00;
}
ul li:nth-child(2){
  background-color:#00a
}

table{
  width:100%;
  height:95vh;
  user-select:none;
}
tr{
}
td{
  border:1px solid #ccc;
  width:20%;
  height:9vh;
  font-size:6vh;
  text-align:center;
  vertical-align:middle;
  cursor:crosshair;
  position:relative;
  left:0;
  top:0;
  background-size:auto 100%;
  background-repeat:no-repeat;
  background-position:50% 100%;
}
td:hover{
  background-color:#fafafa;
}
p{
  display:inline-block;
  border-radius:50%;
  border:8px solid #000;
  padding:4px;
  font-weight:bold;
  color:#fff;
  z-index:99;
  cursor:pointer;
  text-shadow:#000 4px 4px 4px;
  font-family:monospace;
}

.en p{
  padding:4px 16px;
}

p.dot{
  border-color:transparent;
  background-color:transparent !important;
}
i{
  position:absolute;
  left:0;
  top:0;
  color:#ccc;
}
b{
  position:absolute;
  right:0;
  bottom:0;
  font-weight:bold;
  color:#666;
  text-stroke: 2px #FFF;
  font-size:3vh;
}
#code,footer{
  display:none;
}

  HTML
  
    ページのソースを表示 : Ctrl+U , DevTools : F12
    view-source:https://hi0a.com/demo/-js/js-text-aiueo/
  
  ABOUT
  
    hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。
    プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。
    必要な機能の関数をコピペ利用したり勉強に活用できます。
    プログラムの動作サンプル結果は画面上部に出力表示されています。
    環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。
    画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。
    動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。
    途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。