App Inventorで行こう！: BlocksEditorの文字化けとサヨナラしよう[Windows編]

　今回はWindows環境のBlocksEditorで文字化けとサヨナラしようというテーマです。

　通常、ブロックのテキストフィールドに日本語テキストを入力しても漢字が正しく表示されず、温かくておいしい豆腐さんが大量に表示されます・・・orz。

　お鍋に入っている豆腐はおいしいんですが、BlocksEditorに豆腐はいらない・・・ですよね。

　どうしてこうなるのかというと、App Inventorのソースコードを見ると分かるのですが、欧文フォントのArial（物理フォント）が決め打ちで書かれているためです。Arialフォントには日本語が含まれていないため豆腐になります。

　これが論理フォントで指定されていたなら豆腐になることも無かったのでしょうけど。

　このエントリでは、この文字化けとサヨナラするためにWindows環境でどのように設定すれば解決できるのか、その方法をご紹介します（ローカルサーバでApp Inventorを立ち上げる場合についてサーバ側のソース書き換えによる方法は別記事でご紹介します）。

追記(2012/12/04)：
　動作確認済み環境について

WindowsXPSP3(32bit) + Java6(32bit)
Windows8 Pro(64bit) + Java6(32bit)
Windows7 HP SP1(64bit) + Java7(64bit)
Windows7 HP SP1(64bit) + Java6(Jre6 jdk1.6.0_25) Thanx to KGKGKGさま

上記環境で確認しています。それ以外の組み合わせで動作確認できましたらコメント欄などでお知らせいただけるとうれしいです。その都度追記させていただきます。

　まず、必要なものを準備しましょう。

