SoraMame.ps.js/入門/introduction の変更点

追加された行はこの色です。
削除された行はこの色です。
SoraMame.ps.js/入門/introduction へ行く。
#title(Processingのスケッチを、日本語っぽいプログラミング言語で作る)

''この記事は、[[Processing Advent Calendar 2012:http://atnd.org/events/33755]]の7日目の参加記事です！''

[[http://farm3.staticflickr.com/2417/2113974300_44cd054732.jpg:http://www.flickr.com/photos/alicepopkorn/2113974300/]]
[[http://farm3.staticflickr.com/2417/2113974300_44cd054732.jpg]]

[[By AlicePopkorn CC BY 2.0:http://www.flickr.com/photos/alicepopkorn/2113974300/]]

&color(white){line};

Processing(プロセッシング)を使ったプログラミングは、とっても楽しいですよね！

だけど、たまにしか使わないホビープログラマーには、重大な問題があります。

それは、すぐに命令とか忘れてしまうこと。

毎回、マニュアルや解説書を読まないとプログラムを作れない、

そういう人もけっこういると思うのです。

&color(white){line};

''じつは、私もそうなんです。''

&color(white){line};

Processingは、教育やビジュアルアートの分野で世界中で使われていて、

とっても簡単にプログラムを始めることができるヨ、と

まわりにすすめてみても

コンピュータに慣れていない人からは、

「プログラムなんて！」と拒絶されたり

挫折されてしてしまった人もいるんじゃないかな。

&color(white){line};

そこで今回、紹介したいのが、

''日本語っぽいプログラミング言語「[[そら豆スクリプト>SoraMame.ps.js]]」''です。

日本語っぽいコードを、Processing.jsに変換して実行します。

&color(white){line};

というわけで、この記事では、

この日本語っぽいプログラミング言語「そら豆スクリプト」を簡単に紹介します。

&color(white){line};

#contents

*そら豆スクリプトとは [#q20cd6d1]

日本語っぽいプログラミング言語で書いたコードは、とっても読みやすい。

だから、毎回、マニュアルを読み直さなくても、

命令の意味やコードの意図を思い出すことができます。

ほかの人のコードを再利用したり、

自分自身で改良するときにも便利ですよ。

&color(white){line};

「そら豆スクリプト」は、

日本語っぽいコトバでプログラムを書いて、

それをProcessing.jsに変換して実行します。

だから、パソコンだけじゃなくスマートフォンやタブレットで、

Webブラウザがあれば動かすことができます。

それに、変換されたコードは、Processing環境上にコピペしても動作します。

&color(white){line};

将来は、ArudinoやKinectのような

ハードウェア制御もできるようになる(かもしれません)。

*そら豆スクリプトを試してみよう [#vbad3030]

まずは、そら豆スクリプトを実際に試してみましょう。

**デモプログラム [#p2d88d1e]

&color(white){line};

用意するのは、パソコンかスマートフォン・タブレットだけ。

パソコンの場合は、最新のWebブラウザを用意してね。

そしたら、そら豆スクリプトのデモプログラムをいくつか試してみましょう。

次のような、横スクロール型シューティングもどきや、動物の群れをシミュレーション、3Dデモなどがあります。

見てみたいデモプログラムのページに移動したら、「うごかす」ボタンを押してみましょう。

-[[横スクロールシューティングもどき:http://www.catch.jp/program/soramame/sample/demos/space_tunnel.html]]（あたり判定なし）

[[http://www.catch.jp/program/soramame/sample/images/demo_space_tunnel.png:http://www.catch.jp/program/soramame/sample/demos/space_tunnel.html]]

-[[動物シミュレーション(ボイド):http://www.catch.jp/program/soramame/sample/demos/boid.html]]

[[http://www.catch.jp/program/soramame/sample/images/sample_20.png:http://www.catch.jp/program/soramame/sample/demos/boid.html]]

-[[デモ：ちょっとスタイリッシュになった古典的なスペースワープ:http://www.catch.jp/program/soramame/sample/demos/space_warp.html]]

[[http://www.catch.jp/program/soramame/sample/images/demo_space_warp.png>http://www.catch.jp/program/soramame/sample/demos/space_warp.html]]

-[[デモ：3Dでハコがグルグルまわります:http://www.catch.jp/program/soramame/sample/demos/matrix_box.html]]（WebGL環境か、いいグラフィックカードが必要です）

[[http://www.catch.jp/program/soramame/sample/images/demo_matrix_box.png>http://www.catch.jp/program/soramame/sample/demos/matrix_box.html]]


このほか、サンプル集ページもあるので、のぞいてみてください。

-[[そら豆スクリプト サンプル集ページ>SoraMame.ps.js/Samples]]

&color(white){line};

「うごかす」ボタンを押したら、ほら、プログラムがうごきだしたでしょ。

&color(white){line};

右に表示されている日本語っぽい文が、そら豆スクリプトの"コード"です。

プログラムは、このコードどおりに動作します。

画面の下には、変換されたProcessingコードが表示されています。

これをコピー＆ペーストすれば、Processing環境でも、コードを動かすことができます。

#ref(soramame_s.png)

**そら豆スクリプトのコードを見てみよう [#vf11c894]

そら豆スクリプトの文法の雰囲気を感じるために、

すこしだけプログラムを改良してみましょう。

まず、改良する前のプログラムを見てみましょう。

-[[サンプルコード:http://www.catch.jp/program/soramame/SoraMame_Script.html]]

[[http://www.catch.jp/wiki/index.php?plugin=ref&page=SoraMame.ps.js&src=mouse_move.png:http://www.catch.jp/program/soramame/SoraMame_Script.html]]

これは、マウスの動きにあわせて、マルを描くプログラムです。

&color(white){line};

さきほどと同じように「うごかす」ボタンをクリックしたら、

実行エリアでマウスを動かしてみましょう。

ちょっとしたお絵かきソフトみたいですね。

&color(white){line};

さて、このプログラムの実際のコードは、たったこれだけ。

すごく短いでしょ。

 //マウスの位置にマルを描く
 ---初期設定する{
   {幅:250, 高さ:250}のサイズ
 }
 
 ---くり返し描画する{
   {x:@マウスX, y:@マウスY}に{幅:50, 高さ:50}のマル
 }

日本語っぽく書いてあるので、

どこで何をしているか、

なんとなく簡単にわかりそうな気がしませんか。

それによく見ると、Processingのコードとほとんど構成が同じなのがわかるでしょ。

**プログラムを改良しよう [#nfe066f9]

じゃあ、このプログラムを改良してみましょう。

&color(white){line};

ずばり、次のように書いてある行が、マルを描くところ。

 {x:@マウスX, y:@マウスY}に{幅:50, 高さ:50}のマル

これを、こんなふうに変えてみましょう。

 {x:@マウスX, y:@マウスY}に{幅:50, 高さ:50}のシカク

行末にある「マル」を、「シカク」に変えただけだ。

&color(white){line};

これで、もう一度「うごかす」ボタンを押すと、

ほら、マウスの動きにあわせてシカクが描かれるようになりました。

#ref(http://www.catch.jp/wiki/index.php?plugin=ref&page=SoraMame.ps.js&src=mouse_move2.png)

さらに、次のように書きなおすと、シカクのサイズを変えることができます。

 {x:@マウスX, y:@マウスY}に{幅:100, 高さ:100}のシカク

これも、ぜひ実際に、試してみてください！

コードが日本語っぽくなっていると、どこをどのように直すか、把握するも簡単じゃないかな。

*そら豆スクリプトの特徴的なところ [#ic790549]

では、「そら豆スクリプト」の特徴的なところを、いくつか紹介しましょう。

**日本語っぽいコードは、本当に読みやすいの？ [#z87604f8]

日本語っぽいコードは、本当に読みやすんでしょうか？

世の中には、日本語式のプログラミング言語はあまり普及していないし。

そんな疑問を持つもの、もっともですね。

&color(white){line};

そこで、次の2つのコードを見くらべてみましょう。

どちらも、マウスの位置にマルを描くコードです。

 ellipse(mouseX,mouseY,50,50); 
 
 {x:@マウスX, y:@マウスY}に{幅:50, 高さ:50}のマル  

上が、「Processing」「Processing.js」のコード。

下が、そら豆スクリプトのコードです。

&color(white){line};

「Processing」を知らない人でも、「そら豆スクリプト」のほうは、

なんとなく意味が分かると思うんですがいかがでしょう。

&color(white){line};

Processingになれている人でも、日本語混じりのコードの方が、

パッと目に飛び込んできて、意味が把握できる感じがしないかな。

**そら豆スクリプトは、引数に名前がついています [#e6238720]

じつは、「そら豆スクリプト」とProcessingにはもうひとつ違いがあります。

コードが日本語っぽくなっているだけじゃなく、引数に名前がついていること。

&color(white){line};

Processingは、引数の順番で、その役割が決まっていますよね。

たとえば、1番目がX座標、2番目がY座標、3番目がマルの横幅、という具合です。

だから、引数の順番まで知らないと、コードの意味がわかりません。

コードを読んだだけでは、その引数がどんな役割をするのか理解できないのです。

でも、引数順なんて、なかなか覚えられないから、

やっぱりマニュアルを読んだり、コード補完に頼ることになるんです。

&color(white){line};

これに対して「そら豆スクリプト」では、

「{x:   , y:     }」とか「幅:   , 高さ:     }」というように

引数に名前をつけるので、その意味するところは明快でしょ。

**日本語だと、コマンドもわかりやすい覚えやすい [#pb86ee02]

ちなみに、上のコードで出てくる「ellipse」とは、

英語で「楕円」のこと。

みんな、そんな英単語、知ってました？

&color(white){line};

''私は知らなかったし、どうしても覚えられない。''

&color(white){line};

Processingを使っている間は、しばらく覚えていられるけど

使うのをやめると、やっぱり忘れてしまいます。

&color(white){line};

といっても、こういうのはProcessingだけの話じゃなくて、

英単語をベースにするプログラミング言語のほとんどすべてが、こんなふうだと思う。

&color(white){line};

それに、覚えられないといっても、Processingは、

とてもシンプルで使いやすい優れたプログラミング言語だと思います。

すぐに使い始められて、インパクトのある効果を得られるからね。

はじめてプログラミングを覚えるには、最適な方法のひとつだと思います。

実際に、日本でも世界でも大学のプログラミング実習に、幅広く使われているみたいだし。

&color(white){line};

だけど、英語になれている人がProcessingを使い始めるのと、

英語になれていない多くの日本人がProcessingを使うのは、

ちょっと感覚が違うんじゃないかと私は思います。

なぜなら、英語になれていない人は、

Processingなどのプログラミング言語を、

ほとんど意味のない記号として認識してしまうからです。

これは、先ほどProcessingとそら豆スクリプトのコードを見比べたとき、

自分でも実感できたんんじゃないかと思います。

&color(white){line};

そら豆スクリプトは、はじめて見た人でも読んですぐに意味がわかるけど、

Processingは、そんな感じはしないでしょ。

だから、日本語っぽいプログラミング言語になっているProcessingがあれば、

もっとプログラミングは覚えやすくなるはずです。

**そら豆スクリプトの文法 [#gc85df5c]

ちなみに、そら豆スクリプトの命令文は、こんな構成になっています。

 {引数名:引数値1, 引数名:引数値2,・・・}(助詞){引数名:引数値3, ・・・}(助詞)命令語

これが、Processingでは、次のように対応する命令文に変換されます。

 命令語(引数1, 引数2, 引数3・・・)

&color(white){line};

そら豆スクリプトの引数の順番は、Processingと同じになっています。

じつのところ、引数名は、文法的には特に定義されていません。

助詞も、指定のひらがな一文字であれば、ほとんどの場合なにを使ってもいいんです。

引数名と助詞の情報は、変換時に捨ててしまいます。

だから、引数名も助詞も、コードに埋めこまれたコメントみたいなもの

だと考えると良いかもしれません。

&color(white){line};

えっ？ コードが冗長すぎて、入力するのが面倒だって。

それは、サンプルコードをコピペすれば解決すると思うんだけど、どうでしょう。

プログラミングするとき、まずは手ごろなサンプルコードを

ひろってくることが多いんじゃないかな。

とくに、初心者の場合は、そうだよね。

&color(white){line};

そら豆スクリプトのように、引数に名前がついていれば、

いちいちマニュアルを調べなくても、

コードの意味するところは、ずっとわかりやすくなります。

コピペしたいサンプルコードの役割も、すばやく把握できるんです。

プログラムを書く側も、コードの横に、日本語でコメントを付けるなんてことは

もう必要ありません！

*そら豆スクリプトの最大の弱点は [#df9e75a0]

2012年の5月に「そら豆スクリプト」の開発をはじめて、

ようやく、それらしいデモプログラムを紹介できるようになってきました。

とりあえず、いまは簡単なプログラムを作ることができる状態です。

&color(white){line};

課題は、いろいろあるけれど、

&color(white){line};

''一番の問題は、私以外にユーザーがいないこと(笑)。''

&color(white){line};

''これは、マズイ。''

&color(white){line};

''ひじょうにマズイ。''

&color(white){line};

だから、そら豆スクリプトを試しに使ってくれる人を、絶賛ダイダイ募集中です！

&color(white){line};

ほかにも、まだProcessingの命令を全部サポートしていないとか

ドキュメントが書きかけとか、

いくつかバグもあるとか、

いろいろ問題はあるけれど、

ユーザーが存在しないのが一番大きなハードルです。

&color(white){line};

''まずは、そこをクリアしなくちゃいけません。''

&color(white){line};

ご興味をお持ちでしたら、ぜひ、チュートリアルを読んでみてください。

そして、なにか作ってみてください。

今までに作ったProcessingのスケッチを、

そら豆スクリプトで書き直してみるというのもいいかも知れません。

そうすれば、日本語っぽいプログラミング言語の威力を評価できるでしょう。

&color(white){line};

もしよろしければ、どんなものを作ったか教えてください。

おもしろそうなプログラムは、どんどんデモに掲載したいと思っています。

もしも、まだ「そら豆スクリプト」が必要な命令をサポートしていなくても、

1行書き換えるだけで追加できます。

詳しくは、[[文法と書き方>SoraMame.ps.js/Syntax_Style]]を参照ください。

&color(white){line};

-[[日本語っぽいプログラミング言語 そら豆スクリプト 公式ページ>SoraMame.ps.js]]

-[[そら豆スクリプト入門>SoraMame.ps.js/入門]]
-[[文法と書き方>SoraMame.ps.js/Syntax_Style]]
-[[コマンドリファレンス:https://github.com/ycatch/SoraMame.ps.js/wiki]]

ちなみに、そら豆スクリプト自体は、Javascriptで開発している、

オープンソースソフトウェア(MITライセンス)です。

*書いた人 [#cf2e7154]

可知 豊　[[@y_catch:https://twitter.com/y_catch]]、[[facebbook:http://www.facebook.com/yutaka.kachi]]

元テクニカルライターで、40過ぎのIT系広告屋。

ふつうの人よりは、日本語を書くのは慣れているかも知れないけれど

文章力も技術力も中途半端です。

なのに、そら豆スクリプトなんてものを作り始めてしまいました。

&color(white){line};

最近は、コンピュータ関係で調べ物をしたときは、

Wikiにそれなりの情報を残すようにしています。

以前に、ProcessingとProcessing.jsについて調べたときも、解説文を書いていて、

それが最近、Google検索で上位に表示されるようになって、ちょっとびびっています。

-[[Processing基礎最速入門]]
-[[Processing.js基礎最速入門]]