概要
メディアアートはProcessingとP5.js, Pygameで作ることができ、一例としてProcessingをWebアプリとしてデプロイする方法について記載します。
※Processingは使ったアート作成をする時にオススメで、Webサイトを作る時はProcessingの発展版のP5.jsの使用をオススメします。
プログラム
準備するもの
- HTMLファイル
- processing.js: HTMLでProcessingを扱うために使用→ダウンロード先はコチラ
- Processingで作ったプログラム
- Firebase Hosting: ローカルファイルでHTMLを開いた場合、Processingが動作しないため
また、最初に準備するディレクトリはこのような形です。
Mediaart
├basic1
│└basic1.pde→メインプログラム(ランダムパーティクル)
├index.html
└processing.js
まず、index.htmlはProcessingファイルを呼び出せるように以下のように記述します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>processing.js demo</title>
<script src="processing.js"></script>
</head>
<body>
<canvas data-processing-sources="basic1/basic1.pde"></canvas>
</body>
</html>
準備できたので一度htmlファイルを開いてみます。
このままだと、クリックしても何も表示できません。
そこで、Webアプリとしてデプロイする必要があります。
デプロイ方法
まず、Firebaseで既存のプロジェクトを開きます。
まだプロジェクトを作ってないかつ新たにプロジェクトを作りたい場合は、プロジェクト作成してください。
次、「構築」から「Hosting」をクリックしてください。
Hostingのページ開けたら、始めるをクリックし、画面の指示に従って設定をしてください。
一度コマンドプロンプトを開いて、firebase CLIをインストールしてください。
以下はコマンドです。
npm install -g firebase-tools
次、コマンドプロンプト上でFirebaseにログインし、プロジェクトを開始してください。
firebase login
Firebaseを初期化します。
firebase init
デプロイの手順は以下の通りです。
- 既存のディレクトリを使うので、「Use an existing project」を選択
- 既存のディレクトリを選択※ただし選択の場合は、スペースキーを使いましょう
- Webフレームワーク(React.jsやFlutter Webなど)を使うか聞かれるので、noを選択
※React.jsやNode.jsを扱う時もnoを推奨します - ディレクトリの作成有無を聞かれるのでエンターキーを押す
- シングルページアプリとGithub連携はそれぞれnoを選択
- 完了！
最後、Webアプリをデプロイします。
firebase deploy
以下のHosting URLを開いて確認しましょう。
一度開きましたが、デプロイ後のデフォルト画面になってしまいました。
自身のディレクトリにpublicフォルダがあるので、Processingファイルなどをpublicに移動させましょう。
以下のような形で行います。
Mediaart
└public
├basic1
│└basic1.pde
├404.html
├index.html
└processing.js
再度デプロイします。
もう一度URLを開いてみましょう。
そうするとWebアプリとしてProcessingのプログラムを使用できます！
※しかし、音やARなど使う場合はP5.jsやAR.jsなど推奨です。
以下はデプロイした作品です。ぜひご覧ください※期間限定かつ無期限で終了する可能性がございます。ご了承ください。→その時は別途動画を用意します。
https://flutter-4fd24.web.app/
まとめ
今回はProcessingをWebアプリとしてデプロイする方法について紹介しました。
今度はP5.jsでデプロイする方法について紹介します。