適当なフリーのTrueTypeフォント(*.ttcにパックされているものでいいです）
ttfname3.exe(という実行ファイル）
Java実行環境をインストールした場所への書き込み権限

　それぞれ順を追って説明します。

※（注意）フォントファイルの改変などについては、各フォントのライセンスに従って自己責任で行うようにしてください。また、混乱の元となりますので、情報を書き換えたフォントは決して再配布しないようにしてください。

１．適当なフリーのTrueTypeフォント

　今回は、

実用フリー（無料）フォントリンク集・・・日本語（手書き風・ペン字）

　こちらのサイトで紹介されているペン字風フォント（YOｚFontN）を使ってみます。

　YOzFont-13.09.7z（ブログ執筆時点のもの）という圧縮ファイルを入手して、圧縮ファイルから

YOzBAF.TTC

というフォントファイルを抽出します（やり方が分かったら他のフォントでも構いません）。

２．ttfname3.exe

※この方法とは異なる代替方法が別エントリにありますのでお好みで選択してください。

　ttfname3.exeというプログラムはフォントファイルからフォント情報をXMLファイルに書き出し、さらに修正を加えたXMLファイルの情報に基づいてフォント情報を置き換えてくれるツールです。

　ttfname3.exeについては、以下のサイトの情報を参照して入手してください。

Chicago Blues' Web Pages　ことば、認識と表現のページ

のサイト内にある

メイリオ・メイリオ改・meiryoKe・ttfname3

というページから取得します。

------------------------------------------------
（追記）上記のページにダイレクトにいくと別のページに飛ばされてしまうかもしれません。その場合は、次のようにアクセスしてください。

１．以下のページにアクセスする
ことば・その周辺
http://okrchicagob.blog4.fc2.com/blog-entry-169.html

２．次にアクセス先のページ内検索で

「2008.01.03ブログ内記事で取りあげたソフト・ファイルのＤＬ情報」

を見つけたら、そのすぐ下にある

「◆ メイリオ・メイリオ改・meiryoKe・ttfname3」

に張ってあるリンクをクリックして当該ページにアクセスしてください。

３．最後に表示された「メイリオ・メイリオ改・meiryoKe・ttfname3」というページに目的とするファイルアーカイブへのリンクがありますのでそちらからダウンロードしてください。
------------------------------------------------

　このツールを使って１のフォントをArial/Arial BoldだとJava実行環境に思い込ませるようにします。

※実行ファイルなので心配な方は必ずウィルスチェックしてから利用してください。

　ttfname3.exeファイルのあるフォルダと同じフォルダに１のフォントファイルを配置して、フォントファイルをttfname3.exeにドラッグ&ドロップしてください。

　すると、同じフォルダに

YOzBAF.xml

というファイルが生成されます。

　このファイルはWindowsのメモ帳で編集できますので、メモ帳にこのファイルを読み込ませ、以下の部分を書き換えて保存します。

　フォント情報はFont(0)、Font(1)、Font(2)・・・という感じに並んでいるので、最初の２つFont(0)とFont(1)部分を書き換えます。

※以下の"-"記号のところを"+"記号の内容で置き換えます（タグ内のテキスト要素だけ書き換えればOKです）。

（追記）以下のパッチファイルはGoogleDriveで公開しましたのでcygwinのある環境でpatchコマンドが使える方は$ patch.exe -p1 < YOzBAF2Arial.patchとしてパッチを当てればすぐに目的のファイルが作れます。同一フォルダにYOzBAF.xmlを置いておく必要があります。

（再追記）パッチファイルの内容が変更になっていますのでご注意ください。詳しくは別エントリに記載がありますのでそちらをご参照ください。

--- YOzBAF.xml.org 2012-12-03 17:09:16.917700200 +0900

+++ YOzBAF.xml 2012-12-02 20:40:38.653419800 +0900

@@ -22,14 +22,14 @@

<T n="3,1,0411,0">Copyright (C) Y.OzVox</T>



- <T n="1,0,0411,1">YOzFontAF</T>

- <T n="3,1,0409,1">YOzFontAF</T>

- <T n="3,1,0411,1">YOzFontAF</T>

+ <T n="1,0,0411,1">Arial</T>

+ <T n="3,1,0409,1">Arial</T>

+ <T n="3,1,0411,1">Arial</T>



- <T n="1,0,0411,2">Bold</T>

- <T n="3,1,0409,2">Bold</T>

- <T n="3,1,0411,2">Bold</T>

+ <T n="1,0,0411,2">Plain</T>

+ <T n="3,1,0409,2">Plain</T>

+ <T n="3,1,0411,2">Plain</T>



<T n="1,0,0411,3">YOzFontAF Bold</T>

@@ -37,9 +37,9 @@

<T n="3,1,0411,3">YOzFontAF Bold</T>



- <T n="1,0,0411,4">YOzFontAF Bold</T>

- <T n="3,1,0409,4">YOzFontAF Bold</T>

- <T n="3,1,0411,4">YOzFontAF Bold</T>

+ <T n="1,0,0411,4">Arial</T>

+ <T n="3,1,0409,4">Arial</T>

+ <T n="3,1,0411,4">Arial</T>



<T n="1,0,0411,5">Version 13.09</T>

@@ -115,14 +115,14 @@

<T n="3,1,0411,0">Copyright (C) Y.OzVox</T>



- <T n="1,0,0411,1">YOzFontAF</T>

- <T n="3,1,0409,1">YOzFontAF</T>

- <T n="3,1,0411,1">YOzFontAF</T>

+ <T n="1,0,0411,1">Arial</T>

+ <T n="3,1,0409,1">Arial</T>

+ <T n="3,1,0411,1">Arial</T>



- <T n="1,0,0411,2">Bold Italic</T>

- <T n="3,1,0409,2">Bold Italic</T>

- <T n="3,1,0411,2">Bold Italic</T>

+ <T n="1,0,0411,2">Bold</T>

+ <T n="3,1,0409,2">Bold</T>

+ <T n="3,1,0411,2">Bold</T>



<T n="1,0,0411,3">YOzFontAF Bold Italic</T>

@@ -130,9 +130,9 @@

<T n="3,1,0411,3">YOzFontAF Bold Italic</T>



- <T n="1,0,0411,4">YOzFontAF Bold Italic</T>

- <T n="3,1,0409,4">YOzFontAF Bold Italic</T>

- <T n="3,1,0411,4">YOzFontAF Bold Italic</T>

+ <T n="1,0,0411,4">Arial Bold</T>

+ <T n="3,1,0409,4">Arial Bold</T>

+ <T n="3,1,0411,4">Arial Bold</T>



<T n="1,0,0411,5">Version 13.09</T>

diff形式だと分かりにくいという方のために画像による差分箇所のスクリーンショットを作りましたので以下を参考にしてください。右側がオリジナルで左側が修正後のものです。

最後に、YOzBAF.TTCとYOzBAF.xmlの２ファイルを複数選択してttfname3.exeにドラッグ&ドロップしてください。YOzBAF_mod.TTCというファイルができていると思います。このファイルを適当なファイル名に変更する（しなくても大丈夫ですが）などして３へ進みます。

３．Java実行環境をインストールした場所への書き込み権限

　２で作成したフォントファイルをJava実行環境をインストールしてある場所のフォントフォルダに配置する必要があるのですが、Windows7以降は管理者権限でないと書き込みができなくなっていますので、権限が無い環境では以下の作業は実行ができませんので注意してください。

　たいていはご自分が所有しているＰＣ環境で使っていると思いますので特に問題無いとは思いますが、学校やＰＣスクールの環境では通常管理者権限は持っていないと思いますので、そのような環境で日本語対応する場合には管理者の方に相談してみてください。

　２で作成したフォントファイルを配置する場所ですが、通常Java実行環境がインストールされる場所は、

C:\Program Files (x86)\Java\jre6 (Windows8 64bit環境に32bit版JREの場合）

といった場所になっているハズです。もし該当フォルダが無い場合は、64bit用のフォルダも確認してみてください。

　もし、64bit/32bit両方のJava実行環境がインストールされている場合は、BlocksEditorがどちらで起動されているかを知る必要がありますが、分からない場合は片方ずつ試せば良いだけですので気にせずに

C:\Program Files (x86)\Java\jre6\lib\fonts

以下に２で作成したフォントを配置してください。

これで準備は整いました。

日本語を含んだブロックが存在するプロジェクトでBlocksEditorを開いてみてください。

　このように表示されれば豆腐さんとはサヨナラ、となります。やり方が分かったらお好みのフォントでお試しください。

　もし、豆腐が表示される場合は、他のJava実行環境がインストールされていないか確認してください。

　これまで日本語テキストデータを多数使ったアプリを作成されていた方はプログラムの修正作業が大変だったのではないかと思いますが、この方法により開発効率が改善されるのではないでしょうか。

　ぜひお試しください。