読者です 読者をやめる 読者になる 読者になる

主婦がアプリをリリースするまでの軌跡

自宅でお小遣い稼ぎをしたい主婦がアプリリリースを目指すブログです。

完成しました〜!!

Ruby on Rails アプリ作成 プログラミング

f:id:song-of-life1352607:20170323231451p:plain

MyWeb

いやぁ・・・長かったです。

たったこれだけのサイト作るのに1ヶ月かかってしまいましたorz

しかもほとんどtutorialパクっただけなのに・・・

しかし何はともあれ、無事完成し、デプロイも完了しました!

まだまだ改良の余地が満載なので、

今後少しずつでもよくしていこうと思います。

てか、仮でつけてた名前そのままであげちゃった・・・w

さて・・・次はアプリ作成に挑んでみようか?

挫折・・・

f:id:song-of-life1352607:20170221152659j:plain

管理用サイトを作ってからず〜〜〜〜〜〜っとDBの共有化を試みておりましたが・・・

挫折しましたorz

とはいえ、せっかく調べたので、

その方法については記しておこうと思います。

その1:Githubとか使う。

こちらの回答に書かれていました。

qa.atmarkit.co.jp

途中まで試しましたが、「あれ?これってマイグレーションしないと反映されない?」と思ってやめました。

勘違いだったらすみません・・・

その2:Rails Engine

最初にその案を知ったのはこちらです。

qiita.com

「ちょ〜面白そう!!」と思って勉強しました。

勉強するなら公式サイトですよね!

railsguides.jp

すっごく面白かったです。というか興味深かったです。

しかし、付け焼き刃でできるような代物ではありませんでした・・・

ですがこれはとても楽しそうだったので、ひと段落ついたらきちんと勉強してみようと思います。

現状

ここまででだいぶ時間をかけてしまったので、今回はここで挫折し、

おとなしく閲覧用と管理用を一つにまとめました。

そして今。一応の完成を見たので、Herokuを使って本番環境にうp!!

できない!!なぜ!?

というところでコケてます・・・

なかなか思い通りにはいかないものですね。

でもコケた中でも色々学べてるので、またそれはおいおい書き綴っていこうと思います。

管理用サイト完成!

Ruby on Rails アプリ作成 プログラミング

f:id:song-of-life1352607:20170221152659j:plain

ちょっと空いてしまいましたが、

管理用サイトが完成しました。

構成

  • Log_in

  • Profiel

  • Work

    • Index
      • Show
        • Edit
    • Create
  • Contact

    • Index
      • Show
  • Log_out

最初はこんな感じ。 f:id:song-of-life1352607:20170312080419p:plain

ログインをしたらメニューが表示される仕様です。 f:id:song-of-life1352607:20170312080631p:plain あ。ログインしたのにアイキャッチの画像変更するの忘れてました・・・

投稿フォームはこんな感じ。 f:id:song-of-life1352607:20170312080748p:plain

自分しか使わないのでかなり雑です・・・

でも今後の技術向上も含めて少しずつ綺麗にしていければと思っています。

今後

この後はいよいよ閲覧用と管理用のデータベースを共有できるようにします。

ここから先は完全にチュートリアルになかったことなので、

ちゃんとできるかかなり不安ですが・・・

グーグル先生に助けてもらいながら一つずつやっていこうと思います。

テストはきちんと工程を考えましょう・・・

Ruby on Rails アプリ作成 プログラミング

f:id:song-of-life1352607:20170221152659j:plain

こんにちは、マリンです。

現在は管理用サイトのポートフォリオ編集機能を実装中です。

ここまででテストがいまいちうまくいかなくてハマりました。

ハマった点

ポートフォリオの投稿と編集をそれぞれ失敗ver.と成功ver.でテストするが、

データ送信後の画面遷移がうまくいかない。

原因

テストにログインの工程を入れていなかったことが原因でした。

テストの流れとしては

  1. ログイン用のパスを開く

  2. ログインする

  3. ログイン中であることを確認

  4. 投稿用のパスを開く

  5. データ送信

  6. 成功なら詳細ページにリダイレクト、失敗のときは投稿ページを再描画。

本当はもう少し細かいですが、ざっくりこの流れなのです。

しかし1〜3を書いていなかったのですね。

リダイレクトのときに出たメッセージで気づきました。

Expected response to be a redirect to <http://www.example.com/works/775365376> but
 was a redirect to <http://www.example.com/login>.

renderで再描画するだけだと

expecting <"works/edit"> but rendering with <[]>

と出てくるだけなので

「え?何?」と全く理解できなかったのですが、

URL出てきたおかげでやっと解決しました・・・

