Blazorアプリでテキスト翻訳する仕組みを実装する

今回はBlazorアプリケーションにGoogle翻訳を使って、テキスト翻訳する仕組みを実装する例をご紹介したいと思います

デモ

#概要
今の時代、twitter,Instagram,tiktokやYoutubeなど、ありとあらゆるグローバルなコンテンツに自動翻訳する機能が当たり前についてくるようになってきました。そこで今回は、Blazorアプリケーションにテキスト翻訳する機能を実装してみたいと思います

翻訳する機能はGoogle翻訳をGoogleAppScript(GAS)経由で呼び出します。GASからGoogle翻訳を呼び出す機能にあたっては、参照させて頂いた記事を参考に実装します。

Google翻訳APIを無料で作る方法 ( @satto_sann さん)

#実装
今回はGoogle翻訳を無料で使ってしまおうという簡易的な方法で実装です。非常に簡単な実装になりますが、APIにリクエストしてJSON形式で受け取り、C#ソースでは変数に格納、表示の更新。。実に簡単に実装ができてますね

Index.razor

@page "/"
@inject HttpClient Http

<PageTitle>Index</PageTitle>


<div class="alert alert-secondary mt-4">
    <p>@str1</p>
    <a href="" @onclick="@(_=>OnClick(1))">メッセージを翻訳する</a>
</div>

<div class="alert alert-secondary mt-4">
    <p>@str2</p>
    @if(str3?.Length>0)
    {
        <p>@str3</p>
    }
    <a href="" @onclick="@(_=>OnClick(2))">メッセージを翻訳する</a>
</div>



@code {

    string? str1 = "We cleaned the conference room as customers are scheduled to come in the afternoon.";

    string? str2 = "Today is Friday. I'm going to my friend's house on Friday. I go home at night. My mother is worried and calls.";
    string? str3 = "";

    private async void OnClick(int i)
    {
　　　　👇APIリクエストして、、
        var ret = await Http.GetFromJsonAsync<APIRet>("https://script.google.com/macros/s/AKfycbwFUkQusbcQNPmFRnX6A8wXyxYbe_QjRvk9yAcd6_UEQ4g_sfWGZDSXk5AkKo-UPvmsSw/exec?text=" + (i == 1 ? str1:str2) +"&source=en&target=ja");

        if(ret?.Code == 200)
        {
            if(i==1)
            {
　　　　　　　　　👇変数に格納
                str1 = ret?.Text;                
            }
            else
            {
                str3 = ret?.Text;
            }
　　　　　 　👇表示を更新
            this.StateHasChanged();
        }
    }

    public partial class APIRet
    {
        public long Code { get; set; }

        public string? Text { get; set; } = "";
    }
}

Blazorの表示更新は、Razor構文で直感的に書けるでの、C#開発者にとってはとてもとっつきやすいのではないでしょうか。
例えば、2つ目のメッセージでは、原文を残してその下に翻訳されたメッセージを差し込んでいます。HTML上にifなどを使うことができ、また、コード量が少なくて済むところが、Blazorアプリケーションの良いところではないでしょうか

<div class="alert alert-secondary mt-4">
    <p>@str2</p>
    @if(str3?.Length>0)  👈文字がある時だけ表示
    {
        <p>@str3</p>
    }
    <a href="" @onclick="@(_=>OnClick(2))">メッセージを翻訳する</a>
</div>

#おわりに
簡易的ではありますが、Blazorアプリケーションにテキスト翻訳を行う機能の実装例をご紹介しました
今回はGASを使用した例ですが、BlazorアプリケーションはAPIと連携するのが思いのほか簡単に実装できるので、ぜひ試してみてください

今回も小ネタになってしまいましたが、何かのお役に立てれば幸いです