Lynxでアプリ開発に入門

最近、LynxというJavascript+html+css技術でネイティブアプリを作れる
ReactNativeにちょっと似ているフレームワークが登場しました。

このLynxに興味を持ち勉強したいと思い挑戦してみました。
今回初めてということで、環境構築〜動作までを説明していきます。

公式docに沿って進めていきます。

Node.jsの用意

前提としてndoe.jsのインストールが必須です。
ここからダウンロードしておきましょう

LynxExplorerのダウンロードと設定

Lynxを動かすのにLynxExploreが必要ですのでダウンロードします。
この時、"arm64"か"x86_64"を選択するようになっていますが、必ず自分のPCと一致する方を選んでダウンロードしてください。異なるものをダウンロードすると、LynxExplorerが動作しません。

自分のMacがどちらかは、下記で確認できます。

uname -m

公式docの"Download LynxExplorer・・・・・・"の部分を
クリックしてダウンロードします。

ダウンロードされたら、圧縮ファイルを解凍します(ダブルクリックで解凍)。

Xcodeを開き(インストールしてなければインストール)、iosシュミレータを起動します。
起動が完了したら、解凍した"LynxExplorer-arm64.app"をシュミレータにドラック&ドロップしてください。

すると、シュミレータにLynxExplorerのアプリが追加されます。

新規Lyncsプロジェクトの作成

任意の場所で下記コマンドを実行しLynxプロジェクトを作成します。

npm create rspeedy@latest

実行すると、下記の質問をされるので入力or回答していきます

◆  Create Rspeedy Project
│
◇  Project name or path
│  →(プロジェクトの名前。なんでもいいです)
│
◇  Select language
│  →TypeScriptかJavascriptのどちらかを選択
│
◇  Select additional tools (Use <space> to select, <enter> to continue)
│  →現時点ではどれでもいいいです

これでプロジェクトフォルダの作成が完了です。
プロジェクトフォルダに移動(cd プロジェクト名)し、
npm installを実行します。

npm install

続いて、下記を実行してください。

npm run dev

npm run devを実行すると、サーバーが起動します。

この時下の方で表示されるURLをLynxExplorerで使用します。
SimulatorのLynxExplorerアプリを起動し、"Card URL"にサーバー起動の際に表示されたURLを
入力し、GOボタンを押すとプロジェクトを動かすことができます。

以上で、Lynxでプロジェクトを作り動かすところまでの入門になります。