キャップ野球向けイベントカレンダー作ってみました
キャップ野球向けイベントカレンダー
https://cap-calendar.netlify.com/
最近キャップ野球関係のサービスをいくつか作っているのですが、
- キャップ野球・全国大会非公式特設サイト
- 野球リーグスコア管理システム ver3α
- 優勝ラインシミュレーター
まだ普及途上にあるマイナースポーツなので、色々広報手段が足りないようで「こんなイベントカレンダー欲しい」という声を聞いたので作ってみました。
検討した仕組み
マイブームというわけではないのですが、個人開発ではDBレスのサービスを作ることが多いです。スキーマの設計が面倒なのと個人でデータを持ちたくないのが....。
最近作った主なDBレスサービス
- キャップ野球・全国大会非公式特設サイト
- ドラフト風画像作成サービス「ドラフトなう!」
- アニメランキング作成サービス「Annict Access 3」
- 音楽ランキングメーカー
- 優勝ラインシミュレーター
- ボウリング幹事アプリ「bowling party manager」
timetree
カレンダー共有ということで一番最初に考慮したのがtimetree。 ただし、外部公開されているAPIの中にカレンダーに登録されているイベントの一覧を取得するAPIがないことがわかり(19/12/7時点)、採用を断念しました。
google calendar API
定番のカレンダー。ただし、現在公開されているv3 APIはOAuth必須となっている。極力ユーザに余計なアクションをさせたくなかったので選択肢から外しました。
google public calendar
googleカレンダーには誰でも閲覧できる「公開カレンダー」があり、 その仕組みを調べていたところ、OAuthなしでデータを取得できるという結論に達しました。
イベントの種類タグ
イベントの種類を分類するために、イベントのタイトルにタグをつけてもらう方式にしました。
例:【イベントの種類】【イベントの場所】タイトル
強敵、正規表現....
エンジニアとして避けては通れない道なのはわかっているのですが、1つめの【】の中は取得できるものの、繰り返しの取得ができず、
(ノ`Д)ノ彡 ┻━┻ ←こんな感じになりました
結局文字列を再帰的に検索するという力業で解決しました。 文字列処理はHSP時代に腐るほどやったんや....
findTag=(str,tags)=>{ console.log(tags) let beginIdx = str.indexOf('【'); let endIdx = str.indexOf('】'); if(beginIdx !== -1 && endIdx !== -1){ let tagStr = str.substring(beginIdx + 1,endIdx); tags.push(tagStr); this.findTag(str.substring(endIdx + 1,str.length),tags); return tags; }else{ return tags; } }
ロースキルでごめんなさい。
採用フォント
普段Noto Sans JPを好んで使っているのですが、Noto Sans JPのままでは若干固いイメージだったので、M PLUS Rounded 1c
を使っています。
動作イメージ
未実装の機能
- 更新日時順表示