FlutterKaigi 2021 プロポーザル一覧

他イベントOK レギュラートーク(30分)

心理的安全性を確保するための Linter 導入

sugitlab すぎっと sugitlab

Flutter 2.5.0 で とうとう Stable に Linter付きテンプレートがやってきましたね。そこで使用されている flutter_lintsの紹介から、四方山話、個人的にオススメしたいルール設定などを紹介します。

Linter はプロジェクトに心理的安全性をもたらします。プロジェクトにマッチした Linter を構築し、穏やかな日々を送りましょう。

1
他イベントOK レギュラートーク(30分)

Flutterアプリにリッチで運用しやすいお知らせ画面を追加する

himara2 himara2 himara2

アプリを提供する上でユーザーとのコミュニケーションは不可欠です。

アップデートの内容や機能の使い方、障害やその復旧の案内。
これらをユーザーに伝えられる「お知らせ」画面をアプリに追加しましょう。

お知らせ機能はシンプルですが考えることは多くあります。カテゴリ分け、未読/既読管理、お知らせの入稿方法。
本セッションではヘッドレスCMSである microCMS を利用し、リッチかつ更新しやすいお知らせ画面を作る方法を手順を追って紹介します。

1
他イベントOK レギュラートーク(30分)

超初心者が2ヶ月の実務経験から語る”壁にぶつかったときの意識づけ”

fluflaFra Aruga Yuta fluflaFra

初心者は特にUI作成の部分でoverflowを解決できなかったり、ウィジェット同士の関係性が掴めなかったりすると思います。
”ググってみたけど解決しない…”そんな時に”初心者だからこそ意識すべき点”を、株式会社エキサイトでの2ヶ月の開発インターン経験を踏まえながら、初心者目線でお話しします。

内容
・頭の中での意識化
・飛び道具なウィジェットは存在しない!
・頑張ってStackOverflowを読もう
                    他
対象者
・flutter、ネイティブアプリ制作を初めて学ばれる方
・初学者の教育担当をされる方 等

1
他イベントOK レギュラートーク(30分)

テスト仕様ゼロからのテストコード作成チェックポイント(テスト初心者から実践者になろう)

cch_robo robo cch_robo

Flutter を使ったプロダクトが成長している昨今、テストの重要性が高まっています。
要件や仕様を満たす、単体テストや結合テストを的確に設計&作成できれば、
コードを変更しても、デグレ(既存機能の破壊や品質低下)が発生していないかチェックする、
リグレッションテストが行えますから、リファクタリングも安心して試せますものね。

テストの原則として、『自動テストは、「外部から見た振る舞いの評価」』という視点に立ち、
テストのしやすいアプリ設計と、テスト時のみ依存内容を差し替える(テストダブルファクトリ)アプローチを使い、
「要件や仕様のみで、テスト仕様はゼロの段階」から、
「要件や仕様を満たすテストコード」が作成できる考え方と設計のチェックポイントを説明します。
外部パッケージの DI や Mock を使わずに、単体テストやエミュレータを使った結合テストを作成する基本を具体例で説明します。

1
他イベントOK レギュラートーク(30分)

機械学習モデルを使ったFlutter アプリパターンの考察

廣田翼