まとめ

ログインで使える機能をきちんと明示したりすればもっと

早く気づいたかもなんですが・・・

なんせずくなし(←長野の方言)なので

「ま、ログインしなきゃ何もかも見られないようにしちゃえばいいや!私しか使わないしw」

なんてログイン=メニュー表示にしたせいで見落としたんですね・・・

テストを書くときにはきちんと一連の流れを考えて書かなきゃダメですね。

そしてコンピューターには1から10まで事細かに指示しなきゃいけない!

ってことも忘れてました・・・笑

Bootstrapで画像をレスポンシブ対応にする。

Bootstrap Ruby on Rails アプリ作成 プログラミング

f:id:song-of-life1352607:20170221152659j:plain

こんにちは、マリンです。

閲覧用サイトもそろそろ完成です。

今微調整を行っているところですが、

今回はBootstrapを使って詳細ページの画像を

レスポンシブ対応にしました。

やりたかったこと

画面を小さくしても画像がはみ出ないようにしたい。

現状ではその他の要素はレスポンシブに代わってくれていましたが、

画像だけがはみ出たままだったので、

f:id:song-of-life1352607:20170306002255p:plain

画面サイズに合わせてきちんと全体が見えるようにしたかったのです。

方法

タイトルの通り、Bootstrapさんにチャチャっとやっていただきました。

Bootstrap

まずはアプリケーションでBootstrapが使えるようにします。

1.Gemインストール

gem 'bootstrap-sass'

Gemfileに上記を記入して$bundle installです。

2.スタイルシートにinclude

私はチュートリアルの時同様にcustom.scssを作ってそこに書きました。

@import "bootstrap-sprockets";
@import "bootstrap";
.
.
.

設定はここまで。あとは普通に使えます。

画像をレスポンシブにする

1.対象の画像にimg_responsive

<%= image_tag(@work.image.url, class: "img-responsive") %>

私の場合はポートフォリオの画像だったのでこのようになりました。

f:id:song-of-life1352607:20170306002340p:plain これで終わり。なんともお手軽です!

素晴らしすぎる!Bootstrap!!

gem 'rails-controller-testing'

Ruby on Rails アプリ作成 プログラミング

f:id:song-of-life1352607:20170221152659j:plain

こんにちは、マリンです。

Rails Tutorialの時こんなの入れたっけ?

と覚えがないのですが・・・

今回Contactページのintegration_testでひっかかったのでメモっときます。

ハマった点

問い合わせの内容に不備があった場合、

renderでもう一度投稿ページが表示されるか確認するテスト。

この実装に`assert_template'を使ったら、

NoMethodError: assert_template has been extracted to a gem. To continue using it,
        add `gem 'rails-controller-testing'` to your Gemfile.

とエラーが出た。

対策

書かれてる通りですが、

gem 'rails-controller-testing'をインストールしました。

補足

Rails5から一部のメソッドを使うのに必要になったそうです。

tech.grooves.com

どれに必要かは詳しく調べていませんが、

assert
assert_not
assert_select
assert_response

なんかはなくても大丈夫でした。

今の所分かってるのは、

assert_template
assigns

はないとダメみたいですね。

サムネイルのCarrierWaveの画像にリンクを貼る

Ruby on Rails アプリ作成 プログラミング

f:id:song-of-life1352607:20170221152659j:plain

こんにちは、マリンです。

サムネイルからのリンクにちょっと手間取ったのでメモります。

やりたかったこと

一覧ページで使っている、CarrierWaveでアップロードしたサムネイルをクリックすると、その詳細ページに飛ぶ。

方法

CarrierWaveの設定を変える

uploaders/〇〇_uploader.rbにはサムネイル用に画像をリサイズする設定があるので、

コメントアウトを外してお好みのサイズに設定してください。

   version :thumb do
     process resize_to_fit: [200, 200]
   end

サムネイルをつくる

1.リンクの要素をBootstrapのthumbnailclassのdivタグで囲う。

<div class="thumbnail">
       <link_to>
</div>

2.link_toにCarrierWaveの画像を設定する。

<div class="thumbnail">
       <link_to image_tag(@work.image.thumb.url), @work>
</div>

使う画像が最初に設定したCarrierWaveのthumbであることを、

忘れず設定してください。

まとめ

CarrierWaveといい、Bootstrapといい、

サムネイル用の設定まできちんと用意されているんですね!

至れり尽くせりです。

今回一番ハマったのは、

image_tagを付け忘れていくらやっても文字列化したURLしか出てこなかったってことですかね・・・

でもそういうケアレスミスのせいで深く考えすぎてしまうので、

気をつけねば・・・