はじめに
コロナウィルスの波に負けず、就活の波もやってきました。せっかくなので自分も最近ハマっているFlutter Webを利用してポートフォリオを作ろうと思いました。しかし、ポートフォリオと言うのは作品を載せる為にあるもの・・・。僕のは自己紹介ページになってしまいました。誰得！
今回実装したコードはこちらです。
要約
- Flutterはいいぞ
- 成果物はもっと早めにたくさん作っておこう
- 僕を雇ってくれませんか？
技術の選定
-
Flutter&Dart
-
GitHub Pages
できる限り労力をかけたくない・・・
特有のめんどくさがり性です。今からHTMLを書いて・・・それに合わせてCSS書いて・・・と普段からHTML/CSSを書かない私には苦痛でした。そこで何かで簡単に代用できるものを探した結果、ちょうど今ハマっていて、1ヶ月くらい勉強したFlutterにWeb開発機能があったので利用することにしました。
デプロイを簡単に済ませたい・・・
昔GitHub Pageを使ってとっても楽に済んだのと、独自ドメインを設定できた思い出もあったので、私のニーズにマッチしていると思い選定しました。
Flutterとは？
Flutter (フラッター) は、Googleによって開発されたフリーかつオープンソースのモバイルアプリケーションフレームワークである。FlutterはAndroidやiOS向けのアプリケーションの開発に利用されている。
(From Wikipedia)
マテリアルデザインによる美しいUIを利用できるフレームワークです。なのでデザインが全くできない私でも、ある程度見られるレベルのものが簡単に作れてしまいます。独自のWidgetと言う概念に慣れるまで大変ですが、慣れてしまえば、レゴブロックを組み合わせるかのように開発が出来るのでとってもに楽しいです。
動作環境
flutter doctor -vで一気に出力できます。トラブルシューティングで質問するときに結構便利です。
セットアップについて
今回はFlutterメインの記事ではないので、もし利用したい場合はドキュメントを参考にしてください。とても丁寧で分かりやすいです。
Web版を利用するにはチャンネルを切り替える必要があります。
flutter channel beta
flutter upgrade
flutter config --enable-web
これは一例ですが、更に詳しいことがドキュメントに書いてあるのでそちらを参照してください。
学習の進め方
これは私の進め方ですが、
- 公式ドキュメントに順序立ててチュートリアルがあるのでそちらをこなす。
- The Complete 2020 Flutter Development Bootcamp with Dartをこなす。（めちゃくちゃ分かりやすい！）
- 実際に自分でアプリを開発してみる
以上の流れでした。「うわ！英語のサイトばっかじゃん！出た英語ハラスメント！」と思われる方もいると思いますが、大丈夫です。
TOEIC300点台の私ですが、Google翻訳で進められました。Udemyとかだと文字起こしができて、それをGoogle翻訳のページ翻訳で訳してくれるのでノンストレスで学習ができました。ついでにリスニングの勉強にもなったかなぁと思っています。
Flutterの効率良い学び こちらの記事もオススメです。一読して自分が肌に合う学習の方法を探していきましょう。
作成のフローチャート
- ページレイアウトを考える
- ハードコーディングしつつ、レイアウトを形を作る
- ハードコーディングをソフトにしつつ、定数やWidgetは切り分けて行く
- デプロイする
プログラムについて
構成
> tree
.
├── README.md
├── analysis_options.yaml
├── assets
│ ├── FZ.otf
│ ├── SourceSansPro-Regular.ttf
│ ├── images
│ └── works
├── build
├── lib
│ ├── config
│ │ ├── assets.dart
│ │ ├── constants.dart
│ │ └── projects.dart
│ ├── generated_plugin_registrant.dart
│ ├── main.dart
│ ├── models
│ │ └── project_model.dart
│ ├── pages
│ │ └── home_page.dart
│ ├── tabs
│ │ ├── about_tab.dart
│ │ ├── blog_tab.dart
│ │ └── projects_tab.dart
│ └── widgets
│ ├── my_chip.dart
│ ├── project.dart
│ ├── responsive.dart
│ └── wrap_chip_list.dart
├── my_portfolio.iml
├── pubspec.lock
├── pubspec.yaml
└── web
analysis_options.yaml 静的解析用ファイル。これがあるとダメなコードを怒ってくれる
assets フォントや画像はここのディレクトリに打ち込みます。
lib ソースコードは基本的にここに全部入れます。
config 定数やリスト、画像のURLなど変更がしやすいようにこのディレクトリにまとめます。
models データクラスを定義しているファイルを置きます。
widgets 切り分けたWidgetをまとめています。
pubspec.yaml ライブラリの指定等をここで行います。Gemfileみたいな奴です。
使用ライブラリ
http: ^0.12.0+4
animated_text_kit: ^2.0.0
url_launcher_web: ^0.1.1+1
url_launcher: ^5.1.4
pedantic_mono: ^1.8.0
http HTTPリクエストを作成するためのライブラリです。現状まだ使用していませんが、API等と通信を行う際に利用します。
animated_text_kit テキストをオシャレな感じにアニメーションを付与してくれます。タイプライターのような演出はこのライブラリを使用しています。
url_launcher_web Flutter for WebでURLを開くにはこちらのライブラリが必要になるそうです。依存関係として下記のライブラリも必要なので忘れずにどっちも追加しましょう。
url_launcher 上記のライブラリを使う為に入れます。
pedantic_mono analysis_option.yamlの情報を取得します。詳しくはこちらを見てください。Dart/Flutter の静的解析強化のススメ
メインコードについて
冗長になってしまうので詳しくはGitHubを参照してください。一応説明として入れると
main.dart Flutterを起動すると実行されるファイル。大本です。
home_page.dart 起動後に呼び出されるホームとなるページです。このページの中にタブとしてAbout, Blog, Projectを組み込んでいます。
about_tab.dart, blog_tab.dart, projects_tab.dart タブごとのページの中身です。ここにゴリゴリにUIを実装していきます。微妙にハードコーティングが残ってるのは許してください。
ビルドする！
ソースコードを書き終えたら後はビルドするだけです。
flutter build web
上記のコマンドより、buildディレクトリの中にWebディレクトリが生成されます。それをGitHubにアップロードすることによってGitHubPagesで見ることができるようになります。
GitHubPagesに独自ドメインを設定するにはこちらを参照してください。基本的に
-
ドメインを取得する
-
取得したドメインのネームサーバーでGitHubのAレコードを4つ登録する
-
数分待つ
ことによって正常に独自ドメインを設定できると思います。リンク先はお名前.comですが、ムームードメイン等でも設定できます。調べてみると出てくるでしょう。
課題
-
パフォーマンスが悪い・・・constで指定してbuildを抑えたり、画像サイズを小さくしたり、工夫はしていますがイマイチ良くなりません。なので今詳しく勉強しているところです。
-
Blogを作っていない・・・Blogの実装をかなり迷っています。と言うのもブログが分散しすぎてて一元化できていないからです。飽き性はこれだからダメですね。
-
成果物がない・・・成果物が全くと言っていいほどありません。正直これを作るのも少し躊躇いました。
-
言うほどアピールポイントになっていない・・・現状Flutterを採用している企業も少ないので「ふ〜ん、でも君Railsできないじゃん」って言われてしまいそうです。残念。
終わりに
Flutterはめちゃくちゃ楽しいです！レゴブロックしてみたいで本当に面白いです。ぜひ今ポートフォリオサイトを作ろうか迷ってる人はFlutter for Webも選択肢に入れてみてはいかがでしょうか？
参考文献
Flutter for Web : Building a Portfolio Website
Build and Deploy a Flutter Web App
ムームードメインで購入したドメインをGITHUB PAGESに適用する