YUMEMI FlutterAdvent Calendar 2023

株式会社ゆめみ

FlutterKaigi 2023 ホームページへコントリビュートしました

Posted at 2023-12-05

本記事は、YUMEMI Flutter Advent Calendar 2023 5日目の記事です
昨日 4日目は、同期の@Yo2_enginnerさんによるゆめみFlutterギルドのキーボードを調査してみたでした。

0. はじめに

こんにちは株式会社ゆめみでFlutterエンジニアをしているもぐもぐ(@YumNumm)です。よろしくお願いします。

2023年11月10日に開催したFlutterKaigiのWebサイト制作にコントリビュートしたので、今回はその話をしていこうと思います。

1. FlutterKaigiとは?

日本国内でFlutterをメインに扱う技術カンファレンス。
FlutterやDartの深い知見を持つ開発者によるセッションを多数企画します。
(https://flutterkaigi.jp/2023/ より引用)

FlutterKaigi 2021からスタートしていて今年が３年目、初のオフライン開催でした。

2. 運営参加のきっかけ

ゆめみのFlutterリードエンジニアの林さん(@K9i_appsさん)がFlutterKaigiの運営に参加されており、社内Slackでよかったらスタッフ参加しないか〜という話を頂きました。

ゆめみのFlutterテックリードおかやまんさん(@blendthinkさん)の FlutterKaigi 2022での発表を見てから「いつか自分も、この場所で発表したい」という思いがありました。

それなら、その第一歩として内部のお手伝いをしてみるのも良いと思い参加させていただきました。

運営内のウェブサイトチームに所属し、FlutterKaigi公式Webサイトの制作に携わりました。

3. FlutterKaigi 2023 HP制作での知見

今までFlutter on the webをあまり使ったことなかったので、色々な経験をすることができました。

FlutterKaigi 2023では renderにHTMLを指定しています。
Canvaskitは利用していません。
Flutter SDKは当時(2023/9頃)最新のbeta版を利用しています

知見1. Flutter on the webにHTML Elementの埋め込み

SEOや高速化を目的としてiframeを用いて HTML要素の一部としてFlutterを埋め込む 手法は広く知られています。

しかし今回やりたいのは、逆です。
Flutter on the WebのWidgetとしてHTML要素をiframeとして埋め込むことをしたいです。
これで、何を実現したかったかというと、インタラクティブなマップです。

Webでよく見る至って普通のマップを実装しました。

高田晴彦さん(@tfandkusuさん)のこちらのスライドを参考に実装を進めていきました。

埋め込むiframeを取ってくる

今回は東京駅で試してみましょう。

Google Mapの共有ボタンから HTMLを取得できます。

<iframe
    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.8280306898473!2d139.76454987665878!3d35.68123617258739!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bfbd89f700b%3A0x277c49ba34ed38!2z5p2x5Lqs6aeF!5e0!3m2!1sja!2sjp!4v1701673125721!5m2!1sja!2sjp"
    width="600"
    height="450"
    style="border: 0;"
    allowfullscreen=""
    loading="lazy"
    referrerpolicy="no-referrer-when-downgrade"
></iframe>

埋め込むWidgetを用意する

HtmlElementView Widgetを利用します。
Flutter WebのWidget-treeにHTML要素を注入できます。
(Flutter Web以外では UnimplementedErrorになるのでクロスプラットフォームで開発している場合は注意が必要です。 Web以外では WebViewを利用しましょう。)

ドキュメントにも書いてある通り、HTMLの埋め込みは高価な処理を必要とするため、頻繁に埋め込みを利用したり無駄に利用するべきではありません。
今回は、マップをFlutter Engineを使い描画するよりも HTML埋め込みを行ったほうが遥かに楽でUXも良いため埋め込みで問題無さそうです。

class _MapWidget extends StatelessWidget {
  const _MapWidget();

  @override
  Widget build(BuildContext context) {
    final width = 600.0;
    final height = 450.0;
    const viewId = 'google-map';
    // TODO: Register HtmlElement 
    return SizedBox(
      height: height,
      width: width,
      child: const HtmlElementView(
        viewType: viewId,
      ),
    );
  }
}

`HtmlElementView`の中身を実装してあげる

HtmlElementViewに登録したviewIdにHtml要素を登録します。

Google Mapから取ってきたiframe要素をIframeElement()を使い書き換えていきます。

+ import 'dart:ui_web' as ui;

class _MapWidget extends StatelessWidget {
  const _MapWidget();

  @override
  Widget build(BuildContext context) {
    final width = 600.0;
    final height = 450.0;
+   const url = 'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.8280306898473!2d139.76454987665878!3d35.68123617258739!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bfbd89f700b%3A0x277c49ba34ed38!2z5p2x5Lqs6aeF!5e0!3m2!1sja!2sjp!4v1701673125721!5m2!1sja!2sjp';
+   // ui variable is imported from dart:ui_web
+   ui.platformViewRegistry.registerViewFactory(
+      viewId,
+     (int viewId) => IFrameElement()
+        ..height = height.toString()
+        ..width = width.toString()
+        ..style.border = '0'
+        ..referrerPolicy = 'no-referrer-when-downgrade'
+        // ignore: unsafe_html
+        ..src = url,
+   );
    const viewId = 'google-map';
    // TODO: Register HtmlElement 
    return SizedBox(
      height: height,
      width: width,
      child: const HtmlElementView(
        viewType: viewId,
      ),
    );
  }
}

これで、HTML要素埋め込みの完成です。
実行中のHTMLを確認してもiframeで埋め込まれていることがわかります。ヨシ👍

HtmlElementViewを利用することで、HTMLを内部に埋め込むことができました。
今回は、FlutterとHtml要素でデータのやり取りは行っていませんが、「js_interopを利用して、カウンターを同期する」みたいなこともやってみたいですね。(HTMLの子要素としてFlutterを表示、FlutterのViewの中にHTML埋め込みみたいなこともできるんですかね...? 検証してみたいです)

知見2. レンダリング周りで問題が残る

いちばん辛かったです。この問題は今も残っています。

グラデーションつき文字が正しく表示されない

Chrome 121	Safari 17.2

(ちなみに、iPhoneやiPadではSafariでもChromeでもどちらでもバグります。背景としては、AppleがブラウザレンダリングエンジンにWebKitを使うことを強制しているからです。
PCやAndroidではBlink Engineを利用していますが、iOS/iPad版ではWebKitを利用するようになっています。 ~~やめてくれ Appleさんよ~~)

お分かり頂けたでしょうか。
Accessの文字内部のグラデーションが適用されていません。

ShaderMask->Text の比較的単純な構造です。なのになぜ問題が起きるのでしょうか?

過去に、HTML Rendererを利用した時にグラデーションが正しく表示されないIssueに対するPRが作成されており、修正済みなはずですがまだ再現してしまいました。

解決策A: RendererをCanvaskitにする

HTMLでの描画から、Canvaskitを用いた描画に切り替えることで、描画崩れ・パフォーマンス改善を図ろうとしました。

しかし、いくつか問題がありました。

1. CORSエラー

FlutterKaigi 2023では、スタッフ情報・スタッフプロフィール画像やニュース情報の取得に NEWT CMSを利用していました。
NEWT CMSでは、プロフィール画像をGoogle Cloud Storageへ保存しており、この画像をFetchする際にCORS(Cross-Origin Resource Sharing: オリジン間リソース共有)の同一オリジンポリシー(Same-Origin Policy)に引っかかってしまいます。
HTMLレンダラーを利用した場合、スタッフプロフィール画像は HTMLのimage要素として描画されるため問題になりませんが、Canvaskitを利用した場合、トランスパイルしたJavaScriptからfetch APIを利用して画像が取得されます。
ここでエラーとなり、結果的に画像の描画に失敗してしまいます。

解決策として、NEWT CMS上で画像の保存先自前のAWS S3やGCP Storageへ変える方法もありましたが、ここにお金をかけるべきではないと判断し、選択肢から消えました。
もう1つの解決策として、NEWT CMS上のJSON/画像を/assetsに入れるでした。

こうして、NEWT CMSへの依存を剥がし RendererをCanvaskitに変えて完s..........

と、ここでまた問題が発生しました。

2. Canvaskitに切り替えると iPhone実機でクラッシュする

とんでもない問題が発生しました。

Canvaskitにすると iPhone実機でクラッシュしてしまいます。
しかも、macOSからiPhoneへSafariのデバッグツールを接続しても何もエラーは出ず、iPhoneのコンソールを確認しても何も出力されません。
ただ再読み込みが走って、数回すると「このページは読み込めません」と表示されます。

Material 3 Demo Appでも、同様の問題が発生していたらしく、Canvas2Dを多く/大きく割り当てすぎているためだと議論されていました。

Under some circumstances, we allocate too many canvases, or we allocate canvases that are bigger than necessary (or both!). We also had a bug that caused unnecessary canvas allocations, that was fixed in flutter/engine#38640.
The remaining issues contributing to this crash are:

Canvas Reuse: when we reuse a previously allocated canvas, some times we reuse a canvas that's too big for our needs.

Canvas<->DOM switching: the html renderer decides some times to switch from canvas mode to DOM mode, then if it switches back to canvas mode, it allocates a new canvas.

(https://github.com/flutter/flutter/issues/117164#issuecomment-1379470593)

グラデーションやShaderMaskを多数利用するデザインだったため、このような問題が発生してしまったものだと考えられます。

最終的に、このクラッシュする問題を解決することができず、根本の「グラデーション付き文字が正しく表示されない」問題を解決できないという悔しい終わり方となってしまいました。

(開発中のメモを置いておきます)

4. まとめ

FlutterKaigi 2023の運営(カンファレンスウェブサイトチーム)に所属し、Flutter on the webに関わる知見を増やすことができました。
最終的には、33個のPRを作成し FlutterKaigiへ貢献することができました。

FlutterKaigiという大規模なイベントの運営へ参加することで、ホームページだけでなくイベント自体がどのように組み立てられていくのかを知ることができました。

ウェブサイトチーム・関連チームの方々にはご迷惑をおかけしたかもしれませんが、開発に携われたこと大変感謝しています。本当にありがとうございました。

来年度、Flutter 2024を行う際もぜひFlutterKaigiへ貢献できるよう、技術力を磨いていきたいと思います。

お決まり文句

採用

株式会社ゆめみではFlutterエンジニア以外にも様々なエンジニアを募集しています。

新卒採用

現在、2024年卒以降を採用しています。

Flutterインターンについても検討中ですので、ref.watch(yumemiRecruitmentProvider)して頂ければ幸いです。

中途採用

先日、Flutterエンジニアの中途採用が公開されました。

また、Flutterリードエンジニアの採用も行っています。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up