Diverse developer blog

株式会社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やリプライをください!

YouTube 公式チャンネル開設と Flutter トーク動画公開

はじめまして。Diverse のモバイルアプリ開発者のへぶん( id:heavenOSK )です。


このたび、技術的な発信を動画で行っていくために、弊社で YouTube の公式チャンネルを開設しました!🎉

www.youtube.com diverse-inc.co.jp


第1回として @kikuchy さんと私で、Flutter に関するトークをする動画をアップロードしています。

youtu.be

今回の動画では…

  • Flutter を採用した経緯
  • プロダクトの技術スタック
  • どのように Flutter を使っているか …など

現場のエンジニア2人ならではのトークをしています!

実際に Flutter を取り入れている開発について踏み込んで話していますので、ご興味ある方ぜひご覧ください。

動画の公開後、記事でご紹介いただいたり、ご感想をいただきました。弊社として新たな取り組みなので、反響をいただけて有難いです。

medium.com


株式会社Diverse は、技術発信の一環として YouTube での動画配信も行っていきます。

動画を見て Flutter で開発してみたい、弊社で働きたいと思ってくださった方は、ぜひ @kikuchy@heavenOSK または他の弊社エンジニアに、DMやリプライをください!

GDG Tokyo 2020 x Flutter Meetup Tokyo イベントでFlutterのAdd-to-Appについて

id:kikuchy です。新型コロナウィルスによって社会情勢が大きく変化しつつある中、いかがお過ごしでしょうか。
各種技術系イベントが開催場所をオンラインに移していく中、先日、GDG TokyoとFlutter Meetup Tokyoのコラボイベントが開催されました。

gdg-tokyo.connpass.com

当日のアーカイブはこちらからご覧いただけます。


www.youtube.com





当日はFlutterのAdd-to-appという機能についてお話させていただきました。

docs.google.com

「Flutterを既存のiOS/Androidアプリに導入する」というものです。
この機能は弊社のプロダクトでも使用されています。

FlutterはアプリケーションをDartで記述することになるため、既存のソースコードの使いまわしが妨げられてしまいます。
そのため、ソースコードのフルリプレイスができるタイミングでのFlutter採用を検討する方が多いのではないでしょうか。

しかし、フルリプレイスを行えるタイミングはそうそうあるものではありません。
弊社のyoubrideは本当にタイミングが良かったのです!

「既にあるコードベースを使いつつ、Flutterの開発体験の良さやクロスプラットフォームの利点を享受したい…」
そんなわがままを叶えてくれるのがAdd-to-Appです。

導入の仕方から、既存コードベースとの連携方法、実際に使ってコケた箇所の回避方法などを説明させていただきました。

発表後にタイムラインを覗かせていただきましたが、かなりの方がご興味を示してくださったようでした。




実はkikuchy自身初のオンラインでのトークでした。
初めてということで至らぬ点も多かったでした…ご容赦ください。
次回からは機材トラブルを起こさないように気をつけます。
(原因はわかっているので対策します)

また、オンラインイベントですと、普段の登壇とは異なる点が多々あります。

  • 視聴者の皆様の反応がわからない
    • 配信者用のバックヤード、スライドに加えて、Twitterのタイムラインまで見る必要がある
    • 当日はタイムラインまでは追えなかったでした…
    • もし追えていても、自分が喋ってからyoutubeに配信されるまで数秒〜数十秒のラグがあるので、コメントを頂いても素早く反応できない歯がゆさはあっただろうなぁ…
  • 懇親会がない
    • 普段は自分のタイムラインには流れてこないような情報を入手したり刺激を得る場が無い…

もちろん、主催側としても会場を心配する必要もないですし会場に入れられる人数を気にする必要もありません。参加される方も足を運ぶ必要がないなど、利点もいっぱいあります。
が、個人的にはやはり物理的に集まって、直接お話できる機会がまたいつかあると良いなと思っています。



FlutterやAdd-to-Appを使ったお仕事をしてみたい方は @kikuchy または他の弊社エンジニアへ、お気軽にDMやリプライをください!
お話しましょう!!