メディアアートのデプロイはP5.jsだけでなくProcessingでも可能

# 概要
メディアアートはProcessingとP5.js, Pygameで作ることができ、一例としてProcessingをWebアプリとしてデプロイする方法について記載します。
※Processingは使ったアート作成をする時にオススメで、Webサイトを作る時はProcessingの発展版のP5.jsの使用をオススメします。

## プログラム
準備するもの

<ul>
    <li>HTMLファイル</li>
    <li>processing.js: HTMLでProcessingを扱うために使用→ダウンロード先は<a href="https://github.com/processing-js/processing-js">コチラ</a></li>
        <li>Processingで作ったプログラム</li>
        <li>Firebase Hosting: ローカルファイルでHTMLを開いた場合、Processingが動作しないため</li>
</ul>

また、最初に準備するディレクトリはこのような形です。
```
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ファイルを開いてみます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1226429/e171d794-24d5-460a-8a96-a319603e50af.png" width="60%"><br>

このままだと、クリックしても何も表示できません。
そこで、Webアプリとしてデプロイする必要があります。

## デプロイ方法

まず、Firebaseで既存のプロジェクトを開きます。
まだプロジェクトを作ってないかつ新たにプロジェクトを作りたい場合は、プロジェクト作成してください。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1226429/60025139-bce2-4dcc-ae8d-232dbec9d719.png" width="60%"><br>

次、「構築」から「Hosting」をクリックしてください。
Hostingのページ開けたら、始めるをクリックし、画面の指示に従って設定をしてください。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1226429/0bad9c40-0ffd-47c5-b8d5-56d09cf36a15.png" width="60%"><br>

一度コマンドプロンプトを開いて、firebase CLIをインストールしてください。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1226429/7c857e5b-6579-442d-9690-06bd283fcfc7.png" width="60%"><br>

以下はコマンドです。
```
npm install -g firebase-tools
```

次、コマンドプロンプト上でFirebaseにログインし、プロジェクトを開始してください。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1226429/ca3099bb-2463-4650-a84d-b59461fffb30.png" width="60%"><br>

```
firebase login
```

Firebaseを初期化します。

```
firebase init
```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1226429/fd2868df-d114-470f-a294-ac578c007aa7.png" width="60%"><br>

デプロイの手順は以下の通りです。
<ol>
    <li>既存のディレクトリを使うので、「Use an existing project」を選択</li>
    <li>既存のディレクトリを選択※ただし選択の場合は、スペースキーを使いましょう</li>
    <li>Webフレームワーク(React.jsやFlutter Webなど)を使うか聞かれるので、noを選択<br>
    ※React.jsやNode.jsを扱う時もnoを推奨します</li>
    <li>ディレクトリの作成有無を聞かれるのでエンターキーを押す</li>
    <li>シングルページアプリとGithub連携はそれぞれnoを選択</li>
    <li>完了！</li>
</ol>

最後、Webアプリをデプロイします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1226429/6935ab27-cc0f-45a7-b204-c6ee60d8bbd4.png" width="60%"><br>

```
firebase deploy
```
以下のHosting URLを開いて確認しましょう。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1226429/f43c7d90-5619-4ffb-bb9e-4a0b347d02b2.png" width="60%"><br>

一度開きましたが、デプロイ後のデフォルト画面になってしまいました。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1226429/cd05ca8f-e404-4ec0-bbe0-1ac878bd4069.png" width="60%"><br>

自身のディレクトリにpublicフォルダがあるので、Processingファイルなどをpublicに移動させましょう。
以下のような形で行います。
```
Mediaart
└public
 ├basic1
 │└basic1.pde
 ├404.html
 ├index.html
 └processing.js
```

再度デプロイします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1226429/55a803f3-916b-427e-b7bb-a19d1737ee49.png" width="60%"><br>

もう一度URLを開いてみましょう。
そうするとWebアプリとしてProcessingのプログラムを使用できます！
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1226429/dcf090fd-7fbd-4aaf-9fbf-944473edc7a3.png" width="60%"><br>

※しかし、音やARなど使う場合はP5.jsやAR.jsなど推奨です。

以下はデプロイした作品です。ぜひご覧ください※期間限定かつ無期限で終了する可能性がございます。ご了承ください。→その時は別途動画を用意します。
https://flutter-4fd24.web.app/

## まとめ
今回はProcessingをWebアプリとしてデプロイする方法について紹介しました。
今度はP5.jsでデプロイする方法について紹介します。