はじめに
前職で__「こんなのあったらいいなぁ…」__と思っていたアプリを、就活用のPFとして作ってみました。色々と改善点はありますが、形になったので一旦まとめてみます。
前半では私が作ったPFの詳細を、後半ではこれからPFを作る初学者の皆さんに向けたお節介を、それぞれ書いています。
これからPFを作ろうとしている初学者の皆さんの参考になれば幸いです。
目次
1.PFの概要
2.こだわったポイントと目的
3.苦労したこと・コード
4.これからPFを作る初学者へアドバイス
まとめ
1．PFの概要
介護事業所向け記録アプリケーション 『Sup-App（サプアップ）』
開発環境
- Ruby:2.6.5, Rails:6.0.0
- webpacker(css/Javascrict)
- ngix,puma(sockets通信)
- Docker(ローカル環境)
- Circleci(自動テスト)
- Circlecd(自動デプロイ)
- Rspec
制作期間
おおよそ２ヶ月、所要時間は500時間くらい…
ざっくり機能紹介
####①記録機能
お客様ごとに記録を時系列で表示します。
記録はパッと見てわかるアイコンにし、実施／非実施で色が切り替わります。
②報告書作成機能
事故報告書を作成することができます。
作成した事故報告書をCSV形式で出力できるようにしました。
③チャット機能
テキストと画像で簡単なチャットを行うことができます。
タグをつけることができて、タグによってメッセージの色が変化します。
（UIがひどい…笑）
④ルーム機能
お客様ごとのチャットルームを一覧で表示します。
チャット画面に飛べるほか、お客様詳細や記録の実施／非実施切り替えなども行えます。
⑤お客様（入居者）管理機能
お客様情報をウィザード形式のフォームから登録することができます。
お客様詳細（画像）からは、お客様の情報が参照できるほか、フォローや編集なども行うことができます。
⑥ユーザー（スタッフ）管理機能
スタッフの情報を登録できます。トップページからは簡単ログインが可能です。
設定した資格や職位によって、一部の機能を制限します。
⑦お客様フォロー機能
お客様をフォローすることができます。
フォローしたお客様は「マイページ」から確認することができます。
⑧お客様検索機能
トップページの検索フォームから、「名前」「フリガナ」「居室番号」でお客様を検索することができます。
名前とフリガナは部分一致（あいまい）検索、居室番号は完全一致検索です。
2．こだわったポイントと目的
①機能の数
機能の数と各機能のボリュームには最も拘りました。
それぞれの機能が薄いものにならないよう、実際にアプリが使われる場面を想定しながら、各機能を充実させました。
②ユーザビリティ
自分自身、元介護士ではありますが、独りよがりのアプリにならないよう複数人の現役介護士にフィードバックをいただきながらアプリを作成しました。
とてもシビアな意見をいただいたので、実装には苦労しました…💦
しかし、その分高いユーザビリティを実現できたのではないかと思います。
③モダンなインフラ技術
SIerではあまり用いられないかもしれませんが、インフラの学習としてAWS、Docker、CircleCIなどのモダンな開発環境を整えることを意識しました。
知識がないため手探りの実装になり、苦戦を強いられましたが、理解を深められたように思います。
3．苦労したこと・コード
①本番環境／開発環境による動作の違い
本番環境にデプロイしたところ、記録を保存する際に時間が９時間分ずれてしまうことがわかりました。DBや環境設定を疑いましたが、結局根本的な解決には至らず…。
力業にはなってしまいましたが、 こちらの記事にまとめた内容で無理やり９時間のズレを修正し、なんとか本番環境でも問題なく稼働するようになりました。
〜追記（11/22）〜
この記事にいただいたコメントを参考に、環境変数にTZ = 'Asia/Tokyo'を設定することで、9時間のズレを解消することができました
②機能の作り込み、実用性の追求
ウィザード形式の登録フォーム
開発序盤で知識不足だったこともありますが、「sessionを用いた3ページのウィザード形式フォーム」はものすごい時間がかかりました。
(画像はbefore_actionなどを一部省略しています。)
# お客様基本情報の登録（１ページ目）
def create
@client = Client.new(client_params)
render :new and return unless @client.valid?
session[:client_data] = { client: @client.attributes }
@detail = @client.build_detail
render :new_detail
end
# お客様医療情報の登録（2ページ目）
def create_detail
@detail = Detail.new(detail_params)
render :new_detail and return unless @detail.valid?
session[:detail_data] = { detail: @detail.attributes }
@client = Client.new(session[:client_data]['client'])
@caregiver = @client.build_caregiver
render :new_caregiver
end
# お客様介護情報の登録（3ページ目）
def create_caregiver
@client = Client.new(session[:client_data]['client'])
@detail = Detail.new(session[:detail_data]['detail'])
@caregiver = Caregiver.new(caregiver_params)
render :new_caregiver and return unless @caregiver.valid?
@client.save
session[:client_data].clear
@detail.client_id = @client.id
@detail.save
session[:detail_data].clear
@caregiver.client_id = @client.id
@caregiver.save
render :create_caregiver
end
CSV形式の報告書データ出力機能
ウィザードフォームの他に、__CSV形式の出力機能__で差別化を図っています。
これも今まで扱ったことはありませんでしたが、「現場にあったら便利かもしれない…」と思い実装してみました。
require 'csv'
require 'nkf'
csv_data = CSV.generate do |csv|
csv << %w[id 名前 性別 生年月日 記録者 発生時刻 発生場所 種別 単独／介助 程度 事故の内容 事故対応 連絡 通院・入院した病院 報告説明日 説明担当者 説明内容 再発防止策]
@report_month.each do |report|
csv << [
report.id,
report.client.name,
report.client.sex.name,
report.client.birth,
User.find(report.user_id).name,
report.occ_time,
report.place.name,
report.genre.name,
Re.find(report.res_id).name,
report.level.name,
report.content,
report.coping,
report.contact.name,
report.hospital,
report.desc_date,
User.find(report.desc_user).name,
report.desc_content,
report.count_content
]
end
end
NKF.nkf('--sjis -Lw', csv_data)
③UI/UX
ビューのセンスが皆無のため、UI／UXはなかなかひどい感じになりました…。
加えてVue.jsやReactといったモダンなフロント技術をキャッチアップしていなかったため、ビューに特徴を持たせることができませんでした…
現在はVue.jsを学習しつつ、MaterialDesignについて理解を深めています。
フロント技術をマスターして,イケてるビューを作れるようになりたいです
4．これからPFを作る初学者へ【私みたいになるな】
①題材選びのポイント
希望の就職先に合わせて作る
__この記事で最も伝えたいことです。__PFは希望する企業にある程度合わせたものを作りましょう。
例えばWeb系企業を目指すのであれば、toC（カスタマー向け）で、システム感がない方が良いです。技術的にもある程度はモダンな技術を用いた方が評価につながるでしょう。
逆にシステム開発を目指すのであれば、システムやツールに寄せた方がいいでしょう。前職での経験を活かしたアプリはオリジナリティが出ますので、評価を得やすくなります。
私はPFを作り始めた頃、Web系とSIerの違いもよくわかっていませんでした。
業界や業種についての理解がないまま、__「作りたいもの」を作ってしまった__私は、__Web系志望だったにもかかわらず業務システムを開発してしまう愚行__を犯しました…。
まずは志望する業種を決めて、それに合わせてPFの題材を決めていきましょう。
「作りたいもの」を作る
「いやお前、さっき業界や業種に合わせろって言うとったやないか」と突っ込まれてしまいそうですが、作りたいものを作るのも非常に大切なのです。
作りたいものがわからず既存サイトのクローンを作成し、面接で苦労した話をよく聞きます。
__「なんでこのアプリを作ろうと思ったの？」__という質問に、熱意を持って答えられないからです。
業界・業種にターゲティングするのは重要ですが、それと同じくらいに大切なのが__オリジナリティ__です。面接官は飽きるほどPFをみていますので、大方のPFを見飽きています。
PFを通して熱意を伝えるには、「作りたいもの」を作ることで生まれるオリジナリティが必要不可欠なのです。
【大前提】スクールの課題はPFではない
当たり前ですが、スクールの課題で作るアプリはPFになりません。
__メルカリクローン__や、ハリボテのチャットアプリ、画像投稿アプリなど、採用担当者は見ればわかります。
みんなが作るアプリに価値はありません。
そんなアプリで就職活動を戦っても、スクールの後輩が迷惑するだけです。
スクールの課題で就活に臨むのは、恥ずかしいのでやめましょう。
②見てもらえる工夫をする
【経験】PFはほとんど見てもらえない
いくつかの企業様へ応募しましたが、PFはほとんど見てもらえないのが現実です。
面接におけるPFは、あなたを構成する要素のひとつに過ぎません。
PFをいくら作り込んだところで、履歴書（志望動機、学歴、職歴）や職務経歴書などがおざなりではPFに目を通されることすらありません。
PFまで到達してもらうためにも、履歴書や職務経歴書の作り込みを欠かさないようにしましょう。
最低限つけておくべき機能・実装
● 【機能編】ゲストユーザーログイン（簡単ログイン）機能
これがないとユーザー名やパスワードを入力する手間がかかり、担当者は萎えてしまいます。
必要不可欠な機能ですが、実装自体は非常に簡単なので、迷わず実装しましょう。
ー私が参考にした記事ー
【学習アウトプット2】離脱率を下げる！かんたんログイン機能の実装
● 【デプロイ編】herokuよりAWS
herokuにアップしている方は自分の周りにもかなり多い印象ですが、AWSへデプロイすることでEC2やVPCといったAWSの知識を習得することにつながります。
Web系自社開発企業を目指す方であれば、AWSへのデプロイは必須と言えるでしょう。
ー私が参考にした記事ー
(下準備編)世界一丁寧なAWS解説。EC2を利用して、RailsアプリをAWSにあげるまで
● 【技術編】jQueryよりJavaScript
jQueryは2006年にリリースされたJavascriptのライブラリで、高いシェアを誇っていた過去があります。
しかし2020年現在、多くのWeb系自社開発企業はReactやAnguler.js、Vue.jsを採用しており、jQueryは下降の一途を辿っています。
もしjQueryを使っている or 使おうとしているのであれば、どのJSライブラリにも共通して必要なJavaScriptで実装を行い、JavaScriptの記述に慣れておくことをお勧めします。
可能であればReactやAnguler.js、Vue.jsを用いたフロント実装をしておくことで、他の方と差別化を図ることができるでしょう。
READMEの活用
就活におけるREADMEは、アプリをPRする絶好の場所です。
__「ポートフォリオのレポジトリURLを送ってください」__と採用担当者に言われることはよくあります。最初に目に映ることになるREADMEがショボければ、アプリもショボいんだろうなと思われてしまいかねません。
READMEはきっちりと記述しておきましょう。
大したものではありませんが、私のREADMEをひとつの参考にしてください🙏
まとめ
長い記事になりましたが、最後までご覧いただきありがとうございました。
就職活動を控え、これからPFを作る皆さんの参考になれば幸いです。
PFに関する資料
インフラ構成図
ER図
