「DIVE INTO CODE」学習記録 18日目
こんにちは。
18日目。ブログアプリに画像アップロード機能を実装。インスタクローン作成完了。
学習内容
【画像UPLOAD機能作成】
- 画像UPLOADシリーズ課題課題（画像アップローダー機能作成）
【FHASE3大課題】
- InstagramClone作成
感想
今回は前回から引き続き、画像アップロード機能作成からです。
今まで作ってきたブログアプリにさらに画像アップロード機能をつけるというもの。
いよいよインスタが近くなってきました。ていうか画像アップロード機能つけたら、
サービスとしてはインスタと基本的には同じものが提供できるアプリケーションになります。
課題パッと見た感じヒントもほとんどなかったので難しいな、って印象だったんですが、
意外とすんなり実装可能でした。細かい部分の設定はできてないですけど。
ログインとアソシエーションがFHASE3の山場だったんだと思います。
画像アップロード機能の課題合格条件は、
- blogに画像が投稿できること
- userアイコン画像が投稿できること
の2点です。
最初見たとき、ユーザーアイコンが難しいと思ってました。
usersコントローラのshowアクションで現在ユーザーマイページを作っているのですが、
そのshow Viewにアイコン投稿できるようにしなければならないと考えていたためです。
そうなると、
どのコントローラでcreateアクション使ったらいいんだ、
ってなります。
blogsコントローラのcreateアクションはもちろんブログ作成の際に使っているし、
usersコントローラのcreateアクションはユーザーアカウント新規作成で使っています。
ユーザーアイコンの新規作成のためには、
もう一個user_iconコントローラ作ってcreateアクションしなきゃいけないのかな、
って考えてしまっていたんですが、そんなことはなかったです。
ただただ、userコントローラのアカウント新規作成時に、アイコン選択のための画像アップローダをつけてやれば、
それで解決でした。
新規作成が「ブログ」か「ユーザーアカウント」かの違いってだけで、やることは全部一緒。
「CarrierWave」と「mini_magick」というgemが必要になるので、まずはインストール。
ブログ画像用のアップローダとアイコン画像用のアップローダをそれぞれ作成。
それぞれ対応するModel内に、
作成したアップローダ（ImageUploader）と、対応するテーブルカラム（:image）を「mount_uploader」にて指定。
注意すべきはどちらもデータベース。
usersテーブルもblogsテーブルも「:image」のカラムがついているか確認。
カラムがないと、いくらアップローダ搭載したところでデータベースに画像パスを保存しておけません。
とりあえずマイグレーションファイル作成からのカラム追加。
あとはそれぞれのViewに、form_withの「file_field」という画像アップロードの際に必要なフォームを記入する。
終わり。
どちらかというとアソシエーションとかの方が難しかったです。
画像アップロード機能をクリアしたので、いよいよInstagramClone作成に入ります。
課題合格条件は以下の通り。
- Railsアプリケーションであること
- HTML,CSS,bootstrapを使用して、現実のInstagramに似せること
- pictureの投稿・投稿確認・編集・一覧表示・削除機能があること
- ログイン機能があること
- pictureの投稿確認メールが届くこと
- 誰がPictureを投稿したか表示すること
- 画像と文章が投稿できるようにすること
- pictureのお気に入り機能を搭載し、一覧画面を作成すること
- 404,500のエラーページを実装すること
一つずつ確認しました。
現状作成したブログアプリの段階で、
6番以外は全て条件満たしています。
つまり6番の
「誰がPictureを投稿したか表示すること」
さえ機能として付け加えればもうそれで課題クリアです。
しかもこれ、アソシエーションですわまた。@blog.user.nameですわ。
ブログからユーザー情報特定してユーザーネーム引っ張り出してくるやつです。
すぐにブログ一覧画面に付け加えて、合格条件達成。
余力があったのでスマホデザインでも綺麗に見れるようレスポンシブに挑戦。
以前よりはマシになりましたが、トップ画像のスマホ対応がややこしくて実装できませんでした。
また今度挑戦します。
インスタ偽物もクリアし、残すところ卒業課題のみになってしましました。
ちょっと燃え尽きてます。気持ち的に。
今後の勉強についてですが、
一旦卒業課題は温めることにします。
卒業課題終わった後の方向けにFHASE4というさらなるカリキュラムがあるので、
そっち挑戦しようと思ってます。
内容的にはrailsの応用機能がメインです。
「高度な機能実装」とか見出しであるので見るからに難しそうですが、
これも全部やって作った土台で、卒業課題制作に挑みたいと考えてます。
作成したインスタ偽物をherokuにデプロイしました。
こちらです。
P. Y. M. -Post Your Masterpiece!
見た目正直インスタに全く寄せてません。
「 P. Y. M. 」
読み方はもちろん、「ペーヤーメー」です。
勝手に自分の中で「写真ガチ勢」をターゲットにし、
写真家の方とかが撮影した傑作の一枚を投稿するようなアプリをテーマにしました。
スマホだとトップ画面が本当に残念な感じなんですが、ログインもできますし、マイページから写真も投稿できます。
アイコンも設定できます。（ただしアイコン編集機能はつけてません。）
自分のアドレスでサインアップして投稿すれば投稿確認のメールも届きます。
メールアドレス aaa@aaa.com
パスワード aaaaaa
でログインできますので、よかったら見てください。
以上ありがとうございました。