掲示板アプリ 作成してみました
みほうです。😉
6/21に卒業してから2週間が経ちました。
あれからモチベーションは少し落ちたように思えます。
理由としては収入に絡まないからでしょうね。
6/26に祖母の知人の社長さんとお話しし、7/16〜19の間ビーテック姫路に職業体験することが決まりました。社長さんから「期待している」とお言葉をもらい、嬉しかったです😆。就職するなら自分を評価してる所の方がいいですよね。
まず最初は簡単な業務を行い、少したったら難度の高い業務を任せられるそうです。
開発者が場数を踏んできて高度な技術力を持っていると聞いているので会うのが楽しみです。
さて今回は作成した個人アプリについて書きます。
まず概要、次に機能、その次に工夫したところの順に書きます。
よろしくお願いします。
概要
まず個人アプリのURL
https://mihoukeiji2.herokuapp.com
今回はHerokuでデフォルトで設定されているURLにしていますが、独自ドメインで公開できたらそのURLに変更します。
追記
独自ドメインが表示できたのでこちらのURLも載せます
作成したのは掲示板アプリです。
なぜ掲示板にしようと考えたかというと理由は2点あります。
1点目は作りたいサービスのテーマが決まっていなかったこと。
例えばグルメサイトでは飲食店に関してどんなジャンルの料理を扱っているか、住所はどこか、営業時間はいつか、と言ったように軸になっているテーマに関して情報が配信されています。
私に関しては利用者が参加できるハブサイトを作成したいなあと思っていたのですがテーマが決まっておりませんでした。
そのため普段情報収集に利用している掲示板サイトのようなサイトを作成したいと考えました。
2点目はカリキュラムで学んだことの復習をしたかったためです。
カリキュラムではPictweet、Mooovi、ChatSpaceを作成し、最終課題ではチーム開発でメルカリのコピーサイトを作成しました。
上記に挙げた課題で学んだMVCモデル、ユーザー管理機能、検索機能、非同期通信等についてアプリケーションを作成しつつ復習したいと考えました。
そのためユーザー管理機能のある掲示板を作成すれば復習になると思いました。
理由としては以上です。
主な機能としては一言
「スレッドの中にメッセージを投稿できる。」
それくらいです。特に複雑な機能を入れているわけではありません。
この一言だけでは説明が不十分のため機能を紹介していきます。
環境設定
Rails 5.2.3
データベース MySQL2
基本的な色設定 Bootswatch: Minty
画像保存先 Google Cloud Platform(以下GCP)
機能
まずリンクを踏んだ先にあるトップページについて、次にスレッドの中身とメッセージの送信方法、そしてユーザー登録した後に利用できるマイページ、最後にデプロイについて主に説明します。
トップページ
リンクを踏むと最初に出るページです。
ログインしていない状態だと「ゲストさん」と表示されます。
スレッド名の下の欄については初めは開いてませんが右にある「+」ボタンを押すと
開くことができます。ただし個別に開くはできず「+」ボタンを押すと全て出てきます。
1画面につき10スレッド出て、それ以上の場合はページネーションが出ます。
のちに説明しますが、この状態でも掲示板へのメッセージの投稿ができます。
さらにヘッダーの入力ボックスに検索ワードを入れると掲示板タイトルの検索ができます。
7/7時点で個人ページへのリンクは貼っておりませんが、ポートフォリオができたらそれとつなげる予定です。
新規会員登録ページ
次にサイドバーからいける新規会員登録ページ
名前(10文字以内)、メールアドレス、パスワード、加えて一番下のテクストボックスに同じパスワードをもう一回入力すると新規会員登録ができてフラッシュメッセージが出ます。
ログインするとトップページが変わり以下のようになります。
下の欄に「スレッド編集」とありますが、これを押すとスレッド編集ページに行くことができます。編集ページでスレッドの削除もできます。
またヘッダーのユーザー名をクリックするとドロップダウンが出てきてそこからマイページ・ヘルプページへの移動、ログアウトができます。
新規スレッド作成ページ
さて「新規スレッド作成」ボタンを押すと新規スレッド作成ページに移動します。
スレッド作成ページではスレッドについての名前、説明、カテゴリを入力します。
カテゴリの入力についてはインクリメンタルサーチになっており、あらかじめ登録されているカテゴリから入力します。こだわりが無ければ「その他」でいいです。
検索結果で送信ボタンが隠れてしまってます。スレッドカテゴリ名の下に送信ボタンがあり、全て入力してから送信するとスレッド作成ができ、フラッシュメッセージも出ます。
カテゴリの新規作成機能については時間ができたら行います。
トップページの説明については以上です。
メッセージ送信機能
トップページから掲示板名をクリックすることで掲示板の中に行くことができます。
最新100件のメッセージが表示され、それ以上だとページネーションが出ます。
ログインの有無に関わらず掲示板を見ることができ、投稿もできます。
もしログインしていた場合は名前を変更することはできません。readonly属性を使っており編集できないためです。
またリロードの横にスレッド編集ボタンが出て、そこでスレッドの編集ができます。
サイドバーのボタンを押すと上下に移動できます。
config/storage.ymlの書き方に手間取られましたがそれくらいで実装は難しくなかったですね。
マイページ
ログインしている状態だとマイページに行くことができます。
作成した全てのスレッドとユーザー情報が表示されます。
サイドバーにある「ユーザー編集」ボタンを押すと、名前とメールアドレスを編集できます。
また「プロフィールを編集する」ページを押すとプロフィールを編集できます。
プロフィールについてはQiitaのものを参考にしました。
またアカウント削除ボタンを押すとアカウント削除画面に移り、そこで「削除する」ボタンを押すとユーザー情報が削除されて元に戻すことはできません。ユーザー削除については論理削除になっており、ユーザーを削除しても作成した掲示板は残ります。
デプロイ
デプロイについてはAWSより簡単でした。
理由としてはunicornやcapistranoといったgemを入れる必要がないためです。
基本的な手順はQiitaの記事が役立ちます。*3
注意点としては今回GCPを使って画像を保存しています。
その過程でcredential.yml.encを編集しました。
そのため追加で以下のコマンドを入力する必要があります。
このコマンドがないとcredential.yml.encの内容をherokuで読み取ることができず、GCPに保存できなくなります。*4
GCPに限らずcredential.yml.encを編集した時はこのコマンドで変更を反映させましょう。
工夫したポイント
工夫したところはどうすればユーザーフレンドリーになるかと考えたことです。
例えばスレッドタイトルは60文字以内と指定がありますが、60文字以上のタイトルを入力してそれで「保存ができませんでした。再入力をお願いします。」とだけアラートが出ても「何のこっちゃ」となります。
そのため字数制限のあるところでは指定字数を越えるとアラートが出るようにしました。
また入力が必須なところには「validatrix」と呼ばれるjQueryプラグインを用いて入力がなかった時に警告が出るようにしました。
フラッシュメッセージについてはログイン/ログアウト時だけでなくメッセージ投稿時やユーザー編集時など何か手を加えるごとに発生するようにしました。
ページ上部にはパンくずリストを実装し、移動しやすくしました。
パンくずリストとはユーザーがサイト上のどこにいるか視覚的にわかりやすくするためにWebページを階層順にリストアップしてリンクをつけたものです。
この機能はgem 'gletel'を使うと実装がラクになります。
詳しくは参考記事。*5
スレッド編集ページについてはメルカリの時に使ってなかった書き方を使ってます。
(config/breadcrumbs.rb)
# showアクション用
crumb :board do |board|
link board.title, board_path(board)
parent :root
end
#editアクション用
crumb :board_edit do |board|
link "スレッド編集"
parent :board, board
end
editアクションのparentのところで後ろにboardとすることで親要素でboardという引数が使えるようになります。これがないと値がないということでNoMethodErrorになります。
表示としては以下のようになります。
トップページ(みほう掲示板) > スレッド名 > スレッド編集
メルカリで実装してなかったので手間が少しかかりましたが、実装できてよかったです。
あとトップページで「ブログで紹介する」とありますが、本ブログへのリンク用で実際は紹介することはほぼないと思います。
面白い使われ方や改善案があれば紹介していこうと考えています。
反省点
反省点としては2点あります。
1点目は結構グダグダに進んだということですね。主にクラス名が無茶苦茶ということもあります。あと後で作ったカラムも5つ以上はあります。
卒業後に学習しなかった時間ができたことで後で見返して、この機能何のために必要かとなったため、次作るなら集中して一気に作ろうと考えてみます。
2点目は一日一日ブログにアウトプットしなかったことでこのように一気に出すことになったことです。Twitterにも学習記録はあげていますが、やはりブログの方が書ける量が多いので次作るならブログで少しずつ小出しにしていきます。
あとがき
今後はポートフォリオを作っていきます。
と言っても1から作るのが面倒なのでWixを使っていく予定です。
終わったらPHPの勉強。
職場見学も含めて楽しんでいきます。
7/9追記
Wix使ってみてWebサイト作成に便利なサイトとは思いました。
独自ドメインやフォーム作成、便利なアプリケーションがあり、直感的にサイトを作ることができるので整ったサイトが非常に作りやすいと思いました。
ただ自分としてはこの先のこともあるので基礎固めをしたい。
そのためポートフォリオ作成は中断します。
職場見学まで7/8に購入した「スラスラわかるPHP」を進めていきます。
七夕の願いとしては「心身共に健やかでありますように」かな。
健康は得難いものですから、体を大切にしていきます。
以上です。ありがとうございました。
