Tweet

※2018/12/26 WindowsのEdge等では別の対応が必要だったので記事・テストページとも書き換えています。

---

埋め込みツイートのフォントサイズ等cssを変更したい機会があったのですが、方法がなかなか見つからず、てこずったので備忘録を残します。
同じように困っている方の参考になれば幸いです！
※Twitter側での仕様変更（shadow-rootをcloseにしたりと）等で、崩れたり問題が出る可能性がありそうですのでご了承ください。
※使用する事により発生したいかなる問題にも責任を追う事ができません。ご使用は自己責任でお願い致します。
※「埋め込みタイムラインウィジェット」とは別のものです。

---

■埋め込みツイートのフォントサイズ等を変更テストページ

http://cresson.ivory.ne.jp/scripts/html_embeded_tweet/
※2018/12/26現在、以下で動作を確認
Mac Chrome最新版、Safari最新版、iPhone6s Safari、
Windows Edge、IE11、Firefox最新版、Chrome最新版

■埋め込みツイートのcssを変更するためにやっていること

○埋め込みツイートが読み込まれる際、ブラウザによってツイート部分が#shadow-rootかiframeとして読み込まれるようで、
（具体的には、検証したものでは
#shadow-rootとして読み込まれるもの：
Mac Chrome最新版、Safari最新版、
iPhone6s Safari、Windows Chrome最新版
iframeとして読み込まれるもの：
Windows Edge、IE11、Firefox最新版
でした。おそらく下はShadow DOMに対応していないからかと思います。）
読み込まれた後だとアクセスできるようなので、index.jsでcreateTweetのthenに以下を記載。
（shadowRootが存在するかどうかで分岐させて処理。）

				if( el.shadowRoot != null ){

					var sroot = el.shadowRoot;

					const style = document.createElement('style');

					style.textContent = '.SandboxRoot { font-size:28px; }';

					sroot.appendChild(style);

				}else{

					changeTwitterArticleDesign();

				}

	function changeTwitterArticleDesign(){

		var $twitter_article = $('#container1 iframe');

		var $twitter_article_contents = $twitter_article.contents();

		if ($twitter_article.length > 0 && $twitter_article[0].contentWindow.document.body.innerHTML !== ""){

			$twitter_article_contents.find('head').append('＜link href="./static/css/tw.css" rel="stylesheet" type="text/css"＞');

			$('#container1 iframe').css({'height':'auto', 'overflow':'scroll'});

		} else {

			setTimeout(function(){

				changeTwitterArticleDesign();

			}, 350);

		}

	}

※「$twitter_article_contents.find(‘head’).append(‘＜link href=”./static/css/tw.css” rel=”stylesheet” type=”text/css”＞’);」
の「＜」、「＞」は半角に変えて記述して下さい。

参考記事1：
Shadow DOM v1でHTMLの内容と構造を分離する
https://sbfl.net/blog/2016/07/17/shadow-dom-v1/
の「Shadow DOMにスタイルを適用する」の辺り。
参考記事2：
Twitter公式ウィジェットのiframeの中をカスタマイズ
https://eightincrement.com/jquery/twitter-timeline-custom

■注意

○cssで.mainにheightを指定しない使い方の場合、iPhone6s Safariでは文字サイズ変更が効きませんでした。。

.main {

	height: 500px;

	overflow: scroll;

}

---

以下、埋め込みツイートについて参考にしたTwitter公式ドキュメントになります。
下のdeveloper向け記事は英語ですが翻訳すると雰囲気はつかめるかと思います、、！

■ウェブサイトやブログにツイートを埋め込む方法
https://help.twitter.com/ja/using-twitter/how-to-embed-a-tweet

■Embedded Tweetsについて
https://developer.twitter.com/en/docs/twitter-for-websites/embedded-tweets/overview

Tweet