SoraMame.Block のバックアップの現在との差分(No.14)



  • 追加された行はこの色です。
  • 削除された行はこの色です。
[[Programing]] > そら豆ブロック

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

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

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

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

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

&color(red){''ブロック型コードエディタライブラリ:マメブロック 登場!''}; >> http://ycatch.github.io/mameblock.js/index.ja.html

#ref(soramame_1.png)

#contents

* デモ [#p4f5495d]

- 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


* 特徴 [#iba6574c]

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

* 想定している用途 [#v14b585f]

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

* 解説 [#ee8f0a2b]

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

-[[100行のJavaScriptで ビジュアルプログラミング言語(のフロントエンド)を作ってみた、という話をした | Placebo Effect:http://www.catch.jp/blog2a/2015/03/01/osc-2015-tokyo-spring/]]

* 操作 [#p0f79862]

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

* ソースコード [#x6fc985b]

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

* 開発者ガイド [#v73e8913]

- 日本語版
-- 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

* 利用しているライブラリ [#kf0d85bb]

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

* 開発状況 [#i85b5dbb]

** アップデート [#jb823099]

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

** To-Do [#k79703fa]

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

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

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

** アイデア [#f4eceb7e]

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

* 関連情報 [#cf8d6a15]

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

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


トップ   一覧 単語検索 最終更新   ヘルプ   最終更新のRSS