ASP.NET CORE で Tweet 機能を構築する

ASP.NET CORE では razor 構文というものが使用できます。razor 構文を使用すると、クリック時のイベントロジックを実装したり、テキストに入力した値を取得することができるようになります。

この記事では、ASP.NET CORE で razor 構文を使用して、ツイート専用画面を構築する方法を紹介します。

1. ファイル構成とソース

今回は2つのファイルに分けて構築します。

1.1 Shared/TweetBox.razor

Sharedフォルダにrazor ファイルを作成することで、独自タグのように使用することができます。ソースコードは以下のようになります。

<h3>TweetBox</h3>

<textarea id="note" cols="10" style="width: 100%" @bind="@tweetText" placeholder="TweetText"></textarea>



<div>
    <a href="https://twitter.com/intent/tweet?text=+@(tweetText)">
        <img src="/Image/tweet.png" style="border-radius: 30%; border: 1px solid black;" width="100%" />
    </a>
</div>

@code {

    string tweetText;

}

上から3行目の textarea でツイート本文を記載します。

tweetText という string型の変数に textarea の入力内容をバインドしています。ちなみに、tweetText という変数は、@code ブロックの中で宣言しています。

実際のツイートロジックは、Twitter から提供されている Web Intent を使用します。Web Intent の詳細は以下のURLで説明されています。

https://developer.twitter.com/en/docs/twitter-for-websites/tweet-button/guides/web-intent

1.2 Pages/Tweet.razor

Pages フォルダで実際のページを構成していきます。ソースコードは以下になります。

@page "/Tweet"

<TweetBox />

TweetBox というタグを使用して、さきほどのソースを呼び出しています。

2. 実行イメージ

こんな感じでツイートができます。

返信を残す

メールアドレスが公開されることはありません。