blog

[Flutter】Flutterで最初の10個の商用アプリを作って学んだこと

Flutterプロジェクトで過去24ヶ月間に最初の10個のビジネスアプリを作った後、私はそれらを作った後に学んだ教訓を共有します。 この記事を読めば、次のことがわかります。 Flutterを選んだ理由...

Jul 18, 2020 · 9 min. read
Share this

元記事:

公開日: 2020年7月28日 - 10分で読む

この24ヶ月間、Flutterのプロジェクトに約17,193,00時間を費やし最初の10個のビジネスアプリを制作した後、制作後の洞察を皆さんと共有します。

この記事を読んで、あなたは学ぶでしょう。

  • Flutterを選んだ理由、Flutterの予算と安定性への影響は?
  • Flutterはエンタープライズアプリケーションに適していますか?
  • FlutterはXamarinと比べてどうですか?
  • Flutterはどんなプロジェクトに向いていますか?

2018年7月にLeanCodeでFlutterを使った最初の商用アプリケーションの開発を始めてから2年が経ちました。初めてFlutterを知ったとき、有望ではあったものの、主に最近Xamarinに投資した際のネガティブな経験から、懐疑的な姿勢を崩しませんでした。というのも、チームは常に新しくエキサイティングなテクノロジーをプロジェクトに持ち込みたいと考えており、彼らに挑戦し、それがクライアントにどのように本当の価値をもたらすことができるかの証明を求めていたからです。このプロジェクトは、牛の管理に関わる農業プロジェクトでした。この業界に典型的な、牛舎の需要を計算するためにブリーダーによって広く使用されている興味深い人工物があり、チームはユーザーエクスペリエンスの観点から良い洞察だと感じました。

わずか2日で、彼らは概念実証を堂々と発表し、素晴らしくスムーズな体験を提供するアニメーション・ライブラリーの構築がいかに簡単であるかを示しました。最終的に、これは完全なアニメーションへと進化しました。

Kedzia AppプロジェクトのFlutterによるシンプルなアニメーション例。

この嬉しいことがあれば、フラッターを試してみる価値はあると思いますよ。

当初は、Flutterに100%の力を注ぎたくなかったので、React Nativeのプロジェクトを並行して進めていました。Flutterチームからの公式サポートなしでGoogle Mapsの最初の実装を書くことになったとき、この悲観主義は正しかったと思います。Flutterでこの最初の商用アプリケーションを書いたときの経験や困難についてはこちらご覧ください。最終的に納品されたのは、Flutterの開発に500時間弱を費やした40ビュー未満の比較的シンプルなアプリケーションでした。

この最初のアプリを納品し、顧客からレビューに5つ星集めた時点で、2019年初頭から顧客に対してより積極的にFlutterを推奨していくことが適切であると考えました。2019年5月からは、モバイルテクノロジーに関してはFlutterを第一の選択肢とし、異なるフレームワークでのアプリ開発への関与は打ち切ることを決定しました

それ以来、10以上のモバイル製品と数十のMVP/POCがFlutter上で提供されてきました。

フラッターの方が速い。

理論的なアプローチの話ではありません。XamarinとReactJSからアプリケーションを書き直すユニークな機会があり、結果は同等でした。Xamarinと比較して67%の時間がかかり、ReactJSでアプリを作成するのに必要な時間の69%が、まったく同じ範囲で、バックエンドで同じAPIを使用しました。これは、モバイルアプリをより速く、より安く構築する方法に対する究極の答えです。新しいデジタル製品を予算内で納期通りに提供することは、不況下でこれほど重要なことはありません。これはまた、同じ予算でバックログを50%多く提供できることを意味します。プロダクトオーナーとして開発チームに優先順位を設定することで、予算のハードルをさらに50%上げることができることを想像してみてください。

モバイル版Xamarinやウェブ版ReactJSからFlutterへのプロジェクトの書き換えに費やした時間。

そうすることで、チームの創造性と仕事の質が劇的に向上します。GastroJobのケースの詳細な分析については、Flutter Europeで行われたプレゼンテーションをご覧ください。

平均して、コードの90%はiOSとAndroidで共有されています。

コードの90%は、2つのネイティブプラットフォーム用に2度書く必要はありません。ネイティブアプリ開発と比べて90%の時間が節約され、一貫性とチームが2つのネイティブストリームに分かれるのではなく1つの目標に団結することで、膨大な創造性が発揮されます。ビジネスロジックとユーザーエクスペリエンスの共有に加えて、すぐに使える多数のライブラリを使用するメリットもあります。まず、通信、プッシュ通知、安全なストレージ、データベース、アニメーションなど、アプリケーション内で使用されるさまざまなものに共通のロジックを提供することで、開発プロセスをスピードアップできます。). 第二に、多くの一般的なサービスと統合しやすくなります。そのため、プラットフォーム固有のカスタムコードを書く場合は、2回コードを書くだけで済みます。ただし、その場合でも、この記事の後半で説明するように、Dartとネイティブコード間の橋渡しはかなり簡単です。

