2024.10.01
自社の社内情報を未来の“ゴミ”にしないための備え 「情報量が多すぎる」時代がもたらす課題とは?
リンクをコピー
記事をブックマーク
神原健一氏(以下、神原):それでは本日「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を利用する方法はいろいろありますが、公式サイトやさまざまなエンジニアの方が、いろいろなところで情報発信をしているので、今回はがっつり省略したいと思います。
(次回につづく)
2024.10.29
5〜10万円の低単価案件の受注をやめたら労働生産性が劇的に向上 相見積もり案件には提案書を出さないことで見えた“意外な効果”
2024.10.24
パワポ資料の「手戻り」が多すぎる問題の解消法 資料作成のプロが語る、修正の無限ループから抜け出す4つのコツ
2024.10.28
スキル重視の採用を続けた結果、早期離職が増え社員が1人に… 下半期の退職者ゼロを達成した「関係の質」向上の取り組み
2024.10.22
気づかぬうちに評価を下げる「ダメな口癖」3選 デキる人はやっている、上司の指摘に対する上手な返し方
2024.10.24
リスクを取らない人が多い日本は、むしろ稼ぐチャンス? 日本のGDP4位転落の今、個人に必要なマインドとは
2024.10.23
「初任給40万円時代」が、比較的早いうちにやってくる? これから淘汰される会社・生き残る会社の分かれ目
2024.10.23
「どうしてもあなたから買いたい」と言われる営業になるには 『無敗営業』著者が教える、納得感を高める商談の進め方
2024.10.28
“力を抜くこと”がリーダーにとって重要な理由 「人間の達人」タモリさんから学んだ自然体の大切さ
2024.10.29
「テスラの何がすごいのか」がわからない学生たち 起業率2年連続日本一の大学で「Appleのフレームワーク」を教えるわけ
2024.10.30
職場にいる「困った部下」への対処法 上司・部下間で生まれる“常識のズレ”を解消するには