Ruby on rails 開発備忘録

Rails、テック関連の備忘録として。躓きとか疑問を中心に。

RSpecを実行すると、WARN Selenium [DEPRECATION] Selenium::WebDriver::Chrome#driver_path= is deprecated. Use Selenium::WebDriver::Chrome::Service#driver_path= instead.が出てきた。

表題の通りなんですが、System Specを実行しようと思いbundle exec rspecを実行するとWARNが表示されました。

f:id:Arthurxxx:20190608144245p:plain

実行環境は ruby '2.5.1'、Rails 5.2.3、Rspecが実行できる環境がセット済みです。

 

どうやらGemに入っていた、chromedriver-helperが問題のようでした。
サポート終了みたいです。インストール完了時にちゃんと書いてあった。。

参考: https://qiita.com/jnchito/items/f9c3be449fd164176efa

f:id:Arthurxxx:20190608144802p:plain

gemの記述をwebdriversに書き換えて、bundle installしたら解決できました。

f:id:Arthurxxx:20190608145033p:plain

 

以上です。

 

brew upgradeしたらbin/rails s 出来なくなった。。Sorry, you can't use byebug without Readline.

開発環境:

Mac osX Sierra 10.12、Ruby 2.5.1、Rails 5.1.6、mysql 8.0.15 

 

エラーの経緯:

Deviseでユーザーモデルを作成後、paperclipでユーザーのプロフィール写真を実装しよと思って、imagemagick入れてbundle install。ユーザープロフィールに写真をアップロードして確認すると。あれ?エラーが出る。。写真が出ない。。

updating picture Paperclip::Errors::NotIdentifiedByImageMagickError

何これ? imagemagickのバージョンが古いのかなと思って、何気なくポチっと

brew upgrade。

確認しようと思いbin/rails sする。だが立ち上がらず。

エラーログを確認。え、何これ。。

f:id:Arthurxxx:20190216220930p:plain

   Sorry, you can't use byebug without Readline. To solve this, you need to

    rebuild Ruby with Readline support. If using Ubuntu, try `sudo apt-get

    install libreadline-dev` and then reinstall your Ruby.

ググると、同じ症状が結構出てくる。

makotottn.hatenablog.com

off.tokyo

readlineのバージョンが上がったのが原因らしい。

Gemfileのgroup :development do~ endにgem 'rb-readline'を追加。

f:id:Arthurxxx:20190216223958p:plain

bundle install → 確認 bin/rails s 直った!ついでにimagemagickのエラーの方も直ってました。

安易にbrew upgradeして焦ったって話です。

 

 

「Rubyでスクレイピングを体験しよう」に参加してきました。

今週は、X-HACKさんの「Rubyでスクレイピングを体験しよう」に参加してきました。
nokogiriに関しては使ったこともあったんですが、Xpathでうまくスクレイピングできなかったり、少しモヤモヤしてたのでイベントに参加してきました。

イベントは、2時間くらいだったのですが基礎からわかりやく説明していただき
スクレイピングの基礎に関して一通り理解できて参加してよかったです。

nokogiriを使ったスクレイピングに関しては、キータとかでもかなり取り上げられてるんで今更説明の必要もないと思うのですが、簡単に言うと特定のページからHTMLを引っこ抜いてくるみたいな感じですかね。

www.sejuku.net


Googleクローリングでウェブサイトの情報とかを収集したりしてますよね。

スクレイピング・クローリングとは?

tech-camp.in

実際にchromeから右クリック検証で抜きたいwebサイトのデータ(例えばwebサイトの記事のタイトルとか)のクラスを調べて、CSSセレクターで簡単に抽出することができました。

Qiitaから記事タイトルをスクレイピングするのに使用したコード。

f:id:Arthurxxx:20190119205028p:plain

CSSセレクターでスクレイピング

実行結果

f:id:Arthurxxx:20190119205903p:plain


映画サイトから映画のタイトルをスクレイピング

f:id:Arthurxxx:20190119212023p:plain

contents.each do 以下でcss('h4')を指定。

実行結果

f:id:Arthurxxx:20190119210526p:plain

いくつか試してみましたが、個人的にはCSSセレクターの方がわかりやすかったです
今後も色々試していきたいと思います。

