アプリ開発の常識を変える?!PWAの構成要素と開発環境

こんにちはQualium Systems Japanの天野です。

前回の『Progressive Web Appsが変えるネイティブアプリ開発の世界』ではPWA (Progressive Web Apps)のポテンシャルや事例について紹介させていただきました。

今回の記事ではもう少し突っ込んで実際にPWA開発に必要な構成要素や開発環境などを紹介します。

TL;DR この記事の要約

PWAの構成要素

  • Service Worker
  • ネイティブアプリに近いUI
  • httpsのサーバー
  • Single Page Application
  • App Manifest

PWAの開発環境

  • JavaScriptライブラリ
    • React, Angular, VueJSなど
  • UIライブラリ
    • Ionic, Framework7, Vue Materialなど
  • バックエンドとの連携
    • REST API, GraphQL, Firebase Cloud Firestoreなど

PWAの構成要素

PWAは様々なモジュールを組み合わせてできています。主なものを紹介します。

Service Worker

Service Workerはバックグラウンドで動作するJavasriptのヘルパーのライブラリです。

Service Workerを使うことでキャッシュ機能が働き、ネットワークが切れたり不安定な場合でもPWAが落ちることなく使い続けることができるようになります。

またpush通知もService Workerを使って行うことができるようになります。

push通知はService WorkerとFirebase Cloud Messagingなどを組み合わせて実装します。

これまではsw-precacheやsw-toolboxが使われていましたが、現在Googleは後継者のWorkboxを使うことを推奨しています。

なおiOS内のSafariやその他のブラウザではwebkitがブラウザのエンジンになっています。webkitへのService Workerは開発中のためiOS上のブラウザ(Safari, Chromeどちらも)ではService Workerを使ったオフラインでの動作などは使えません。

2017年の8月はじめにAppleがService Workerの開発を始めたというニュースで少し盛り上がったのですが、なかなかその後リリースされませんね。これからの進捗が楽しみです。

ネイティブアプリに近いUI

これまでスマホブラウザ内で動くwebアプリはレスポンシブ対応をしているものも多くありました。レスポンシブ対応をすることで、狭いスマホの画面でも文字や画像が小さくならずに見る事ができました。

PWAではこれをもう一歩進めてネイティブアプリに近いUIでネイティブアプリと見間違えないユーザー体験を提供できるようにしています。

例えば以下のサイトからFramework7を触って貰えば分かると思います。

https://framework7.io/

画面遷移のアニメーションとかボタンのデザインなどネイティブアプリっぽいですよね。

httpsのサーバー

PWAの条件としてサイトがhttpsで提供されている必要があります。

Firebase HostingNetlifyを使ってサイトをデプロイするとサイトが何もしなくてもhttps化されているのでお薦めです。

またGoogleがPWAをスコアリングしてくれるLighthouseというChromeのプラグインがあります。Lighthouseが条件のひとつとしてしているのはサイトのhttps化です。

Single Page Application

PWAはJavascriptを使ったSPA (Single Page Application)として実装します。

SPAはこれまで画面遷移ごとにUI全部をサーバーから受けていたWebアプリの仕組みとは違い一つのページを最初に読み出し、後はページの変更に必要な部分だけをサーバーからデータを取ってきて変更する仕組みです。

SPAにする事でページロードが速くなりPWAがよりネイティブアプリに近いレスポンスで動作するようになります。

App Manifest

App Manifest内にホーム画面に登録した際のアイコンやPWA起動時のSplashスクリーンの指定を行います。

またPWA起動後にアドレスバーを表示させるかどうかなどの設定もApp Manifest内で行います。

PWAの開発環境

PWAを開発するにあたり必要なライブラリなどを紹介します。

Javascriptのフレームワーク

PWAはJavascriptのフレームワークを使って作ることが多いです。こちらの3つのどれからのフレームワークが主に使われています。

ReactJSはビュー側だけのライブラリと言われることが多いです。どのライブラリも人気がありますが、天野はVueJSを使ってPWAを作ることが多いです。VueJSで作る理由は

  • ライブラリの仕組みがシンプルで学習コストが少ない
  • 日本語のマニュアルもしっかりしていて、英語が苦手でも情報を得ることが可能
  • 日本でコミュニティが盛り上がっていて、meetupなども多く開催されている

などになります。PWAの開発をこれからやってみたいという方はとりあえずVueJSで始めてみるのがおすすめです。

UIライブラリ

PWAはネイティブアプリのようなUIを提供するため、自前でHTML/CSSをコーディングすることなくUIのライブラリを組み合わせて実装します。

いくつか天野が触った事のあるPWAのUIライブラリをいくつか紹介します。

Ionic

IonicはAngularベースのモバイル開発のフレームワークです。もともとはiOSとAndroid両方に対応するwebview上で動作するハイブリッドアプリのフレームワークとして開発されていたため、UIもネイティブアプリに近いものを提供しています。

Ionicの次期バージョンのIonic 4はStencilJSというWeb Componentsのコンパイラが標準で搭載され、VueJSやReactJSなどAngular以外のフレームワークで動作する事が可能になるとの事です。

Framework7

Framework7もネイティブアプリに近いUIを実現するUIライブラリです。ReactJS版とVueJS版があります。

Vue Material

Vue MaterialこちらはMaterial Designを採用したモバイルUIライブラリになります。最近天野はVue Materialを使ってPWAを作るプロジェクトをやったのですが、コーディングはしやすかったですよ。

バックエンドとの連携

PWAがデータベースを連携する場合はバックエンドサービスを使います。このデータの流れはネイティブアプリと同様ですが、いくつかの選択肢があるので紹介します。

REST API

REST APIはRuby on RailsやNode.jsのExpressなどを使ってRESTのendpointsをサーバー側で実装してそれをPWAなどのクライアント側から呼ぶ方法です。

この方法はバックエンド側の実装やサーバーの設置が必要になりますが、Firebase Cloud Functionsなどを使うことで、サーバーレスな実装にする事も可能です。

GraphQL

いろんなところでREST APIに置き換わる次世代のAPIの仕組みになると言われています。

GraphQLを使うことで、基本的にはバックエンドの実装は必要なくなりデータの定義をするだけでAPI endpointsが作られAPIが呼べるようになります。

GraphQLはAPを呼ぶクライアント側から取得したいデータの内容も指定できるためAPIを呼ぶ回数やデータ量を減らすことができます。

GraphQLは自前でサーバーを立ててそこにインストールすることもできますが、GraphcoolなどのGraphQLのホスティングサービスを使うとサーバーレスで実装する事が可能です。

GraphQLはFacebookが2012年ころから内部的に使ってきた技術なのですが2015年に公開されました。Facebookで使われているので実績も問題ないですね。

Firebase Cloud Firestore

Firebaseのrealtimeデータベースはこれまでチャットなどに使われてきましたが、NoSQLのためリレーショナルデータベースの用にJOINができないなどデータの扱いに難しいところがありました。

Cloud FirestoreではCollectionというものが導入され、Collectionを使うことでユーザー情報など同じデータを持っているものはCollectionの中にDocumentとして保存する事でデータが扱いやすくなっています。

Cloud FirestoreはこれまでのFirebaseのデータベースと同じようにFirebaseベース側にインスタンスを作るだけでサーバーレスで運用可能です。

終わりに

今回はPWAの開発の開発に必要な構成要素や環境について紹介しました。

当然記事の中で全てをお伝えすることはできませんでしたが、この記事を参考にPWA開発についての詳細や最新情報などを調べられてもいいのと思います。

次回以降は記事の中で実際にPWAを実装していく記事などを書いていくつもりですので楽しみにしてくださいね。


この記事を書いた人
天野 たけし
天野 たけし
カナダ・モントリオールのコンコーディア大学でComputer Scienceの学位を取得後日本国内でプログラマとして働く。 電通アベニューAレイザーフィッシュ (現:電通アイソバー)、PayPal Japan、自身のスタートアップNijuyonなどを経て現在はウクライナのフロントエンド開発会社Qualium Systemsの日本代表としてプロジェクトマネジメントや開発に従事。 https://qualium-systems.com/ Progressive Web AppsやGraphQLなどweb界隈の新しい技術を追いかけて紹介するのが得意。 またウクライナやインドなどの海外のアウトソース先との連携やプロジェクトマネージメントの手法についてもflexyブログ内で紹介していく予定。

週1日~/リモートの案件に興味はありませんか?

週1日~/リモートの関わり方で、「開発案件」や「企業のIT化や設計のアドバザリーなどの技術顧問案件」を受けてみませんか?副業をしたい、独立して個人で仕事を受けたエンジニア・デザイナー・PM・技術顧問の皆様のお仕事探し支援サービスがあります。

お仕事をお探しの方へ

お仕事をお探しの方(無料登録)
法人の方(IT課題の相談)