Lynx開発環境をandroid(pixel)上で実行してみる

はじめに

自分の備忘録のために調べたことと参照先をまとめていきたい。
Android端末上に構築した環境でLynxを試してみたい。
下記環境へのnode.js npmの構築は以下前述
参照：https://qiita.com/Shanuki/items/5c40d25f7f594b92a49a

目次

• 環境
• 初期状態で実行
• 編集してみる

環境

• 端末：pixel6a(Androidスマートフォン)
• アプリ：ターミナル
• Linux仮想環境：debian
  (Android Virtualization Framework)
• debianバージョン：Linux localhost 6.1.0-29-avf-arm64 #1 SMP Ubuntu 6.1.123-1 (2025-01-02) aarch64 GNU/Linux
  参照：https://news.yahoo.co.jp/articles/d3473c2e2a2cd2d4e084b2e4b65d2d9953d0277f

初期状態で実行

参照：https://lynxjs.org/guide/start/quick-start.html#ios-simulator-platform=macos-arm64,explorer-platform=ios-simulator

1.プロジェクト作成

lynxSmpというディレクトリを作成して進める。

npm create rspeedy@latest

対話形式で生成するプロジェクトの名称･言語･linterを聞かれるので設定していく。

対話内容

> npx
> create-rspeedy

◆  Create Rspeedy Project
│
◇  Project name or path
│  lynxSmp #生成するディレクトリ名称
│
◇  Select language
│  TypeScript #言語選択
│
◇  Select additional tools (Use <space> to select,
<enter> to continue)
│  none #lintツール選択
│
◇  Next steps ─────────────╮
│                          │
│  1. cd lynxSmp           │
│  2. git init (optional)  │
│  3. npm install          │
│  4. npm run dev          │
│                          │
├──────────────────────────╯
│
└  All set, happy coding!

実行結果

2.実行環境のインストール

公式サイトQRコードから実行ツールをインストール

3.実行

cd lynxSmp
npm install
npm run dev

ポートへのアクセス許可が出ますので許可します。

4.実行結果

先程インストールしたlynxExploreでQRコードを読み込む。今回は同じ端末上でやっているので出力されたURLを直接入力するとアプリの初期画面が出力されます。

実行することが出来ました。

編集してみる

以下のファイルを編集して実行してみます。

src/App.tsx

<text className="Title">ここを編集しました。</text>

再度実行してみる

npm install
npm run dev

実行結果

環境自体は問題なさそうですが、実際に動かしながら何か作るとなるとデバッグ等で苦戦しそうです。
つぎはTypeScriptの勉強がてらテーマを見つけて何か作ってみたいと思います。