[読書会]ビルド時にアセットを変換する

 互換性のある Dart パッケージを使用して、ビルド時アセットを自動的に変換する様にプロジェクトを設定できます。

1.アセット変換の指定

 ここではFlutterアプリでアセットを変換する方法(特に、アセットファイル(画像やデータファイル)をビルド時に特定の形式に変換する方法)について触れています。

1-1.概要

(1)アセット変換の指定

 Flutterのプロジェクトでアセット(例えばSVGファイルなど)を使う際、通常はアセットをそのままアプリに取り込みますが、アセットを最適化する為に変換を行うことが可能です。
(この例では、pubspec.yaml ファイルでアセットを指定し、そのアセットに対して変換を適用する為に transformers を設定しています。)

Dart
flutter:
  assets:
    - path: assets/logo.svg
      transformers:
        - package: vector_graphics_compiler

 ここで、assets/logo.svg というSVGファイルをアセットとして指定していますが、このファイルはそのままではなくvector_graphics_compiler というパッケージを使って変換されます

(2)変換内容

 vector_graphics_compiler パッケージは、SVGファイルを最適化されたバイナリ形式事前コンパイルする為のものです。
これにより、ランタイム中にSVGファイルをレンダリングするのではなく、あらかじめ効率的に処理されたバイナリファイルとして使用できる様になります。これにより、アプリのパフォーマンスが向上する可能性があります。

アセットファイルを使う際、次のようにコードで指定します。
import 'package:vector_graphics/vector_graphics.dart';

const Widget logo = VectorGraphic(
  loader: AssetBytesLoader('assets/logo.svg'),
);

 上記のコードでは、VectorGraphic ウィジェットを使用して、事前コンパイルされたSVGファイルを表示しています。AssetBytesLoader を使ってアセットを読み込み、最適化されたグラフィックとして描画されます

(3)まとめ

 この方法により、SVGのようなベクターグラフィックスをバイナリ形式に変換して効率的に表示することができ、アプリの動作がスムーズになります。また、pubspec.yamlで変換を定義するだけで、ビルド時に自動的に最適化が行われるため、開発者の手間が省けるというメリットがあります。

1-2.アセットトランスフォーマーズ に引数を渡す

 ここでは、アセット変換時に追加のパラメータ(引数)を渡す方法について解説されています。
特定のアセットを変換する際に、パラメータを使用して変換の挙動をカスタマイズできる仕組みです。

(1)アセット変換への引数の渡し方

 アセットを変換する際、単に変換を適用するだけではなく、変換プロセスに対して具体的なオプションや引数を指定することができます。
(この例では、pubspec.yaml にアセットとその変換パッケージを指定し、さらに args という項目変換プロセスに渡す引数を設定しています。)

pubspec.yaml にアセットとその変換パッケージを指定し、さらに args という項目で変換プロセスに渡す引数を設定しています:
flutter:
  assets:
    - path: assets/logo.svg
      transformers:
        - package: vector_graphics_compiler
          args: ['--tessellate', '--font-size=14']

 この例では、vector_graphics_compiler というアセット変換パッケージに対して、2つの引数を渡しています

  • –tessellate
     この引数は、グラフィックを多角形(テッセレーション)に変換するオプションを指定しています。
     SVGのようなベクターデータを、ディスプレイ用に多角形に分割して描画するために使われるオプションです。
  • –font-size=14
     この引数は、フォントサイズ14に設定するオプションです。
     SVG内に含まれるテキスト要素がある場合、フォントサイズを指定し、そのテキストの表示サイズを制御します。

(2)引数を渡す理由

 この様に、特定のアセット変換時にカスタマイズしたオプションを設定することが可能であり、これにより変換結果をより細かく制御することができます。例えば、グラフィックの描画精度やフォントサイズを調整することで、異なるデバイスや解像度に最適化されたアセットを生成することができます。

