トーク

概要

Flutterには画面遷移アニメーションとして、ネイティブライクなアニメーションがMaterialPageRouteとして最初から使いやすい形で用意されています。
確かにほとんどの場合ではネイティブ画面遷移アニメーションで十分で、実際ユーザーは違和感をあまり感じずにアプリを扱えるでしょう。
しかし私たちはネイティブではなくFlutterを選択して使っています。せっかくなら画面遷移にも凝って独自の世界観を演出してみませんか？

本セッションでは私が公開している画面遷移アニメーションのパッケージturn_page_transitionを作った経験をもとに、オリジナルの画面遷移アニメーションを実装する方法やTipsについてお話しします。

想定視聴者

画面遷移アニメーションの作り方に興味がある方

概要

このプレゼンテーションでは、ネットスーパーにおけるDeepLinkの実装について詳しく解説します。DeepLinkは、顧客がネットスーパーアプリやウェブサイトから特定の商品やカテゴリページに直接アクセスするための手法です。DeepLinkの設計と実装方法に焦点を当て、複数プラットフォームのDeepLink / Universal Links /App Links実装の共通の困難さ
各プラットフォームの違いによる挙動の違いや技術的な制約など、複数プラットフォームでのDeepLink実装について紹介します。

想定アジェンダ

• DeepLinkとは
  DeepLinkを取り巻く技術のこれまでの歴史を踏まえて用語を整理します
• Flutterにおける実装例
  ネイティブアプリのみではなく、Flutter on the Webを同一ソースで提供している場合の実装例、困ったところや学びとなったところを、ネットスーパーアプリケーションで商品の値引きをするクーポンを提供したいという具定例とともに話します

想定視聴者

• Flutter興味ある人
• DeepLinkを実装することになった人
• マルチプラットフォーム対応サービスつくってる人

概要

みなさんのFlutterアプリでは、状態管理にどのような手法を採り入れていますか？ 私たちのアプリでは、初めはRiverpodとfreezedのパッケージを組み合わせて、Android MVVMのような状態管理手法で実装を行っていました。しかし、非Androidエンジニアの学習コストがかかったり、宣言的UIの特性にマッチしているとはいいがたいなど、このアプローチが最適ではないとの結論に達し、状態管理の方針を見直すこととなりました。

方針の策定にあたり、宣言的UIの先駆者であり、既に経験や議論の練度が高いReactの思想、特にReact HooksやRecoilベースのアイディアを取り入れることにしました。FlutterはReactの設計思想と非常に近しく、またRiverpodやFlutter HooksといったライブラリがこれらのReactの状態管理手法から影響を受けていることから、この方針が適していると考えました。
 
今回のセッションでは、RiverpodやFlutter Hooksを使用した、Reactインスパイアの状態管理手法について、具体的な実装や工夫をご紹介いたします。

想定視聴者

• Flutterらしいアーキテクチャが何なのか今ひとつ自信を持てない方
• 現状の状態管理手法で課題を感じている
• 状態管理手法の選択に悩んでいる人

概要

Flutterに関連するツールやパッケージは多様にあり、どれを使うか迷うこともあるかと思います。
チームで開発するには開発メンバー全員が同じ環境で開発することがとても重要です。
Flutterをそのまま利用した場合、メンバーごとにバージョンの齟齬が発生したり、
後から参入したメンバーの環境構築が複雑になったりしがちです。
このセッションでは私たちがどのように環境構築をしてFlutterを利用しているかをご紹介します。
皆さんのFlutter環境構築の参考になれば幸いです。

予定セッション内容

• どのようなパッケージやツールを使っているか
• その剪定はどうしたか
• 使ってみての感想

想定視聴者

• これからFlutterでアプリ開発をしようと考えている方
• Flutterでチーム開発をスムーズに始めたい方
• Flutter以外の開発経験のある方でFlutterに興味がある方

概要

Dartのエコシステムは、ライブラリやツールなどの共有ソフトウェアを管理するためのパッケージを使用します。
pub.devで公に利用できるパッケージやGitなど他のソースから取得することができます。
引用元: https://dart.dev/guides/packages

パッケージをとにかく使えばいいのかというとそうではありません。しっかりと整備されたものもあれば、あまりよろしくないものがあります。

では良いパッケージ・悪いパッケージの選定はどうしたらいいのでしょうか？

