【ASP.NET Core MVC入門】③Controller、Viewの使い方と外部APIからHTTP(GET)する方法を解説！

こんにちは。サイオステクノロジーにてインターンシップに参加させていただいております、日本工学院八王子専門学校 ITカレッジの大賀です。

前回の記事、【ASP.NET Core MVC入門】②ASP.NET Core MVCでプロジェクトを作り、Webページを表示させる方法では、ASP.NET Core MVCでプロジェクトを作成し、サンプルのページを表示させる方法をご紹介しました。今回の記事では、私たちインターンシップ生の制作物を利用してをController、Viewの簡単な使い方、外部APIから情報を取得する方法をご紹介します。

1 私たちが制作したもの
2 コントローラ
3 ビュー
4 外部APIから情報を取得する
5 コントローラでリダイレクト

私たちが制作したもの

私たちは、「Schedule Supporter」というシステム名で、時間を選択or利用者のGoogleアカウント(OAuth2.0で認証)から自動でGoogle Calenderの予定を取得し、晴れ、曇りなら現在地周辺のスポットをGoogle Map Places APIから取得し表示させ、雨ならNHK番組表APIから番組表を取得し、予定のない時間帯に放送するテレビ番組の一覧を表示させるWebアプリケーションを制作しました。

この中で私は全てのページのビューと、天気情報の取得、それによるリダイレクトを行うControllerアクションメソッドの実装を行いましたので、その部分も利用して説明していきます。

コントローラ

まず、ASP.NET Core MVCには、Program.csの23-25行目に以下のようなコードがあります。

これはURLにアクセスした時、最初に行われるコントローラのアクションを定義するもので、このコードではHomeコントローラのIndexアクションメソッドを実行します。

{id?}というのは○○.○○/1というように、プラスでパラメータを指定できます。末尾に?があるのは必須ではない、という意味です。パラメータの扱いは次の記事で利用しますので、取り敢えず今は無視して頂いて構いません。

基本的にコントローラで何かを実行させる時は、ビューでコントローラ、アクションを指定し、指定されたコントローラ、アクションのメソッドを実行して動的にWebアプリケーションを動作させる形になります。

まず、前回の記事で作成したサンプルページの、Views/Shared/_Layout.cshtmlの23，26行目を見てみましょう。

このaタグのasp-controller属性でコントローラを、asp-action属性でアクションをそれぞれ指定して、ユーザがクリックすることで、それを呼び出す事ができます。aタグだけでなく、InputタグやButtonタグでも利用可能です。

次に、Controllers/HomeController.csの、こちらのブロックを見てみましょう。

IActionResult 〇〇(){} というのは、○○アクションが呼び出されたら、このメソッドを走らせますよ、という意味で、この場合は、IndexアクションでIndex.cshtmlを、PrivacyアクションでPrivacy.cshtmlをレンダリングする、という内容が記述されています。View()に引数が指定されていない場合は、アクションと同じ.cshtmlが出力されます。

コントローラのファイル名には接尾辞として○○Contorollerと命名しますが、Viewでアクションを起こす際のコントローラの指定は〇〇のみで行います。

アクションメソッド内でメソッドを実行する場合は、View以外にも以下のようなメソッドが存在します。

Content()　・・・　指定された内容をテキストとしてブラウザに返す

File()　・・・　指定されたファイルをブラウザに返す

Json()　・・・　指定されたJSONレスポンスをクライアントに返す

Redirect()　・・・　指定されたURLにリダイレクトさせる

RedirectToAction()　・・・　指定されたアクションをコントローラから実行する

詳しくはこの辺のドキュメントを読み込むと良いかと思います。

ASP.NET Core MVC でコントローラーで要求を処理する | Microsoft Docs

Controller クラス (Microsoft.AspNetCore.Mvc) | Microsoft Docs

ASP.NET Core のアンカータグヘルパー | Microsoft Docs

また、アクションメソッド内でコントローラ単体で完結する処理を記述することも可能です。この後説明しますが、取得する情報に基づいてリダイレクトするビューを動的に変更する、などといった処理も可能です。

ビュー

第一回の記事でお伝えしたように、ビューでは.cshtmlという形式を用いて、HTML/C#を共存できる形式で記述しますが、動きの少ないものであれば、こちらは基本的にHTMLのみで記述しても構いません。

ビューの使い方、とは言ったものの、ビューは見た目(表示)を構成するものなので、HTMLが書ければ、実はビューを作ることは可能なのです。

中に<script>タグを書いてスクリプトを走らせるも良し、~/js、~/cssでそれぞれを参照させるも良し、使い方は自由です。

ただし、この内容がレンダリングされる前にViews/Shared/Index.cshtmlの内容が事前に適用される点に注意してください。

そして、第一回記事でお伝えしたように、ASP.NET Core MVCにはRazor Pagesで動的なWebページを作成する事ができます。

ビューにおけるASP.NET Core MVC特有の要素は基本的にこちらだけです。

SPA(シングルページアプリケーション)のような形式をとる事も可能です。(最も、SPAであればMVCモデルを利用する必要はありません)

こちらに記法がかなり深いところまで解説されています。

私たちはJavaScriptとコントローラで動的な部分を構成したため、Razor構文は殆ど利用しませんでしたが、@{}といったコードブロックでC#の記述ができたり、@〇〇といった形式でディレクティブを利用できたり、極めるとかなり自由度の高い開発ができると感じました。

モデルを利用した開発で真価を発揮すると思いますので、是非データベース/モデルを利用したWebアプリケーション開発を行う方は利用してみてください。

外部APIから情報を取得する

詳細は割愛しますが、インターネット上で情報を伝達する際はHTTPというプロトコルで通信を行い、中でも情報の取得を行うためのGET、情報を送信するためのPOSTなどのリクエストメソッドが代表的なものとして利用されています。

そして、一応説明しておきますが、APIとは、外部のサービスやシステムから簡単に情報を受け取れる仕組みの事です。APIがあれば、自分でその機能を実装するためのコードを記述する必要は無く、Webアプリケーションにおいては基本的にAPIごとの正しい規則でHTTP通信をするだけで欲しい情報の取得、機能の実装ができるのです。

今回はAPIキーやアクセストークンが不要で、URLに指定したパラメータだけで取得する情報を選択でき、非営利で利用可能な、無料かつオープンソースの天気情報取得API、”Open-Meteo Weather Forecast API”を利用し、現在の天気情報を取得します。

Open-Meteo Weather Forecast APIは、7日先までの予報情報や、風速、雲量、気圧など、様々な情報を取得できます。

今回は取得した情報を.NET CLIに表示する方法をご紹介します。

まず、C#でHTTP通信を行うためには、HttpClientというクラスを利用する必要があります。また、非同期処理を行うため、コントローラのアクションメソッドは public async Task<IActionResult> Action()という形で記述します。

ただし、このままの状態で情報を取得すると文字列型で出力されてしまいますので、このデータをデシリアライズ（解析、分割）してくれるJObjectというC#のクラスを利用して取り出したいデータを抽出します。利用するのはいたって簡単で、.NET CLIでパッケージを追加して、コードを2行追加するだけです。(↓の画像における3行目、17行目)

.NET CLIでパッケージを追加するには、追加するASP.NET Core MVCのディレクトリで以下を入力します。

> dotnet add package Newtonsoft.Json

以上を踏まえて、HttpClientでGETして、JSON形式で出力するコードがこちらになります。