FultterのUTF-8をdecodeできない問題の解決方法

Question

FlutterでiOSアプリを作成している過程でHTTPのレスポンスをUTF-8でデコードできない問題が発生しており、解決したく思います。
AndroidのPixel 2のエミュレータでは問題なくデコードできていたのでiOS特有の問題であると考えています。

以下いPhone12 Pro Maxのエミュレータを使い、実行した結果になります。decoded_body_byteがnullになってしまうのが問題です。

import 'dart:async';
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:html/dom.dart' as dom;
import 'package:http/http.dart' as http;
import 'package:charset_converter/charset_converter.dart';
import 'package:flutter_user_agent/flutter_user_agent.dart';
// skip

String userAgent;
try {
  userAgent = await FlutterUserAgent.getPropertyAsync('userAgent');
  print("userAgent: ${userAgent}");
} on PlatformException {
  userAgent = '<error>';
}
var response = await http.Client().get(Uri.parse("http://news4vip.livedoor.biz/archives/52385788.html"), headers: {'User-Agent': userAgent});
print("Response status: ${response.statusCode}");
print("response.headers: ${response.headers['content-type']}");
String decoded_body_byte = await CharsetConverter.decode("UTF-8", response.bodyBytes);
print("decoded_body_byte: ${decoded_body_byte}"); // ここの結果がnullになってしまうことが問題になっています。
Uint8List encoded = await CharsetConverter.encode("UTF-8", "【画像】中日「かっこいい」今季のユニホーム発表ｗｗｗ");
print("encoded.length: ${encoded.length}");
String decoded_body_byte_only_title = await CharsetConverter.decode("UTF-8", response.bodyBytes.sublist(71, 71 + 78));
print("decoded_body_byte_only_title: ${decoded_body_byte_only_title}");

上記の出力結果は以下になります。

2021-01-23 17:09:29.964984+0900 Runner[89036:14458916] flutter: userAgent: CFNetwork/1209 Darwin/20.2.0 (iPhone iOS/14.3)
2021-01-23 17:09:30.187131+0900 Runner[89036:14458916] flutter: Response status: 200
2021-01-23 17:09:30.190547+0900 Runner[89036:14458916] flutter: response.headers: text/html; charset=utf-8
2021-01-23 17:09:30.195755+0900 Runner[89036:14458916] flutter: decoded_body_byte: null
2021-01-23 17:09:30.197368+0900 Runner[89036:14458916] flutter: encoded.length: 78
2021-01-23 17:09:30.198128+0900 Runner[89036:14458916] flutter: decoded_body_byte_only_title: 【画像】中日「かっこいい」今季のユニホーム発表ｗｗｗ

以下flutter doctorの出力結果になります。

% flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 1.22.5, on macOS 11.1 20C69 darwin-x64, locale ja-JP)

[!] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
[✓] Xcode - develop for iOS and macOS (Xcode 12.3)
[!] Android Studio (version 4.1)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[✓] VS Code (version 1.52.1)
[✓] Connected device (2 available)

! Doctor found issues in 2 categories.

Answer 1

詳細は確認していないのですが。そのページのサーバのレスポンスヘッダを見るとContent-Type: text/html; charset=euc-jpとなっています。UTF-8ではない可能性があります。

追記
質問者のコメントの通りUserAgentを指定するとUTF-8で返す仕様のサーバみたいですね。
下記のコードで検証してみましたがしっかりタイトルを取得できました。

final userAgent = 'Mozilla/5.0 (iPhone; CPU iPhone OS 13_1_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.1 Mobile/15E148 Safari/604.1';
  final client = http.Client();
  try {
    var response = await client.get(
      Uri.parse("http://news4vip.livedoor.biz/archives/52385788.html"),
      headers: {
        'User-Agent': userAgent,
      },
    );
    print("response.headers: ${response.headers['content-type']}");
    final decoded = await CharsetConverter.decode('UTF-8', response.bodyBytes);
    final document = dom.Document.html(decoded);
    print(document.querySelector('title')?.text);
  } catch (error) {
    print('error: $error');
  } finally {
    client.close();
  }

Comments

[ponyo877]

説明が足りず申し訳ありません。
こちらWebブラウザ用とモバイル用のためにUserAgentに依ってレスポンスの内容が変わるリクエストになっていまして、
UserAgent: CFNetwork/1209 Darwin/20.2.0 (iPhone iOS/14.3)で再度試行していただけると、
Content-Type: text/html; charset=utf-8のレスポンスが返却されるかと思います。
ご確認よろしくお願いします。

[hiroshihorie]

UserAgentによってはUTF-8で返すみたいですね。ちょっとコード書いて検証してみましたらタイトル取得できました。質問者とほぼ同じコードなのでなぜ上手くいったのかわかりません。サーバ側がたまにデコードに失敗するデータを返している可能性もありますね。

[ponyo877]

こちらも説明不足でしたらすみません、、
出力結果の4行目の以下のnullの部分は本来ならhtml文字列が出力されるはずなんですが、できていないことが問題になります。
```
2021-01-23 17:09:30.195755+0900 Runner[89036:14458916] flutter: decoded_body_byte: null
```
こちらも正常に表示されましたでしょうか?

[hiroshihorie]

自分のコードで検証した結果、そちらも表示されました。

[ponyo877]

なるほど、環境の設定によっても結果が異なるのでしょうか。
今回は別の方法で自己解決することができました。

情報提供ありがとうございました！

[hiroshihorie]

了解です、やはり「サーバ側がたまにデコードに失敗するデータを返している」という事でしたか。

Answer 2

本件は返却されたHTTPレスポンスにUTF8として不正なバイトコードが含まれていたために失敗していたようです。
そこでデコーダーを以下のPluginに変更した所、想定通りにデコードすることができました。
https://api.flutter.dev/flutter/dart-convert/Utf8Codec/decode.html

String decoded = Utf8Decoder(allowMalformed: true).convert(response.bodyBytes);
// allowMalformed: trueでUTF8の不正文字を置換オプションを有効化

ご協力ありがとうございました。