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
240
Integration Test で パフォーマンス計測する
kumamotone
0
610
VSCodeから一発でProxymanを起動する
kumamotone
0
710
スワイプで閉じれる画像ビューアを作る
kumamotone
1
940
Swift Regex Builder
kumamotone
1
630
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
Breaking Up with Big ViewModels — Without Breaking Your Architecture (droidcon Berlin 2025)
steliosf
PRO
1
330
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
520
CSC509 Lecture 02
javiergs
PRO
0
400
CSC305 Lecture 04
javiergs
PRO
0
250
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.1k
Let's Write a Train Tracking Algorithm
twocentstudios
0
220
なぜGoのジェネリクスはこの形なのか? Featherweight Goが明かす設計の核心
ryotaros
7
1k
Playwrightはどのようにクロスブラウザをサポートしているのか
yotahada3
7
2.3k
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
0
380
CSC509 Lecture 03
javiergs
PRO
0
330
止められない医療アプリ、そっと Swift 6 へ
medley
1
120
CSC509 Lecture 06
javiergs
PRO
0
240
Featured
See All Featured
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
580
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
Writing Fast Ruby
sferik
629
62k
Rails Girls Zürich Keynote
gr2m
95
14k
Building an army of robots
kneath
306
46k
Raft: Consensus for Rubyists
vanstee
139
7.1k
KATA
mclloyd
32
15k
The Cost Of JavaScript in 2023
addyosmani
53
9k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
850
Agile that works and the tools we love
rasmusluckow
331
21k
Bash Introduction
62gerente
615
210k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
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ツールがある