この記事では、ProcessingをWEBブラウザ上で実行する方法を紹介します。JavaScriptライブラリの「Processing.js」を使って実現します。
目次
必要なファイルの用意
Processing.js
Processing.jsは、ProcessingのJavaScript移植版になります。HTMLのcanvas要素にコンテンツをレンダリングすることができます。
まずはProcessing.jsのサイトからjsファイルをダウンロードします。
processing.jsのダウンロードページにいくと、processing.jsとprocessing.min.jsという2つのファイルがあると思います。「min」とついているファイルは軽量化されたもので、余分なスペースや改行などが削除されています。
http://processingjs.org/download/
今回はプログラムとして実行できれば良いので、processing.min.jsをダウンロードしました。
Processing
次にProcessingのファイルを用意します。動作確認するだけであれば、簡単なもので良いと思います。この記事では、立方体を表示するプログラムを用意しました。次にプログラムとProcessingでの実行結果を示します。このプログラムを「sample.pde」というファイル名で保存しておきます。ブラウザ上で同じように立方体を表示するのが、今回の目標です。
コード
実行結果
HTML
最後にブラウザで表示するために、HTMLファイルを用意します。プログラムの6行目でダウンロードした「processing.min.js」ファイルの読み込み、10行目で作成したProcessingのプログラム「sample.pde」を読み込んでいます。この例では、HTML、JavaScript、Processingのプログラムが同じディレクトリに保存された場合を想定しています。保存しているディレクトリが異なる場合にはファイルのパスを指定するように修正してください。このプログラムを「index.html」というファイル名で保存しておきます。
実際に実行してみる
あとはHTMLファイルの内容をブラウザで表示するのみです。ただし、Chromeで直接HTMLファイルを開くと、エラーが出てうまく動作しないと思います。調べてみるとブラウザのセキュリティ対策で実行できないように設定されているようです。私の環境では、Firefoxでも同様の理由で実行することができませんでした。ブラウザの起動オプションをつけるか、ウェブサーバーを立ててから実行する必要があるようです。私の場合は普段Macを使っているので、PHPのビルトインウェブサーバー機能を使ってすぐに簡易的なウェブサーバーを立てることができますので、この機能を使って動作確認することにしました。
ビルトインウェブサーバーの詳細については、PHPのドキュメントを参照してください。この機能を使うためには、PHPをインストールする必要があります。
https://www.php.net/manual/ja/features.commandline.webserver.php
必要なセットアップが済んでいるのであれば、「index.html」を保存したディレクトリに移動して、次のコマンドを実行してみてください。たったこれだけでウェブサーバーを立てることができます。
php -S localhost:8080
コマンドを実行したら、ブラウザのアドレスバーに次のように入力してください。これで立方体が表示されると思います。
localhost:8080
これでWEBブラウザ上でProcessingのプログラムを実行できるようになりました！
まとめ
今回はWEBブラウザ上でProcessingを実行する方法を紹介しました！本当に簡単に実装できるので、試してみてはいかがでしょうか。
コメントを残す