勉強時間可視化アプリをReactで作ってみた
まえがき
現在サービス提供停止してます！本記事には実装方法は記載してないのでReactを使ってこんなページ作れるんだぁという参考程度にご覧ください。
要望があればHerokuか何かで稼働させようと思います。
基本的には以下のページで紹介しているReact用のパッケージを使って実装してます。
https://laplace-daemon.com/how-to-create-radar-chart-in-reac...この記事では学習時間可視化アプリ「Skillboard」とは何かについて簡単に説明した後、利用方法をご説明いたします。
説明内容は以下の目次をご覧ください。
Skillboardとは
概要
Skillboardは、あなたの学習時間を記録、可視化するためのアプリケーションです。
詳細
Skillboardは以下の特徴を持っています。
- “ALL"スキルを頂点としてその下に学習項目（スキル）をツリー構造で紐付け
- 学習項目に対して費やした時間を記録することで、レーダーチャートで学習時間を可視化
- レーダーチャートでの学習時間の表示により、ゲーム内のレベルアップによるステータス向上と同じような感覚を再現し、学習意欲を刺激
基本利用方法
当アプリケーションの基本的な利用方法をお伝えします。
当アプリケーションはスマホ、タブレット及びwebブラウザで利用することが可能です。
スマホでの利用が最も多いと考えられますので、以後「クリック」という言い方はせず、「タップ」という言葉を使って説明を進めていきます。webブラウザからご利用の方はタップをクリックと読み替えてください。
ログイン方法
当アプリケーションはログインして利用することを前提としています。ログインするまではサンプルデータが表示されているだけで、編集は不可となっています。
一度ログインするとアプリケーション内部でユーザーアカウントが作成され、以後そのアカウントに紐づくデータを操作していくことになります。
ログインは以下の手順に従って行ってください。
1. 右上のログインボタンをタップ
2. ログインに利用したいアカウントをTwitterかgmailか選択しタップ
3. アカウント情報を入力しログイン
以上です。
初回ログイン時にユーザーアカウントが作成され、ログイン中に保存した情報はそのアカウントに紐づくことになります。
またログイン処理をしている最中LOGINボタンは「LOADING…」へと表示が変わり、ログインが完了したらLOGOUTボタンに変わります。
LOGOUTボタンをタップするとログアウトでき、「LOADING…」状態の場合はタップしても何も発生しません。
スキル追加方法
スキルの追加方法を説明します。以下はスキル追加に使うフォームです。
- 新しく追加したいスキル名を新スキル名欄に入力
- 新スキルが直接紐づくスキルを親スキルとして選択
- 追加ボタンをタップ
以上です。
新しいスキルの追加には以下のような制限がありますのでご注意ください。
- スキル名に利用できる文字数は1~12文字
- すでに登録されているスキル名は利用できない
- 一つの親スキルに対し、追加できるスキルは8個まで(チャートの表示上)
初回ログイン後にはALLを親スキルとして3つ新スキルを登録してみましょう。チャートが表示されるようになります。
学習時間の追加方法
学習時間の追加方法をご説明いたします。
- Add Timeを見つける(スマホの場合、スキルテーブルを左にスワイプすると見つけられます。)
- 枠に学習時間を半角数字で記載
- +ボタンをタップ
以上です。
学習時間は追加したタイミングで即座に上のチャートに反映されます。
nowに表示されているのが現在までの合計学習時間です。
カッコ内に表示される数字は直近で追加した時間になります。時間を追加したのかしていないのかの確認のためにお役立てください。
表示するスキルの選択方法
チャートやテーブルとして画面に表示するスキルを選択する方法を説明します。
表示されるスキルは一つの親スキルに直接紐づく子スキルになります。
1.(スマホの場合)左上の三本の線が並んだボタンをタップ
2.スキルツリーをから画面に表示したいスキルを選び、タップ
以上です。
注意点として、スキル名が長い場合だと、画面からはみ出てしまうことがあります。その場合はスキル名を省略して登録していただくようお願いいたします。
主スキル設定方法
主スキルとは当アプリケーション独自の単語のため、まずは主スキルがどのような役割を果たすのか説明します。その後、設定方法をお伝えいたします。
主スキルとは
主スキルはスキル全体の合計学習時間を管理するために利用しています。少し複雑な箇所なので具体例を用いて説明いたします。
具体例：親スキルの時間を追加した場合
ある親スキルがあり、その子スキルが「国語：30時間」、「算数：20時間」、「英語：40時間」の３つであったとしましょう。
その場合には親スキルは全ての子スキルの合計値である30 + 20 + 40 の 90時間になります。しかしこの後、親スキルの時間90に5を追加し95にした場合、子スキルの合計時間90と異なる結果になってしまいます。
この事態を防ぐため、親スキルの時間が追加された際には子スキルの中の主スキルに同じ時間を追加しています。
つまり国語が主スキルで、親スキルの学習時間を5時間増やした時には、主スキルである国語の合計学習時間も5時間増えることになります。そうすることで合計学習時間の整合性を保ちます。
計算式にすると以下のようになります。左辺が親スキル、右辺が子スキルです。
90 + 5 = (30 + 5) + 20 + 40
主スキルは以上のような特性を持つため、よく学習をするスキルに設定しておくと良いでしょう。
設定方法
スキル名の横に星がついているものが現在の主スキルです。
それでは主スキルの変更方法を説明していきます。
- 主スキルにしたいスキル名、もしくはその横の○をタップ
- 青い点が○の中に入ったことを確認
- 「主スキルに変更」ボタンをタップ
以上です。
スキル削除方法
不要なスキルを削除する方法を説明いたします。
- 削除したいスキル名、もしくはその横の○をタップ
- 青い点が○の中に入ったことを確認
- 「スキル削除」ボタンをタップ
以上です。
注意点
スキル削除には以下の注意点がありますでご承知おきください。
- 一つの親スキルに紐づくスキルが2つ以上の場合、主スキルは削除できない
- 子スキルが主スキルの１つのみの場合には削除可能
- 削除対象のスキルに子スキルがあった場合には、子スキルも全て削除される
- スキルを削除した場合、削除対象スキルの合計学習時間が、その親スキルの学習時間から引かれる
自由記述欄
各チャートごとに自由記述欄を設けています。
どのスキルを特に頑張っているのか、学習する際に毎回思い出したいこと、目標など書きたいことを書きたいように書いてください。
自由記述欄に書きたいことを書いて保存ボタンをタップすれば、保存完了です。
最後に
Skillboardは今の姿が完成ではありません。今後ご利用者様の声を聞き、シンプルさを保つことは忘れず、どんどん改良していこうと考えています。
学習時間にはあえて単位を設けていません。筋トレ内容をスキルとして登録して、合計回数を記録しても面白いかもしれません。
この記事のコメント欄やTwitterアカウントの方で意見を承っておりますので、利用をしてみての率直な感想や、アドバイスをいただけたら幸いです。
それではSkillboardをお楽しみください。