How to fix the Garbled characters in Java Servlet
Eclipse で JavaServlet を作って実行したら文字化けしてしまいました。そのときの文字化けの原因と直し方をまとめました。
環境
- Windows 7
- Internet Explorer 11
- Eclipse Luna
JavaServlet で文字エンコードを指定する方法
JavaServlet で文字化けを起こさないためには文字エンコードを指定します。文字エンコードの指定は Web ブラウザーに文字エンコードなどを伝える「ヘッダー」や、画面に表示する「本文」の meta タグなどで出来ます。
ヘッダーの文字エンコードは response.setCharacterEncoding や response.setContentType で指定します。
文字化けが起きた JavaServlet
ヘッダーと本文の両方に文字エンコードを指定したのに文字化けが起きた JavaServlet のソースは次の通りです。UTF-8 で出力したいのでヘッダーには setCharacterEncoding と setContentType で、本文には meta タグで 指定したつもりですが実行すると下の画像のように日本語が文字化けしました。
原因と直し方
原因は doGet メソッドで文字エンコードを指定する前に本文を出力していたためでした。文字化けした JabavServlert は文字のエンコードを指定する response.setCharacterEncoding や response.setContentType を実行するよりも先に
response.getWriter().append("Served at: ").append(request.getContextPath());
を実行していますが、この response.getWriter() ... が 文字エンコードの指定前に HTML の本文を出力してしまい文字化けの原因となっていました。
response.getWriter() ... の行は Eclipse のウィザードで新規に JSP ファイルを作成するとはじめから記入されているのですが、消さずにコーディングを続けたために残ってしまいました。
response.getWriter() ... の行を response.setContentType ... の次の行に移動して実行した結果が次の通りです。
今回の文字化けは doGet や doPost で最初に response.setCharacterEncoding や response.setContentType で文字エンコードを指定することで直りました。
ブラウザーはどう解釈してるのか確かめる
文字化けするときとしないときとで Internet Explorer の F12 開発者ツールで応答ヘッダーがどう変わるのか見てみました。文字化けしたときの応答ヘッダーは charset=ISO-8859-1 となっていました。
JavaServlet で本文を先に出力してしまうとヘッダーを正常に出力出来ないようです。
また、文字エンコードを meta タグに指定しても、今回のケースは効果がなかったうようです。
文字化けが直った方法で応答ヘッダーを確認すると charset が指定した通りに変わりました。
関連ブログ
JavaScript でグラフを作る方法 (Chart.js)JavaScriptをWebコンテンツを見ながらデバッグする [Intenet Explorer] [firefox]
HTMLソースのミスやエラーを素早くチェックする




![blog.fujiu.jp [Android] Xamarin で jar (Javaライブラリー) を実行する方法](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAJ-n3mhj3WqeQiT1ejLJD0Q7ftUtUF7wH5vtfzT7vbfXSkFJH9JsNaC4BUmWRJDP4foz8aE_TnaLxg186AGsmd4XK7etFTjf19_letP7PCaibhB1JiUY0dpuKDCSRsl4k1juQQ8Uo7BY/s200/xamarin_jar01.png)










![blog.fujiu.jp [Android] Xamarin で実行できる jar (Javaライブラリー) の作り方](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYAgTbH_VNqfaMNhGdCwli2ACtOPe2OXQGDqHtPIxzH5cdk8qY7AiwJOIH1GXlyHzTfbH4lPwDyfWuElyum96U7w9-kqK2Ui-gNhr4OycEzi797ORlueFsQWTLM5a5BU541eHjCYvwkpc/s200/android_jar01.png)





















![blog.fujiu.jp [クラウド] BluemixのJavaアプリ開発ではまったところと対処方法](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1R-AYoaqYY1VhIabLonkZC0SUoQOL0XSdQgYRKpj2eqVq979R5WJzf5eyhfXjSMe9Bq7KJUfbgcOJXf_T6Wr3f4ud7uzo4SuKRY1_DHjLQiY0UtFQSeJIdKqQyatqc39l9qzvsu0NQxI/s200/bluemix03.png)

![blog.fujiu.jp [クラウド] Bluemix にJavaアプリを実装するまで](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj215u2MU7iQa-eiZdoPl7wl4tP6fdGNlbZ1CiUhgOi63qaj7AGmdhEFshYzXo-7xVtFdfqWJbF2837rhpfOFSNCR-sGw_KC2QjwTSwYRaEHUDbuUSjj0oU7Fk4HLTxEpoWS_vkd0MDpxo/s200/TweetNicoMovieForQuerychan.png)










