レギュラーセッション

Androidエンジニアが2ヶ月ちょっとで初めてのiOSアプリをリリースするまで。

hi6484 Hiroshi Hashimoto

概要

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

想定視聴者

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

採択
2023/11/10 16:30〜
⚔️†††開拓者の部屋†††🛡️
レギュラーセッション

Flutterで構築する漫画ビューア

katsu

概要

漫画アプリをFlutterで作成する機会が訪れました。
漫画のビューアでは画像を表示するだけでなく、拡大やページ移動、見開き表示など様々な機能に対応する必要があります。

このセッションでは、漫画ビューアでよく利用される以下の内容についてお話しいたします。

  • Edge-to-edgeでの全画面表示
  • UIの表示切替
  • 画像表示および拡大表示
  • 暗号化された画像の表示
  • ページ対応のスライダー
  • 見開きページの実現
    • ImageProviderの拡張
    • Isolateを用いた処理の並列化
    • 画像の連結

想定視聴者

  • 漫画や電子書籍のアプリ開発に興味がある方
  • 漫画ビューアのUI/UXに関心がある方
  • 画像の扱いに興味がある方
1
レギュラーセッション

こんなときどうする?実践!Flutter Plugin開発

utisam Masatoshi Tsushima

概要

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

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

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

想定視聴者

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

MobileしかFlutterやったことない準初心者がflutter webで無双した件

wakka0014 wakka0014

概要

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

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

想定視聴者

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

レギュラーセッション

Serverpodを使用したDartでのバックエンド開発について徹底調査!!

syunya710 シュンヤ

概要

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

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

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

想定視聴者

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

3
レギュラーセッション

FFIGenは解決手段ですか: Flutterでネイティブ機能にアクセスする方法を比べる

LucasGoldner 金ルーカス

概要

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

想定視聴者

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

4
レギュラーセッション

Web上のFlutter:最先端のウェブサイトのためのエレメントエンベディング


LucasGoldner 金ルーカス

概要

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

想定視聴者

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

2
採択
2023/11/10 17:30〜
東急(株) URBAN HACKS
レギュラーセッション

我々にはなぜ Riverpod が必要なのか - InheritedWidget から始まる app state 管理手法の課題

chooyan_i18n ちゅーやん(中條 剛)

概要

2023 年現在の Flutter アプリ開発において、「状態管理パッケージを使わない」 という選択肢は無いと言っても過言ではないでしょう。
GetX や BLoC, Riverpod と多くの選択肢がある状態管理パッケージですが、特に日本においては Riverpod が採用されるケースがほとんどだと思います。

しかし考えてみると、なぜすべてのアプリに必要な「状態管理」の仕組みに対して我々はサードパーティのパッケージをインストールする必要があるのでしょうか。どのアプリでも必要なのであれば、 Flutter 自体に標準で用意されていても良さそうに思えます。

このセッションでは、その「Flutter 自体に標準で用意されて」いる InheritedWidget や Provider などの「古い」状態管理手法を利用することの問題点と、それを解決する Riverpod のアプローチについて議論することで、状態管理パッケージの選定の際に確かな根拠を持って「このアプリには Riverpod が必要です」と言える状態を目指します。

想定視聴者

  • Riverpod の基本的な使い方を知っている方
  • Element の存在と役割をある程度知っている方
8
採択
2023/11/10 15:30〜
⚔️†††開拓者の部屋†††🛡️
レギュラーセッション

Dartのコード自動生成の仕組みと、コード自動生成のパッケージを自作する方法について

KosukeSaigusa kosukesaigusa

概要

Flutter/Dart による開発を行う際、json_serializable や freezed に代表されるような、build_runner を用いたコード自動生成パッケージを利用している方は多いのではないでしょうか。

本セッションでは、既存の主なコード自動生成パッケージや、スピーカーが開発中のコード自動生成パッケージ flutterfire_gen を例に挙げながら、Dart のコード自動生成の内部の仕組みや、コード自動生成パッケージの自作方法について解説します。

主な内容:

  • build パッケージによる build_runner と連携するビルドタスクの定義について
  • source_gen パッケージが提供するコード自動生成の仕組みと、コード自動生成を容易にする各種機能について
  • analyzer パッケージによるコード自動生成の対象となる Dart のソースコードの静的解析について
  • dart_style パッケージによる生成されたコードの整形について
  • 上記の説明を踏まえた、json_serializable や freezed のようなパッケージの内部の解説や、自動コード生成パッケージの作り方について

想定視聴者

  • 普段使用しているコード自動生成の仕組みの中身を知りたい方
  • コード自動生成パッケージを自作したい方
11
レギュラーセッション

キオスク端末からWebアプリまで、Flutterのフロントエンド大統一理論!と実践。とその結果、

smihica 青山新

概要

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 ってどれだけ実用的なの?落とし穴は?効果的な使い所は? と気になっている方。
    など。
2
レギュラーセッション

FlutterとmBaaSの新しい可能性Firebase、Supabaseに次ぐAppwriteを利用した開発方法

tkmssh take

概要

Flutterでアプリを開発する際に、バックエンド側はmBaaSを導入されるケースがよくあると思います。
よく利用されるFirebaseをはじめ、近年ではRDS(PostgreSQL)が利用できるSupabaseも注目されています。
そんな中、去年登場したAppwriteというセルフホスティングが可能なmBaaSが登場しました。

本セッションでは、Appwriteのサービス説明やFlutterで取り込むための記述方法を解説します。

想定視聴者

  • Flutterでの開発経験のある方
  • Firebase等のmBaaSを利用したことがある方
1
レギュラーセッション

Flutterプロジェクトでのコマンド整理術

kgmyshin

概要

Flutterでアプリケーションを開発する上で必須のコマンド整理術を紹介します。

想定視聴者

  • Flutterアプリ開発においてコマンド整理をしたい方

説明

Flutterでアプリ開発をしていると、日々多様なコマンドを打つ機会があります。そして、たとえばfvmを使用したり、flavorをわけるようになったり、mainファイルを環境ごとに分割したりとしていくようになり、コマンドが徐々に長くなり手で打つには困難な長さになってきます。

そのため多くのプロジェクトでは、コマンドをうまく整理する術が必要になってきます。
makeファイルをつくったり、シェルスクリプトを作って整理することが多いのではないでしょうか。
自分の場合は、ここに fastlane を選択しています。fastlane を使用することで、 下記のように fastlane {プラットフォーム} {アクション} のフォーマットで簡潔にコマンドを整理することができます。

  • fastlane flutter lint
  • fastlane flutter test
  • fastlane android deploy_beta
  • fastlane ios deploy_beta

当セッションでは fastlane を使用するメリデメ、上記の環境を作る手順を紹介します。

1