Blockly:パズル式プログラム開発ライブラリ 2014年版

https://www.catch.jp:443/wiki/editedit.php?Programing%2FBlockly2014

Programing>Blockly

  • このページは、Blocklyについて2014年ごろに調べて作成したものです。
  • 2014.10.18:BlocklyのWebサイトがリニューアルされて、「ビジュアルプログラミング言語を作るためのライブラリ」と明記されました。
  • 2017年ごろ調べた情報は、こちら
blockly_maze_s.png

概要

Blockly(ブロックリー)は、「Googleが作ったビジュアルプログラミング言語」と紹介されるけれど、ちょっと違う。

じつは、マウス操作だけでプログラミングできる、Webベースのビジュアル開発環境を作るためのライブラリ。

JavascriptやPythonなど、いろいろなプログラミング言語に結びつけられるし、Webサービスに組み込むこともできる。

とりあえず

使い方

体験してみる

アプリ&デモを試してみる

Blocklyには、次のアプリが付属しています。試してみる

  • パズル
  • 迷路
  • カメでお絵かき : Turtle Graphics
  • グラフ計算機
  • 飛行機座席計算機
  • コード(英語)

また、次の機能デモも付属しています。試してみる

  • 固定ページ
  • 可変ページ
  • ツールボックス
  • 右から左モード
  • ブロックの最大個数
  • Javasccriptへ変換
  • クラウドストレージ

アプリ&デモを設置する

ローカルで実行したり、自分のサイトに設置するには、次のようにします。

  1. BlocklyのGithubミラーから、ZIPファイルをダウンロードする
  2. 解凍する。
  3. アプリは、blockly-master\apps\index.htmlを開く
  4. デモは、blockly-master\demos\index.htmlを開く
  5. これらのファイルをWebサーバーにおけば、専用Blocklyもできる
  6. このサイトにも設置してみた

日本語化されていないアプリを日本語化する

じつは、すでに日本語訳は完了しているけど、コードのほうに各国語のフラグが追加されていない場合がある。

たとえば、迷路(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について理解するための資料

紹介記事

機能追加/開発

そのほか


  トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
添付ファイル: fileblockly_maze_s.png 3420件 [詳細]
Last-modified: 2017-06-25 (日) 00:19:29 (2495d)