![](https://images.logmi.jp/media/article/331268/images/main_image_328059f393a3a7308ce59883ede027bc743fceb3.jpg?w=600)
2024.12.24
ビジネスが急速に変化する現代は「OODAサイクル」と親和性が高い 流通卸売業界を取り巻く5つの課題と打開策
リンクをコピー
記事をブックマーク
神原健一氏(以下、神原):それでは本日「Flutterアプリ開発スタートアップ with Tips」ということで発表します。
最初に自己紹介をします。私は神原と言います。ふだんはNTTテクノクロスという会社で、エバンジェリストとして活動しています。モバイルアプリ開発が昔からけっこう好きで、Androidもバージョン1.0が出る前から触っています。仕事だけでなくプライベートでもアプリを作ったり、あとは本を書いたりなども実施しています。
本日の講演資料については、Twitterアカウント(@korodroid)で公開するので、フォローしてもらえると幸いです。
これは完全に余談ですが、例えばリアルタイムの翻訳電話のアプリやToDo管理のアプリなど、自分でFlutterを使って作って、マーケットで公開もしています。
それでは本日のアジェンダです。まず、Flutterとはどういったものかという概要を伝えて、その次にFlutterの始め方、実際にアプリを作るときにはどう始めたらいいのかを紹介します。そしてFlutterアプリの開発Tipsということで、より効率的な開発を進めていくためにどうするべきかを紹介していきます。
ではFlutterの概要です。Flutterについては聞いたことがある方も多くいるかと思いますが、ちょっと改めて簡単に紹介します。共通のソースコードで、iOS/Androidなどに向けたアプリを開発できるSDK(Software Development Kit)、いわゆるクロスプラットフォームの開発ツールと呼ばれています。
実はモバイルだけじゃなくて、デスクトップやWeb向けなどにもアプリケーションをエクスポートできるプロジェクトも今進行しています。それぞれα版やβ版のステータスではありますが、今後はモバイルだけでなく、Flutterの世界がいろいろなところに広がっていきそう、といったところが僕自身も非常に興味を持って取り組んでいます。
Flutterの特徴をいくつか紹介していきます。非常に多くの特徴がありますが、今回はその中でも代表的なものを3つ、順番に紹介していきます。
1つ目が、美しいUI、高い実行性能です。Flutterは、iOS/Android向けの自前のUIを持っています。自前のUIというのはどういうことかというと、iOSやAndroidが持っている、GUIコンポーネントのいわゆるラッパーではなくて、オリジナルのUIをFlutterの中で持っています。
そのため、描画も非常に高速ですし、使っていてもっさりすることなく、ユーザーがさくさくアプリを使っていけるところが、大きな特徴かなと思います。flutter.devというサイトで、実際に会社のアプリでFlutterが使われている例も紹介されています。
続いて伝えたいのは、高い開発効率です。こちらは実際にFlutterのアプリのソースコードをいじっては、エミュレータでその内容が反映されているシーンです。ソースコードを編集しては、けっこうリアルタイムにエミュレータにその内容が反映されていくところ見られると思います。
従来のネイティブモバイルアプリだと、アプリのソースコードを編集してはエミュレータに転送して動作確認するライフサイクルが、どうしても長めになりがちでした。しかし、そういったところがFlutterだとホットリロードの機能が備わっていて、サクサクと動作確認できるところが、僕自身も開発をしていて、良いなと思っているポイントになります。
続いて、言語のDartを紹介します。こちらは「こんにちは、Flutter」と出ている画面を、Flutterのソースコードで書くとどうなるのかを出しています。こちらはDartという言語で書いています。
JavaやJavaScript、Kotlinなど、プログラミングの経験を持っている方であれば、なんとなく「この画面を作るにはこんなコードを書くんだ」というのが雰囲気で読んでもらえるんじゃないかなと思います。あとで紹介しますが、Flutterでアプリを作るときには、UIを作っていくところもDartで書いていくのがけっこう特徴だったりします。詳細は後ほど紹介します。こんな感じで、Flutterには3つの大きな特徴があります。
ではFlutterを使ってアプリを作っていこうと思ったら、具体的にどうしたらいいかを紹介します。まず開発環境の話をしたいと思います。大きく分けるとIDE(Integrated Drive Electronics)、統合開発環境を使う方法と、使わない方法があります。使う場合だと、もしかしたらふだん使われているかもしれないAndroid StudioやVisual Studio Code、IntelliJ IDEAなどの開発環境を使っていくことになります。
それぞれ特徴はありますが、Flutterを始めたいとき、もし使い慣れたものがこの中にあれば、まずそれからスタートするのがいいかと思います。ただIDEを使わない方法もいくつかあり、あとで紹介するFlutter Studio、あとはDartPadというツールを使うことで、Flutterアプリ開発がどういうものか、直感的につかむことも可能になっています。
これは実は実践的なものではありませんが、まずはFlutterがどんなものかの感覚をつかむには非常におすすめの方法です。あとは自分の好きなテキストエディタを使って、コマンドラインベースでビルドしていく。そういった開発スタイルを取ることも可能になります。
それでは、もう少し具体的なところを紹介します。まずIDEを使わない場合はどんな感じでやるかを紹介します。今回はFlutter Studio。
(動画開始)
これ実はWebブラウザで部品が動いているんですが、ブラウザを開くと、ドラッグ&ドロップでモバイルの画面を作っていけます。
例えば、アイコンやテキストコンポーネントをポチポチ配置していきます。今回はアイコン2つと、テキストフィールドを配置しました。すべてブラウザの中で動いていますが、テキストの名前を編集をしていくと、もうなんとなく画面が作っていける。
アイコンも一覧の中からポチッと変更して、色も変えると、なんとなく画面っぽくなってきました。今回のモバイル画面に関しては、例えばProfileにします。すごいところが、作った画面のソースコードがブラウザの中で吐き出されます。このソースコードは、インポートして開発環境に持っていくことも、実はできるようになっています。Flutter Studioは実は非公式のツールではありますが、このように、けっこうよくできています。
(動画終わり)
(動画開始)
「これで画面を作ったあとはどうするんだっけ」というところで次に紹介したいのが、DartPadです。このDartPadも、サイトに飛ぶと、ブラウザの中でDartのソースコードを書いて実行して、その結果もブラウザの中で確認できる、非常に便利なツールになっています。
先ほど作ったソースコードを貼り付けてRUNを押すと、右側にモバイルの画面が出てきて、動作確認までできてしまう。簡単なFlutterのアプリなどであれば、動作確認して動かしていくこともできるようになっています。
(動画終わり)
IDEを利用する方法はいろいろありますが、公式サイトやさまざまなエンジニアの方が、いろいろなところで情報発信をしているので、今回はがっつり省略したいと思います。
(次回につづく)
2025.01.16
社内プレゼンは時間のムダ パワポ資料のプロが重視する、「ペライチ資料」で意見を通すこと
2025.01.15
若手がごろごろ辞める会社で「給料を5万円アップ」するも効果なし… 従業員のモチベーションを上げるために必要なことは何か
2025.01.20
組織で評価されない「自分でやったほうが早い病」の人 マネジメント層に求められる「部下を動かす力」の鍛え方
2025.01.14
目標がなく悩む若手、育成を放棄する管理職… 社員をやる気にさせる「等級制度」を作るための第一歩
2025.01.09
マッキンゼーのマネージャーが「資料を作る前」に準備する すべてのアウトプットを支える論理的なフレームワーク
2025.01.14
コンサルが「理由は3つあります」と前置きする理由 マッキンゼー流、プレゼンの質を向上させる具体的Tips
2025.01.07
1月から始めたい「日記」を書く習慣 ビジネスパーソンにおすすめな3つの理由
2025.01.21
言われたことしかやらないタイプの6つの言動 やらされ感が強く他人任せなメンバーを見極めるチェックリスト
2017.03.05
地面からつららが伸びる? 氷がもたらす不思議な現象
2015.11.24
人は食事をしないとどうなるか 餓死に至る3つのステップ
特別対談「伝える×伝える」 ~1on1で伝えること、伝わること~
2024.12.16 - 2024.12.16
安野たかひろ氏・AIプロジェクト「デジタル民主主義2030」立ち上げ会見
2025.01.16 - 2025.01.16
国際コーチング連盟認定のプロフェッショナルコーチ”あべき光司”先生新刊『リーダーのためのコーチングがイチからわかる本』発売記念【オンラインイベント】
2024.12.09 - 2024.12.09
NEXT Innovation Summit 2024 in Autumn特別提供コンテンツ
2024.12.24 - 2024.12.24
プレゼンが上手くなる!5つのポイント|話し方のプロ・資料のプロが解説【カエカ 千葉様】
2024.08.31 - 2024.08.31