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
420
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
YOUTRUSTでやった技術発信まとめ
kumamotone
0
160
Integration Test で パフォーマンス計測する
kumamotone
0
410
VSCodeから一発でProxymanを起動する
kumamotone
0
530
スワイプで閉じれる画像ビューアを作る
kumamotone
1
700
Swift Regex Builder
kumamotone
1
510
SwiftUI の @State, @ObservedObject, @EnvironmentObject
kumamotone
4
960
5分でわかる Kotlin Contracts
kumamotone
2
1.1k
しくみから理解するSwiftUI
kumamotone
5
2.4k
SwiftUI を理解するために必要な Swift 5.1 の新機能 (some View編)
kumamotone
11
3.8k
Other Decks in Programming
See All in Programming
o1モデルのプロンプトエンジニアリングって?
ktc_wada
0
260
Lessons by WebAssembly app in production on CDN Edge Computing Service
tetsuharuohzeki
0
210
AndroidアプリのUIバリエーションをあの手この手で確認する / Check UI variations of Android apps by various means
tkmnzm
1
170
Rechartsで楽にゴリゴリにカスタマイズする!
10tera
1
170
Ruby Parser progress report 2024
yui_knk
2
230
Our Websites Need a Lifestyle Change, Not a Diet
ryantownsend
0
150
Swiftコードバトル必勝法
toshi0383
0
170
[DroidKaigi 2024] Android ViewからJetpack Composeへ 〜Jetpack Compose移行のすゝめ〜 / From Android View to Jetpack Compose: A Guide to Migration
syarihu
1
630
The Shape of a Service Object
inem
0
520
Go1.23で入った errorsパッケージの小さなアプデ
kuro_kurorrr
2
390
From Idea to IDE: Developing Plugins for Android Studio
thisaay
1
220
Kotlin 2.0 and Beyond
antonarhipov
2
150
Featured
See All Featured
Web Components: a chance to create the future
zenorocha
308
42k
10 Git Anti Patterns You Should be Aware of
lemiorhan
653
58k
The World Runs on Bad Software
bkeepers
PRO
64
11k
The Mythical Team-Month
searls
218
43k
The Cult of Friendly URLs
andyhume
76
6k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
The Cost Of JavaScript in 2023
addyosmani
42
5.7k
A Modern Web Designer's Workflow
chriscoyier
691
190k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
32k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
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ツールがある