Google-amp-html-page-to-amp-page

提供：Dev Guides
移動先:案内、検索

Google AMP-HTMLページからアンプページ

この章では、通常のhtmlページをampページに変換する方法を理解します。 ampのページも検証し、最後に出力を確認します。

まず、以下に示すように、通常のhtmlページを取り上げます-

testl

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>Tutorials</title>
      <link href = "style.css" rel = "stylesheet"/>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
      <script src = "js/jquery.js"></script>
   </head>
   <body>
      <header role = "banner">
         <h2>Tutorials</h2>
      </header>
      <h2>Some Important Tutorials List</h2>
      <article>
         <section>
            <img src = "images/tut1.png" width="90%" height = "90%"/>
         </section>
         <section>
            <img src = "images/tut2.png" width="90%" height = "90%"/>
         </section>
         <section>
            <img src = "images/tut3.png" width="90%" height = "90%"/>
         </section>
         <section>
            <img src = "images/tut4.png" width="90%" height = "90%"/>
         </section>
      </article>
      <footer>
         <p>For More tutorials Visit <a href =
         "https://finddevguides.com/">Tutorials Point</a></p>
      </footer>
   </body>
</html>

私たちはその中でstyle.cssを使用していることに注意してください、cssファイルの詳細はここに示されているとおりです- 

h1 {color: blue;text-align: center;}
   h2 {text-align: center;}
      img {
         border: 1px solid #ddd;
         border-radius: 4px;
         padding: 5px;
      }
      article {
         text-align: center;
      }
      header{
         width: 100%;
         height: 50px;
         margin: 5px auto;
         border: 1px solid #000000;
         text-align: center;
         background-color: #ccc;
      }
      footer {
         width: 100%;
         height: 35px;
         margin: 5px auto;
         border: 1px solid #000000;
         text-align: center;
         background-color: yellow;
      }

上記のlでもjquery.jsファイルを使用していることに注意してください。

今、testlをローカルでホストし、ここに与えられたリンクで見られる出力を見てください- 

*http：//localhost：8080/googleamp/testl*

Amp Htmlページ

では、ステップバイステップで上記のtestlファイルをtest_amplファイルに変更してみましょう。

まず、testlをtest_amplとして保存し、以下の手順に従います。

  • ステップ1 *-以下に示すように、ヘッドセクションにアンプライブラリを追加します-
<script async src = "https://cdn.ampproject.org/v0.js">
</script>

たとえば、test_amplに追加すると、次のようになります- 

<head>
   <meta charset = "utf-8">
   <title>Tutorials</title>
   <script async src = "https://cdn.ampproject.org/v0.js">
   </script>
   <link href = "style.css" rel = "stylesheet"/>
   <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
      <script src = "js/jquery.js"></script>
</head>

次に、ブラウザーでtest_amplページを実行し、ブラウザーコンソールを開きます。 以下に示すように、コンソールメッセージが表示されます-

Amp Page

あなたのhtmlファイルが有効なアンプであるかどうかを知るには、以下に示すように、最後に＃development = 1をhtmlページのURLに追加します- 

http://localhost:8080/googleamp/test_ampl#development=1

ブラウザとGoogle Chromeコンソールで上記のURLにアクセスします。 ampの仕様の観点から、ampが無効であると考えるエラーをリストします。

test_amplで発生したエラーを以下に示します-

テストアンプページ

ampの成功メッセージが表示されるまで、それらを1つずつ修正しましょう。

  • ステップ2 *-コンソールに次のエラーが表示されます-

テストエラーコンソール

これを修正するには、htmlタグに⚡またはampを追加します。 以下に示すように、htmlタグにampを追加します- 

<html amp>
  • ステップ3 *-以下に示すように、headタグにcharsetおよびname =” viewport”を含むメタタグがあることを確認してください-
<head>
   <meta charset = "utf-8">
   <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
</head>
  • ステップ4 *-次のエラーがここに表示されます-

次のエラー

リンクrel = stylesheetでhrefを示しています。つまり、次のリンクはエラーをスローしています。 これは、ampでは、hrefを使用したリンクを使用する外部スタイルシートをページ内に配置できないためです。 

<link href = "style.css" rel = "stylesheet"/>
We can add the all the css in style.css as follows −
<style amp-custom>
  /*All styles from style.css please add here */
</style>

したがって、style.cssにあるcssデータは、amp-custom属性を使用してスタイルに追加する必要があります。 

