前回、環境構築とRailsのフォルダ構成の把握とアプリの企画までが終わりました。
いよいよ、コーディングに入ります。
アプリに入れたい機能は主に以下の通りです。
- 投稿機能
- ユーザー登録機能
- ログイン機能
- いいねボタン機能
- フォロー機能
まずは基本中の基本の投稿機能から作り始めます。
投稿機能を作ることにより、フォームの使い方を学ぶことができます。
フォームの使い方をマスターすればWebアプリは半分以上はマスターした様なものと、スクールの講師も言っておりました。
投稿フォーム
投稿内容は着物でお出かけしてきた情報の紹介です。
なので、最低限入れたいフォームは以下の通り。
- 記事のタイトル（テキスト１行）
- 記事の内容（テキスト複数行）
- 写真（ファイル選択できるやつ）
フォームの作り方
投稿フォームを作るにあたりドットインストールを参考にしました。
1回3分以内の動画でサクサク進みます。
私がやりたい投稿機能を作成する動画になっているので、真似して作ったら投稿フォームが出来上がりました。
「学ぶ」という言葉は「真似る」が語源らしいですからね、分からなくても最初は真似することから始めるのがいいそうですよ。
作成したフォームはこんな感じ。
タイトル（テキストボックス）と本文（テキストエリア）を入力できるフォームです。
ドットインストールの動画では編集機能と削除機能も紹介されていますが、前に進みたいのでそれらはとりあえず一旦後回しにして、写真投稿機能を入れることにしました。
ちなみにこの当時はprogateに課金していなかったので、ドットインストールを使用しましたが、progateも投稿機能を作成する学習になっているのでこちらを使うのもいいですね。
動画見ながらサクッと始めたい方は、ドットインストール。じっくり基礎を学びながらやるならProgateを使うのがいいのではないでしょうか。
写真アップロード機能
次は写真投稿機能を追加します。
テキストのみのフォームと違って、写真のアップロードはちょっと面倒です。
なぜなら、テキストはそのまま文字でDBに入れられますけど、写真のような画像データは画像自体はサーバ上に置いて、DBには画像のタイトルを入れて管理するからです。
progateはこの辺もやり方を説明してくれていますが、まだやっていなかった私はとりあえず方法をググりました。
gemを使う方法と使わない方法がありますが、簡単にできそうって理由で私は「carrierwave」というgemを入れました。
（この安易にgemを選んだことで、あとで機能追加するときにちょっと詰まることになるとはまだとこの時は知る由もなかった…）
ネットの情報を元にgem自体は簡単に導入でき、あっという間に画像アップロード機能が追加できました。時間にして数時間くらいです。
gemの便利なところは、簡単に機能追加ができることですね。
ファイル選択フォームができました。
投稿後は一覧ページに遷移するようになっています。写真が入るとちょっとだけレベルアップしましたね！！
デザイン考えてないのでまだ仮ですが、インスタ意識して写真は正方形にしてみました。
ここまで初心者でもつまずくことなく短時間でサクサク進みました！！Railasすごい。
できたので講師に見せてソースレビューしてもらいました。
講師インデント（字下がり）とスペースとかきちんと揃えた方がいいよ。仕事をするならこういう細かいと所も大切だよ。
インデント…結構なんとなくやっていてちゃんと意識していなかった。
確かに揃っていないと汚いですもんね。気を付けます。
講師gemを使うものいいけど、最初は使わないやり方でやった方が勉強になるよ。後で使わないやり方も勉強してみて。
あぁ、ですよね〜〜
（後ほど、progateにgemを使わない画像アップロード方法があることを知り、そこで方法は学びました。）
投稿内容の確認画面
講師投稿確定前に、内容の確認画面があるほうがいいよね。
確かに、ブログ書くときもめっちゃプレビューするし、あった方がいいなってことで、次は確認画面の作成に取り掛かります。
レッスンを受けたスクールはこちら
