CapacitorプラグインのNative Ads実装

DRANK

Capacitorでつくっているアプリの記事一覧に、AdMobのNativeAdを差し込みたい。記事と記事の間に広告があり、そのまま一緒にスクロールする。ユーザからみれば、よくある表示ですよね。ところが、実装してみるとこれが難しい。止まっている間は、HTMLの広告枠にぴったり収まっています。けれど指を動かすと、記事は上へ進むのに広告だけが少し遅れてついてくる。一覧の中に入れたはずの広告が、浮いて見えてしまいます。今回、@capacitor-community/admobのNativeAd対応PRで、このスクロール追随を検証しました。座標を送れば済むと思っていたのですが、iOSとAndroidで別の方法を選ぶことになりました。HTMLに置くのは、広告の「枠」今回の実装では、HTMLに広告の位置と大きさを決める枠を置きます。<capacitor-admob-native feed-id="articles" slot-key="sponsored-after-article-42" ></capacitor-admob-native> これはWeb Componentsの一つであるCustom Elementです。HTMLElementを継承し、customElements.define()で登録しています。DOMへの追加・削除や属性の変更に合わせて広告フィードへ接続・切断する、配置とライフサイクルをつなぐ要素です。slot-keyには、…