書き残し

文字化けがモヤモヤした件:Unicodeめ!!とか機種依存文字とかの話。


文字化けがモヤモヤした件:Unicodeめ!!とか機種依存文字とかの話。
会社でこちらの件でモヤモヤして最終的に解決できたのだけど
なんだか腑に落ちないので自宅に帰って文字化けの検証をしてみました。
いま勤めている会社、昔ながらのWEBシステムなのか、もしくは
サイトコピー防止の為なのか、euc-jpコードで動いています。
なのでWEBシステムのファイルはEUCなのです。
ここで問題が発生したわけですけど
ajaxで処理をPHP側に投げjsonで返却値が返ってくる場合、
JSはUTF-8なのでUTF-8に文字を変換し返しているわけです、
表面上文字は機種依存文字以外は難なく表示されます。
そこでその戻ってきた文字をコピペして
Windowsのテキストファイルなどにペースト(貼り付ける)すると
文字化けを起こす文字があります。どんな文字が文字化けが発生するかというと、
JIS X 208問題がおきるのです。
何故・・・起きるのかPHPでエンコードするときの問題、
UTF-8で返ってきた後、Unicodeコードの
対応表に従って変換しないといけないと文字化けが発生すると
考えていたのだけど、、そうでは無かった。
Windowsのエディタは基本的にSJIS-Winの文字コードなら文字化けをしない。
要するにJSで送られてきた値はUTF-8を介しているけど
基本SJIS-Winの文字コードな訳だから
UTF-8からSJIS-Winに変換し返す時は、SJIS-WinからUTF-8に変換し
返却してあげることで問題がなくなる。
※但しGETやPOSTで渡されたデータで処理や判断を行う場合。
ファイルがEUC-JPだったりすると
やはりEUC-JP に変換(エンコード)してあげないといけないということをお忘れなく。
じゃMacはどうするのさ~って事だけど
これはUTF-8のままで良い、何もしてあげることはないということ。
スマホブラウザもそんな感じですね。こういう問題が起きるのは
ファイルがEUC-JPやShift-JISなどになっている時に起こる現象なので
UTF-8は駄目という方針でない限り、UTF-8に
ファイルやキャラセットなどを統一したほうが
良いです。そろそろ会社のシステムもUTF-8に変える時期なのかなぁとか
思いますが、何社もEUCで作っていてエンコード部分を修正しないとなると大変だと。
やはりズルズルとEUC-JPをまだ当分の間、使用する事になりそうですね。

ソースを掲載しときます。
ご参考まで。
https://zip358.com/tool/demo/
適当なUnicodeCSV一覧データ。
https://zip358.com/tool/demo/Unicodelist.csv

<!DOCTYPE html>
<html>
  <head>
    <meta charset="euc-jp">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>文字化け</title>
    <meta name="viewport" content="user-scalable=no,initial-scale = 1.0,maximum-scale = 1.0">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../topcoat/main/fonts/stylesheet.css">
    <link rel="stylesheet" type="text/css" href="../topcoat/css/topcoat-desktop-dark.css">
    <link rel="stylesheet" type="text/css" href="../topcoat/main/css/main.css">
    <link rel="stylesheet" type="text/css" href="../topcoat/main/css/brackets.css"><!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <script>
        $(function(){$('#btn').click(function(){
                $.ajax({
                    url:'ajax.php',
                    type:'post',
                    dataType:'json',
                    data:{texts:$('#texts').val()
                    }
                }
                        ).done(function(obj){
                            $('#texts2').val(obj.html2);
                        }).fail(function(){
                            $('#texts2').val();
                        });
                    });
                });
        $(function(){$('#btn2').click(function(){
                $.ajax({
                    url:'ajax.php',
                    type:'post',
                    dataType:'json',
                    data:{texts:$('#texts').val()
                    }
                }
                        ).done(function(obj){
                        $.ajax({
                            url:'Unicodelist.csv'
                                }
                                ).done(function(data){
                                var csv = data.split("\n");
                                for(var i=1;i<csv.length;i++){
                                var csvchk = csv[i].split(",");
                                var chk_str = '\\u'+csvchk[6];
                                var chg_str = csvchk[7];
                                if(csvchk[7]){
                                        chg_str = chg_str.replace(/[\r\n|\n]/g,"");
                                        obj.html2=obj.html2.replace(new RegExp(chk_str, 'gi') ,chg_str);
                                        $('#texts2').val(obj.html2);
                                    }
                                }
                                }).fail(function(){
                                    $('#texts2').val();
                                });
                                }).fail(function(){
                                    $('#texts2').val();
                                });
                    });
                });
        $(function(){$('#btn3').click(function(){
                $.ajax({
                    url:'ajax.php',
                    type:'post',
                    dataType:'json',
                    data:{texts:$('#texts').val()
                    }
                }
                        ).done(function(obj){
                            $('#texts2').val(obj.html);
                        }).fail(function(){
                            $('#texts2').val();
                        });
                    });
                });
                            </script>
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');ga('create','UA-71682075-1','auto');ga('send','pageview');</script>
  </head>
  <body class="dark">
      <div id="wrapper">
          <section class="component">
                <h1>文字化け検証</h1>
                <div>?????</div>
                <textarea class="topcoat-textarea" id="texts" rows="6" cols="36" placeholder="日本語を入力"></textarea><br>
                <button class="topcoat-button--large--cta" id="btn">Button1(文字化け)</button><br>
                <button class="topcoat-button--large--cta" id="btn2">Button2(文字化け機種依存文字)</button><br>
                <button class="topcoat-button--large--cta" id="btn3">Button3(WIN文字化けしない)</button><br>
                <textarea class="topcoat-textarea" id="texts2" rows="6" cols="36" placeholder=""></textarea><br>
            </section>
      </div>
  </body>
</html>

 

<?php
define('Charset', 'EUC-JP');
$obj['html']=mb_convert_encoding($_POST['texts'],'SJIS-win','UTF-8');
$obj['html']=mb_convert_encoding($obj['html'],'UTF-8','SJIS-win');
$obj['html2']=mb_convert_encoding($_POST['texts'],'EUC-JP','UTF-8');
$obj['html2']=mb_convert_encoding($obj['html2'],'UTF-8','EUC-JP');
echo json_encode($obj);

 

The following two tabs change content below.
zip358と申します。 まったりWEB日誌を更新している中の人です? 趣味は映画鑑賞とブログ書きです、 こちらで生活できるようになるのが目標です。 ブックマークやシェアして頂けると励みになります。 どうぞよろしくお願い致します。

関連記事

  1. 書き残し

    機械学習で地震に関する文章なのか判断するコード。

    機械学習で地震に関する文章なのか判断するコード。機械学習のライブラ…

  2. 書き残し

    ポケモンGO、GitHubに続々現れているAPIとかでてるよ。

    昨日、新婚ホヤホヤみたいな夫がPokémon Go(ポケモンGO)を…

  3. 書き残し

    スマホ対策をしないと収益につながらないみたいだ。

    スマホ対策をしないと収益につながらないみたいです。いま、このサイトを…

  4. 書き残し

    結局、SNSなんてものは暇な時しか使わない?

    結局、SNSなんてものは暇な時しか使わない?もしくは宣伝か、やり取…

  5. 書き残し

    順不同:ITエンジニア系を一覧化してみた。

    ITエンジニア系を一覧化してみました。有名な人からあまり知られていな…

2017年7月
 123
45678910
11121314151617
18192021222324
252627282930  

アクセスカウンター😅

とある高知県の気温や湿度

Twitter でフォロー

PAGE TOP