Flutter Web でアプリ開発のコストを削減する方法

あなたは製品のアイデアを思いつきますが、それを世に出すための計画が必要です。 サービスをできるだけ多くのユーザーに公開するには、モバイル アプリと Web アプリが必要です。 しかし、あなたの簡単な調査は残忍です。狭いアイデアが 1 つしかなくても、 3 つの異なるアプリ(Android、iOS、ウェブ)、3 つの異なるタイプのスペシャリスト (Kotlin、Swift、JavaScript)、さらには 3 つの異なるベンダーが必要になることもあります。

しかし、この立場になったのはあなたが初めてではありません。 Airbnb、Uber Eats、Discord などのアプリケーションの作成者も、現在の場所に立っていました。 彼らは皆、クロスプラットフォーム ソリューションを採用することに決めました。 そして、2020 年にこの分野で最も重要なプレーヤーは Flutter のようです。

フラッターとは？

Flutter は、1 つのコードベースを使用して iOS と Android の両方のモバイル アプリケーションを作成できる Google フレームワークです。 Flutter の最初の安定版は 2018 年末にリリースされました。Googleは、モバイル アプリケーションの予算の不足と React Native の人気の高まりに対応して Flutter を作成し、主要な競合相手になりました。

Flutter は、Google のオブジェクト指向言語である Dart に注目しています。多くのドメイン スペシャリストによると、Dart はすべてのモバイル、ウェブ、およびデスクトップ開発の未来です。 React Native が使用する JavaScript と比較して、Dart は完全にオブジェクト指向であり、強く型付けされています。 これはあなたのビジネスにとって何を意味しますか？ Dart で提供されるコードは、チームが変化する中で何年もの間、エラーに対してより耐性があり、維持するのがはるかに簡単です。

Flutter for Web がブラウザーを征服

これらすべてが Web にどのように変換されるのでしょうか? 2020 年は Flutter にとって重要な年です。新たな挑戦がもたらされるからです。 このフレームワークは、より大きな画面と Web ブラウザーを征服しようとしています。 過去 2 年間、Flutter とは別に、iOS および Android アプリが使用するのと同じ Flutter コードから Web アプリを生成するはずだったHummingbirdと呼ばれる研究プロジェクトがありました。

プロジェクトは成熟し、1 年前にコア チームがフレームワークに含め、現在 (2020 年 5 月現在) はまだベータ ブランチにあります。 これは何を意味するのでしょうか？ 今日でも、Flutter を使用して Web アプリケーションを構築することは可能であり、Google チームはいつでもそれが安定していると発表する可能性があります。 1つのコード、1つの技術、一石三鳥。 あなたのプロジェクトは完璧に適合しているようです。

クロスプラットフォーム アプリケーションのシナリオは非常に一般的です。 多くの一般的で有名なソリューションは、このモデルを使用して時間とお金を節約しています。 Walmart、Soundcloud、および Bloomberg は、クロスプラットフォームのモバイル アプリケーションを決定しました。 あなたの携帯電話には、少なくとも 1 つのクロスプラットフォーム アプリケーションがあるはずです。

クロスプラットフォーム開発に興味がありますか?

もっと詳しく知る

ただし、途中で Web アプリを構築する可能性は、ほんの数か月前に私たちに開かれたものです。 まだこの動きを決定している大手ブランドはありませんが、今日では、遅かれ早かれスタートアップや迅速な PoC にとって優れたツールになることは明らかです。

アプリの Flutter の利点

開発コストの削減

Flutter for Web を使用すると、技術的に接続された 1 つのチーム内で、 1 つのペースで 1つのコードベースを使用して 3 つのアプリが作成されます。 3 つの異なるテクノロジのベンダーを探して、それらの作業を同期する必要はありません。 同じ支払い機能やソーシャル メディアの承認を 3 回繰り返す必要はありません。

ただし、これは、支出の回数を 3 回までに制限できるという意味ではありません。 多くの場合、特定の機能をクロスプラットフォームに提供するのはもう少し複雑です。 私の経験では、1.2 から 1.5 に等しいクロスプラットフォームの乗数のようなものがあります。 つまり、ある機能の開発に 1 つのプラットフォームで X 時間かかる場合、クロスプラットフォームになると (1.2-1.5) * X かかるということです。 それでも、x3 と比較して x1.5 は、予算の勝者になる可能性があります。

アプリ開発の高速化

上記のすべてにより、フラッターは PoC と製品アイデアの検証に最適な選択肢となります。 わずか数週間で、アプリ ストアに簡単にリリースできる実用的なアプリケーションを完成させることができます。 成功する可能性がある場合は、アプリをネイティブ テクノロジに再構築することを検討できます。 Airbnb はこの道をたどった。 クロスプラットフォームのモバイル アプリが成功した後、2018 年にネイティブ アプリに切り替えることを決定しました。

より簡単なメンテナンス プロセス

また、アプリケーションが最終的に成功したときに何が起こるかを覚えておいてください。 メンテナンスに入ると、 1 人の Dart/Flutter スペシャリストでアプリを維持する方がはるかに簡単です。 コードを保守するだけでは、フルタイムの 3 人の異なる開発者のタスクを見つけることができない場合があります。 同様に、スキルのバランスが崩れると、仕事のペースにばらつきが生じます。

