質問編集履歴

2 説明追加

xjaPANDA

xjaPANDA score 118

2017/09/12 20:49  投稿

[javascript][PHP] MySQLよりjsonで半角英数字を出力した際に、カンマが文字コードになってしまう。
下記のコードは、画面に表示された「I'm fine.」という文字列に対応するキーコードを変数listにある配列より取得し、文字列のはじめより、キーボートからの入力と一文字ずつ一致させて、一致した場合は、「*」に変換して、次の文字に進んでいくというものです。
表示する文字列「I'm fine.」は、var words = [{w:"I'm fine."}] のように変数wordsに定義しています。このようにjavascriptだけで書く場合は、問題なく実行できます。
一方で、問題なのは、変数wordsに、phpで表示したものを代入する場合です。
var words = <?php echo json_encode($word); ?>のように、jsonでMySQLより取得したデータを出力した場合です。この場合は、画面表示には、 「I'm fine.」と表示され一見問題なく見えますが、F12でコードを確認すると、変数wordsの部分は、var words = [{"w":"I&#039;m fine."}]; 出力され、文字列の「'」部分が文字コードの「&#039;」で出力されます。この場合、外部のキーボード入力は、「'」キーではなく「&」「#」「0」「3」「9」「;」のキーに反応するので、「'」キーだけで一致させるようにしたいと思います。
この場合どのような解決方法が考えられますでしょうか?
```ここに言語を入力
<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="utf-8">
 <title>Test</title>
 <style> body { text-align: center; } #w {font-size: 35px; letter-spacing: 3px;}</style>
</head>
<body>
<p id="w"></p>
<script>
(function() {
'use strict';
var list =
[
{   key: '73', value: 'I', shift: true},
{   key: '55', value: '\'', shift: true},
{   key: '77', value: 'm', shift: false},
{   key: '32', value: ' ', shift: false},
{   key: '70', value: 'f', shift: false},
{   key: '73', value: 'i', shift: false},
{   key: '78', value: 'n', shift: false},
{   key: '69', value: 'e', shift: false},
{   key: '190', value: '.', shift: false},
{   key: '54', value: '&', shift: true},
{   key: '51', value: '#', shift: true},
{   key: '48', value: '0', shift: false},
{   key: '51', value: '3', shift: false},
{   key: '57', value: '9', shift: false},
{   key: '187', value: ';', shift: false}
]
//var words = [{w:"I'm fine."}];  //javascript こっちは正常に実行できます。
var words = [{"w":"I&#039;m fine."}]; //phpよりjsonで出力したもの
var words = [{"w":"I&#039;m fine."}]; //phpよりjsonで出力したもの カンマが文字コードになってしまうので、キーボードより入力した際に、不具合が生じます。
   var num = words.length;
   var currentWord;
   var currentLocation;
   var w = document.getElementById('w');
   var isStarted;
   var listLength = list.length;
   var listValue;
   var currentShift;
   var wordsShift;
   var shift;
//*Convert words[] to keyCode
   var words_key = [];
   var key_num = 0;
   for (var x = 0; x < words.length; x++) {
     for (var y = 0; y < words[x].w.length; y ++){
       for (var j = 0; j < listLength; j++) {
         if(list[j].value == words[x].w[y]){
           words_key[key_num] = list[j].key;
           key_num++
         }
       }
     }
   }
//初期画面
   function init() {
     currentWord = 'Start';
     currentLocation = 0;
     w.innerHTML = currentWord;
     isStarted = false;
   }
   init();
//実行
   window.addEventListener('keyup', function() {
     if (!isStarted) {
       isStarted = true;
       currentWord = words[0].w;
       w.innerHTML = currentWord;
     }
   });
//判定
   window.addEventListener('keydown', function(e) {
     if (!isStarted) {
       return;
     }
     for (var j = 0; j < listLength; j++) {
         if(list[j].value == currentWord[currentLocation]){
         currentShift = list[j].shift;
        }
     }
     wordsShift=false;
     shift = e.shiftKey;
     for (var j = 0; j < listLength; j++) {
         if(list[j].key == e.keyCode && list[j].shift == shift){
         listValue = list[j].value;
         wordsShift=list[j].shift;
        }
     }
     if (listValue == currentWord[currentLocation]){
       currentLocation++;
     var placeholder = '';
     for (var i = 0; i < currentLocation; i++) {
       placeholder += '*';
     }
       
     w.innerHTML = placeholder + currentWord.substring(currentLocation);
   }
 });
})();
</script>
</body>
</html>
```
  • PHP

    27321 questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    24270 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • MySQL

    8060 questions

    MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

  • jQuery

    9493 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1 説明の追加

