トーク

概要

私たちのチームでは、リリース中となる動画視聴アプリのFlutterでのフルリニューアルの鋭意対応中です。Flutterは、標準のwidgetが豊富に揃えられているのが魅力の一つとなるF/Wですが、それそのままでは複雑な機能要件を全て満足することができないケースがしばしば発生します。
リニューアル対象のアプリでは、動画コンテンツの商品パッケージやシーンのサムネイルといった画像のプレビュー機能があるのですが、それがまさにそうでした。
InteractiveViewerが近しいwidgetになりますが、ピンチ操作による拡大・縮小といった一般的な画像ビューワの操作性はもちろんですが、タップ操作でのオートスケール、フリック操作で画面を閉じる等、特徴的なジェスチャ操作と共存させる上で難しい課題があり、結論としてゼロから実装することになりまして、どうせならpackageとして公開しちゃおうよー
、といった感じで今に至ります。

作業過程でぶつかった課題や、画像ビューワを実装する上での勘所等をお話し、同じような壁にぶつかり、乗り越えようとしてきている皆さんへ共有させていただき、少しでも助力にしていただけたらと思います。

想定視聴者

• Flutter、InteractiveViewerが好きな方
• 画像ビューワが好きな方
• package公開に興味がある方

概要

モバイルアプリを長期的に運用・メンテナンスするうえで、機能や複雑化したシステムを削減し、効率的な運用を実現するための「スリム化」が重要なテーマとなっています。
本セッションでは、FacebookとX（旧Twitter）ログインの削除を例に、サービスのスリム化をどのように実行するかについて考察します。

スリム化を進める上での具体的なステップとして、ユーザーへの通知方法、新規登録・ログイン導線の変更、既存ユーザーの対応策などを取り上げ、サービスのスリム化によって得られる利点と潜在的な課題について議論します。
また、削除までの意思決定を行うためにどのようなことを行い、機能のスリム化の意思決定をしたかの流れをお話し、サービス運用に携わるさまざまな役割の方々が直面する課題に焦点を当て、スリム化による具体的な利点と実施方法をお伝えします。

想定視聴者

• 実際に機能の実装や保守を担当するエンジニア。複雑な機能のメンテナンスや障害対応に課題を感じている方
• ユーザー体験を向上させるためのスリム化戦略を検討している方
• ユーザー体験をシンプルで直感的なものにしたい方

概要

Dart3で以下を実行するとどうなるでしょうか？

void main() {
  final l = <String>['あいざわ', 'アイザワ', '相澤', 'いとう', 'イトウ', '伊藤'];
  l.sort();
  print(l);
}

出力結果は以下です。
[あいざわ, いとう, アイザワ, イトウ, 伊藤, 相澤]

当然空気を読んでくれるはずもなく、無情な結果が出力されました。
ひらがな→カタカナ→漢字どころか、伊藤が相澤より前になりました。
万年出席番号1番だった相澤さんもこれにはびっくりです。

現在観測できる限りでは、Dartでは現状これを直接解決するパッケージが存在しません。
本セッションではこの単純だが厄介な問題に対して、複数の観点から向き合っていきます。

想定視聴者

• 日本語の文字列リストをそのままsort()してギョッとしたことがある方

本セッションでは、Flutterを用いたマルチプラットフォーム災害危機情報可視化システムの開発について詳しく解説します。
みちびき(準天頂衛星システム)の災害・危機管理通報情報を専用の受信機を通じ、マルチプラットフォームデバイス(Android, Web, macOS)で受け取り、インターネット接続環境の有無に問わない状況下での災害危機情報の提供を実現します。

セッション内容

• みちびきの災危通報サービスの概要
• 衛星から情報を受信する手法
  • PRIORIS社のUSB-C接続GNSS受信機 GR-M10-C/Sを利用
  • https://prioris.jp/gnss/lineup#gr-m10-cs
• 受信機からの情報をFlutter側で受け取る手法
• 受信データの解析および可視化

