ETロボコンランキングサイトのしくみ

[ETロボコンランキングサイト](https://ranking.etrobo.jp/)を立ち上げて今年で5年目に突入しました。
URL をご覧になれば察しが付くと思いますが、このサイトは Microsoft が提供するクラウドサービスである[Microsoft Azure](https://azure.microsoft.com/?WT.mc_id=AZ-MVP-5003113)プラットフォーム上で動います。そして Azure が提供するいろいろなサービスを使って構築しています。

ちょっと今さらな感じではありますが、このサイトについて紹介しようと思います。


# ETロボコンとは
[ETロボコン公式サイト](https://www.etrobo.jp/)の「ETロボコンとは」をクリックすると、このコンテストの概要が掲載されていますので、そちらをご覧ください。


# 計測システムとは
ETロボコンの地区大会やチャンピオンシップ大会に行ったことがある方ならご存じかと思いますが、参加者のみなさんが競技を行っている際、走行タイムや各難所のクリア状況をステージ上のスクリーンに映し出している情報を計測しているシステムです。この計測システムはETロボコンランキングサイトとデータ連携しています(詳しくは後述します)。

![IMGT6776.JPG](https://qiita-image-store.s3.amazonaws.com/0/230264/84417c67-b85d-f57a-74d3-28f51b38a906.jpeg)
スクリーンに映し出された計測システム


# ETロボコンランキングサイトとは
このサイトでは、デベロッパー部門プライマリークラス、およびアドバンストクラスの競技結果をランキング形式で公開しています。先ほど紹介した計測システムから競技結果をアップロードしてもらい、それを基に全国ランキングを作成しています。

![top.png](https://qiita-image-store.s3.amazonaws.com/0/230264/202b36c4-eafc-e26d-da47-af1b0dde2d1b.png)
ETロボコンランキングサイト([https://ranking.etrobo.jp/](https://ranking.etrobo.jp/))

各大会の開催場所によりコンディション(難所の難易度など)は異なりますが、

- 私たちはどれくらいのレベルなんだろう
- 気になるあのチームはどんだけ難所をクリアしたんだろう
- あのチームを追い抜くつもりで、大会までラストスパートだ

みたいに、このサイトの情報をご覧いただけたらなと思います。

なお、このサイトには2014年大会以降のランキングを掲載しています。過去に参加された方は当時のランキングをご覧になって、あの頃のことを思い出してみてはいかがでしょうか。


# システム構成
前置きが長くなりましたが、そろそろ本題に入っていきましょう。
以下は、ETロボコンランキングサイトのシステム構成図です。青い線で囲った部分が Azureプラットフォームとなります。

![etroboranking.png](https://qiita-image-store.s3.amazonaws.com/0/230264/8d17a29b-be65-8d98-3e73-76d18e4237f1.png)
システム構成図

ご覧のとおり、いろいろとAzureのサービスを使っています。ただ無駄に使っているわけではなく、いろいろ考えてみた結果、こんな形になりました。
ちなみに、サーバーなどのインフラのメンテナンスとか面倒くさいので、すべてPaaSのサービスを採用しています。インフラ面はAzureさんに任せることで、アプリケーションのことだけに注力することができますね。

なお、このサイトで採用しているAzureのサービスとその用途は、以下のとおりです。

- [App Service](https://azure.microsoft.com/ja-jp/services/app-service/?WT.mc_id=AZ-MVP-5003113)
    - [Web Apps](https://azure.microsoft.com/ja-jp/services/app-service/web/?WT.mc_id=AZ-MVP-5003113) ... アプリケーションをホスト
- [SQL Database](https://azure.microsoft.com/ja-jp/services/sql-database/?WT.mc_id=AZ-MVP-5003113) ... コンテスト情報、チーム情報、競技結果を格納
- [Storage](https://azure.microsoft.com/ja-jp/services/storage/?WT.mc_id=AZ-MVP-5003113)
    - [Blob Storage](https://azure.microsoft.com/ja-jp/services/storage/blobs/?WT.mc_id=AZ-MVP-5003113) ... 画像ファイルを格納
    - [Table Storage](https://azure.microsoft.com/ja-jp/services/storage/tables/?WT.mc_id=AZ-MVP-5003113) ... ランキング表などを格納
- [Azure Active Directory](https://azure.microsoft.com/ja-jp/services/active-directory/?WT.mc_id=AZ-MVP-5003113) ... ユーザーアカウントの管理、認証

それでは、要所要所でどのようなことを行っているか、紹介していきます。


# 競技結果をアップロード
計測システムから競技結果をアップロードします。

![etroboranking1.png](https://qiita-image-store.s3.amazonaws.com/0/230264/bc66875d-21b0-fd29-a26c-6f2df0656836.png)

このサイトには、競技結果を受け付けるAPIを用意しています。誰でも自由に競技結果をアップロードされては困りますので、許可されたユーザーしかアップロードできないようにしています。これを実現するために、[Azure Active Directory](https://docs.microsoft.com/ja-jp/azure/active-directory/active-directory-whatis?WT.mc_id=AZ-MVP-5003113)(Azure AD)でユーザーアカウントを管理しています。そしてアプリケーションの認証はこのAzure ADに任せています(アプリケーション自体には認証機能は実装していません)。

[(参考) Azure AD の認証シナリオ](https://docs.microsoft.com/ja-jp/azure/active-directory/develop/active-directory-authentication-scenarios?WT.mc_id=AZ-MVP-5003113)

認証手順についてザックリと説明すると、

1. 「計測システム」で「競技結果」をアップロードする際に、サインインします。
2. サインイン後、「計測システム」は「Azure AD」からそのユーザーの「認証コード」を受け取ります。
3. 「計測システム」は「競技結果受付API」に要求する際に、この「認証コード」を送ります。
4. 「競技結果受付API」は、受け取った「認証コード」を検証します。検証が正常に完了すると「競技結果」を受け取り、SQL Databaseに格納します。

この仕組みについては、先ほど紹介した「Azure AD 認証シナリオ」内の以下のセクションを参考に構築しました。

[(参考) Azure AD の認証シナリオ > ネイティブ アプリケーション対 Web API](https://docs.microsoft.com/ja-jp/azure/active-directory/develop/active-directory-authentication-scenarios?WT.mc_id=AZ-MVP-5003113#native-application-to-web-api)

競技結果を格納している[SQL Database]((https://docs.microsoft.com/ja-jp/azure/sql-database/sql-database-technical-overview?WT.mc_id=AZ-MVP-5003113))は、SQL Serverデータベースエンジンを基礎としたPaaS型リレーショナルデータベースのサービスです。SQL Serverの最新機能はこのSQL Databaseからリリースされ、その後SQL Server製品へリリースされています。


# ランキングを生成
ランキングの生成について。

![etroboranking2.png](https://qiita-image-store.s3.amazonaws.com/0/230264/5acbe46d-b27b-4b20-ae89-de14d6067f77.png)

計測システムからアップロードされた競技結果からランキングを生成します。
当初は、サイトが閲覧される際に、SQL Databaseに対してランキング(上位最大100件を表示)を生成するクエリを発行していましたが、ランキングの更新頻度はそれほど激しいわけではないし、毎回複雑なクエリを発行するのもカッコ悪いなーと思いました。

なので、後日、ランキングは事前にバックグラウンドで作成するように改修しました。この機能を実現するために、Azure App Serviceの機能のひとつである[Webジョブ](https://docs.microsoft.com/ja-jp/azure/app-service/web-sites-create-web-jobs?WT.mc_id=AZ-MVP-5003113)を採用しました。
Webジョブでは定型的なバッチ処理を実行できます。[いろいろな言語(ファイルの種類)](https://docs.microsoft.com/ja-jp/azure/app-service/web-sites-create-web-jobs?WT.mc_id=AZ-MVP-5003113#acceptablefiles)をサポートしています。このサイトでは定期的に(1時間に1回)実行するように構成しています(Webジョブには他にも[種類](https://docs.microsoft.com/ja-jp/azure/app-service/web-sites-create-web-jobs?WT.mc_id=AZ-MVP-5003113#webjob-types)があります)。

作成したランキングの格納先ですが、一般的にはそのままSQL Databaseに保存すると思いますが、「サイト(ランキング)を閲覧する際、SQL Databaseではなく、[Table Storage](https://docs.microsoft.com/ja-jp/azure/cosmos-db/table-storage-overview?WT.mc_id=AZ-MVP-5003113)に対して問合せしたほうがレスポンスが速いのでは？」と考え、試しにやってみたら何となくそう思えてきたので、これを採用しました。
Table Storageはスキーマレスの構造型データが格納できます。なので、アプリケーションの都合に合わせてデータを修正することが容易にできます。しかもデフォルトで[高速にアクセス](https://docs.microsoft.com/ja-jp/azure/storage/common/storage-scalability-targets?WT.mc_id=AZ-MVP-5003113#azure-table-storage-scale-targets)できます。

これで無事ランキングが作成されましたが、せっかく作成(更新)したのに誰も見てくれないのではとてもさみしいです。なので、Twitterの[@ETroboranking](https://twitter.com/etroboranking)アカウントからランキングが更新された旨をツイートしています。ぜひフォローしてください。

![twitter.png](https://qiita-image-store.s3.amazonaws.com/0/230264/b55b6252-0d6f-8e7f-2bb4-b6181ee8969a.png)
@ETroboranking([https://twitter.com/etroboranking](https://twitter.com/etroboranking))


# ツイートを探索
ツイートの探索はハッシュタグ「#etrobo」が付いたツイート(画像付き)を探します。

![etroboranking3.png](https://qiita-image-store.s3.amazonaws.com/0/230264/dbdb60ac-525f-c2c1-d61b-a824e2908688.png)

このサイトの更新が多く行われるのは、競技が行われている8月頃～11月頃(試走会2、地区大会、チャンピオンシップ大会)のみで、これ以外の時期は全く更新されません。これではとてもさみしいですし、テキストしか掲載されていないサイトでは見飽きてしまいます。そこで、参加者や実行委員が何か活動していることをこのサイトからも発信できればと思い、この仕組みを作ってみました。

![top2.png](https://qiita-image-store.s3.amazonaws.com/0/230264/20018582-9c24-f095-1f8b-6daf56ca6c23.png)

これもWebジョブを採用して、定期的に(1時間に1回)実行するように構成しています。
集めた画像は、Blob Storageに格納しています。
[Blob Storage](https://docs.microsoft.com/ja-jp/azure/storage/blobs/storage-blobs-introduction?WT.mc_id=AZ-MVP-5003113)は、テキストやバイナリデータ(ファイル)を格納することができるサービスです。HTTPまたはHTTPSでどこからでもアクセスできます。なお、Azure Storageの管理を容易にできる[Azure Storage Explorer](https://azure.microsoft.com/ja-jp/features/storage-explorer/?WT.mc_id=AZ-MVP-5003113)というツール(Windows、Mac、Linuxに対応)が無料で入手でき、WindowsのエクスプローラーのようにGUIで操作することができます(前述のTable Storageも操作できます)。


# ランキングを閲覧
掲載する情報が出揃いました。
サイトのデータソースは前述のとおりStorageです。

![etroboranking4.png](https://qiita-image-store.s3.amazonaws.com/0/230264/73c569c7-d852-b35f-78c2-b5eed6531e4b.png)

現在、このサイトのURLは既定のドメイン「～.azurewebsites.net」を使っていますが、お持ちの[独自ドメインをマップ](https://docs.microsoft.com/ja-jp/azure/app-service/app-service-web-tutorial-custom-domain?WT.mc_id=AZ-MVP-5003113)したり、独自ドメインの[SSL証明書をバインド](https://docs.microsoft.com/ja-jp/azure/app-service/app-service-web-tutorial-custom-ssl?WT.mc_id=AZ-MVP-5003113)することもできます。
※既定ドメインでSSLを使用することができます(設定は不要)。


# 最後に
この「ETロボコンランキングサイト」ができる以前も競技結果を(手作業で)掲載していましたが、それは大会ごとの情報のみで、全国レベルでのこのような情報を知るすべがほぼ皆無(チャンピオンシップ大会に出場しないとわからない)でした。
このサイトが登場して画期的だったことは、**「計測システムで計測した情報が、人の手が介入することなく、このサイトに連携され、公の場にその情報を開示する」**、すなわち**「競技結果を健全な形でみんなが見れる」**ことなのです。
※と、尊敬する先輩からこのようなお言葉をいただきました。

なお、このサイトの構成は、ここまで紹介した形が最終形というわけではなく、Azureを含むMicrosoftクラウドサービスが提供するたくさんのサービスや機能を使うことができると考えています。

例えば、Webジョブに実装している定期的なバッチ処理は、サーバーレスな[Azure Function](https://docs.microsoft.com/ja-jp/azure/azure-functions/functions-overview?WT.mc_id=AZ-MVP-5003113)に置き換えると、私はもっと幸せになれるかもしれません。

[(参考) Azure Portal で初めての関数を作成する](https://docs.microsoft.com/ja-jp/azure/azure-functions/functions-create-first-azure-function?WT.mc_id=AZ-MVP-5003113)
[(参考) Visual Studio を使用して初めての関数を作成する](https://docs.microsoft.com/ja-jp/azure/azure-functions/functions-create-your-first-function-visual-studio?WT.mc_id=AZ-MVP-5003113)
[(参考) Flow、Logic Apps、Functions、WebJobs の比較](https://docs.microsoft.com/ja-jp/azure/azure-functions/functions-compare-logic-apps-ms-flow-webjobs?WT.mc_id=AZ-MVP-5003113)

また、「ツイート送信」や「ツイート探索」は、[Microsoft Flow](https://flow.microsoft.com/ja-jp/)で[Twitter関連のコネクタ](https://flow.microsoft.com/ja-jp/connectors/shared_twitter/twitter/)を利用すると、もっと簡単に実現できるかもしれません。

[(参考) Microsoft Flow のガイド付き学習](https://docs.microsoft.com/ja-jp/flow/guided-learning/?WT.mc_id=AZ-MVP-5003113)
[(参考) サポートされているコネクタ](https://flow.microsoft.com/ja-jp/connectors/)

最後に、この記事で紹介した内容がみなさんの業務や知識の向上に少しでもお役に立てればと思います。