xjaPANDA

xjaPANDA score 118

2017/09/12 20:47  投稿

[javascript][PHP] MySQLよりjsonで半角英数字を出力した際に、カンマが文字コードになってしまう。
下記のコードは、画面に表示された「I'm fine.」という文字列に対応するキーコードを変数listにある配列より取得し、文字列のはじめより、キーボートからの入力と一文字ずつ一致させて、一致した場合は、「*」に変換して、次の文字に進んでいくというものです。
表示する文字列「I'm fine.」は、var words = [{w:"I'm fine."}] のように変数wordsに定義しています。このようにjavascriptだけで書く場合は、問題なく実行できます。
一方で、問題なのは、変数wordsに、phpで表示したものを代入する場合です。
var words = <?php echo json_encode($word); ?>のように、jsonでMySQLより取得したデータを出力した場合です。この場合は、画面表示には、 「I'm fine.」と表示され一見問題なく見えますが、F12でコードを確認すると、変数wordsの部分は、var words = [{"w":"I&#039;m fine."}]; 出力され、文字列の「'」部分が文字コードの「&#039;」で出力されます。この場合、外部のキーボード入力は、「'」キーではなく「&」「#」「0」「3」「9」「;」のキーに反応するので、「'」キーだけで一致させるようにしたいと思います。
この場合どのような解決方法が考えられますでしょうか?
```ここに言語を入力
<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="utf-8">
 <title>Test</title>
 <style> body { text-align: center; } #w {font-size: 35px; letter-spacing: 3px;}</style>
</head>
<body>
<p id="w"></p>
<script>
(function() {
'use strict';
var list =
[
{   key: '73', value: 'I', shift: true},
{   key: '55', value: '\'', shift: true},
{   key: '77', value: 'm', shift: false},
{   key: '32', value: ' ', shift: false},
{   key: '70', value: 'f', shift: false},
{   key: '73', value: 'i', shift: false},
{   key: '78', value: 'n', shift: false},
{   key: '69', value: 'e', shift: false},
{   key: '190', value: '.', shift: false},
{   key: '54', value: '&', shift: true},
{   key: '51', value: '#', shift: true},
{   key: '48', value: '0', shift: false},
{   key: '51', value: '3', shift: false},
{   key: '57', value: '9', shift: false},
{   key: '187', value: ';', shift: false}
]
//var words = [{w:"I'm fine."}];  //javascript
//var words = [{w:"I'm fine."}];  //javascript こっちは正常に実行できます。
var words = [{"w":"I&#039;m fine."}]; //phpよりjsonで出力したもの
   var num = words.length;
   var currentWord;
   var currentLocation;
   var w = document.getElementById('w');
   var isStarted;
   var listLength = list.length;
   var listValue;
   var currentShift;
   var wordsShift;
   var shift;
//*Convert words[] to keyCode
   var words_key = [];
   var key_num = 0;
   for (var x = 0; x < words.length; x++) {
     for (var y = 0; y < words[x].w.length; y ++){
       for (var j = 0; j < listLength; j++) {
         if(list[j].value == words[x].w[y]){
           words_key[key_num] = list[j].key;
           key_num++
         }
       }
     }
   }
//初期画面
   function init() {
     currentWord = 'Start';
     currentLocation = 0;
     w.innerHTML = currentWord;
     isStarted = false;
   }
   init();
//実行
   window.addEventListener('keyup', function() {
     if (!isStarted) {
       isStarted = true;
       currentWord = words[0].w;
       w.innerHTML = currentWord;
     }
   });
//判定
   window.addEventListener('keydown', function(e) {
     if (!isStarted) {
       return;
     }
     for (var j = 0; j < listLength; j++) {
         if(list[j].value == currentWord[currentLocation]){
         currentShift = list[j].shift;
        }
     }
     wordsShift=false;
     shift = e.shiftKey;
     for (var j = 0; j < listLength; j++) {
         if(list[j].key == e.keyCode && list[j].shift == shift){
         listValue = list[j].value;
         wordsShift=list[j].shift;
        }
     }
     if (listValue == currentWord[currentLocation]){
       currentLocation++;
     var placeholder = '';
     for (var i = 0; i < currentLocation; i++) {
       placeholder += '*';
     }
       
     w.innerHTML = placeholder + currentWord.substring(currentLocation);
   }
 });
})();
</script>
</body>
</html>
```
  • PHP

    27321 questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    24270 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • MySQL

    8060 questions

    MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

  • jQuery

    9493 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る