記録

文字化けがモヤモヤした件: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://www.zip358.com/tool/demo/
適当なUnicodeCSV一覧データ。
https://www.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);

 

副業という壁(日本)。前のページ

友だちが少ないがそれは問題ではない。むしろ多い人のほうが?次のページ

関連記事

  1. 記録

    何でもどうぞとすごく挑戦的ですね。グーグルさんの検索入力ボックス

    グーグルさんの検索入力ボックス 何でもどうぞとすごく挑戦的…

  2. 記録

    私はITエンジニアという職業ですが英語はズタボロです。

    私はITエンジニアという職業ですが英語はズタボロです。ズタボロです…

  3. 記録

    Twitterの名前、記号部分を天気予報のアイコン、夜は月のアイコンへと変更する。

    Twitterの名前の特定の記号部分(■や@部分)を天気予報のアイコ…

  4. 記録

    inliving=いん りびんぐと読みます。

    いんりびんぐ(ririka / vlog)さんのvlogです。…

  5. 記録

    リア友と繋がらないSNS-elmyアプリ!!

    リア友と繋がらないSNS-elmy(エルミー)アプリをDeNAが作っ…

PAGE TOP