TECH::CAMPで初めての自作アプリを作ってみた

プログラミング

こんにちは、つかりーんです。

2019年の10月頃からTECH::CAMPに通っており、仕事の傍ら地味にプログラミング(Ruby on Rails)の勉強を続けていました。

そして遂に先日、初めてのオリジナルアプリのデプロイに成功!

長かったけれど、ようやく卒業できます(^_^;)

まだまだ改善点はたくさんあるけど、なんとか形になって嬉しかったので、作成したアプリの紹介をします!

”MyGIJI”という議事録共有アプリ

まず公開したのはこちらです!

ログインではこちらをご使用ください。(新規登録でもログインできます)

メールアドレス:test@gmail.com

パスワード:abcdef

作成したアプリ→MyGIJIを見てみる
動きを録画した動画だとこんな感じです。

議事録アプリを作った理由

TECH::CAMPのカリキュラムの最終課題がオリジナルアプリ制作です。

でも、いきなり好きなの作ってみて!と言われても困る・・・・

ということで、普段の仕事であったらいいな!と思うものを探してみました。

私は新入社員の頃から議事録に悩まされてきました。

どう書けば良いのだろう?みんなどう書いているのだろう?とわからないことが多すぎました。

なぜかと言うと、うちの会社では先輩営業の議事録を見ることが無いからです。

同席した打ち合わせの議事録は大体新人(つまり私)が発行させられます。

そして同席していない打ち合わせは私に関係のない案件なので私まで発行されません。

なので、先輩の議事録を参考にする機会がなかったのです。

議事録の書き方だけでなく、たとえ違うお客様を担当していても、似た案件を経験している営業がいたらその議事録をみて参考にしたい!と思いました。

そこで、TwitterのようにSNS感覚でみられる議事録共有アプリがあればいいな!と思いつき、作成に至ったのです。

実装した機能一覧

このアプリで実装した機能はこちらです!

  • ログイン機能
  • 投稿機能 & 削除機能
  • 編集機能
  • マイページ
  • コメント追加
  • ページネーション
  • 記事検索機能

カリキュラムやグーグル先生を参考にしながら組んでいきました。

思い返すと結構忘れているところがあるな・・・

それぞれの実装方法は今度まとめて行こうと思います(^^;)

ログイン機能

Deviseを使って実装しました。ほぼカリキュラム通りです。笑

新規登録時にメールアドレス、パスワード、ユーザーネームを登録し、ログイン時にユーザー名が表示されるようにしました。

また、ログインはメールアドレスとパスワードで行えるようにしました。

投稿機能 & 削除機能

記事投稿とその削除ができるようにしました。

会社ではPCの”メモ帳”に議事録をバーッと書いて、その文章を体裁を整えてメールにベタ打ちして関係者に送信します。

なので、そのメールの文章をそのままコピペして投稿できるようにしました。

お客様名や日付入力の欄を設けると、入力欄が増えたり体裁を変えるのが煩わしいと思ってやめました。(手抜きではない・・・はず)

編集・マイページ・コメント

投稿した記事の編集機能、自分の投稿した記事を閲覧できるマイページ機能、投稿してある記事にコメントできるコメント機能を付けました。

こちらもカリキュラムを参考に実装しました。

ページネーション

ページネーションとは、長い文章を複数に分割してそれぞれに番号を振るように表示することです。

こんな感じです

Railsでは”kaminari”と言うGemを使って実装しました。

Gem(ジェム)とはRailsで使えるライブラリで、コードをひとまとまりにして使いやすくしたものです。

つまり、ページネーションを実装するときに自分でプログラムを1から書くのではなく、ある程度プログラムされているGemをインストールすることで実装しました。

ログイン機能のdeviseもGemですね!Gemをインストールすると機能を簡単に実装できるようになります。(使いこなすのも私には難しいけど!)

記事検索機能

入力したキーワードが含んでいる記事を検索できるようにしました。

ここが結構大変で・・・・

たくさんググりながら実装しました。詳しくは別記事でまとめようと思います。

頑張ったポイント

カリキュラム外で、自分で拘った部分を紹介します!

トップ画像とデザイン

トップ画像は自分で撮影しました!

実際に仕事で使っているPCに文房具です。なんとなくこれを使いたくて撮りました。

(あとはすごく地味だけど、半導体関係の会社なのでロゴや閲覧ページの背景でマイコンや電子回路っぽいイラストを使いました 笑)

あとは、デザインをBootstrapを使って全て自分で整えました・・・

何気に、この作業が一番大変だったかもしれません。(カリキュラムではあまり触れていない分野なので)

「どうしてこの文字は真ん中に来ないの!」「なんでここは左に寄ってばかりなの!」「もう少し余白を入れたい・・・」

というように一つ一つが課題でした。

デイトラ の初級編でBootstarpを勉強していたので、その知識だけでまあなんとか形にしようと頑張りました。とは言ってもダサいですけどね、難しいですね(´・_・`)

投稿時間を日本時間に直す

投稿できたー!って喜んでたら、投稿時間が深夜になってたんです。

Railsでは標準で時間がUTC(協定世界時)になっているそう。

それをJST(日本標準時)に直しました。

日本時間は世界標準時より9時間進んでいるため、JST+0900と表示されるようです。

+0900を消したかったのですがここは解決できず・・・

アラートを見やすくする

ログイン時やログアウト時、またはパスワードを間違えた際に出てくるアラートを見やすく表示しました。

上の赤いバーです

こちらがとてもわかりやすく、参考にさせていただきました!

作り終えて

本当に、一難去ってまた一難でした。

一歩進んで二歩下がるように、なかなか進まず、ようやく進めた!と思ったらまたすぐに次の壁が現れる・・・

でも、1年前の今頃、Rubyって何?宝石?としか思っていなかった私が、自分でこんなことをしたい!と思って形にできたのは大きな一歩かなと思います。

まだまだ改善点が山ほどあるので、1年後また今では予想もしていない自分に出会えることを楽しみに地味に勉強を継続したいと思います。

最後まで読んでいただきありがとうございます!

ではまた!

コメント

タイトルとURLをコピーしました