具体的には以下について話す予定となっております。
• Flutterの公式が紹介している
• 定期的なメンテナンスがしっかりされている
• ドキュメントがしっかりと記載されている
• Packageのリポジトリの評価が高い
• 多くの人が利用している
• テストコードが充実している
• Contributorが複数人いる
• リリースフローが明記されており、問題がなさそうなもの
• ライセンスの互換性がある

本セッションでは、「Flutterエンジニアのためのパッケージ選択術」について話していこうと思います。
注意）制限時間によって一部省く場合がありますが、増える場合もあります。

想定視聴者

• Flutter、Dartを使用した開発経験がある方

概要

Flutter Web を使ったアプリを2年間プロダクションで運用してみて、 チョットデキルようになってきたので Tips を発表します。
1分に1つ話せたらいいなってことで40選にしましたが、 状況次第で20選になるかもしれないし、 60選になるかもしれません。

チラ見せ

• Flutter Web のロードを早くしたい
• フォント問題、 豆腐とか
• モバイルでRemoteConfig使ってるんだけど
• 以前はこんな問題があったけど改善されてます

想定視聴者

Flutter Web を使いたいひと。 すでに使ってるひと。

概要

2023年は各社から次々に新しいFoldableスマホが発売されました。中でもGoogleが自ら発売したPixel Foldは印象的です。
今後はPixel Foldで快適に使えるアプリかどうかという観点もGoogleが重視することは間違いないでしょう。ASO（アプリストア最適化)の観点でも必要になるかも。

そこで、Googleがリリースしているアプリや、他のFoldableデバイスにマッチしたアプリ、マッチしていないアプリの特徴や、Foldableデバイス独自の機能について調査したレポートをお話します。

想定視聴者

UIやUX寄りの話題が好きなFlutterエンジニア

概要

皆さんはFlutter開発をするとき、どんなエディタを使っていますか？
多くの人はVSCodeやAndroid Studioを使っていると思いますが、中にはVim、Emacsなどで開発をしている人もいると思います。私はEmacsを使っています。

Dartは開発支援機能が豊富に揃っていて、コードの補完、エラーの表示、シンボルのリネームなど多くのことをエディタ上で行うことができますが、
これはDart Analysis Serverという共通基盤を各エディタが利用することで実現されています。
Dart Analysis ServerはLanguage Server Protocol(LSP)に則って開発されていて、
対応しているすべてのエディタで同様の開発体験が得られるようになっています。

普段は意識することがあまりないけれど、とても面白いエディタの裏側の世界を一緒に見てみましょう！

予定している内容は以下の通りです。
・ LSP誕生前のエディタがどうだったか
・ LSPがエディタ界に起こした変革
・ エディタとDart Analysis Serverのやりとりを可視化してみよう
・ Dart Analysis Serverの便利な機能の紹介
・ Dart Analysis Serverの機能を拡張してみる

想定視聴者

・ Dartを使って開発をしている方

概要

近年iOSでもWebからPush通知が送れるようになりWebViewがメインコンテンツとなる、通称ガワアプリの需要が低くなってきているのではないでしょうか。
よりモバイルアプリらしい体験をユーザーに提供することやモバイルを使うことのメリットを活かすためにWebViewを使うことをやめました。
その際に大前提として現在ある財産をそのまま使用できるのか？踏み切ることによって会社にはメリットがあるのかなど考えました。その上でメインコンテンツ部分をflutter_htmlというパッケージを使用することにしました。
これはWebViewと比較するとhtml, cssを読み込むことができる代わりにjsの実行ができません。その分読み込み速度や描画速度でメリットがあります。
このセッションでは上記の問題提起に対する回答に加え、どのような会話をしていったのか、どのように開発を進めていったのかということについて話していけたらと思います。

想定視聴者

WebViewを使っている人
FlutterにおけるWebViewを採用することについて気になっている人

概要

Flutterの画面遷移には、従来型のNavigator.of(context).push()を使う方法と、Navigator2.0を使ったルーティングをする方法があります。
go_routerはNavigator2.0を使った画面遷移を行うためのライブラリです。
2022年に非公式パッケージから公式パッケージに昇格しており、現在ではデファクトスタンダートとなっています。
今回のセッションでは、そんなgo_routerについてサンプルアプリを使いながら紹介したいと思います。
予定している内容は以下の通りです。

・ Navigator2.0のコンセプトの紹介
・ go_routerの基本的な使い方
・ 新しく追加されたShellRoute/StatefulShellRouteの紹介
・ go_router_builderの紹介

想定視聴者

