2019-12-31に更新

作業日誌アプリ「Workdiary」説明書

Workdiary

初めて制作してきたWEBアプリです。
日記とその日にやったワークの登録を行う作業日誌アプリで、農作業を想定していますがどんなジャンルの作業でも(おそらく)使えるような内容になっています。

GitHubリポジトリはこちら

初アプリとはいえ未完の部分が多く、クオリティ的には課題が山積み。
お時間のある時になんとなくいじってみてもらえたら嬉しいです。

アプリの使用イメージ

自身の農作業の記録を目的として制作してみました。
勉強の記録などに使ってもいいかもしれません。

(1)やった作業を入力する
農作業をやっていて、一段落ついた休憩時とかその日家に帰ってお酒飲みながらでも、スマホをポチポチやってその日にやった作業内容を登録。この時にメモしておきたい数量や機械のセッティング内容などを簡単に入れておきます。

(2)必要なときに調べる
その後「このセッティングって前回どうしていたっけ?」という時に、スマホをポチポチやって以前に入力した内容を確認します。

特徴としては「テンプレート機能」というものをつけてみました。
作業内容の定型文(テンプレート)をユーザーが事前に作っておくことで、やった作業の記録を簡単に記録できるようにしています。

アプリの使い方

(1)サインアップ・ログイン

スクリーンショット 2019-12-19 21.05.58.png

  • サンプルアカウントでログインしてみてください。
  • 初期値でフォームにサンプルアカウントが入っているのでそのまま「ログイン」をクリックすると入れます。
  • 任意のメールアドレスとパスワードでユーザー登録(サインアップ)することもできます。
  • メールアドレスは架空のものでOKです。現状の設定では実際にメールは届きません。

(2)ナビゲーションバー

スクリーンショット 2019-12-19 21.31.17.png

ログインしたら画面上部にナビゲーションバーが登場し、アイコンをクリックすると画面遷移します。左から、

  • ダイアリー一覧:ダイアリーとワークを一覧表示します。
  • ワーク一覧:ワークをカテゴリごとに一覧表示します。(未実装)
  • 検索:日記・ワークを文字列検索できます。(未実装)
  • 編集:カテゴリとテンプレートを編集できます。
  • アカウント:ログイン状況の確認とログアウトができます。

(3)メインページ(「日記一覧」画面)

スクリーンショット 2019-12-19 21.16.18.png

ログインしたら最初にこの画面が表示されます。
ここでは既に登録された「日記」と「ワーク」が一覧で表示され、それらの作成もできるこのアプリのメインページになります。

日記の作成
- 「ダイアリーを書く」から今日の日記を投稿します(画像では「日記を書く」)。
- 投稿できる日付は今日に限らず過去でも未来でもプルダウンで選択できます。
- ダイアリーは日付あたり1つのみ作成できます。

ワークの作成
- ダイアリーを作ったら、そのダイアリーに紐づいたワークが作成できるようになります。日付の横にある「ワークの追加から作成します。
- カテゴリ、作業名、作業内容を入力して登録します(写真はフォームのみで未実装)。

その他
・ダイアリー一覧の日付をクリックすると日記の詳細画面に映ります
・登録したダイアリー・ワークの編集と削除もできます
・「メモする」をクリックすると、ワークに対してメモを1つ追加することができます。後から気づいた点を追記したい場合などに活用できます。

(4)「カテゴリ」について

ワークに対してカテゴリを登録しておくことで、後からカテゴリごとにワークを一覧表示できるようにするものです。

  • ワーク入力時に「カテゴリ」をプルダウンで選択します。
  • 事前に「+カテゴリ追加」から自分でカテゴリを作っておく必要があります(画面遷移します)。
  • ナビゲーションバーの「編集」ページでカテゴリを編集・削除することができます。
  • カテゴリを削除したら、該当するワークからはカテゴリが外れてしまいます。

(5)「テンプレート」について

ワーク入力時にテンプレートを選択することで作業内容に定型文を入力できます。例えば「決まった一連のワークがあって、その作業内容の定型文を作っておいて数値のみ変えて登録する」といった活用なんかを想定しています。

  • ワーク入力時に「テンプレート」をプルダウンで選択するとその下の作業内容フォームにテンプレートの内容が自動で入力されるので、それを書き換えるなどして投稿することができます。
  • 事前に「+テンプレート追加」から自分でテンプレートを作っておく必要があります(画面遷移します)。
  • ナビゲーションバーの「編集」ページでテンプレートを編集・削除することができます。

↓テンプレートをプルダウンリストで選択すると……
スクリーンショット 2019-12-19 22.56.16.png

↓このように作業内容のフォームに反映されます
スクリーンショット 2019-12-19 22.56.24.png

(6)ログアウト

ナビゲーションバーの「アカウント」ページよりログアウトできます。

......以上、最低限のアプリの説明書でした。

開発に使用したスキル

言語とフレームワーク
- HTML, CSS
- Ruby, Ruby on Rails
- 一部、Javascript, JqueryでAjax化

開発環境等
- AWS cloud9
- Heroku

またRailsで使った主なgemとしては
- Bootstrap4(デザイン)
- Font Awesome (アイコン使用)
- Devise(ログイン機能)

デザイン周りはほぼBootstrapを活用しています。
一部機能にjQueryを使用してAjax化していますが、ちゃんと理解して使えていないというのが正直なところ。
ログイン機能のメール認証に関しては実際の認証は外した状態です。

今後の実装予定と課題

制作期間が間延びしてしまいモチベーション的にも厳しくなってきたので、これで一区切りして次に移ろうと考えてますが、やはり未消化でモヤモヤする部分もあります。

  • ワーク一覧表示画面、検索画面の作成
  • (完了!)パンくずリストをつける
  • (完了!)アラートメッセージの表示方法と日本語化
  • ワーク登録時に写真を追加できるようにする
  • ワーク登録時のカテゴリ・テンプレート新規作成をモーダルウィンドウで入力しやすくする
  • 日付をカレンダーから選べるようにする

この辺りは時間を見つけてもうちょっと取り組んでいきます。
また公開したことによって細かい部分で自分で気付けなかった問題やバグが出てくると思うので、そういったデバッグ作業から今後の学びにしていきたいと思います。

例えば現状でも、ダイアリーやワークの登録に文字数制限をかけておいたりすべきかなーとか、UI的にダイアリーやワークの作り方がわかりづらいなーとか手間がかかるなーとか、色々見えてきますね。

今回一度公開することで、友人に見せてみることができたのが良かったです。何人かに見てもらったのですが、皆さんまずは「どう使えばいいかわからない」と口を揃えて言っていただけます。。。
これを実感するだけでも公開した意味があったなーと感じます。

このアプリは僕の処女作としてしばらく公開を続けてみて、いろんな方にサンドバッグにしていただきたい所存です。
とはいえぜひお手柔らかにお願いします!(よわい)

ツイッターでシェア
みんなに共有、忘れないようにメモ

Massa

北海道でアプリ制作に取り組んでるノンプログラマな農夫。仕事や日常生活で感じる小さな不便を解消すべく趣味と実益を兼ねて遊んでます ■Python・GAS + LINE bot

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

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

有料記事を販売できるようになりました!

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

関連記事

コメント