あとらすの備忘録

チラ裏のメモ帳

ASP.NET Viewページにツイートを埋め込む(oEmbed)

概要

CoreTweetのoEmbedメソッドを使ってViewページにこんな感じにツイートを埋め込みます。

Jsonデータの取得自体はすぐ出来たのですがVIewに表示する部分でクソほど時間をとったのでメモ

環境

ツイートを埋め込むとは?

ここで作成できるウィジェットです。
タイムラインの表示であったりいろいろ作れます。

oEmbed情報の取得

さすがCoreTweetさんなんでもありますね

public class TweetManager {
	//ツイート埋め込みウィジェット用のjsonデータを取得
	public async Task<Embed> EmbedTweetGet(long tweetId) {
	    var tokens = await CreateTokens(); //TwitterAPIのトークン生成
	    var emb = tokens.Statuses.Oembed(tweetId); //embedの情報取得
	    return emb;
	}
}

TweetIDのみ指定していますが、表示の色等カスタマイズ出来ます。
参考:CoreTweet: CoreTweet.Rest.Statuses Class Reference

メモ:embedってなによ

oEmbed is a format for allowing an embedded representation of a URL on third party sites. The simple API allows a website to display embedded content (such as photos or videos) when a user posts a link to that resource, without having to parse the resource directly. - https://oembed.com/

日本語でOK

oEmbedは、サードパーティのサイトにURLの埋め込み表現を許可するための形式です。単純なAPIを使用すると、リソースを直接解析することなく、ユーザーがそのリソースへのリンクを投稿したときに埋め込みコンテンツ(写真やビデオなど)を表示できます。 - https://oembed.com/

普通にググったらいろいろ出てきました。
メディア埋め込み用の共通規格(プロトコル?)なんですね
参考:oEmbed APIの使い方まとめ!URLから埋め込みHTMLタグを作ろう!

Viewの表示

ControllerからembedオブジェクトをそのままViewに渡してます。

@{
    ViewBag.Title = "index";
}
@model CoreTweet.Embed
//...省略
@Html.Raw(@Model.Html) //エンコードしたスクリプトを表示

embedオブジェクトにはJsonデータがそんぐりそのままはいってるのでHtmlのみ表示します。
これでこうなります。

f:id:HM_Atlas:20180426021911p:plain

HTMLの内容が文字列として表示されてしまう

f:id:HM_Atlas:20180426022508p:plain

こいつにクソほど時間をとられました。
原因はJsonのデータをそのまま表示していたためです。

@{
    ViewBag.Title = "index";
}
@model CoreTweet.Embed
//...省略
@Model.Html //←ここ

Html.Raw メソッドを使って、明示的に HTML 文字列をそのままレンダリングすることができます。

参考:ASP.NET MVC 3 Razor における HTML エンコードと Html.Raw メソッドの利用 – THE TRUTH IS OUT THERE

文字列として表示されるってことはHtmlとして認識されていないのかな?とググってたらいきつきました。
(HTMLと言うよりjsが読み込まれてない?)

雑感

一瞬、Html.Rawのところをかすってたのに通り過ぎてまた戻ってきた感じです。
時間かかりすぎた...
(今日は仕事から帰ってくるのが遅かったから...)

途中で投げ出す結果にならなくてよかったです。