Flutterで高速開発したAnewsモバイルアプリ

はじめに

2020年11月にリリースされた、ストックマークのAnewsのモバイルアプリケーションにはFlutterが利用されています。本記事では、Flutterをなぜ採用したのか、どのような点に課題があり、どのように工夫していったのか、という開発現場の知見について紹介いたします。(本記事は、実際に開発を行った祖父江 聡士さん・海老原 隆太さんへの社内インタビューを元に執筆されています）

Flutterで開発されたAnewsの画面イメージ

Flutterとは

Google社によって開発されているオープンソースのフレームワークです。クロスプラットフォーム向けの開発が可能であり、iOSやAndroidといったモバイルアプリケーションに多く利用されますが、Windows/Mac/Linuxといったプラットフォームのアプリケーションも開発可能です。

StockmarkにおけるFlutterの適用領域

Anewsは日々のニュースをユーザの趣向にあわせて提供するプロダクトです。システム構成は、バックエンドに備えるREST APIをフロントエンド側から叩いて、ユーザ側の画面を生成する、というシンプルな構成となっています。この、AnewsのモバイルアプリケーションにFlutterを利用しています。

AnewsのWebアプリケーションでは、ユーザがブラウザ上でURLをクリック/タップした場合に、別タブで表示しますが、モバイルアプリケーションでは内部のWebViewに表示するようにしています。これは、見ているページをマークする・ページに対してコメントするなどの付加機能を、ユーザが簡単に利用できるためであり、ユーザ価値を高めています。

技術選定の経緯

もともと、以下の方針が候補として上がりました。

• WebView
• Native + WebView
• Native

また、同じく iOS -> Android といったように別々に作るか、クロスプラットフォームで同時に作るかという観点がありました。

このときの社内体制として、iOS/Androidのネイティブ開発の経験が十分にあるメンバーはいませんでした。そのため、Nativeで別々に作る場合には、学習コスト含め、ある程度の期間が必要な点が見込まれます。

クロスプラットフォームで開発する場合も、専用の言語やフレームワークの学習コストが発生しますが、仮にクロスプラットフォームで上手くいけば、短期間で複数のアプリケーションを開発可能です。

そこで、クロスプラットフォーム開発の候補としてReact Native、Flutterなどが意見としてあがり、社内に経験者がいたFlutterの技術調査・検証から開始しました。その結果、今回の要求実装として、Flutterで実現困難な箇所は無い(例: GPSなどOS特有の機能を必要としない、非常に複雑なUIなど)と判断できたため、Flutterで進めています。

最終的に開発はスムースに進み、iOS/Androidのアプリケーションを両方ともリリースできています。

上手くいったコツ

以下で、上手くいった要因について3点ほど紹介いたします。

1. モブプログラミングの活用

Flutterに関する技術知見をメンバ間で効果的に展開するために、開発の序盤では、毎日Discordで集まりつつ、モブプログラミングを実施していました。

モブプログラミングでは、スキルトランスファーという観点以外にも、問題に対面した場合に気軽にメンバと話をしながら、問題解決を高速に進められています。

2. 学習と実装の並行

UIを構築する部分、UIの状態変化を担う部分と構成を分けていた点があります。前者のUI構築部分は比較的容易であり、ある程度の前提知識を身につければ、開発を進められます。そこで、UI部分についてメンバの1人が早期に学習し、別メンバへノウハウを展開しました。

その後、別メンバがUI実装をメインに実装している間に、もともとUIについて早期に取り組んでいたメンバが、状態変化のロジックを学習を進め、開発が並行して効率的に走るように工夫しています。

3. 体制構築上の工夫

経験豊富な方に業務委託として一時的にジョインしていただきました。理由などの詳細は後述します。

大変だったところはあったのか？

ここは非常に大変だった、という箇所はありませんでした。

計画の段階でiOSのビルドやアプリのCIに課題があると感じていたのですが、経験豊富なメンバに一時的に参加いただいて、その箇所を対応いただきました。(CIは速度面から、Bitriseを最終的に活用しています)

また、Dartという言語を新たに学ぶ必要もありますが、もともとDartは、AltJSとして利用されていることもあり、フロントエンドエンジニアであればかなり学習コストは低いです。（メソッドの名前が違う点は、覚える必要があります）

FlutterのUIを組むのも、Widgetの組み合わせで実現可能であり、概念自体はVueなどのComponentを組み合わせるのと似ています。

強いていえば、状態管理のプラクティス動向が安定していない点があります。プロジェクト内で技術調査し、今回のプロジェクトではRiverpodを採用しています。最初は、状態管理の考え方を理解する必要がありますが、慣れてしまえば、特にハマる箇所もなく進めていけました。

今振り返って開発してみてよかったこと

リリーススケジュール上、iOS版を先行でリリースしています。 そのためテストはiOSでのみ行っていたのですが、その後のAndroid版リリース時にもほとんどの機能がそのまま動作しており、 開発者体験がとても良かったです。 一般に、モバイルアプリケーション開発は大変という話も聞きますが、今回はFlutterが上手く大変な部分を隠蔽してくれていました。

また、部分的にSwiftやKotlinで個別対応が必要かもしれない、とも考えていました。しかし結局、ほぼ触らずに進められており、こちらも開発全体として良かった点になります。

今後の開発体制について

フロントエンドエンジニアのスキルがあれば、Flutter開発向けのオンボーディングが迅速に実現できます。Flutterも書けるスキルを身に着け、チーム全体として分担して開発できるような体制を実現していきます。