Diverse developer blog

株式会社Diverse(ダイバース) 開発者ブログです。

【後編】イベント『Flutter開発者必見!あの有名ライブラリの内部実装を解説』を公開します【Meetup #2】

こんにちは!Diverse広報担当です!

先日、Diverse Meetup #2となる『Flutter開発者必見!あの有名ライブラリの内部実装を解説』を開催いたしました。 本ブログではイベントの様子をお伝えしております。 f:id:diverse-tech:20210511121408j:plain

今回は、前編・中編に続いて、いよいよラストの「コードリーディング」の内容をお届けいたします!

【前編】「事前知識の確認」と【中編】「widgetとElementの関係〜providerの登場人物」をまだご覧になっていない方はまずこちらをご覧ください。

developer.diverse-inc.com

developer.diverse-inc.com



▼目次

  • 当日の資料と動画を公開中!
  • 続・イベントルポ大公開【後編】
    • ▼一緒にコードリーディングをやってみよう!(00:10)
    • ▼ChangeNotifierProviderのライフサイクルを追ってみよう!(02:48)
  • さいごに
    • ▼Diverseの情報発信について


続きを読む

【中編】イベント『Flutter開発者必見!あの有名ライブラリの内部実装を解説』を公開します【Meetup #2】

こんにちは!Diverse広報担当です!

先日、Diverse Meetup #2となる『Flutter開発者必見!あの有名ライブラリの内部実装を解説』を開催いたしました。 本ブログではイベントの様子をお伝えしております。

f:id:diverse-tech:20210322093104j:plain

今回は、前編の「事前知識の確認」に続いて、中編の「widgetとElementの関係〜providerの登場人物」の内容をお届けいたします。

【前編】の「事前知識の確認」をまだご覧になっていない方はまずこちらをご覧ください。

developer.diverse-inc.com



▼目次

  • 当日の資料と動画を公開中!
  • 続・イベントルポ大公開【中編】
    • ▼Flutterが管理する3つのツリーとは?(00:00)
    • ▼Elementのライフサイクルについて(03:55)
    • ▼Providerの登場人物(05:20)
  • さいごに
    • ▼次回イベント予告
    • ▼Diverseの情報発信について


続きを読む

【前編】イベント『Flutter開発者必見!あの有名ライブラリの内部実装を解説』の資料×動画を公開します【Meetup #2】

こんにちは!Diverse広報担当です。

先日、Diverse Meetup #2となる『Flutter開発者必見!あの有名ライブラリの内部実装を解説』を開催しました!

f:id:diverse-tech:20210304114916j:plain

diverse.connpass.com

Diverseのリードエンジニアとして活躍する菊池 紘さんがご登壇。
Providerとはそもそも何かという基本の解説から、MultiProviderが何をしているのかコードリーディングしたり、予定の1時間をオーバーするほどの熱気でお話いただきました。

今回は、そんなイベントの様子を前編・中編・後編に分けてお伝えしたいと思います。
まずは前編、事前知識の確認の部分からどうぞ!

▼目次

  • 当日の資料と動画を公開します
  • イベントルポを大公開します
    • ▼Providerとは?(00:00)
    • ▼InheritedWidgetのキホン(03:43)
    • ▼InheritedWidgetを使う(06:36)
  • さいごに
    • ▼次回イベント予告
    • ▼Diverseの情報発信について


続きを読む

【後編】イベント『Cloud Functionsについて開発担当が徹底解説』の資料×動画を公開します【Diverse Meetup #1】

こんにちは!Diverse広報担当です。

先日、Diverse Meetup #1となる『Cloud Functionsを開発担当が徹底解説!』の前半の模様を公開しました!

developer.diverse-inc.com

マッチングアプリHOPの開発に携わる村本 章憲さんがご登壇。Cloud Functionとは何かという基本的内容から、参加者からの高度な質問への回答まで、たっぷり1時間かけてお話いただきました。

こちらの記事では、そんなイベントの後半の模様、主に質疑応答パートを余すところなくお伝えします!

