Amazon PrimeやDAZNなどのアプリを使用していて、スクリーンショットや画面録画をした時に、真っ黒くなることを確認した方はいらっしゃいますでしょうか？？
動画系のアプリは画面録画を容認してしまうと、Youtubeや別のサイトに違法アップロードされてしまい、サービスとして成り立たないですよね。
また、クレジットカード系や個人情報が入力されている画面はできるだけ他の人に知られないようにするためな対策はあった方が良さそうだなと考えています。
てっきり、Flutterはまだ対応できていないと思っていましたが、会社の雑談会の中で教えていただいたので共有させていください！
screen_protectorについて
↑こちらから引用させていただいてます。
screen_protectorは、iOS/Androidのアプリケーションのバックグラウンドのスクリーンショットとフォアグラウンドのスクリーンショットの防止を防ぐPackageです。
また、このPackageを使用すると、アプリの一部やアプリ全体画面を隠すことができます。
screen_protectorにあるメソッド一覧とOSの対応について
| iOS | Android | |
|---|---|---|
preventScreenshotOn() |
⭕️ | ⭕️ |
preventScreenshotOff() |
⭕️ | ⭕️ |
protectDataLeakageWithImage() |
⭕️ | ❌ |
protectDataLeakageWithColor() |
⭕️ | ❌ |
protectDataLeakageWithColorOff() |
⭕️ | ❌ |
protectDataLeakageWithBlur() |
⭕️ | ❌ |
protectDataLeakageWithBlurOff() |
⭕️ | ❌ |
protectDataLeakageOff() |
❌ | ⭕️ |
protectDataLeakageOn(); |
❌ | ⭕️ |
両OSでできること
スクリーンショットをすると真っ黒になる
await ScreenProtector.preventScreenshotOn();
| スクリーンショット | マルチタスク画面 |
|---|---|
 |
 |
スクリーンショット無効をオフにする
await ScreenProtector.preventScreenshotOff();
| スクリーンショット | マルチタスク画面 |
|---|---|
 |
 |
iOSのみでできること
スクリーンショット無効をオフ＋マルチタスク画面で赤色になる
// 色は自由に選択できる
await ScreenProtector.protectDataLeakageWithColor(Colors.red);
| スクリーンショット | マルチタスク画面 |
|---|---|
 |
 |
スクリーンショットもマルチタスク画面どちらも普段通り
await ScreenProtector.protectDataLeakageWithColorOff();
| スクリーンショット | マルチタスク画面 |
|---|---|
 |
 |
スクリーンショット無効をオフにし、マルチタスク画面で、モザイクっぽくなる
await ScreenProtector.protectDataLeakageWithBlur();
| スクリーンショット | マルチタスク画面 |
|---|---|
 |
 |
スクリーンショットもマルチタスク画面どちらも普段通り
await ScreenProtector.protectDataLeakageWithBlurOff();
| スクリーンショット | マルチタスク画面 |
|---|---|
 |
 |
その他
await ScreenProtector.protectDataLeakageWithImage('splash');
使用方法がわかりませんでした🙇
assetsの画像を入れてみましたが、変わらなかったため、どういった実装かがわかりませんでした💦
もう少しコードを見てみて、わかりましたら更新します。
Androidのみでできること
スクリーンショットをすると黒くなる ＋ マルチタスク画面で黒くなる
await ScreenProtector.protectDataLeakageOn();
| スクリーンショット | マルチタスク画面 |
|---|---|
 |
 |
スクリーンショット無効をオフにする
await ScreenProtector.protectDataLeakageOff();
| スクリーンショット | マルチタスク画面 |
|---|---|
 |
 |
記載の例
flutter pub add screen_protector
pubspec.yaml
dependencies:
screen_protector: ^1.4.1
main.dart
import 'package:flutter/material.dart';
import 'package:screen_protector/screen_protector.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const PreventScreenshotScreen(),
);
}
}
class PreventScreenshotScreen extends StatefulWidget {
const PreventScreenshotScreen({Key? key}) : super(key: key);
@override
PreventScreenshotScreenState createState() => PreventScreenshotScreenState();
}
class PreventScreenshotScreenState extends State<PreventScreenshotScreen> {
@override
void initState() {
_preventScreenshotOn();
super.initState();
}
@override
void dispose() {
_removeListenerPreventScreenshot();
_preventScreenshotOff();
super.dispose();
}
void _preventScreenshotOn() async =>
await ScreenProtector.preventScreenshotOn();
void _preventScreenshotOff() async =>
await ScreenProtector.preventScreenshotOff();
void _removeListenerPreventScreenshot() async {
ScreenProtector.removeListener();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: const Center(
child: Text('この画面はスクリーンショットしたくない'),
),
);
}
}
開発メモ
- 実機じゃないと確認ができなさそうでした。
- スクリーンショットの防止＋マルチタスク画面の防止の２つをすることが望ましい。
最後に
触ってみましたが、情報漏洩対策はできるとはいえ、まだまだネイティブにしかできなさそうなこともあることを知れました。
メソッドチャンネルも使用して開発をしているっぽいのでもう少しじっくりみて学んでいきたいなと思います！