<style amp-custom>
   h1 {color: blue;text-align: center;}
   h2 {text-align: center;}
      img {
         border: 1px solid #ddd;
         border-radius: 4px;
         padding: 5px;
      }
      article {
         text-align: center;
      }
      header{
         width: 100%;
         height: 50px;
         margin: 5px auto;
         border: 1px solid #000000;
         text-align: center;
         background-color: #ccc;
      }
      footer {
         width: 100%;
         height: 35px;
         margin: 5px auto;
         border: 1px solid #000000;
         text-align: center;
         background-color: yellow;
      }
</style>

スタイルタグをアンプページに追加します。 ブラウザーで上記のスタイルタグを使用して同じことをテストしてみましょう。 test_amplに対してこれまでに行った変更を以下に示します- 

<!DOCTYPE html>
<html amp>
   <head>
      <meta charset = "utf-8">
      <title>Tutorials</title>
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
      <script src = "js/jquery.js"></script>
      <style amp-custom>
         h1 {color: blue;text-align: center;}
         h2 {text-align: center;}
            img {
               border: 1px solid #ddd;
               border-radius: 4px;
               padding: 5px;
            }

            article {
               text-align: center;
            }
            header{
               width: 100%;
               height: 50px;
               margin: 5px auto;
               border: 1px solid #000000;
               text-align: center;
               background-color: #ccc;
            }
            footer {
               width: 100%;
               height: 35px;
               margin: 5px auto;
               border: 1px solid #000000;
               text-align: center;
               background-color: yellow;
            }
      </style>
   </head>
   <body>
      <header role = "banner">
         <h2>Tutorials</h2>
      </header>
      <h2>Some Important Tutorials List</h2>
      <article>
         <section>
            <img src = "images/tut1.png" width = "90%" height = "90%"/>
         </section>
         <section>
            <img src = "images/tut2.png" width = "90%" height = "90%"/>
         </section>
         <section>
            <img src = "images/tut3.png" width = "90%" height = "90%"/>
         </section>
         <section>
            <img src = "images/tut4.png" width="90%" height = "90%"/>
         </section>
      </article>
      <footer>
         <p>For More tutorials Visit <a href =
         "https://finddevguides.com/">Tutorials Point</a></p>
      </footer>
   </body>
</html>

上記のページのコンソールで出力とエラーを見てみましょう。 次のスクリーンショットを確認してください-

出力とエラー

コンソールに表示されるエラーは次のとおりです-

出力とエラーのスクリーンショット

これで、ampのエラーの一部について、スタイルが削除されていることがわかります。 残りのエラーを今すぐ修正しましょう。

  • ステップ5 *-リストに表示される次のエラーは次のとおりです-

Amp See List

jqueryファイルを呼び出すスクリプトタグを追加しました。 ampページでは、ページ内のカスタムjavascriptが許可されないことに注意してください。 これを削除し、利用可能なampコンポーネントを使用する必要があります。

たとえば、アニメーションが必要な場合はamp-animationがあります。amp-analyticsでは、Google Analyticsコードをページに追加する必要があります。 同様に、ページに表示される広告を表示するamp-adコンポーネントがあります。 また、srcを同じオリジンに向け、amp-iframeで必要に応じてカスタムjavascriptを呼び出すことができるamp-iframeコンポーネントもあります。

次に、ページからスクリプトタグを削除します。

  • ステップ6 *-表示される次のエラーはここに表示されます-

表示されるエラー

上記のエラーは、ページで使用した画像タグを指しています。 Ampでは、ページ内で<img src =””/>タグを使用できません。 代わりにamp-imgタグを使用する必要があることに注意してください。

ここに示すように<img>タグを<amp-img>で置き換えましょう- 

<section>
   <amp-img alt = "Beautiful Flower"
      src = "images/tut1.png"
      width = "500"
      height = "160"
      layout = "responsive">
   </amp-img>
</section>
<section>
   <amp-img alt = "Beautiful Flower"
      src = "images/tut2.png"
      width = "500"
      height = "160"
      layout = "responsive">
   </amp-img>
</section>
<section>
   <amp-img alt = "Beautiful Flower"
      src = "images/tut3.png"
      width = "500"
      height = "160"
      layout = "responsive">
   </amp-img>
</section>
<section>
   <amp-img alt = "Beautiful Flower"
      src = "images/tut4.png"
      width = "500"
      height = "160"
      layout = "responsive">
   </amp-img>
</section>

上記のように、すべての<img>タグを<amp-img>に置き換えました。 ここで、ブラウザでページを実行して、出力とエラーを確認します-

Replaced Img

エラー

