見出し画像

Flutterでアプリ開発コトハジメ

福岡在住Flutter個人アプリ開発もやるエンジニア

初めまして！福岡在住のプログラマーです。
これが初note🔰です。

画像1

博多祇園餃子の鉄なべ餃子が好きです。笑


まずは自己紹介


→システム開発18年
→フリーランスになって15年目
→使用した言語やフレームワークはJava、php、VB、C#.net、javascript、jQuery、cordova等々。
システム開発のお仕事をする前は、パソコン専門店での販売員2年→DTPオペレーター1年やっていました。

バックエンドもフロント側もやっています。Androidの業務用アプリは作ったことあります。でも技術はレガシーです( ;∀;)
フリーランスですがオフィス通販会社のシステム部に常駐しているので、ほぼ社員のような働き方です。その会社はWeb通販20年くらいの歴史があり、OSやサーバーやアプリケーションの縛りでシステムの刷新が難しいので、WebシステムはJava7(websphere8.5)で動いています。それでも何度かは乗り換えました。この15年でJava1.4 →Java6→Java7(Api関連ではJava8使っています)。Javaの最新バージョンって何だろうな( ;∀;)…って感じです。

個人アプリを作ろうとずっと(10年くらい…笑)思いながら出来ずにいました。MacBook proを今年購入し、今度こそアプリを作るぞ！とSwiftUIを勉強していた時にFlutterを知り、こっちの方が取り掛かりやすいぞ！と乗り換えました。笑
コロナ自粛期間中の今年4月からFlutterをYouTube見ながら勉強しています。
今年中にアプリ2本リリースが目標です☆


Flutterを選択した理由

アプリ作成を始める前にまずどの言語で作ろうかなと考えると思います。
種類分けするなら以下のようになると思います。
・ネイティブアプリ
　　iOS→Objective-C、Swift、SwiftUI
　　Android→Java、Kotlin
・HTML5ハイブリッドアプリ(*1)
　　Cordova(*2)
・クロスプラットフォームアプリ(*3)
　　Flutter(Dart)、React Native(JavaScript)

(*1)Android OSやiOSに標準で組み込まれているWebView上で動作する（HTML/CSS/JavaScript）アプリです。
(*2)ハイブリッドアプリの必要機能を実装しデバイス上のネイティブ機能（カメラ、GPSなど）の呼び出しをするためのインターフェイスを提供しています。インターフェースにない機能はネイティブコードでプラグインを作成する必要があります。
(*3)iOS、Android、Windowsなど複数の動作環境で作動するアプリです。ネイティブ情報にアクセスするためにはAPI呼び出し、なければ自作が必要です。全てがクロスプラットフォームではない。

画像2

2013年からののアプリ関連のキーワードのトレンドです。(すべての国)
Flutterが急速に伸びてきていますね！


私が作ったAndroidの業務用アプリはCordavaを選択しました。なぜ選んだかというとWebView上で動作する…つまりWeb画面なら業務で作成経験もあるし簡単だ！という発想です。作成した2014年頃HTML5ハイブリッドアプリがアプリ界隈で話題になっていたこともあります。新しもの好き♡
iOSでも使うかもという要件が最初ありましたが、Bluetoothを使って自動車のナビを操作する機能をJavaで実装したのでAndroidオンリーのアプリになりました(*´Д｀)
画面はHtmlとAjaxとjquery mobileで作成し、ヘッダーとフッターにネイティブでのボタンやテキストを配置しています。WebViewは表示が遅いという記事も見ましたが、情報量も多くないのと詳細情報は非同期で必要な時に取得する作りにしているのでそんなに遅く感じなかったです。
Webサイトとアプリで同じ画面を表示することも出来ます。改修コストの軽減にもなるし、今あるWebサイトからさくっとアプリを作れます。
要件によっては◎。

HTML5ハイブリッドアプリは一応経験があるので、次はネイティブアプリを作ってみよー！と思ってSwiftの勉強を始めました。画面のUIの実装やイベント処理なかなかメンドクサイ。同じアプリをAndroidでも作ろうと思うと、二度手間だーと感じました。
そんな時に知ったのがFlutterです。
一つ作ればiOSアプリもAndroidアプリも作れるってお得やん！
FlutterはGoogle製のフレームワークで正式リリースされてます。リリースも頻繁で乗っかっていて損はないなと思いました。DartはJavaと文法も似ていて同じクラスベースのオブジェクト指向言語なのでJava歴が長い私には入りやすい。
これからFlutter一択でアプリ開発頑張ります(^_-)-☆


Flutterアプリ作成の環境構築

開発用PC：16インチ MacBook Pro (2020年1月購入)
いつもはWindows＋23インチワイドモニターでWebシステム開発をしてるので、16インチノートはアプリ開発するには画面が小さく感じます。家での作業用に外部モニターを買おうかな。あと、キーボードも。
画面小さいけどカフェで開発が出来るのはノートパソコンのメリットですね。

インストールしたもの
・xcode→App Storeから。Flutterでの開発には必要ありませんが、先にSwiftUIの勉強をしてたので入れてました。iPhoneやiPadなどのシュミレーターも一緒にインストールされるので入れておいたほうがいいです。

・Android Studio→vscodeと迷いましたが、Androidアプリ開発で少し使ったことがあったので選びました。Webシステムの開発ではEclipse使っています。

・Flutter→FlutterプラグインはAndroid Studioからインストール

@henjiganai さんのブログを参考に環境構築しました♪
Flutter実行環境の構築(Android StudioとXcode)


Flutterの勉強でしたこと

わたしは教本を買ってやった気になるタイプなので、今回はまずやってみる！がテーマです。自宅の本棚には色んな言語やフレームワークの本がたくさんあります。どれくらい読んだかな( ;∀;)

１、ブログを参考にまずアプリ作りました
　Flutter でモバイルアプリを作ってみる 入門編① 〜ヘッダーとフッター〜
　Flutterでモバイルアプリを作ってみる入門編②~ボディ~

画像3

出来たー☆

２、YouTubeでFlutterに関する勉強動画をたくさん見ました
　KBOYのFlutter大学
Flutterでのアプリ開発をプレビューしてくれてます。Kboyさんの人柄にも惹かれてオンラインサロンにも入校しました(#^^#)

Flutter Day
Flutter UI - Speed Codeが見てて楽しい。こんなこと出来るんだと参考になります。出来上がっていく過程を見るとスッキリしますね。


勉強用に小さなアプリを作ってみる

今までアプリを作ろうと思って実現出来なかった理由は、
壮大なアプリ(社会貢献度、話題性)を考える → 収益を考えウキウキ → アプリストアで似たのを発見 → 諦める　が多かったと自己分析しています。笑
なので、まずは誰にも必要とされなくてもいいじゃないか！収益なんて気にするな！ということで、ちっちゃいアプリを作ろうと思います。

また経過を報告したいと思います。

この記事が気に入ったらサポートをしてみませんか？