【Flutter】驚くほど簡単！MiraiでサーバードリブンUIを実現!

プラグイン

はじめに

アプリ開発において、動的でスケーラブルで変更要求に対応できるユーザーインターフェース(UI)を構築することが重要です。クロスプラットフォームアプリ開発の需要が高まる中、開発者はアプリストアの承認やクライアント側のアプリ更新を必要とせずに容易に更新できる柔軟なUIを作成する新しい方法を探求しています。Flutterでのアプローチの1つが、サーバードリブンUI(SDUI)です。本ブログでは、Flutterアプリ開発でSDUIを実現できるようになるパッケージMiraiを解説します。

使用方法

インストール

まず、FlutterプロジェクトにMiraiライブラリをインストールする必要があります。pubspec.yamlファイルに以下の依存関係を追加してください。

flutter pub add mirai

Jsonの定義

MiraiはJsonにWidgetを定義します。以下にJsonの例を書きます。

const kJson = '''{
  "type": "scaffold",
  "backgroundColor": "#ffffff",
  "appBar": {
    "type": "appBar",
    "color": "#ffffff",
    "title": {
      "type": "text",
      "data": "Mirai Demo"
    }
  },
  "body": {
    "type": "text",
    "data": "Mirai Demo",
    "style": {
      "color": "#00a2f9",
      "fontSize": 20,
      "fontWeight": "w600"
    }
  }
}''';

今回はFlutterのコード内に含めますが、Jsonをサーバサイドから受け取ることによって、アプリの表示内容を外部で定義し、動的に変更することができます。
キャンペーンなど一時的なWidgetに表示したいWidgetを、アプリ更新することではなく、外部から受け取ることによって定義することができますね！

Flutterの実装

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:mirai/mirai.dart';

void main() async {
  await Mirai.initialize();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    final map = json.decode(kJson);
    final widget = Mirai.fromJson(map, context);

    return MiraiApp(
      title: 'Mirai Demo',
      theme: MiraiTheme(primaryColor: "#00a2f9"),
      home: widget,
    );
  }
}

FlutterアプリケーションでMiraiを初期化するには、

  • MaterialAppをMiraiAppに置き換える
  • main関数内でMiraiを初期化する

今回は全面的にMiraiを使う簡単な例ですが、本来であれば画面の一部にJsonで定義したWidgetを表示することができますね。

応用的な使用方法

Miraiでは、JSONをFlutterウィジェットに変換するための3つのメソッドを提供しています。これにより、サーバードリブンUIスクリーンのJSON設定を取得および読み込む方法に柔軟性が生まれます。

  • Mirai.fromJson()
    このメソッドを使用すると、Flutterアプリ内の文字列から直接JSON設定を解析できます。
  • Mirai.fromAsset()
    このメソッドを使用すると、Flutterアプリ内のローカルアセットファイルからJSON設定を読み込むことができます。
  • Mirai.fromNetwork()
    このメソッドを使用すると、APIエンドポイントなどのリモートネットワークソースからJSON設定を取得できます。

Q&A

Q1: MiraiをFlutterプロジェクトにインストールする方法は何ですか？

A1: pubspec.yamlファイルに以下の依存関係を追加することで、Miraiをインストールできます。

dependencies:
  mirai: ^0.1.0

Q2: Miraiの基本的な使用方法は何ですか？

A2: MiraiをFlutterファイルにインポートし、MaterialAppをMiraiAppに置き換えて、main関数内でMiraiを初期化します。

Q3: MiraiでJSONをFlutterウィジェットに変換する方法は何ですか？

A3: Miraiでは、次の3つのメソッドを使用して、JSONをFlutterウィジェットに変換できます。

  • Mirai.fromJson(): 文字列から直接JSON設定を解析できます。
  • Mirai.fromAsset(): ローカルアセットファイルからJSON設定を読み込むことができます。
  • Mirai.fromNetwork(): リモートネットワークソースからJSON設定を取得できます。

まとめ

Miraiは、Flutterアプリ開発において動的でスケーラブルなUIを構築するための強力で柔軟なSDUIライブラリです。サーバー側でUIコンポーネントを定義し、クライアント側でレンダリングする宣言的な方法を提供しています。これにより、UIコンポーネントの簡単な設定と更新が可能になり、Flutterアプリケーションで動的でスケーラブルなUIスクリーンを構築するのに適した選択肢となります。

参考

全ソース

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:mirai/mirai.dart';

void main() async {
  await Mirai.initialize();
  runApp(MyApp());
}

const kJson = '''{
  "type": "scaffold",
  "backgroundColor": "#ffffff",
  "appBar": {
    "type": "appBar",
    "color": "#ffffff",
    "title": {
      "type": "text",
      "data": "Mirai Demo"
    }
  },
  "body": {
    "type": "text",
    "data": "Mirai Demo",
    "style": {
      "color": "#00a2f9",
      "fontSize": 20,
      "fontWeight": "w600"
    }
  }
}''';

class MyApp extends StatelessWidget {
  MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    final map = json.decode(kJson);
    final widget = Mirai.fromJson(map, context);

    return MiraiApp(
      title: 'Mirai Demo',
      theme: MiraiTheme(primaryColor: "#00a2f9"),
      home: widget,
    );
  }
}