Diverse developer blog

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

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やリプライをください!
まずはご一緒にご飯を食べにいきましょう!!

youbride iOSアプリをリリースするまで

こんにちは。Diverseが提供する婚活サービス「 youbride 」でフロントエンドの開発している id:yukioya-dvs です。
youbrideは、運営19年目を迎えるサービスで、PC/SP/Androidアプリ/iOSアプリの4つのプラットフォームで提供しています。

 

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

 

この歴史あるサービスの Android/iOSアプリ を、マルチプラットフォームフレームワークのFlutterで書き換えるという大掛かりなプロジェクトを発足し、この度ついにリリースすることができました!

リプレイスに関する背景や詳細については、以下をご覧ください。

developer.diverse-inc.com

 

youbrideでは先にAndroidアプリをリリースして、それから約1ヶ月遅れてiOSアプリをリリースしました。

「Flutter使ってるんだから同時リリースできたのでは?」と疑問を抱かれたかもしれません。

今回は、AndroidアプリをリリースしてからiOSアプリをリリースするまでにつまづいた1ヶ月についてお話しようと思います。

 

Crash Report

youbrideでは、Flutterが公式で出しているpluginである firebase_crashlytics を採用しました。

pub.dev

 

iOSのインストール方法に関して、 README を参考に設定しましたが、レポートが反映されません。

この問題は、歴史的背景にありました。

youbrideでは、Firebase Crashlyticsを導入する前は、Crash Report ツールに Fabric Crashlytics を採用していました。

そして2017年1月、 GoogleがFabricを買収 したのを機に、FabricとFirebaseの統合が始まりました。

youbrideのように、Fabric Crashlyticsで使用していたアプリをFirebase Crashlyticsを利用する場合、Firebase公式の 移行に関する注意点 の記載にある通り、
Fabric Crashlytics従来の設定をしなければいけませんでした。

また、FirebaseとFabricは来年の3月末を目処に統合完了予定なので、今後SDKのアップデートとともに設定方法が変わるかもしれないです

FirebaseとFabricの統合ロードマップについては、以下をご覧ください。

get.fabric.io

 

WebView

Flutterでは、WebViewを実装する際に、2018年12月、Flutter v1.0.0と同時にリリースされた webview_flutter pluginを使うことが多いと思います。

pub.dev


しかし、webview_flutter の前面にアニメーションするWidgetを表示させようとした際、高い頻度で画面が固まってしまいました。(実装当時、Flutter SDK v1.5.4-hotfix.2)

これは Flutter engine側の修正 で改善され、v1.6.7から解消されました。

 

Release Build

通常、CLIで flutter build ios --release をすると、ipaファイルが1つだけ生成されます。
Deploygateなど配信サービスなどではこれで十分なのですが、そのままApp Store Connectに上げようとすると、Appleから以下のエラーが返ってきます。 

ITMS-90426: Invalid Swift Support - The SwiftSupport folder is missing. Rebuild your app using the current public (GM) version of Xcode and resubmit it.

 

Though you are not required to fix the following issues, we wanted to make you aware of them:

 

ITMS-90191: Missing beta entitlement - Your app does not include the beta-reports-active entitlement. If you intend to distribute this build via TestFlight for beta testing, please re-build this app with an App Store Distribution provisioning profile. Do not use ad-hoc profiles.

 

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

 

つまり、CLIでのビルドだけでは App Store Connect に上げるのに必要なファイルが不足しているため、flutter build ios --release に加えて、従来通りのXcodeを使ってのアーカイブをする必要があります。

アーカイブ方法に関して、以下の公式ドキュメントをご覧ください。

flutter.dev

 

そしてさらに、注意が必要なのが、ビルドする前にcleanすること!

至って当たり前のことなのですが、これを疎かにした場合、通常通りApp Store Connectに上げることはできますが、このビルドでは正常に起動することができなくなっている場合があります。(スプラッシュから画面が遷移しなくなることがありました。)

 

なので、ビルドする前にcleanすること!(大事なことなので二回言いました)

 

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

iOS13対応

