「Processing for Androidなどで挫折した人向け」Termux+Node.js+p5-managerでAndroid上のローカル環境でp5.jsを動かす方法
えいいちです。
Processingを使って作品を作っていますが、Androidで自分のSketchを動かしたいと思いました。Processing for Android (Android Mode)やAndroid Studioでアプリを作成しようと、画面と格闘していましたがなかなかビルドが通らず、結局挫折してしまいました。
そこで、代替案としてp5.jsをAndroid上で動かしてみることにしました。
p5.jsは公式からWeb Editorが公開されているので、インターネット接続がある場合はChromeアプリからこちらを使うと簡単だと思います。（少し前にレスポンシブ対応していました）
ですが、作品をインターネット環境のないギャラリーなどで展示したり、本格的にアプリっぽく表示させたい場合はAndroid上にローカルWebサーバーを立ててlocalhostを表示させるとよいのではないかと考えました。
Termuxについて
Androidで動くアプリにTermuxというものがあります。Termuxは、AndroidデバイスでLinux環境を実行できるオープンソースのターミナルエミュレータです。このアプリ自体はPlayストアからインストールできるのですが、バージョンが古くてリポジトリが使えなかったりするので、F-Droidというソフトウェアリポジトリからインストールする形になります。
※F-DroidからのインストールはGoogle的には非公認なので、自己責任でよろしくお願いします。
p5-managerについて
p5-managerとはコマンドを入力することで、p5.js用のファイル構成を自動で生成したり、index.html中のライブラリロード記述をあらかじめしてくれるソフトウェアです。今回は検証のためこちらを使いました。
展示会などではindex.htmlやstyle.css、sketch.jsを専用の形で書いて、Node http-serverなどのローカルWebサーバーを立てるのがいいと思います。
いったんWi-fiに繋いで以下の作業を行いましょう。
手順
1. F-Droidのインストール
Android端末でF-Droidの公式ページにアクセスして、APKファイルをダウンロードします。
ダウンロードしたAPKはそのままではインストールできないので、インストールするために許可します。
APKファイルを開くとChromeで「セキュリティ上の理由から、お使いのスマートフォンではこの提供元からの不明なアプリをインストールすることはできません。」というアラートが表示されるので、画面の指示に従って許可設定をします。
これでF-Droidがインストールできます。
2. Termuxのインストール
F-Droidを起動します。リポジトリの更新が開始されるので、少し待ちましょう。
トップにある検索アイコンをタップし、「Termux」と入力・検索します。
候補リストが表示されるので、「Termux Terminal emulator with packages」を選択してインストールします。
Termuxを起動しましょう。
起動できたら、以下のコマンドを入力します。
$ pkg upgradeところどころ、
Do you want to continue? [Y/n]
と聞かれるので、y を入力してエンターをタップしてください。
そのあと、次のコマンドを入力します。
$ apt update
$ apt upgradeこれでTermuxの準備ができました。
3. Node.jsのインストール
p5-managerを動作させるためにNode.jsをインストールします。
Termuxの画面で次のコマンドを入力します。
$ apt install nodejsこれでNode.jsが入ります。また、次のコマンドを入力します。
$ termux-setup-storageデフォルトでは内部ストレージにアクセスすることはできないので、このこまんどでstorageという名前のディレクトリにアクセスできるようになります。
$ ls
storage4. p5-managerのインストール
続いて、p5managerをインストールします。
概ね配布元のGitHubのドキュメントに沿えばインストール可能です。
以下のコマンドを入力します。
$ npm install -g p5-managerこれでp5-managerがインストールできました。
5. p5-managerを使ってみる
以下のコマンドを入力して、コレクションを作成します。
$ cd storage
$ p5 new p5js_collection
なお、僕の環境だとNode.jsが何か警告を表示していました。動作には支障がない感じだったので無視していますが、気になる方は対処した方がよいと思います。
次に、Sketchを作成するコマンドを入力します。
$ cd p5js_collection
$ p5 generate test
# または
$ p5 g test
これで、自動的にp5-managerがデフォルトのテンプレートを含んだ p5.jsのSketchフォルダーを生成します。
あとは、以下のコマンドで、サーバーを立ち上げることができます。
$ p5 server
# または
$ p5 sTermuxからChromeにアプリを切り替え、http://localhost:5555にアクセスすることで、コレクションのトップページが表示されます。
左側のナビゲーションからSketchにアクセスできます。
6. Sketchの編集
Sketchの編集はTermuxから行います。
作成したSketchのフォルダに移動して、nanoエディタなどで編集するとよいと思います。編集が終わったら上書き保存、再びサーバーを立ち上げることで、Sketchが動作すると思います。
ちなみに、デフォルトではTermuxはAndroidのクリップボードにアクセスすることができないので、F-Droidで「Termux:API」を検索してインストール、そのあと、Terumux上で以下のコマンドを入力することで、クリップボードの共有が可能になります。
$ pkg install termux-api使い方は以下の通りです。
Termux上でコピー
$ termux-clipboard-set hogeクリップボードの中身をTermux上で表示
$ termux-clipboard-getこれでAndroidでp5.jsのコードを実行することが可能になりました。
Node http-serverを使う際は、storageディレクトリの配下にフォルダを作り、その中にindex.html, sketch.js, p5.js（必要であればstyle.cssも）を配置し、同様にTermux上でNode http-serverでホストすることで実行が可能になるかと思います。
追記（20240512）
Node http-serverを使ってアプリっぽく表示させる
作品展示のために色々追加で試行錯誤してみました。
検証内容は以下の通りです。
Node http-serverはTermuxで動くのか
Androidのステータスバー/ナビゲーションとChromeのアドレスバーを非表示にしてフルスクリーン表示はできるか
Node http-serverを動かす
以下のコマンドで普通にインストールできました。
$ npm install -g http-serverそして、適当なディレクトリを作成し、その中にindex.html, p5.js, sketch.jsを用意します。
ディレクトリに移動し、次のコマンドでサーバーを立ち上げます。
$ http-serverChromeでhttp://localhost:8080にアクセスするとSketch.jsが実行されるページが表示できると思います。
フルスクリーン表示させる
ChromeでSketch.jsが実行できましたが、せっかくならアプリっぽくフルスクリーン表示させたいです。
色々方法を探し回りましたが、以下の2つを使うと比較的簡単に実現できました。
ステータスバー/ナビゲーションの非表示にサードパーティ製のアプリを使う
試したなかでは「Fulscrn」というアプリがよかったです。
基本的にはアプリの指示通りでOKです。
Chromeのアドレスバーを非表示にする
Chromeのアドレスバーを非表示にするには、それ専用のjsファイルを用意し、index.htmlで読み込む必要があります。以下のサイトを参考にしました。
ServiceWorker を使ったコードを書いて保存、（僕の場合はfullscr.jsというファイルを作りました）
あらかじめhttp://localhost:8080のページをAndroidのホーム画面に追加し、
http-serverをTermux上で立ち上げてから、ショートカットからページにアクセスすると、無事アドレスバーが表示されなくなりました。
以上、Androidのローカル環境でp5.jsを動作させる方法でした。
この記事が気に入ったらサポートをしてみませんか？