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
560
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
220
Integration Test で パフォーマンス計測する
kumamotone
0
570
VSCodeから一発でProxymanを起動する
kumamotone
0
680
スワイプで閉じれる画像ビューアを作る
kumamotone
1
900
Swift Regex Builder
kumamotone
1
610
SwiftUI の @State, @ObservedObject, @EnvironmentObject
kumamotone
4
1k
5分でわかる Kotlin Contracts
kumamotone
2
1.2k
しくみから理解するSwiftUI
kumamotone
5
2.7k
Other Decks in Programming
See All in Programming
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
190
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
110
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
550
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
3
290
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
800
SODA - FACT BOOK
sodainc
1
1.1k
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
390
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
240
KotlinConf 2025 現地で感じたServer-Side Kotlin
n_takehata
1
220
A2A プロトコルを試してみる
azukiazusa1
2
870
レガシーシステムの機能調査・開発におけるAI利活用
takuya_ohtonari
0
610
XSLTで作るBrainfuck処理系
makki_d
0
210
Featured
See All Featured
Side Projects
sachag
455
42k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.5k
Designing for humans not robots
tammielis
253
25k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Navigating Team Friction
lara
187
15k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
660
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.9k
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ツールがある