掲示板アプリ 作成してみました
みほうです。😉
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」を進めていきます。
七夕の願いとしては「心身共に健やかでありますように」かな。
健康は得難いものですから、体を大切にしていきます。
以上です。ありがとうございました。
TECH::EXPERT修了 所感
みほうです。
6月21日にTECH::EXPERTのカリキュラムを修了することができました🤗。
51期メンバー、ライフコーチ、メンターの方々に助けていただき登り切ることができました。
登った後の眺望はいいものです。スッキリしています🍹。
前回の記事から3週間の間にQiita記事を2本書いています。
[Rails] Ajax通信を用いたカテゴリボックス作成 - Qiita
いずれも機能実装時に新しく学んだことを書いています。
さて今回はTECH::EXPERT修了して抱いた所感を書いていきます。
最終課題を終えて
最終課題、チームメンバーの協力なくしては完成しなかったでしょう。
頼りになるメンバーでした。最高のチームです。
エラーが発生した時はメンバー同士で話し合い、解決への糸口を一緒に見つけました。
14時からのデイリースクラムではプロダクトバックログを見て、タスクがどれくらいで完了して、妨げになる問題があればそれがどのようなものか話してチーム内で共有しました。
また問題解決の際には役立ったサイトをSlackに飛ばすようにしました。
メンバーとは何度か食事にいき親睦を深めました。一人で食事するよりも美味しかったです。
最終課題では最初はチーム全員でデータベースについて協議したおかげで機能を実装する際にデータベースに何のためにどんなカラムを保存するのか全員が話すことができました。データベース設計はLGTMが出て正解という訳ではありません。機能実装の際に追加・削除したカラムやテーブルがいくつもあります。そうした場合に協議できるよう、これから最終課題に取り組むチームはデータベース設計について2日以上時間をかけて良いと思います。
最終課題の進み具合
51期A班の最終課題の進み具合としては大体以下のようになります。
1週目： マークアップ20% サーバーサイド10%
2週目： マークアップ80% サーバーサイド10%
3週目： マークアップ90% サーバーサイド80%
4週目： マークアップ100% サーバーサイド100%
1週目はDB設計とデプロイが終了し、上から順番にプロダクトバックログにあった課題を進めていました。1週目中にSNS認証が完了しててすごいなあと思いました。
2週目は必要なマークアップについてはほぼ完了して、一部サーバーサイドにも取り組んでいました。また2週目からコアタイムを設定して14時までは個人時間としていました。ただこの週は各々がマークアップしており、メンバー全員が顔を合わせる時間は少なかったですね。
3週目はサーバーサイドに取り組みだいぶ苦戦しました。自分は出品機能に取り組んでいましたがデータベースへの保存、カテゴリボックス・値段の非同期対応、アップロードした画像のプレビュー、いずれも難所がありその度にメンバーに相談していました。時に不機嫌な顔が出てしまったこともありました。ただ問題解決に悩んで色々やってみたというのは大きいですね。私も木曜日の夜に画像プレビューについてのプルリクがLGTM出た時「やったー」と爽快な気分になりましたし、メンバーも機能を実装して一段と自信がついたように思えました。あとメンバーごとにサーバーサイドの実装が早かったり、励ましてくれたりと一番特色が生きていた週かなと思います。
4週目は検索機能を実装したり、実装した機能を実際に動かしてみて問題がないか確認していました。問題があった場合はブランチを切って修正してプルリクを出していました。購入機能を実装したNさんが忌引で木曜日まで来れず、木曜日にやっと本番環境で購入できるようにしてメンターからLGTMもらった時は「終わったー」とメンバー同士喜び合いました。
発表会については各々伝えたいことを言ったので良かったと思いますね。後の発表見てたらメンバー紹介に当てる時間を増やしたほうが良かったとは思います。
締めに
チーム開発での経験は一生忘れることはないでしょう。スクラムマスターをやってみてチーム開発の難しさ、面白さは十分に味わうことができました。愉快で頼りになるメンバーと開発できてすごく喜ばしい。最初は立候補して開発やり切ってやると思いつつも自分に全うできるのかと不安もありました。それでもメンバーと協力して最終課題という山を登りきり自信が増しました。
打ち上げの際に「自分がスクラムマスターで良かったですか」と聞いてみて、全員が笑顔で「良かった」と返事がきて感無量になりました。いいよ〜チーム開発。
このような経験してきたので転職先でもチーム開発に精を出したいと思いました。
TECH::EXPERTへの想い
独学ではつまづきそう、横の繋がりが欲しいという人には通うことを勧めます。
受講料は60万円以上と高いですが、同期、加えて他期の受講生との繋がりができるという点ではすごく価値があります。
独学である程度できるという人や受講料でためらいがある人は他のスクールに通うという選択肢を考えてもいいと思います。強要はしません。
ライフコーチ、メンターの方々が開発時に自力で解決が難しいところを補ってくれるため、挫折はしにくいです。現に私もそうですが他の方の力なしに卒業はできませんでした。基礎カリキュラムの時から他の受講生と共に勉学に励み、TECH::EXPERTという山を登り、我ながらようやっとると思います。
TECH::EXPERT入学前、将来どうなるんやろと考えていました。派遣会社にいたままでは現実味のない仕事ばかりやって何年も食うための仕事をすると思って道を変えました。ただあてもなく退職したので、拠り所もなかったです。前職で100万以上貯めていたので思い切ってTECH::EXPERTに応募しました。初めは全くの未経験で達成できるんかなと不安を覚えていました。事前学習も熱心ではなく、本試験こそ予定より早く合格できましたが、このときは結果があっただけでモチベーションはあまりなかったです。そこから応用カリキュラムに進み機能を実装していく中でやっと面白いと感じ、Chat-Spaceが完了した時は「やったー」と思いました。非同期通信の時に同じ問題がなかなか解決できず、何度もメンターを呼んだこともありました。そんな時解決への道筋を示してくれて有難かったです。
あえて悪いところをいうと基礎カリキュラム 文法多いですが、Progateの方がわかりやすかったですね。メンターも人によって力量が異なります。なぜ問題が発生していてどうすれば解決できるかを調べてくれる人もいれば、一緒に考えたものの他のメンターに回す人もいます。また応用カリキュラムや最終課題ではTECH::CONNECTで質問できますが、2人、3人と限られておりいつでも質問できるわけではありません。
できるだけ自力で解決策を探し、やってみることが大事だと痛感しました。
アプリケーション開発するときもエラー解決の時もそうですが、手を動かしてコードを書いてみると面白くなります。力量ではまだ初心者より少しマシな程度です。3ヶ月学習しただけで1から自作のアプリケーションが作成できるかというと難しいです。
ただTECH::EXPERTでの経験、特にスクラムマスターとしてメンバーとともにメルカリコピーサイトを作成した経験は今後チームで仕事をする際も役立つと思います。
補足
Twitter、ブログ開設してよかった。自分が学んできたことは価値があると思ってます。アウトプットをほぼ毎日行なって250以上のフォロワーが付いたというのは自分でも驚きですし、ありがたいと思います。
TECH::EXPERTでも朝礼、夕礼でアウトプットの時間がありますが良い試みです。
自分で抱えてるだけでは本当に理解できているか、言葉で説明できるか確認できないからね。初めのカリキュラムでインプット・アウトプット、メタ認知の大切さについて学びます。初めに大事なこと書いてあったんやなと改めて思いましたね。
TECH::EXPERTで学んだことで特に大きいものを3つあげると
1.インプット(検索力)、アウトプット(発信力)の大切さ
2.チーム開発の面白さ
3.自信を持つこと
3つ目の自信については、機能を実装できて自信がつくということに加えて、100%達成できると念じることもあります。念じたことが叶うとよりモチベーションが上がって面白くなります。
総括：TECH::EXPERT来てよかった
今後のこと
今週は個人アプリ作成が終わった後にポートフォリオ作成をします。
加えて火曜日にキャリアアドバイザーと模擬面接をするので自分の思うままに話したいところです。
あと再び祖母の知人の社長さんと話す予定です。もしかすると社長さんの会社に就職するかもしれません。キッティングサービスを提供している会社でビュー作成、機能実装どころかタブレット、スマホといった機器を解析する技術も必要なので1、2年で身につくとは考えていません。その分、機器そのものに詳しくなって大手よりもエンジニアとしての腕をあげることができると考えています。
ブログ更新については伝えたいことがあればその都度行います。気分次第ですね。
テックエキスパートでの経験を通じ、心身共に成長できたと感じます。
改めて51期のみなさん、ライフコーチ・メンターの方々にはお世話になりました。
以上とします。本当にありがとうございました。
最終課題1週目 デプロイとマークアップから学んだこと
みほうです。
前記事で話したように私はデプロイと新規登録・ログイン画面を担当しました。
この記事では新しく学んだことを書いていきます。
デプロイから学んだこと
デプロイについては基本的にはカリキュラム通りに行いました。
順序としては
1. AWSにおいてEC2インスタンス作成、本番環境へのログイン
2. Linux環境構築
3. MySQLの設定と起動
4. アプリケーションサーバー「Unicorn」のインストール、Railsの起動
5. Webサーバー「Nginx」のインストール、起動
6. Capistranoを用いた自動デプロイ
8. Basic認証導入
になります。カリキュラムと比較してBasic認証導入が追加されています。
Basic認証とは知っている人しかアプリケーションを見れないようにするための機能です。言い換えればチームに関わっていない人に勝手にアプリケーションを弄られるのを防ぐための機能です。
初めてのログイン時、アラートが出てユーザー名とパスワードが要求され、入力するとページ移動ができます。
Chat-Spaceで試してみました。動画を載せます。
動画でわかりますが、URLのところに通常と違い鍵マークが出ています。
https://i.gyazo.com/beee0ea981eb69cf1de36028d8400f48.mp4
Active storageの設定について
さて今回、AWS S3にファイルをアップロードするためにActive Storageと呼ばれるRailsの機能を用いることにしました。
こちらの記事が参考になります。*1
Carrierwaveとの違いは、Carrierwaveが1画面につき1枚しか保存できないのに対し、Active Storageは1画面に複数枚保存できると聞いています。
まだ実際に複数枚保存できることは確認していませんが、開発を進めていく中で確かめようと考えています。
ただこの記事の通りに下のコマンドを打ち、vimファイルを編集してしまうとconfig/credential.yml.encが編集されるという問題が発生します。
$ EDITOR=vim rails credentials:edit
credential.yml.encについてはRails5.2.0以降からsecrets.ymlの代わりに導入された秘匿情報が入るファイルです。secrets.ymlと違い、内容が暗号化されています。
このファイルに入った情報をconfig/master.keyで読み取ります。
master.keyは最初から.gitignoreに入っており、本番環境ではmaster.keyの指定漏れを避けるためconfig/environments/production.rbでconfig.require_master_key=trueのコメントアウトを外すことが推奨されています。19行目で確認しました。*2
編集後のcredential.yml.encを含んだコミットをGitHubにプッシュすると他の人に見えてしまいセキュリティ上問題があるため、環境変数を利用することにしました。
環境変数を利用することで編集されるのを回避することができます。
下のコマンドをローカル環境と本番環境で打って編集し
$ vim ~/.bash_profile
下のコマンドでその内容を読み込ませました。
$ source ~/.bash_profile
さらにstorage.ymlのaccess_key_idとsecret_access_keyを環境変数に変更します。
このように変更することで編集した環境変数を利用することができるようになりました。
basic認証のユーザー名・パスワードもセキュリティのため環境変数で管理しています。
苦労したこと
苦労したことは
本番環境で「git pull origin master」のコマンドを打ったところ
error: Your local changes to the following files would be overwritten by merge:Gemfile.lock
Please commit your changes or stash them before you merge.
とエラーが出たところですね。
それについては下のコマンドで変更を退避させた後
$ git stash save
git pull origin masterのコマンドを打って本番環境にプルし、下のコマンドで変更を復元して解決しました。
$ git stash pop
チームで問題を解決して改めて意見を出しあうと解決が進むことがわかりました。
学んだこと：
セキュリティ面を考えないとサイトが攻撃され悪用される温床となるため、秘匿情報をGithubに上げないように設定することが大切。個人アプリをデプロイするときも気をつける。
新規登録・ログイン画面から学んだこと
最終課題においてメルカリが持つ機能を実装するにはサイトの見た目を作る必要があります。自分は新規登録・ログイン画面のマークアップを行いました。
新規登録画面では5画面実装します。ウィザード形式と呼ばれるステップごとに登録フォームを作る方法があるそうです。*3
擬似要素について
5/31までSNS認証がLGTMとなるまでの仮のRailsアプリケーションで新規登録・ログイン画面のマークアップを行なっていました。
その中でヘッダーにあるグレーの線を引くのにHTMLの擬似要素を使いました。*4
要素は<タグ名> 文字 </タグ名>のようなタグとタグで囲われた1つの固まりです。
擬似要素を使うと要素内の特定の文字や行に対してHTMLに書かずにCSSでスタイルを指定できます。
例えばヘッダーの線ではこのように設定しています。
なおHTMLについては記述を短縮できるhaml記法で書き、CSSについてはネストが便利なSass記法で書いています。Sassについては全体を写すとすごく縦長になるためactiveクラスとthroughクラスに絞って説明します。
Sass(左はlistタブの設定、右はprogress-statusクラスの設定)
画像
activeクラスについては文字も丸も赤色になります。throughクラスについては文字はグレーのままで丸だけ赤になります。擬似要素で背景(background)の色指定を入れることで線の色を赤にしています。
progress-statusクラスに線と丸の設定があります。listタブの最初と最後の要素についてはそれぞれfirst-child、last-childと指定してcontent:noneとすることで設定を消しています。ちなみにlistタブの共通設定が外にあるため、このコードをコピペしても画像のような表示になりません。
本番のアプリケーションには実装していませんが、今後個人アプリ製作をする上でHTMLを使わずにスタイルを設定できるので便利だと思いました。
あと新規登録画面5ページ作ったおかげでログイン画面のマークアップが1時間くらいででき、マイページの本人確認ページの作成もSassの記述を変更するくらいで2時間くらいでできました。
マークアップについてははじめにdivタグで囲むとページ表示が崩れにくいです。
班の方針でそうしています。
ちなみにhaml記法ではdivタグは省略して書くことができます。
自分は仮のアプリケーションでlistタブでの共通の設定をdivタグの外で設定していたため、それが他のページで影響してしまいました。そのため昨日はSassファイルの記述の修正に2時間かけていました。
これからは最初にdivタグで大枠を作るようにマークアップしていきます。
終わりに
マークアップも昨日、本人確認ページがLGTMになり、6/2時点で残すはログアウト画面、商品関連の3画面となり、全ページ完了に近づいてきました。
個人アプリについては作る題材については決めていませんがJavaScript、挑戦するならばAPIを利用した掲示板アプリを作ろうと考えています。
活動記録をまたブログにまとめようと考えています。
長くなりましたが今回は以上です。ありがとうございました。
最終課題1週目 チーム開発 所感
みほうです。
昨日スプリントレビュー1回目が終了しました。
昨日まででデータベース設計、デプロイが完了する必要があったので
遅れずにできてよかったです。
まず技術的な題目の前にチーム開発して思ったことを書きます。
次に別の記事で技術的に新しく学んだことを書きます。
この記事では以下の内容について話します。
・現状報告と次回スプリントレビューまでの目標
・チーム開発に取り組んでみて現時点で思ったこと
現状報告と次回スプリントレビューまでの目標
まずA班について
A班は同期のフリーランスコース4人で開発を行っており、
私がスクラムマスターです。
班ではデータベース設計LGTM、デプロイについてもbasic認証まで実装していると
報告して確認を行ってもらいOKをもらいました。
それから各自マークアップを行い、5/31時点でマークアップではトップページ、マイページ、新規登録・ログイン画面がLGTMとなり、サーバーサイドでもSNS認証がLGTMとなっています。
今週はマークアップ全て実装するという目標を掲げています。メンバーもコツを掴んできていますし、100%達成可能と考えています。
達成後は、サーバーサイドの方も実装していく予定です。
メンバーについて
メンバーについては先ほど話したように4人です。
twitterでは5人全員揃って開発したいと書いていましたが、ChatSpaceの完成に至らず
合流なしとなりました。残念です。
今回はメンバーの紹介と現時点での担当を話します。
一応個人情報は伏せておく必要があると考えているので、私以外は便宜的に先生さん、Nさん、Mさんとします。
まずスクラムマスターの私から
私については現時点でデプロイ、新規登録・ログイン画面のマークアップを行いました。メンバーとは仲良くできていると考えているのですが、舐められているところもあります。あとメンバーとのコミュニケーションにおいてテレビ番組などの自分が詳しくない話題が出ることが多く、ギャップを感じています。
普段テレビをみることが少ないですが、面白いと感じるところは拾って行きたいと考えています。
先生さんについては基礎・応用の頃から、学んだコードをしっかり理解していて必要な情報を調べるのも上手く、加えて人に教えるのが上手い人です。チーム開発の時も必要な情報を一緒に調べて教えてもらい、頼りになっています。
SNS認証についても調べた内容を組み込み、ローカル環境でできていることを確認してすごいと思っています。安心感があります。
Nさんについては現時点でデータベースのマークダウンとトップページのマークアップを行いました。とにかく面白いコンテンツを知っていて、一緒にいると楽しい方です。自分にも話題を振ってくれてありがたいと思います。
ChatSpaceのデプロイ完了が5/24の21時ぐらいで一番遅く、実際完了報告を聞いたときはホッとしました😌
データベース設計については自ら買って出てくれて、「やってアプリ構造が理解できた」と感想を聞き、良かったと思いました。
Mさんについては現時点でマイページのマークアップを行いました。Nさんと同じくコミュニケーションが上手い方です。自宅学習の方が集中できるようで、メンバーの中では一番教室にいる時間が少ないですね。
データベースのER図についてはこの方の図を採用し、議論の時も必要な改善案を出してくれてありがたかったです。あと漫画「キングダム」が好きでその話をよくします。
短いですが、こんな感じです。チームとしてより仲良くしたいと考えています。
チームで本町製麺所に行き、うどん食べました。1人で食べるより美味しさが実感でき良い経験になりました。
コアタイム
A班のコアタイムについては昨日決めました。
備忘録として書いておきます。
・〜14時 個人時間 (個人アプリ開発など)
・14時 デイリースクラム
昨日の振り返り、チーム内での改善案について話し合う。
決して進捗管理のために設ける時間ではない。
取り掛かっているタスクが次回のデイリースクラムまでにどれくらい終えることができるか少しずつ調査する。
・14時〜終わりまで チーム開発時間
以上です。
チーム開発に取り組んでみて現時点で思ったこと
チームで開発して思ったことを箇条書きで書いていきます。
・チームで開発するとより良い改善案が出て、楽しい
特にデータベース設計の時に実感しました。チームでメルカリが持つ機能の洗い出しを行い、必要なテーブルを出し合って整理して、ER図がどんどん整っていく様が楽しかったです。
チームで意見を出しあうと自分1人では出なかった着眼点が出て面白いと思いました。
・コンフリクト(ブランチの競合)に気をつける必要がある。
チーム開発では、各々masterブランチを切って別のブランチで開発しています。
LGTMをもらったブランチからmasterブランチにマージ(統合)するとき、既に他の人が
マージをしていたらコンフリクトが発生して修正する必要があります。
その内容についてチームと話し合う必要が生じます。もし消す必要のないデータを消したら面倒事になるため、コンフリクトについてはなるべく発生しないようにすると
班の方針で決めています。
・なるべくチーム内で問題解決に取り組む
エラーが発生した場合、まずチーム内で解決できる問題か話します。
話し合って調査し、解決できる問題であれば解決します。煮詰めても解決できなければ調べた内容を以ってメンターに質問します。
終わりに
チーム開発、個人でやるより楽しくてダレないです。
学んだことを今後の仕事でも生かしていきます。
基本的には転職希望であり、実務経験を数年積まないと複業でアプリ開発して稼ぐのは難しいと考えています。
履歴書・職務経歴書もまだ作ってないし、作らんとね。
以上です。ありがとうございました。
個人アプリ所感 && 最終課題に向けて
みほうです。
個人アプリ発表会終えて、いよいよ最終課題です。
どれほどの難関が待ち受けているのか、楽しみですね。
完成に向けて気を引き締めていきます。
今回の内容
・個人アプリ所感
・最終課題に向けて
それでは学んだことを書いていきます。
個人アプリ所感
まず一言、やって良かったです。
基本的にはRailsと要領が似通っているため、処理の流れを振り返ることができ、新しい言語を学ぶことでプログラミング言語を学ぶことの面白さを実感できました。
ただマークアップが十分できなかったので、最終課題に取り組むことでマークアップやサーバーサイドの知識を充実させていきます。
レイアウト
「PHPフレームワークLaravel入門(以下教材)」を一読した後、bootstrapを入れてレイアウトしてみた結果
⬇️
使用したテンプレートは以下のものです。
https://moozthemes.com/lattes-free-one-page-bootstrap-theme/
そのため下にスライドすればヘッダーが黒くなったり、フッターが出てきます。
フォームがありますが何も機能を持ってません。
そのため、教材で作成したアプリケーションを軸に感想を書きます。
PHP Laravelについて
まずPHPについて
PHPは以下の特徴があります。
1.サーバーサイドでコードを実行しHTMLを動的に表示できること。
2.Webサービスの開発に特化。
3.データベースとの連携が簡単にでき、動作環境が作りやすい。
世界のWebサイトの30%以上はWordPressで作られているというデータがあるくらい重要があります。
そのフレームワークであるLaravelは以下の特徴があります。
1.オブジェクト指向やパッケージマネージャ(composer)といった最新の機能に加え、MVC、ORM(Eloquent)、テンプレートエンジン(Blade)などの機能を入れることで本格的なアプリケーション作成ができる
2.機能の実装が容易で、簡単なコードを書くだけで機能を利用できる
1がLaravelの最大の特徴ですね。フレームワークのいいとこ取りです。
2についてはartisanと呼ばれる独自コマンドが用意されており、ターミナル上で操作します。例えばサーバを起動するなら
php artisan serve
となります。簡単に機能を実装できるので、習得コストが少ないですね。
Laravelについては昨日twitterでアウトプットした図(下図)のように
他のPHPフレームワーク、Railsと比較してトレンドになっています。
それだけ価値のあると認められた言語でしょう。
あとLaravelがPHPの世界の中でどれだけ伸びているか
— みほう.しん＠TECH::EXPERT卒業生 (@MihouTechPeak51) 2019年5月23日
GoogleTrendsで調べました。
WordPressへの需要もあるのか急激に伸びてて驚きました😲
グラフは3年前から今までを集計しています。
Ruby on Railsよりも遥かに多いですね。#Laravel #PHP #テックエキスパート pic.twitter.com/2c0hWvuNbO
処理の流れ
処理の流れについてアドレス localhost:8000/helloを表示する場合を例に図を作成してみました。
MVCモデルなので、基本的にはRailsと同様の処理を行います。*1
ただコントローラーの処理の前後にミドルウェアというものが入ってますね。
ミドルウェアとはアクションの処理が実行される前に指定の処理を割り込ませることが可能なものと考えています。
beforeミドルウェアにはユーザー認証といったある条件をクリアしないとリクエストを弾く処理を入れます。
afterミドルウェアにはビュー内に付け加える処理を入れます。
Bladeテンプレート
Laravelではビューを作成するのにBladeと呼ばれるテンプレートエンジンを使います。
.phpでもビューは作成できるのですが、.blade.phpとした方が圧倒的に作成がラクで、Laravelの設定でも.phpより優先度が高くなっています。
(例：index.phpとindex.blade.phpがあるとbladeに書いた内容だけ表示される)
特徴として以下のものがあります。
・テンプレートを継承して新しいテンプレートを作成することができる
・@sectionや@yieldに新規作成したテンプレートの内容をはめ込むことができる。
index.blade.phpについて説明のためコードを教材よりも短縮して載せます
共通のビューについてはRailsでのapplication.html.erbのように書くことができます。
継承する場合は継承先の一番上の行に@extends('継承元のファイル名')と書きます。
内容をはめ込む場合は継承元で@yield('title')とすると、
継承先で@section('title', 'Index')とするだけでtitleの持つ値がIndexになります。
データの表示は {{値・変数・式・関数など}} とし、この場合foreach文で$itemに代入されている値を一つ一つ参照し、取り出したデータ(name)を出力しています。
ちなみに/helloにアクセスした場合⬇️
他にも教材内にはアソシエーションの組み方や出力したデータの並び替え方法など一通りの機能が解説されています。
読んでおけば挫折しなくて済むでしょう。
今後の個人アプリでの目標としては、最終課題に取り組みつつ、まずはRailsを用いてアプリケーションを作成した後、Laravelでもアプリケーションを1から作成することです。
ポートフォリオに必要になるため成果を出していきたいです。
最終課題に向けて
スクラムマスターになりました。
挑戦するからには必要な機能を実装し、完成を目指します。
そのために5/25からはデータベースに必要なエンティティの洗い出し、
そしてデータベース設計ですね。
5/31のスプリントレビューまでにデプロイもできないと苦しいので、
この日までにデータベース設計、デプロイ完了が目標です。
「チームでアプリケーション開発するということ」とはどういうことなのか学んでいきます。CADオペレーターしていた頃もチームで開発していたのですが、チームの方針に何か言える立場ではなかったため、正直楽しみです。互いの意見を拾えるようにしていきます。
終わりに
最近暑いですね。今日から半袖に衣替えしました。
さあ今日から最終課題の開発、Let's Go!!
個人アプリ 製作方針
みほうです。
現在、5/24の個人アプリ発表会に向けてPHP Laravelを勉強しているところです。
応用カリキュラムのChatSpaceについては期日(5/17)までに終えることができてよかった😌
Slackの個人チャンネルで完了報告した後、LGTMもらって嬉しくなったと同時に自信が増しました。
さて今回は以下のことについて書いていきます
・個人アプリ初期案
・PHP Laravelについて
・応用カリキュラムを終えた感想
よろしくお願いします🙇♂️
個人アプリ初期案
現状達成が難しいです。
理由はPHP Laravelの進捗が予定よりも遅いためです。
そのため、今回の発表会ではPHP Laravelの機能紹介で、アプリケーションについては少し触るぐらいと考えています。
この初期案に沿ってアプリケーションを作ってみます。
考えているのは「忘れ物チェック・検索アプリ」です。
設計案
必要な機能
・USERがログイン/ログアウト/サインインできる。
・USERが自分の持ち物(belongings)を投稿できる。
・USERが持ち物を名前で検索できる。
・USERが持ち物を編集・削除できる。
追加したい機能
・持ち物に筆記用具や貴重品といったタグを決めることができる。
・名前だけでなくタグでも検索できる。
・チェックリストでチェックすることができる。
データベースの仕様
テーブルについてはusersテーブル、belongingsテーブル、tagsテーブル、commentsテーブルとし、
usersテーブルには名前やメールアドレスといったユーザーの管理情報
belongingsテーブルには持ち物の名前の管理情報
tagsテーブルには持ち物のタグの管理情報
commentsテーブルには持ち物につけたコメント(名前だけではわかりづらいため付随情報としてコメントを付ける)の管理情報
正直データベース再考した方がいいと考えています。作りつつカラムを編集していきます。*1
トップページ画像
トップページはこのようにします。
PHP Laravelについて
個人アプリにおいてはPHP Laravelと呼ばれるPHPフレームワークの学習に取り組んでいます。教材としては「PHPフレームワーク Laravel入門」を使っています。
インターネットの情報だけで作ろうとはしたのですが、 断片的で繋がりがなく、本を買って勉強することにしました。
先ほど述べたように今の所遅れています。5/20時点でp.161まで完了したのですが、これからアプリケーション製作と考えると、発表会は機能紹介中心になりますね。
PHP Laravelを勉強する理由
自分が今回の個人アプリでPHP Laravelを勉強しようとしている理由は以下の3点あります。
１.PHPフレームワークの中で現在一番伸びているフレームワークであるため。
２.Rails同様MVCモデルで作られており、Pythonよりは入りやすいと感じたため。
３.社長さんから「サーバーサイドの開発言語にはPHPを使っている」と聞いたため。
順番に説明します。
理由1.
PHP Laravelは2012年にリリースされた、PHPフレームワークの中では比較的後発のフレームワークです。
それがリリースされて以後、急速に発展しています。*2
日本ではこれまで2005年にリリースされたCakePHPの需要が高く、社長さんの会社でもCakePHPを使っているとは聞きました。
ただ現在一番伸びているPHPフレームワークであるため、自分はPHP Laravelを勉強します。
ちなみにフレームワークというのは「最初からセキュリティ、保守・保全、拡張性が保証され、誰が作っても再現できるシステム」のことだと考えています。
Railsもそうだと考えます。rails newするだけで、最初からルーティング、コントローラ、ビューのファイルが入って、学習すれば誰もが教材を再現できる代物ですからね。
今考えているアプリケーションも自分の理解度を考えればRailsで作った方がラクなのですが、PHPといった他の言語も学べばプログラミング言語を学ぶことがより楽しめます。
現にRubyとPHP、条件分岐のif文や繰り返しのwhile文など似ている部分もありますので違う言語に触れてみると面白いです。
理由2.
PHP Laravelを利用してて、腑に落ちたのがRailsと同様MVCの流れに沿っていることです。
MVCとはアプリケーションフレームワークで使われるアーキテクチャで、アプリケーションをModel-View-Controllerの各機能に分けて整理します。
Modelはデータベースに関する処理全般を担当します。
Viewは画面表示を担当します。
Controllerは全体の制御を担当します。Modelとやり取りしてデータを取得したり、Viewを利用して私たちに返す画面を作成します。
PythonのフレームワークDjangoではこれがMVTと呼ばれるModel-View-Templateから成るモデルになります。
ややこしいのはViewの役割がMVCと異なることで、RailsでいうViewはDjangoでいうTemplate、DjangoでいうViewはRailsでいうControllerとなります。
勉強しようとしても違いがとっつきにくいと考えました。
実際PHP Laravelを勉強してみて、処理の流れがRailsと似ているので作りやすいとは思いました。
Bladeテンプレートなど新しいワードも出てきますが似た部分も多いため、特に不便なく学習しています。
理由3.
個人アプリで勉強する言語はサーバーサイドの言語と最初から考えていました。
マークアップはbootstrapやjQueryライブラリと考えていたためです。
Python、Go、PHPを基礎だけProgateで学習した後、どれをやろうかと迷い祖母の知人の社長さんに「会社でのサーバーサイドの開発言語は何を使っていますか？」と聞いてみたところ、「PHPを使っている」と返ってきたため、PHPにしました。
最終的には社長さんの返答が決め手となったわけです。
勉強してて思ったのが、1つの言語を学ぶと似た表現が他にもあるなと思ったところです。そういった点ではRuby on Railsを用いたアプリケーション作成を勉強してきたことが役立っていると思いました。
応用カリキュラムを終えた感想
twiiterでも話していたように続けてこれたのはカリキュラムの製作手順に沿ってGitHubに適宜コミットしたり、OneNoteに記録し続けたことが大きいですね。
記録を見返すことで過去にどんな手順を辿ったか振り返ることができますから。
一番苦戦したのはインクリメンタルサーチのイベントの発火部分です。
動画↓
https://i.gyazo.com/221ca3a1bb53bea92a4e4586332b22ef.mp4
フォームに名前を入力しても出てこない、追加ボタンを押したところで名前が追加されない、チャットメンバーに追加できても更新ボタンを押すとテーブルに保存されないといった問題が発生し、それらの修正に時間をかけました。
問題の解決に役立ったのがbinding.pryやconsole.log( )ですね。デバッグツールであり、binding.pryではコントローラで正しく値を受け取っているか見て、console.logではイベントが正しく発火しているか引数に値を入れて確認しました。
ディスカッションでdebuggerという処理を止めてデベロッパーツールのConsoleで処理を書いて値が正しく受け取れているか確認するツールも知ったので、イベント設定時はそれも使っていきたいと思いました。
始めてから15時間くらいですかね、終わったのは。
終わった時は「やっと終わった〜」と安堵しました。
ChatSpace作ってみて、アプリケーションの設計・開発・公開(デプロイ)の流れを出来て役にたつと思いました。
以上です。個人アプリ発表会に向けて準備していきます。
次回のブログでは学習したことの復習として、PHP Laravelについてより詳しく話します。
ありがとうございました。
TECH::EXPERT3週終わって 感想(応用カリキュラム)
みほうです😉
前記事*1でミニアプリの感想を書いたので、応用カリキュラムと現状の課題、今後のことについて書きます。
こちらについては比較的短く書きます
応用カリキュラム感想
4月23日に本試験合格してから、応用カリキュラムを進めています。
応用カリキュラムではChatSpaceと言うアプリケーションを作成しています。
目的としてはゼロからリリースをするまでのアプリケーション開発の流れを学ぶために取り組んでいます。
今日まで以下のことに取り組んできました。
1.GitHub Flowを用いた開発の流れ
2.SQLと呼ばれるデータベースの操作を行うための言語の学習
3.ChatSpaceのデータベース設計
4.Sassと呼ばれるCSSを拡張した言語の学習、BEMと呼ばれるクラスの命名規則の学習
5.Hamlと呼ばれるHTMLをより効率的に書くことのできる言語の学習
Hamlを用いたChatSpaceレイアウトの作成
6.ユーザー管理機能、グループ管理機能の実装
7.メッセージ送信機能の実装
8.「プログラムが意図通りに動くことを確かめる」ためのテストコードの導入
基礎カリキュラムの内容より難しく感じました。
それと同時に基礎の内容が大事やなあ〜と思いました。
jqueryについても学んでいますが、後で出てきますのでここでは割愛しています。
内容の復習についてはOneNoteを見ることもありますが、5/17までにChatSpaceをデプロイしようと考えたら、カリキュラムを復習する時間がなかなか取りづらいです。
やって理解しようとしてます。
現状の課題
現状の課題を以下に書きます
・なるべく自分で解決する
ユーザー管理機能やグループ管理機能の実装の際、メンターに聞くことが多かったです。早く済ませようとしていました。ただ、このやり方ではエンジニアとして必要な調べる力が十分に身につきません。
まずは調べて解決法を探します。
実際メンターに聞いてみて考えが整理できることもありますがメンターがコードを書いているわけではないので、聞いたやり方をやってみて「これ別の方法があるな」と思ってしまうこともありました。自分の調査不足で質問したので、調べてやってみてそれでもダメな場合、TECH::CONNECTで質問するようにします。
・どんなエラーが発生しているか調べる。
エラーが発生した時、エラー画面が英語で表示されます。
英語もちゃんと調べてエラー内容を整理していきます。
その内容から仮説を立ててエラー解決していきます。
・人に教えるときは「なぜそれが必要なのか」伝わるようにする
人からコードの説明を求められることもあります。
そのとき「なぜそのコードが必要なのか」伝えないと問題に対してなぜ問題なのか伝わらないと思いました。
自分が説明して、それで十分でないとき周りで勉強している人から補足情報が入ることが多かったので、心がけていきます。
今後のこと
5/17までにChatSpaceを完成させることを目指します。
本日が5/7なので、5/17まで休まず行って完成させます。
今日「名探偵ピカチュウ」見て、十分リフレッシュしました。
明日から非同期通信に入ると思います。
苦戦するとは思いますが、なるべく自力解決を心がけます。
ありがとうございました。
