Twitter タイムラインをAMPページに埋め込んでみました

AMP for WordPress v1.0-beta3 のリリース記事内に、新しく追加されたTwitter タイムラインのアトリビュートをサポートしていると書かれていたので、本ブログでベータ3をインストールした際に試してみましたが、その時は動作しませんでした。まだ少し調整が必要なのだろうと思っていました。

少し日が経過したので、本日、Twitterのタイムラインの埋め込みに再挑戦してみました。今回は、無事に表示されました! しかし、高さの指定・制御ができない状態です。現状、縦に非常に長く表示されてしまいます。

この現象は、タイムラインだけでなく、Twitter モーメントなどでも発生しています。AMPの仕様では、予め縦横の値を指定して、アトリビュート(パラメーター)にレスポンシブを指定すると、設定した縦横比(アスペクトレシオ)に合わせて表示される仕様になっています。

現状、Twitterのコンポーネントでは、組み込み表示のの際、アスペクト比が動作しない状況であると、AMP by Exampleに説明が記載されています。ツイートの埋め込みではマニュアルで縦横の値は設定通りに表示されるのですが、モーメントとタイムラインの埋め込みでは動作しないようです。

AMP by Exampleでモーメントの幅を390、高さを330、レイアウトをレスポンシブで設定しているのですが、縦に凄く長い状態で表示されてしまっています。

以下は、幅350、縦550に設定した状態での埋め込みTwitterプロフィールです。物凄く縦に長いです。(苦笑)



ソースコード

<amp-twitter width="350"
height="550"
layout="responsive"
data-timeline-source-type="profile"
data-timeline-screen-name="blogginglifejp">
</amp-twitter>

埋め込みタイムライン表示例

 


 
本ブログのサイドバーに埋め込んでみたのですが、かなり長くなって表示されてしまったので、設置を見送りました。埋め込みのツイートは需要もかなりあるので、速やかに対応されていますが、モーメントやプロフィールをAMPページに埋め込む需要はまだ少ないと思われます。需要もまだ少ないため、対応も後になっていると推測しています。縦の長さが制御できるようになったら、本ブログでも設置する予定です。

本ブログのサイドバーにTwitter プロフィールを埋め込み設置した時の状態をYouTubeで紹介しています。