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