📱

スマフォで始めるWebアプリ開発

5 min read

スマフォで始める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のだいたい3分の1ですね。
つまり、どこでも開発ができる環境ができます。

動作している環境は以下の通りです。

スマートフォン

  • 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ケーブルでモバイルディスプレイに接続しています。
単純に接続しても良いのですが、せっかく15インチのディスプレイにつなぐので、10から試験的に搭載されたデスクトップモードを有効にしています。
試験的なので、いろいろ使い勝手の悪いところはありますが、スマフォ本体と別のアプリをディスプレイ側で起動することができます。(開発者オプションから有効にする隠れ機能ですしね。)
写真でスマフォ側にログだけが流れているのは、そういうカラクリです。
スマフォ本体に、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-essentialPythonをインストールします。
(ついでに使うので、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

ログインするとコメントできます