Webアプリ制作日記

Rails初心者によるはじめてのWebアプリ制作日記 Vol.2 -投稿機能編-

前回、環境構築とRailsのフォルダ構成の把握とアプリの企画までが終わりました。

いよいよ、コーディングに入ります。
アプリに入れたい機能は主に以下の通りです。

  • 投稿機能
  • ユーザー登録機能
  • ログイン機能
  • いいねボタン機能
  • フォロー機能

まずは基本中の基本の投稿機能から作り始めます。
投稿機能を作ることにより、フォームの使い方を学ぶことができます。
フォームの使い方をマスターすればWebアプリは半分以上はマスターした様なものと、スクールのメンター(現役Webエンジニア)も言っておりました!!

投稿フォーム

投稿内容は着物でお出かけしてきた情報の紹介です。
なので、最低限入れたいフォームは以下の通り。

  • 記事のタイトル(テキスト1行入れられる)
  • 記事の内容(テキスト複数行入れられる)
  • 写真(ファイル選択できるやつ)


フォームの作り方

投稿フォームを作るにあたりドットインストールを参考にしました。
ドットインストール
1回3分以内の動画でサクサク進みます!
私がやりたい投稿機能を作成する動画になっているので、真似して作ったら投稿フォームが出来上がります!
「学ぶ」という言葉は「真似る」が語源らしいですからね、分からなくても最初は真似することから始めるのがいいそうですよ。


作成したフォームはこんな感じ

タイトル(テキストボックス)と本文(テキストエリア)を入力できるフォームです。

動画では編集機能と削除機能も紹介していますが、前に進みたいのでそれらはとりあえず一旦後回しにして、写真投稿機能を入れることにしました。

ちなみにこの当時はprogateに課金していなかったので、ドットインストールを使用しましたが、progateも投稿機能を作成する学習になっているのでこちらを使うのもいいですね。
プロゲート
今だったら、Progateを使う気がします。
動画見ながらサクッと始めたい方は、ドットインストール。じっくり基礎を学びながらやるならProgateを使うのがいいのではないでしょうか。

写真アップロード機能

次は写真投稿機能を追加します。
テキストのみのフォームと違って、写真のアップロードはちょっと面倒です。

なぜなら、テキストはそのまま文字でDBに入れられますけど、写真のような画像データは画像自体はサーバ上に置いて、DBには画像のタイトルを入れて管理するからです。

progateはこの辺もやり方を説明してくれていますが、まだやっていなかった私はとりあえず方法をググりました。
gemを使う方法と使わない方法がありますが、簡単にできそうって理由で私は「carrierwave」というgemを入れました。

(この安易にgemを選んだことで、あとで機能追加するときにちょっと詰まることになるとはまだとこの時は知る由もなかった・・・笑)

ネットの情報を元にgem自体は簡単に導入でき、あっという間に画像アップロード機能が追加できました。時間にして数時間くらいです。gemの便利なところは、簡単に機能追加ができることですね!


ファイル選択フォームができました。



投稿後は一覧ページに遷移するようになっています。写真が入るとちょっとだけレベルアップしましたね!!
デザイン考えてないのでまだ仮ですが、インスタ意識して写真は正方形にしてみました(笑)

ここまで初心者でもつまずくことなく短時間でサクサク進みました!!Railasすごい。

できたのでメンターに見せてソースレビューしてもらいました。

「インデント(字下がり)とスペースとかきちんと揃えた方がいいよ。仕事をするならこういう細かいと所も大切だよ。」とな。

インデント・・・結構なんとなくやっていてちゃんと意識していなかった・・・
確かに揃っていないと汚いですもんね。気を付けます!!!

「gemを使うものいいけど、最初は使わないやり方でやった方が勉強になるよ。後で使わないやり方も勉強してみて」とな。

あぁ、ですよね〜〜

(後ほど、progateにgemを使わない画像アップロード方法があることを知り、そこで方法は学びました。)

投稿内容の確認画面

メンター曰く「投稿確定前に、内容の確認画面があるほうがいいよね」とな。

確かに、ブログ書くときもめっちゃプレビューするし、あった方がいいなってことで、次は確認画面の作成に取り掛かります。


次回に続く

ABOUT ME
アヤカ
元メーカーOL。プログラミングに出会ったことをきっかけにIT業界へ転職。SES、コーダー、Webディレクターなどを経験し2018年秋、会社を退職し、現在は神奈川を拠点にフリーランスWebエンジニアとして活動中。 趣味は着物を着ること、写真撮影、手芸。神社、お寺、落語などなど和風ものが好き。