今月リリースされたiOS13で、テキスト入力できるWidget上でキーボードを表示させようとするとcrashする 不具合 が発生しました。

こちらは、Flutter SDK v1.9.0 で解消されました。

 


 

いかがだったでしょうか。こうした不具合に対応していたためiOS版のリリースは1ヶ月程遅れてのリリースになってしまいましたが、Flutterに限らず開発時にやってみて初めて気づく落とし穴にハマることは多々あると思いますが、
今回の事例が一人でも多くの方の参考になれば幸いです。
Flutterの開発はとても活発で、今月にはStable channelにv1.9.1+hotfix.2がリリースされました。
既にFlutter開発されてる方も、これからFlutter開発してみようかなという人も、ぜひ最新の安定板で開発しましょう!
We are hiring! \(^o^)/

iOSDC Japan 2019 に登壇 & Diverseのスポンサーブースを出展してきました!

こんにちは、暑さが落ち着いてきたので銭湯通いと回数券の購入を再開した @imaizume です。

さて既に弊社のTwitterや公式サイトでもお知らせして来ましたが、今月5日から7日に行われたiOSDC Japan 2019にてDiverseはブーススポンサーとして参加し、また私が最終日に30分枠のトークで登壇して参りました!!

iOSDC Japan とは??

iosdc.jp

iOSDC Japanは日本最大級のiOSエンジニア向け技術イベントです。今年は1000人以上が来場し、弊社を含め約20社の企業ブースが展開されるという、まさにiOSエンジニアにとっての「文化祭」的な3日間!

iOS関連技術にまつわるトークをメインコンテンツとして、他にも企業ブースの出展やおしゃれなランチ、さらにはiOSDCチャレンジといった様々な企画が楽しめるイベントとなっています。

今回は登壇とブース出展の2つの側面からの参加レポートになります!

Diverse社員 @imaizume の登壇

f:id:incheon-special:20190913172526j:plain

@imaizume の登壇時の様子

2日目 10:30からの30分枠に、PoiboyのiOSエンジニアである私 @imaizume が登壇しました。

「スナップショットテスト実戦投入」というタイトルで発表していますが、その名の通りPoiboyにスナップショットテストを導入する際に得たノウハウをお話させていただきました。

詳しくは公開している資料をご覧いただきたいのですが、スナップショットテストとはアプリのスクリーンショットを自動撮影して表示崩れを自動検知する仕組みのことです。

弊社の @kikuchy過去にLTでも発表しているように、Poiboyをはじめとしたマッチングサービスのアプリは管理すべき内部状態が多く管理が大変という背景があります。

そのため表示確認のための状態再現が大変だったりアーカイブして配信するのに時間がかかることから、表示状態再現とデグレ検知作業を自動化したいという思いがありスナップショットテストの導入を決めました。

トークを応募したのも、Poiboyと同様に表示確認作業で困っている方は多いのではないかと思い、より多くの方にスナップショットテストをQAに活用してほしいと思ったからでした。

実際にセッション中にもアンケートしてみたところ8割以上の方が表示確認作業で苦労した経験があると答えており、多くの方が表示確認の自動化に関心をお持ちなのだということがわかりました。

またスナップショットテストがUIテストではなく単体テスト上で動くことをご存じない方も少なくないようで、UIテストと比べて壊れにくかったり早く動作したりする点、導入障壁が比較的低い点などをお伝えできたのが良かったなと個人的に思いました。

f:id:incheon-special:20190917115036j:plain

セッション後のAsk the Speakerにもたくさんの方がお越しくださいました

twitterやAsk the Speaker、懇親会などでも「自分のプロダクトにもスナップショットテストを導入したい」「スナップショットは便利だと思った」「もっと詳しく知りたい」というお声をいただくことができたので、発表者としては大変うれしい限りでした。

今年のセッションには本トークをはじめとしてiOSのテストに関するセッションがいくつか出ていましたので、テストの導入のきっかけとなれば幸いです。

スポンサーブースの出展

f:id:incheon-special:20190917121906j:plain

Diverseブースにもたくさんの方がご来場下さいました!

