【Ameba Ownd】記事へのツイート埋め込みに「コレクション」を利用

当サイトは株式会社サイバーエージェントが提供するWebサイト作成サービス「Ameba Ownd」を利用して運営を行っています。Ameba Owndには多数のデザインテーマが用意されており、その中から好みのものを選ぶことでHTMLやCSSの知識が無くても簡単にホームページ・ブログを開設することができます。

全体の構造は予め決まっているもののCSSカスタマイズ機能は用意されており、細かい部分を変更して更にオリジナル性の高いデザインを造ることが可能です。その一方でページ全体のHTML編集は2020年5月時点では不可能で、その代わりに「HTMLブロック」を任意の箇所に配置してHTMLを記述することで、本来Ameba Owndの機能には無い文字色の変更や、外部コンテンツを埋め込むことができるようになっています。

通常のツイート埋め込みではスマホで不具合が？

この「HTMLブロック」を使ってTwitterの投稿を記事に埋め込んで表示させてみます。Twitter公式の「Twitter Publish」で取得したツイートの埋め込みコードをそのまま貼り付けて投稿してみると、以下のように表示されます。

これを私自身のスマートフォンで閲覧すると、今現在は問題なく表示されているのですが、以前別の記事にツイートを埋め込んでみた際にツイートの縦幅が異常なほど小さく大半が見切れてしまうという不具合が起きました。

※スクロールバーが表示されてしまっている問題については後述

この不具合について「Ameba Ownd」の運営事務局にも問い合わせて確認してもらったところ、次のような回答をいただきました。

• HTMLが正しく表示されない原因などは特定できなかった
• HTMLブロックはスマートフォン端末などに最適化されるレスポンシブに対応していない
• Twitter側の仕様変更やデザインテーマ・ご利用環境など推測される原因は多々ある

このようにはっきりとした原因は不明だったものの、今回の記事では全く問題なく表示されているというよく分からない結果となりました･･･　しかしせっかくなので何か別の方法でツイートを埋め込めないかと調べてみると、「コレクション」を作成して埋め込むという方法がありました。

記事へのツイート埋め込みに「コレクション」を利用する

Twitter公式クライアント「TweetDeck」を使用して、複数のツイートをまとめた「Collection」を作成することができます。そしてコレクションのShare（共有）を選択すると、普通のツイートと同じく「Twitter Publish」で埋め込みコードが生成されます。

こうして取得した埋め込みコードをHTMLブロックに貼り付けると、以下のように表示されます。

この方法では見切れると言った不具合は起きませんでしたが、逆に下方に余計な空白が表示されてしまうことが時々あるようです。さらに文字が大きすぎて幅を取ることや、複数のツイートを別々の場所に配置したい場合はコレクションもそれぞれ分けて作成する必要のある点がデメリットと言えます。

一方で文字・画像を大きく表示したいのであればコレクションを利用するのが良さそうです。当サイトでは今後しばらくはこの方法を採ることにしました。

スクロールバーが表示されてしまう問題の解決法

今回いろいろと試している中で、通常のツイート埋め込みでもコレクションの埋め込みでも、埋め込んだ箇所にスクロールバーが表示されていたり、スクロールバーがチャタリングするように表示・非表示を繰り返したりする現象が見られました。

この問題は以下のサイトで紹介されている方法で解決することができますのでご参照ください。