20201028のiOSに関する記事は3件です。

iOS14のIDFA関連記事をまとめました

iOS 14における広告トラッキングの変更の適用延期について | Adjust

概要

  • App Tracking Transparencyフレームワーク用のAppleポップアップを表示しユーザーから許諾を得なくても、以前と同様にIDFAを取得できる。
  • ユーザはアプリベースで個別にトラッキングを拒否できる。ユーザーが全てのアプリのトラッキングを拒否した場合、IDFAはリセットされる。
  • アプリのrequestTrackingAuthorizationコードにより、ユーザーはアプリ毎にオプトアウトができる。
  • requestTrackingAuthorizationのメソッドが呼び出され、ユーザーが同意のリクエストを拒否した場合、IDFAは取得できない。
  • 上記の変更点は2021年初旬まで有効となる。

IDFAへのアクセス

  • iOS 14ベータ版のバージョン7では、ユーザーのIDFAはデフォルトで取得可能となっており、ユーザーがトラッキングをオプトアウトする場合にのみIDFAを取得できなくなります。Appleによると、同機能はユーザーのプライバシーに対する仕様変更が完全に適用される来年初旬まで保留となります。
  • 「Allow Apps to Request To Track (Appからのトラッキング要求を許可)」がOFFにされ、再びONにされた場合にのみIDFAがリセットされます。あるいは、デバイスの全てのアプリでオプトアウトされた場合も同様です。

Adjustが推奨すること

  • まず理解しておきたいのは、アプリパブリッシャーは自社のアプリにとって最適なユーザー同意フローをテストし調査してから、初めてATTフレームワークをProductionモードで実装するべきだということです。これは、現在の仕様ではATTがユーザーを早すぎるタイミングでオプトアウトする選択肢に誘導してしまう可能性があるからです。
  • 今回延期が発表されたことにより、アプリ開発者はiOS 14のユーザープライバシー変更への準備を余裕を持って行うことができるようになりました。この期間を有意義に使い、同意フローとUXデザインの最適化を行いましょう。Apple社は、来年初旬にアプリレベルでの同意が導入されることを明らかにしました。アプリマーケターはこれに備えて同意フローを改善し、同意率が高まるような仕組みを取り入れることが重要となります。ユーザーがオプトアウトするとIDFAが取得できなくなるため、全てのユーザーに向けて同意ポップアップを配備する前に、フローを徹底的にテストする必要があります。効果的な同意フローの設計については、ブログ記事「iOS 14のユーザー同意を確保するためのオプトインの設計方法」を参考にして下さい。
  • 来年の初めまでにできる限り多くのテストを社内で実施し、Appleがガイドラインを施行する少し前になったらATTを実装するのが賢明だと言えます。ATTが実装されたその瞬間から、ユーザーはアプリ毎にIDFAの共有をオプトアウトできるようになります。このような取り組みにより、アプリ開発者はユーザーがオプトアウトするリスクを負うことなく、同意フローを十分にテストできます。

SKAdNetwork

  • SKAdNetworkはiOS 14ベータ版のバージョン7では大きく変更されておらず、これまでと同様のデータを提供しています。しかし、9月3日のApple社による延期発表により、業界各社はSKAdNetworkをテストし、アナリティクスおよび最適化のためのconversion value(コンバージョン値)のロジックを開発する時間ができました。
  • 業界各社がSKAdNetworkの機能性をテストするためのサポートとして、Appleはタイマーを5分間に短縮した新たなSKAdNetworkプロファイルをリリースしました。このプロファイルは、ローカルのテストデバイスで実装され、テスト目的のみに使用されるのを意図して設計されています。

Adjustが推奨すること

  • 現時点ではIDFAの取得は可能ですが、SKAdNetworkのテストを開始し、アプリ開発者や業界全体がどのようなインサイトを得られるかを調査しましょう。このテストを通してSKAdNetworkの制約を理解し、対応策を検討することができます。特にconversion valueに関しては、アプリ開発者がSKAdNetworkを活用するには、どのロジックを適用させ、どのイベントが各値と紐付くのかを理解することが重要です。

iOS14のユーザー同意を確保するためのオプトインの設計方法 | Adjust

  • iOS14が業界に与える影響については、こちらのブログ記事で解説していますので是非ご覧ください。 iOS14では、アプリ開発者がAppleの許諾ポップアップをアプリ内で表示させるチャンスは1度しかありません。 つまり、より多くのユーザーから同意を得るためには、アプリを最適化することが不可欠です。しかし、ユーザーがAppleのポップアップ表示に対して同意しなかった場合でも、後日ユーザーをアプリからiOSのアプリ設定にディープリンクできるということを知っておくことも重要です。
  • ユーザーの同意率を最大限に高めるために、Adjustは優れたオプトインのプロンプトについて研究してきました。今後数回にわたって、ユーザーを同意に誘導するオプトインフローの構築に関するアドバイスをブログでお届けしていきます。初回である今回は、UX戦略を定義し、説得力のあるアプリ内メッセージ(Adjustでは「プリ パーミッション プロンプト(pre-permission prompt)」と呼ぶ)を設計する方法について取り上げます。

