2019-12-12に更新

キャップ野球向けイベントカレンダー作ってみました。【12/12 update】

キャップ野球向けイベントカレンダー

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;
    }
  }

ロースキルでごめんなさい。

採用フォント

ELLZKugUwAAB9xs.png

普段Noto Sans JPを好んで使っているのですが、Noto Sans JPのままでは若干固いイメージだったので、M PLUS Rounded 1cを使っています。

動作イメージ

未実装の機能

  • 更新日時順表示
ツイッターでシェア
みんなに共有、忘れないようにメモ

ckoshien

個人開発4年目。普段はアプリケーションエンジニア。 ReactJS/NodeJS/ReactNative/Java

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

関連記事

コメント