スマホでnode.jsプログラミング - acepad (2) おおまかな使い方とか

前回の記事では、ただいま絶賛開発中のacepadについて概要を述べましたが、一応どんな風に動かすのか/どんな風に動いているかをおおまかに紹介していきます。

起動画面

まず、こんな起動画面が出ます。前回は「いいからSetup/Restoreを押してみよう」みたいなことを書いていましたが、他にも２つくらいボタンがついているので紹介します。

• Setup/Restore
  • 起動用の標準イメージをダウンロードし、仮想ファイルシステム（※前回参照）内の/tmp/boot/に解凍した後、同フォルダから起動処理を行います
• Insert Boot Disk
  • Zipファイルをローカルマシンからアップロードし、 仮想ファイルシステム内の/tmp/boot/に解凍した後、同フォルダから起動処理を行います
• Factory Reset
  • localStorageの内容を全消去します。Setup/Restoreを押しても起動がうまくいかない時用です。

起動処理っていうのは「フォルダ直下のpackage.jsonを見て、mainフィールドに書かれているJavaScriptファイルを実行」する、という処理です。試しに、次の２つのファイルを同じフォルダに作ってzipでまとめたものを「Insert Boot Disk」でアップロードしてみると、ちゃんと実行されてalertが表示されます。

package.json

{"main": "hello.js", "type":"module"}

hello.js

alert("Hello, acepad world");

importも使えます。次のように変えてみて、world.js hello.js package.jsonの３つのファイルを再度zipにして（いったんページを再読み込みしてから）「Insert Boot Disk」でアップロードしてみると、42が表示されます。

world.js

export const f=(x)=>x*2;

hello.js

import {f} from "./world.js";
alert(f(21));

このへんの機能は、acepadを動かしているベースとなるpetit-nodeの機能ですが、ついでなので紹介しちゃいました。

なお、起動画面のボタンは上記の「Setup/Restore」「Insert Boot Disk」「Factory Reset」の３つ以外に、ルートフォルダに/package.jsonを作ることで増やせるのですが……それはまた次回以降にお話しします。

基本操作

acepadを起動した後の画面では、最初に「物理キーボードを使うか」「スクリーンキーボードを使うか」を聞かれます。PCで操作する場合は、どれかキーを押すと「物理キーボードを使う」ことができます。

キーボードを選択した後には、スクリーンキーボードと/user/とだけ書かれたテキストエリアが出ます。

画面が狭い端末（というか、ほとんどのスマートフォン）では、上図の緑色のキーは左上のSYMで切り替えて入力します。

さて、/user/と出ているエディタの部分は、セッション(emacsでいうところのBuffer）の一覧です。セッションとは、異なるファイルの編集や、およびフォルダや実行結果の表示を行うために１つのエディタの内容を切り替える仕組みです。

今更ですが、ここに表示されているテキストエディタはAce Editorです(Acepadの名前の由来。Ace Editorにスマートフォン用のスクリーンキーボード(keypad)をくっつけたものの意）。セッションの切り替え自身はAce Editorの機能です。

/user/の上でEntを押すと、/user/フォルダの中身を表示します。

samples/を押すとサンプル一覧のフォルダに移動しますが、せっかくなので他の機能も紹介しておきます。

• new: の後ろにファイル名を書いてEntを押すとそのファイルを新規作成します。なお、末尾が/の場合フォルダを新規作成します。
• sh: の後ろにシェルコマンドを書くと、シェルを実行します。例えば、 sh: の後ろにlsと入力してEntを押してみまよう。

こんな感じで、スマートフォンのアプリらしからなぬ、キーボードを中心とした操作を要求されます。サンプルの中身を見ようと思ったのですが寄り道しすぎたのでそれは次回に……