Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ColorFiltered で カメラフィルタを実装する
Search
kumamotone
June 05, 2023
Programming
1
580
ColorFiltered で カメラフィルタを実装する
2023/06/05 YOUTRUST x ゆめみ Flutter LT会
https://yumemi.connpass.com/event/284933/
kumamotone
June 05, 2023
Tweet
Share
More Decks by kumamotone
See All by kumamotone
AIエージェントを活用したアプリ開発手法の模索
kumamotone
1
1k
YOUTRUSTでやった技術発信まとめ
kumamotone
0
230
Integration Test で パフォーマンス計測する
kumamotone
0
590
VSCodeから一発でProxymanを起動する
kumamotone
0
700
スワイプで閉じれる画像ビューアを作る
kumamotone
1
920
Swift Regex Builder
kumamotone
1
620
SwiftUI の @State, @ObservedObject, @EnvironmentObject
kumamotone
4
1k
5分でわかる Kotlin Contracts
kumamotone
2
1.3k
しくみから理解するSwiftUI
kumamotone
5
2.7k
Other Decks in Programming
See All in Programming
サーバーサイドのビルド時間87倍高速化
plaidtech
PRO
0
490
一人でAIプロダクトを作るための工夫 〜技術選定・開発プロセス編〜 / I want AI to work harder
rkaga
13
2.8k
オープンセミナー2025@広島LT技術ブログを続けるには
satoshi256kbyte
0
130
エンジニアのための”最低限いい感じ”デザイン入門
shunshobon
0
130
AIレビュアーをスケールさせるには / Scaling AI Reviewers
technuma
2
230
新世界の理解
koriym
0
140
CSC305 Summer Lecture 05
javiergs
PRO
0
110
大規模FlutterプロジェクトのCI実行時間を約8割削減した話
teamlab
PRO
0
490
Dart 参戦!!静的型付き言語界の隠れた実力者
kno3a87
0
210
ソフトウェアテスト徹底指南書の紹介
goyoki
1
110
CSC305 Summer Lecture 12
javiergs
PRO
0
120
Laravel Boost 超入門
fire_arlo
1
120
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Building Applications with DynamoDB
mza
96
6.6k
Designing for humans not robots
tammielis
253
25k
Git: the NoSQL Database
bkeepers
PRO
431
65k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Agile that works and the tools we love
rasmusluckow
329
21k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Writing Fast Ruby
sferik
628
62k
Visualization
eitanlees
147
16k
Transcript
ColorFiltered で カメラフィルタを実装する 2023/06/05 YOUTRUST x ゆめみ Flutter LT会 @kumamo_tone
@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
CapsCamera • 青色のカメラフィルターアプリ • カメラの映像にリアルタイムで フィルターをかけることができる • 個人の依頼で作った ※Android
経緯 • 何故青色のカメラフィルターアプリ? ◦ アイドルグループのファン有志で、 アイドルの誕生日を祝うためにアプリを作る という企画 ◦ 祝われる方に以下の要素があるらしい ▪
フィルムカメラが好き ▪ イメージカラーが青 • その他の機能 ◦ ステッカーをデコする機能がある ◦ 作成した画像のダウンロード、シェア
ライブラリ検討 • photo_filters ◦ https://pub.dev/packages/photofilters ◦ ◯ WidgetにImageを渡すだけで フィルター画面のUIが構築できる ◦
◯ 最初から使える フィルターが多数用意されている ◦ △ 撮影中にリアルタイムで フィルターする機能の example がない ◦ △ 青系のフィルターがあんまり青くなく、うま くカスタマイズできなかった
最終的に採用した案 ColorFiltered( colorFilter: ColorFilter.matrix(filters[selectedFilterIndex]), child: CameraAwesome( … ), ), •
標準のWidget `ColorFiltered` で囲むだけ
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引数: モード
ColorFiltered.mode の例 Colors.red, BlendMode.multiply Colors.red, BlendMode.screen Original
ColorFilter.matrix • 行列を使ってRGB+Aの値を変化させる ◦ さらに微妙な色合いの変化をつけたいとき • どの色味をどのくらい変化させるか指定することができる https://api.flutter.dev/flutter/dart-ui/ColorFilter/ColorFilter.matrix.html
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,
matrix 作成の補助ツール • SVG Color Matrix Mixer ◦ https://fecolormatrix.com/ •
行列を入力するとリアルタイムに フィルター結果を見ることができる Webツール • ノンプログラマでも使える ◦ 色味の微調整を人にお願いできる (共同制作者が協力的な場合)
まとめ • カメラフィルターアプリを作った • 色味を変えるのは標準の ColorFiltered ウィジェットでできる • 詳細に色味を指定したいときは ColorFilter.matrix
を使うと良い • matrix の確認に使える SVG Color Matrix Mixer という Webツールがある