◆ 概要
KDDI DIGITAL GATE(https://biz.kddi.com/digitalgate/)にてお客様の業務をデジタル化する業務に従事しています。デジタル化方法には色々ありますが、現場にて、手動や目視にて確認するような業務を機械学習モデルを使って効率化することも多いです。
本トークでは、積まれた本を数えるFlutterモバイルアプリを題材に、機械学習モデルが、サーバにあるパターンとFlutterモバイルアプリにあるパターンを紹介します。それぞれのパターンにおける、機械学習モデルの選定、pretrain+カスタム学習、推論の方法をアプリデモを交えて紹介します。
◆ トークの対象者

  • 現場にて、手動や目視にて確認するような業務を効率化したいと思っている方
  • Flutterアプリで画像から物体検知、分類、セグメンテーションといった機械学習モデルを使いたい方
5
他イベントOK レギュラートーク(30分)

Flutter for Web でCookieを扱う / flutter_markdownでマークダウンの見た目をデザインを自由自在に変更

K_shir_0 K-shir0 K_shir_0

Flutter for WebでhttpやdioなどのパッケージでCookieを扱う場合ブラウザなのでhttp onlyなどのCookieはどうすれば扱うことが出来るかを悩まされたので、普通のcookieの扱い方やパッケージでCookieを使い方法を解説します。

flutter_markdownでデザインを良い感じにカスタマイズする方法を例を用いて解説します。

1
他イベントOK レギュラートーク(30分)

アプリでしか買えないカレー屋がなぜFlutterを採用するのか?

yutu

アプリでしか買えないカレー屋TOKYO MIX CURRY(TMC)アプリは2019年3月に産声を上げました。

約2年半にわたりサービスを提供する中で、ありがたいことに1,400件を超える評価を頂戴しています。

TMCアプリはFlutter製です。

日々の機能追加や改善はもちろんのこと、より快適にご利用いただけるようダークモードやOSのテキストサイズ変更などにも対応しています。

TMCアプリの開発は、アプリエンジニアが実装だけではなく、現場に赴き得られたフィードバックをもとにUI/UXデザインも手掛けています。

一見大変そうに見えますが、Flutterを上手に利用することで、iOS/Androidで同等の品質を保ちつつ高速な開発を実現しています。

本トークでは、TMCアプリの開発手法やそれらを支える技術、Flutter採用で得られたメリット/デメリットを赤裸々にお話します。

2
他イベントOK レギュラートーク(30分)

【UIの開発効率を上げられる!?】monarchを使ったFlutterでのUIコンポーネント開発・管理のお話

satomixx_ satomix satomixx_

monarchというツールをご存知でしょうか?
webでのUIコンポーネント開発ではStorybookが有名かと思います。
monarchはstorybookに強く影響を受けた、FlutterでのUIコンポーネント構築を高速化・効率化させる為のツールです。

UIコンポーネントの開発においては悩ましいことが多々あるかと思います。

  • 渡す値などによって起きるUI崩れ
  • 端末やOSごとにチェックするのが大変
  • コードだけでは実際のUIを把握しづらいので、見ながら実装したい
  • 小さなコンポーネントを実装する場所にちょっと悩む
    etc...

monarchを使うことでこういった悩みのいくつかを軽減させることができるかもしれません。
今Flutterとともに成長してるmonarchについて、私が体験している小さなアレコレのお話にはなりますが、お役に立てましたら幸いです。

2
他イベントOK レギュラートーク(30分)

【もうFirebaseに頭を悩ませない】Flutter×Supabaseで作るアプリ開発とそのTips

dshukertjrjp タイラー dshukertjrjp

Supabaseって聞いたことありますか?SupabaseとはBackend-as-a-Service (BaaS)と呼ばれる類のサービスで、競合にはFirebaseがあったりします。

SupabaseにはDatabase, Auth, StorageとFirebaseと同じような機能が用意されているのですが、Firebaseとの決定的な違いはデータベースにPostgreSQLを使っている点になります。PostgreSQLを使っているということはもうデータベースの正規化・非正規化に頭を悩まされたり、いいね機能を実装するときに分散カウンターを作ったりとデータベースの構造に工夫をする必要がなくなります。

今回はそんなサービスSupabaseのFlutter用のSDKを使って、実際に簡単なアプリを作りつつ、tipsやFlutterとSupabaseの今後の話をさせていただきます。

7
他イベントOK レギュラートーク(30分)

Flutter フレームワークのコードを読むための 3 つのコツ

chooyan_i18n ちゅーやん chooyan_i18n

Flutter の仕組みを理解するための一番の方法はそのソースコードを読むことです。

当たり前ですが、Flutter フレームワークもプログラムで動いており、その動きは全てコードに書かれていることを考えれば、「ソースコードを読む」ことで我々アプリ開発者がどのようなコードを書いたらどう動くのかが明確に理解できるようになるはずです。

しかし、「ソースコードを読む」こと自体にハードルがあることも確かです。慣れないと、どこから読めば良いのか、変数名やクラス名に使われる単語の意味、その関係性など、混乱のタネは至るところで我々の理解を妨げるでしょう。

このトークでは、そんなハードルを乗り越えるための3つのコツをお伝えします。

ドキュメントを読み、クラスの役割を把握し、動作を予測した上で読む、この3つの大切さについて、実際にソースコードを読み込んで記事や本を執筆した経験を元に話します。

2
他イベントOK レギュラートーク(30分)

Flutterでのチームビルディングがワークするまでに決めたこと

tamapppe Tamappe tamapppe

ある日突然、業務でFlutterを検証する機会が出てFlutterを使ってみようということになりました。
てっきり自分一人で検証すると思いきや、まさかのチームで開発するとのこと。
それまでFlutterでのチーム開発の経験がなかった筆者は、
突如チーム開発がうまくワークするような開発フローを整備する必要に迫られました。

実際に検証込みでとても苦戦したことは次のようなことでした。

  • プロジェクトのフォルダ構成とそれぞれのメリットデメリット
  • チームメンバーのスキルセットに合ったアーキテクチャの選定
  • APIクライアントの設計と使うライブラリ

これらは一つ一つ正解といったものが見つからず、自分で判断するしかありません。

本セッションでは上記の内容を踏まえ、
チームビルディングで必要だと感じたアプリ開発におけるルール決めについて話します。

2
他イベントOK レギュラートーク(30分)

shared_preferencesを自由自在に扱う

isekiryu イセキ isekiryu

端末のデータ内で保存したものを別の画面や別の処理の際に、使いたいと思ったことはありますでしょうか。

私も始めたばかりは、別の画面でも使えるようになれたらなあーーと思いながら、妥協していました。

株式会社エキサイトでFlutterエンジニアとしてFlutterを書き始めてから、徐々にできることが広がりました。そのおかげで個人でやっているアプリ開発でできることが増えたり、アプリの質も少しづつ上がってきました。できるようになったことの領域の一つとして「shared_preferencesを自由自在に使う」があります。

入力したデータを別の画面で表示ができたり、色々な通知管理など幅広く役立っていきます。

保存するためにデータにアクセスする鍵を共通化して色々の画面でアクセスできるようになります。

2
他イベントOK レギュラートーク(30分)

Flutter WebからDOM、ブラウザAPI、JavaScript関数を直接使う

tfandkusu 高田 晴彦 tfandkusu

普段Flutterでモバイルアプリの開発をしている人が、PCのChrome向けにアプリを開発したくなったときに、Flutter Webを使うことで少ない学習コストで適切なUI/UXを表現できます。モバイルアプリと同様にWidgetやプラグインを使って構築しますが、それだけでは要件を満たせない場合は、FlutterからDOM、ブラウザAPI、JavaScript関数を直接呼ぶことが可能です。
本トークではdart:htmlライブラリを使用したDOMとブラウザAPIを呼ぶ方法と、その場合の単体テスト作成のコツを解説します。また、プラグインが提供されていないJavaScriptライブラリを呼び出すために、jsパッケージを使う方法も解説します。

1
他イベントOK レギュラートーク(30分)

Flutterでアクセシビリティ対応

mizukami2005

Flutterにおけるアクセシビリティ対応についてトークいたします。
サービスを利用する人は多様です。手が不自由な方や目の見えない方などさまざまです。
サービスを使う環境やデバイスも多様です。
サービス提供者なら誰しも、ひとりでも多くの人にサービスを提供したいと思っているのではないでしょうか?

そんな時、アクセシビリティ対応は重要なピースになりえます。
Flutterを使っているならば、大変な労力をかけずにアクセシビリティ対応が行えます。
アクセシビリティ対応は、より多くの価値をより多くの人に提供できる可能性を秘めています。
アクセシビリティへの関心をもっていただきたく、トークをしたいと思いました。

どうぞよろしくお願いいたします。

2
他イベントOK レギュラートーク(30分)

Flutterで作るAndroid TVアプリ

coffeegyunyu 日向強 coffeegyunyu

Flutterは、iOS、Android、そしてWebなど、さまざまなプラットフォームで動作するアプリを作成するためのツールとしてよく紹介されています。
何か大事なプラットフォームをお忘れではないでしょうか?
そうですね、Android TVですね。

このトークでは、FlutterでAndroid TVのアプリを開発するにはどうしたらいいのか、その手順や、開発するための勘所などをご紹介できればとおもいます。

1
レギュラートーク(30分)

Riverpodで始めるMVVMパターン

SakushinFlutter さくしん SakushinFlutter

Flutterはとても良いですが、まだまだ定番のフレームワークが決まっておらず、迷うところがありますよね。例えば、状態遷移管理です。このトークでは、状態遷移のプラグインの一つ、Riverpodについてお話しします。
Riverpodの使い方をWEBで理解しましたが、その知識だけで実装したら、Viewの中にRiverpodのソースが入り込んで、非常に見にくいソースになってしまいました。そこでどうにかならないかと、MVVMパターンを使いましたが、うまくハマりました。
Riverpodの基本から入って、MVVMパターンを使用し、ロジックと画面を切り分け、どのようにすればメンテナンスしやすい実装ができるのか実演します。

2
レギュラートーク(30分)

Flutterのテストをざっくりと見る

SakushinFlutter さくしん SakushinFlutter

Flutterは標準でテスト機能が実装されてます。ユニットテスト、ウィジェットテスト、インテグレーションテストを一通り紹介します。それに加えて、標準ではありませんが、ウィジェットテストの拡張のFlutter Golden Testsも紹介します。特に初めての方には、ロジックと画面を切り離してユニットテストする、というのが難しいですので、そこを解説します。
Flutter2.0から新しくなったインテグレーションテストや、Flutter2.5から標準になったカバレッジも含めて、Flutterのテスト周りをざっくりと知れるトークを実演を交えながらいたします。

1
他イベントOK レギュラートーク(30分)

【ライブコーディング!🚀】Flutter x Firebase + Cloud Runで、スケールするフルDart開発

ma_freud Aoki ma_freud

はじめまして。株式会社アットゲーム CTO の青木 @ma_freud です!
弊社では2年以上 Flutter + Firebaseでアプリを開発・運用しています。皆様ご存知の通り、FirebaseのほとんどのサービスはFlutter/Dartで開発ができます。しかし、Cloud Functions (for Firebase)の関数を作成する際にはJS/TSを使用しなければいけません。

そのため今回は、Functions の代わりにCloud Runを使用し、クライアントからバックエンドまで全てFlutter/Dartで開発できる環境を構築してみます! 当日はアーキテクチャ・概要の説明をざっくりし、実際にコードを書いていくので、すぐに手元で試せると思います!!

6
レギュラートーク(30分)

とある大企業の中でFlutterを活用してDX化に立ち向かっている話

KINTO_JPN KINTO_JPN KINTO_JPN

ITに疎い業界の「とある大企業」で作られていた実証実験アプリを、サービスとして本稼働すべく、いくつものグループ会社を跨ぎ始まったプロジェクト。開発を任された部門では、DX化を阻もうとするベンダーロックイン、ITに触れ合ったことのないステークホルダーとの連携など、大きなシステムリニューアルが必要の中で様々な課題に直面。
その中でPOCチームを立ち上げ、この限定される中でも出来ることをMVPとしてクイックに形にすることを通して、UXを見える化することの大切さを伝えていく活動をしています。活動の中でFlutterの導入にもチャレンジし、その際の苦労や、どのように使っているかの話になります。
導入を検討してるけど、懸念要素等が多くて周りの理解が得られないなどの、あと一歩が出ない皆さんの一助となれればと思います。
また近しい課題を抱えた方には、MVPの大切さを伝える参考事例になれたら幸甚です。

4
他イベントOK レギュラートーク(30分)

Flutterで作るUXデザイナーの期待に応えるオリジナルチャート

ymizushi ymizushi ymizushi

Flutterには様々なチャートライブラリがありますが、UXデザイナーが作成したデザインとチャートライブラリで表現出来るデザインには大きな乖離があることがあります。

また個人開発などでチャートを使用する場合にも、既存のチャートライブラリでは自分の目的に合致せず、泣く泣くチャートライブラリの仕様に合わせるといったことも多いと思います。

このトークでは CustomPaint を使い、そのような期待に応えるオリジナルチャートの作り方を例題と共に解説します。

3