さらに、品質が考慮されると、より大きな節約となり、長期的にはアプリの維持費も安くなります。Fact InspiredがXamarin、React Native、Flutterで作られたすべてのプロジェクトを調査してパターンを探したところ、Flutterプロジェクトではバグに費やす時間は通常8~10%、React Nativeでは7~14%、Xamarinでは11~23%でした。

UX/UIの仕事は、かつてないほど素晴らしいものです。

FlutterプロジェクトのUX/UIデザイナーと開発者のコラボレーションには、何かクリックするものがありました。おそらく、彼らはこの面倒なネイティブ適応をする必要がなく、創造性を発揮できたからでしょう。しかし、React Nativeチームの経験からも同じことが予想されますが、そうではありません。より深く掘り下げてみると、Flutterは美しいインターフェイスを書くことができる開発者に純粋な喜びをもたらすことが明らかになりました。その結果、彼らはより積極的に協力するようになり、デザイナーと開発者が手を取り合ってライブの実験に取り組むペアプログラミングのセッションが行われるようになりました。強力なテーマ設定エンジンのおかげで、このようなやり取りを何度か繰り返した後、チームは、FigmaやAdobe XDで見栄えがするだけでなく、ユーザーに最高の体験を提供し、一貫性と適切なデザイン順序を感じさせる、アプリケーション用の適応可能なデザイン言語を考え出すことができました。また、この一貫性が、プロジェクトのライフサイクルの中でどのように存在するかを見るのも興味深いことです。かつてUX/UIデザイナーがデモセッションで製品をレビューしていたとき、彼らの意見のほとんどは、実際に体験した後に考えを変えたり、物事を単純化したりするプロジェクトの終わりにもたらされるものでした。Flutterのユニークな点は、プロジェクトの終わりにはデザイナーの関与が完全になくなることです。これはまた、その後のスプリントの洗練に時間がかからないことを意味し、この継続的なコラボレーションは次のリリースに向けたスクラムの着実なペースに反映されます。

アニメーションは簡単で手頃です。

Flutterは静的なビューを簡単に実装できるだけでなく、アニメーションという新しい可能性も提供してくれます。これにより、UXとDEVのコラボレーションはさらにレベルアップし、美しいトランジションエフェクトがこれまで以上に簡単になりました。これまでは、これは大予算のプロジェクトにありがちなことでした。しかし今、Flutterのおかげで、すべての開発者がこれを利用できるようになりました。というのも、Flutterはベアメタルでレンダリングし、キャンバス上で直接描画を完全に制御するため、他のクロスプラットフォームフレームワークで必要とされる追加の条件付きフォーマットなしに、すべてのプラットフォームでピクセルパーフェクトなイメージを作成することが可能になるからです。例えばReact Nativeで描画する場合、デフォルトのビューをベースにしているため、新しいコントロールの見た目が変わってしまう可能性があり、そのため胡散臭いコードを構築することになります。これはプラットフォームに依存するものであり、共有されたコードはデプロイされたプラットフォームに引き継ぐべきでないというアプローチに真っ向から反するものです。

Flutterアプリはもっと軽い。

これは、PWAビジネスオプションに直面したときに考慮すべきことであり、アプリのように携帯電話でウェブサイトを保存するショートカットを追加することがいかに簡単かを証明しています。ユーザーエクスペリエンスについてはノーコメントで、アプリをダウンロードするこの負担だけ。そう、どちらのケースでも問題ないのです。SimiCartのブログよると、最高のPWAウェブサイトは、ユーザーがロード時に4.9mbから11.6mbをダウンロードする必要があります。これは、Xamarinアプリの平均サイズである25mbをはるかに下回り、React Nativeアプリの平均サイズである32mbをさらに下回りますが、Flutterアプリの平均サイズである11mbに非常に近く、すべてのサイズの範囲です。Flutterアプリのサイズ範囲は9から14mbです。

Flutterのアプリは軽い。

これは、PWAビジネスオプションに直面したときに考慮する価値があり、アプリのように携帯電話でウェブサイトを保存するショートカットを追加することがいかに簡単かを証明しています。ユーザーエクスペリエンスについてはノーコメントで、アプリをダウンロードするこの負担だけ。そう、どちらのケースでも問題ないのです。SimiCartのブログよると、最高のPWAウェブサイトは、ユーザーがロード時に4.9mbから11.6mbをダウンロードする必要があります。これは、Xamarinアプリの平均サイズを大きく下回り、React Nativeアプリの平均サイズ32mbをさらに下回りますが、Flutterの平均サイズ11mbに非常に近く、すべてのFlutterアプリがサイズの範囲は9-14 mbです。スムーズなルック&フィール、高速なレスポンス、プッシュ通知などネイティブアプリに典型的なすべてのサービスに対して、このサイズはネイティブアプリのエクスペリエンスとしては極めて低いことを認めざるを得ません。これは、ユーザーがアプリをダウンロードし、すべてのプラグインや統合機能を効率的に使い始めるのに障壁がないことを意味します。また、より少ないコードで同様のタスクを実行できるため、アプリのパフォーマンスも向上します。このパフォーマンスの向上は、ミリ秒単位で直接反映されるため、他のクロスプラットフォームフレームワークと比較して、アプリのコールドローディング、アニメーション、CPUおよびメモリ使用量の面でより高速なエクスペリエンスを提供します。

