P77～P83 第3章 APIでネイティブアプリ並の機能を実装する
カメラを使って写真を撮る
Media Capture and Streams APIのMediaDevices.getUserMedia メソッドを使用すれば実現可能
(実装コードは誌面に記載あるが割愛)
QRコードを読み込む
Shape Detection APIという、ブラウザで顔・バーコード・テキストの検出が可能となるAPI
2021年10月時点では、Google Chromeと一部のブラウザしかまだ対応していない
使用するには、GoogleChromeのアドレスバーで「chrome://flags」と入力して表示される設定画面で、「Experimental Web Platform featues」という項目をEnableにする必要がある。
(サンプルコードは誌面に記載あるが割愛)
入力した文字をブラウザで読み上げ再生
Web Search APIはｍ音声認識と音声合成といった、音声に関する機能を提供するAPI
その中のSpeechSynthesis APIを使用すれば、音声ファイルを用意しなくても、入力した内容を読み上げ可能
(サンプルコードは誌面に記載あるが割愛)
プッシュ通知の実装
PWAを導入したいという話の中で、プッシュ通知は要望の多い機能である
2021年10月現在、iOSでのWebプッシュはサポートされていない。
Webプッシュを独自実装すると複雑な実装になるため、誌面ではOneSignalというサービスを紹介
独自で実装する場合は、web.devのプッシュ通知に関する記事などが参考になる
(OneSignalの利用方法やサンプルコードは誌面に記載あるが割愛)
終わりに
- PWAの新しい機能などは、web.devの「New capabilities status」などを参考
- 筆者はPWA Nightというコミュニティの運営に参加、毎月第3水曜日にミートアップイベントを開催
![Software Design (ソフトウェアデザイン) 2021年11月号 [雑誌]](https://m.media-amazon.com/images/I/51FBG4us8xL._SL500_.jpg "Software Design (ソフトウェアデザイン) 2021年11月号 [雑誌]")
![Software Design (ソフトウェア デザイン) 2021年 11月号 [雑誌]](https://thumbnail.image.rakuten.co.jp/@0_mall/book/cabinet/1115/4910058271115_1_2.jpg?_ex=128x128 "Software Design (ソフトウェア デザイン) 2021年 11月号 [雑誌]")
P70～P76 第2章 既存のWebアプリをPWA化してみる
Webアプリをインストール可能にする
インストール可能にする事で次の様な想定が必要
- アドレスバーなどを表示しないネイティブアプリのようなUI
- アプリの切り替え画面でアプリとして認識(ex. Win + Tab, Alt +Tab)
- アプリのドロワーやアプリの管理への追加
実装方法がOS単位で異なる
Android / デスクトップの場合
殆どのブラウザで同様のインストール基準が設けられているがわずかな違いは有
誌面ではGoogle Chromeでの対応方法について解説
まず、「ウェブアプリマニフェスト」と呼ばれるJSONファイルを読み込む記述をhead内に追記
(コーディング内容は誌面に記載あるため割愛)
マニュフェストファイルのファイル名は任意でOK
インストール要件を満たすために次の5つのプロパティが必要
- short_nameまたはname
- 192×192と512×512ピクセルのアイコンを含むicons
- start_url
- displayプロパティにfullscreen、standaline、minimal-uiのどれか
- prefer_related_applicationsにture以外の値
displayプロパティでstandaloneを設定することで、ブラウザURLバーなどが表示されないネイティブアプリのようなUIで起動可能
Lighthouse6からはMaskable iconという、アイコンが円状にマスクされても表示がおかしくならないように、アイコンの内側にセーフゾーンを残したアイコンの設定が必要になった。
(無くてもインストール事態は可能であるが、Lighthouseのチェックが通過しない)
prefer_related_applicationsは、他に推奨するアプリがあるかを示すプロパティで、デフォルトfalseであり、理由が無ければそのままでOK
他のプロパティは、web.devのAdd a web app manifestやMDNのウェブマニフェストなどを参考
Service Workerの登録
上記の後、head内にService Workerを登録する記述を追記する。
Service Workerとは、ブラウザがWebページとは別にバックグラウンドで実行するスクリプトで、プッシュ通知やキャッシュ操作などの機能もこの機能で実現されており、PWAのコアの技術要素になる。
但し、アプリをインストールするだけで、処理は空でも構わない。
Service WorkerはHTTPSの環境でしか動作しないため(例外的にlocalhostでは稼働するが)、HTTPS環境でのサイト配信が必要になる。
実装結果確認方法
ここまで実装すると、デスクトップの場合はアドレスバーにインストールボタン、AndroidではMini-infobarと呼ばれるインストールを促すバナーが表示される。
iOSの場合はこれらの機能が提供されていないため、ユーザー自身がメニューを表示して、ホーム画面に追加を行う必要がある。
キャッシュのコントロール
Service Workerのスクリプト内に手動で書くこともできるが複雑な記述になる。
誌面では、簡単な記述でService Workerのコードを生成してくれるGoogle製のライブラリ「Workbox」を使用
キャッシュするアセットを、URLとリビジョンと呼ばれる任意の文字列を持ったオブジェクトの配列で指定
アセットの内容を更新する際、リビジョンを指定する事で新しいファイルを取得してれる事が可能
リビジョンの更新は手動ではなく、Workboxのビルドツールを使うことで自動で生成可能
当対応後、Chrome Dev Toolsのnetworkタブで2回アクセスすると、Sizeの部分の2回目の表示が(ServiceWorker)と変更されていれば成功
プリキャッシュとランタイムキャッシュ
上記のキャッシュはプリキャッシュと呼ばれ、Service Workerのインストール時にキャッシュ
リビジョンで管理でき、アプリの主要なリソースや、長期間キャッシュできることが分かっているアセットに利用
ランタイムキャッシュは、指定したURLにリクエストがあったときのみアセットをキャッシュ
ランタイムキャッシュは、リソースに合わせて有効期限やキャッシュ戦略と呼ばれるファイルの取得パターンを設定可能
なおキャッシュ戦略とは、「キャッシュを優先的に使用する」「ネットワークを優先してネットワーク接続が無い時はキャッシュから取得」などである。
キャッシュを活用することでオフラインのキャッシュも可能である。
P64～P69 第1章 新世代のWebアプリ PWA入門
詳細は誌面に記載有るため、一部のみ要約して抜粋。
PWAの3つの柱
Capable
最新のAPIを使用してネイティブアプリのような機能を提供する事を指す。
例)
・カメラやマイクにアクセス
・画像加工
・デバイス上に保存
今後提供されるAPI、WebAssemblyなどで、PWAはこれまで以上に機能向上が期待できる。
Reliable
アプリの信頼性を指す。
ネットワークに関係なく、高速に動作するアプリケーションは信頼性が高いということである。
特に重要と言われているのが速度で、ページの読み込み速度だけでなく、スクロールやアニメーション、ボタンをクリックしたときの反応速度など、アプリケーションのパフォーマンスはユーザー体験全体に影響する。
また、ユーザーはアプリケーションがネットワークに接続されているかどうか関係なく、不安定な接続状態やオフライン環境でも起動、使用できることを期待している。
Installable
インストールできること。
ブラウザタブではなく、スタンドアロンウインドウで実行できることを指す。
インストールされたPWAは、ユーザーのホーム画面やドック、タスクバーから起動でき、ブラウザのアドレスバーや固定メニューを表示しな全画面での起動、ネイティブアプリのような使い勝手や操作性の提供が可能である。
なぜPWAを採用するのか
PWAを採用するメリット
本質的には単なるWebアプリ
ブラウザで動作するためワンソースで対応可能
- ストアを通さずに公開可能
アップデート内容の審査待ち、リジェクト対応をしなくて済む
- 技術者が多い
ネイティブアプリに比べPWA対応できるエンジニア数が絶対的に多い
また、PWAを作成したことないエンジニアでも、HTML/CSS/JavaScriptが多くを占めるので、ハードルが低い
PWAの条件
PWAは特定の技術などを指すものではなくコンセプトである
Webアプリがどの様な状態であればPWAと言ってよいかの基準は、Googleがweb.devで提供しているPWAのチェックリストがある。
PWAのチェックリスト
コアな条件は以下の5つ
- すばやく起動してすばやく動作すること
- どのブラウザでも動作すること
- あらゆる画面サイズで表示すること
- カスタムオフラインページを提供すること
- インストールできること
より優れた体験をもたらすPWAのチェックリストの抜粋内容
- オフラインでもオンラインと同じように動作すること
- アクセシビリティに対応していること(WCAG2.0アクセシビリティ要件に合格)
- マウス、キーボード、タッチなど任意デバイスで機能すること
- 強力な権限を必要とするAPIを使用許可を求める際、使用する理由を提示すること
すべての項目に対処すると困難なので、できるところから対応していく方が良いとのこと。
Lighthouseを使ったチェック
Googleが提供するLighthouseというツールを使ってPWAの要件を満たしているかチェック可能
パフォーマンス、アクセシビリティ、SEO、ベストプラクティス、PWAの項目ごとに評価
Lighthouseは、以下の3種類の方法で利用可能
- Chrome DevToolsに統合されているものを利用
DevToolsの[Lighthouse]タブを選択
チェックしたいカテゴリと検査するデバイス(モバイル or デスクトップ)を選択
上記選択後にGenerate reportを実行(自身で試したら時間はそれなりにかかった)
開発時のパフォーマンスチェックにも利用可能
- Google Chromeの拡張機能をインストールして利用
インストールすればブラウザのツールバーから簡単に利用可能
DevToolsに慣れていない非開発者が利用する場合などにお勧め
- Nodeモジュールでコマンドラインから利用
AZ-400 更新作業
随時更新中
AZ-400当たりになると記事少ないので、メモれる範囲(試験に抵触しない範囲)で記載します。
概要
そもそも更新とは？
Azureはこの点は親切で、無料で更新プログラムを用意してくれている。
Microsoft 認定資格の更新 | Microsoft Learn
どうやって更新用プログラムを受験すればいいのか？
AZ-400取得者はログインした状態で以下のサイトを踏むと良い。
docs.microsoft.com
なお、新規の申込リンクはこちら
docs.microsoft.com
併せて、AZ-400を受験するための前提条件はこちら
docs.microsoft.com
上記サイトで何をすれば良いのか？
更新が切れる6カ月以内に以下をクリアする
- ページ内に用意されているMS Learnのプログラムを消化(※1)
- オンライン上で更新評価試験を受験し合格
※1 必須条件ではないかも
AZ-400の内容更新(2021年度)
2021年9月29日に大幅な更新が入っている模様
更新内容
試験スキルのアウトラインからダウンロードすれば良いとのことであるが、
何が変わったのか英語で書いているからなのかぱっとは読み解けない…。
(後で調べて分かれば書きます)
試験 AZ-400: Microsoft DevOps ソリューションの設計と実装 - Certifications | Microsoft Learn
[asin:B09276HP42:detail]
oktaでDefault Relay Sateが設定できてないと怒られる
【事象】
OKTAでSAML2.0のアプリ登録を手動で行った際、通信がうまくいかなかった。
そのため、設定を見直していたところ、アプリのSign Onタブを確認すると、
SAML 2.0 is not configured until you complete the setup instructions.
というメッセージが表示されている。
上部には、SAML2.0 Default Relay Stateと表示されている。
【結論】
ただの警告とのこと。
support.okta.com
なお、私が別の設定を誤っていただけであった。
結果、Default Relay Stateは設定してなくてもアクセスできた。
【補記事項】
- Default Relay State
認証が完了した後にユーザーをリダイレクトするURLを定義する箇所
但し、アプリによっては違う意味合いで利用する場合も有
![Software Design (ソフトウェアデザイン) 2021年10月号 [雑誌]](https://m.media-amazon.com/images/I/51IUMk3iCnL._SL500_.jpg "Software Design (ソフトウェアデザイン) 2021年10月号 [雑誌]")
ハニーポット
紹介されていた関連用語
トラップストリート・ペーパータウン
地図データの盗用を検知するため、地図データ中にありえない地名を埋め込む。
そうすることで、コピペで作られていた場合、独自に作成したらありえない地名が含まれる事で、盗用された事を検出できる。
過去においては、パチンコガンダム駅があまりにも有名である。(※1)
ハニートークン(※2)
攻撃者にわざと情報を与え、攻撃者の情報を後で得るための撒餌データのこと。
例えば、自分のメールアドレス + サービス名@ドメイン名のようにプラス記号の後にサービス名をメアドに付与して登録する。
そうする事で、もしspamが送られてきた際などに、メールアドレスからどのサービスから漏洩したかを判断できる。
なお、元のメールアドレスにプラス記号を付けたメールアドレスは、元のメールアドレスのエイリアスとして使えるサブアドレス拡張という仕様(RFC5233)である。(※2)
但し、これに対応していないソフトウェアやサービスは当然存在する。
※1 ネタとして書きたかっただけです…。
パチンコガンダム駅 - Wikipedia
※2 この仕様把握していなかったので、今回記事として残した。
