学習時間 | 12時間 |
---|---|
難易度 | 中級 |
質問投稿 | 可 |
【Vue.js/Firebase】標準的バス情報フォーマットに対応したPWA形式の時刻表アプリを作ろう!
Firebase+Vue.jsで、PWAによる時刻表アプリを作成します。時刻情報は、世界的に使われる標準的なバス情報フォーマットであるGTFS形式のデータに対応し、Cloud Function により WebAPI を構築します。
世界的にも注目を集めているPWAに対応した時刻表アプリの開発
なぜ、PWAが注目を集めているのか?
PWAはGoogle推奨の技術で、ネイティブアプリのような快適な操作をWebアプリケーションで実現したものです。PWAではJavaScriptの実行環境であるService Workerという技術が使用されています。
これまで、日本のモバイル市場はiOSのシェアが高く、iOSで利用できないPWAはあまり注目を集めることはありませんでした。しかし、2018年3月のアップデートにより、iOS/Safariの環境でService Workerが利用可能になり、Service Workerへの対応環境は40%から80%へと急上昇しました。
元々Androidのシェアが高い海外では、すでにPWA対応のサイトはかなり増加しており、Airbnb、Spotify、OYOといった有名企業をはじめ、多くの企業がPWAに対応し、実際にその恩恵を受けています。昨年に開催されたChrome Dev Summit 2019にて、PWA導入サイトの事例として取り上げられたOYOでは、ページの読み込み時間が最大79%減、ページ遷移にかかる時間は最大76%減に改善され、前年比でDAU(1日あたりのアクティブユーザー)4倍を達成した。これらの事実から、日本の企業でもPWA導入の流れが一気に加速することが予想できます。
ハンズオン形式でPWA開発の基本を学ぶ
本教材では、実際に用意されたPWAサンプルをもとに、ファイル構成の確認からはじまり、それぞれのコードが何を意味しているのかについて、順を追って解説します。次にJavaScriptフロントエンドフレームワークのVue.jsを導入して滑らかなページ遷移を実装します。(ここでは、Vue.jsをこれまで触ったことがない人でも魅力を感じてもらえるように、Vue.jsがどのようなものなのか、Vue.jsを使った場合と使わなかった場合を比較しながら説明を加えてます。)
さらに、外部API(Google Maps API)を使った開発、FirebaseとNode.jsを使用したWEB APIの自作、Vue.jsととても親和性の高いOnsen UIを利用した画面遷移についても学んでいきます。
学習内容
- Firebase(Functions,Hosting,Storage)を利用し、サーバーレスアーキテクチャの基本を学びます。
- ネイティブアプリケーションのような動作を行うPWA開発の基本を学びます。
- Firebase Functions を利用することで、Web APIを作成します。
- Google Maps を組み込む方法を学びます。
- 世界的に使われる標準的なバス情報フォーマットであるGTFS形式の基本を学びます。
- Onsen UI を利用した画面遷移を学びます。
実際に作成するサービスのイメージ
本教材を通して身に付くこと
- Firebase(Functions,Hosting,Storage)を利用したサーバーレスアーキテクチャの基礎
- ネイティブアプリケーションのような動作を行うPWA開発の基礎
- Firebase Functions を利用したWeb API作成方法
- Google Maps APIを使った開発方法?? 標準的なバス情報フォーマットであるGTFS形式の基礎
- Onsen UI を利用した画面遷移方法
この教材の対象者
- プログラミングの経験はあるものの、プロダクトを作成したことはない方
- Web API を利用するだけでなく、作成してみたい方
- 条件分岐やループ、配列などの基本概念を学んだ後のレベルアップをしたい方
受講における必要条件
- HTML/CSSの基礎知識
- JavaScriptの基礎知識
- 条件分岐やループ、配列などのプログラミングの基本概念
学ばないこと
本教材は、ループや条件分岐、配列といったプログラミングの基本概念を学んだ方のレベルアップとして、アプリケーションを作成することを目的としているため、JavaScriptやHTML、CSSの基礎知識の解説は行いません。ただし、本教材内で利用するCSSのプロパティに関しては、説明致します。
本教材で質問対応可能なOSや環境
- Windows OS
Windows以外の環境でも作成可能ですが、質問対応はWindowsのみとさせていただきます。