必要なときにネイティブコードにアクセスできます。

Flutterの最も良い点は、モバイルチームがネイティブコードに入り込んでKotlin/Swiftパッケージを書くことに積極的になることです。なぜなら、ネイティブ実装を完全にコントロールできるからです。また、ネイティブコードへのブリッジは完全に透過的であるため、より堅牢であり、ネイティブ環境から移行する開発者にも優しいです。このアプローチにより、ネイティブの決済プロバイダーやニッチで複雑なライブラリなど、特定の機能の実装が比較的容易になります。さらに、Flutter Warsaw MeetupでJakub Bilińskiが発表したINGが開発したビジネス向けバンキングアプリケーションリンク)で示されたように、顔認証や指紋照合を必要とするバイオメトリックアルゴリズムの高度な機能もFlutter上でスムーズに動作します。

Flutterの概念実証は簡単です。

ネイティブコードとの統合が容易なため、最もリスクの高い仮説テストをチェックするために概念実証を構築する必要がある場合、さらなる利点がもたらされます。つまり、クライアントがプロジェクト全体の契約を決める前に、最もクリティカルなビジネスや技術的な質問に答えるために、可能な限り小さなアプリケーションを構築することができるのです。これはFlutterでは過大評価できないことです。それぞれのケースで、このようなイニシアチブのタイミングは2日間の開発時間枠の中で組み立てられ、このような短期間で何が達成できるかを考えようとしています。今のところ、AR対応のイメージ検出システムに至るまで、さまざまなPoCが実験されています。

gfycat.com/revolvingcl...

2日間でARを実証したFlutterの概念実証例。

ホワイトボード図や高度なアニメーションを通して

gfycat.com/deadverifia...

高速のPoCを作成することで、開発スピードを実証できるだけでなく、最終プロジェクトのより正確な見積もりが可能になります。

DEVは喜んでいました。

社内のチーム作りの観点からも、Flutterは良い選択だと証明されました。当初、Flutterの開発者はほとんどいませんでした。しかし、開発者がC#のバックグラウンドを持っているXamarinのような会社とは対照的に、Flutterの候補者は全員、すでにネイティブのバックグラウンドから移行したモバイル開発者でした。Flutterの人気が高まるにつれて、また定期的なミートアップやウェビナーを開催する非常に活発なコミュニティのおかげで、利用可能な候補者のプールは指数関数的に増加し、現在ではFlutterプロジェクトで仕事を探しているかなりの数のプロフェッショナルが、長年のネイティブアプリ開発の後にキャリアを変えることを望んでいます。よく文書化されたFlutterのコードと、コミュニティ主導のアドオンライブラリのおかげで、このようなキャリアチェンジは非常に簡単です。その結果、独立したモバイルチームを持つ企業の中には、Flutterを中心とした適応に投資しているところもあります。LeanCodeでは、Flutterのブートキャンプまで開催しています。湖で3日間のトレーニングプログラムを行い、実地経験を積んで、2ヶ月の集中学習プログラムに最適な候補者を選び、Flutterを学びながら非商業的なプロジェクトに取り組みます。9週間のトレーニングの後、開発者たちはすでに初期からFlutterでコーディングしていた同僚たちと肩を並べて働いていたのは驚きでした。このような短期間の学習サイクルは、ビジネスオーナーの視点から見ると、ネイティブアプリからFlutterに切り替えるという選択は革命ではなく、社内チームが重要な役割を果たすことができる進化であることを証明しました。

テクノロジースタックに関して正しい決断を下すことは、ビジネスや個人のキャリアに永続的な影響を与える可能性があります。Flutterは止められないムーブメントとなり、侮れない存在となり、銀行や保険のような非常に高い品質基準を持つ非常に保守的な業界へと成長し、拡大しています。

Flutter for WebやFlutter for Desktopが生産段階でリリースされたときでさえこのようなことが起きていることを考えれば、Flutter for mobileがこの非常に先進的な市場で競争するのに十分な価値を提供していることがわかります。どの業界で働いているかに関わらず、アーリーアダプターの時代は終わり、間もなくFlutterのエコシステムに参入する、より多くの既存プレイヤーを目撃することになるでしょう。そして、Flutterでさらに10個の素晴らしいアプリを作った後、来年の総括でこれらの実装から学んだ教訓を共有することが可能になることを願っています。

www.DeepL.com/Translator経由

Read next

No articles found.

No articles found.