CSSアニメーションで表現するアプリ開発の魅力

こんにちは。
最近、マルチプラットフォームフレームワークのLynxが気になっております。
Lynxにはどんな特徴があるのかGrokに聞いてみました！

主な特徴
ウェブ技術の活用: 
HTMLとCSSに近いAPIを提供し、ウェブ開発者がモバイルアプリ開発に簡単に移行できるように設計されています。

UIはLynxエンジンによって各プラットフォームのネイティブAPIに変換されるため、Flutterのように独自の描画エンジンでUIをレンダリングするのではなく、React Nativeに近いアプローチを取っています。

レイアウトの柔軟性: 
Flexbox、Grid、Linear、Relativeといった多様なレイアウトオプションをサポート。

特にGridレイアウトはReact Nativeにはない機能で、レスポンシブデザインに強みを発揮します。

パフォーマンスと軽量性: 
プリミティブなAPIを中心に構成されており、軽量で高速な動作が特徴。

Rspeedy（Rspackベースのビルドツール）によりビルド時間が短縮されています。

拡張性: 
Native Module機能があり、Lynxが標準で提供しないネイティブ機能も独自に追加可能。

制限と課題: 
初期段階ではプリミティブなAPIのみ提供されており、必要な機能を自分で実装する必要がある場合があります。

React Nativeのような「Continuous Native Generation」の仕組みはないため、iOS/Androidのプロジェクト設定を手動で調整する必要があります。

ということみたいです。
ビルド時間の短縮はありがたいですね！
またCSSが使えるので表現力に幅がでそうですね。
サンプルアプリを見た感じ、テキストの間にアイコン挟んだり、いろんなパターンのグラデーションが使えたり、アプリのデザインにこだわりたい場合に良さそうです。

さて、マルチプラットフォームと言えば他にも色々ありますよね。
他ツールとの違いはなんでしょう。
これもGrokに聞いてみました。

他のフレームワークとの違い
React Nativeとの比較: React Nativeと似たネイティブAPI呼び出し型のアプローチですが、LynxはGridレイアウトや独自の最適化（例: 高速ビルド）が強み。一方で、エコシステムはまだ成熟しておらず、React Nativeほどの豊富なライブラリやコミュニティサポートはありません。

Flutterとの比較: FlutterがSkiaエンジンでUIを描画するのに対し、LynxはネイティブUIに依存するため、より軽量でプラットフォーム固有の挙動に忠実。ただし、カスタマイズ性ではFlutterが上回る場合も。

Ionic/Cordovaとの比較: ウェブビューを使用するこれらのフレームワークと異なり、LynxはネイティブUIを描画するため、パフォーマンスが優れています。

とのことです。
まだまだコミュニティが成熟していないということ、Flutterよりカスタマウズに劣るということですね。
とにかくパフォーマスに優れているということが優位点という感じですかね。

普段、Flutterでアプリを作るお仕事をしているのですが、やっぱり気になるのはビルド時間が長い。
これが早くなると嬉しいですよね。

とにかく使ってみないことには始まらない。
Grokさんに開発環境のセットアップ方法を聞いてみました。
必要なのはnodeのv16以上とのこと。
すでにnode v19が入っていたのですが、npmが古くてアップデートしなくてはいけなかったのですが、最新バージョンとの互換性がないとのことでnodeのバージョンも上げました。

$ node -v
v22.14.0
$ npm -v
11.2.0

作業ディレクトリを作成し、

 $ npx create-rspeedy
  Need to install the following packages:
   create-rspeedy@0.8.3
  Ok to proceed? (y) 


◆  Create Rspeedy Project
│
◇  Project name or path
│  my-first-project
│
◇  Select language
│  TypeScript
│
◇  Select additional tools (Use <space> to select, <enter> to continue)
│  none
│
◇  Next steps ─────────────╮
│                          │
│  1. cd my-first-project  │
│  2. git init (optional)  │
│  3. npm install          │
│  4. npm run dev          │
│                          │
├──────────────────────────╯
│
└  All set, happy coding!

こんな感じで色々聞かれるので答えるとプロジェクトができあがります。
ガイドの通りにプロジェクトのディレクトリへ移動し、npm install後npm run devするとローカルでサーバーが立ち上がります。

アプリをシミュレータでみるには、 Lynx Explorerを使います。
AndroidとiOSの Lynx Explorerが配布されています。
使いたい方の Lynx Explorerを公式サイトからDLしてきます。

Quick Start - Lynx

これをシミュレータ上D&Dします！
私はiOSシミュレータを使いました。

アプリが起動したら、Card URLというところに先ほど立ち上がったサーバーのURLを入力します。
すると、最初の画面が出てきます。

　　少しテキストを変更してみましたが、ホットリロードも効いて開発しやすそうです。

この真ん中のロゴ画像なのですが、実は常にアニメーションしているのですが、これはCSSでアニメーションさせているみたいです。

.Logo--lynx {
  width: 100px;
  height: 100px;
  animation: Logo--shake infinite 0.5s ease;
}

これは便利ですね。
ちょっとしたアニメーションがあるとちょっと良さげなアプリができますね。

これから色々いじっていこうかと思います。またいつか後日談書きたいと思いますー！

省エネ

Flutter、vue3修行中。

Lynxによるモバイルアプリ開発の特長とは