異なるプラットフォームでルック アンド フィールを共有することを考えると、開発チームのスキルも重要です。 3 つのプロジェクトに取り組んでいますが、最終的な形は開発者のスキルと UI に対する姿勢に大きく依存します。 iOS 担当者が丸みを帯びた角を好み、Android 担当者がそれほど熱心ではない場合、これら 2 つのアプリケーションは製品ブランドに与える影響が異なることがわかります。

Flutter for Web リスク

開発中の技術問題

わかりましたが、Flutter for Web を選択することに関連するリスクやデメリットはありますか? いつものように、物語には 2 つの側面があります。 技術的な観点からは、これはまだベータ テクノロジであることを覚えておく必要があります。 そのため、完全に安定しているわけではなく、解決できない問題に遭遇することさえあります。 共存する Flutter ライブラリのサポートも不完全な場合があります。 ライブラリがモバイルでは魅力的に機能しても、ネット アプリケーションではクラッシュするのはよくあることです。これは、ライブラリが最適化されていないためです。 これは、UI に限定されている場合は小さな問題ですが、主要な支払いサービスの統合である場合は問題になる可能性があります.

Web アプリケーションの例外

もう 1 つの問題は、Android と iOS アプリケーションの世界が非常に似ていて、コードベースがほとんどの場合 95 ～ 100% 同一である場合でも、これはブラウザー バージョンには当てはまらない可能性があることです。 下部のシート ドロワー、下部のタブ メニュー、または水平方向のカルーセルは、Web にうまく適用できない優れたモバイル UX パターンです。 多くの場合、ウェブ アプリ専用の例外を作成する必要があります。 多くの場合、モバイルと Web ではアーキテクチャ デザインをまったく異なるものにする必要があります。 作業の最初に、デザイナーと開発者の間で円卓会議を設定することをお勧めします。 特に予算と日付を気にする場合は、意見を共有してコンセンサスに達するようにしてください。

Flutter vs React Native

でも、Flutter for Web しか選択肢がないのでしょうか? もちろん違います。 その最も重要な代替手段は React Native です。 React Native は、Flutter より何年も前に Facebook が発明し、サポートしていた競争力のあるフレームワークです。 まったく同じことを行うことができます – すべての iOS、Android、および Web アプリケーションをビルドできます (比較的短期間の Flutter と同様です)。

モバイルアプリの未来を探る

無料でレポートを手に入れよう！

私は過去 2 年間、React Native で作業してきましたが、最近は Flutter の世界に飛び込んでいます。この 2 つの間の決定に直面した場合は、アドバイスを差し上げることができます。 まず第一に、この決闘には単一の勝者はなく、両方の技術が成熟しており、両方ともクロスプラットフォームとして優れています. ただし、特定のプロジェクトを実装する際に利点をもたらすニュアンスがいくつかあります。

• ジェスチャー関連の UI (スワイプ、ドラッグ、引き出しの引き出しなど) に特に関心がある場合は、ネイティブ側でのアーキテクチャとジェスチャーのサポートにより、Flutter を選択することをお勧めします。 RN は、ジェスチャ + アニメーションのコンボ パフォーマンスを向上させるのに苦労することがあります。
• Web がビジネスの重要なタッチポイントである場合は、React Native を選択してください。 RN は、ネイティブ開発製品に非常に近いブラウザー アプリケーションを生成し、ネイティブ ツールでデバッグできます。 一方、Web プロジェクト用の Flutter は、一般的な DOM にトランスパイルされず、アダプターが必要です。
• アプリケーションを何年にもわたって維持および開発する必要がある場合 (または、それに取り組んでいるチームが時間の経過とともに変わる可能性がある場合)、Flutter と Dart がより良いソリューションになる可能性があります。
• アプリケーションがもう少し複雑なメカニズム(Bluetooth、バイオメトリクス、位置情報) や外部統合(支払い、ソーシャル メディア) の使用を想定している場合、React Native は以前から存在しており、より幅広いライブラリを備えています。 Flutter for Web エコシステムは毎月成長していますが、利用可能なライブラリの調査は、そこにあるすべてのプロジェクトの前に行う必要があります。

広く普及しているこれら 2 つのフレームワークについてさらに詳しく知りたいですか? React Native と Flutter の比較をご覧ください。

まとめ

ユーザーがプラットフォーム間でこれほど散らばっていることはかつてありませんでした。 モバイル デバイスと Web ブラウザは、氷山の一角にすぎません。 自動車、時計、テレビでアプリケーションを使用するユーザーが増えている一方で、音声アシスタントも普及しています。 したがって、プロセスを簡素化し、ソフトウェア制作のコストを削減する必要があります。 Web とモバイルの両方の開発に 1 つのコードベースを使用することはすでに一般的なパターンであり、Flutter for Web は素晴らしい例です。

Flutter を使用して次のアプリを構築する

一緒に仕事しましょう

私は長い間、Flutter for Web を駆け出しのテクノロジーと考えていました。 私の最近の仕事は私の考えを変えさせてくれました。 フラッターは輝かしい未来の前に立つ大人の青年であり、一考の価値があります。 予算が少なく、締め切りが短いアイデアには魅力的な選択肢のようです。 アイデアを迅速かつ低コストで検証したい人、アイデアを持っていて市場のニーズに応えている人向けです。 これは、Flutter がソフトウェア開発で行ったこととまったく同じです。

有望に聞こえますか？

クロスプラットフォーム開発があなたのビジネスにとって良い解決策になるかどうか疑問に思っていますか? 私たちのチームに連絡して、プロジェクトの見積もりを入手してください。