問題タブ [amp-story]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
video - amp-carousel を使用していなくても、amp-story の amp-video で amp-video-container を使用できますか? amp-video-container は何をしますか?
amp-video-container に関する詳細なドキュメントはありますか? amp-story で amp-video-container を使用して、ビデオが途切れたり、完全に表示されたりしないようにする方法を理解しようとしています。
https://ampbyexample.com/advanced/video_carousels_with_amp-carousel/
また、amp-video-container を使用する場合、このスクリプト タグを含める必要がありますか?
video - どうやってタグは次のシナリオで amp-story とやり取りしますか?
次のシナリオでは、タグは amp-story とどのように<div>やり取りしますか? amp-story が高速読み込みで AMP エラーなしで動作するなどの方法に従って動作するシナリオはどれですか?またその理由は?
シナリオ 1: amp-story 外の div タグ
シナリオ 2: amp-story-page 内の div タグ
シナリオ 3: amp-story-grid-layer 内の div タグ
参照 https://xbyexample.appspot.com/advanced/video_carousels_with_amp-carousel/
events - amp-story で起こりうるイベントは何ですか?
amp-story のすべてのイベント、パイプラインのイベント、ライブにならないイベントのすべてを 1 か所で確認できますか?
サンプル トピック
- クリップボード イベント
- ドラッグイベント
- マウスイベント
- キーボード イベント
- ウィンドウ イベント属性
- フォームイベント
- メディアイベント
- ユーザーが要素を開いたり閉じたりしたときに HTML5 で発生する ontoggle などのその他のイベント
css - amp-story は Normalize.css と Basscss で完全に機能しますか?
amp-story は Normalize.css と Basscss で完全に機能しますか? AMP Start は、次の 2 つの既存のオープンソース プロジェクトの上に構築されているためです。
https://www.ampstart.com/howitworks
正規化.css
Normalize.css を使用すると、ブラウザーはすべての要素をより一貫して最新の標準に沿ってレンダリングできます。正規化が必要なスタイルのみを正確にターゲットにします。これにより、デバイス全体で AMP Start の明確で一貫したスタイルを定義する白紙の状態が提供されます。
Basscss
AMP の開始は、低レベルの CSS ツールキットである Basscss を使用して構築されています。Basscss は非常に軽量なツールキットであり、多くの CSS ユーティリティ クラスを提供し、カスタム CSS を作成することなく、レイアウト、レスポンシブ グリッドなどを実行するのに役立ちます。
Basscss はすぐに使えるスリムで応答性が高く、これは AMP Start にとって重要でした。Basscss をベース (アドオンなし) として使用しましたが、「!important」は AMP と互換性がないため、CSS ルールから「!important」のインスタンスを削除しました。既存の Basscss クラスを使用することで、AMP の 50Kb CSS 制限があっても、記述する CSS を大幅に減らしながら見栄えの良いページを作成することができました。
これら 2 つのプロジェクトによって提供される基盤の上に、CSS に一連の独自のスタイルを追加して、コンポーネントとテンプレートが AMP Start の一貫した外観を継承するようにしました。
全体として、CSS は AMP の 50kB クォータの半分以下しか占有しないため、Basscss および AMP Start クラスを使用してページをカスタマイズする余地が十分にあるはずです。
javascript - パブリッシャーが amp-story のイベントにフックするコードを作成するには何が必要ですか?
たとえば、HTML DOM イベントを使用すると、JavaScript は HTML ドキュメント内の要素にさまざまなイベント ハンドラーを登録できます。
イベントは通常、関数と組み合わせて使用され、関数はイベントが発生する前 (ユーザーがボタンをクリックしたときなど) には実行されません。
利点
適切なドキュメントはありませんが、パラメーター (Function_Name(Parameter) など) を受け取る関数を JavaScript の標準の「On」イベント (「OnClick」または「onKeyDown」) の 1 つに追加することは、JavaScript コーダーにとって比較的簡単です。上級プログラマーは、これを、渡されたパラメーターを使用した関数による動的ランタイム イベント割り当てと呼ぶ場合があります。
Web ページにテキスト領域フィールドがあり、そのフィールド内でキーストロークを行うたびに何らかの機能を実行したいとします。実世界の例では、文字数を数えたかったので、制限にどれだけ近づいているかをユーザーに知らせ、制限を超えたときに警告することができました。キーストロークをキャプチャするには、JavaScript の「onKeyUp」および「onKeyDown」イベントにフックする必要があります。
経験豊富な JavaScript 開発者は、これらのフックを追加する最も簡単な方法は、次のようにテキストエリアの HTML に含めることであることを知っています。