まだ重たいCMSをお使いですか?
毎秒1000リクエスト を捌く超高速CMS「adiary

2018/12/26(水)Twitterウイジェットの仕様と構造メモ (2018/12)

はてブ数

Twitter-widgetの仕様がまた変わっていたのでメモ。

変わったこと

  • widget-idが不要になりました。
  • https://publish.twitter.com/ にTwitter URLを入れると埋め込みコードを取得できます。

タイムライン埋め込みコードの例

<a class="twitter-timeline" href="https://twitter.com/nabe_abk">Tweets by nabe_abk</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 

シンプルになりました。

aタグのオプション(公式)

  • data-width="600" 表示の横幅
  • data-height="600" 表示の縦幅
  • data-theme="dark" ダークテーマ(デフォルトは light)
  • data-link-color="#000080" リンク色
  • data-dnt="true" Do not track

aタグのオプション(非公式)

従来との互換性のために残されているようです。aタグのdata-chrome属性に以下の文字列を指定することで有効になります。

  • noheader ヘッダ非表示
  • nofooter フッタ非表示
  • noborders 境界線非表示
  • noscrollbar スクロールバー非表示
  • transparent 背景透過

展開されるHTML

iframeに展開されます。

<iframe id="twitter-widget-0"
	scrolling="no" allowtransparency="true" allowfullscreen="true"
	class="twitter-timeline twitter-timeline-rendered"
	style="position: static; visibility: visible; display: inline-block; width: 100%; height: 600px; padding: 0px; border: medium none; min-width: 180px; max-width: 100%; margin-top: 0px; margin-bottom: 0px; min-height: 200px;"
	data-widget-id="profile:nabe_abk" title="Twitterタイムライン"
	frameborder="0"></iframe>

iframeの中身

<div class="timeline-Widget" data-iframe-title="Twitterタイムライン" lang="ja">

<div class="timeline-Header timeline-InformationCircle-widgetParent">
	<div class="timeline-InformationCircle">
		<a href="" class="Icon Icon--informationCircleWhite js-inViewportScribingTarget"
			<span class="u-hiddenVisually">Twitter広告の情報とプライバシー</span>
		</a>
	</div>
	<h1 class="timeline-Header-title u-inlineBlock">
		<span><a href="">‎@nabe_abk</a>さんの</span>ツイート
	</h1>
</div>

<div class="timeline-Body customisable-border">
	<div class="timeline-Body-notification timeline-NewTweetsNotification new-tweets-bar">
		<button class="timeline-ShowMoreButton">新しいツイートを読み込む</button>
	</div>

	<div class="timeline-Viewport">
		<ol class="timeline-TweetList">
		<li class="timeline-TweetList-tweet customisable-border">
			※1つのツイート(以下)
		</li></ol>

		<div class="timeline-LoadMore">
			<button class="timeline-LoadMore-prompt timeline-ShowMoreButton customisable">
				ツイートをさらに表示
			</button>
			<p class="timeline-LoadMore-endOfTimelineMessage no-more-pane">
				このタイムラインのツイートは以上です。
			</p>
		</div>
	</div>
</div>

<footer class="timeline-Footer u-cf">
	<a class="u-floatLeft"  href="">埋め込む</a>
	<a class="u-floatRight" href="">Twitterで表示</a>
</footer>

</div>

1つのツイート詳細。

<div class="timeline-Tweet  u-cf js-tweetIdInfo js-clickToOpenTarget">
	<div class="timeline-Tweet-brand u-floatRight">
		<div class="Icon Icon--twitter " title="Twitterで表示">
	</div>

	<!-- リツイート時のみ -->
	<div class="timeline-Tweet-retweetCredit">
		<div class="timeline-Tweet-retweetCreditIcon">
			<div class="Icon Icon--retweetBadge "></div>
		</div>
		XXXXさんがリツイートしました
	</div>

	<div class="timeline-Tweet-author js-inViewportScribingTarget">
		<a class="TweetAuthor-avatar Identity-avatar u-linkBlend" href="">
			<img class="Avatar" src="***.jpg">
		</a>
		<div class="TweetAuthor js-inViewportScribingTarget">
			<a class="TweetAuthor-link Identity u-linkBlend" href="">
			  <div class="TweetAuthor-nameScreenNameContainer">
			    <span class="TweetAuthor-decoratedName">
			        <span class="TweetAuthor-name Identity-name customisable-highlight">nabe@abk</span>
			    </span>
			    <span class="TweetAuthor-screenName Identity-screenName">@nabe_abk</span>
			  </div>
			</a>
		</div>
	</div>

	<p class="timeline-Tweet-text" lang="ja">(ツイート内容)</p>

	<div class="timeline-Tweet-metadata">
		<a href="" class="timeline-Tweet-timestamp">
			<time datetime="2018-12-22T00:00:00+0000">
				2018年12月22日
			</time>
		</a>
	</div>

	<ul class="timeline-Tweet-actions" aria-label="ツイートアクション">
		略
	</ul>
