VMT TECH BLOG

FlutterでPWA

PWAを誰でも確実に簡単に作る方法を
知りたくないですか?

最近注目を集めているFlutterを使えば
簡潔にPWAが作成できます。

こんにちは、
xRシステムを20年やりながら世界で
25万人以上いるユーザがいる
ハイブリッドアプリ環境Monacaで2年連続
Monacaソムリエをいただきました。山下です。

はじめに

こんなことありますよね?
■PWAを作りたいが、どうやって作ったらよいか分からない。
■設定や環境構築がわかりにくいので挫折した。

そこで、近年注目を浴びているGoogle社リリースした
Flutterについて、特徴や基本的なことを抑えて
このブログでFlutterの将来性やPWAの作り方を
解説いたします。

Flutterとは?

2018年にGoogleがリリースしたモバイルフレームワークです。
現在GooglePlayストアに登録されている15万を超えるアプリが
Flutterで開発されたようです。

実はFlutterはDart言語という言語で作られています。

Dart言語とは?

2011年にGoogleからリリースされた言語で
JavaScriptの代替として作られており、
TypeScriptにも似ていると言われております。

実はDart言語はJavaScriptの欠点を補う目的
で作られているおり、文法構造がJavaScriptと
ほぼ同じなため、学習コストが低いので
比較的簡単に習得が可能です。

Flutterの特徴?

■クロスプラットフォーム
 では、Flutterの特徴は?と言うと
 まず初めに1ソースでWeb、iOS、Androidが
 開発できます。つまりクロスプラットフォーム
 対応が可能という事です。

 それだけでなく、Windows、MacOS、Linux
 のデスクトップアプリも開発可能な為
 選択肢が広がります。

■ホットリロードが高速
 ホットリロードとはプログラムの変更を
 瞬時に(上書きし、UIに反映させる機能です。
 つまりこれが、高速だという事です。
 ほかのフレームワークと比べても高速と
 いう事なので、開発中の効率化も図れますね。
 

■表現豊かなUIに対応
 Googleのマテリアルデザイン、Appleのクパチーノ
 デザインに対応しており、Widgetという独自のUI
 フレームワークを使って、豊かな表現が可能です。

なぜ、Flutterが注目を浴びたのか?

Dart言語自体は2018年まで開発者の仲ので
トレンドや、雇用市場にも需要がありませんでした。
では、なぜそこまで注目を浴びているのか?

実は大手企業が次世代開発にFlutterを採用
しているのです。

■Canonical(カノニカル)
 Ubuntu Linux(ウブントゥ リナックス)の開発元で
 Linux向けのデスクトップアプリ開発に取り組んで
 おり、Snap Storeにて、デスクトップアプリを公開
 しています。
 

■Microsoft
 Surface Duo(折り畳み式Android端末)で
 利用しておりデュアルスクリーン向けのAPIを
 Flutterで開発しています。
 
 
■TOYOTA
 次世代の車載器やシステムに関わるUXの
 設計・開発の一部にFlutterを採用しています。
 

FlutterでPWAを作ってみよう!!

■環境構築
 まずは開発環境です。
 PWAでWebアプリを作る前提とします。

 OSに関してはWindows、MacOS、Linux、ChromeOS
 で開発が可能です。

 開発環境はVisual Studio Code(以下VSCode)
 を使いました。ここからダウンロードすればだれでも
 無料で使えます。
 https://azure.microsoft.com/ja-jp/products/visual-studio-code/
 

 次にFlutter SDKをダウンロードします。
 https://flutter.dev/docs/development/tools/sdk/releases 
 ※2021年9月28日時点で最新はVer2.5.1です。

 VSCodeに下記拡張機能をインストール
 ■Dart
 ■Flutter
 ■Node.js Modules Intellisense

 それが終わったら、Node.jsをインストールしてください。
 https://nodejs.org/ja/
 ※Windowsでやる人はFlutter SDKとNode.js
  の環境パスを通しておいた方が良いです。
  コマンドラインで動かないので。

 これでとりあえず、開発環境は完了です。
 

■Firebaseのアカウント作成
 Flutterで開発する上でFirebaseとの相性が
 すごく良いです。
 つまりやりやすいという事です。
 フリープランでいいのでGoogleアカウントを
 持っている人はすぐ使えますので、こちらで
 アカウント登録を済ませておいてください。
 https://firebase.google.com/?hl=ja

■プロジェクト作成
 VSCode上でF1キーを押して
 「Flutter:New Application Project」と入力
 してプロジェクトを作成します。

 
 これでプロジェクトは完成です。
 実はこの時点でPWAは作成完了です。

ビルドしてデプロイしましょう!!

■Firebaseのプロジェクト作成
 次にFirebaseのサイトにログインして
 プロジェクト作成します。

 

■VSCodeにFirebase CLIをインストール
 VSCodeのターミナルのタブで下記の
 コマンドを打ちます。
 
 npm install -g firebase-tools
 
 
■VSCode上でFirebaseのプロジェクトと紐づけします。
 VSCodeのターミナルのタブで下記の
 コマンドを打ちます。
 
 Firebaseにログイン:firebase login
 初期化:firebase init
 
 初期化すると、色々と聞いてきますので、
 とりあえず、下記の選択肢を選んでみてください。
 
 Are you ready to proceed?(Y/n)
 →Yを選択
 
 Which Firebase features do you want to set up for
 this directory? Press Space to select features,
 then Enter to confirm your choices.
 →Configure files for Firebase Hosting and
  (optionally) set up GitHub Action deploys
  を選択
 
 Please select an option: (Use arrow keys)
 →Use an existing projectを選択
 
 Select a default Firebase project for this directory:
 →FirebaseのプロジェクトIDを入力
 
 What do you want to use as your public directory? (public)
 →build/webと入力

 Configure as a single-page app (rewrite all urls to
  /index.html)? (y/N)
 →Nを選択
 
 Set up automatic builds and deploys with GitHub? (y/N)
 →Nを選択

 
 firebase.jsonを開いて下記を追加
{
  “hosting”: {
    “site”:“FirebaseのプロジェクトID”, ← この一行を追加
    “public”: “build/web”,
    “ignore”: [
      “firebase.json”,
      “**/.*”,
      “**/node_modules/**”
    ]
  }
}

■ビルドして、デプロイ
 ビルドは下記コマンドで行います。
 flutter build web
 
 最後にデプロイコマンド終了です。
 firebase deploy
 
 これで、デプロイ完了でPWAになっています。
 インストール出来るので、PWAとして
 作られたという事です。
 
 簡単ですよね?
 ここまで、PWAの設定は何もしていません。

まとめ

という事で、Flutterを使えば意外と簡単に
誰でもPWAが作れることがわかりました。

JavaScriptの知識がある方はハードルが
下がるので、とっつきやすくまた、大手企業も
次世代開発に採用しているので将来性も抜群です。

ここでは紹介しきれませんでしたが、
アプリを作るうえでのネイティブ連携なども
出来るので、将来性があるフレームワーク
という実感はあります。

まだ、これから実証していきますが
弊社使っているプロトタイプツールと
連携が可能という事なので、デザイナーとの
親和性が上がり、さらに効率化が出来ると
考えるとワクワクしますね。

アプリ開発について何かあれば
こちらからお問い合わせください。

新着記事一覧

バルテス株式会社
VALTES Advanced Technology, Inc.