目的

• 衛星から災害・危機管理情報を受信することで、通信インフラが壊滅的な被害を受けた場合でも情報を受信可能にする。
• Flutterを用いることで、マルチプラットフォームでの災害危機情報の可視化を実現する。

対象者

• 災害危機情報に興味がある方
• Flutterを用いたマルチプラットフォームアプリケーション開発に興味がある方
• シリアルコンソール通信に興味のある方

（本プロジェクトは進行中のため、内容は変更される可能性があります)

概要

ローカルDBは手軽にアプリのデータを永続化することができるものの、アプリのリリース後、手元を離れ、長期にわたって変更が加えられるその実体を正確に把握し続けることは困難です。
また、アプリの成長や新しいローカルDBパッケージの登場に伴い、使用パッケージを変更したくなることもあるかもしれません。

私は個人で開発しているFlutterアプリケーションをおよそ4年半もの間運用しており、その間にパッケージ変更を伴う2度の大規模マイグレーションを経験しました。
さらに、パッケージ変更を伴わない中規模のマイグレーションも1度経験しており、現在は2度目の中規模マイグレーションに直面しています。

ユーザーの持つデータ実体を正確に把握できていない状態でのマイグレーションがどれほど恐ろしいか、ご想像に難くないかと思われます。
しかし、そのような困難を乗り越える中で、私が得た知見は決してゼロではありません。
本LTでは、3度のマイグレーションを終え4度目に取り組む今、私が考えるFlutterにおけるローカルDBの

• マイグレーションを軽くする工夫
• マイグレーションを乗り越える工夫

についてお話しします。

想定視聴者

• ローカルDBをメインDBとして使用している、または使用を検討している方
• 勇気をもらいたい個人開発者

私の所属するチームでは、事業のスケールと共にアプリチームのメンバーも増え、現在10人のメンバーがいます。
そのスケールの中で開発生産性を落とさず、さらに増加させていく取り組みとしてコードレビューを促進する取り組みを行っています。

このセッションでは、以下の内容についてお話しします：

1. 現在運用されているコードレビュー促進の仕組み
2. Flutter on the WebでGithub APIと連携したPRメトリクスを可視化したダッシュボードの作成
3. 社内ダッシュボードを形骸化させないための工夫
4. モチベーションを上げるための工夫

想定視聴者

• コードレビューを促進する必要のあるアプリチームに居る方

Flutterは標準でスクリーンリーダーに対応しており、簡単に文字を読み上げることができます。
しかし、Semanticsウィジェットを正しく使わないと、スクリーンリーダーを使用する人にとって使いにくいアプリになってしまうことがあります。

スクリーンリーダーに対応するために重要なSemanticsの要素として下記があります。

• SemanticsLabel
• SemanticsSortKey
• SemanticBoundary
• MergeSemantics
• ExcludeSemantics

上記の内容を踏まえ、本セッションでは、Semanticsの使い分けによるスクリーンリーダー対応の最適化の手法についてお話しします。

具合的には、以下の内容についてお話しします。

• Semanticsの仕組み
• スクリーンリーダーに対応するための実践的なSemanticsの使い方
• showSemanticsDebuggerを使い、SemanticsTreeの可視化し、開発を効率的に進める手法

想定視聴者

• アクセシビリティに関心がある方

概要

弊社ではモバイルアプリのデリバリー効率最大化のために、ネイティブアプリをFlutterにフルリプレイスしました。
そのプロジェクト内では技術的な変更だけでなく、将来的にWebエンジニアがモバイル開発の一部を担えるかどうかの検証も合わせて実施しました。
結果としては個人的、事業的の両面で非常に価値のある取り組みとなりました。

こちらの発表ではまさに実験台となった私の経験を元に

• WebエンジニアをFlutterエンジニアにコンバートした際の価値
• 実現させるための効率的なFlutterオンボーディング、学習体制と直面した落とし穴
• リプレイスプロジェクトにおける課題、実際の立ち回り