(3)まとめ

 この手法により、特定のアセット変換にカスタマイズされたオプションを指定し、変換プロセスを制御できます。pubspec.yaml で引数を指定するだけで、変換処理に対する詳細なオプションを設定できるため、アセットの取り扱いが非常に柔軟になります。

1-3.アセットトランスフォーマ の連鎖

 ここでは、アセットトランスフォーマの連鎖について触れています。

(1)アセットトランスフォーマーのチェーンとは?

 アセットトランスフォーマを 連鎖させることができ、指定された順序で複数のトランスフォーマを適用することが可能です。
チェーン(連鎖)処理では、1つのトランスフォーマが出力した結果が、次のトランスフォーマの入力として渡され、段階的に処理が進みます。

2つのトランスフォーマ が使われている(例):
flutter:
  assets:
    - path: assets/bird.png
      transformers:
        - package: grayscale_filter
        - package: png_optimizer
  1. grayscale_filter パッケージ
     最初に、bird.png 画像にグレースケールフィルタを適用します。
     これによって、画像が白黒に変換されます。
  2. png_optimizer パッケージ
     次に、グレースケールに変換された画像が png_optimizer で最適化されます。
     この処理では、ファイルサイズを削減したり、圧縮アルゴリズムを適用したりして、画像の容量を軽くします

(2)適用の順序

 トランスフォーマは 宣言された順番に適用 されます。
つまり、最初に grayscale_filter が適用され、その結果を基に png_optimizer が処理を行います
(例えば、最初に画像を最適化してからフィルタを適用する場合、異なる結果になる可能性があり)この順序は重要です

(3)応用の場面

 この様なトランスフォーマのチェーンは、画像やアセットファイルを 段階的に処理 したい場合に非常に便利です。
異なるトランスフォーマを組み合わせることで、複雑な変換や最適化プロセスを簡単に構築できます。

2.アセット変換パッケージの作成

 Flutter での アセットトランスフォーマ(asset transformer) の仕組みとその作成方法について触れています。

(1)アセットトランスフォーマとは?

 アセットトランスフォーマは、アセットファイルをビルド時に変換するための Dart コマンドラインアプリです。
通常、特定のアセットファイル(画像、SVG等)をより効率的に使う為に最適化したり、別形式に変換する際に利用されます。

(2)トランスフォーマの起動方法

 アセットトランスフォーマは、次の様に dart run コマンドで起動します。起動時に少なくとも2つの引数が渡されます。

  1. –input
     変換対象のファイルパスです。
     このファイルが実際にトランスフォーマによって処理されます。
  2. –output
     変換後の出力ファイルパスです。
     トランスフォーマはこの場所に変換されたファイルを出力します。

 これらの引数は、トランスフォーマによる、変換前また変換後のファイルの場所を指定する為に使用されます。

(3)トランスフォーマの終了コード

  • 正常終了(0)
     トランスフォーマが正常に終了した場合、通常は終了コード0が返されます。
     この場合、ビルドは成功します。
  • エラー終了(非ゼロ)
     トランスフォーマが何らかの問題で正常に完了しなかった場合は、非ゼロの終了コードが返されます。
     この場合、ビルドプロセスはエラーメッセージを出力して失敗します。

 トランスフォーマがエラーを出力する際、stderr ストリームにエラーメッセージが書き込まれます。
このメッセージはビルド失敗時のエラーメッセージに含まれるため、何が原因でトランスフォーマが失敗したのかを簡単に特定することができます。

(4)アセットトランスフォーマーの利用シーン

 このようなトランスフォーマは、例えば SVGファイルのバイナリフォーマットへの変換 や、画像ファイルの圧縮や最適化 に使われます。これにより、アプリのパフォーマンス向上やファイルサイズの削減を図ることができます。

 トランスフォーマ パッケージは、Dartで開発でき、他の開発者と共有することも可能です。

3.サンプルコード

 アセット変換を使用し、トランスフォーマとして使用されるカスタム Dart パッケージを含むサンプル Flutter プロジェクトについては、Flutter サンプル リポジトリの asset_transformers プロジェクトを参照して下さい。

コメントを残す