Ruby on Railsで作った写真投稿サイト

卒業制作的なもの。(タップしてね→)


ルビー(さっきのはガーネット)

スクリーンショット

トップページ

f:id:kalikan:20161224152843j:plain

写真

f:id:kalikan:20161224152927j:plain

f:id:kalikan:20161224233357j:plain

 

アルバム

f:id:kalikan:20161224152925j:plain

f:id:kalikan:20161224152920j:plain

f:id:kalikan:20161224152922j:plain
 

ユーザー

f:id:kalikan:20161224153733j:plain
 

スマホ用

f:id:kalikan:20161224153431j:plain

f:id:kalikan:20161224153435j:plain

レスポンシブ:ウィンドウサイズに応じて表示を変える作り方。
画面の小さいスマホでは説明文を下にずらしたり、横に5枚並んだ写真を3枚に減らしたり。
 



テーマ

PictureをPickUpでpic.
投稿した写真を組み合わせたアルバムを作れるサイトが欲しいと思い提案。
もうある?
『サイトの中の1ユーザー』じゃなくて、ブログみたいに『そのユーザーのページ』がある、要は一番に来るのがユーザーがいいっていうか・・・。
 



使用したjsやgem、参考にしたもの

スライドショー:slick.js

「前の画像/次の画像を左右に表示出来る」所に惹かれて選択。
なんというかすっきりしていて使いやすかった。

agn.jp
↑サムネイルとスライドを連動させる方法が紹介されている。アルバムページで使用。
 

写真のタグ:acts_as_taggable

railscasts.com
↑タグクラウド(タグの一覧)の表示方法が紹介されている。
(使われているgemのバージョンが古いため、導入の部分のみ最新のものに書き換える)
 

ログイン機能 - テキストより

改訂3版 基礎 Ruby on Rails 基礎シリーズ

改訂3版 基礎 Ruby on Rails 基礎シリーズ

↑『草野球チームの会員制ブログ』を作りながら、Railsの基礎が学べる本。
 

画像投稿機能 - 同上

モデル『photo』(ID/タイトル/...)にモデル『photo_datum』(バイナリデータ)を関連付け、データベースに書き込む。
 

アルバムと写真の紐付け - 先生のプログラムより

モデル名を変更して流用。多対多のモデルを中間テーブル…?(よくわからないかお)
モデル『photo』『album』の他、その中間のモデル『register』(photoID/albumID/...)を作り、アルバムに写真を登録・表示させる。
写真の登録順を容易に変えられないのでもっと作り込まないといけない。
 

CSS

例えば写真のページだけ背景を黒くしたい。
前職では1ページずつ作っていたので、ページごとにclassをつけて逐一ここ黒!ここ白!って書くなりできた。しかしRailsはコントローラがページを自動で生成する。写真の一覧ページなら、photos_controllerのshow actionで表示される。どうすべきか…。

qiita.com

pic\app\views\layouts\application.html.erb

<div id="container" class="lower
 <%= "#{controller.controller_name}" %>
 <%= "#{controller.action_name}" %>">

=> <div id="container" class="lower photos show">
コントローラ users, photos, albums, ...
アクション index, show, new, edit, destroy, ...

そのページで使っているコントローラ&アクション名をclassにし、それぞれスタイルシートを当てて表示を出し分けた。
 

お問い合わせフォーム - ActionMailer

導入がかんたんですぐメール来てrailsすごい…!と思った。
 



気づいたこと、辛かったこと

sassはrubyで動いてる(?)

sassはcssをめっちゃ書きやすくするもの。めっちゃ使うのでへー!と思った。
 

一から何かを作るのは難しい

私は体系的に何かを学んだことがなく(ひきこもり過ぎてろくに勉強していない)、これを期に一つの言語をマスターして新しい何かを生み出せるようになりたい、そう思ったのですが私には難しすぎてさっぱりそこまで行ける気がしなかった。
既存のものを拝借して組み合わせるまでしかできない。
htmlは難しくない(画像!って書けば画像が出てくる)のである程度はどうにでもなるけど・・・
 

チーム戦

 出版業界にいた主婦の方と二人で作りました。
主に私が苦手なデザイン方面を手がけてくれて、また手綱をとらなきゃいけない私がぐずっている間にも真摯に地道に進めてくださっていて本当に心強かった。

 最近の小学校は二学期制だとか、この年代はやっぱり女の子のほうが進んでいて君の名は。が流行ってるとか、インフルエンザの予防接種が何回かに分かれていて大変だとか、普段あんまり聞けない話も聞けて楽しかった。 

 本当はもう一人いたのですが、もー授業中にツイッターやらゲームばっかやってたせいなのかなに頼んでもなにも返ってこないし、の割にイヤに元気で同じ場所にいるのがあんまり辛くて逃げそうになった。私には彼のように、ただ座ってるだけでお金もらって帰る毎日を送る胆力はない。いつまでも教室に現れずいらん手間をかけるよりはよほどいいんだけども。仕事と違って上司がいないので、困った時に頼れる人がいなかった。先生に頼ればよかった。私は自分勝手で人に頼るのがうまくない。

 別チームの方々、前職が私と同じWeb制作だった方にはメールを頂いたり、なんか夜中に山を走ったりする漫画の話をした。ずっとプログラミング畑にいたおじさまには「世の中にはああいう人もいる、デタラメすぎて社員全員のボーナスふっ飛ばした奴とかいた、でもこっちからは辞めさせられないだよねー」とか色々励ましの言葉をもらったり、小説の話をした。ハードウェアを開発していて、老後の楽しみにソフトウェアもやってみようかというおじいさまは、凍るから夜はサイドブレーキ引かないほうがいいぞと教えてくれたり、先生は髪型的にお坊さんなのでは?という説を立てスピーチの時間に京都ネタを振っていた。先生はダレカタスケテーって月一くらいで言っていたので乗っかればよかった。普段全然人としゃべらないので本当に楽しかった。