へっぽこSEが◯時間でFlutter(iOS、android、web)で2Dゲームアプリを作ってみる(1)

どうも、すえきあおいです。

今日からFlutterで2Dゲームを作り始めます。まずは準備編。

MacにFlutter、Xcode、android studioをインストールしてシミュレータが起動するところまでやってみました。

 

簡単に。Flutterってナニ?

まずFlutterってナニ( ? _ ? )って人のためにWikiの説明貼っときますね。一応。

Flutter は、Googleによって開発されたフリーかつオープンソースのモバイルアプリケーションフレームワークである。

まぁ、言われてもピンとこないと思うんですが、、、要はモバイルアプリ、Webアプリを簡単に作るための道具ですね。

こんなのも作れちゃいます。

Flutter - Beautiful native apps in record timeFlutter SDK is Google
Flutter - Beautiful native apps in record time flutter.dev
Flutter - Beautiful native apps in record time

 

使ってみた感じは、ウィジェットを選んで、配置していくだけな感じなので、Java、PHP、Python、JavaScript、Swiftなどいろいろ触ってきた私ですが、一番楽チンでした。

いろんなウィジェットが用意されてて、私のような素人が自分で作り込むより957倍イケてるUIが10分の1の時間でサクッと作れちゃいます。

ちなみに言語はDartです。

 

Flutterのステキなところ

個人的にとても良いと思っているのが、以下3つの点です。

  • デバイスごとにアプリ作る必要がない(WebもiOSもAndroidも、全部一つのコードでイケる!)
  • ホットリロードのおかげで開発が爆速&快適
  • ウィジェットが豊富
  • 新しい(2018年12月4日にFlutter 1.0 のリリースが発表された)

特に一番上はかなりアツいですね。以前SwiftでiOSアプリ作ったんですが、あれってAndroidには対応してないのでAppStoreだけじゃなくGoogle Playにも出したいって思ったらAndoroid用に別でアプリ作んないとダメだったんですよ。もちろん、モバイルアプリなのでWEBにも対応してなくて、ブラウザ上で動かしたい場合はそれはそれで別で作る、みたいな。

だりーよ!

って感じじゃないですか。正直。だってテストも3回やるんですよ?アリエナイ。

会社でチームで開発とかなら良いですが、私はコミュ障ぼっちで一人シコシコ開発してるだけなので、そんなだるい事やってたらゲロ吐いて倒れちゃいますよ。

それがね、Flutterだと一回作ればあとはそれぞれのデバイス向けにビルドしてくれるという優れモノ。もちろん、開発時もAndroidだとこんな感じ、iPhoneだとこんな感じで見えますよ、というのもわかる。

両方のシミュレータを起動させて並べて動作を見るのだ。こんな感じで。

 

ちなみに、仕事でGCP(Google Cloud Platform)関連の講師したり自分でもガッツリ使ってる関係で、Flutterも使ってみようと相成りまして。ちょうど一年前にFlutterでアプリ作って、面白かったんでまた作りたいと思いつつ、時間が空いちゃいましたー

for webはまだ試してないんですが、今回早速やってみるつもりです。

 

Flutter、Xcode、android studioをインストールの手順(Macの場合)

XcodeはiOSシミュレーション用、android studioはAndroidシミュレーション用。

うーん。これ読みながらそのままやれば、普通にできます。日本語で書き直すのもアホらしいので、リンクだけ貼っときますね。

macOS installHow to install on macOS.
macOS install flutter.dev
macOS install

 

Mac買い換えたので全部インストールし直しで時間かかりました。セットアップ含め全部で2時間くらいかかった(白目)

その隙にこの記事を作りました。

 

Flutter for webを有効にする

どうせなので、最初にfor webの設定もやっちゃいます。

for webを使うにはbeta版のflutterにアップグレードする必要があり、下記手順で設定しました。(所要時間:5分)

Building a web application with FlutterInstructions for creating a Flutter app for the web.
Building a web application with Flutter flutter.dev
Building a web application with Flutter

iOS、androidに加え、Chromeも使えるようになりました。

android studioで見たときもこんな感じ。

実行してみます。

良い感じ。そしてちゃんとレスポンシブになってる。

 

余談:アプリ開発中の待ち時間の有効利用

アプリ開発って結構待ち時間多いです。ダウンロードしたりインストールしたり、あと(今はかなり改善されたけど)デプロイとかリロードも。数分なんですけど、これが頻繁にあるとイチイチ集中力が途切れちゃうんですよ。

で、ちょっと待ってる間にYouTubeとかAmazonとか見てたら、帰ってこれなくなったりして。

で、良い方法を思いつきました。

 

待ってる間に、作業ログをブログに書けば良いんじゃね!?ってね。

そしたらブログも更新できるしアプリ開発も中断しないしで、一石二鳥やん!とね。思い付きましてね。

最近、一石二鳥以下のことってやる気にならない自分がいます。

 

次回に続く!

末岐 碧衣
  • 末岐 碧衣
  • フリーランス のシステムエンジニア。独立後、一度も営業せずに月収 96 万円を達成。1986年大阪生まれ。早稲田大学理工学部卒。システムエンジニア歴 12年。
    2009年、ITコンサルティング企業に入社。3年目でコミュ障が爆発し人間関係が崩壊。うつにより休職するも、復帰後はコミュ障の自覚を持ち、「チームプレイ」を徹底的に避け、会社組織内においても「一人でできる仕事」に専念。社内外から評価を得た。
    無理に「チームプレイ」するよりも「一人でできる仕事」に専念した方が自分も周囲も幸せにできることを確信し、2015年フリーランスとして独立。