CodeZine(コードジン)

特集ページ一覧

ASP.NET Coreのホストでブラウザの制限を回避

ASP.NET Core Blazorチュートリアル 第4回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2021/05/28 11:00

 ASP.NET Core Blazor(以下Blazor)とは、.NET環境のC#で対話型のWeb UIを構築するためのフレームワークです。Blazorには、サーバーサイドで動作するモデル(Blazor Server)と、クライアントサイドで動作するモデル(Blazor WebAssembly)が含まれますが、本連載では、主に、クライアントサイドのフレームワークであるBlazor WebAssemblyについて解説します。

目次

対象読者

 C#とWebシステムの基礎的な知識がある方を対象とします。C#の基本文法などの解説は割愛します。

はじめに

 前回までのアプリでは、プロジェクトの作成時のオプションで、「ASP.NET Coreでホストされた(ASP.NET Core hosted)」にはチェックをいれませんでした。今回は、ASP.NET Coreでホストされたプロジェクトを作成します。これまでのアプリはブラウザ内で動作するため、どうしても処理の制限が多くなってしまいます。今回はその制限を回避するために、「ASP.NET Coreでホストされた」プロジェクトで作成します。

天気予報表示アプリ

 気象庁のサイトで公開されている気象情報のXMLデータを利用して、全国の天気予報を表示してみます。

天気予報の表示
天気予報の表示

新規プロジェクトの作成

 Visual Studioを起動して、新しいプロジェクトの作成を選択し、プロジェクトテンプレートとして、Blazorアプリを選択します。プロジェクト名を設定した後、次のダイアログでは、.NET5.0を選択し、「ASP.NET Core でホストされた」にチェックを入れます。

追加情報
追加情報

 「ASP.NET Core でホストされた」ソリューションでは、これまでのBlazorアプリ単体のプロジェクト(名前の最後が~.Client)以外に、ASP.NET Coreのサーバープロジェクト(~.Server)と、さらにソリューション全体で共有するクラスを定義するプロジェクト(~.Shared)の、3つのプロジェクトが生成されます。

ASP.NET Core でホストされたプロジェクト構成
ASP.NET Coreでホストされたプロジェクト構成

 前回までのようなBlazor WebAssemblyだけのアプリでは、上述の通り、ブラウザ上で動作するために多くの制限があります。主にセキュリティを守る目的なのですが、データの保存や、外部リソースを利用する際には、かなり不自由になってしまいます。

 そこで、Blazor WebAssemblyのテンプレートでは、ASP.NET Coreでのサーバー機能を利用して、制限を回避するアプリが用意されています。サーバーといっても、この場合は、ローカル環境でASP.NET Coreを使ったWeb APIサーバーを作成する形になります。Blazor WebAssemblyからは、このローカルのWebAPIを通じて、ファイルアクセスやDB、外部リソースを活用した処理を行います。こうした構造にすることで、ブラウザの制限を回避しているわけです。

 なお、ローカルのWeb APIサーバーは、「IIS Express」、または、ASP.NET Coreに組み込まれたWebサーバー上で動作します。

アプリの構成

 今回作成するアプリは、大きくは次の2つの処理から成り立っています。

  1. 天気予報の地域を選択するセレクトボックスの表示
  2. 指定された地域の天気予報表示

  • LINEで送る
  • このエントリーをはてなブックマークに追加

あなたにオススメ

著者プロフィール

  • WINGSプロジェクト 高江 賢(タカエ ケン)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

バックナンバー

連載:ASP.NET Core Blazorチュートリアル
All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5