AMP HTMLのComponentに自作機能追加する方法

こんにちは! UIT室 フロントエンド開発1チームの姜 勝陽(kyo shoyo)です。
今回はGoogleのオープンソースプロジェクト AMP Projectのお話です。AMP HTMLを使ったマークアップ作業の際に「自作のComponentを作りたい!」「自作の機能を入れたい!」と思った方は多いでしょう。
そのような方におすすめの記事となります。

AMPでLINEのシェアが使えるようになりました


2018年5月に、SNSシェアボタンcomponent
mp-social-shareにLINEへのシェア機能を追加しました。

  • amp-social-share Document
  • amp-social-share Example
  • その時の経験を基に、AMP Projectのコードを変更してPRを送る方法について説明します。
    今回は、既存Componentに機能を追加する事を前提として説明しますので、ご了承ください。

    きっかけ

    2018年4月にLINEのフロントエンド開発組織のGlobal Workshop “Let’s Contribute OSS!“が開催されました。
    OSSに対して53件のPR作成、33件のReportやIssueの起票、16件のドキュメント翻訳が行われました。

    今回のamp-social-shareの対応は、その時の課題として取り組んだものです。

    「なぜAMP Projectを選んだのか?」と言うと、個人的に好きだったからです。

    AMPの日本Release当初から注目をしており、1年前にGoogle AMP No Standalone対応前に知っておくべきポイント(2017年5月版)| codezineという記事も書いてたりします。
    AMP HTMLの詳細を知りたい方はご参照ください。

    1.準備作業

    AMPの本体を管理しているampproject/amphtmlをforkします。

    getting-started-quick.mdを参考にして作業環境構築をおこないます。

    # node_modules install
    nvm install --lts
    yarn global add gulp-cli
    yarn install
     
    # local server起動
    gulp
    

    http://localhost:8000/examples にアクセスして下記の画面が表示されれば、完了です。

    2.フォルダ構成

    作業前にフォルダ構成を把握しましょう。
    ampproject/amphtmlには”component”や”Document”,”Example”等、様々なファイルが存在して規模も大きいです。

    その為、最低限作業で必要になる下記のフォルダの用途は把握しておきましょう。

    directory  description
    /.github, /contributing  作業時に必要なDocument
    /examples 挙動チェックに利用するhtml
    /builtins Built-in Component
    /extensions Built-inされてないComponent
    /ads amp-adsのサービス設定関連処理
    /3p Third partyサービスの埋込実装時に利用する処理。FacebookやTwitter SDKの読み込み処理等
    /third_party Third party module。アイコン追加時はoptimized-svg-iconsを修正する必要があり
    /css component以外で利用される特殊なCSS

    3.作業

    今回対応した amp-social-shareの例をお話すると、作業フォルダは下記の2箇所です。

    • /extensions/amp-social-share
      • configに設定追加
      • CSSに設定追加
      • Documentの修正
    • 作業完了後、getting-started-quick.mdに記載されている、Testを実行して完了です。

      4.PR提出

      PR提出前にPull Request Templateをチェックしてください。
      タイトルに絵文字をつかったLabelをつける必要性があるので、上記のDocumentを参照してPRを書いて提出します。

      amphtmlのPRでは4つのCIツールが動きます。

    • cla/google
    • lgtm analysis: JavaScript
    • percy/amphtml
    • continuous-integration/travis-ci/pr
    • 最新のmasterがMergeされていれば、基本は問題ないと思います。

      ただし、Googleオープンソースプロジェクトにはじめて参加する場合は「cla/google」がfailになります。
      このCIはGoogle Individual Contributor License Agreementへの同意をチェックするCIです。

    1. 規約を確認し”Only Yourself”を選択。
    2. EmailやGitHub Account Name等の必要事項を入力し、”I Agree”をクリックして同意。
    3. Githubの”Settings > Emails”を確認して、コミット時にgit config user.emailで設定してるEmailが全て登録されているか確認します。
      複数PCで別メールアドレスを使って作業を行った方は要注意です。
    4. その後、PRにコメントをすれば、再度CIが実行されます。

    CIとコードレビューが通過され、Mergeされれば対応完了です。

    Release

    本番環境のReleaseには最短でも1〜2週間を要します。
    理由はReleaseプロセスにあります。

    AMP HTMLを使用して構築されたページは数十億あると言われています。安易にReleaseをしてしまうと大きな障害に繋がります。

    そのため、1%のページに対して先行配信をおこない、1週間テストがおこなわれます。
    そのテスト結果を基にReleaseの有無が決まるので、master Merge後Releaseまで数週間を要します。

    詳細はRelease Scheduleをご確認ください。

    Releaseの進捗を確認したい場合はamphtml/releasesを見ると良いでしょう。

    最後に

    はじめてAMP ProjectにPR提出する際の流れを、今回は紹介しました。

    興味のある方は是非参考にしていただければと思います。

    なおLINE株式会社では、様々なサービスにてフロントエンドエンジニアを募集しています。ご興味がある方は、以下の各職種をご覧ください。

  • フロントエンドエンジニア
  • フロントエンドエンジニア(Fintech)【LINE Financial】
  • ブリッジエンジニア(フロントエンド)
  • フロントエンドエンジニア【京都オフィス】