続きを読む

【前編】イベント『Cloud Functionsについて開発担当が徹底解説』の資料×動画を公開します【Diverse Meetup #1】

こんにちは!Diverse広報担当です。

先日、Diverse Meetup #1となる『Cloud Functionsを開発担当が徹底解説!』を開催しました!

f:id:diverse-tech:20210208141654p:plain

diverse.connpass.com

マッチングアプリHOPの開発に携わる村本章憲さんがご登壇。Cloud Functionとは何かという基本的内容から、参加者からの高度な質問への回答まで、たっぷり1時間かけてお話いただきました。

(開発の合間にご登壇頂いたので相当お疲れだったようです...お忙しいなか有難うございました!)


参加者からも好評の声を頂きました

ちなみに本題に入る前に、今回イベントに参加いただいた方から嬉しいコメントを頂いているので、ご紹介したいと思います。

Diverse Meetupは第二回、第三回と続ける予定ですので、今回参加できなかった方も、次回ふるってご応募くださいませ!ちなみに第二回は現在募集を開始しています(2021/02/17開催予定) diverse.connpass.com

それでは、ここからはイベントの前半の模様、主にクラウドファンクションの基礎理解を余すところなくお伝えします!

続きを読む

ワイワイライブ、リリース!

こんにちは。Flutterエンジニアの id:yukioya-dvs です。 この度、YYC アプリ内ライブ配信コンテンツとしてワイワイライブをリリースしました!

f:id:yukioya-dvs:20210112105350p:plain

これまでのメッセージでのコミュニケーションではなく、ライブ配信しているユーザーとオンライン上でやりとりができるコンテンツになります。

※iOS/Androidのみ対応、Webサービスでは非対応

ワイワイライブの中身について

今回、ワイワイライブは既存のアプリ YYC の1つの機能として実装しました。 YYC アプリは、今まで Android/iOS 共にフルネイティブで開発を進めてきましたが、今回のワイワイライブではFlutterの Add-to-app を利用して開発しました。

f:id:yukioya-dvs:20201127182829p:plain

工夫した・つまづいたところ

Git

既存のAndroid/iOSのgit リポジトリが存在してましたが、それとは別に Flutterのコードを新規でリポジトリを作成し、git の submodule として Android/iOSに追加する形で、3つのリポジトリで運用するようにしました。

しかし、このまま作業していくと Android/iOS側のリポジトリ側に差分が発生して、毎回コミットする必要が出てきてしまいます。 実に面倒です。

そこで今回 Flutter側のコードを変更しても、Android/iOS側のリポジトリ側には手を加えず Bitrise上でのみ Flutter リポジトリのHEADを参照するようにしました。

CI(Bitrise)

弊社では CIにBitrise を使用しており、そこでつまづいた2点についてお話します。

1. Androidでreleaseビルドができない

Invalid argument(s): Cannot find executable for /root/flutter-sdk/flutter/bin/cache/artifacts/engine/android-arm-release/linux-x64/gen_snapshot.

今までdebug ビルドはできてたのにreleaseになると、上記のエラーがでてビルドできなくなってしまいました。

Flutter Install Stepをそのまま使うと、 /root/flutter-sdk/flutter/bin/cache/artifacts/engine 配下には commonlinux-x64 しかありません。

そこで、みんな大好き $ flutter doctor を実行するとあら不思議。

# /root/flutter-sdk/flutter/bin/flutter doctor
Downloading android-arm-profile/linux-x64 tools...                  1.7s
Downloading android-arm-release/linux-x64 tools...                  0.8s
Downloading android-arm64-profile/linux-x64 tools...                0.8s
Downloading android-arm64-release/linux-x64 tools...                0.4s
Downloading android-x64-profile/linux-x64 tools...                  0.4s
Downloading android-x64-release/linux-x64 tools...                  0.4s
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel unknown, 1.22.1, on Linux, locale en_US.UTF-8)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.0)
[!] Android Studio (not installed)
[!] Connected device
    ! No devices available
! Doctor found issues in 2 categories.

