そら豆ブロック:ブロック型コードエディタ

Programing > そら豆ブロック

そら豆ブロック(SoraMame.Block)は、オリジナルで開発した、ブロック型コードエディタのモックアップです。

ビジュアルプログラミング環境のフロントエンドを、ほんの100行のJavascriptコード＋各種OSSライブラリで実現しています。

皆様からの、ご感想・ご要望・バグレポートなど受け付けております(@y_catch)。

どうぞ、よろしくお願いします。

ブロック型コードエディタライブラリ：マメブロック 登場！ >> http://ycatch.github.io/mameblock.js/index.ja.html

デモ †

• FizzBuzz
  • http://www.catch.jp/program/soramame_block/
• ミニゲーム
  • http://www.catch.jp/program/soramame_block/example_game.html
• タートル言語
  • http://www.catch.jp/program/soramame_block/example_turtle.html

特徴 †

• BlocklyでもScratchでもない、ブロック型コードエディタのフロントエンド
• 超軽量。オリジナルのJavascriptコードは、ほんの100行(2015-02-08現在)。
• jquery対応でネスト可能なソートプラグインjquery-sortableを使用

想定している用途 †

• 教育やゲームなど特定用途のためのビジュアルプログラミング環境
• アプリのマクロ言語の編集機能やゲームの簡易組み立てキット
• IoT/WoTの操作プログラミング
• テキストベース設定ファイルのGUI化

解説 †

ライトニングトークのスライド。

• 100行のJavaScriptで ビジュアルプログラミング言語(のフロントエンド)を作ってみた、という話をした | Placebo Effect

操作 †

• コードのパネルを移動： ドラッグ＆ドロップ
• 式を編集： クリック
• ゴミ箱を空にする： ダブルクリック

ソースコード †

• https://github.com/ycatch/SoraMame.Block

開発者ガイド †

• 日本語版
  • https://github.com/ycatch/SoraMame.Block/blob/master/docs/development_guide.ja.txt
• 英語版
  • https://github.com/ycatch/SoraMame.Block/blob/master/docs/development_guide.en.txt

利用しているライブラリ †

• https://github.com/ycatch/SoraMame.Block/blob/master/docs/libraries.md

開発状況 †

アップデート †

• 2016-12-05 2つ目のブロックが編集できないバグを解消。
• 2015-03-24 タートル言語のデモを強化
• 2015-03-12 タートル言語のデモを追加
• 2015-03-10 開発ドキュメントを追加、コードのリファクタリング
• 2015-01-24 表示とコードの分離
• 2015-01-30 式エディタ
• 2015-02-08 簡単なコードが記述できるようになりました。

To-Do †

機能は、まだ実現できていません。

• 式エディタの強化
• 複数行選択
• コピーと貼り付け
• やり直し
• ファイル保存と読み込み
• エクスポート

• 国際化
• テストの自動化
• 各種ドキュメント

アイデア †

• processing
• Tiny Basic
• 日本語スクリプト

関連情報 †

• jquery-sortable
  • http://johnny.github.io/jquery-sortable/
• games-phaser-getaway
  • https://github.com/ycatch/games-phaser-getaway

• Phaserのはじめ方:HTML5/Javascript 2Dゲームエンジン
• 日本語っぽいプログラミング言語 そら豆スクリプト