・ Dart/Flutterの基本的な書き方がわかる方

概要

FlutterはUIフレームワークとして2次元での画面構成に特化していますが、表示するデータによっては3次元で可視化した方が望ましいものもあります。例えば自動運転に用いられるLiDARというセンサーは毎秒数十～数百万点もの測定データを生成します。このような大規模3次元データの可視化にFlutterを利用できないか、と考え実際に動作するViewerを作るために必要となったライブラリやDartの仕組みを解説・紹介します。主にDesktopを対象としています。

予定している内容：

• 大規模点群データの表示方法の比較(canvas、flame、flutter_gl等)
• GB単位のデータの読み込みと処理(Dart SIMD、rust bridge、typed_data等)
• flutter_glの内部処理について

想定視聴者

• Flutterで3次元データを扱いたい人
• dart:ffiやTexture widgetの活用例を知りたい人

概要

レシピサービスであるE・レシピは、2015年にネイティブ実装のiOS/Androidアプリが登場しました。現在、Flutterを採用してリビルドを進めています。

本セッションでは、ネイティブ実装のiOS/AndroidアプリをFlutterでリビルドを行った事例を紹介します。Flutterを採用した所感や課題、気づきをお話しします。

セッション内容（予定）

• Flutterを採用した経緯
• UI構築の知見
  • CustomScrollViewで複雑な画面に対応
  • タブUI (TabController, TabBarVIew)
  • 入れ子のスクロールを持つUI (SliverAppBar + NestedScrollView)
• Riverpod + Freezed + MVVMアーキテクチャのふりかえり
• Flutterリビルドの良かったこと
• Flutterリビルドで感じた課題
  • WebView
  • OS依存のUI部品

想定視聴者

• ネイティブ実装をFlutterに移行を検討するモバイルアプリ開発者
• これからFlutter開発を始める方

概要

Flutterは標準でテストパッケージ群を用意しており、単体テスト、ウィジェットテスト、インテグレーションテストという3つのカテゴリのテストをそれぞれ適量作ることを推奨しています。

その一方で、Flutterのintegration_testパッケージは、ネイティブのUI要素(例えば、位置情報の許諾ダイアログ)を操作できない問題があります。この問題を回避する方法の1つとして、AppiumというE2Eテストツールがあるのですが、初期のFlutterはネイティブなテストツールとの相性も悪く、Appiumでうまくテスト自動化できない問題も抱えていました。

しかしながら、Flutter 3.0の登場や新しいE2Eテストツールの登場により、FlutterアプリのE2Eテストツール環境はここ1年で大きく改善されました。本セッションでは、こうしたFlutterアプリのE2Eテストツール事情と、E2Eテスト自動化の有力な候補となる様々なテストツールをご紹介します。テストツールの得意不得意や、どのツールを選ぶべきか、うまく自動化を行うために必要なFlutterアプリ実装上の注意点についてもお話したいと思います。

想定視聴者

• ネイティブ部分を含めたE2Eテストの手段を探している方
• どのツールでモバイルのFlutterアプリのE2Eテストを自動化すればいいか迷ってる方

概要

・なぜFlutterを採用したのか。
・Fllutterを理解（学習）するためのモック作成
・サーバーサイドエンジニアが不在のため、サーバーに変わるサービス選定
→FirebaseAuthやFirestore、AWS S3
・実装してて大変だったことや、Androidエンジニアの経験が活かせる箇所
・AppStoreとAndroidエンジニアの相性はあまり良くない（iOSエンジニアに助けてもらった）

想定視聴者

Flutterでの開発経験がない方
AndroidエンジニアでiOSアプリもリリースしたい方

概要

Bitkeyでは、スマートロックをはじめとする組込み製品のQAにFlutterを用いたテスト用アプリを内製しています。
このアプリではスマートフォンとデバイスの間の通信に用いるBLE接続を、
Swift/Kotlinで開発したコネクションプールで管理して再利用できるようにしています。

このセッションでは、BLEのコネクションプールのプラグインを開発する中で必要になったアイディアやテクニックを紹介し、
「こんなプラグインって作れる？」という疑問を解消できればと思います。

• 開発中のリスタートに対応して安全にリソースを管理する
• キャンセル可能な非同期処理を提供する
• Dartの関数をプラグインに登録してネイティブコードから呼び出す
• プラグインのコードにアプリのSwift/Kotlinのコードからアクセスする

想定視聴者