なんていうことでしょう。Androidに必要なtoolsがいっぱいdownloadしてくれるではないですか!

Flutter Install Stepで以下の設定がデフォルトでfalseですが、trueにしておきましょう。

f:id:yukioya-dvs:20201105192333p:plain

2. iOSでビルドできない

上だと、 .ios/Flutter/engine/Flutter.framework が存在しません。 そこで、Android/iOS側より前にFlutter 側のコードをビルドすることで上記のFrameworkが生成されます。

$ flutter build ios --no-codesiging

なんていうことでしょう。

最後に

いかがでしたでしょうか。 debugビルドだと何事もなく動いてたのに、releaseビルドになるとなにかしら問題が発生しやすいですね 😇 同じ問題に当たって困ってる一助になれば幸いです。

また、Flutterを導入する上でバイナリサイズがどれくらい増えるかについて公式FAQにありますが、

今回ワイワイライブをAdd-to-appで実装した結果、最終的にiOSは+5MB、Androidは+9MB近く増えました。 なかなかの量ですが、今後はこの資産を生かして、既存コードをFlutterに置き換えてスリムにしていこうと思います!

ワイワイライブも気になった方は、是非触ってみてください! We are hiring! \(^o^)/

PORT Firebase x Flutterを開催しました

id:kikuchy です。新型コロナウィルスが猛威を振るう中、様々なコミュニティが継続の方法を模索していますね。

先月、昨年12月にStampさんのイベント PORT Firebase × Flutter を弊社Diverseオフィスで開催 & heavenOSK、kikuchyが登壇いたしました。

diverse.connpass.com

何回かStampさんと一緒にイベントを開催させていただいておりますが、今回が初のオンラインイベントとなりました。 今回はFirebaseとFlutterの組み合わせに関して、知見を公開しました。 実はこの組み合わせは二回目です。

ちなみに前回はFirebase x Android

developer.diverse-inc.com

その前はFirebase x Flutterでした。

developer.diverse-inc.com

また、今回のイベントはその模様をYoutubeで公開しております。 登壇者のコメントを見て気になった方はぜひこちらも御覧ください。チャンネル登録もお願いします!

www.youtube.com


へぶんは 「Flutter x Firebase アーキテクチャ」についてお話させていただきました。

speakerdeck.com

Flutter に Cloud Firestore を組み込む設計について、私たちのプロダクトの事例を交えてご紹介させていただきました。

以下の内容です。

  • provider パッケージを使用したアーキテクチャの紹介
  • Firestore のキャッシュ戦略
  • Snapshot を使用した単一方向のデータフロー

興味を持たれた方は、ぜひスライド・動画をご視聴ください。

当日、沢山の反響を頂き誠にありがとうございました。


kikuchyはFlutterでもFirebase Analyticsを活用しようというお話をさせていただきました。

FlutterでもFirebase Analyticsで画面遷移を記録できるよ、ということと、(あんまりFlutterと関係ないですが)記録しているイベントの管理はしっかりやった方がいいよ、ということをメインにお話させていただきました。

反響もいただきまして嬉しい限りです。

しかしイベントの管理はなかなか難しくて、大部分は私がいるチームでも発生した問題を元に気をつけたほうが良い点を説明していますが、解決には至っていないものも多く・・・ 解決したらば、また別の機会で解決のために行った施策などをお話できればいいなと思っています。


イベントではStampさんの@1amageekさんにも、様々な仕様を具体的に実装に落とし込む際のFirestoreのモデル設計の実例を紹介していただきました。

詳しい内容は上記のYoutube動画を御覧ください!


Diverseは自社のサービスの殆どでFlutterを使用しているという、Flutterに注力している会社でもあります。 Flutterアプリケーション開発の中で獲得した知見を公開していくことで、Flutterを使っている皆様の助けになれればと思います。

FirebaseとFlutterを使ってマッチングアプリの開発をしてみたい方は @heavenOSK@kikuchy または他の弊社エンジニアへ、お気軽にDMやリプライをください!