</div>

2018/08/24(金)[RFC]WebPush実装まとめ(Chrome/Firefox/Android/Edge)

2018/08/11(土)adiary Version3.16 リリース情報

ダウンロードはこちらから

Ver3.16の変更点

  • 画像アルバムモードを追加(詳細設定)。
  • adiary.conf.cgi.sample のパーサー設定の説明と順番を変更。
  • 更新通知Ping送信先から http://blogsearch.google.co.jp/ping/RPC2 を削除。
  • プライベートブログでは更新通知を送らないように変更。
  • irisテーマを再録。
  • 印刷用テーマ _sagiri を収録。
  • 「<input><label></label>」を「<label><input></label>」に書き換え。
  • 印刷用テーマで、ユーザーCSS(カスタムデザインを含む)を無効化。
  • 【plugin】サイドタグモジュールで、表示階層などを選択できるように変更。複数配置に対応。(Thanks to nomura
  • 【plugin】カレンダーモジュールで、山の日、2020年の祝日移動に対応しました。
  • 【plugin】基本情報モジュールで、印刷用テーマを選択できるようにしました。*1
  • 【fix】https:// 接続時に生成されるリンクが一部 http:// になっていた。
  • 【fix】Edgeのバグ対応のため、dateのmaxを "2914-12-31" に変更。(Thanks to epg
  • 【fix】同時編集検出に、アンロックがうまくいかない不具合があった。
  • 【fix/Markdown】引用などブロックの入れ子が起こると、目次記法(*toc)が出力されない。(Thanks to Kaede)

なお、Ver3.15はC94 Special Editionとしての配布のみとなり、一般リリースVersionとしては欠番です。

*1 : 複数存在する場合のみ

2017/12/28(木)adiary Version3.14 リリース情報

ダウンロードはこちらから

Ver3.14の変更点

  • テザインモジュール一覧のページをアップデート。
  • テーマカスタム画面のオプション名を分かりやすくしました。
  • ブログのコピー作成時、画像アルバムを初期化する機能を付けました。
  • 【Markdown】GFMのチェックボックス拡張に対応しました。(Request from Kaede)
  • 【plugin】ARTICLE_FIRST_VISIBLE_PINGイベントの追加。
  • 【plugin】WebPushの既知サーバに Edge のPushサーバを追加。
  • 【テーマ】過去のSpecial Editionテーマを見やすく修正。
  • 【fix/plugin】WebPushの「新着記事で送信しない」設定が動作していない。
  • 【fix/markdown】タグ中のシンタックスが処理されてしまう。(Thanks to pawa

Ver3.14aの変更点

  • 【fix】Perl5.26において記事が書き込めない。(Thanks to けろ
  • 【fix】Perl5.8において一部コンパイルエラーが起こる。
  • 【plugin】sp_view360(360度画像プラグイン)を収録。

2017/08/22(火)adiary Version3.13 リリース情報

ダウンロードはこちらから

Ver3.13の変更点

  • テーマ選択時、色可変テーマの持つ色式をロード時に判定するように変更(デバッグ目的)
  • filter記法でSpeaker Deckに対応しました*1
  • 【plugin】WebPushで、未知のサーバ(ブラウザ)でも登録可能な設定を追加。
  • 【plugin】WebPush通知登録済みでも、30日経過後は再度登録処理をするようにしました。*2
  • 【fix/plugin】WebPushプラグインで、初回の登録処理が内部的に2度行われる。
  • 【fix/plugin】Twitter通知プラグイン「"'<>」などの文字が文字化けしてしまう。
  • 【fix】ローカルサーバと高速なブラウザにおいてデザイン編集がうまく機能しない。
  • 【fix】数字のみのタグ名をタグ一覧から編集できない。
  • 【fix】タグ名編集時、同名のタグがあってもエラーにならない。(Thanks to Kaede)
  • 【fix/テーマ】hatena2テーマとnature-forestテーマで個別の色を変更するとエラーになる。
  • 【Ver3.13a】【fix】「その他の設定」メニューの項目が間違っている。
  • 【Ver3.13a】【fix】WebPushプラグイン関連の細かいバグ。
  • 【Ver3.13a】ログインフォームのidのフィールド名を修正。*3

*1 : しかしDebianサーバ等では、OpenSSLのバグによりエラーになります……。

*2 : こうしておかないと何らかの要因でサーバ側のWebPush登録情報が破棄された場合、2度とブラウザ側から登録処理ができなくなってしまいます。

*3 : 他のWebフォームの「id」と被ってるため、入力候補にいらない文字列がたくさん出るので。

OK キャンセル 確認 その他