スマフォで始めるWebアプリ開発
スマフォで始めるWebアプリ開発
はじめに
これには、アルファ版という前バージョンがあるのですが。
「ワンストップアプリ開発」という技術合同誌に収録されています。
その頃は、通勤という人類には、早すぎる苦行が当たり前の様に行われている時期だったので、
スマフォにLinux環境を入れて、電車の中で、個人でのアウトプットを増やし、自分の市場価値を高めよう！！
そういう内容でしたが、この1年、在宅で仕事することが多くなり、完全にコンセプトが崩れてしまいました。
目の前にちゃんとした開発環境（クアッドコアのCore i7のCPU・24GBのRAM・Geforce GTX 1070）があるからわざわざスマフォに入れなくていいよね？と。
そう思ったのですが、とあるネタツイートが、1040いいね・184RTという個人的に大変おバズり申し上げたので、もしかして、今でも需要があるのかな？と思い、この記事を書きました。
ツイートについて
さて、このツイートなのですが。
どう環境構築してるのか？気になると思いますので、これから解説したいと思います。
Android上で使い慣れたVS Codeが動いているとなれば、ウキウキですね！
パソコンを持ち運ばずに、スマフォだけで、プログラムが作れる！
M1のMacBook Airでも、1.29Kgありますからね。
スマフォは重くても、331g(G8X ThinQ デュアルスクリーンケース装着時)なので、Airのだいたい３分の１ですね。
つまり、どこでも開発ができる環境ができます。
動作している環境は以下の通りです。
スマートフォン
- Xperia 1 II XQ-AT42
- Android 10
- Termux 0.101
- code-server 3.9.0
- VisualStudio Code 1.52.1
環境の解説
Androidの端末エミュレーターアプリである「Termux」で、Code-Serverのインストールと起動を行っています。
ツイートの環境は、code-serverをセットアップしたスマフォをUSB Type-Cケーブルでモバイルディスプレイに接続しています。
単純に接続しても良いのですが、せっかく１５インチのディスプレイにつなぐので、１０から試験的に搭載されたデスクトップモードを有効にしています。
試験的なので、いろいろ使い勝手の悪いところはありますが、スマフォ本体と別のアプリをディスプレイ側で起動することができます。（開発者オプションから有効にする隠れ機能ですしね。）
写真でスマフォ側にログだけが流れているのは、そういうカラクリです。
スマフォ本体に、Termuxを起動させて、ディスプレイ側でcode-serverにアクセスするためのブラウザを立ち上げています。
デスクトップモードでは、キーボードとマウスが必須なので、Bluetoothで接続しています。
このモードは、電池消費こそ激しいもの、ウインドウをタイル状に並べることができるため、情報を表示しながら、ブログを書いたりできます。
ただ、スマフォ側で起動したアプリをデスクトップ側に移せないので、一度終了させる必要があります。
そこは今後に期待しましょう（そもそも、試験的機能だから使い勝手が悪いのは当たり前）
Termuxとは
AndroidでLinuxのコマンドを使える端末エミュレータです。-> Termux公式サイト
Root化の必要がなく、ls,cd,catといった一般的なコマンドから、aptなどのパッケージマネージャーも動作させることができます。
インストールできるパッケージが用意されていて、OSSでメンテされています。
（メンテナーの皆様に感謝。スパチャはどこで投げられますか？こちらのレポジトリの”Sponsor”ボタンから寄付ができます）
また、termux-setup-storageを実行することで、AndroidのストレージにTermuxからアクセスできます。（普通に、cdで）
ついでに言うとUbuntuのデスクトップ環境を作って、スマフォでLinuxのGUI環境も動かせます・・・！（UserLAnd使った方が手軽ですが。)
code-serverとは
CoderというクラウドでVS Codeが使えるサービスのコードがオープンソース化したものがcode-serverです。
Coderの場合は、オフラインや通信環境がよくないと利用できません。
しかし、今回はスマフォ内でcode-serverを動かすので、ネットワークがなくても利用できます。
ブラウザで使い慣れたVS Codeが使えます。
画像のコードは、開発中のCLIで使えるTodoリストです。-> EndoHizumi/taskCLI
VS Codeのコンソールからタスク管理したくて、作りました。
開発環境のセットアップ
アプリのインストール
Play Storeから、Termuxと Hacker's Keyboradをインストールします。
Termux - Google Play のアプリ
Hacker's Keyboard - Google Play のアプリ
Hacker's Keyboardは、PCと同じキーボード配列のソフトウェアキーボードです。
日本語こそ入力できませんが、コマンドライン操作に必須なESC/Tab/Ctrlのキーが用意されています。
また、変換候補が表示されないので、スムーズなコマンド操作ができます。
携帯できるBluetoothキーボードが一番ですが、キーボードがないときに積むので
インストールをお勧めします。
code-serverのインストール
Termuxを起動して、以下のコマンドを実行します。
apt update
apt install -y nodejs yarn vim
次に、build-essentialとPythonをインストールします。
(ついでに使うので、gitも添えます。)
apt install -y build-essential Python git
全てのソフトウェアのインストールが終わったら、code-serverのインストールを行います。
yarn global add code-server
多少時間がかかりますので、スマホを放置して空でも眺めましょう・・・。
code-serverの設定
インストールが終わったら、vimを開いて、以下のコンフィグファイルを開いて、編集します。
vi ~/.config/code-server/config.yaml
スマフォローカルでしか使わないので、認証をオフにします。
bind-addr: 127.0.0.1:8080
auth: none # password を Noneに変更する
# passwordを行ごと消す
cert: false
code-serverの起動
以下のコマンドで起動できます。
code-server
アンパサンド（＆）をつけると、バックグラウンドで起動します。
code-server &
code-serverへのアクセス
chromeかfirefoxで http://localhost:8080 にアクセスして、見慣れた画面が出れば、完了です！！
Discussion