※Webサイトのスクレイピングはくれぐれも自己責任でよろしくお願いします。

テックピット主催、「1日でTinder風マッチングアプリ(Rails)を作りながらプログラミングを学ぶ」に参加してきました。

みなさん、こんにちは😄

今回は、週末にテックピットさんが、主催した「1日でTinder風マッチングアプリRails)を作りながらプログラミングを学ぶ」に参加してきたのでイベントの感想や使用した教材(チュートリアル)について書いておこうと思います。

 

 

まず、テックピットさんについて簡単に説明すると、技術チュートリアルを販売するサイトを運営しています。

f:id:Arthurxxx:20180918201638p:plain

実際にあるインスタグラムTinderみたいなサイトの作り方を紹介しているので非常に興味がありました。

僕は、Rails Trutorialを何周か終えて、オリジナルサイトを作ったことがある程度のレベルです。個人的な肌感覚ですが、今回学習した内容のレベルは、progateと同等、プラスαくらいのレベルだと思いました。Rails Tutorialの方が難易度が高く感じました。なので、Rails Tutoriaが難しい!!って方には良い教材かもしれません。 

f:id:Arthurxxx:20180918201734p:plain

 

今回、Tinderアプリ作成で学んだ学習内容は、簡単にまとめると以下のようなものでした。

  • Deviseでログイン/ログアウト周りを実装。
  • Bootstrap導入で見た目の生成。
  • Carrier waveとrmagickの導入で写真アップロード機能を実装。
  • プロフィール編集機能の実装。
  • jTinderでスワイプ機能の実装。

実際作成したものや、細かい内容の写真を許可なくここにあげていいのかわからないので感想だけ書きます。作業時間は3時間〜4時間くらいでした。コントローラーのアクション周りは、ほとんど書かない感じで、htmlや細かいview周りは書いた感じでした。

 

教材のよかった点

  1. 各章が短いので、少ない時間でプロダクトを完成できる。
  2. 今回の場合はTinderですが、実際のアプリに近いものの学習するということで学習意欲が出る。
  3. Progate以降で躓いている学習者には良い橋渡し。

教材の不満だった点

  1. 僕の技術レベル不足が原因なのですが、フロントエンド周りが理解できませんでした。特に今回の教材のキモの部分であるスワイプ機能。最後のjTinderは公式からコピペしたのですがjqueryが結構な量で、完全に自分の中ではブラックボックスでした。
  2. ローカル環境で作業が進む。デプロイはなし。今回はcarrierwave使ってるので実際にヘロクに画像あげる場合は、別作業が必要。
  3. テストはなし。Progateもテストって書かないですよね?
  4. 細かい設定は、ほとんど省かれてる。アプリとして完成していない。ここら辺は、自分でカスタムしてください!って事なのかな。少し物足りないのでレベルに応じた別の教材(初級者〜中級者あたり)が今後出てくると良いかも。
    フルパッケージ版(製品版)があるみたいです。こちらでより深い内容が追加されるようです。

総括:

今回のイベントでは30人以上の応募があって、イベント会場も盛況でした。教材自体もわかりやすくできていたので、楽しく学習ができました。

正式版で今回購入した教材以外で興味のあるものが発表されたらまた利用してみたいなと思いました。テックピットさん、ありがとうございました。

 

f:id:Arthurxxx:20180918202904j:plain

 

carrierwaveのファイルのサイズ制限とエラーメッセージの日本語化。

前回の続きとして、cloud9上にCarierwaveを使ってアップロードした画像のサイズ制限をしたいと思います。

開発環境: Ruby on rails 5.1.4 

画像のファイルサイズ制限は、Carrierwave1.0.0betaからsize_rangeメソッドがサポートされたので、アップローダーに追加するだけです。

 

github.com

  

1)アップローダーにsize_range追加。

今回の場合は、image_uploader.rbに 追加。

f:id:Arthurxxx:20180308162006p:plain

メソッドを追加して、指定したサイズをオーバーしたファイルをアップすると、validateが動きます。

f:id:Arthurxxx:20180308162143p:plain2)エラーメッセージを国際化対応にする。