という話を具体的にさせていただきます。

Webエンジニアの方々の「Flutter開発楽しそう」「ここが落とし穴か・・・」という部分を理解する助けや
Flutterエンジニアの方々の「チーム拡大のための1アイデア」「初学者オンボーディングの工夫ポイント」などのつかみになれば幸いです。

想定視聴者

• Flutter開発をしてみたいWebエンジニア
• Flutter開発組織の拡大を目指すリーダー/マネージャー
• リプレイスプロジェクトにおける課題や解決策を知りたい方

概要

環境構築が開発を行う上で最も最難関の準備パートではないでしょうか？ flutter doctor コマンドを使っても解決まで時間がかかった経験を持っている初学者の方はいませんか？
Project IDX はこれらの課題を解決し、すぐに関心事である実装に集中することができます。 Project IDX はいわゆるplaygroundの一種で、オンラインで開発環境を提供するツールです。Flutterはこの中に含まれています。オンラインで開発の環境が完結しているため、環境構築の手間をほとんど0にしてコードを書くことができます。

このプロジェクトは発展途上ではありますが、プロトタイピングに非常に優れています。プロトタイプした完成のみならず、コード自体も共有しアイデアをすぐに実装・プロトタイプに反映する、高速な開発を進めることが可能になります。

このLTでは、IDXを用いてプロジェクトを作る方法や、既存のFlutterプロジェクトをIDXにする方法、エミュレータの使用方法など Flutter のための Project IDX の使い方を共有します。

想定視聴者

• これまで、環境構築に苦労した経験のある方
• プロトタイプの完成品だけでなく、コードを簡単に共有したい方
• Project IDX に興味がある方

概要

本セッションではFlutter開発経験が0のモバイルエンジニアのみで構成された弊チームが、どのようにしてFlutterを学び、新規アプリをリリースするまでに至ったかを2024年度版と題してご紹介します。
Flutter導入の背景から、効果的だった勉強方法やそうでなかった方法、実際に新規アプリを開発・リリースするまでの道のりについて具体的にお話しします。
現在では、Flutterで開発したアプリを1つリリースし、さらに2つの新規アプリを開発中です。
Flutterの導入を検討しているエンジニアやマネージャーにとって有益な情報を提供し、実際の導入事例を通じてチーム全体で新しい技術を学ぶ際の参考にしていただければと思います。

想定視聴者

・ Flutterに興味があるが、どのように学習を進めれば良いか悩んでいるエンジニア
・ 新しい技術を導入する際のチームの学習プロセスやリソース配分について知りたい方
・ チーム全体で新しい技術を学ぶ際の効果的な方法や、実際の導入事例を知りたい方
・ 新しい技術を導入する際のメリットやデメリット、実際の導入事例を通じて、組織全体の技術戦略を考える参考にしたい方

概要

私たちのチームは、約2年間にわたり自動テストの運用を行い、そのシナリオ数は70を超えました。その過程で多くの課題と学びがありました。
カバレッジを維持するためには、自動テストの書き方の統一性、痒いところに手が届く記法の必要性などの数多くの課題が存在します。

以下の内容についてお話しします。

• 基本的なIntegration Testの書き方
• SMS・メールアドレスログインやWebView、Map機能などの自動テストの書き方
• 自動テストの効果的な定期実行方法
• ライブラリ更新に気づく自動テストの手法

想定視聴者

• Flutterを使ったアプリ開発での自動テストに興味がある方
• 自動テストの導入・運用を検討中の方
• Integration Testに興味がある方

概要

Flutter用のゲームエンジン「Flame」をご存知でしょうか？ Flameは、スプライト管理、衝突判定、エフェクトなど、2Dゲームに必要な機能を一通り備えています。FlameのGameWidgetはFlutterのWidgetツリーのどこにでも挿入できるため、ゲームアプリ以外のアプリにもゲーム的な要素を盛り込むことができます。

