PWA Night vol.15 ～テクニック/API～ に行ってきたメモ #pwanight

はじめに

• Next.jsとは
  • Reactのフレームワーク
  • zeitという会社がつくってる
• AMPとは
  • Accelerated Mobile Pages
  • 用意されたタグを使って、ルールに準拠したページを作ると、キャッシュしてもらえる
  • `amp-validator`でチェックされる
• AMPのタグ
  • 結構な種類のタグがあるので、割となんでもできる
  • ただGoogleにホスティングされたものを使うことになる
    • 障害が出たら、もれなくページに影響が出る・・・

Next.js x AMP

• Next.jsでSSRして、AMPを使う事例をリリースした
  • AMPは使うけど、AMP Cacheは使わない
  • ちょっと特殊な使い方かも
• Next.jsでは、`withAmp()`でコンポーネントを囲むだけでAMP対応できる

Next.jsのクセ

• prodモードとdevモードで挙動が異なる
• 静的なページの場合
  • prod: 事前にHTMLに変換されてSSRの処理をスキップ
  • dev: 毎回ビルドされて、SSRされる
• 静的なページかどうかは、`getInitialProps()`が生えてるかどうか
  • あるなら動的、ないなら静的
• すべてのページを静的にするのは、現実的ではない
  • incrementalにビルドできないので
  • https://nextjs.org/blog/next-9-3#next-gen-static-site-generation-ssg-support
  • 新しい機能が検討されてるところ

AMP Validator

• Next.jsで開発している間、内部的に常にチェックしてくれる
• ただ常に怒られる
• ので、条件指定してignoreできるようにPRを出した

AMP Optimizer

• AMPのレンダリングを高速化してくれる便利なやつ
  • フォントのプリロードとか
• ただしprodモードでは、SSR中に必ず実行される
• しかし重い
• そもそもSSRが重いのに、さらに重い
• これもカスタマイズできるようにPRを出した

その他

• 不満
  • ベストプラクティスのスコアが低い
  • 型がない
• 不満はあるし制約も多いけど、エッジの技術はそういうもの
• 世界にもまだない問題が多いので、チャレンジングではある

会長「俺が世界を1mmでも良くする！」

Barcode Detection API

• QRコードリーダーをつくった
  • 以前に作ったやつを再実装した
  • https://github.com/KanDai/simple-qr-reader
  • Chromeでフラグを立てる必要あり
• 処理の流れ
  • まず`getUserMedia()`で端末のカメラの映像を取得
  • `new BarcodeDetector()`して、`detect(videoElement)`すると読み取れる
  • `rawValue`で値までそのまま取れる
• canvasに渡してピクセル解析する必要がなくなった

Face Detection API

• ブラウザでかんたんにFaceトラッキングできるAPI
• 全体的な顔の位置だけでなく、ランドマークとして目や鼻などの位置までわかる

Text Detection API

• 同様に、文字を認識できる
• 日本語の読み取りはいまいちだが、英数字はなかなかの精度

Media Session API

• 音楽プレーヤーの再生中の情報や、曲送りなどが実装できる
• PWAで作れば、バックグラウンドでも使える
• `navigator.mediaSession.setActionHandler(type, callback)`

いろんなAPI使って、いろんなものを作りましょう！