
2025.02.12
職員一人あたり52時間の残業削減に成功 kintone導入がもたらした富士吉田市の自治体DX“変革”ハウツー
リンクをコピー
記事をブックマーク
神原健一氏(以下、神原):それでは本日「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.02.06
すかいらーく創業者が、社長を辞めて75歳で再起業したわけ “あえて長居させるコーヒー店”の経営に込めるこだわり
PR | 2025.02.07
プロジェクトマネージャーは「無理ゲーを攻略するプレイヤー」 仕事を任せられない管理職のためのマネジメントの秘訣
2025.02.06
落合陽一氏や松尾豊氏の研究は社会に届いているか? ひろゆき氏が語るアカデミアの課題と展望
2025.02.05
「納得しないと動けない部下」を変える3つのステップとは マネージャーの悩みを解消する会話のテクニック
2025.01.07
1月から始めたい「日記」を書く習慣 ビジネスパーソンにおすすめな3つの理由
2025.02.10
A4用紙を持ち歩いて殴り書きでアウトプット コクヨのワークスタイルコンサルタントが語る、2種類のメモ術
2025.02.05
エンジニアとして成功するための秘訣とは? ひろゆき氏が語る、自由な働き方を叶えるアプリ開発とキャリア戦略
2025.02.04
日本企業にありがちな「生産性の低さ」の原因 メーカーの「ちょっとした改善」で勝負が決まる仕組みの落とし穴
2025.02.03
「昔は富豪的プログラミングなんてできなかった」 21歳で「2ちゃんねる」を生んだひろゆき氏が語る開発の裏側
PR | 2025.02.04
能登半島地震で自宅は全壊、「これでどうやってDXするねん」 被災したサイボウズ社員と支援者らが語る災害支援のノウハウ
2025.02.06
すかいらーく創業者が、社長を辞めて75歳で再起業したわけ “あえて長居させるコーヒー店”の経営に込めるこだわり
PR | 2025.02.07
プロジェクトマネージャーは「無理ゲーを攻略するプレイヤー」 仕事を任せられない管理職のためのマネジメントの秘訣
2025.02.06
落合陽一氏や松尾豊氏の研究は社会に届いているか? ひろゆき氏が語るアカデミアの課題と展望
2025.02.05
「納得しないと動けない部下」を変える3つのステップとは マネージャーの悩みを解消する会話のテクニック
2025.01.07
1月から始めたい「日記」を書く習慣 ビジネスパーソンにおすすめな3つの理由
2025.02.10
A4用紙を持ち歩いて殴り書きでアウトプット コクヨのワークスタイルコンサルタントが語る、2種類のメモ術
2025.02.05
エンジニアとして成功するための秘訣とは? ひろゆき氏が語る、自由な働き方を叶えるアプリ開発とキャリア戦略
2025.02.04
日本企業にありがちな「生産性の低さ」の原因 メーカーの「ちょっとした改善」で勝負が決まる仕組みの落とし穴
2025.02.03
「昔は富豪的プログラミングなんてできなかった」 21歳で「2ちゃんねる」を生んだひろゆき氏が語る開発の裏側
PR | 2025.02.04
能登半島地震で自宅は全壊、「これでどうやってDXするねん」 被災したサイボウズ社員と支援者らが語る災害支援のノウハウ
新人の報連相スキルはマネージメントで引きあげろ!~管理職の「他責思考」を排除~
2025.01.29 - 2025.01.29
【手放すTALK LIVE#45】人と組織のポテンシャルが継承されるソース原理 ~人と組織のポテンシャルが花開く「ソース原理」とは~
2024.12.09 - 2024.12.09
『これで採用はうまくいく』著者が語る、今こそ採用担当に届けたい「口説く」力のすべて
2024.11.29 - 2024.11.29
【著者来館】『成果を上げるプレイングマネジャーは「これ」をやらない』出版記念イベント!
2025.01.10 - 2025.01.10
片付けパパ対談【特別編】 整理術×行動術×メモ術で、仕事も人生も自在にデザイン!
2024.12.16 - 2024.12.16