• Flutterとネイティブの実装をつなぐプラグインを設計しようとしている方
• ネイティブの資産を流用したFlutterでの開発を検討している方

概要

Android/iOSでのFlutterは経験しているが、Flutter web未経験の私が3ヶ月でwebビルドしてリリースまで実装した内容をご紹介します！
モバイルとの共通点・相違点、Flutter webならではの考慮しないといけない点や工夫した点などを重点的にお話し、
Flutter webならではの他のweb技術との違い、ツラい点も交えてご紹介します！

3ヶ月という短い期間かつIT初心者やFlutter未経験者が多い中で、チームとしてのプロジェクト運営、
リリース、改修までの流れをご紹介できればと思います！

想定視聴者

Flutter初心者の方
Flutter web初心者の方
Flutter触ったことあるけどMobileのみの方
チーム運営に興味のある方

概要

現在、Flutterで作られた多くのアプリケーションにFirebaseをはじめとするmBaaSが使用されています。

そんな中、突然姿を現したServerpodというオープンソースフレームワークにより、Dartにおけるバックエンド開発の可能性が広がりました。
Serverpodは、Dartで記述されたサーバー側のソースコードを分析し、クライアント側のソースコードを自動で生成できる他、認証機能などもサポートしています。

本セッションでは実際にServerpodを使用して気づいた利点や将来性などについて話します。

想定視聴者

・Flutter,Dartを使用した開発経験がある方
・Dartでのバックエンド開発に興味がある方
・Serverpodを触ったことはないけど気になっている方

概要

サイドプロジェクトを開発する際、データを集める必要があり、AirPodsのセンサーにアクセスしたかったので、このパケージを作成しました: 
https://pub.dev/packages/flutter_airpods
イベントチャネルでデータを集めて、アプリの中で処理しました。
今年のFlutterForwardのイベントで初めてffigenを知りました。
FFIGenを使えば、たくさんの開発時間を節約出来たと思います。
FFIGenでネイティブ機能を取り出し、バインディングを作成することで、Flutterの中からアクセスすることが出来ます。
このスピーチでは、私の例を通してffigenの紹介をします。

想定視聴者

このスピーチは主にネイティブを使用する開発者向けですが、他のプログラミング言語に興味がある方にも興味深いかもしれません。

概要

Flutterのwebをリリースして以来、多くの人々は使い道に混乱しています。
Flutterのwebは、主にウェブサイトではなく、ウェブアプリのために作られました。
しかし、コミュニティーからの様々な解決方法によって、その問題は解決しています。
このスピーチはFlutterエレメントエンベディングという新しい機能で、その利用方法やメリット、課題について詳しく説明します。
そして、jasprというフレームワークについても紹介します。
jasprはreact,vueのようなフレームワークですが、dartで使います。
このスピーチの中で、flutterとjasprのエレメントエンベディングも比べています。
では、一緒に新しいflutterのweb方法を調べてみましょう。

想定視聴者

このスピーチの対象は、主にflutterのwebに興味を持っている人々です。
更に、チームリーダーにとっても重要な決定を下すときに役に立つかも知れません。
また、インディーデベロッパーは、自分のホームページでflutterのアプリのプレビューを表示することが出来ます。

概要

PocketChange では、主力のサービスPokepayにおいて、各種製品のフロントエンドにFlutterを採用しています。
採用の経緯や、良かった点、苦労した点、「スマホアプリの『貧者のツール』」としてのFlutterを超えた可能性の話をします。

主に、以下の3つの可能性の話をします:

• 全国で数百台ほど稼働しているキオスク端末でのFlutter。機材の構成やアプリの作り方、ライブラリ等について。ハードウェアUIの可能性の話をします。
• 新サービスのスマホアプリでFlutter。iOS/Androidを統一するフルスクラッチのUIをFlutterでどこまで実現できるか、まだ至らぬ点など。フルスクラッチUIの可能性の話をします。
• 新サービスのテナント向けのノーコード自動生成のPWAアプリでのFlutter。Flutter Web の実用性、パフォーマンス、WebPush通知周り、アプリ生成の可能性の話をします。

想定視聴者

• 自作のハードウェアのUIをつくる事になった、Web系/スマホアプリ系エンジニアの方。
• スマホアプリでオリジナルなUI/UXを追求したいが、Flutterはそういうのには向かない、と思っている方。
• Flutter Web ってどれだけ実用的なの？落とし穴は？効果的な使い所は？ と気になっている方。
  など。