スタッフブログ

STAFF BLOG

アプリ開発日誌

2021.04.22

【非エンジニアの方へ】なぜFlutterを使うとiOSとAndroid両方の開発ができるのか?

こんにちは、阿部です。

今回は非エンジニアの方向けに、Flutterの特徴について触れつつ、
「なぜFlutterを使うとiOSとAndroid両方の開発ができるのか?」ということについて解説したいと思います。

クロスプラットフォームとは

FlutterはGoogleが開発しているクロスプラットフォームの開発ツールです。
まずは「クロスプラットフォーム」という単語について少し触れておきたいと思います。

Flutterで作ったアプリはiOS、Android、さらにはWebアプリとして動かすことができます。
さまざまな環境で動かせるアプリが登場したことで、クロスプラットフォームという単語が使われるようになりました。
クロスプラットフォームという単語は、「複数の環境で動く」ということだと捉えてください。
つまり、クロスプラットフォームのアプリとは複数の環境で動くアプリということです。

210422_eda_blog.002

対して、それぞれの環境専用のアプリを「ネイティブアプリ」といいます。
クロスプラットフォームの開発では、それぞれの環境ごとの対応が必要になる場合も多く、「ネイティブ」という単語を使うことが頻繁にあります。
この場合の「ネイティブ」というのは「それぞれの環境専用で動く」ことだと捉えてください。

210422_eda_blog.003

Flutterは独自のUIで表示できる

モバイルアプリをクロスプラットフォームで開発する方法はFlutter以外にも、React NativeやXamarinなどいくつかあります。
その中でもFlutterはUIの表示を独自で行なっているという特徴があります。

React Nativeは環境によって表示のされ方が違うのに対して、Flutterでは全く同じ表示を行うことができます。
同じ表示ができるのは、それぞれの環境の上にFlutter側の表示処理がされているからです。

210422_eda_blog.004

開発する際のメリットとしては、環境ごとの画面上の不具合が発生しにくくなるという点があげられます。
一つのコードでクロスプラットフォームが実現したとしても、環境ごとに表示が違うとなると考慮するべき点はたくさんあります。
しかし、同じ見た目で表示できることで、環境ごとに考慮しなければならない点が大幅に減ります。

逆に、Google製のツールなので、デフォルトだとAndroid寄りの見た目になるというデメリットもあります。
ただし、使用しているOSの情報を取得して、ネイティブ開発のようにiOSとAndroidで表示を切り替えることもできます。
iOSでよく見るUIパーツなども用意されているので、実装すればネイティブ開発をしたかのように見せることもできます。

また、Flutterを通して表示しているので、開発中であれば Android端末でiOS風のUIを表示したりといったこともできます。
(普通はやりませんが、独自で表示している証拠です)

210422_eda_blog.005

ネイティブとの連携が強い

Flutterはネイティブとの連携が強いのも特徴です。
Swift(iOS)やKotlin(Android)などのネイティブのコードを書いて Flutter側で使ったり、Flutterでの値をネイティブに渡したりといったことができます。

実はプロジェクトファイルは全て独自のファイルが存在するという訳ではなく、iOSとAndroidのプロジェクトファイルが内包されています。

210422_eda_blog.006

それぞれの環境でビルドをする時は、それぞれのプロジェクトファイルが実行されています。
なので、それぞれのプロジェクトファイルをまるでネイティブ開発かのように開くことができます。
ネイティブのコードを組み合わせる場合は、それぞれのプロジェクトファイルを使って開発していきます。

210422_eda_blog.007

210422_eda_blog.008

Flutterプロジェクト自体を開く際はAndroid StudioかVisual Studio Codeなどで開きます。

210422_eda_blog.009

まとめ

■クロスプラットフォームとは

・クロスプラットフォームのアプリとは複数の環境で動くアプリのこと
・アプリ開発での「ネイティブ」という単語は「それぞれの環境専用で動く」ことだと捉える

■Flutterは独自のUIで表示できる

・React Nativeは環境によって表示のされ方が違うのに対して、Flutterでは全く同じ表示を行える
・同じ見た目で表示できることで、環境ごとに考慮しなければならない点が大幅に減る

■Flutterはネイティブとの連携が強い

・SwiftやKotlinなどのネイティブのコードを動かせる
・iOSとAndroidのプロジェクトファイルが内包されている

それぞれのプロジェクトファイルが内包されていることを理解すると、なぜiOSとAndroid両方の環境で動くのかがイメージしやすくなったのではないでしょうか?

Flutterを使って両方の環境で動くコードを書くものの、実際にビルドする際にはネイティブ開発と同じものが動いています。

アプリ開発に関わる人はエンジニアだけではありません。
エンジニア以外の方もFlutterの仕組みを知ることで、開発に関わる仕事のお役に立てれば幸いです。

ご覧いただきありがとうございました。

BACK

お問合せ

イーディーエーに興味をお持ちいただいて
ありがとうございます!
スマホアプリに関するご相談、
お見積りや弊社へのご質問など、
お気軽にお問い合わせください。
担当者より折り返しご連絡させていただきます。

    お名前必須
    会社名
    メールアドレス必須
    電話番号必須
    お問合わせ種別必須
    お問合わせ内容必須

    アンケートにご協力ください。
    弊社サイトへはどのようにしてアクセスされましたか?

    個人情報のお取扱いに関する同意事項

    1.事業者の氏名又は名称

    株式会社イーディーエー

    2.個人情報保護管理者の氏名又は職名、所属及び連絡先

    個人情報保護管理者 小宮 保人
    Mail:[email protected]

    3.取得した個人情報の利用目的

    当フォームで取得した個人情報は、お問い合わせに関する回答のために利用し、目的外利用はいたしません。

    4.弊社が取得した個人情報の第三者への委託、提供について

    弊社は、ご本人に関する情報をご本人の同意なしに第三者に委託または提供することはありません。

    5.個人情報保護のための安全管理

    弊社は、ご本人の個人情報を保護するための規程類を定め、従業者全員に周知・徹底と啓発・教育を図るとともに、その遵守状況の監査を定期的に実施いたします。
    また、ご本人の個人情報を保護するために必要な安全管理措置の維持・向上に努めてまいります。

    6.個人情報の開示・訂正・利用停止等の手続

    ご本人が、弊社が保有するご自身の個人情報の、利用目的の通知、開示、内容の訂正、追加又は削除、利用の停止、消去及び第三者への提供の停止を求める場合には、下記に連絡を頂くことで、対応致します。

    株式会社イーディーエー 個人情報お問合せ窓口
    〒106-0032 東京都港区六本木7丁目14番23 ラウンドクロス六本木4F
    TEL:03-5422-7524 FAX:03-5422-7534
    Mail:[email protected]

    7.ご提供いただく情報の任意性

    個人情報のご提供は任意ですが、同意を頂けない場合には、第3項にあります利用目的が達成できない事をご了承いただくこととなります。

    8.弊社Webサイトの運営について

    弊社サイトでは、ご本人が弊社Webサイトを再度訪問されたときなどに、より便利に閲覧して頂けるよう「クッキー(Cookie)」という技術を使用することがあります。これは、ご本人のコンピュータが弊社Webサイトのどのページに訪れたかを記録しますが、ご本人が弊社Webサイトにおいてご自身の個人情報を入力されない限りご本人ご自身を特定、識別することはできません。
    クッキーの使用を希望されない場合は、ご本人のブラウザの設定を変更することにより、クッキーの使用を拒否することができます。その場合、一部または全部のサービスがご利用できなくなることがあります。