グラフィカル言語"Flower"つくったぽよー
どもー@nobkzです
Technical Rockstarsで、データフロー型の僕と@syuhei_hiyaさんで社内の人達とFlower言語をつくりました。
現在は、お試し版を公開しています。
ドキュメントは今後追加していく予定です。
ですが簡単に紹介と使い方の紹介したいと思います。
flower紹介
flower言語はデータフロー型言語です。
特徴としては、
- データフロー型言語
- 実行が視覚化されること
- ブラウザ上で動くので、環境構築が簡単であること
- マウス*タッチパネルでのコーディングに特化させたUI
を特徴としています。
「iPadなどタブレット端末またはスマーフトフォン端末で気軽にプログラミングを楽しむこと」ができることを目標にしています。(現時点ではタブレット端末の動作確認中で、動作保証はしておりません。)
はじめる
- http://flower-lang.com/にアクセス
- 試すボタンを押す
- すると、言語の編集画面に飛びます。
プログラミングしてみる
さてとりあえずやってみましょう
とりあえず繋げてみる。
- InputPortをクリック
まるで囲んだところをクリック
- OutputPortをクリック
まるで囲んだところをクリック
- つながる!
つながります。
実行する
- playボタンを押す
- するとEntryのJobから、System.Printへ、0というバリューが流れます。
足し算をする。
- addボタンを押す
- メニューが開きます。
- メニューから、coreを選択する
以下のようになります
- Addを選択する。
するとこのようなJobが表示されます。
- 同様にして、TransistorのJobを追加する。
- TransistorのJobに値を入れる
ここをくりっく
1を入れてokをクリック
1の値が嵌めこまれます
- つなげる。
- 実行するとコンソールに2が表示されます。
線を消すときは、クリックするとバツボタンが出て消えます。
値を消すときは、もういちどクリックをすると消えます
こんな感じで、ポートとポートを繋げてプログラミングを行なって行きます。
jobの紹介
snapsvg.Rect、snapsvg.Circle、snapsvg.Draw
Flower言語はsnap.svgで描画されています。それで、snapsvgのライブラリが使えます。
たとえば、こういう風につなげますと...
このような モーダルビューが出てきまして、描画されます。
snapelement.FIll
色も代えることができますこういう風につないでみましょう。
このとき、FIllにカラーコードの文字列値が必要なので、"#ffffff"とダブルクォーテーションで囲んでください。
実行すると、白く描画されました。
流れるアニメーションスピードを早くする、System.speed
はいバリューの流れる速度が遅いと思うので、速くしましょう。
流れる速度の最速は2であり、それ移行速度が遅くなることに注意してください。 くそ速くなります。
以上がお試し版の紹介ですが、まだまだ紹介していないjobがあり、またまだ新しい魅力的なjobを追加して行きますのでお楽しみに!