自動しりとりプログラムを作ろう(5)

しりとり候補サンプル

とりあえずインタフェースとコアロジックっぽいものを別々に書いているところです。
テキストボックスに文字列を入力すると、その文字列に対してしりとりの候補を
返すテストスクリプトができたので貼っておきます。

しりとり返答候補

与えられた文字列の末尾に、50音のうち3音をランダムでくっつけて
GoogleSuggestに投げて返答を表示しているだけです。

<html>
<head>
<meta charset="utf-8" />
<title>しりとりテスト</title>
<script type="text/javascript" src="./js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="./js/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="./style.css" media="all">

<script>
// ドキュメント構築後に読み込まれる
jQuery(function($){

  // 50音テーブルはとりあえずガチ配列で持つ
  var KANA_TABLE = [
    "あ","い","う","え","お",
    "か","き","く","け","こ",
    "さ","し","す","せ","そ",
    "た","ち","つ","て","と",
    "な","に","ぬ","ね","の",
    "は","ひ","ふ","へ","ほ",
    "ま","み","む","め","も",
    "や","ゆ","よ",
    "ら","り","る","れ","ろ",
    "わ","ん"
  ];  // 45文字

  // しりとりボタンが押されたら実行される処理
  $("#siritori").click(procSiritori);

  // 引数で与えられた文字列の先頭がアルファベットかどうかを判定する
  function isAlphabet(str){
    var exp = /^[a-zA-Z]/;
    if(str.charAt(0).match(exp)){
      return true;
    }else{
      return false;
    }
  }

  // 引数nを最大値とする乱数の配列を、ランダムな配置で返す
  function randomIndex(n){
    var i, j, tmp, a = new Array(n);
    a[0] = 0;
    for(i = n - 1; i > 0; i--) {
        j = Math.floor(Math.random() * (i+1));
        tmp = a[i] || i;
        a[i] = a[j] || j;
        a[j] = tmp;
    };
    return a;
  }

  // 結果テーブルをクリア
  function clearResultTable(){
    $("#candidate_1").empty();
    $("#candidate_2").empty();
    $("#candidate_3").empty();
  }

  // 結果をテーブルに格納する
  function setResultToTable(index, result_array){
    //結果をテーブルに格納する
    $.each(result_array, function(i, value){

      var td_element = $("<td></td>",{
        width: "200px",
        text: value
      })

      switch( index ){
        case 0:
          $("#candidate_1").append(td_element);
          break;
        case 1:
          $("#candidate_2").append(td_element);
          break;
        case 2:
          $("#candidate_3").append(td_element);
          break;
        default:
          alert("不正な処理です");
      }
    });
  }

  // しりとり処理の実行関数
  function procSiritori(){
    // テキストボックスに入力された値を取得
    var input_text = $("#text_input").val();
    console.log(input_text);

    // 入力欄が空だったら何もしない
    if( input_text != "" ){
      // sliceはマイナス指定を行うと後ろから文字列を切ってくれる
      var last_word = input_text.slice(-1);
      console.log(last_word);

      // 最期の文字が日本語じゃなかったらNG
      if( isAlphabet(last_word) == false ){
        console.log("しりとり開始!");

        // 結果格納テーブルを空にする
        clearResultTable();

        // WebAPIになげかける文字候補を3つ生成する
        var random_index_array = randomIndex(45);
        var candidate_words = [
          last_word + KANA_TABLE[random_index_array[0]],
          last_word + KANA_TABLE[random_index_array[1]],
          last_word + KANA_TABLE[random_index_array[2]]
        ];
        console.log(candidate_words);

        // jQueryにはeachメソッドがある
        var result = new Array();
        $.each(candidate_words, function(i, value){

          // GoogleSuggest呼び出し
          $.ajax({
              url: "http://www.google.com/complete/search",
              data: {hl:'ja', client:'firefox', q:value},
              dataType: "jsonp",
              type: "GET",
              success :function(data) {
                  console.log(data[1]);
                  result[i] = JSON.parse(JSON.stringify(data[1]));
                  setResultToTable( i, result[i] );
              }
          });

        }); // each(candidate_words, function(i, value){
      }   // if( isAlphabet(last_word) == false )
    }   // if( input_text != "" ){
  }   // function

});
</script>

</head>
<body>
<input type="text" id="text_input"/>
<button id="siritori">しりとり</button>
<div id="log">
</div>
<div id="result">
<table width="400" border="1" id="result_table">
  <tr id="candidate_1">
  </tr>
  <tr id="candidate_2">
  </tr>
  <tr id="candidate_3">
  </tr>
</table>
</div>
</body>
</html>

ちょっと詰まったのは、クロージャがajaxを呼ぶと非同期処理になるため、
結果をテーブルに挿入する箇所はajaxの処理を待たなくちゃいけないところ。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です