1.0ハイブリッドテクノロジーズhttps://hybrid-technologies.co.jp/blogHT Blog Adminhttps://hybrid-technologies.co.jp/blog/author/ht_admin_blog/rich600338<blockquote class="wp-embedded-content" data-secret="qB80P7um6Y"><a href="https://hybrid-technologies.co.jp/blog/knowhow/20230405_2/">PWA開発（Progressive Web Apps）とは？必要な開発環境や技術を解説</a></blockquote><iframe sandbox="allow-scripts" security="restricted" src="https://hybrid-technologies.co.jp/blog/knowhow/20230405_2/embed/#?secret=qB80P7um6Y" width="600" height="338" title="“PWA開発（Progressive Web Apps）とは？必要な開発環境や技術を解説” — ハイブリッドテクノロジーズ" data-secret="qB80P7um6Y" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" class="wp-embedded-content"></iframe><script type="text/javascript"> /* <![CDATA[ */ /*! This file is auto-generated */ !function(d,l){"use strict";l.querySelector&&d.addEventListener&&"undefined"!=typeof URL&&(d.wp=d.wp||{},d.wp.receiveEmbedMessage||(d.wp.receiveEmbedMessage=function(e){var t=e.data;if((t||t.secret||t.message||t.value)&&!/[^a-zA-Z0-9]/.test(t.secret)){for(var s,r,n,a=l.querySelectorAll('iframe[data-secret="'+t.secret+'"]'),o=l.querySelectorAll('blockquote[data-secret="'+t.secret+'"]'),c=new RegExp("^https?:$","i"),i=0;i<o.length;i++)o[i].style.display="none";for(i=0;i<a.length;i++)s=a[i],e.source===s.contentWindow&&(s.removeAttribute("style"),"height"===t.message?(1e3<(r=parseInt(t.value,10))?r=1e3:~~r<200&&(r=200),s.height=r):"link"===t.message&&(r=new URL(s.getAttribute("src")),n=new URL(t.value),c.test(n.protocol))&&n.host===r.host&&l.activeElement===s&&(d.top.location.href=t.value))}},d.addEventListener("message",d.wp.receiveEmbedMessage,!1),l.addEventListener("DOMContentLoaded",function(){for(var e,t,s=l.querySelectorAll("iframe.wp-embedded-content"),r=0;r<s.length;r++)(t=(e=s[r]).getAttribute("data-secret"))||(t=Math.random().toString(36).substring(2,12),e.src+="#?secret="+t,e.setAttribute("data-secret",t)),e.contentWindow.postMessage({message:"ready",secret:t},"*")},!1)))}(window,document); //# sourceURL=https://hybrid-technologies.co.jp/blog/wp-includes/js/wp-embed.min.js /* ]]> */ </script> https://hybrid-technologies.co.jp/blog/wp-content/uploads/2023/04/202303_blog_5_1-thumbail-min.jpg312312PWAは、「Webとアプリの良いところ取り」として注目され始めています。そこで本記事では、PWAの概要、PWA開発の特徴、開発のメリット、注意点などを解説します。具体的な開発方法もご紹介していますので、最後まで目を通してください。 ハイブリッドテクノロジーズの開発サービスはこちら そもそもPWA（Progressive Web Apps）とは PWAとは、Webとアプリの両方の利点が備わっており、ネイティブアプリのように使える、スマホ向けのWebサイト / Webアプリを指します。言い換えると、スマホ上でアプリのように利用できるwebサイトです。PWAは、2015年ごろからGoogleが推奨してきましたが、当初はAndroidにしか対応していなかったため、iPhoneユーザーの多い日本における知名度はあまり高くはありませんでした。しかし、iOSも2018年にリリースされたVer.11.3からPWAへ対応するようになり、実行環境が整い始めたことから、PWA開発が改めて注目されてきています。 「デバイスに関係なく、ホームページ上にデバイスの幅に合わせてサイトを最適な形で表示するレスポンシブサイトと何がどう違うのか？」と疑問に思われるかもしれません。しかし、PWAはアプリのようにWebコンテンツをインストールできることが特徴です。 つまり、PWAなら、アイコンが表示されるので、URLをお気に入りとしてブックマークする必要がありません。 PWAの特徴やメリット、ネイティブアプリとの違いなどについて詳しく知りたい人は、以下の記事を参照してください。 関連リンク：PWA（プログレッシブウェブアプリ）とは？基本的な機能や導入メリットを解説 PWAが使用される例 PWAを導入している事例として、大手の住まい探しサイト「Suumo」が挙げられます。 Suumoはスマホの全画面にコンテンツを表示でき、通常のアプリのように利用することが可能です。膨大なデータの中から欲しい情報を抽出することを目的とする場合は、いかに早く表示させるかが鍵になります。その点、PWAは表示速度が速いため、検索サイトでは対応必須といえるでしょう。 また、最安値で航空券を探せるサイト「スカイスキャナー」もPWAを導入しており、アプリを使っているかのように使用できるため、ユーザビリティの高さから定評があります。 PWAの事例では日経電子版も外せません。オフラインでニュース記事を閲覧できるなどの機能があり、オフライン時でも操作性や画像の質が劣ることはなく、PWAの完璧な導入事例ともいえます。 参照：【SUUMO】不動産売買・住宅購入・賃貸情報ならリクルートの不動産ポータルサイト 参照：格安航空券の比較【スカイスキャナー】国内・海外・LCC飛行機チケットの最安値検索 参照：日本経済新聞 – ニュース・速報 最新情報 PWAの主な特徴 ストアダウンロードが不要 PWAはブラウザ経由でインストールするため、ストアでのダウンロード・インストールが不要である。 動作が早い ページ表示がWebブラウザ経由より2〜4倍早くなる。データをキャッシュでき、オフラインでも利用可能である。 端末の機能を利用できる プッシュ通知機能、カメラ機能、GPS情報などと連携している マルチデバイス対応 WebブラウザがPWAに対応していれば、PCやタブレットでも利用できる PWAの仕組みを構成する技術 Webアプリを一見するだけでは、そのアプリがPWAであるかどうかを見極められません。特定の要件を満たし、または特定の機能を実装していると、PWA と見なされます。Web開発者向けのMozillaの公式サイトMDN web docsでは、PWAを定義する原則について、以下のように解説しています。 Discoverable（発見可能） 検索エンジンでコンテンツを見つけられる Installable（インストール可能） アプリを端末ホーム画面に追加できる Linkable（リンク可能） URLを送ることでアプリを共有できる Network independent（ネットワーク非依存） オフラインやネットワーク環境が悪い場所でも使用できる Progressively enhanced（進化的） 基本的な機能は古いブラウザでも利用でき、最新のブラウザではフル機能が使用可能である Responsively […]