交換されたエラー

現在、エラーが少なくなっていることを確認してください。

  • ステップ7 *-コンソールに表示される次のエラーは次のとおりです-

エラーの減少

headセクションにlink rel = canonicalタグを追加する必要があります。 これは必須タグであり、常に次のように頭に追加する必要があることに注意してください- 

<link rel = "canonical" href =
   "http://example.ampproject.org/article-metadatal">

ステップ8 *-コンソールに noscriptタグがない場合に表示される次のエラー*

noscript tag

次のように、ヘッドセクションにamp-boilerplateで囲まれた<noscript>タグを追加する必要があります- 

<noscript>
   <style amp-boilerplate>
      body{
         -webkit-animation:none;
         -moz-animation:none;
         -ms-animation:none;
         animation:none}
   </style>
</noscript>
  • ステップ9 *-表示される次のエラーは以下のとおりです-

表示される次のエラー

もう1つの必須タグはamp-boilerplateを使用したスタイルタグで、noscriptタグの前に配置する必要があります。 amp-boilerplateを使用したスタイルタグを次に示します- 

<style amp-boilerplate>
   body{
      -webkit-animation:
      -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
      -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
      -amp-start 8s steps(1,end) 0s 1 normal both;animation:
      -amp-start 8s steps(1,end) 0s 1 normal both
   }
   @-webkit-keyframes
   -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
   -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
   -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
   -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
   -amp-start{from{visibility:hidden}to{visibility:visible}}
</style>

上記のスタイルタグをtest_amplページに追加します。

完了したら、ブラウザでページをテストして、出力とコンソールを確認します-

browser

コンソールの詳細はここに示されています-

コンソールの詳細

したがって、最終的にすべてのエラーが解決され、test_amplページは有効なampページになります。

ヘッダーとフッターが切り捨てられるため、追加するスタイルがいくつかあります。追加したカスタムスタイルで同じものを更新できます。 そのため、ヘッダーとフッターからwidth：100％を削除しました。

これが最終出力です-

切り捨て

最終的なtest_amplファイル

<!DOCTYPE html>
<html amp>
   <head>
      <meta charset = "utf-8">
      <title>Tutorials</title>
      <link rel = "canonical" href=
      "http://example.ampproject.org/article-metadatal">
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <meta name = "viewport" content = "width = device-width,
      initial-scale = 1.0">

      <style amp-boilerplate>
         body{
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
         -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
         -amp-start{from{visibility:hidden}to{visibility:visible}}
      </style>
      <noscript>
         <style amp-boilerplate>
            body{
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none;
               animation:none}
         </style>
      </noscript>
      <style amp-custom>
         h1 {color: blue;text-align: center;}
         h2 {text-align: center;}
            amp-img {
               border: 1px solid #ddd;
               border-radius: 4px;
               padding: 5px;
            }
            article {
               text-align: center;
            }
            header{
               height: 50px;
               margin: 5px auto;
               border: 1px solid #000000;
               text-align: center;
               background-color: #ccc;
            }
            footer {
               height: 35px;
               margin: 5px auto;
               border: 1px solid #000000;
               text-align: center;
               background-color: yellow;
            }
      </style>
   </head>
   <body>
      <header role = "banner">
         <h2>Tutorials</h2>
      </header>
      <h2>Some Important Tutorials List</h2>
      <article>
         <section>
            <amp-img
               alt = "Beautiful Flower"
               src = "images/tut1.png"
               width = "500"
               height = "160"
               layout = "responsive">
            </amp-img>
         </section>
         <section>
            <amp-img
               alt = "Beautiful Flower"
               src = "images/tut2.png"
               width = "500"
               height = "160"
               layout = "responsive">
            </amp-img>
         </section>
         <section>
            <amp-img
               alt = "Beautiful Flower"
               src = "images/tut3.png"
               width = "500"
               height = "160"
               layout = "responsive">
            </amp-img>
         </section>
         <section>
            <amp-img
               alt = "Beautiful Flower"
               src = "images/tut4.png"
               width = "500"
               height = "160"
               layout = "responsive">
            </amp-img>
         </section>
      </article>
      <footer>
         <p>For More tutorials Visit <a href =
         "https://finddevguides.com/">
            Tutorials Point</a>
         </p>
      </footer>
   </body>
</html>

したがって、通常のhtmlファイルをampに変換することで、最終的には完了です。

「https://www.finddevguides.com/index.php?title=Google-amp-html-page-to-amp-page&oldid=6551」から取得
Powered by MediaWiki