近年のモバイルアプリでは、LottieやRiveといったツールで作成されたベクターアニメーションが盛んに利用されていますが、これをFlameを使ってゲームライクなインタラクティブコンテンツに置き換えると、またちがった面白さが生まれるかもしれません。

このトークでは、Flameを用いて一般的なモバイルアプリのアニメーション演出をユーザーが操作できるコンテンツに変換した事例を紹介します。Flameを活用した派手な演出の作成方法や、GameWidgetとFlutterアプリ本体との連携方法についてもお話しします。

想定視聴者

• 楽しい演出でユーザーを引きつけたい方
• インタラクティブなアニメーション演出をコードで作ってみたい方

概要

昨今の Flutter 開発の現場において、build_runner は欠かせない存在になっているかなと思います。

しかし一方で、それなりに大きなコードベースで作業されている方は特に、build_runner の実行時間の長さによって生産性が低下したり、また DX (Developer Experience) が阻害されているという人も多いのではないでしょうか。

本セッションでは build_runner による待ち時間を少しでも短くするための tips についてお話しします。

想定視聴者

・開発現場で build_runner を使っている方
・build_runner の実行時間に課題を抱えている方

概要

Dart や Flutter ではいままで、ビルド時に追加の処理を行う手段がありませんでした。
しかし最近、 Native Assets と呼ばれる新機能が追加され、ビルド時に追加の処理を行うことが可能になりました。
本LTでは、 Native Assets とはそもそもどんな機能なのか、どのように活用できるのかをお話しします。

想定視聴者

Dart/Flutter でアプリやパッケージ開発をする方全般
特に、FFIを用いた開発をしている方

概要

現在担当しているサービスはモバイルアプリ(Flutter)とWebブラウザ(PC/SP)の複数プラットフォームに提供していますが、各プラットフォームでは一部を除いて共通のデザインコンポーネントを使って実装しています。
Flutterアプリで効率よく実装、管理するためにはどういったコンポーネント定義なら実装しやすいかをFlutterのコードを踏まえながら、デザイン作業も兼任しているエンジニア目線で解説します。

このセッションでは以下の内容を想定しています

• Material Designの扱い方
• デザインツールでの管理方法 (例としてFigmaを想定しています)
• Flutter実装
  • Color
  • Text
    • TextStyle
    • Font
  • ThemeExtensionを用いたコンポーネント管理
    • Light/Dark Theme
    • Button, Cardなど

想定視聴者

• テーマの管理方法に悩んでる開発者
• Flutterアプリを担当している、しようとしているデザイナー

概要

ある日，チームメンバーから『普段使っている他のアプリと比べてな〜んか使い心地が悪い…😅💦』という声が上がりました．
アプリが数多く存在するこの時代，『なんか使い心地が悪い』とユーザはすぐ離れていってしまいます．これは大問題です．なんとかしなくては…！

具体的には，以下のような使い心地の悪さの声が上がりました．

• 動画再生するとアプリが重くなる
• リストをスクロールするとカクつく
• iPhone だと文字が細くて見にくかったり絵文字表示が小さく感じる
• 画像のトリミングが遅い
• etc…

そこで，このセッションでは以下のトピックについてお話しします．

• 使い心地に関するトラブルにどう対処したのかを5つ紹介🔥
• 既存ライブラリではちょっと物足りないときに改修する方法（パッチの当て方）🛠️

想定視聴者

• アプリをただ作るだけではなく使い心地を追求したい人
• Flutter であることを言い訳にクオリティを妥協したことがある人

概要

本セッションでは、Dart Frogを活用したWebSocket通信の実装方法を詳しく解説します。
WebSocket通信の実装には、接続管理、エラーハンドリング、再接続ロジックなど、考慮すべき点が多岐にわたります。また、Dartの非同期処理と組み合わせる際の適切な実装方法や、パフォーマンスの最適化も重要な課題です。
そこで Dart Frogの特徴や利点を紹介し、WebSocket通信の実装手順を step by step で説明します。さらに、実装上の注意点や最適化テクニックを共有し、効率的で信頼性の高いWebSocket通信を実現しましょう。

