Programing>Blockly
Blockly(ブロックリー)は、「Googleが作ったビジュアルプログラミング言語」と紹介されるけれど、ちょっと違う。
じつは、マウス操作だけでプログラミングできる、Webベースのビジュアル開発環境を作るためのライブラリ。
JavascriptやPythonなど、いろいろなプログラミング言語に結びつけられるし、Webサービスに組み込むこともできる。
Blocklyには、次のアプリが付属しています。試してみる
また、次の機能デモも付属しています。試してみる
ローカルで実行したり、自分のサイトに設置するには、次のようにします。
じつは、すでに日本語訳は完了しているけど、コードのほうに各国語のフラグが追加されていない場合がある。
たとえば、迷路(maze)の場合、maze.js(apps\maze)は以下のようになっている。
// Supported languages. BlocklyApps.LANGUAGES = ['ar', 'br', 'ca', 'cs', 'da', 'de', 'el', 'en', 'es', 'eu', 'fa', 'fr', 'gl', 'hu', 'hrx', 'ia', 'is', 'it', 'ja', 'ko', 'lv', 'mk', 'ms', 'nl', 'pl', 'pms', 'pt-br', 'ro', 'ru', 'sco', 'sk', 'si', 'sr', 'sv', 'sw', 'th', 'tr', 'uk', 'vi', 'zh-hans', 'zh-hant']; BlocklyApps.LANG = BlocklyApps.getLang();
しかし、メッセージの翻訳ファイル(apps\maze\generated)のほうは、もっとたくさんある。
なので、maze.jsをこう直す。
// Supported languages. BlocklyApps.LANGUAGES = ['ace', 'af', 'ar', 'arz', 'az', 'be-tarask.jbg', 'bn', 'br', 'ca', 'cdo', 'cs', 'da', 'de', 'diq', 'el', 'en', 'es', 'eu', 'fa', 'fi', 'fo', 'fr', 'frr', 'gl', 'gn', 'hak', 'he', 'hi', 'hrx', 'hu', 'ia', 'is', 'it', 'ja', 'ka', 'km', 'ko', 'ksh', 'ku-latn', 'ky', 'la', 'lb', 'lrc', 'lt', 'lv', 'mg', 'mk', 'ml', 'mr', 'ms', 'mzn', 'nb', 'ne', 'nl', 'oc', 'pa', 'pl', 'pms', 'ps', 'pt-br', 'pt', 'ro', 'ru', 'sc', 'sco', 'si', 'sk', 'sr', 'sv', 'sw', 'ta', 'te', 'th', 'tlh', 'tr', 'tzm', 'uk', 'vi', 'zh-hans', 'zh-hant']; BlocklyApps.LANG = BlocklyApps.getLang();
これで、言語選択メニューに全ての言語が表示される。タートル(apps\turtle\turtle.js)も、この方法で日本語化できる。
ただし、メニューに抜けがあるので、実際は必要な言語だけ追加するのがいいかも。
それから、翻訳ファイル(apps\maze\generated)は、手動でメンテしてはいけない。このファイルは自動生成されているので。翻訳ファイルの生成方法は、翻訳ドキュメント(https://code.google.com/p/blockly/wiki/TranslationForDevelopers)と、 \apps\common.soyファイルの冒頭のコメントを参照。
開発者向け
Blocklyについて理解するための資料