1.1 Processingの準備

Filed in processing , メディアプログラミング演習I 0 comments

この記事は、version3.6.6(2017年10月現在)をもとに作成されています。

1.1.1 ダウンロードとインストール

Processingの公式サイトには様々な作品が掲載されているので、チェックしてみましょう。

https://processing.org/

processing_site

図1.1-a

まずは、アプリケーションを次のサイトからダウンロードします。
https://processing.org/download/

各OS用のリンクが表示されるので、適切なものを選びます。

4_23_16__19_04

図1.1-b

zipファイルを解凍したら、アプリケーションを好きな場所に置きます。特にこだわりがなければMacの場合はアプリケーションフォルダWindowsの場合はProgram Filesフォルダに入れておきましょう。

1.1.2 Processingフォルダの確認

Processingフォルダは、自身が作成したファイルやライブラリなど、重要なデータの保存フォルダです。このフォルダには頻繁にファイルを入れることが多いので、必ず場所を確認しておきましょう。
まずは、Processingを起動します。

もし次のメッセージが出た場合には、「OK」を選択してください【図1.1-c】。

4_23_16__19_47

図1.1-c

MacとWindowsでProcessingフォルダの保存場所が違います。通常は次の場所に自動作成されます。

●Macの場合 書類フォルダ > Processingフォルダ
●Windowsの場合 マイドキュメントフォルダ > Processingフォルダ

特に理由がなければこの場所で問題ありません。
もし授業等のために自分のハードディスク上に保存したい場合は、環境設定(Preferences)を選択して保存先を指定してください。

●Macの場合 Processingメニュー > Preferences…(環境設定)
●Windowsの場合 ファイルメニュー > 設定…

Processingの設定を変える際には、環境設定の変更が必要なので必ず覚えておきましょう。

4_23_16__19_55

図1.1-d

1.1.3 日本語環境の準備

初めにProcessingを起動した際には、設定が英語環境になっている場合があります。メニュー等を日本語環境にしたい場合には、次の3点を変更します。

2016_09_16_0_02

図1.1-e

A. メニューなどのアプリケーション全体の表記を日本語にする
B. エディタに使用されるフォントを選択する。Menlo、Osaka、MSゴシックなどが無難。英語表記しかできないフォントがあるので注意
C. 「複雑なテキスト入力を有効にする」にチェックを入れる。チェックが入っているとコメントを日本語で打てるようになる

1.1.4 Processingの操作画面

Processing3.2.1の操作画面は【図1.1-f】です。
最初は全部の機能を一度に覚える必要はありません。まずは再生/停止ボタン、テキストエディタ、メッセージエリア、コンソールの場所が分かっていればいいでしょう。

displaytest___processing_3_2_1_%e3%81%a8_displaytest_%e3%81%a8_microsoft_word

図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上で変更する場合には、フォルダ名も必ず同じにしてください。

2016_04_23_21_12

図1.1-g

1.1.6 コード補完機能

Processingのバージョン3以降には、キーボード入力中にコードの候補を表示する「コード補完機能(Auto Completion)」が標準で搭載されています。コード補完機能は使い慣れると非常に便利なので、積極的に利用することを勧めます。

●ショートカットキーでコード補完機能を使う

Macで使う場合には、初期設定ではSpotlightのショートカットになっている場合があるので、このショートカットをOFFにする必要があります。「環境設定」 > 「キーボード」 > 「ショートカット」のSpotlightでチェックを外してください。

2016_04_23_20_49

図1.1-h

ProcessingのPreferences(環境設定)を開き、「Code Completion with Ctrl-space」にチェックを入れます。

2016_09_19_2_42

図1.1-i

コードを途中まで書いてから「コントロール(ctrl)」+「スペース」キーを押せばコードの候補が出ます。

●キーボード入力中にコード補完機能を使う

キーボード入力中に、同時に自動的に変換候補を出したい場合もあります。その際には次の手順で設定変更します。

まず、ProcessingのPreferences(環境設定)を表示します。

●Macの場合 Processingメニュー > Preferences…(環境設定)
●Windowsの場合 ファイルメニュー > 設定…

最下部の「/Users/〇〇/Library/Processing/Preferences.txt」をクリックします。

2016_09_19_2_45

図1.1-j

すると、Preferencesx.txtがあるフォルダが開きます。

2016_09_16_14_13

図1.1-k

Processingを終了してください(重要!)。ファイルを書き換える際にProcessingが終了していないと、変更箇所が保存されません。

Preferencesx.txtをエディタソフトで開いてください。Macの場合はテキストエディット、Windowsの場合はメモ帳がいいでしょう。「pdex.completion.trigger」の行を見つけて値を「true」にしてください。エディタソフトの検索機能を使うと早く見つけることができます。変更したら保存しましょう。

2016_09_16_14_15

図1.1-l

Processingを起動してコードを入力してみましょう。設定が正しく変更されていれば、入力の途中で候補が自動表示されます。

Posted by noguchi   @   23 4月 2016 0 comments

0 Comments

Sorry, comments are closed.

Previous Post
«
Next Post
»
Stroom designed by Credit Cards In conjunction with Web Hosting Reseller , Dream Interpretation Guide , Best Website Hosting.