1. Dart Frogの概要と特徴
2. WebSocket通信の基本概念の復習
3. Dart Frogを使用したWebSocketサーバーの構築
4. Flutterクライアントでの WebSocket 接続の実装
5. エラーハンドリングと再接続ロジックの実装
6. best practices

想定視聴者

・Flutter でゲーム開発する際に Dart で websocket サーバーを実装したい開発者
・Dart Frogを使ったバックエンド開発に興味がある開発者

概要

ここに、野菜のリストがあります。
[にんじん, じゃがいも, たまねぎ, ブロッコリー]

あなたなら、緑色の野菜だけを選ぶにはどうしますか？ それぞれの野菜をサラダ用にカットするには？ 野菜の重さを合計するには？ 空のコンソメスープに各野菜を追加するには？

これらの操作を簡単に実現できるのが、Dartの高階関数です。高階関数は、関数を引数や戻り値にとる関数のことです。Dartでは、map・where・reduce・foldなどが Iterableクラスのメソッドとして定義されています。これらを使うと、for文よりも簡潔で柔軟なコードが書けます。

本セッションでは、野菜を例に、Iterableクラスに定義された高階関数を直感的に理解することを目指します。また、具体的なケースで高階関数を使う場合と使わない場合を比較し、コレクション操作が簡潔で明瞭になることを体感します。さらに、Dart SDKの内部実装を参照して、Iterableクラスのメソッドの動作をより深く理解します。これにより、高階関数へのハードルが下がり、Dartでの開発がさらに楽しくなるでしょう！

想定視聴者

Dartの高階関数にハードルを感じている方
Iterableクラスの内部実装に興味がある方
野菜が好きな方

概要

地下鉄や長時間のフライトなど、通信が不安定な状況でもアプリが快適に動作することが求められています。
このニーズに応えるには、オフラインでのデータキャッシュが不可欠です。
特に、大量のデータを扱うアプリでは、データベースの選定がパフォーマンスに大きな影響を与えます。
本セッションでは、学習用APIであるPokeAPIを活用し、sqfliteやobject_boxなどのデータベースを比較します。
それぞれの読み書き速度やリアルタイム検索の実装方法を解説し、オフライン環境でもスムーズに動作するアプリの実装手法を紹介します。
さらに、オフラインからオンラインに復帰した際のデータハンドリングについても触れます。

このセッションで学べること

• sqfliteやobject_boxなどのデータベースの読み書き速度や使いやすさの比較
• 効率的なリアルタイム検索の実装方法
• オフライン状態からオンライン復帰時のデータ管理

  想定視聴者

• ローカルキャッシュを活用したアプリの実装を検討している方
• オフライン対応アプリの開発に関心がある方

概要

多くのFlutter開発者が直面する課題の一つは、標準コンポーネントでは対応できない高度なUIニーズです。私たちのプロジェクトでも、動画のスライダーをカスタマイズする必要に迫られ、標準のSliderコンポーネントでは対応できない要件に直面しました。その結果として、CustomPaintを活用して独自のスライダーを実装することにしました。

このセッションでは、CustomPaintの基本から始め、高度なカスタム描画を行うためのベストプラクティスと実際のパフォーマンスについて深掘りしていきます。

このセッションの内容は以下の通りです：

• CustomPaintの基礎基本：仕組みと使用方法
• CustomPaintを使うべきタイミングと利点
• CustomPainterによる高性能カスタム描画技術
• パフォーマンス計測と最適化の手法
• ライブコーディングによる実装解説

想定視聴者

• FlutterでカスタムUIコンポーネントの作成に関心がある開発者
• CustomPaintやCustomPainterの使いこなし方を知りたい方
• パフォーマンスを犠牲にせず、独自のデザインを実現したい方
• 実際に手を動かして高度な描画処理を実装したいエンジニア