グラフィカル言語"Flower"つくったぽよー

どもー@nobkzです
Technical Rockstarsで、データフロー型の僕と@syuhei_hiyaさんで社内の人達とFlower言語をつくりました。
現在は、お試し版を公開しています。
ドキュメントは今後追加していく予定です。

ですが簡単に紹介と使い方の紹介したいと思います。

flower紹介

flower言語はデータフロー型言語です。
特徴としては、

  1. データフロー型言語
  2. 実行が視覚化されること
  3. ブラウザ上で動くので、環境構築が簡単であること
  4. マウス*タッチパネルでのコーディングに特化させたUI

を特徴としています。

iPadなどタブレット端末またはスマーフトフォン端末で気軽にプログラミングを楽しむこと」ができることを目標にしています。(現時点ではタブレット端末の動作確認中で、動作保証はしておりません。)

はじめる

  1. http://flower-lang.com/にアクセス
  2. 試すボタンを押す
  3. すると、言語の編集画面に飛びます。

プログラミングしてみる

さてとりあえずやってみましょう

とりあえず繋げてみる。
  • InputPortをクリック

まるで囲んだところをクリック

f:id:Nobkz:20140205233200p:plain

  • OutputPortをクリック

まるで囲んだところをクリック

f:id:Nobkz:20140205233259p:plain

  • つながる!

つながります。

f:id:Nobkz:20140205233326p:plain

実行する
  • playボタンを押す

f:id:Nobkz:20140205233816p:plain

  • するとEntryのJobから、System.Printへ、0というバリューが流れます。

f:id:Nobkz:20140205233717p:plain



足し算をする。
  • addボタンを押す

f:id:Nobkz:20140205232409p:plain

  • メニューが開きます。

f:id:Nobkz:20140205234043p:plain

  • メニューから、coreを選択する

以下のようになります

f:id:Nobkz:20140205234141p:plain

  • Addを選択する。

するとこのようなJobが表示されます。

f:id:Nobkz:20140205234354p:plain

  • 同様にして、TransistorのJobを追加する。

f:id:Nobkz:20140205234434p:plain

  • TransistorのJobに値を入れる

ここをくりっく

f:id:Nobkz:20140205234705p:plain

1を入れてokをクリック

f:id:Nobkz:20140205234752p:plain

1の値が嵌めこまれます

f:id:Nobkz:20140205234853p:plain

  • つなげる。

f:id:Nobkz:20140205235038p:plain

  • 実行するとコンソールに2が表示されます。

f:id:Nobkz:20140205235123p:plain

線を消すときは、クリックするとバツボタンが出て消えます。

f:id:Nobkz:20140205235253p:plain

値を消すときは、もういちどクリックをすると消えます

f:id:Nobkz:20140205235428p:plain


こんな感じで、ポートとポートを繋げてプログラミングを行なって行きます。

jobの紹介

snapsvg.Rect、snapsvg.Circle、snapsvg.Draw

Flower言語はsnap.svgで描画されています。それで、snapsvgのライブラリが使えます。

たとえば、こういう風につなげますと...

f:id:Nobkz:20140206020319p:plain

このような モーダルビューが出てきまして、描画されます。

f:id:Nobkz:20140206020355p:plain

snapelement.FIll

色も代えることができますこういう風につないでみましょう。

f:id:Nobkz:20140206020656p:plain

このとき、FIllにカラーコードの文字列値が必要なので、"#ffffff"とダブルクォーテーションで囲んでください。

f:id:Nobkz:20140206021512p:plain

実行すると、白く描画されました。



f:id:Nobkz:20140206020746p:plain

流れるアニメーションスピードを早くする、System.speed

はいバリューの流れる速度が遅いと思うので、速くしましょう。

f:id:Nobkz:20140206021119p:plain

流れる速度の最速は2であり、それ移行速度が遅くなることに注意してください。 くそ速くなります。


以上がお試し版の紹介ですが、まだまだ紹介していないjobがあり、またまだ新しい魅力的なjobを追加して行きますのでお楽しみに!

Flower今後の展望

  • RaspberryPi対応
  • iPadなどのタブレットの動作対応
  • モジュール機能実装
  • jobライブラリの充実( (データベースとか、Http通信機能とか、いろいろ)
  • job独自ライブラリ追加拡張機能( 自分でjobを作って登録できる)
  • 見た目のカスタマイズ(css)
  • ブラウザ上でどこでも埋め込みできるようにする。

...etc


どうぞご期待ください!!!