isAdvertisingTrackingEnabled | Apple Developer Documentation

  • このプロパティは非推奨であり、常にNoを返します。機能は、App Tracking Transparencyフレームワークに置き換えられました。

Forumより

  • for ios14 isAdvertisingTrackingEna… | Apple Developer Forums
    • iOS 14の場合、isAdvertisingTrackingEnabledは常にfalseを返します。
    • ポップアップは2021年第1四半期までのオプションであり、Appleが施行を遅らせたため、isAdvertisingTrackingEnabledの機能をロールバックする必要があります。(という問い合わせ。Appleの回答待ち)
    • 他のアイディアはありますか?

IDFAの実装例

  • iOS14でエンジニアがすべきIDFA対応 - Qiita
  • iOS14でのIDFA取得 - Qiita
    • 現在から2021年初旬までの期間の間、選択可能な暫定対応例が文末に載っている。これを参考にするのが良さそうに思う。
      • ここで言う文末 とは iOS14(2021年はじめまで)の紳士的なIDFA取得方法 というソースコードのこと
    • 2021年初旬以降は、requestTrackingAuthorizationWithCompletionHandlerでダイアログを表示する必要がある。
    • ダイアログ表示の実装をしたアプリを急いでリリースしてしまうと、一度切りしか表示が出来ない仕様のため、下の施策が行えなくなってしまう。
    • ユーザー同意率を高める施策を行う場合は、 iOS14のユーザー同意を確保するためのオプトインの設計方法 | Adjust や、今後掲載されるであろうAdjustのブログ記事を参考にするといいと思われる。

ATTrackingManager.AuthorizationStatus.restricted ではなく .denied が返却されるバグ?

ATTrackingManager.AuthorizationStatus.restricted | Apple Developer Documentation には

Allow Apps To Request To Track setting is disabled and cannot be changed

("Allow Apps To Request To Track setting" は日本語で、 "Appからのトラッキング要求を許可" に当たる)

とあるが、アプリ未インストールな状態で "Appからのトラッキング要求を許可" をオフしても restricted ではなく denied が返却されるケースがあった。
(iPhone 7 Plus, MNRD2J/A, 14.0 18A373, DEV2l089)

※ Xcode 12 (12A7209) の iPhone Simulator では restricted が返却される

事業・実装上の影響はありそうか?

  • restricted が denied で返却されたとしても、「アプリ個別にトラッキングを許可していない」か、「デバイス一括で許可していないか」の違いしかないので、影響はないと思われる。
  • なのでプロダクト側の判断に任せるで十分に思う。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【Flutter】デバイスから画像や動画を取得(Image Picker)

概要

パブリックへのアップロードを実装する際に、ローカルデバイスのギャラリーから画像や動画を取得し一旦保持する処理が必要になります。それを今回はプラグインとして提供されているImage Pickerで実装していきます。

手順

0.iOS用のセットアップ
info.plist
<key>NSPhotoLibraryUsageDescription</key>
<string>This app requires to access your photo library</string>
<key>NSCameraUsageDescription</key>
<string>This app requires to add file to your camera</string>
<key>NSMicrophoneUsageDescription</key>
<string>This app requires to add file to your photo library your microphone</string>
1.パッケージの導入

画像も動画もimage_pickerを使います。
以下のように、dependencies:の配下に記載しましょう。

pubspec.yaml
dependencies:
  image_picker: ^0.6.7+11
2.インポート
import 'dart:io';
import 'package:image_picker/image_picker.dart';
3.ファイルを取得

Stateクラスの中に定義します。

class _UploadScreenState extends State<UploadScreen> {
  File _video;
  final picker = ImagePicker();

  Future getVideoFromGalley() async {
//  画像の場合
//  final pickedFile = await picker.getImage(source: ImageSource.gallery);
    final pickedFile = await picker.getVideo(source: ImageSource.gallery);
    setState(() {
      if (pickedFile != null) {
        _video = File(pickedFile.path);
      } else {
        print('No video selected');
      }
    });
  }

上記はギャラリーから取得する場合。
カメラから取得したい場合は、source: ImageSource.cameraとしてください。
これで_videoに画像や動画の中身が格納されたのであとは煮るなり焼くなりしてください。

Tips

アップロード用ファイルをサイズで制限したい時、ファイルオブジェクトからサイズを取得できます。(バイト単位)

  _videoSize = _video.lengthSync();

メガバイト単位で少数第3位まで取得したい場合

