複雑なページ用のAMP

Question

私は、コメントシステムや投票システムのような複雑なUIを持つ既存の記事のウェブサイトを持っています。 Google AMPページを作成する場合は、すべての複雑なUI（投票、コメントシステム）も含める必要がありますか？ Google AMPにそれを含めないと、訪問者だけが記事を閲覧できますが、ウェブサイトにある機能とはやり取りできません。既存のページの上に別のアンプバージョンのページを再作成するにはあまりにも多くの作業が必要ですか？

Answer 1

ウェブサイトの複雑さによって異なりますが、おそらくGitHubの例に従って、デスクトップサイトのいくつかの高度な機能を利用することができます。私は、少なくともAMPプロジェクトがフォームのカスタム要素を提供するまでは、AMPページを記事コンテンツだけにするべきだと思っています。ページの上部または下部に明確な「デスクトップウェブサイトを使用する」リンク/ボタンがあり、ウェブサイトとの完全なやりとりを希望するユーザーは、そのようにすることができます。

このようにすると、コアコンテンツを最適化された形式で最適な速度でモバイルユーザーに配信することができ、モバイルユーザーは頻繁に移動しているため、何かに投票する。モバイルデバイスを使用していてもモバイルデバイスでコメントや投票をしたいユーザーは、デスクトップサイトに切り替えることによってもモバイルデバイスを使用できます。

---

私はそうでは問題/ PRの議論、GitHubのは、コードの編集と非常に多くの潜在的な相互作用を持っていると思うので、私はこれを言うと、それはその多くはない人を考慮し、モバイルデバイス上にロードするためにやり過ぎかもしれないですそれらのものをモバイルデバイスで使用する予定です。彼らは投稿とコードを読むつもりですが、その瞬間には必ずしも対話するわけではありません。

私はamp-iframeを使用してフォームのためのiframeを使用して、実際に実現可能な何をテストするために（バックエンドにとPerl）のみ AMP-HTMLを使用して、メッセージボード/フォーラムを開発してきたので、私もこれを言います。

良いニュースは、それができることです、それは動作します。私は新しいスレッドや返信などを投稿するためにiframeを使用することができました。悪いニュースは、私は、iFrameののsrc URLにクエリ文字列を経由してポスト番号と著者のIDなどの重要なパラメータを下に渡し、iFrameを経由してformとinput要素をロードするためだったと思いついた計画

が

いるだろう...実装ですテンプレート言語を使用してプログラムで作成できます。これはすでに醜いです。

はその後、私は（name属性とフォームが掲載されているにaction URLと一緒に、タイプ=「隠された」）クエリ文字列からパラメータを取得し、input要素に追加するのiFrame内のJavaScriptを使用します。

次にformにtarget="_top"を設定して、送信時にページ全体をリロードします。これらのすべてが機能するには、AMP-IFRAME要素に次の属性が必要です。allow-scriptsallow-formsallow-top-navigation

AJAXを使う考えが私にはありましたが、CORSの問題のためにその道のりがさらに乱雑になりました。正直に言えば、修正できませんでした。私はおそらくそれがすべて間違っていると思っていたし、恐らくそれを行うためのいくつかの超簡単な方法があります。

このテクニックを使用すると、AMP検証をパスしながら使用可能なフォームを作成できます。問題は、それが本当に価値があるかどうかです。あなたは明らかにあなたが望むサーバ側の技術を使うことができますが、おそらくあなたの現在のデスクトップのWebサイトの実装とは大きく異なり、セキュリティに関して開発、テスト、強化するのにかなりの時間がかかるかもしれません。

私は個人的には追加時間の価値はないと思います。私はAMPプロジェクトが最終的に彼らの使用を制限する十分な手段を開発したときにamp-formカスタム要素を含むと信じています。