TECH::EXPERT3週終わって 感想(ミニアプリ)
みほうです🙂
TECH::EXPERT 3週目が終わりました。
ミニアプリ発表会も終了し、満足のいくものが作れました。
前回の記事*1の設計案にある構想はbootstrapに詳しい先輩やインターネットサイト、特にbootstrap移行ガイドの助けもあり、実現できました。
今回は以下の内容についてに書いていきます。
・ミニアプリを作成してみた感想
・応用カリキュラムを進めた感想
・現状の課題と今後
ミニアプリの感想が多いので、ミニアプリと応用カリキュラムで2記事に分けます。
やってきたことの振り返りになりますので、復習になります。
ミニアプリを作成してみた感想
結論から言いますと、Railsでアプリケーションを作成する流れを振り返ることができ、bootstrapを用いた基礎的なレイアウトができて楽しかったです。
なぜbootstrapを使うことに決めたのか？
きっかけは先輩の話です。冒頭に出てきました先輩とは違う人です。
1週目ぐらいにその先輩と今日学習したことについて発表しあった後に、アプリケーションを見せてもらい、どうやってこのレイアウトを作っているのか聞いてみたんです。ミニアプリの構想が決まってなくて、参考にしたかった。するとbootstrapを使って作ってると返ってきました。bootstrapはサイトを作りやすいためポートフォリオに役に立つとも聞いて興味を持ちました。そう言うわけでミニアプリ制作ではbootstrapに挑戦してみようと思い至ったわけです。
参考までに本ミニアプリ作成の順序としては
1. ベースとなるpictweetを作成
2. 「rails new」でbootstrapのレイアウトを表示するためのアプリケーションを作成
3. 「GitHub Desktop」でブランチを作成。
4. Gemで「bootstrap」と「jquery-rails」を入れて「bundle install」でgemをインストールし、必要なファイルをassetsに入れる。
5.「stylesheets/application.css」の拡張子を.scssにして、application.jsの内容を編集
6. viewファイルにbootstrapの内容を入れて、「rails s」でサーバーにつないだ後、
localhost:3000で表示を見て修正
7. 修正ごとにでコミットを行い、アプリ作成完了後、プルしてプルリクエストからマージを行って、ミニアプリ提出フォームを提出
こんな感じでした。
3と7の内容については応用カリキュラムの進み具合にもよりますが、GitHubが提出の時に必要になるため入れました。
4の必要なファイルについては頭にbootstrapとつくファイル (例 bootstrap.css）については不要で、それ以外を入れました。当初は気付かず入れており、先輩の指摘で削除しました。理由はgem 'bootstrap'に元々入っているためです。*2
実際に作ってみて
最初はどうやってやるんや？ってなりました。
それからサイトでbootstrapのレイアウト作成法を調べていき、実際に取り入れて表示を確かめて、楽しいなと思いました。
例えば色を青にするならtext-primaryと言うクラスで青にできます。
サイトのレイアウトについてはd-flexやmx-autoと言うクラスで横並びにしたり、中央揃えにしました。クラスで調整でき、それがすぐに反映されたのは楽しかったです。
そのレイアウト調整でかなり時間を食ったわけですが、containerで大枠を作り、そこにカードやジャンボトロンなどで調整して、なんとなく使い方を覚えました。
サイトのレイアウト調整法についてはこのサイトが理解しやすいと思いました。*3
使ってみたメリット
・classで簡単にレイアウトができる。
・内部にリセットCSSが入っているため各種ブラウザやスマートフォンでも表示が崩れない。
デメリット
・どのようにしてカスタマイズするのか学ばないとテンプレート通りになり独自性がなくなる。
挑戦してみて良かったと思いました。
個人アプリの構想は決まっておりませんが、同じくbootstrapを使っていきたいと考えています。その際は今回とは別のテンプレートを使い、このミニアプリで用いてなかったクラスも使います。
トップページと他のビューについて
トップページ
「ようこそ」のところに背景画像を入れ、ツイートについてはカードを用いてレイアウトしました。ボタンも色をつけてわかりやすくしました。マイページボタンからユーザーごとのマイページに行き、ログアウトボタンからログアウトします。
ログアウトしているときはヘッダーにあるボタンが「ログイン」と「新規登録」になり、新規登録ボタンからユーザー登録ができます。
新規投稿画面
フォームについてはform-groupと言うクラスを使っています。中央寄せについては前述のmx-autoを用いました。このページから画像とツイートを投稿できます。
新規登録画面のコードについては短いので出します
pictweetでは 3行目がform_tagになっていましたが、今回はform_withとしています。
local: trueとすることで普通のページに移動することができます。
入れないと非同期でフォームを送信することになります。*4
詳細画面
画像の横に編集と削除ボタンがあり、ここから編集と削除ができます。
コメント機能についてはpictweetでは送信ボタンの下にコメント一覧と出るようになっていましたが、これについてはd-flexと言うクラスで横並びに変更しています。
フッターについては調整忘れです。今回重要ではありませんが、時間がある時に直します。
以上です。ミニアプリ面白かったです。
個人アプリではより一層の挑戦をしていきます。
ありがとうございました。
