お疲れ様です。
この前某カレンダーアプリを見ていたら、簡単にスタンプが押せる機能があったんですね。
これ結構使いやすくて、概要とか入力しなくて、とりあえずイラストだけ変わればいいってことあるじゃないですか。
（イメージとしては、バイトとかのシフトが近いですかね・・・）
とりあえず使ってるアプリに不満はなかったんですが、その予定を共有したくなった時に不便が生じました。
結局アプリでローカルに持ってるだけなので、それを共有するってのがなかなか難しかったのです。。。
というわけで、今ないものは作ってしまえというのが今回のテーマです。
初めに
レギュレーション
分解して考えてみると、以下の2点がレギュレーションになるかなと
- カレンダーでボタンを押すだけでイラストが変えられること。
- 誰でも状態を確認できること。（→必然的にWebアプリ？？）
使った技術
さくっと作りたかったので、いったんReactを使ってやってみることにしました。
- React：フロントエンドフレームワーク。ベースです。
- React-Calendar：今回の肝。カレンダーのライブラリーはこれ
- Material-ui：別になくてもいいんですけど、Webアプリケーションとしての体裁を・・・
作ったもの
コードとデモ
とりあえず以下Gitで管理してます。
最初に断っときますが、動けば十分で作ってますので品質はご容赦ください・・・
デモは以下です。
ポイント
苦労した点は以下です。
カレンダー表記
基本的には、tileContentにて、各日付の値を設定できます。dateの変数の中に日付情報が入っていますので、
これをよしなに変数に渡して何とか値を取得するようにします。
<Calendar
tileContent={({date}) =><p><img height="100" width="100" src={`${process.env.PUBLIC_URL}/` + showTypeValue(date) + `.png`}/>{showContent(date)}</p>}
/>
ただし、ソースを読んでいただくとわかるように、毎回undefinedチェックをしているので、
これはこれで相当非効率だなと思います・・・いい方法ないですかねぇ・・・
データの持ち方
ReactはFunctionで行くようになったので、HooksであるuseStateを使ってます。
ポイントは、配列を利用していることです。
react-calendarで、日付が一致するときに判定を行いたいため、例えば、2020/12/11の定義を行いたい場合に、
20201211の値として、typeValueを持つことによって、今どのアイコンを表示するか、を保持するようにしています。
const [ item, setItem ] = useState({20201211:{holiday:true,txt:'aiueo',typeValue:1}});
アイコン変更方法
typeValueがアイコンナンバーを示しているので、ボタンが押されたときに数字を変更しています。
Switchでやってますが、個人的には最高に頭悪いのでなんかいい方法ありますかね・・・
switch(item[getFormatDate(e)].typeValue){
case 1: {
tmpTypeValue = 2;
break
}
case 2:{
tmpTypeValue = 3
break;
}
case 3:{
tmpTypeValue = 1
break;
}
default: {
tmpTypeValue = 0
break;
}
}
終わりに
reactを本当にさわりだけやってない人間がやると本当に非効率な書き方しかできてなくて嫌になりますね。。。
今後の展望
バックエンドAPI
とりあえず当初の目的である”共有”ができていないので、ServerlessFrameworkとかでバックエンドのAPI作って、
そこと同期できるようにしたいなとは思います。
認証
今はURL知ってればだれでも閲覧できてしまうため、認証を入れたいです。
逆に
今回のレギュレーションを達成しているアプリとかもう既にあったりしたら是非教えてください。もれなく私が喜びます。