今回、PHPのフレームワークである「Laravel」を使って個人向けタスク管理アプリ「Laralog」を開発しました！
タスク管理とは、ウェブ制作・ソフトウェア開発など様々な業種で導入されていることで有名な「Backlog」のようなプロジェクトにおける進捗度合いなどを「見える化」して管理することができるツールです。
私が今回開発した「Laralog」は「Backlog」の機能を参考にだいぶ機能を省略した、個人向けのタスク管理ツールです。
ログイン後のホーム画面はこんな感じです！（全体が見るように画面を縮小してます。）
ちなみに、私の「Laravel」の学習期間はだいたい1ヶ月半くらいです。
その間、具体的に何をやったのかを下記に記します。
★「Laravel」学習でやったこと
・Paizaラーニングの「Laravel編」を全て受講。（約2週間）
⇨URL：Paizaラーニング
・Laravelでチュートリアルで、WEB掲示板アプリを作成。（約3日）
⇨参考サイト：【Laravel 5.7対応】掲示板を作成するチュートリアル
・ToDoリストアプリをネットの記事を参考に作成。（約3週間）
また、今回の開発にかけた時間はLaravel学習と並行して行っていたこともあり、完成までだいたい3週間くらいかかりました。
今回は、私が開発した「Laralog」の各種機能についてご紹介させていただきます！
これからLaravelを使ってWEBアプリケーションを開発したいと思っている方の参考になれば幸いです。
開発環境について
まず開発環境は全てAWSのサービスである「AWS Cloud9」で構築しました。
開発環境構築は必ず必要となってくる作業ではありますが、AWS Cloud9を利用することで簡単にWEBアプリケーション開発が始められます。
また、同じAWSアカウントでログインすれば異なるPCでも開発が可能となります。（家のPCで開発をやったり、会社のPCでも開発が可能となります）
しかも、新規にAWSアカウントを作成すると12ヶ月間は無料で利用できるという嬉しい特典もあります！
AWS Cloud9の開発環境構築手順については、こちらの記事で解説していますので、ぜひ参考にしてみてくださいね！
「Laralog」の機能について
今回作成した「Laralog」の機能一覧は以下のようになっています。
★Laravel標準機能
- ログイン機能
- ログアウト機能
- 新規登録機能
- パスワード再設定機能
★オリジナル開発機能
- Welcome画面表示機能
- フォルダ作成機能
- タスク作成機能
- タスク検索機能
- 課題進捗状況表示機能
- ユーザー情報変更機能
- ページネーション機能
- Wiki作成機能
画面については、以下のようになっています。
Welcome画面
Laralogのホーム画面です。ログイン前に表示する画面となります。
ここから、「ログイン」画面か「新規登録」画面に遷移ができます。
新規登録画面
Laravelに標準で用意されている新規登録（Register）機能に少しカスタマイズした画面となっています。
ログイン画面
こちらは、Laravel標準のログイン機能を利用しています。
パスワード再発行画面
こちらは、Laravel標準のパスワード再発行機能を利用しています。
新規フォルダ作成画面
新規登録が完了すると、次に遷移する画面が「フォルダ作成」画面です。
ユーザーはフォルダごとにタスクを管理することができます。フォルダ＝カテゴリと考えていただいても構いません。
マイページ画面（ログイン後画面）
いわゆる、ユーザーホーム画面になります。
ここでは、自分のタスク状況を確認したり、フォルダ作成・タスク作成などLaralogの基本的な機能が利用できます。
検索機能も備わっており、タスク名を検索欄に入力してボタンを押す事で、対象のタスクを画面表示します。
タスク登録・編集画面
タスク登録画面では、タスクとの「タイトル」と「本文」・「期限」を設定することができます。
また、編集画面ではタスクの「状態」を変更することができます。
Wikiホーム画面
「Wiki」の用途としては、単純にメモ程度の機能として利用してもらうことを目的としています。
なので、そこまで凝った作りにはしていません。
Wiki登録・変更画面
Wikiに登録できる項目としては、シンプルに「タイトル」と「本文」のみとなります。
ユーザー情報変更画面
登録したユーザーに紐づく情報を参照し、「ユーザー名」「アバター画像」「パスワード」の変更が可能です。
工夫したこと
自慢できるほど凝った作りにできたわけではないですが、それでもこれがあったらわかりやすいんじゃないかと、自分なりに工夫したことは以下の３点となります。
1.課題状況をわかりやすいように表示した。
完全に本家Backlogと同じ配色です笑
現在登録しているタスクの総数と、各タスクの状況とその件数を表示しています。
ステータスを更新することで、この数値が変動します。
2.画面表示する最大のタスク数を１０にする事で、画面がすっきり見えるようにした。
登録したタスクは、１０区切りで表示するようにしています。
Laravelでは、簡単にページネーション機能を実装することができるので、比較的スムーズに実装ができました。
3.期限が過ぎている課題に対して、炎上画像を表示して「見える化」した。
またまた本家Backlogの機能をパクリスペクトしたものとなっています。
現在日時とタスクの期限を比較し、期限が超過しているなら画像のような「炎上アイコン」を表示する仕組みになっています。
これで、遅れているタスクが一目でわかるようになっています。
ステータスを完了にするか、期限を更新することで「炎上アイコン」は消えます。
１番苦労したこと
Laralogを開発する上で一番苦労したことは、個人プロフィール用の「アバター画像アップロード処理」の実装です。
この機能を実装するのに、３日ぐらい悩んでしまいました・・・。
Laravelで画像アップロード処理を実装している例はたくさんあるのですが、Laravelオリジナルの認証機能で画像アップロードする方法についての記事はなかなかありませんでした。
画像のパスはデータに保存できるのですが、肝心の画像が保存できずあれこれ悩んでいました。
色々調べてみて、最終的に参考にさせていただいた記事はこちらになります。
Laravel5.3のユーザ登録時の画像格納&フォルダ作成について
なんとかこの記事の質問の答えを参考にしながら、実装ができました。
アップロード処理が動いた時は、
( ・∇・)「やっと動いたー！！」
と、ちょっと感動してしまいました。笑
改善点について
Laralogの改善点をあげるときりがないのですが、「これがやりたかったけど、今のスキル的にできなかった」という機能に絞ってあげると以下となります。
- グループ管理設定
- コメント機能の実装
- ガントチャート機能の実装
今回作成したLaralogは、Backlogの機能を参考に開発したWEBアプリですが、やはり本家と比べるとその機能の便利性の差は歴然です笑
グループ権限機能を実装して、そのグループに属するユーザーでのみ共有できるタスクや、ユーザー間でコメントできる機能があれば、もっと実用性は増すかなと思います。
また、ガントチャートと言われる、各タスクの期限を棒グラフで表示してわかりやすく見せる機能を実装も今後検討したいですね。
Backlogのガントチャート機能。これほどのクオリティの物が作れる日が来るのは、一体いつになるのか・・・
まとめ
以上、今回は私が初めて開発したWEBアプリケーション「Laralog」についてのご紹介でした！
とここまでご紹介しましたが、まだリリースはしていないんですよね笑
というのもリリース方法をどうするかまだ悩んでおりまして、「Heroku」にするのか、「AWS」で全部済ませてしまうのかどちらにしようかと。
こちらについても、今後調べてみて自分にベストな方法を検討してみたいと思います！
最後に作ってみての感想ですが、使う人がいるいないにかかわらず、ちゃんと完成までこぎづけることができて本当に良かったということです！
まだまだ、Laravelの知識については理解できていないところも多いので、今後色々なWEBアプリケーションを開発して自身のスキルを伸ばしていきたいと思います！
ちなみに、もうすでに作りたいサービスのアイディアがいくつかあるので、今年のうちに最低もう2つくらいWEBアプリケーションを開発したいですね。
また、今回作成した「Laralog」のソースについては、GitHubの方にアップしておりますので、ご参考にどうぞ！（かなり酷いコードですが、苦情は受け付けません笑）
それでは、今回はここまで！
ではでは〜♪( ´▽｀)
