BlocksEditorの文字化けとサヨナラしよう[サーバサイド編]

　今回は「BlocksEditorの文字化けとサヨナラしよう[サーバサイド編]」です。

　これまでにご紹介した方法は、クライアント側の設定で文字化けを解消する手法でした。

　App Inventorはご存知のようにオープンソース化されていますので、サーバサイドにパッチを当てることで文字化け問題を解消することが可能です。

　もちろん、この方法で可能なのは独自にローカルサーバを立てている場合でしかないのですが、例えばＰＣ教室や学校などでクライアント側（備え付けＰＣやユーザさんの持ち込み個人ＰＣ等）に手を加えられないor加えたくない事情がある場合に有効であると考えられます。

　



　そもそもなぜWindows環境で文字化けするのかですが、これについてはWindows編で簡単に触れましたが、サーバ側のソースコード内で欧文フォントであるArialフォントを指定しているために発生している問題です。

　従って、このフォント指定部分を"論理フォント"指定か"Default"指定することで解消することが可能です。

　App Inventorのソースコードは以下から入手可能です。


MIT App Inventor Public Open Source


GitHub


Build方法は同サイトの以下のドキュメントに書かれている通りに作業すれば簡単にできます。

How to build App Inventor from the MIT sources


文字化けに関連するソースコードは

mit-cml/appinventor-sources/blob/master/appinventor/blockslib/src/openblocks/renderable/BlockLabel.java

になります。

　App Inventorのソース(GitHubからpullしたもの)に以下のpatchを当てると冒頭の画像のようにWindowsのBlocksEditorで文字化け（豆腐化）しなくなります。

--- appinventor/appinventor-sources/appinventor/blockslib/src/openblocks/renderable/BlockLabel.java     2012-11-12 21:49:40.645997052 +0900
+++ customappinventor/appinventor-sources/appinventor/blockslib/src/openblocks/renderable/BlockLabel.java       2012-11-27 00:54:38.224913258 +0900
@@-44,12+44,12 @@
   /**Enum for the different types of labels in codeblocks */
   public enum Type { NAME_LABEL, PAGE_LABEL, PORT_LABEL, DATA_LABEL, DECORATOR_LABEL }

-  public final static Font blockFontSmall_Bold  = new Font("Arial", Font.BOLD, 7);
-  public final static Font blockFontMedium_Bold = new Font("Arial", Font.BOLD, 10);
-  public final static Font blockFontLarge_Bold  = new Font("Arial", Font.BOLD, 12);
-  public final static Font blockFontSmall_Plain  = new Font("Arial", Font.PLAIN, 7);
-  public final static Font blockFontMedium_Plain = new Font("Arial", Font.PLAIN, 10);
-  public final static Font blockFontLarge_Plain  = new Font("Arial", Font.PLAIN, 12);
+  public final static Font blockFontSmall_Bold  = new Font("Default", Font.BOLD, 7);
+  public final static Font blockFontMedium_Bold = new Font("Default", Font.BOLD, 10);
+  public final static Font blockFontLarge_Bold  = new Font("Default", Font.BOLD, 12);
+  public final static Font blockFontSmall_Plain  = new Font("Default", Font.PLAIN, 7);
+  public final static Font blockFontMedium_Plain = new Font("Default", Font.PLAIN, 10);
+  public final static Font blockFontLarge_Plain  = new Font("Default", Font.PLAIN, 12);

   private LabelWidget widget;
   /** These keys inputs are delegated back to renderable block */



　上記patchでは"Default"に変更しましたが、ここを論理フォント名の"SansSerif"などにしても文字化けが直ります。

　独自にApp Inventorのサーバを立てておられる方はお試しください。