VMT TECH BLOG
PWAとは何ぞや？ネイティブアプリと比較してみました
■PWAとは？
どうも、Monacaソムリエの山下です。
今日はPWAについて書きます。
PWAって何ぞや？っと言う方が多いと思います。
最近スマートフォンでWebサイトを閲覧中に
「このページをホームに追加する」というアナウンスを見たことがありませんか？
あれがPWAです。
今回はPWAとはどこで使うのか、また通常アプリと比較して使い勝手はどうなのか
簡単に調べてみましたので記事を書きました。
■PWA Progressive Web Apps（プログレッシブ ウェブ アプス）
PWAとは、何か特定の技術を指しているわけではなく、Google や Mozilla が推進するプロジェクトで、
Webページでネイティブアプリのような UI/UX を提供する仕組みです。
フレームワークやツールではなく、あくまで仕組みと言う事で制約があると言うわけではありません。
細かく言うと長くなるので、以下の記事を参考にして下さい。
https://murashun.jp/blog/20171210-01.html
PWA技術について注目したい事は
プログレッシブエンハンスメント (Progressive Enhancement)を基本概念にしていると言うところです。
■プログレッシブエンハンスメントとは？
直訳すると進歩的な、高揚？増大？ちょっとわかりにくいですが。。。。
言葉を区切って考えてみると、Progressiveとは進歩的な、革新的な、進歩主義的な意味があります。
Enhancementは高揚、増大、増進とかと言う意味があります。
つまり、PWAとは革新的で常に進歩していく。それをユーザーがワクワクしながら使うと
言ったところでしょうか？っと言う私の強引な理解。。。
ただ、「Web技術」と言うのが、開発者、ユーザーともに共通した「Progressive Enhancement」
があるのでは？と考えています。
■どんなサイトがPWAになっているか？
では、今の世の中いったいどのようなサイトPWA化されているのでしょうか？
とは言っても、そんなに意識して「PWAだ」とわかって使っている人はまだ少ないと感じています。
皆さんが日頃よく使っているもので例を出すと以下のようなサイトがPWA化されています。
そう、SNSです。
Webブラウザでログインして、ホーム画面に追加してみて下さい。
※Androidのユーザーの方はホーム画面に追加しますか？みたいな通知が来るはずです。
iOS：https://bagelee.com/programming/pwa/ios-korekara-pwa/
また、利用頻度が高いと言う観点では、他にもどんなサイトがPWA化されていると思いますか？
実は日経新聞社（電子版）がPWA化されています。
https://r.nikkei.com/
確かに記事のデータをキャッシュしてしまえば、オフラインでもいいし、是非オフラインで読みたいですよね？
さらに、Wifiしかないタブレットでも、あらかじめダウンロードしておいてオフラインで見れるのは便利ですね。
その他を探してみると面白いものを見つけました。
「声のブログ」と言うものがありました。
https://voice.ameba.jp/
調べてみると、
「声で書くブログ、声で聴くブログ、声で観るブログ」をコンセプトに書き手、読み手双方にバージョンアップしたブログを提供するアメブロの新機能です。
だそうです。
最初にこれを見た時に「自分で喋る内容を書いて、動画も取ってるのかな？」と思ったのですが、
そうじゃなかったようです。
投稿者は端末に向かってしゃべるだけで、音声が活字化されブログとして公開できます。
文字と動画を同時に投稿できると言うブログです。
そりゃそうですよね、そうでなければ面倒臭いだけで誰も使われないですよね。。。
■PWAを体感してみよう。
iOSでTwitterアプリとTwitterPWAをインストールして起動速度比べてみました。
※右側になるアイコンがアプリで、左側のアイコンがPWAです。
明らかにPWAが速い。。。
起動したらPWAもアプリっぽく使えたので申し分なしでした。
PWAならいちいちアプリをストアからアップデートする必要ないし、PWAでもそのままアプリっぽく使えるし、
何と言っても、早い。
なので、アプリインストールしなくても、PWAで使ってもいいかなと思いましたね。
■どうやって開発するか？
言語は基本、前の記事で書いたハイブリッドアプリと同じHTML5、CSS、JavaScriptです。
つまりWeb技術です。
ただ、ここからの（フレームワーク、開発環境含めた）選択肢は色々あって
これからはじめたい、はじめようと思っている人はしんどいところです。
ですが、言ってみれば自由度が高い、その自由度が高い故にエンジニアも色々な方法で開発しています。
先ほども言いましたが、主な技術がHTML5、CSS、JavaScriptなので、PWAの為にWebエンジニア
が新しい言語（フレームワーク等は学習する必要はあります）を学ぶ必要はありません。
そういう意味ではハードルは低いとは思います。
そこで、まだPWAを作ったことがない、PWA初心者ない人はNuxtPWAをお勧めします。
https://pwa.nuxtjs.org/
PWA開発に必要なフレームワークがすべてそろっています。
Vue.jsが必須の為、そこは頑張って学習しないといけませんが、
比較的簡単にできると評判なので、現時点では私はこれをお勧めします。
■PWAの話をもっと聞きたい！
PWANightというコミュニティがあり、私も運営をやらせて頂いております。
PWANightとは？
コミュニティを通じてPWAの技術に関する話はもちろん、
「実際に適用するためにはどうした点を留意すればいいか？」
「顧客への提案を行う上での注意点はあるか？」等
PWAを技術やビジネス面から捉えてコミュニケーションを行います。
東京、大阪と定期的に開催していますので、そこで色々な情報交換、セッション、LTを
行ってはどうでしょうか？
皆さんでPWAを盛り上げてみませんか？皆さんのご参加お待ちしております。
https://pwanight.connpass.com/
9月に大阪でも開催予定です。
https://pwanight.connpass.com/event/143420/
何と今回は開催場所は弊社になります。
皆さん奮ってご参加下さい！！
【3D開発エンジニアを募集中】
当社で開発している3D・VR・ARアプリケーションの開発エンジニアを募集中です。
詳しい求人内容はバルテスグループ採用サイトをご覧ください。
画像をクリックいただきますと詳しい求人内容をご覧いただけます。
VMTのInstagramでは社内xR, 3D技術勉強会のコンテンツを配信中です！
是非フォローや「いいね！」をお願いいたします！
公式アカウントはこちら
新着ブログ
