Snap!(BYOB 4.0)の日本語入力について

このページで以下に記載するIME経由での日本語入力可能にするjavascriptと追加の翻訳を入れたjavascriptをそれぞれ一つのブロックにして,プロジェクトをxmlファイルにしたものをhttp://herb.h.kobe-u.ac.jp/Support_Japanese.xmlにおいてある。このファイルをダウンロードして,Snap!で読み込み,スクリプトエリアにあるブロックを実行すると,日本語入力が可能になり日本語の翻訳も追加される。ただし,作成したプロジェクトを保存しても,ブラウザーを一旦閉じると,次に開く時には再度上記のブロックを実行しないと日本語入力はできないことに注意してほしい。

ここで記載した方法はSnap!の派生のTurtleStitchに対しても適用可能である。

Snap 4.1が公開されたが,日本語入力は不可のままである。ここで記載する方法はSnap 4.1に対しても有効である。(2017.10.22追記)

日本語入力について

Snap!(BYOB 4.0)はScratchと同様のビジュアルプログラミング環境で,リストやスプライトがFirst Classであるという特徴をもっている。UCB(University of California, Berkeley)では,計算機科学を主専攻ではない学生へのプログラミング教育として,Snap!を利用している([1])。発達科学部数理情報環境論コースでも,Snap!の前身のBYOB3.0を講義に取り入れてきた。

しかし,現在公開されているSnap!ではIMEを使用した日本語入力(多バイト文字入力)がまだできないため,Snap!を日本で利用するには若干敷居の高いものになっている。(ただし,クリップボード経由での入力可能で,iOS上のSafariでは漢字変換はできないがひらがな入力は可能である。) その点は開発者の間でも議論されていて,多バイト文字入力を可能にするプルリクエスト([2],[3])も行われているため,近い将来Snap!でIME経由での日本語入力が可能になるものと思われる。

[3]のプルリクエストで提案されている方法をchangesetファイルとしてまとめた。
PR1214ChangesToMorphic.js
これを利用すると日本語入力可能なSnap!を使用することができる。Snap!のサイトで日本語入力を行うためには,このファイルの内容をjavascriptのブロックに入れて実行すれば良い。

最初から入力可能なSnap!を使うには以下の様にローカルにSnap!のソースをダウンロードする。

  1. Snap!のzipファイルをhttp://snap.berkeley.edu/snapsource/snap.zipからダウンロードする。(Snap! Build Your Own Blocksで,Snap!のロゴをクリックして,「ソースをダウンロード」をクリックしてもzipファイルをダウンロードできる。)
  2. zipを適当な場所に展開する。
  3. 展開したフォルダに上記のPR1214ChangesToMorphic.jsを入れる。
  4. 展開したフォルダ中のsnap.htmlに次の行を加える。場所は「FileSaver.min.js」の行の後でよい。(使用をやめる場合はこの行を削除するだけでよい。)
    	<script type="text/javascript" src="PR1214ChangesToMorphic.js"></script>
    
  5. フォルダ内のindex.html(あるいは直接snap.html)をブラウザで開く。
なお,OS XのSafari 10では"SecurityError (DOM Exception 18): The operation is insecure."となり,Safariの設定でローカルファイルの制限をはずさないと利用できないので,Snap!の推薦ブラウザーであるChrome Browserを使うのがよいと思われる。

日本語への翻訳について

上でJavascriptブロックを利用して,日本語入力を可能にしたが,同様にJavascriptブロックを利用して,日本語化されていないブロックを日本語にすることができる。 ローカルに使う分には,日本語翻訳ファイルであるlang-ja.jsファイルに付け加えていけばよいが,Snap!の公式サイトで翻訳を追加するにはJavascriptを利用することになる。Snap!では翻訳辞書は連想配列を利用しているので,翻訳辞書を格納している配列に追加の翻訳を付け加えるようにJavascriptのスクリプトを記述すればよい。具体的には日本語翻訳辞書はSnapTranslator.dict.jaに入っているので,次のようなスクリプトをかけばよい。

var arr={};
for (var key in arr){
	SnapTranslator.dict.ja[key]=arr[key];
}
ここで,arrには追加する翻訳を記載する。例えば,
	'add a new Turtle sprite':'新しいスプライトを追加する',
	'paint a new sprite':'新しいスプライトをペイントで作る',
	'Paint a new costume':'新しいコスチュームをペイントで作る',
の3つを追加するには,
var arr={
	'add a new Turtle sprite':'新しいスプライトを追加する',
	'paint a new sprite':'新しいスプライトをペイントで作る',
	'Paint a new costume':'新しいコスチュームをペイントで作る',
};
for (var key in arr){
	SnapTranslator.dict.ja[key]=arr[key];
}
として,javascriptブロックに入れて実行すると翻訳が反映される。

このブロックを実行する前は吹き出しは英語で表示される。

しかし,実行後は日本語に翻訳されてることがわかる。

また,既存のものと同じキーで作成して上書きすることもできる。例えば,リストの1番目を取り出すリポータブロックの翻訳は現在は
	'item %idx of %l':'%idx 番目 %l',
となっていて,ブロックはこのように表示されている。

これを
	'item %idx of %l':'%idx 番目 ( %l の)',
として,さきほどと同様にしてSnapTranslator.dict.jaに追加すると

となる。ただし,lang-ja.jsを読むとわかるが,もとの英語の文字列中のパラメータ(%ではじまるもの)の順序を変更することはできないのでより日本語として読みやすい順序の
	'item %idx of %l':'%l の %idx 番目',
とすることはできない。

現在Snap!で未翻訳のものをできるだけ翻訳してlang-ja.jsに追加したファイルを http://herb.h.kobe-u.ac.jp/lang-ja.jsで公開している。このファイルのmissing entries2以下の部分を上記の方法でjavascriptで追加すると未翻訳のもののかなりの部分が翻訳される。最初に記載したプロジェクトはこの部分を追加したものである。


[1] BJC - Beauty and Joy of Computing
[2] Enable IME Composing for some diacritics on Mac OS #4 X & ideograms #1047 & Android virtual keyboard by DarDoro · Pull Request #1103 · jmoenig/Snap--Build-Your-Own-Blocks · GitHub
[3] IME composition support by ubertao · Pull Request #1214 · jmoenig/Snap--Build-Your-Own-Blocks · GitHub
2017.10.22 Snap 4.1についての追記
2017.10.6 Turtlestichに対しても適用可能でることを追記
2017.10.5 iOSでのひらがな入力は可能であることを追記
2017.10.1 日本語への翻訳についての記述を追加
2017.9.27 公開
このページの内容は,JSPS科研費26560089の助成を受けた研究の過程で得られたものです。