皆さんこんにちは、はがくんです。
ふだんはnoteで記事を書いているのですが、技術的な話はQiitaにかけ！と誰かに言われた気がするので初投稿してみます！
📗想定読者
- Flutter初心者
- Flutter WebでWebアプリのデプロイ経験がないヒト
- Flutter Webでの開発に役立つpackageが知りたいヒト
Flutterでコードをバリバリ書いている方や仕事で使いこなしてる方にとっては当たり前の内容しか書いてないと思われます。
あくまで開発経験がほとんどない方が、どんな道筋を立てて学び、モノを作れば良いのかというひとつの例を示すものです。
まだ何から始めていいのかわからない方のためになれば嬉しいです。
🤔そもそもFlutterとは
Flutter - Beautiful native apps in record time
Flutterとは、単一のコードでiOS,Android,Web,デスクトップなどあらゆるアプリケーションを作成することを可能にするフレームワークです。
今回紹介するアプリは、別にFlutter Webでなくても、HTML,CSS,Javascriptでもなんでも実装可能です。しかし、Flutterは同じコードを使ってiOSでも、Androidでも、デスクトップアプリでもたくさんのプラットフォームで動かすことができます。学習効率の高さという意味で、私はこのフレームワークが大好きです。
Flutterの効率良い学び方
私がここにだらだら書くよりも、monoさんのように最先端の情報発信をしてくれている方がいます。彼がすでに学習ロードマップを作ってくれているので、そちらを参考に学習の筋道を立てるのが良い方法だとおもいます。私も大いに参考にさせて頂きました。
The Complete 2020 Flutter Development Bootcamp with Dart
なかでも特に、Udemyのコースは理解しやすくプログラミング経験ゼロの私でもFlutterはじめの一歩を踏み出すことが出来たのでオススメのコースです。
🔍どんなものを作ったか？
詳しくはnoteにあります。
カンタンに言うと、精神分析家ボウルビィが唱えた愛着理論をベースに、自分のコミュニケーションスタイルを決定するアプリです。
中身は超単純。
Welcomeページがあって
答えを選択してもらって
タイプを表示するという単純なものです。
では、Flutter Webでアプリを作る流れを見ていきましょう。
デザインや配色を決める
いきなりコードを書く前に、デザインや色は決めておきましょう。
ロジック部分を書きながらデザインも考える。みたいなマルチタスクは集中力を散漫にしてしまいます。
結果として、モノが完成しない・・・
という地獄を避けるためにも、まずはデザインを決めます。
特にデザインの経験がない私は、Dribbbleを参考にしてデザインを決めました。
Dribbble - Discover the World's Top Designers & Creative Professionals
サイトはいろいろありますが、いっぱい見たらいいアイデアが出る！と言うほど自分の脳は便利にできていないので、サクッと決めてしまいます。
これ！というものを見つけたら、ColorZillaというChrome拡張を使って、色をピコピコとピックアップします。
そして、
const Color kBackgroundBlue = Color(0xFFF6F9FF);
const Color kPrimaryBlue = Color(0xFF609BFF);
こんな感じで一つのファイルにまとめておきましょう。
これをやることで、コードを書くときにHEXを見たり、色を探したりする手間が一気に省けます。オススメ。ってUdemyの人が言ってました。
😍便利なpackageたち
animated_text
animated_text | Flutter Package
Textウィジットだけでも文字は書けるのですが、アニメーションさせるのは意外に手間取るもの。このパッケージを使うと要所でカンタンに文字をアニメーションさせられるので、これをアイキャッチに使ってみました。
コードもとても簡単！
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には標準でExpantionPanelウィジットなんてのもあるんですが、どうも味気ないんですよね。FlutterのAnimationは実装めんどいので、手軽にAnimationできるのがいいですね！
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
これは言わずもがな。
Twitterとかnoteとか、あちこち外部のサイトにリンクを貼りたかったので、このpackageを使いました。
あとは標準のWidgetだけで何とかなります。
ここを読んでパーツを適当に配置したらOKです！
🎁Flutter Webならではの問題を解決する
Flutter webは1つのdartファイルを一気に読み込んでページを描画するため、結構ローディングが長いです。しかもローディング画面には何も出ない状態が続く為、ローディング画面は別に用意する必要があります。
flutter webでローディング画面を出す | monkey404
この辺を参考にindex.htmlにHTMLとCSSでカンタンなコードを書くだけなのでカンタンですが、意外と気付かないポイントかもしれないので、チェックしておきましょう！
🔥そしてデプロイへ・・・！
Flutter初心者の私たちは、とりあえず無料で公開まで行きたいですよね？
すると選択肢は、必然的にFirebase HostingかGithub Pagesになると思います。（公式で勧められているから）
レンタルサーバーを借りるなどの方法もありますが、とりあえずこの２つのどちらかにしておけば間違いないでしょう。
今回はFirebase hostingを選びました。なんだかんだいって拡張性が高いのは魅力です。Functionsなどと併用することでOGP画像なども生成できるようになるのはやっぱり便利。（そうやって沼に引きずり込まれ、戻れなくなる）
Firebaseの初期化からデプロイについては、以下のページが詳しいです。英語部分も翻訳してくれているので、初心者には優しいですね。
Firebase Hosting でWebサイトを公開する方法 - Qiita
ただし、今までプログラミングとかなんとかに興味がなかった初学者は、CUI。つまりコマンドを打ってファイルやPCを操作すること自体に抵抗感があったり、目的のディレクトリに移動することすらできない人がほとんどでしょう。
そんな人は、以下のcdコマンドだけでも理解しておくと、デプロイまではなんとかなると思います。いやいやバカにするなと思うかもしれませんが、意外と詰まってる人多いのでは・・・？
cdコマンドの使い方を簡単にご紹介【Windowsコマンド集】
🦄3日でデプロイできたかな？
Flutterやdartの学習が済んでいるヒトは、3日もあれば特に問題なくデプロイまで進めるハズです。学習がこれからの人は、まずはUdemyのコースで学び、この手順をたどればかならずデプロイまで進めるようになるでしょう。
プログラム経験ゼロの私もなんとかなったので、ぜひ一歩踏み出してみましょう！
アプリの中に組み込んだ心理学の法則については、noteに詳しく書いてあるので、そっちもよろしくお願いします。
あと、Twitterもあるよ。ぼくとともだちになってよ。
https://twitter.com/hagakun_yakuzai