はじめに
本記事はLivebook上にLiveViewNativeのサーバーを構築するライブラリLiveViewNativeKinoを紹介します
LiveViewNativeとは
Phoenixで構築したWebアプリケーションから、
websocketとLiveViewのスタックを介してiOS,Android,Flutterの各プラットフォームの
データの一覧追加更新、イベントハンドリング、ステート管理、画面構成を行うライブラリです
Livebookとは
Automate code & data workflows with interactive notebooks
データ処理・描画やAIタスク、最近はPythonの実行まで出来るインタラクティブ実行環境です
アプリのインストール、ソースコードからサーバーの起動でも利用できます
Kinoとは
Client-driven interactive widgets for Livebook
Livebookで使用するインタラクティブなウィジェットです
主に画面等描画、インプットフォームや動画の再生など色々できます
KinoLiveViewNative
livebookのスマートセル上にLiveViewNativeを組み込んだPhoenixサーバーを起動し
各クライアント（iOS,Android,Flutter)と通信を行います
利点としては、Phoenixのプロジェクトを作成することなく
LiveViewNativeを試すことができます
開発状況
６ヶ月ほど前から止まっており、破壊的変更が行われたLiveViewNativeの最新版の対応がされていないため、最新のライブラリを使おうとするとうまく動きません
forkしました
@RyoWakabayashi さんがliveview_native 0.4対応を行ってくれたので最新のバージョンでも動くようになりました
flutter対応しました
さらにforkしてflutterも組み込みました
準備
実際に動かそうと思いますが、その前に下準備としてlivebook,flutterのインストールとAndroidまたはiOSのシミュレーターを起動できるようにしておきます
Livebookのインストール
Windows,Macの方はこちらからインストールバイナリを落としてインストールをしてください
Linuxの方は
ソースから実行するか
git clone git@github.com:livebook-dev/livebook.git
cd livebook
mix deps.get --only prod
# Run the Livebook server
MIX_ENV=prod mix phx.server
dockerから起動してください
Flutterの開発環境の構築
こちらの記事のリンクを参考にしてください
iOS Simulatorの準備
以下の記事のXcodeのインストールを参考にしてください
Android Emulatorの準備
以下の記事のAndroidStudioのインストールを参考にしてください
サーバー側の起動
以下のコマンドでリポジトリをcloneします
git clone https://github.com/thehaigo/kino_live_view_native.git
完了したら、Livebookを起動してopenを押してサンプルのノートブックを開きます
ノートブックを開くとすでに設定と使用するライブラリの指定はされているので、setup(または Reconnected and setup)を押してセットアップを開始します
１つ目のセルを実行します
こちらにはSwiftUIとFlutterの画面を定義しています
:okが返ってくるとPhoenixサーバーが起動してログが流れるようになります
クライアントアプリの作成
こちらのFlutterに沿って行います
flutter create my_flutter_app
ライブラリの追加
dependencies:
flutter:
sdk: flutter
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^1.0.8
+ liveview_flutter:
+ git:
+ url: git@github.com:alex-min/live_view_native_flutter_client.git
+ ref: master
以下のコマンドで取得します
flutter pub get
main.dartを次のように書き換えます
import 'dart:io';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:liveview_flutter/liveview_flutter.dart';
void main() {
WidgetsFlutterBinding.ensureInitialized();
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({super.key});
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
final LiveView view = LiveView();
@override
initState() {
Future.microtask(boot);
super.initState();
}
void boot() async {
if (kIsWeb) {
view.connectToDocs();
return;
}
await view.connect(
Platform.isAndroid
?
// android emulator
'http://10.0.2.2:4000'
// computer
: 'http://localhost:4000/',
);
}
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return view.rootView;
}
}
保存したら以下を実行します
flutter run
実行する端末を指定してAndroid,iOSの両方で表示されるのを確認できました
最後に
KinoのイメージからLivebook上で画面が描画されると勘違いしましたが、
Livebookからノートブックをベースに起動して、コンポーネント等を簡単に試せるなど色々便利ではありますね
本記事は以上になりますありがとうございました