今回の会期中に、Diverseはイベントブースを出していました!

実はiOS関連のイベントでは初めてのブース出展!!

来場されたみなさんがトークの合間に楽しんでいただけるよう、ブースでのコンテンツを社員みんなで考えました。

そして決まったのがずばり「YYC Twitter広告どれが一番バズったでしょうクイズ」と「モテるマッチングアプリのプロフィール写真当てクイズ」!!

日ごとに内容を変えてクイズボードを設置して来場者に回答してもらう参加型コンテンツにしました。

1日目:「YYC Twitter広告どれが一番バズったでしょうクイズ」

実際にTwitterで掲載されたYYCの広告3種類を題材に、最もいいねがついたものを当ててもらうという企画。

実はこれ、もともと社内の全体定例会向けにマーケティングチームが作成したもので、外部でもやってみたら面白いのでは?? という社員の提案から実施に至りました。

答えですが、他の選択肢がすべて500いいね程度だったのに対して、3つの中で一番左にある広告がなんと5000いいねを稼ぎ出しているのです!!

回答されたみなさんも「自分ならこれかな...」というように悩んで投票してくださっていましたが、やはり実際の掲載結果に近い形で票が分かれる結果となりました(笑)

弊社ではマーケティングをインハウスで行っており日々様々な取り組みを行っていますので、こうしたノウハウが日々の広告運用にも生かされております。

2日目: 「モテるマッチングアプリのプロフィール写真当てクイズ」

やはりDiverseはマッチングアプリの会社なので、社員のマッチングサービスに対するリテラシーも高いわけです。

マッチングアプリを使ったことがある方もない方も、どんなプロフィールにするとマッチしやすくなるかは気になっている方も多いはず...

そこで今回は写真の撮り方に着目し4択のクイズ形式にしてみました。

アプリの種類に限らず、やはり顔が鮮明に映るのはもちろんのこと、近すぎたり遠すぎたりしない程度に上半身や

また複数枚の写真が登録できるサービスであれば、必ず違う写真(もちろん笑顔で!)を載せておきましょう、これだけでマッチング率はぐっと上がりますよ!

今回のクイズだけではこうしたノウハウをとてもお伝えしきれないので、気になる方はぜひ今後のイベントでも弊社社員に話しかけてみてください!!

なおスライド作成用のデモ画像やブースマッチングアプリの使用状況をお聞きしたり、コンテンツの題材として私の写真が多用されていて個人的にはちょっと恥ずかしかったです(笑)

その他ブース運営にて

f:id:incheon-special:20190913172608j:plain

マッチングサービスの利用や認知の広まりを実感するイベントでした

上記に加えて追加の企画としてマッチングアプリの使用状況をアンケートしたところ、男女問わず多くの方に「マッチングアプリを使ったことがある」とご回答いただきました (中にはマッチングサービスで結婚されたという方も!!)

Diverseはもちろん、マッチングサービス業界的にもこの流れは大変嬉しい結果ですね。

また技術面では、今年6月のflutterでのyoubrideクライアント全面リニューアルを紹介し、多くの方が興味を持ってくださいました。

導入で苦労した点や対処法などをご質問いただき、改めてflutterリニューアルの影響を実感させていただだきました。

developer.diverse-inc.com

2日間を通して、大きな事故もなく無事にブース運営を終え、皆様に楽しみながらDiverseやマッチングサービスのことを知っていただけたようだったので、Diverseとは嬉しい限りです (DroidKaigi 2019で起きた誤発注のような事態は今回は起こりませんでした(汗))

 

DroidKaigi、iOSDCと大規模イベントへの協賛を行ってきたDiverseですが、これからもこうした技術イベント・コミュニティへの貢献を続けて参ります。

また登壇を始めとしたアウトプットに対しても会社として支援をしていきますので、ぜひ今後もDiverseにもご注目いただければと思います。

もちろん一緒に働く仲間も大大大絶賛募集中ですよ!!

f:id:incheon-special:20190913172651j:plain

ぜひDiverseで一緒にマッチングの未来を作りませんか??