SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

UWPアプリ開発の最前線

Windows 10 1803の新機能「PWA」とは?
PWAのUWPアプリ化を試してみる

UWPアプリ開発の最前線 第7回


  • X ポスト
  • このエントリーをはてなブックマークに追加

 2018年春のWindows 10の大型アップデート「1803」の新機能の一つに、Progressive Web Apps(PWA)のサポートがあります。PWAとは何でしょう? 今回はその解説とともに、PWAをUWPアプリに変換する方法を試してみます。

  • X ポスト
  • このエントリーをはてなブックマークに追加

  • 適用バージョン:Windows 10 version 1803(build 17134)以降

はじめに

 PWAは、Googleが提唱し、Microsoftもプッシュしています。先日開催されたBuild 2018で「Progressive Web Apps」または「PWA」のタグが付けられたセッションは10件もありました(ちなみに、前回・前々回で紹介した「timeline」を検索すると2件しかありません)。

 GoogleもMicrosoftも推すPWAですが、デスクトップアプリやスマホアプリの開発者にとっては耳慣れない言葉だと思います。TwitterアプリがPWA化したという最近のニュースで知った人も多いのではないでしょうか。そして、MirosoftのWebサイト「開発者向けの最新の Windows 10 機能」でPWAの解説を読んでみても(次の画像)、ちょっとピンと来ないだろうと思います。なぜなら、PWAとはWebサイトの作り方の話だからです。

MicrosoftのWebサイトに掲載されているPWAの解説
MicrosoftのWebサイトに掲載されているPWAの解説

 そのWebサイトの話が、なぜUWPアプリに関係するのでしょうか? それは、PWAのWebサイトを表示するUWPアプリを作れるから、です。それも、ただ表示するだけではありません。UWPアプリですからMicrosoftの「ストア」で配布できるのはもちろんのこと、PWAのJavaScriptからUWPのAPIを利用できるのです。

 今回の記事は、前半でPWAについて解説し、後半では実際にPWAをUWPアプリ化してみて、そのメリットを確かめます。

対象読者

  • PWAに興味のある人
  • Webアプリを作っている開発者
  • UWPアプリを作っている開発者

必要な環境

 サンプルコード(GitHub)を試してみるには以下の環境が必要です。

  • Windows 10 1803以降
  • Visual Studio 2017 Version 15.7以降(無償のCommunity Editionで可)
  • UWP用Windows 10 SDK:10.0.17134以降

PWAとは?

 Progressive Web Apps(PWA)という用語は、2015年にGoogleのエンジニアが作りました。Chromeだけでなく、多くのWebブラウザでサポートされつつあります。

 すでにPWAは幾つも登場しています。後ほどUWPアプリ化を試してみる「モバイル版Twitter」のサイトもPWAです。

PWAのコンセプト

 Googleの開発者向けWebサイトのProgressive Web Appsのページでは、3つの特徴が述べられています(次の画像)。このような特徴を持ったWebサイト(Webアプリ)をPWAと呼ぼう、というわけです。

GoogleのProgressive Web Appsのページ
GoogleのProgressive Web Appsのページより
  • Reliable(信頼性):不安定なネットワーク状況であっても、即座にロードし、接続エラーを表示しません
  • Fast(高速):なめらかなアニメーションや引っ掛かりのないスクロールで、ユーザーとのやりとりに迅速に対応します
  • Engaging(エンゲージメント):没入型ユーザーエクスペリエンスを備え、デバイス上のネイティブなアプリのように感じられます

 ざっくり言ってしまえば、「Webアプリをネイティブアプリみたいにしよう!」というイメージですね。

PWAの要件

 いくらコンセプトを力説されても、ピンと来ないかもしれません。やはり開発者としては、「具体的にWebサイトをどうするとPWAになるのか?」を説明してもらわないと分かりにくいものです。Googleのチェックリストもありますが、それよりも短いMicrosoftのPWA要件を紹介しておきます。

必須の要件

 次の3項目は必須です。HTTPSは、個人開発者にとってはちょっとハードルが高いかもしれません。例えば、AzureのWebサイトでは本稿執筆時点で年額8千円弱です(無料の認証局「Let's Encrypt」もあります)。

  • HTTPS:PWAを公開するWebサーバーはHTTPSでなければなりません。サービスワーカーやその他のPWAテクノロジは、安全な接続でのみ動作します(開発時のローカルホスト接続を除く)
  • Service workers(サービスワーカー):オフラインサポートなどを行うJavaScriptのコードです
  • Web app manifest(Webアプリマニフェスト):Webサイトに置くJSONファイルです。Webアプリの情報(アイコンやURLエントリポイントなど)を記述します

 サービスワーカーとWebアプリマニフェストがどのようなものかは、後ほど改めて紹介します。

追加の要件

 必須ではありませんが満たすことが望ましい要件として、次の4項目が挙げられています。

  • Cross-browser compatibility(ブラウザ間の互換性):さまざまなブラウザと環境でテストしてください
  • Responsive design(レスポンシブデザイン):UXをユーザーのデバイスに適合させてください。画面のサイズ、マウスかタッチかなど。
  • Deep linking(ディープリンク):サイトの各ページを一意のURLに結び付けます。Windowsでいえば、「共有」や「タイムライン」でその画面が復元できるように
  • Best practices(ベストプラクティス):Sonarwhal linterのようなコード品質ツールを使用して、アプリの効率、堅牢性、安全性、アクセシビリティを最適化してください

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
EdgeのPWAサポート状況

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
UWPアプリ開発の最前線連載記事一覧

もっと読む

この記事の著者

biac(ばいあっく)

HONDA R&Dで自動車の設計をやっていた機械屋さんが、技術の進化スピードに魅かれてプログラマーに。以来30年ほど、より良いコードをどうやったら作れるか、模索の人生。わんくま同盟の勉強会(名古屋)で、よく喋ってたりする。2014/10~2019/6 Microsoft MVP (Windows Devel...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/10837 2019/11/10 21:24

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング