Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Soramame.Block 100行のJavaScriptで ビジュアルプログラミング言語(のフロントエンド)を作ってみた:

3,411 views

Published on

100行のJavaScriptで Soramame.Block というビジュアルプログラミング言語(のフロントエンド)を作ってみたという話。OSC 2015 Tokyoのライトニングトークの発表スライドです。

Published in: Software
  • Be the first to comment

Soramame.Block 100行のJavaScriptで ビジュアルプログラミング言語(のフロントエンド)を作ってみた:

  1. 1. SoraMame.Block 100 行の JavaScript で ビジュアルプログラミング言語 ( のフロントエンド ) を作ってみた 2015.03.12 Kachi Yutaka
  2. 2. 自己紹介 ● 可知 豊( http://www.catch.jp) ● テクニカルライティング ● 企業メディアのディレクション、プロモーション支援 ● 著書:知る、読む、使う、オープンソースライセンス http://tatsu-zine.com/books/osslicense 達人出版会 EPUB/PDF お仕事、絶賛承り中 !
  3. 3. 趣味:プログラミング 作ったものを紹介します。
  4. 4. 日本語プログラミング言語 2012 年ごろ。 日本語っぽいコード → Processing.js → JavaScript http://www.catch.jp/wiki/?SoraMame.ps.js
  5. 5. ちょうどそのころ ビジュアルプログラミング言語 が、大ブレイク ! ● Scratch ● Google Blockly / Code.org ● Viscuit ● MOONBlock/ コロコロゲームクラフトブロック などなど http://www.catch.jp/wiki/index.php?Education_and_Programing_toools
  6. 6. 作ってみました ブロック型コードエディタ そら豆ブロック  説明ページ http://www.catch.jp/wiki/?SoraMame.Block ソースコード https://github.com/ycatch/SoraMame.Block デモ FizzBuzz http://www.catch.jp/program/soramame_block/ Game http://www.catch.jp/program/soramame_block/example_game.html
  7. 7. 構成要素 ● ご存知、 jQuery ● jQuery-sortable ネストできます ● beautify.js ● highlight.js ● Bootstrap + Flat UI ● オリジナルのコードは、約 100 行 ● ブロックの D&D とテキスト変換だけ
  8. 8. ゲームに組み込んでみました http://www.catch.jp/program/soramame_block/example_game.html
  9. 9. タートル言語 http://www.catch.jp/program/soramame_block/example_turtle.html
  10. 10. このつぎ、なにするのか? 機能追加:エディタの基本機能 ● 複数選択 ● コピー&ペースト ● アンドゥ ● コードのファイル保存・読み込み ● デバッグ機能 ● JavaScript ライブラリ化 ● ドキュメントの整備 応用 ● ちゃんとゲームを作る ● TinyBASIC / Processing ● タートル言語 ● シェルスクリプト どれがいいでしょう
  11. 11. これって、ニーズある? どこで、だれに聞けばいい ?
  12. 12. ご意見・ご感想を 聞かせてください ! Web : http://www.catch.jp/wiki/?SoraMame.Block E-Mail : yyycatch@gmail.com Facebook : https://www.facebook.com/yutaka.kachi Twitter : @y_catch
  13. 13. こちらからは以上です ご清聴ありがとうございました
  14. 14. 関連情報 超軽量ブロック型コードエディタ そら豆ブロック 説明ページ http://www.catch.jp/wiki/?SoraMame.Block Twitter #SoraMame_Block_Editor ( 長すぎる !) ソースコード https://github.com/ycatch/SoraMame.Block デモ FizzBuzz http://www.catch.jp/program/soramame_block/ Game http://www.catch.jp/program/soramame_block/example_game.html Jquery-sortable http://johnny.github.io/jquery-sortable/
  15. 15. Output log 2015.02.28 : OpenSource カンファレンス 2015 Tokyo-Spring 2015.03.12 :第 55 回 HTML5 とか勉強会

×