Diverse developer blog

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

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

こんにちは。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やリプライをください!
お話しましょう!!

Looker User Meetup in Tokyo #3でDiverseでのLooker活用事例をお話ししました

こんにちは。Diverseではたらいてる @m_kumanomi です。
【Looker ユーザー限定】Looker User Meetup in Tokyo #3で登壇させていただきました。

Lookerとは?
https://looker.com/
次世代BIツール、データプラットフォームと注目されています

今回のMeetup#3は60人ほどのユーザーさんがいらっしゃっていて、回を増すごとに参加人数が増えていってるのが実感できました。

発表一覧

No. 名前 登壇内容
1 熊埜御堂 将隆(株式会社 Diverse) 恋愛・婚活マッチングサービスを営むDiverseのマーケティングチームでのLooker活用事例みたいなものをお話しします
2 下地 勇貴 (株式会社 SmartHR) https://note.com/bunnyboy/n/n64fae4909e40 についてもう少し詳しく話します(予定)
3 遠藤 司 (株式会社 ZOZO テクノロジーズ) 「データガバナンスツールとしてのLooker」ZOZOテクノロジーズにおけるLooker導入事例とLooker運用時に意識するべきポイントを発表させていただきます。
4 永井 伸弥 (株式会社 メルカリ) 「事例を通じて紹介するLookerによるダッシュボード構築の実際」メルカリ社内で、A/Bテスト結果の可視化を行うダッシュボードの構築を行った事例を通じて、Lookerの機能の具体的な使用例や細かいTipsを紹介します。

発表内容

発表内容はDiverseでのマーケティングチーム、YYC、Youbride、Poiboyという事業での活用事例をお話しさせていただきました。
弊社とSmartHRさんはサービス寄りでZOZOテクノロジーズさんとメルカリさんが技術寄りだったのでバランスが良かったのではないかと思います。
会場にいらっしゃった方はエンジニアの方や営業、マーケターの方だったり様々で色んな職種の方がLookerを活用しようとしているんだなぁと感じました。
発表を聞いてくださった方、懇親会等でお話しさせていただいた方々ありがとうございました!

資料はこちらです。

www.slideshare.net

おまけ

弊社でLookerを導入してどうなったのかはこちらもご覧いただけると嬉しいです。 qiita.com

qiita.com

PORT Firebase x Androidを開催しました

id:kikuchy です。

しばらく前になってしまいますが、去る8月に開催されたStampさんのイベント PORT Firebase × Android を弊社Diverseオフィスで開催 & giiiita_7kikuchyが登壇いたしました。

stamp.connpass.com


PORTは主にFirebase関連の勉強会を企画されているイベントプロジェクトで、過去にも様々な企業やテクノロジとのコラボ回を実施されています。
今回はFirebaseとAndroidの組み合わせ、というテーマでした。

ちなみに前回はFirebase x Flutterがテーマでした。
developer.diverse-inc.com




giiiitaはFirebase/Analyticsについてお話させていただきました。

Firebaseが提供するサービスは"開発","品質","成長"と大きく3つに分類されます。
FirestoreやCloud Functionsといった"開発"に分類される機能に関心が多く集まる気はしてるのですが"成長"に分類されるAnalyticsを使うとこんなことができるよ!という発表をさせていただきました。

個人的にはAudience機能がとても良いと思っておりまして、
例えばマッチングしているけどメッセージを送ってないUserに対して何かアクション(Push通知やA/Bテスト)を行いたい場合はこのAudience機能を使用することで実現できたりします。


Audienceについて導入を検討してくださってそうで何よりです!
導入事例が増えたことで知見が増え共有されていくことを願います!


スライド内容もこちらのブログに含まれておりますが、
以下Qiitaの記事も添えておきますのでご覧になっていただけると幸いです。
qiita.com


kikuchyはFirebase FirestoreとKotlin Coroutine Flowの組み合わせについてお話させていただきました。

