*****
【2016年10月14日 追記】
この記事は古い情報を掲載しています。
現在、OpenProcessingは大規模リニューアルにともなって使用方法が変わっています。
詳しくは以下の記事をご覧ください。
OpenProcessingがリニューアル! : だらっと学習帳
*****

Processing Advent Calendar 2012 12月3日参加企画

【1】はじめに
最近、Processingがプログラミング初心者にオススメの言語として、
雑誌やネットでも紹介されるようになりました。
学習の最初の一歩として取り入れている情報系やデザイン系の学校も増えてきているそうです。
「Processing 入門」と検索すれば、プログラミングの基礎からデザイン的な表現法まで、
初心者をサポートする資料がたくさん見つかると思います。
しかし、そこから先のステップを示す資料は意外と見つかりません。
そこで今回、「Processing楽しい!いっぱい作品つくるぞ!」と燃えている人のために、
Processingの作品公開・共有サイト「OpenProcessing」の使い方を解説することにしました。
英語で書かれているサイトなので、ちょっとためらってしまう人もいるかもしれませんが、
できるだけ丁寧に解説するので、ぜひ利用してみてください。
一人で作品をつくってそれでおしまい、というのはもったいなさすぎます!
自分の作品を世界に発信して、
あなたもP5er(ぴーふぁいばー、Processingファンのこと)になりましょう!

【1】OpenProcessingってなに?
openProcessing02

OpenProcessing
http://www.openprocessing.org/

OpenProcessingは、Processingのスケッチ(作品)を公開したり、共有したりできるサイトです。
無料で誰でも利用することができます。
色んな人のスケッチを見たり、遊んだりすることはもちろん、
どのようなプログラムで動いているのか調べることもできます。
好きなスケッチをお気に入り登録したり、コメントを残すこともできますし、
気になるユーザをフォローすることもできます。
例えば、以下のページには、
OpenProcessing内でたくさんの人にお気に入り登録されている作品が並んでいます。

Browse Sketches: most favorite'd sketches - OpenProcessing

また、ご覧のとおり、英語で書かれているサイトなので、
ユーザ同士の交流は基本的には英語で行われています。
しかし、日本語でコメントを書くことも可能ですし、それ以外の言語圏の人たちもいます。


【2】まずは登録してみよう
登録しなくてもスケッチを見たり遊んだりすることはできますが、
OpenProcessingの機能を利用するためにも、まずは登録をおすすめします。
openProcessing03signup

OpenProcessingのトップ画面の上部にある「sign up」から登録することができます。
登録にあたって、必要な項目は4つです。

・Username
 ログインの際に使用する名前です。
 一度登録すると変更することができないので注意しましょう。
・Password
 パスワードを決めましょう。これもログインの際に使用します。
・Full name
 フルネーム、と書かれていますが本名をフルネームで書く必要はありません。
 ハンドルネーム(表示名)くらいの意味だと思うので、自由につけて構わないでしょう。
・Email
 メールアドレスを入力しましょう。
 あなたの作品にコメントがついた時などにお知らせしてくれます。
 また、パスワードを忘れてしまった時にも必要になります。

あとはCAPTCHAを解読して入力しましょう。難関ですががんばってください。
全て入力し終えたら「Join」をクリックしましょう。
その後、OpenProcessingから確認のためにメールが送られるので、
そこに書かれているリンクをクリックすれば登録は完了です。


【3】誰かのスケッチを見てみよう
登録が終わったら、さっそく誰かのスケッチを見てみましょう。
以下のページにアクセスしてみてください。

Pieces- OpenProcessing

では、スケッチの見方について図を使って説明していきます。

openProcessing06sketch

