Flutter Webを使って3日でWebアプリをデプロイするまでのロードマップ

皆さんこんにちは、はがくんです。

[はがくん＠検索していくぅ薬剤師｜note](https://note.com/our_evidence)

ふだんはnoteで記事を書いているのですが、技術的な話はQiitaにかけ！と誰かに言われた気がするので初投稿してみます！

## 📗想定読者

- Flutter初心者
- Flutter WebでWebアプリのデプロイ経験がないヒト
- Flutter Webでの開発に役立つpackageが知りたいヒト

Flutterでコードをバリバリ書いている方や仕事で使いこなしてる方にとっては当たり前の内容しか書いてないと思われます。

あくまで開発経験がほとんどない方が、どんな道筋を立てて学び、モノを作れば良いのかというひとつの例を示すものです。

まだ何から始めていいのかわからない方のためになれば嬉しいです。

## 🤔そもそもFlutterとは

[Flutter - Beautiful native apps in record time](https://flutter.dev/)

Flutterとは、単一のコードでiOS,Android,Web,デスクトップなどあらゆるアプリケーションを作成することを可能にするフレームワークです。
今回紹介するアプリは、別にFlutter Webでなくても、HTML,CSS,Javascriptでもなんでも実装可能です。しかし、Flutterは同じコードを使ってiOSでも、Androidでも、デスクトップアプリでもたくさんのプラットフォームで動かすことができます。学習効率の高さという意味で、私はこのフレームワークが大好きです。
[Flutterの効率良い学び方](https://medium.com/flutter-jp/flutter-learning-c5640c5f05b9)

私がここにだらだら書くよりも、monoさんのように最先端の情報発信をしてくれている方がいます。彼がすでに学習ロードマップを作ってくれているので、そちらを参考に学習の筋道を立てるのが良い方法だとおもいます。私も大いに参考にさせて頂きました。

[The Complete 2020 Flutter Development Bootcamp with Dart](https://px.a8.net/svt/ejp?a8mat=3BOCP3+3E1WKA+3L4M+BW8O2&a8ejpredirect=https%3A%2F%2Fwww.udemy.com%2Fcourse%2Fflutter-bootcamp-with-dart%2F)

なかでも特に、Udemyのコースは理解しやすくプログラミング経験ゼロの私でもFlutterはじめの一歩を踏み出すことが出来たのでオススメのコースです。

## 🔍どんなものを作ったか？

[](https://note.com/our_evidence/n/n4429d46b40ee)

詳しくはnoteにあります。

カンタンに言うと、精神分析家ボウルビィが唱えた愛着理論をベースに、自分のコミュニケーションスタイルを決定するアプリです。

中身は超単純。

![コメント 2020-10-08 221854.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/158786/25b8f3fc-3b51-8cce-57ad-abbac36a0267.png)


Welcomeページがあって

![コメント 2020-10-08 221937.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/158786/5e516f0e-f044-7000-21ab-e9790500dcce.png)


答えを選択してもらって

![コメント 2020-10-08 222018.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/158786/4012b8e7-40b9-f3e1-66e9-d7815979ec10.png)


タイプを表示するという単純なものです。

では、Flutter Webでアプリを作る流れを見ていきましょう。

## デザインや配色を決める

いきなりコードを書く前に、デザインや色は決めておきましょう。

ロジック部分を書きながらデザインも考える。みたいなマルチタスクは集中力を散漫にしてしまいます。

結果として、モノが完成しない・・・

という地獄を避けるためにも、まずはデザインを決めます。
特にデザインの経験がない私は、Dribbbleを参考にしてデザインを決めました。

[Dribbble - Discover the World's Top Designers & Creative Professionals](https://dribbble.com/)

サイトはいろいろありますが、いっぱい見たらいいアイデアが出る！と言うほど自分の脳は便利にできていないので、サクッと決めてしまいます。

これ！というものを見つけたら、ColorZillaというChrome拡張を使って、色をピコピコとピックアップします。

[ColorZilla](https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=ja)

そして、

```dart
const Color kBackgroundBlue = Color(0xFFF6F9FF);
const Color kPrimaryBlue = Color(0xFF609BFF);
```

こんな感じで一つのファイルにまとめておきましょう。

これをやることで、コードを書くときにHEXを見たり、色を探したりする手間が一気に省けます。オススメ。ってUdemyの人が言ってました。

## 😍便利なpackageたち

**animated_text**

[animated_text | Flutter Package](https://pub.dev/packages/animated_text)

Textウィジットだけでも文字は書けるのですが、アニメーションさせるのは意外に手間取るもの。このパッケージを使うと要所でカンタンに文字をアニメーションさせられるので、これをアイキャッチに使ってみました。

コードもとても簡単！

```dart
child : AnimatedText(
                alignment: Alignment.center,
                speed: Duration(milliseconds: 1000),
                controller: AnimatedTextController.loop,
                displayTime: Duration(milliseconds: 1000),
								// ↓ このListだけ変えればすぐに使える親切仕様！
                wordList: ['animations.', 'are.', 'easier.', 'now.'],
              ),
```

**slimy_card**

[slimy_card | Flutter Package](https://pub.dev/packages/slimy_card)

今回のアプリは単純ですが、テキスト量が多く、最初から全部見せておくと少々うるさい。したがって、読みたいヒトだけ開いて読んでくれる仕様にしたかったので、slimy_cardにお世話になりました。

Flutterには標準でExpantionPanelウィジットなんてのもあるんですが、どうも味気ないんですよね。FlutterのAnimationは実装めんどいので、手軽にAnimationできるのがいいですね！

```dart
SlimyCard(
      color: Colors.red,
      width: 200,
      topCardHeight: 400,
      bottomCardHeight: 200,
      borderRadius: 15,
			// ↓ ここに好きなWidgetを配置するだけ！カンタン！
      topCardWidget: myWidget01(),
      bottomCardWidget: myWidget02(),
      slimeEnabled: true,
```

**url_launcher**

[url_launcher | Flutter Package](https://pub.dev/packages/url_launcher)

これは言わずもがな。

Twitterとかnoteとか、あちこち外部のサイトにリンクを貼りたかったので、このpackageを使いました。

あとは標準のWidgetだけで何とかなります。

[Widget catalog](https://flutter.dev/docs/development/ui/widgets)

ここを読んでパーツを適当に配置したらOKです！

## 🎁Flutter Webならではの問題を解決する

Flutter webは1つのdartファイルを一気に読み込んでページを描画するため、結構ローディングが長いです。しかもローディング画面には何も出ない状態が続く為、ローディング画面は別に用意する必要があります。

[flutter webでローディング画面を出す | monkey404](https://daichan.club/flutter/79004)

この辺を参考にindex.htmlにHTMLとCSSでカンタンなコードを書くだけなのでカンタンですが、意外と気付かないポイントかもしれないので、チェックしておきましょう！

## 🔥そしてデプロイへ・・・！

Flutter初心者の私たちは、とりあえず無料で公開まで行きたいですよね？

すると選択肢は、必然的にFirebase HostingかGithub Pagesになると思います。（公式で勧められているから）

レンタルサーバーを借りるなどの方法もありますが、とりあえずこの２つのどちらかにしておけば間違いないでしょう。

今回はFirebase hostingを選びました。なんだかんだいって拡張性が高いのは魅力です。Functionsなどと併用することでOGP画像なども生成できるようになるのはやっぱり便利。（そうやって沼に引きずり込まれ、戻れなくなる）

Firebaseの初期化からデプロイについては、以下のページが詳しいです。英語部分も翻訳してくれているので、初心者には優しいですね。

[Firebase Hosting でWebサイトを公開する方法 - Qiita](https://qiita.com/gupuru/items/25a6722f6f802d3a5250)

ただし、今までプログラミングとかなんとかに興味がなかった初学者は、CUI。つまりコマンドを打ってファイルやPCを操作すること自体に抵抗感があったり、目的のディレクトリに移動することすらできない人がほとんどでしょう。

そんな人は、以下のcdコマンドだけでも理解しておくと、デプロイまではなんとかなると思います。いやいやバカにするなと思うかもしれませんが、意外と詰まってる人多いのでは・・・？

[cdコマンドの使い方を簡単にご紹介【Windowsコマンド集】](https://eng-entrance.com/windows-command-cd)

## 🦄3日でデプロイできたかな？

Flutterやdartの学習が済んでいるヒトは、3日もあれば特に問題なくデプロイまで進めるハズです。学習がこれからの人は、まずはUdemyのコースで学び、この手順をたどればかならずデプロイまで進めるようになるでしょう。

プログラム経験ゼロの私もなんとかなったので、ぜひ一歩踏み出してみましょう！

アプリの中に組み込んだ心理学の法則については、noteに詳しく書いてあるので、そっちもよろしくお願いします。

https://note.com/our_evidence/n/n4429d46b40ee


あと、Twitterもあるよ。ぼくとともだちになってよ。
https://twitter.com/hagakun_yakuzai