  _videoSize = ((((_video.lengthSync()/1048576)*1000).round())/1000);

さいごに

お疲れ様でした!

参考サイト

https://pub.dev/packages/image_picker

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【Flutter】超便利な動画再生ウィジェットChewie

概要

Flutterで動画プレイヤーを実装したい時、ググってまず出てくるのがvideo_playerプラグインだと思います。(https://pub.dev/packages/video_player)
こちらでも実装は可能なのですが、再生や停止、インジゲーターの表示などもControllerを用いて自身で管理しなければいけないので少々面倒です。そこで、これらを自動的に構成してくれるchewieウィジェットというものをご紹介したいと思います。ちなみにvideo_playerとは完全に別物ではなく、chewieもvideo_playerをベースとしています。 (https://pub.dev/packages/chewie)

ちなみになぜchewie(チューインガム)というのかはわかりません(笑)

前提条件

[✓] Flutter (Channel stable, 1.22.2, on Mac OS X 10.15.7 19H2, locale ja-JP)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 12.0.1)
[✓] Android Studio (version 4.0)
[✓] Connected device (1 available)

• No issues found!

手順

0.完成形

シンプルに画面中央にビデオプレイヤーを配置する画面を作っていきます。
動画のソースはgithubに公開されているものを使用しています。
Screenshot_1603861186.png

1.パッケージの導入

pubspec.yamlにchewieとvideo_playerのパッケージを追加します。
記事作成時(2020年10月27日)時点のchewieの最新版は0.9.10ですが、依存関係となっているvideo_playerは0.10.0までしか対応していませんので一旦は以下のバージョンにしましょう。

pubspec.yaml
dependencies:
  flutter:
    sdk: flutter
  chewie: ^0.9.10
  video_player: ^0.10.0

記述したら、Pub getを実行。

2.パッケージのインポート

以下の三つをインポートしてください。

main.dart
import 'package:chewie/chewie.dart';
import 'package:chewie/src/chewie_player.dart';
import 'package:video_player/video_player.dart';

3.コントローラーもろもろ

概要でも記載した通り、ChewieControllerはVideoPlayerControllerと依存関係にあるので、Stateクラス内にVideoPlayerControllerとChewieControllerの両方を初期化します。

main.dart
class _MyHomePageState extends State<MyHomePage> {
//コントローラーの定義
  VideoPlayerController _videoPlayerController;
  ChewieController _chewieController;

//初期化
  @override
  void initState() {
    super.initState();
    _videoPlayerController = VideoPlayerController.network(
        'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4');
    _chewieController = ChewieController(
      videoPlayerController: _videoPlayerController,
      aspectRatio: 3 / 2,  //アスペクト比
      autoPlay: false,  //自動再生
      looping: true,  //繰り返し再生

      // 以下はオプション(なくてもOK)
      showControls: false,  //コントロールバーの表示(デフォルトではtrue)
      materialProgressColors: ChewieProgressColors(
        playedColor: Colors.red,  //再生済み部分(左側)の色
        handleColor: Colors.blue,  //再生地点を示すハンドルの色
        backgroundColor: Colors.grey,  //再生前のプログレスバーの色
        bufferedColor: Colors.lightGreen,  //未再生部分(右側)の色
      ),
      placeholder: Container(
        color: Colors.grey,  //動画読み込み前の背景色
      ),
      autoInitialize: true,  //widget呼び出し時に動画を読み込むかどうか
    );
  }
//コントローラーの破棄
  @override
  void dispose() {
    _videoPlayerController.dispose();
    _chewieController.dispose();
    super.dispose();
  }
//・・・

4.画面表示

超シンプルですね!

main.dart
child: Chewie(
   controller: _chewieController,
),

5.ソースコード全体

全体のコードは以下のようになります。

main.dart
import 'package:flutter/material.dart';
import 'package:chewie/chewie.dart';
import 'package:chewie/src/chewie_player.dart';
import 'package:video_player/video_player.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Chewie Sample',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Chewie Sample'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  VideoPlayerController _videoPlayerController;
  ChewieController _chewieController;

  @override
  void initState() {
    super.initState();
    _videoPlayerController = VideoPlayerController.network(
        'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4');
    _chewieController = ChewieController(
      videoPlayerController: _videoPlayerController,
      aspectRatio: 3 / 2,
      autoPlay: false,
      looping: true,
      // Try playing around with some of these other options:

      //showControls: false,
      materialProgressColors: ChewieProgressColors(
        playedColor: Colors.red,
        handleColor: Colors.blue,
        backgroundColor: Colors.grey,
        bufferedColor: Colors.lightGreen,
      ),
      placeholder: Container(
        color: Colors.grey,
      ),
      autoInitialize: true,
    );
  }
  @override
  void dispose() {
    _videoPlayerController.dispose();
    _chewieController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Expanded(
              child: Center(
                child: Chewie(
                  controller: _chewieController,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

注意

現状、iOSエミュレータでは正常に動作しないようです。実際に試したところ、Controllerを定義しているのにもかかわらず、
controller != null, 'You must provide a chewie controller'
みたいなエラーが表示されます。Androidエミュレータや実機(iOS含め)では正常に動作しますのでそちらで試してみてください。

さいごに

video_playerのみだと、ステートの管理が面倒なところをchewieがいい感じに全部やってくれます。いろいろ自分でカスタマイズしたいときはvideo_playerが良いかと思いますが、とりあえず動画が見れればいい!という場合はchewieで十分だと思います。
Flutterはまだまだ日本語の情報が少ないため、今後も役に立つ情報を発信できたらと思います!

参考サイト

https://pub.dev/packages/video_player
https://pub.dev/packages/chewie

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む