Web Marina

日々の業務や勉強などで得た知識をアウトプットしていきます。

挫折・・・

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

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

挫折しましたorz

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

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

その1:Githubとか使う。

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

qa.atmarkit.co.jp

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

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

その2:Rails Engine

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

qiita.com

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

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

railsguides.jp

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

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

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

現状

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

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

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

できない!!なぜ!?

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

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

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

管理用サイト完成!

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

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

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

今後

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

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

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

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

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

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で画像をレスポンシブ対応にする。

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'

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の画像にリンクを貼る

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しか出てこなかったってことですかね・・・

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

気をつけねば・・・

スタイル整えるのホント難しい!!【Bootstrap】

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

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

無事一覧ページのサムネイルができました!

しかしまぁ、スタイル整えるのってホント難しいです!!

Bootstrap使っていい感じにできるとはいえ、

containerやらrowやらcolやら・・・

「だから!なんで左寄りになっちゃうわけ!!!」

と悪戦苦闘したのでメモっときます。

やりたかったこと

サムネイルを4つずつ横並びにしたい。

ハマったこと

ハマったというか・・・なんかどうやっても全体的に左寄りになってしまうんです。

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

class="container"にしてみたり、marginで調節してみたり、

でもダメでした・・・

必要だったこと

ズバリ!きちんとしたグリッドシステムの知識ですね。

まぁ、まだまだ奥は深いと思いますが・・・

で、こんな感じになりました。

<h1>index</h1>
<div class="container">
  <div class="row center">
      <% @works.each do |work| %>
        <div class="col-xs-6 col-sm-4 col-md-3">
          <div class="thumbnail">
            <p><%= link_to image_tag(work.image.thumb.url), work%></p>
            <p><%= link_to work.name, work %></p>
          </div>
        </div>
      <% end %>
  </div>
</div>
/* index */
.thumbnail {
  float: left;
  margin: 25px;
  width: 200px;
  height: 200px;
}

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

グリッドシステムについて

画面を格子状に分け、そのブロックごとに図面や文字を配置するレイアウトの手法です。

Bootstrapでのグリットシステムは、横幅を12分してコンテンツを配置します。

画面サイズに合わせてxs,sm,md,lgでそれぞれ指定しておけば、

いい具合にレスポンシブに対応してくれます。

構造としては、

<div class="container">
      <div class="row">
           <div class="col-md-4">columnA</div>
           <div class="col-md-4">columnB</div>
           <div class="col-md-4">columnC</div>
      </div>
</div>

こんな感じです。

中サイズの画面では、12分割した4つ分を使って1つのコンテンツを配置。

なので横に3つ並べる計算ですね。

詳しくはこちらをどうぞ。

bootstrap4.jp まだ完全には訳されていませんが・・・

注意点

Bootstrapのグリッドシステムでは、

デフォルトではmarginが0になっています。

もし何か微調整される方はそのことも考慮されると良いかと思います。

まとめ

Bootstrapはとってもとっても便利で格好いいですが、

やはり使用にはきちんとAPIとか読んだ方が良さそうですね。

構造とか、使うと固定されちゃうものとか、いろいろありそうなんで。

Bootstrap4のAPIはこちらです *日本語訳はまだ完全ではありません(汗)

Bootstrap3こちらは既に読みやすく訳されています。