ProcessingとChromeによるp5js環境構築

p5js, その他
p5jsとは?

p5jsとはProcessingという表現に特化したプログラミング言語のJavaScriptバージョンです。JavaScriptはWebブラウザ上で実行できる言語で、ウェブサイトの様々な機能やインタラクションに利用されています。

p5jsのプログラムを実行するには通常のエディタを使用することもできますが、ここでは一例としてProcessingとChromeの組み合わせを紹介します。まず入門の段階ではこの二つのアプリケーションを使用しましょう。ファイルの構造などを意識せずプログラミングの内容そのものに集中できるからです。

その後、必要に応じてAtomやMicrosoft Visual Studioなどの開発環境を導入し、より効率的なプログラミング環境に移行していきましょう。

ダウンロードしたファイルは適切な場所に移動

まずは次の二つのアプリションをダウンロードします。ダウンロードが終わったら適切な場所にインストールをしてください。様々なトラブルにつながることがあるので、ファイルの場所は慎重に管理してください。

Windows→C:Program Files
Macintosh→Macintosh HD / アプリケーション

Processing
2001年MITメディアラボで開発された、ビジュアルデザインのためのプログラミング言語であり、統合開発環境である。初心者がプログラミングを学習するのに適している。

Chrome
Google社が提供するWebブラウザ。Windows用とMac用がある。Chromeを使用することで、OSの違いを意識せずに、ページの表示やプログラミングの結果を確認することができる。

p5jsモードの追加

エディタウィンドウのポップアップメニューから「モードの追加」を選択します。

p5jsを選択して「Install」をクリック。完了するとp5jsにチェックマークがつきます。

エディタのプルダウンメニューから「p5js」が選択し、実行ボタンを押してみてください。Chromeが自動的に起動すればインストール成功です。

日本語表記

Processingで日本語の表記ができるように設定しましょう。フォントは「源の角ゴシック Code JP」がオススメです。フォントのダウンロードやインストールに関してはこちらを参照。

OSにおけるファイルの拡張子

ファイルの拡張子を表示するようにOSの環境設定を変更します。この設定を怠ると、ファイル名を誤ったままプログラミングを進めてしまい混乱することがありますので要注意です。

Windowsの設定方法
macOSの設定方法

Related Posts

No results found

メニュー