ColorFiltered で カメラフィルタを実装する

2023/06/05 YOUTRUST x ゆめみ Flutter LT会
https://yumemi.connpass.com/event/284933/

Transcript

1. ColorFiltered で
   カメラフィルタを実装する
   2023/06/05　YOUTRUST x ゆめみ Flutter LT会
   @kumamo_tone
   

   View Slide

2. @kumamo_tone
   2020 Flutter の学習をし始める
   2021　カメラフィルターアプリ CapsCamera リリース
   2022　株式会社Hataluck and Person（副業）で
   　　　 Flutterアプリの技術選定、設計など
   2023　株式会社YOUTRUSTに入社　←New!
   @@@https://twitter.com/kumamo_tone
   YOUTRUST
   https://youtrust.jp/users/kumamo_tone
   

   View Slide

3. CapsCamera
   ● 青色のカメラフィルターアプリ
   ● カメラの映像にリアルタイムで
   フィルターをかけることができる
   ● 個人の依頼で作った
   ※Android
   

   View Slide

4. 経緯
   ● 何故青色のカメラフィルターアプリ？
   ○ アイドルグループのファン有志で、
   アイドルの誕生日を祝うためにアプリを作る
   という企画
   ○ 祝われる方に以下の要素があるらしい
   ■ フィルムカメラが好き
   ■ イメージカラーが青
   ● その他の機能
   ○ ステッカーをデコする機能がある
   ○ 作成した画像のダウンロード、シェア
   

   View Slide

5. ライブラリ検討
   ● photo_filters
   ○ https://pub.dev/packages/photofilters
   ○ ◯ WidgetにImageを渡すだけで
   フィルター画面のUIが構築できる
   ○ ◯ 最初から使える
   フィルターが多数用意されている
   ○ △ 撮影中にリアルタイムで
   フィルターする機能の example がない
   ○ △ 青系のフィルターがあんまり青くなく、うま
   くカスタマイズできなかった
   

   View Slide

6. 最終的に採用した案
   ColorFiltered(
   colorFilter: ColorFilter.matrix(filters[selectedFilterIndex]),
   child: CameraAwesome( … ),
   ),
   ● 標準のWidget `ColorFiltered` で囲むだけ
   

   View Slide

7. ColorFiltered の基本的な使い方
   ColorFiltered(
   colorFilter: const ColorFilter.mode(
   Colors.red,
   BlendMode.color,
   ),
   child: Image.network(
   'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg',
   ),
   ),
   ● colorFilter に ColorFilter.mode() を追加する
   ○ 第1引数: 色
   ○ 第2引数: モード
   

   View Slide

8. ColorFiltered.mode の例
   Colors.red,
   BlendMode.multiply
   Colors.red,
   BlendMode.screen
   Original
   

   View Slide

9. ColorFilter.matrix
   ● 行列を使ってRGB+Aの値を変化させる
   ○ さらに微妙な色合いの変化をつけたいとき
   ● どの色味をどのくらい変化させるか指定することができる
   https://api.flutter.dev/flutter/dart-ui/ColorFilter/ColorFilter.matrix.html
   

   View Slide

10. ColorFilter.matrix の例
    Gのみ + alpha (0, 0.1, 1)
    0, 1, 0, 0, 0,
    0, 1, 0, 0.1, 0,
    0, 1, 0, 1, 0,
    0, 1, 0, 1, 0,
    Inverted
    -1, 0, 0, 0, 255,
    0, -1, 0, 0, 255,
    0, 0, -1, 0, 255,
    0, 0, 0, 1, 0,
    Original
    1, 0, 0, 0, 0,
    0, 1, 0, 0, 0,
    0, 0, 1, 0, 0,
    0, 0, 0, 1, 0,
    

    View Slide

11. matrix 作成の補助ツール
    ● SVG Color Matrix Mixer
    ○ https://fecolormatrix.com/
    ● 行列を入力するとリアルタイムに
    フィルター結果を見ることができる
    Webツール
    ● ノンプログラマでも使える
    ○ 色味の微調整を人にお願いできる
    （共同制作者が協力的な場合）
    

    View Slide

12. まとめ
    ● カメラフィルターアプリを作った
    ● 色味を変えるのは標準の ColorFiltered ウィジェットでできる
    ● 詳細に色味を指定したいときは ColorFilter.matrix を使うと良い
    ● matrix の確認に使える SVG Color Matrix Mixer という Webツールがある
    

    View Slide