lycheejam's tech log

チラ裏のメモ帳 | プログラミングは苦手、インフラが得意なつもり。

C# CoreTweet.Oembedを一通り試す

概要

CoreTweetのOembed(oEnbed?)のパラメータを一通り試しました。
APIとCoreTweetでアップデートが追いついて無いのか実装されていないものが一部ありました。

サクッとペロッただけです。

20180428
プルリク出してマージされたので使えなかったパラメータも使えるようになりました。
kitigai.hatenablog.com

環境

ソース

github.com

oEmbed Parameters

公式ドキュメントの順番通りにやります。

パラメータ無し(素の状態)

  • HTML
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">あのAV女優が知り合いに似すぎててコーディングに 集中出来ない</p>&mdash; あとらす (@Lychee_jam) <a href="https://twitter.com/Lychee_jam/status/988431204717281280?ref_src=twsrc%5Etfw">April 23, 2018</a></blockquote>
var emb = t.Statuses.Oembed(TextTweetId);

maxwidth

横幅の指定を行います。

maxwidth = 220(最小)

  • HTML
<blockquote class="twitter-tweet" data-width="220">
  • Code
emb = t.Statuses.Oembed(id => TextTweetId
                        , maxwidth => 220);
maxwidth = 550(最大)

  • HTML
<blockquote class="twitter-tweet" data-width="550">
  • Code
emb = t.Statuses.Oembed(id => TextTweetId
                        , maxwidth => 550);

hide_media

メディア(写真・動画)表示設定を行います。
サムネを表示するかリンクのみで表示するかになります。

メディア表示

  • HTML
<blockquote class="twitter-tweet">
  • Code
emb = t.Statuses.Oembed(id => PhotoTweetId
                        , hide_media => false);
メディア非表示

  • HTML
<blockquote class="twitter-tweet" data-cards="hidden">
  • Code
emb = t.Statuses.Oembed(id => PhotoTweetId
                        , hide_media => true);

hide_thread

スレッド表示の有無を設定する。
メンション先がなければ無視される。

スレッド表示

  • HTML
<blockquote class="twitter-tweet">
  • Code
emb = t.Statuses.Oembed(id => ThreadTweetId
                        , hide_thread => false);
スレッド非表示

  • HTML
<blockquote class="twitter-tweet" data-conversation="none">
  • Code
emb = t.Statuses.Oembed(id => ThreadTweetId
                        , hide_thread => true);

omit_script

Scriptタグの有無を指定します。
widgets.jsを読み込む<script>タグをHTMLに追加するか否かです。すでに別で読み込んで入れば不要(?)

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

コードのみ記載

Scriptタグあり
  • Code
emb = t.Statuses.Oembed(id => TextTweetId
                        , omit_script => false);
Scriptタグなし
  • Code
emb = t.Statuses.Oembed(id => TextTweetId
                        , omit_script => true);

align

配置位置を指定します。
自環境でもデザインがズレているので変な風に表示されているかと思います。

左寄せ(Left)


  • HTML
<blockquote class="twitter-tweet" align="left">

以下、HTML省略します。

  • Code
emb = t.Statuses.Oembed(id => TextTweetId
                        , align => "left");
中央寄せ(Center)


  • Code
emb = t.Statuses.Oembed(id => TextTweetId
                        , align => "center");
右寄せ(Right)


  • Code
emb = t.Statuses.Oembed(id => TextTweetId
                        , align => "right");
指定無し(none)

  • Code
emb = t.Statuses.Oembed(id => TextTweetId
                        , align => "none");

Reply/RT/Favの後に指定したユーザとかをおすすめ表示する設定
とりあえず自分自身を指定してみる。

ブログ書き終わった後に検証したがFavではポップアップがすぐに消えた。
なにが正しいんでしょう?

  • HTML

<blockquote class="twitter-tweet" data-related="Lychee_jam">
  • Code
emb = t.Statuses.Oembed(id => TextTweetId
                        , related => "Lychee_jam");

lang

ウィジェットの表示言語を指定する。
日付とかその他の情報が指定で表示が変わる。

英語(既定?)

  • HTML
<blockquote class="twitter-tweet" data-lang="en">
  • Code
emb = t.Statuses.Oembed(id => TextTweetId
                        , lang => "en");
日本語
  • HTML

//省略

  • Code
emb = t.Statuses.Oembed(id => TextTweetId
                        , lang => "ja");

widget_type

Video設定を行います。
Videoをツイートに埋め込んだ形式で表示するかビデオのみ単独で表示するかの設定

Video設定なし

  • HTML
<blockquote class="twitter-tweet">
  • Code

// パラメータ無しと同じ

Video設定あり

  • HTML
<blockquote class="twitter-video">
  • Code
emb = t.Statuses.Oembed(id => VideoTweetId
                        , widget_type => "video");

CoreTweetのOembedメソッドでサポートしていないパラメータ

恐らくですが新規に追加されてサポートされていない状態かと思われます。

theme

LightかDarkを選べる。手動ならいけます。


ハッシュタグ/@hogehoge/URLなどリンクになるものの色を変更出来ます。


dnt

ターゲット広告とかの情報に利用させないための設定と思われる。
//調べてない

雑感

別に全部試す必要はなかった。絶対になかった。
コード書いて終わりにしておけばよかった。