こんにちは。サイオステクノロジーにインターンシップ生として参加させていただいております、日本工学院八王子専門学校 ITスペシャリスト科の木戸口渉と申します。

今回は実装編として、前回に準備した環境をもとに、実際にAPIの利用したコーディングに入っていきます！

Webアプリの内容は、1週間分のカレンダーのイベントを表示するというものを目指します。

Google Calendar APIの動かし方を知ることを目的とするため、クラスや関数として作成せずに進めていきます。
なお、本記事はGoogle公式のGoogle Calendar API ドキュメントを参考にしています。

HTML部分の作成

早速作成していきます。方針としてはデフォルトで作成されているIndex.cshtmlを編集し、ここで1週間分のカレンダーのイベントを表示されるようにしていきます。

Index.cshtmlを開き、まずは下準備として、以下の内容を打ち込みましょう。

@page
@model IndexModel
@{
    ViewData["Title"] = "カレンダーAPIのテストページ";
}
@using Google.Apis.Auth.OAuth2;
@using Google.Apis.Calendar.v3;
@using Google.Apis.Calendar.v3.Data;
@using Google.Apis.Services;
@using System;
@using System.IO;
@using System.Threading;



<div class="text-center">
    
<h1 class="display-4">1週間のイベント!</h1>

    <hr/>
    
<table>
        
<tr>
            
<th scope="col">タイトル</th>

            
<th scope="col">開始時刻</th>

            
<th scope="col">終了時刻</th>

        </tr>

    @foreach(var ev in events.Items){
        //取得したカレンダーイベント(events)の内容を表形式で出力.
        
<tr>
            
<th scope="row">@ev.Summary</th>

            
<td>@ev.Start.DateTime</td>

            
<td>@ev.End.DateTime</td>

        </tr>

    }
    </table>
</div>

以上は取得したイベントを表示させるための土台となる部分になります。簡単なレイアウトですが、見出しとイベントのデータを挿入するテーブルを表示する内容です。 なお、23行目から29行目については後ほど機能を実装することで機能します。ここまでの動作を確認する際は、これらの行を必要に応じてコメントアウトするようにしてください。 htmlの部分についてはこれ以上の説明はありませんが、後ほど追加するC#のコードで使用するライブラリなどの名前空間をすでに指定してあります。

C#部分の作成

続けてIndex.cshtmlに以下のコードを加えます。上で示したコードの13行目の位置に追加してください。

@{
    const string APPLICATION_NAME= "<APPLICATION_NAME>";		//アプリケーション名.環境に合わせた値を入力.
    const string API_KEY= "<API_KEY>";		//APIキーの値.環境に合わせた値を入力.
    const string CREDENTIALS_URI= "<CREDENTIALS_URI>";		//Google OAuth2.0クライアント(.json)の保存場所のパス.環境に合わせた値を入力.
    string[] scopes= {
        CalendarService.Scope.CalendarReadonly,
        CalendarService.Scope.CalendarEvents,
    };		//スコープの設定.
    UserCredential credential;		//認証情報保管用の変数.

    ////認証情報の取得.
    ////OAuthクライアントをもとに認証情報を読み取り、credentialに保管.
    using (var stream= new FileStream(CREDENTIALS_URI, FileMode.Open, FileAccess.Read)){
        credential= await GoogleWebAuthorizationBroker.AuthorizeAsync(
            GoogleClientSecrets.FromStream(stream).Secrets,
            scopes,
            "user",
            CancellationToken.None
        );
    }
    ////Google Calendar API Service の生成.
    var service= new CalendarService(new BaseClientService.Initializer{
        HttpClientInitializer= credential,
        ApplicationName= APPLICATION_NAME
    });     //カレンダーAPIの準備.

    ////Request の生成.
    EventsResource.ListRequest request = service.Events.List("primary");
    request.TimeMin= DateTime.Now;
    request.TimeMax= DateTime.Today.AddDays(7);
        //イベントの取得範囲を現在時から1週間先までに設定.
    request.ShowDeleted= false;		//削除済みを非表示.
    request.SingleEvents= true;		//定期的なイベントを非表示.
    request.MaxResults= 16;     //取得するイベント数を16までに設定.
    request.OrderBy = EventsResource.ListRequest.OrderByEnum.StartTime;
        //イベントの開始時刻でソート.

    //Request の実行.eventsに保管.
    Events events= request.Execute();
}

ただし、14行目から16行目までにはご自身で用意された実際の値を入力してください。なお、”<credentials_uri>”にはダウンロードしたOAuth2.0クライアントのJSONファイルへのパスを入力してください。(例: “client_secret_DeskTop.json”)

基本的にはコード中のコメント通りの処理がなされていますが、補足説明をしていきます。
14行目から21行目まではアプリケーション名やAPIキー、認証情報のJSONファイルへのパス、Google Calendar APIへの認可スコープ設定の変数への格納を行い、また認証情報格納用の変数を用意しています。

続く23行目からは”<CREDENTIALS_URI>”のファイルを読み込み、変数credentialに認証情報を格納していきます。

33行目からは実際にGoogle Calendar APIとやり取りをするためのCalendarServieクラスのオブジェクトを作成します。

39行目からは変数requestに必要な情報を設定し、51行目のrequest.Execute()で実際に通信を行い、得られた結果を変数eventsに格納します。eventsの実際のカレンダーイベントの情報の入っているListはevents.Itemsに入っています。

カレンダー情報表示サイトの完成

以上の動作を実際に確かめてみます。
しかしその前に、テストユーザーに追加したアカウントのカレンダーにアクセスし、今後1週間のうちにイベントが入っているか確認してください。もしなければ、動作確認のために適当な設定をしたイベントを1つ以上追加しておいてください。

それでは実際にVisual Studioからプログラムを実行してみます。

実行すると自動でブラウザが立ち上がり、上の画像のように認証が求められるかと思います。以前テストユーザーに設定したアカウントをここで選択し、次の画面は続行を選択します。その次の画面でも求められる権限にチェックを入れて続行に進みます。

すると画像のようなサイトに移動するかと思います。画像のように今後1週間のうちに登録されているカレンダーイベントの一覧が表示されていれば成功です。

最後に

簡単な内容ではありますが、記事は以上になります。

ASP.NET CoreでC#を使ってGoogle Calendar APIを利用する手順について紹介してまいりました。

最後に注意として、実際にサーバーを構築してここまでで作成したものを動作させようとするとうまく動作しない恐れがあります。そうした場合には別のSDK、ライブラリ等の利用や、クライアントサイドでGoogle Clendar APIを機能させることを検討してみてください。

ここまでご覧いただき、誠にありがとうございました。

About サイオステクノロジーの中の人 2 Articles

サイオステクノロジーで働く中の人です。

Twitter YouTube