フロントじゃなくてサーバー？! LiveViewNativeのサーバーをlivebookで一瞬で構築するKinoLiveViewNativeの紹介

# はじめに
本記事はLivebook上にLiveViewNativeのサーバーを構築するライブラリLiveViewNativeKinoを紹介します

# LiveViewNativeとは

Phoenixで構築したWebアプリケーションから、
websocketとLiveViewのスタックを介してiOS,Android,Flutterの各プラットフォームの
データの一覧追加更新、イベントハンドリング、ステート管理、画面構成を行うライブラリです



# Livebookとは

https://livebook.dev/

>Automate code & data workflows with interactive notebooks

データ処理・描画やAIタスク、最近はPythonの実行まで出来るインタラクティブ実行環境です

アプリのインストール、ソースコードからサーバーの起動でも利用できます

# Kinoとは

https://github.com/livebook-dev/kino

> Client-driven interactive widgets for Livebook

Livebookで使用するインタラクティブなウィジェットです
主に画面等描画、インプットフォームや動画の再生など色々できます

# KinoLiveViewNative

https://hexdocs.pm/kino_live_view_native/example.html

 livebookのスマートセル上にLiveViewNativeを組み込んだPhoenixサーバーを起動し
 各クライアント（iOS,Android,Flutter)と通信を行います

 利点としては、Phoenixのプロジェクトを作成することなく
 LiveViewNativeを試すことができます

 ## 開発状況
 ６ヶ月ほど前から止まっており、破壊的変更が行われたLiveViewNativeの最新版の対応がされていないため、最新のライブラリを使おうとするとうまく動きません

 ## forkしました

https://github.com/RyoWakabayashi/kino_live_view_native
 
 @RyoWakabayashi さんがliveview_native 0.4対応を行ってくれたので最新のバージョンでも動くようになりました


 ## flutter対応しました

さらにforkしてflutterも組み込みました

https://github.com/thehaigo/kino_live_view_native



# 準備

実際に動かそうと思いますが、その前に下準備としてlivebook,flutterのインストールとAndroidまたはiOSのシミュレーターを起動できるようにしておきます

## Livebookのインストール

Windows,Macの方はこちらからインストールバイナリを落としてインストールをしてください

https://livebook.dev/#install

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から起動してください

https://github.com/livebook-dev/livebook?tab=readme-ov-file#docker


## Flutterの開発環境の構築

こちらの記事のリンクを参考にしてください

https://qiita.com/the_haigo/items/97189f01327e38ad36d1#%E7%92%B0%E5%A2%83%E6%A7%8B%E7%AF%89


## iOS Simulatorの準備

以下の記事のXcodeのインストールを参考にしてください

https://qiita.com/the_haigo/items/5788b34c4b806020c0b9#xcode%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB

## Android Emulatorの準備

以下の記事のAndroidStudioのインストールを参考にしてください

https://qiita.com/the_haigo/items/5788b34c4b806020c0b9#androidstudio%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB

# サーバー側の起動

以下のコマンドでリポジトリをcloneします

```
git clone https://github.com/thehaigo/kino_live_view_native.git
```

完了したら、Livebookを起動してopenを押してサンプルのノートブックを開きます

![スクリーンショット 2025-04-02 16.26.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64198/4c7927f2-c065-43e6-b0cb-82c531d9f1eb.png)


![スクリーンショット 2025-04-02 16.27.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64198/0907fae7-affd-4647-8b53-2719088dd4b0.png)


ノートブックを開くとすでに設定と使用するライブラリの指定はされているので、setup(または Reconnected and setup)を押してセットアップを開始します

![スクリーンショット 2025-04-02 16.30.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64198/b770e1c6-c4bd-4456-a763-d77a28029ee9.png)


１つ目のセルを実行します

こちらにはSwiftUIとFlutterの画面を定義しています

![スクリーンショット 2025-04-02 16.34.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64198/48c84dba-1623-4314-ab77-5e50fe5dce9c.png)

:okが返ってくるとPhoenixサーバーが起動してログが流れるようになります

![スクリーンショット 2025-04-02 16.34.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64198/708213ce-6f7c-479c-8cee-2690b74dfe50.png)


# クライアントアプリの作成
こちらのFlutterに沿って行います

https://qiita.com/the_haigo/items/97189f01327e38ad36d1

```
flutter create my_flutter_app
```

ライブラリの追加

```diff_yaml:pubspec.yaml:L30
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`を次のように書き換えます

```lib/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の両方で表示されるのを確認できました

![スクリーンショット 2025-04-02 16.43.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64198/f43dca1b-e591-49de-b0f2-3482cb4d6c21.png)


# 最後に

KinoのイメージからLivebook上で画面が描画されると勘違いしましたが、
Livebookからノートブックをベースに起動して、コンポーネント等を簡単に試せるなど色々便利ではありますね

本記事は以上になりますありがとうございました