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. 実行イメージ

https://www.youtube.com/watch?v=AWgrfarczsE&feature=youtu.be

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

速攻でメモできる QuickNote リリースしました!

QuickNoteは動作が超軽量でサクサクかけるノートアプリです。一瞬の閃きを逃さずにノートを開き書き始めることができます。 アカウント登録も不要です。お試しあれ!

Excel操作をコマンドで! proBoarderExcel

Excelはマウスで操作するのが基本ですが、マウス操作に疲れてはいませんか? キーボードでExcel操作ができるようになるアプリです。オープンソースで無料です。

積み上げ! Daily Stack リリースしました!

Daily Stack は日々の積み上げを管理するToDoアプリです。過去の積み上げの振り返りだけでなく、ツイート機能もあります。 アカウント登録不要ですぐに使い始めることができます。

ExecNote.app リリースしました!

ExecNoteは、コードが実行できるMarkdownアプリケーションです。Markdownドキュメント内に記載したコードをクリックすると実行ができます。わざわざターミナルを 起動させる必要がありません!無料ですのでもしよければダウンロードをお願いします。

About Me

11年目のシステムエンジニアです。アプリで生活や仕事を改善したい🐱仕事効率化、自動化のアプリ開発が得意です、ご相談ください。 🚀エンタメ系アプリの開発も模索中🐬社内SEや個人アプリ開発者、システムエンジニアになりたい人と繋がりたい🐱