以前リリースした単純な
React ベースのサンプルアプリとは違い、ShadowReader デモアプリはいわゆる「Vanilla JS」と呼ばれる純粋な JS のみでできており（もちろん AMP は例外です）、The Guardian の実際のフィードと AMP ページを使っています。さらに、アプリの作成に必要な作業をお見せするため、すべてゼロから作られています。スマートフォン（やエミュレータ）を使って実際に
https://amp.cards から動かしてみることもできます。
では、このアプリのどこが特別なのでしょうか。今回は、AMP ページの用語をご存知の方向けに言えば、いわゆる「アプリシェル」をどれほど早く作れるかを紹介しています。このアプリは、記事を表示するためのテンプレート ロジック全体が含まれた巨大アプリとは違い、単純に Guardian の RSS フィードを読み取っています。カードがクリックされた際に既存の AMP ページをインラインでレンダリングする処理は、AMP に委譲しています。これによって、エンジニアリング作業とアプリ自体が信じられないほど軽量になります。他にも、次のような特徴があります。
- 実際のデータを取得しているので、実際の問題を解決していることになります。
- 10kb 未満のサイズ（Guardian Web フォントと AMP を含めても最大 200kb）です。
- 体感的なパフォーマンスを向上させるため、スムーズなカード遷移とスケルトン UI を取り入れています。
- 完全な URL ベースのナビゲーションと共有がサポートされています。
デベロッパーの皆さんは、ぜひ
ソースコードをご覧ください。FLIP ベースのアニメーション、遅延読み込みされるカードとシームレスに再接続される記事のビューなど、アプリのそれぞれの機能や要素がどのように構築されているかは、
私のブログで紹介しています。
ShadowReader は、半分はインスピレーションを与えるため、半分はチュートリアルとして作られています。ぜひ、
PWAMP が皆さんのユースケースに応用できるかを評価するためにご利用ください。また、サポートが必要な場合は遠慮なく
ご連絡ください。現在、PWAMP は大流行中です！
