この記事は、version3.5.4（2020年9月現在）をもとに作成されています。
1.1.1 ダウンロードとインストール
Processingの公式サイトには様々な作品が掲載されているので、チェックしてみましょう。
まずは、アプリケーションを次のサイトからダウンロードします。
https://processing.org/download/
各OS用のリンクが表示されるので、適切なものを選びます。
zipファイルを解凍したら、アプリケーションを好きな場所に置きます。特にこだわりがなければMacの場合はアプリケーションフォルダ、Windowsの場合はProgram Filesフォルダに入れておきましょう。
1.1.2 Processingフォルダの確認
Processingフォルダは、自身が作成したファイルやライブラリなど、重要なデータの保存フォルダです。このフォルダには頻繁にファイルを入れることが多いので、必ず場所を確認しておきましょう。
まずは、Processingを起動します。
もし次のメッセージが出た場合には、「OK」を選択してください【図1.1-c】。
MacとWindowsでProcessingフォルダの保存場所が違います。通常は次の場所に自動作成されます。
●Macの場合 書類 > Processingフォルダ
●Windowsの場合 マイドキュメント> Processingフォルダ
特に理由がなければこの場所で問題ありません。
もし授業等のために自分のハードディスク上に保存したい場合は、環境設定（Preferences）を選択して保存先を指定してください。
●Macの場合 Processingメニュー > Preferences…（環境設定）
●Windowsの場合 ファイルメニュー > 設定…
Processingの設定を変える際には、環境設定の変更が必要なので必ず覚えておきましょう。
1.1.3 日本語環境の準備
初めにProcessingを起動した際には、設定が英語環境になっている場合があります。メニュー等を日本語環境にしたい場合には、次の3点を変更します。
A. メニューなどのアプリケーション全体の表記を日本語にする
B. エディタに使用されるフォントを選択する。Menlo、Osaka、MSゴシックなどが無難。英語表記しかできないフォントがあるので注意
C. 「複雑なテキスト入力を有効にする」にチェックを入れる。チェックが入っているとコメントを日本語で打てるようになる
1.1.4 Processingの操作画面
Processing3.2.1の操作画面は【図1.1-f】です。
最初は全部の機能を一度に覚える必要はありません。まずは再生／停止ボタン、テキストエディタ、メッセージエリア、コンソールの場所が分かっていればいいでしょう。
- A. ウィンドウ: プログラムの実行結果が表示される
- B. C. 再生／停止ボタン: コードの実行／停止
- D. タブ: ファイルを追加する
- E. デバッグボタン: デバッグ機能の実行／停止
- F. モード選択: JavaやJavaScriptなどのモード選択
- G. テキストエディタ: ここにコードを書く
- H. メッセージエリア: プログラムに問題があった場合に、エラー原因が表示される
- I. コンソール: 変数の値をprintlnなどで出力する場合、このエリアに表示される
- J. エラー表示: メッセージエリア上で表示されるエラーの詳細が表示される
1.1.5 ファイル/フォルダ名のルール
コードが記述されたファイルは「.pde」という拡張子がついて保存されます。その際、Processing上でファイルを保存すると、ファイル名と同名のフォルダが自動生成されます。ファイル名とフォルダ名は基本的には自由に命名できますが、次のルールがあります。
- 半角英数字でファイル名を書く（全角文字は使わない！）
- 数字がファイル名の先頭に来てはいけない
- pdeファイル名とフォルダ名は同じにする
- 64文字以内にする
さすがに64文字以上のファイル名をつける人はいないと思いますが、数字をファイル名の先頭に付けてしまうことはよくあります。気をつけましょう。
必ず、「Processing」（もしくはProcessing3）フォルダ > 「フォルダ名」 > 「ファイル名(.pde)」というフォルダ構成になるようにします。もし後でファイル名をFinder上で変更する場合には、フォルダ名も必ず同じにしてください。
1.1.6 コード補完機能
Processingのバージョン3以降には、キーボード入力中にコードの候補を表示する「コード補完機能(Auto Completion)」が標準で搭載されています。コード補完機能は使い慣れると非常に便利なので、積極的に利用することを勧めます。
●ショートカットキーでコード補完機能を使う
Macで使う場合には、初期設定ではSpotlightのショートカットになっている場合があるので、このショートカットをOFFにする必要があります。「環境設定」 > 「キーボード」 > 「ショートカット」のSpotlightでチェックを外してください。
ProcessingのPreferences（環境設定）を開き、「Code Completion with Ctrl-space」にチェックを入れます。
コードを途中まで書いてから「コントロール(ctrl)」＋「スペース」キーを押せばコードの候補が出ます。
●キーボード入力中にコード補完機能を使う
キーボード入力中に、同時に自動的に変換候補を出したい場合もあります。その際には次の手順で設定変更します。
まず、ProcessingのPreferences（環境設定）を表示します。
●Macの場合 Processingメニュー > Preferences…（環境設定）
●Windowsの場合 ファイルメニュー > 設定…
最下部の「/Users/〇〇/Library/Processing/Preferences.txt」をクリックします。
すると、Preferencesx.txtがあるフォルダが開きます。
Processingを終了してください（重要！）。ファイルを書き換える際にProcessingが終了していないと、変更箇所が保存されません。
Preferencesx.txtをエディタソフトで開いてください。Macの場合はテキストエディット、Windowsの場合はメモ帳がいいでしょう。「pdex.completion.trigger」の行を見つけて値を「true」にしてください。エディタソフトの検索機能を使うと早く見つけることができます。変更したら保存しましょう。
Processingを起動してコードを入力してみましょう。設定が正しく変更されていれば、入力の途中で候補が自動表示されます。