こんにちは、lisです!
スマホ上の、p5.js開発環境開発についてご紹介します!
スマホでの開発環境
- 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のシェルを使えるアプリです。
詳細はこちらをどうぞ。
これを使って主に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
Foxdebug無料posted withアプリーチ
機能的には無料でも事足りますが、有料版もあります。
機能開放とか課金するには良いのではないでしょうか。*1
Acode - powerful code editor
Foxdebug¥120posted withアプリーチ
いまのところこのエディタで落ち着いていますが、もっといいものとかあれば是非知りたいです!
Hacker's Keyboard
コーディングに使用しているキーボードです。
Hacker's Keyboard
Klaus Weidner無料posted withアプリーチ
このキーボードのいいところは、よくあるスマホのキーボードで省略されている記号や特殊キーが打てます。
例えばCtrl
とかですね。
なのでショートカットキーも入力可能です。
あんまりなところは、そもそもの入力のしづらさです。
PCのキーボードをギュッとスマホに落とし込んだようなUIをしているためキーピッチとかせませまです。
設定である程度縦幅とかキーの省略で対応できなくもないですが……
キーの省略しちゃうとあんまりだなー……と思ってフルにしてせませまキーのまま……
というのが現状です。
こちらも、他にいいものがあれば是非知りたいです。
参考
コチラを参考にしました。ありがとうございました!
あとがき
*1:今のところ機能開放箇所は、SFTPとかテーマ関連くらいしか知りませんが