発表中ではデータ(Repository)層をきれいに分離しておくことの重要性と、層の境界でFlowを使用するとFirestoreのようなデータの変更が落ちてくるような場合にも対応できること、Android Architectire ComponentsのViewModelと合わせた使い方についてお話しました。

実プロダクトを開発する際には、たくさんの人が一つのプロダクトに関わることになります。
その際にコードが扱いやすくなるようにすることが重要になり、そのためにも設計原則に沿ったコードを書く必要があります。
また、長期間運用されるプロダクトは、途中で何が起きるかわかりませんから、依存している外部のプロダクトについては必要とあれば切り離せるようにしておく必要があります。
その点が伝われば幸いです。


イベントではStampさんの@1amageekさんにも、Androidアプリ商戦の主戦場となっている中国市場について、その市場の規模と戦い方の案、そこでFirebaseを活かす方法についてお話いただきました。


なかなか中国市場に手を出すのはむつかしいかと思いますが、日本とは人口が桁違いですから、進出できれば大きな商機を掴むことができそうです。

FirebaseとAndroidの組み合わせも面白いかと思います。
ぜひ試してみてはいかがでしょうか。


Firebaseを使ってマッチングアプリの開発をしてみたい方は @giiiita_7@kikuchy または他の弊社エンジニアへ、お気軽にDMやリプライをください!
まずはご一緒にご飯を食べにいきましょう!!

リジェクトされていないにも関わらずKotlin Fest Reject Conference 2019で発表してきました

今年のKotlin Festは最初から一般参加を決め込んでいました id:kikuchy です。
Kotlin FestからCfPが出ている時期はFlutterばかり触っていたので、Kotlinについてはむしろキャッチアップが追いついていないレベルでした。

ですが、ひょんなことからKotlin Festのその会場でReject Conferenceの方で発表することが決まってしまいまして、登壇させていただくことと相成りました。

dena.connpass.com

Kotlin Fest Reject Conferenceは、主にKotlin Festに惜しくも採択されなかった発表を集め、みんなで楽しむイベントです。
Kotlin Fest非公式のイベントですが、主に渋谷近郊のエンジニアを中心に、多くの人が集まる活気あるイベントとなっておりました。

発表内容

Kotlin 1.3.50現在では実験的な機能として提供されている inline classes という機能の概要とユースケースについてお話させていただきました。

inline classeは、スライドにもある通り、プリミティブな型で表現できる値に何か特別な意味があるということを型レベルで表現しつつ、実行時に新しい型でラップするコストを省くことができる、というものです。
ユースケースによっては大いに活用できる機能ではないかと思います。

Kotlin Fest 2019の方では話題に上がらなかった機能だったので取り上げてみた次第です。
inline classes の認知を拡大できたようで良かったです。

会の様子

全体的な様子は主催のDeNAさんがまとめられています。

engineer.dena.jp


どの発表も面白かったですが、こちらの画像がKotlinの良いところを表現していて良いなと思いました。

Kotlinは(Javaと比較して)コードレベルでの抽象化が容易になる文法と言語機能を備えている言語なので、
「Kotlinらしいコード」を書けるようになると読みやすいコードが出来上がる、という特徴があります。
さらにKotlinの利用者が増えて、読みやすいコードが増えてゆくと良いですね。


個人的には(非公式イベントだけれどなぜか)公式の運営メンバーがたくさんいる会場だったので、Kotlin Festを始めとするカンファレンスの運営の学びになることや楽しいエピソードなどを聞かせていただいたのが印象深かったです。
今回はネットワークスタッフとして活躍されたAndroidエンジニアの方のお話を聞いて、私も何か未経験の分野に挑戦してみようかな、と考えられるようになりました。


Kotlinでマッチングアプリの開発をしてみたい方は @kikuchy または他の弊社エンジニアへ、お気軽にDMやリプライをください!
まずはご一緒にご飯を食べにいきましょう!!