はじめに

諸事情あって、いちいちググらなくても過去のある日のドル円相場をパッと知りたいなあと思ったのですが、良い感じの既存のサービスが見つかりませんでした。

というわけで、「ほな、自分で作るか」と思ったのでちょっとやってみました。

欲しいもの(要件？)

過去のドル円相場を、日付を指定したら表示してほしい
カレンダーでポチポチ選べると良さそう
利用頻度は多くても月に10回程度
デスクトップアプリじゃない方がいい(ブラウザのブックマークから開きたい)

フレームワーク

自分がC#に慣れているので、C#ベースでwebアプリを開発できるBlazorを利用してみることにしました。
Microsoft公式のチュートリアルをひたすら参考にしましたが、最初の方は画面更新すらできず結構苦労しました。(StateHasChanged()の呼び忘れでした……。)

ドル円相場の取得

無料で使い放題のAPIは無かったので、「月に10回程度なら無料で利用できる」・「過去のドル円相場が無料で取得できる」ことを条件として探し、以下を選定しました。
https://currencyapi.com/

APIの呼び出し回数の制限が300回/月なので、よほど連打しなければ使い切ることはないはず。

なお、公式からC#のSDKが公開されていたのですが、ソースコードを見に行ったところ「クエリパラメータでAPIキーを指定するとアクセスログなどからAPIキーがバレるので、HTTPのリクエストヘッダーに指定した方がいいよ！」と公式のドキュメントに書いてあるにもかかわらずクエリパラメータで指定する実装になっているようでした。
そのため、SDKは使わず、入力されたAPIキーをリクエストヘッダに突っ込んでAPIを呼び出すような実装を自前でしました。

UXについて(うまくいっていないこと・できていないことが多め)

APIキー

登録制のAPIを利用する以上、APIキーの入力と認証は避けられませんでした。
また、回数制限があるので、本当は残り回数を画面で表示すべきなのですが、できていません。

日付選択

本当はカレンダーをポチポチすると即表示される……という風にしたかったのですが、APIの呼び出し回数に制限があるので、むやみな呼び出しを避けるために結局カレンダーで選択→ボタン押下でドル円相場を表示するようにしました。

履歴の表示

APIの呼び出し回数に制限があり、かつ一度の呼び出しで1日ぶんのドル円相場しか取得できないため、一度表示した日付のドル円相場は画面上に履歴として表示するようにしました。
また、一度表示していて履歴に存在する日付をカレンダーで選択してボタンを押した場合は、APIを改めて呼んでしまわないようにガードをかけています。

レイアウト

各コントロールの配置・マージンがだいぶ詰まっているので直したかったのですが、やれていません。

公開方法

google firebaseを利用し、以下の記事を参考にデプロイしました。
https://qiita.com/kimuradesu/items/3d70d5f4f1370764aa39

作ったもの

以下です。(CurrencyAPIに登録してAPIキーを入手しないと動きません。)
https://exchangeappproject.web.app

動かすとこのような感じです。

さいごに

機能としては小さなものですし、特にUX周りが本当によろしくないのですが(見栄えが悪すぎる……)、個人開発でアプリを初めて公開まで持っていけたのは良かったです。
またネタがあれば(欲しいものができれば？)個人開発やってみたいなと思います。