lisz-works

プログラミングと興味を貴方に

p5.js用スマホ環境構築

【スポンサーリンク】

p5.js

こんにちは、lisです!

スマホ上の、p5.js開発環境開発についてご紹介します!

www.lisz-works.com

スマホでの開発環境

  • Termux
    • Syncthings
    • cron
    • rsync
  • ACode
  • Hacker's Keyboard

ざっくりとした概要としては

  • SyncthingsでPCと同期
  • rsyncでローカル内で同期
  • スマホでコーディングはACodeを使う

という感じです。

Termuxにsyncthingsを入れてPCとデータ同期しています。

ただTermuxのhome内のディレクトリに同期をしても、ACode側で取り扱えません。

なのでrsyncで内部ストレージにコピーしてACodeでアクセスできるようにしています。

syncthingsはリアルタイムで同期してくれますが、rsyncはcronで動いてもらっているので、夜中に相互コピーする用にしています。

Termux

TermuxはAndroid上でLinuxのシェルを使えるアプリです。

f-droid.org

詳細はこちらをどうぞ。

www.lisz-works.com

www.lisz-works.com

これを使って主にPCとの同期や、ファイル管理を行っています。

Syncthings

Termux上で使用するLinuxのパッケージです。

PCとの同期用に使用しています。

PC環境のSyncTrayzor(Syncthings)とやりとりするよう設定しています。

cron

Termux上で使用するLinuxのパッケージです。

cronの使い方

インストールはこちら。

$ pkg install cronie

crontab -eで自動実行の設定を書けばOKです。

詳細は割愛しますが、「rsyncの使い方」で一例を紹介します。

rsync

Termux上で使用するLinuxのパッケージです。

スマホ内でファイル同期するのに使用しています。

「なんでそんなことが必要なのか?」

というと、Termuxのホーム下(例えば ~/work)で作業、PCと同期していたとします。

しかしここは基本的には他のアプリでは触れません。開けても編集とかできないのです。

「ファイルの編集は、vimしか使わないんや!」

みたいな人はさておき、別のエディタアプリで編集したい!というときはいじれません。

ということで、/sdcard/(内部ストレージ)下とTermux下の作業ディレクトリを同期して使用しています。

仕様上仕方ないですが、若干面倒です。

rsyncの使い方

インストールはこちら。

$ pkg install rsync

下記のようなスクリプトを作成しています。

#!/bin/bash

work_dir=$HOME/work/p5js-test
sd_dir=/sdcard/work/p5js-test.rsync

if [ "$1" == "sd2work" ]; then
    rsync -avru --exclude='.git' --exclude='.stfolder' --exclude='.stignore' --exclude='ts' ${sd_dir}/* ${work_dir}/
elif [ "$1" == "work2sd" ]; then
    rsync -avru --exclude='.git' --exclude='.stfolder' --exclude='.stignore' --exclude='ts' ${work_dir}/* ${sd_dir}/
fi

このスクリプトをcronで自動実行するようにしています。

~ $ crontab -l
0 3 * * * /data/data/com.termux/files/home/bin/sync_p5js.sh work2sd
30 3 * * * /data/data/com.termux/files/home/bin/sync_p5js.sh sd2work

手動でも実行できるように、こんな感じのaliasを設定しています。

alias sd2w='rsync -avru --exclude=.git --exclude=.stfolder --exclude=.stignore --exclude=ts /sdcard/work/p5js-test.rsync/* $HOME/work/p5js-test/'
alias w2sd='rsync -avru --exclude=.git --exclude=.stfolder --exclude=.stignore --exclude=ts $HOME/work/p5js-test/* /sdcard/work/p5js-test.rsync/'

今この記事を書いていて「なぜaliasはスクリプトを使っていないのか」ということに気づきました。

なのでこのようにした方が合理的です。

alias sd2w='~/bin/sync_p5js.sh sd2work'
alias w2sd='~/bin/sync_p5js.sh work2sd'

ACode

コーディングに使用しているエディタは、ACodeを使用しています。

ACodeは実行ボタンを押すだけで簡単にプレビューもできるのでいい感じです。

Acode - powerful code editor

Acode - powerful code editor

Foxdebug無料posted withアプリーチ

機能的には無料でも事足りますが、有料版もあります。

機能開放とか課金するには良いのではないでしょうか。*1

Acode - powerful code editor

Acode - powerful code editor

Foxdebug¥120posted withアプリーチ

いまのところこのエディタで落ち着いていますが、もっといいものとかあれば是非知りたいです!

Hacker's Keyboard

コーディングに使用しているキーボードです。

Hacker's Keyboard

Hacker's Keyboard

Klaus Weidner無料posted withアプリーチ

このキーボードのいいところは、よくあるスマホのキーボードで省略されている記号や特殊キーが打てます。

例えばCtrlとかですね。

なのでショートカットキーも入力可能です。

あんまりなところは、そもそもの入力のしづらさです。

PCのキーボードをギュッとスマホに落とし込んだようなUIをしているためキーピッチとかせませまです。

設定である程度縦幅とかキーの省略で対応できなくもないですが……

キーの省略しちゃうとあんまりだなー……と思ってフルにしてせませまキーのまま……

というのが現状です。

こちらも、他にいいものがあれば是非知りたいです。

参考

コチラを参考にしました。ありがとうございました!

note.com

naoberry.com

yanor.net

あとがき

*1:今のところ機能開放箇所は、SFTPとかテーマ関連くらいしか知りませんが