このままだと、エラーメッセージがImage File size should be less than 5 MBと英語表記なので、日本語に直したいと思います。

 

1)config/locales/application.rbに、config.i18n.default_localeを追加する。

f:id:Arthurxxx:20180308213834p:plain

2)日本語化に必要なファイルのダウンロード。リンク先をコピペする。

https://raw.githubusercontent.com/svenfuchs/rails-i18n/master/rails/locale/ja.yml

3)config/localesにja.ymlを作成してファイルを配置する。

先ほどコピペしたファイルをja.ymlに設置する。

f:id:Arthurxxx:20180308215526p:plain

試しに空のフォームを送信すると、エラーメッセージが日本になっています。

f:id:Arthurxxx:20180308220054p:plain

Name、price、imageを入力して下さい、などエラーメッセージ内のモデルの属性名も変更したい場合は、先ほど設置したja.ymlattributesを追加して変更します。

f:id:Arthurxxx:20180308220748p:plain

全部日本語に変更されました。

f:id:Arthurxxx:20180308220844p:plain

4)しかし、先ほどsize_rangeメソッドで設定したファイルサイズ以上のファイル(5MB以上)をアップロードすると、translation missing: ja.errors.messages.max_size_errorと表示されてしまいます。

f:id:Arthurxxx:20180308221236p:plain

config/localesにcarrierwave_ja.ymlファイルを作成する。作成したcarrierwave_ja.ymlにエラーメッセージを追加する。

f:id:Arthurxxx:20180308222147p:plain

再度ファイルをアップロードすると

f:id:Arthurxxx:20180308222418p:plain

carrierwaveのエラー部分も日本語に変更することができました。

以上、今回は、carrierwaveを使ってアップロードしたファイルのサイズ制限とエラーメッセージの日本語化をやってみました。

 

 エラーメッセージの参照サイト:

qiita.com

Cloud9を使ってCarrierwaveで複数画像をアップロードする方法。

Carrierwaveを使って、複数の写真をアップロードするやり方については既にネット上に沢山出ていますが、まっさらのCloud9上に構築して色々いじってみたかったので自分用のメモとして残してみたいと思います。

 

目標 : Carrierwaveを使って1度に複数の写真をアップロードしたい!

開発環境:Cloud9

※環境構築とcarrierwaveのセッティングが終わってる場合は、1と2は飛ばしてください。

 

1: Cloud9で開発環境を構築する。

わからない方は、Rails Tutorialさんにcloud9を使った環境構築のやり方があるので、それを参考にgem rails -v 5.1.4をインストール、rails newをしてyay! You're on Rails!の画面が出る状態にしていきます。

 

2:Carrierwaveのセッティングをする。

次にcarrierwaveをセッテイングしていきます。今回は、こちらを参考にさせてもらいました。

RailsのファイルをアップロードするgemのCarrierWaveのインストール方法 - Rails Webook

上記のサイト通りにコピペして進めると写真を1枚だけアップロードできるようになっていると思います。こちらを参考にまんま進めていきます(productモデルがある状態)

f:id:Arthurxxx:20180205233705p:plain

 

3:写真を複数アップロード出来るように変更する。

前工程で1枚の写真をアップロード出来るようになったのでこれを複数に変更していきます。

公式サイトにMultiple file uploadsについて記載があるのでこれを参考にします。

 

 Product.rb

f:id:Arthurxxx:20180205231122p:plain

モデルを変更します。mount_uploadersとserialize :image, JSONに変更します。

 

_form.html.erb

f:id:Arthurxxx:20180205231356p:plain

<%= f.file_field  :image %>に :multiple => true (35行目)を追加、image_tagの部分を変更します(28~30行目)。formだと長いので、f.の形に直しました。

 

products_controller.rb

f:id:Arthurxxx:20180205232443p:plain

product_paramsを変更します。:imageを{image: []}に変更します(73行目)。

 

show.html.erb

f:id:Arthurxxx:20180205233153p:plain

_form.html.erb同様に、こちらもimage_tagを変更します(19〜21行目)

 

完成  

f:id:Arthurxxx:20180205233433p:plain

うまくいくと、複数アップロードが完成すると思います。

 

※間違いや誤字などありましたら、スイマセン。