1.dashboard/my portfolio
dashboard(ダッシュボード)はトップ画面へのリンク、
my portfolioは自分の作品ページヘのリンクになっています。
2.前後にアップロードされたスケッチ
現在表示されているスケッチをつくったユーザが、
この前後にアップロードしたスケッチが表示されます。
3.スケッチ
投稿されたスケッチが表示されます。
マウスやキーボードに反応するスケッチにも対応しています。
4.スケッチ再生ボタン
次に説明する「codeボタン」から、スケッチを再生する表示に戻りたい時に押します。
5.codeボタン
このスケッチがどのようなプログラムで書かれているのか調べることができます。
これを押すと、スケッチが非表示になり、かわりにプログラムが表示されます。
6.tweaksボタン
tweak機能が使用された形跡をたどることができます。
7.Followボタン
このスケッチの作者をフォローすることができます。
フォローすると、そのユーザが新しいスケッチを投稿した際に、
トップ画面(ダッシュボード)にお知らせが表示されるようになります。
8.Add to Favesボタン
Twitterでいうところの「ふぁぼ」ボタンです。
気に入ったスケッチをお気に入り登録することができます。
お気に入り登録したスケッチは自分の作品ページ内に「favorites」として表示されます。
9.tweak!ボタン/Embedボタン
tweakを行うためのボタンと、
Webサイトにスケッチを埋め込むためのボタンです。
10.コメント欄
スケッチに対するコメントを入力する欄です。
コメントを入力したら、下の「Post Comment」ボタンで送信できます。

tweak機能については明日の
Tweak機能でProcessingの輪を広げよう!」という記事で説明します。
お楽しみに!


【4】自分のスケッチを公開しよう
色々なスケッチを見た後は、自分のスケッチもアップロードしてみましょう。
通常、Processingは「JAVAモード」でスケッチを作成・再生しています。
Processing02

この「JAVA」という表示をクリックすると、
Java/Android/Javascript という3つのモードが選択できます。
スケッチが完成したら、保存した後に、
この「Javascript」モードを選択してください。
その後、実行ボタンを押してブラウザ上での動作を確認してください。
確認が終わったら、ProcessingのFileメニューからExportを選択してください。
スケッチが置いてあるフォルダ内に「web-export」というフォルダができるので、
これをフォルダごとzip形式に圧縮してください。

では、OpenProcessingのトップ画面に戻ってください。
この画面の中央に「uploading your existing sketches」というリンクがあると思います。
これをクリックすると、スケッチのアップロード画面が表示されますので、
「ファイルを選択」ボタンを押して、先ほど作成したzipファイルを選択しましょう。
その後、下の「UPLOAD」ボタンを押してください。
すると、以下のような画面が表示されます。

openProcessing08upload

ここでは、スケッチについての情報を設定することができます。
設定できる内容は以下のとおりです。

・Thumbnail
 スケッチに対してサムネイル(アイコン画像)を設定します。
 「Captcha」をクリックすると、その時に表示されているスケッチの様子を取り込みます。
 取り込んだ画像の大きさを調整して、「Crop」ボタンをクリックすると、
 サムネイルとして設定されます。
・Title
 スケッチのタイトルを入力しましょう。
・Tags
 スケッチをタグ付けすることができます。
 スケッチの特徴について記入すると良いでしょう。
 省略しても構いません。
・Description
 スケッチについての説明を記入しましょう。
 改行も含め600文字以内で書いてください。
 省略することもできます。

設定が終わったら、「Save」ボタンをクリックしましょう。
これでアップロード完了です!
なお、自分でアップロードした作品には、
tweak!ボタン/Embedボタン(先ほどのスケッチ表示画面説明の9番)の他に、
Edit Codeボタン、Editボタン、Deleteボタンが追加されます。
Edit Codeボタンはブラウザ上でコードの編集をすることができます。微調整に便利です。
Editボタンは投稿する際に決めたタイトルやサムネイルなどの修正を行うことができます。
Deleteボタンはスケッチを消去することができます。


【5】おわりに
いかがでしたか?
これまでの説明で、OpenProcessingの便利さや楽しさが伝われば嬉しいです。
このサイトを利用することで、今まで「スケッチをつくるだけで終わっていた人」が、
「P5er」として世界にどんどん発信していってほしい、と思います。
また、授業でProcessingを活用していらっしゃる先生方には、
学生に「こんなサイトがあるよ」とすすめていただければと思います。
発信することこそ、学びや意欲の向上につながると思います。

しかし、OpenProcessingは英語での交流が一般的なサイトなので、
質問等がある場合はなかなかコメントしにくいかもしれません。
そんな時は、こちらのProcessingJPのフォーラムで質問してみてください。
日本のProcessingコミュニティサイトなので、安心して日本語で質問ができると思います。


OpenProcessingを利用することによって、
あなたの中のP5erとしての可能性が、より豊かに広がることを祈っています。