Todos

このアプリはReact + firebaseを用いて制作された、大学の時間割とtodoを効率よく管理するアプリです。

具体的な機能としては

• 時間割を管理することが出来る。具体的にはユーザーの時間割を登録・編集・削除する機能を持っています。また時間割には当然授業の情報を登録することも出来ます。

• todoを管理することが出来る。大学の膨大な課題に対応するためこのアプリでは時間割・授業に紐付いたtodoを登録・編集・削除する機能をもっています。またこのtodoには重さという概念が存在します。これはそのtodoをこなすためにどれだけの労力が必要になるかという情報を表します。これは今までになかった重い順にtodoを表示する機能を実現しました。

またこのプロジェクトはfirebaseを用いて外部公開を行っています。

導入

このアプリの導入手順は以下に記載されています。

• githubからコードを入手する
• npmを用いてパッケージを導入する
• firebaseのAPIKeyを設定する
• 開発環境で動かす
• 本番環境で動かす

githubからコードを入手する

git cloneなどを用いてコードを入手してください。 それだけ。

npmを用いてパッケージを導入する

パッケージを導入する方法はとても簡単です。

npm install

コマンドを用いてパッケージを導入することが出来ます(多分) 現状だとyarnに対応していません...

firebaseのAPIKeyを設定する

firebaseのAPIKeyは外部に公開するとセキュリティ上の問題が発生します。 よってこのプロジェクトのAPIKeyは公開されていません よって自分で用意したfirebaseのAPIKeyを用いる必要があります

設定方法は

• .envファイルを作成する
• sec/firebase.jsを参考に.envファイルにAPIKeyを記述する

開発環境で動かす

このプロジェクトを開発環境で動かす方法は簡単です

npm run start

本番環境で動かす

このプロジェクトを本番環境で動かすにはJSコードをトランスコンパイルする必要があります。 トランスコンパイルは

npm run build

で行うことが出来ます。 コンパイル後は

firebase serve --only hosting

で本番環境を起動することが出来ます

ファイル構成

src/

JSコードが格納されています。このコード群は大体のブラウザに対応していますが、全てのブラウザには対応していません。よってこのプロジェクトではbabelを用いてJSコードをトランスコンパイルしています。srcディレクトリ以下は

• components/: 各ページを表示するJSファイルが格納されている
• index.js: htmlファイルに読み込まれている最上位のJSファイル
• root.js: index.js内部で呼び出されているreact-router部分を担当しています
• undefined.js: 実装されていないページにアクセスされた場合表示されます
• firebase.js: firebaseのAPIKeyなどの設定が記述されています。

src/components/

componentsディレクトリ以下は

• introduction/: ログインしていない時にアクセス出来るページを構成するjsファイル群
• main/: ログイン成功時にリダイレクトされるホームページを構成するjsファイル群
• schedule/: 時間割ページを構成するjsファイル群
• todo/: todoページを構成するjsファイル群
• Header.js: ログイン後に表示されるページ群で用いられているHeaderを構成するjsファイル
• DeleteDialog.js: 削除ボタンを押した場合に表示する警告ダイアログを構成するjsファイル

build/

babelを用いてトランスコンパイルされたJSコードや後に紹介する /public コードなどが格納されています。

public/

babelを用いてトランスコンパイルする必要のないコードが格納されています。主にhtmlファイルや画像などが格納されています。

この開発に参加したい

特に制限はありません。ぜひこのプロジェクトをよりよいものにしていきましょう！ あなたのプルリク・Issueをお待ちしています。