こんにちは。MTCアプリチームです。
この記事では2018/10/04に行われたMercari Tech Conference (MTC)向けに作ったカンファレンスアプリについて書きます。
以前公開したWebの裏側 に引き続きアプリの裏側を紹介します。
ソースコードはオープンソースで公開されています。
iOSアプリ
Androidアプリ
play.google.com
- チーム構成
- なぜFlutterか（rkowase）
- カンファレンスアプリの仕様（natpenguin）
- Flutterでの実装ポイント (masamichi)
- mtc-appはすべてtadashiが自動化する (tadashi)
- デザインからのFlutterアプリ(swaaan)
- おわりに（rkowase）
チーム構成
開発メンバー
- @rkowase appチームリーダー兼雑用担当
- @natpenguin リリース兼雑用サポート担当
- @masamichi 実装担当
- @tadashi 自動化担当
- @mochico Androidリリース担当
- @swaaan デザイン担当
- @tim.oliver 遊撃担当
社内Contributor
- @adwd118 GraphQL担当
サポーター
- @kiko 総監督兼盛り上げ担当
-
@jollyjoestor PM兼乾杯担当
このメンバーで業務としてカンファレンスアプリの開発に取り組みました！
開発期間2ヶ月くらいでしたが皆業務の片手間だったので工数としては1人で1週間くらいでした。
なぜFlutterか（rkowase）
カンファレンスアプリという特性上、カンファレンス当日までに用意する必要があります。
また、来場者のモバイル端末の利用率を考えるとiOS/Androidに対応必要です。
また、サブプロジェクトの位置づけなので少ない工数でいかにiOS/Android対応のアプリを期限内にリリースするかと考えたときにそれぞれNativeで実装する余裕はなさそうという判断になり、色々なマルチプラットフォームを5秒くらい検討した結果、Flutterを採用することに決めました。
Flutterでカンファレンスアプリの事例ですと DroidKaigi 2018でkonifarさんが作ったアプリ が有名で、iOSでも大きな違和感なく使えることが分かっていたのも決め手でした。
カンファレンスアプリの仕様（natpenguin）
カンファレンスで使われるということで、色々な仕様を5秒くらい検討した結果、以下の機能を盛り込むこととなりました。
- セッションの情報が確認できるタイムテーブル
- ブースの情報が確認できるページ
- Mercari Tech Conf 2018の説明ページ
もう少し掘り下げていきましょう。
まずはセッションの情報が確認できるタイムテーブルです。
この画面ではセッション時間、タイトル、内容、カテゴリタグ、スピーカーの情報が並んでいます。
ここからセッションの詳細情報を表示する画面、スピーカーの詳細情報を表示することができます。
また、カテゴリタグをタップしていただくと、カテゴリ別にまとめられたセッションを確認することができます。
当日に盛り込むことは叶いませんでしたが、
- スクロール位置の保存
- 現在時刻に応じたスクロール位置の調整
- お気に入りのセッションを保存できる機能
- Webと連携し、アプリとWebでのシームレスな体験
などに関しては盛り込んでいきたかったです。
続きましてブースの情報。この度のカンファレンスではブースも数多く展示しており、多くの方々にお越しいただきたいという思いがありました。
まず画面上には、どんなブースがあるのかを一覧で確認できます。
そこから詳細へ飛び、詳しい内容と場所を確認することができます。
また、FABを設置したことにより、情報へのアクセスが10倍くらい良くなったように感じています。
そして、About画面。その名の通り「このカンファレンスとは何か？」を表す画面ですね。
この画面、上からカンファレンスについて、アクセス、ライセンス画面と続きます。
後ほど出てきますがインラインマップを使ったり、動画を使ってわかりやすくしたりともっともっと実現したいことがありました。
画面とは別ですが、Push通知について。
アプリにおいてPush通知が重要な要素であることは言うまでもないと思います。（当日も大活躍しました
また、チームの頑張りもあり短期間でPush通知から特定の画面へ遷移する機能も実装できました。
本当は特定の隠し画面のようなものを作って楽しい思いをしていただきたかったのですが、今回はそれはできませんでした。
アプリ仕様からは以上です。
Flutterでの実装ポイント (masamichi)
こんにちは。MTCアプリチームのmasamichiです。MTCアプリ実装のポイントについて書きます。
今回アプリのデザインはiOS, Android共にマテリアルデザインだったため、Flutterのマルチプラットフォームの特性を活かすことができました。プラットフォームごとにコードを分岐している部分はなく、全て同じソースコードで動作しています。iOSはiOSネイティブのデザインで、となると多少の分岐が必要だと思うので、Flutterの良さを活かすならできるだけマテリアルデザインに寄せてUIを作っていくといいと思います。
Flutterにはマテリアルデザイン用のテンプレート(Scaffold)が用意されているため、マテリアルデザインに沿ったUIを簡単に作ることができます。
Flutterの特徴として、ウィジェットを組み合わせてUIを作っていく、という点とホットリロードですぐにUIの更新を確認できるという点があります。この特徴は確かに強力で、今回のように開発時間が限られた中でもUIを素早く確認しながら高い生産性で開発することができました。
またGoogleが開発元ということで、Firebaseとの連携がなめらかでした。今回当日のお知らせ用にプッシュ通知を実装する必要がありましたが、Firebase Cloud Messagingのパッケージをインポートし、数行書くだけで実装することができました。
一方でマップのインライン表示(iOSのMKMapViewに相当するウィジェット)ができなかったり、iOS12の実機でデフォルトの日本語フォントが明朝体になってしまうバグがあるなど、困った部分も少しあります。
私は今回Flutterを初めて使いました。
Flutterの存在は知っていましたが、最初はReactNativeやXamarinのようなマルチプラットフォーム開発用フレームワークがまた増えたかと思っていましたが、使ってみるとやはりマテリアルデザインで作りやすい分、今回のようなデザインのアプリでは効率よく作れると感じました。
また、Dartは静的型付けや、async/awaitがサポートされていたりと、書き心地としてはC#やtypescriptなどと似ていてすんなり取り掛かることができました。
特にMTCアプリくらいの規模感のアプリにはマルチプラットフォーム向けに開発できるFlutterの用途としてぴったりだと感じています。まだFlutterを使ったことがない方もぜひ取り組んでみてください。
MTCアプリでは、画面遷移、API連携、メモリキャッシュ、カスタムテーマなど、Flutterでアプリを作るための基本的な構成となっているので、これからFlutterを始める方のサンプルとして参考にしてもらえるとうれしいです。
mtc-appはすべてtadashiが自動化する (tadashi)
こんにちは、メルカリの自動化＆品質保証グループ（Automation & QA Group：通称AQA）で、自動化をぶりぶりしているtadashiです。
私は主にmtc-appのCI / CD(Continuous Integration / Continuous Delivery)担当をしました。
まず、CI部分ですが、flutter testだけを用いたシンプルなCIを構築しました。
初めはCircleCIを用いてcirrus/flutterコンテナ上で実行していました。
CD部分に関して、CircleCI上でiOS / Androidをビルド・DeployGateやiTunes Connect・Play Storeまでデプロイできるようにしようと考えていました。
しかし、両OSを1configファイルで書くのががなかなか難しく、全てできなかったのが悔しかったです。
現在だと、BitriseがOSS用の無料プランを用意しており、かつBitriseを利用してFlutterアプリを iOS / Androidにビルド・デプロイする情報も増えてきているので幾分楽に構築できそうです。
来年こそは全自動化できるように頑張るぞー、やっていき！
デザインからのFlutterアプリ(swaaan)
デザインの観点では、今回のアプリは下記の点について注力し作成しました。
- 開発、デバック工数が少ないこと
- 変化に強いレイアウトであること
- 引き立て役であること
まず、カンファレンスアプリの特徴は何と言っても短命であることです。
また当日のみ使う特性上、いわゆる長期の運用アプリと違って当日何か不具合があった場合、ネイティブ実装であるため「修正」ができません。これはイベント系アプリの宿命であり、もっとも優先すべき特性でもあると思います。
そのため今回はリスクを徹底的に減らすべく、1の工数を減らすことを念頭にFlutterと相性のいいピュアなマテリアルデザインを基本的に踏襲しました。
マテリアルデザインを踏襲したことは1だけでなく2のレイアウトの変化にも強い設計を作るためにも非常に役立ちました。
刻一刻と変わるイベント内容やテキストの差し替えに対してデザインを１から用意する必要性を最小に抑え、開発を待たせる時間を限りなく減らし、エンジニアに変更依頼を投げられる環境を整えることができました。
またマテリアルデザインを踏襲したことは開発のリスクを減らしただけでなく、短期間でiOS/Androidの両デザインを行い、エンジニアに実装してもらう「デザイン〜実装」の一連のコストを半分にすることができました。
近年では部分的にマテリアルデザインをiOSでも取り入れられてきている背景もあり、両OSで同一デザインでも使い勝手を落とさず利用していただけるような設計にすることができたのではないかと思います。
最後に、3の「引き立て役であること」は表ではあまり語ることはありませんでしたが、デザインにおいて地味にこだわったポイントです。
カンファレンスのメインはあくまで「セッション」です。現実に目の前でセッションが行われている中、アプリがあまりにリッチでコンテンツにも異様に凝っていたらついついいじりながら片耳で聞くことになるかもしれません。
そうなってしまっては、カンファレンスに来てもらった意味がありません。
今回のカンファレンスアプリはコンテンツを厳選し、加えてピュアなマテリアルデザインを踏襲したことも相まって、メインに集中してもらうための黒子のような目的が果たせたのではないかと思います。
結果的にカンファレンス中にさりげなくアプリを利用する来場者のを見かけたり、Push通知を利用した当日のリアルな来場者とのコミュニケーション体験は各所から反響もあったりと、今回カンファレンスアプリとしての「ならでは」の体験設計ができたのではないかと思います。
単発のアプリを作ることはデザイナーにとっても普段の業務とは異なる部分も多いですが、今回のMTCアプリが開発や体験設計の参考になれば幸いです。
おわりに（rkowase）
まだまだAngularDartでWebとロジック共有やBLoCアーキテクチャなど細かいところで試してみたことがありますが、「本気でアプリを作る」には足りていないところが多く残ったままとなりました。 次回はもっと本気で挑戦したいと思います！
メルカリ・メルペイでは業務としてカンファレンス運営を手伝っています。
次回に向けてカンファレンスアプリを「本気で」作りたい方も募集しています！
興味のある方はこちらからご応募ください！！！
