Ruby好き非エンジニアのブログ

〜Ruby on Railsの学習記録〜

5段階評価のレビュー機能を実装。〜ratyの導入〜

今回はレビュー機能
5段階の評価を実装できるratyというプラグインについてメモ。

まずはこちらのgithubページにアスセス。
GitHub - wbotelhos/raty: :star2: jQuery Raty - A Star Rating Plugin


f:id:Jyoko:20170604152139g:plain
上記のように、画面右側にある「Clone or download」のプルダウンを選択し、「Download ZIP」をクリックしてコードをダウンロードします。

ダウンロードをしたら、解凍したファイルを、
demo>imagesの順に開き、
f:id:Jyoko:20170604143816g:plain
この星形のものを3つコピーしてみます。
そして、app>assets>images等、画像を保存してあるフォルダに貼り付けします。


続いて、再度先ほど解凍したratyフォルダに戻り、
libフォルダを開いて、この中のjquery.raty.jsをコピー。
f:id:Jyoko:20170604144316g:plain

そして画像の時と同様、
app>assets>javascripts等のjavascriptが入っているフォルダに貼り付けします。

あとは同githubページのUsageあたりを参考に、f:id:Jyoko:20170604145227g:plain

<div id="stars"></div>
.
.
<script type="text/javascript">
  $("stars").raty({
  	path: '/assets',
  });
</script>

などと表示するとスターマークが表示されるようになります。

f:id:Jyoko:20170604151827g:plain

マウスオーバーで簡単にレビューができてUIもいい感じ。
これだけではまだ使い物になりませんが。。

下記のようにオプションがたくさんあるようなので、いろいろと試してみたいと思います。
f:id:Jyoko:20170604151931g:plain


ということで、今日はこの辺で。

Coffee Scriptって何か美味しそう。。

プログラミング言語の一つにcoffee script(コーヒースクリプト)というのがある。
自分とは全く関係無い言語かなーと思ってたら、少し使う機会があったのでメモ。

言語云々よりもまず名前が気になる…
コーヒー好きからしたら何それ美味しいの?!という名前ですが、名前の由来を調べてもいまいちわかりませんでした。。(T_T)

Wikipediaによると、
CoffeeScriptプログラミング言語のひとつである。コードはJavaScript のコードに変換される。
RubyPythonHaskell [1] から影響を受けたシンタックスシュガーの導入により、JavaScript に比べ簡潔さと可読性を向上させたほか、配列内包 (Array comprehensions) やパターンマッチといった機能を追加している。」

また、http://coffeescript.org/を見てみると、
CoffeeScript is an attempt to expose the good parts of JavaScript in a simple way.
とあります。

要はJavascriptのいいとこ取りをした簡易言語と言ったところでしょうか。
ちなみに拡張子は「.coffee」


例としては、javascriptで良く出てくる$(function()…という下記コード。

$(function() {
  // 初期化のためのコード
});

これをcoffee scriptで書くと

$ ->
  # 初期化のためのコード

となる。
「function」 キーワードが 「->」 で置き換えられていますね。
これだけで凄い簡単そうなイメージ。
また、インデントが重要らしいので、このあたりの記述の仕方も注意したいところです。

使い方等は、詳しい方の記事をご参照ください。
qiita.com

qiita.com


で、結局知りたかった名前の由来がわからずモヤモヤとしたままですが、(知っている方いらっしゃれば是非教えてください)とりあえず先に進み、ここではSublime TextでCoffeeScriptを使う際にシンタックスハイライトでコードを見やすくする方法だけ記述しておきます。

何もせずに記述をすると下記のように真っ白な状態。
f:id:Jyoko:20170422172205g:plain

これに色分けをして見やすくします。

まず、cmd shift pでinstallpackageを選択
検索窓が出てくるので、coffeescriptと入力。
f:id:Jyoko:20170422172345g:plain
上記の中で上から4つ目のBetter CoffeeScriptを選択。

そしてこの画面が出たらinstall完了。
f:id:Jyoko:20170422172505g:plain

で、前回真っ白だった画面を見てみると、
f:id:Jyoko:20170422172833g:plain

一気に見やすくなった!
ただ真っ白なコードだと分かりにくいし気分も萎えますが、色分けされていると分かりやすく、気分も上がります♪

ということで、今回はここまで。
とりあえず使いながら学習していきます♪


参考:
github.com

作業効率UP!プログラミング初心者が知っておくと便利なコマンドまとめ。

プログラミングを学び始めた当初一番知りたかった情報は、エンジニアの方々が作業効率化のために活用しているショートカットキーや便利なコマンドは何か。ということ。

チュートリアルや参考書には「答え」は書いてあっても記述の「流れ」は書いてありません。
この「流れ」を知ることで作業効率が格段にアップするので、今回は自分が便利だなーと思ったものをメモしておきます。

まず開発環境は、
PC:Mac osX
エディター:SublimeText
です。


それでは早速。



◆属性入力の省略

div.○○ + tab //入力

<div class="○○"></div> //表示


viewファイル等を作成する時に必ずでてくるclass属性やタグなど。
これをいちいち入力していたらとても大変。
そんな時は「div.○○」と書いてtabキーを押すと、

<div class="○○"></div>

と一気に表示されるのでとても便利です。
また、開始タグから終了タグまでセットで記述されるため、エラー防止にもなります。

このやり方で、

「div.container + tab」 → <div class="container"></div>
「div.row + tab」 →  <div class="row"></div>
「div.col- + tab」 → <div class="col-"></div>

※col-以降を入力すると上手く反映されないので、以降は手入力が必要

同様に、

「li + tab」 → <li></li>
「section + tab」 → <section></section>
「aside + tab」 → <aside></aside>
「h1 + tab」 → <h1></h1>
「a + tab」 → <a href=""></a>

などなど、様々な場面で活用できます!



コメントアウト

コメント + 「command + /(スラッシュ)」

# コメント
// コメント
<!-- コメント -->

いろんな場面でメモ書きをすることがあるかと思いますが、メモ書きのあとに「command + /(スラッシュ)」で#○○や//○○などのコメントアウトに自動変換してくれます。


◆コード検索

command + f

ブラウザでGithubやドキュメントなどを見ている時、特定のワードを探そうとするととても苦労します。
そんな時は「command + f」を押すと検索窓が表示されるので、そこに探したいワードを入力すれば、自動で検索し、色づけしてくれます。
エラーやgemなどを追加する時色々調べたりしますが、調べる手間を省くのも効率化の一つ。
意外と重宝します。


◆HTMLのソースコードを見る

command + shift + c  

自分が書いたコードがHTMLでどのように変換されているのかや、要素を確認する時に使います。
GoogleChromeであれば、「その他のツール」→「デベロッパーツール」でもコードを閲覧することができますが、作業工数を減らすことができるので覚えておくとこれも便利です。


◆アプリ切り替え

command + tab

エディターやブラウザ、データベースやターミナルなどなど、開発時にはいろんなアプリケーションを同時に開くことがあります。
エディターにコードを入力して、ターミナルでサーバーを起動して、ブラウザで閲覧して、またエディターを開いて…
この切り替え作業はかなり手間がかかるため、できる限り省きたいもの。
そんな時は「command + tab」で簡単に切り替えられます。
また、F3などのファンクションキーでも簡単に切り替えられるので、自分のやりやすい方法で切り替えをすると良いかと思います。


◆新規tabを開く

command + t

新しいタブを開きたい時には「command + t」が便利です。
ブラウザでも使用できますが、用途としてはターミナルで使うことが多いです。
ローカルで開発している時、「control + c」でわざわざサーバーを切らずに、そのまま新しいコマンドを入力できるので便利です。



◆ダブルクリック・トリプルクリック
ダブルクリック→単語選択
トリプルクリック→一行(文)選択

こんなの当たり前でしょ?と思うかもしれませんが、単語や文をコピーする時、はじめは例外無くカーソルで選択していました。。
プログラミングをしているとコピーは多用するので、この部分の作業がカットできれば大幅に効率があがります。


今回は以上です。
こんな初歩的なことですら、最初は知らずに黙々と作業していました。。
その他ショートカットキーなどは挙げればキリがありませんが、作業効率UPはプログラミングには欠かせません。

まだまだ気づいていないことも多いかと思うので、また見つかれば随時更新していきます。

ではでは。

突然ログアウトできなくなった時の対処法〜Couldn't find User with 'id'=sign_out〜

突然ログアウトが出来なくなったときの対処法メモ。
ものすごく簡単に解決できました。

まず、ログアウトしようとした時のエラー画面はこんな感じです。
f:id:Jyoko:20170203065729g:plain

今まで正常に動いていたのに、
いつからだろう…?

とりあえず

Couldn't find User with 'id'=sign_out

と出ているので、早速そのまま検索。

stackoverflowで似たような事例がありそうなので、クリックします。
stackoverflow.com

中を覗いてみると、まず質問が書いてある。
f:id:Jyoko:20170204071242g:plain
サインアウトリンクが機能しなくなっているとのこと。

そして下に行くと何個か回答があります。
今回は下記が参考になりました。
f:id:Jyoko:20170204073537g:plain

ふむふむ。

//= require jquery
//= require jquery_ujs

この順番や表記の仕方によってエラーが出る模様。

早速自分のjavascriptファイルを見てみると

//= require jquery
//= require dropzone
//= require bootstrap-sprockets
//= require jquery-ui/widgets/datepicker
= require jquery-ui/widgets/datepicker-ja
//= require toastr
//= require jquery_ujs
= require turbolinks
//= require_tree .

と記述されています。
この中でまず怪しいところは…

= require jquery-ui/widgets/datepicker-ja
= require turbolinks

の部分。

ここを削除して、ブラウザで再度ログアウトをしてみると…

なんと無事ログアウトできました!
今回はすごい簡単に解決。

通常javascript.jsでは//=が必要ですが、この2つは一時的に使用しないようにしていたので、コメントアウトのつもりで//を省いていました。
それがログアウト部分に悪影響を及ぼしていたようです。

変なことはせず、いらないものはきちっと削除した方が良いですね!


今回もstackoverflowの記事がとても参考になりました。
エラーが出ても焦らず、検索すると大体他の方も同じ経験をしているので、stackoverflow等を活用できるようになるとより楽しくなります♪

まだわからない事多いですが、引き続き進めていきます。

ではでは今日はこの辺で。

Bootstrap(Jambotron/ジャンボトロン)で画面いっぱいに画像を表示させる方法

今回はJambotronの使用例のメモ。

※Jambotron(ジャンボトロン)とは、画面いっぱいに画像等を表示させるためのBootstrapのcomponentsの中の一つです。

サンプルはこんな感じ。
f:id:Jyoko:20170128222939g:plain



それでは、あくまでも一例ですが、使用の流れを書いていきます。
※Bootstrapの使用環境が整っていること前提で進めます。


まずは検索エンジンで「jumbotron bootstrap」と検索。

下記サイトをクリック。
f:id:Jyoko:20170128223322g:plain

上記サンプル画面のすぐ下にソースコードが書いてあるので、まずは全てコピーし、適当なページ(nabvarが記載されているページ等)にペースト。

<div class="jumbotron">
  <h1 class="display-3">Hello, world!</h1>
    <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <hr class="my-4">
    <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
    <p class="lead">
      <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
    </p>
</div>

上記コードはサンプル画面そのままなので、下記のように不要な部分を削除します。

<div class="jumbotron">
  <h1 class="display-3">Hello, world!</h1>
</div>

そしてこのコード内にヘッダーやナビゲーションのコードを追加。

<div class="jumbotron">
  <h1 class="display-3">Hello, world!</h1>
  <header class="navbar navbar-fixed-top navbar" >
  <div class="container">
    <%= link_to "Jammies", root_path, id: "logo" %>
    <nav>
      <ul class="nav navbar-nav navbar-right">
        <li><%= link_to "Jammiesホーム", root_path %></li>
        <li><%= link_to "使い方", '#' %></li>
        <li><%= link_to "お知らせ", '#' %></li>
      <% if logged_in? %>
        <li><%= link_to "マイページ", current_user %></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            アカウント <b class="caret"></b>
          </a>
          <ul class="dropdown-menu">
            <li><%= link_to "アカウント情報", current_user %></li>
            <li><%= link_to "プロフィールの編集", edit_user_path(current_user) %></li>
            <li class="divider"></li>
            <li>
              <%= link_to "ログアウト", logout_path, method: "delete" %>
            </li>
          </ul>
        </li>
      <% else %>
        <li><%= link_to "会員登録", signup_path %></li>
        <li><%= link_to "ログイン", login_path %></li>
      <% end %>
      </ul>
     </nav>
   </div>
 </header>
</div>


(変更前)
f:id:Jyoko:20170128225814g:plain

(変更後)
f:id:Jyoko:20170128230215g:plain


次はapp/assets/imagesに好きな画像(今回は1920×1214のサイズの画像を使用)を入れ、
app/assets/stylesheets/application.scss等、レイアウトを記述しているページにて先ほど入れた画像を呼び出します。

.jumbotron {
	padding-top: 0px;
	background: url(scene1920.jpg);
	background-size: cover;
	background-position: 50% 50%;
	height: 400px;
}

できあがったイメージはこんな感じになります。
f:id:Jyoko:20170128233054g:plain

その他header/navbar等含めたレイアウトはお好みで調整してください。

それでは今日はこの辺で。

参照:
Jumbotron · Bootstrap

toastrの導入

前回まで開発の流れをひとつひとつ備忘録として残してきましたが、細かくブログに書こうとするとかなり時間がかかるので、今回からは開発の過程で触れたコトを切り取って記していきます。



今回はtoastrの導入。

検索エンジンで、

toastr gem

と入力していただくと、下記GitHubのページが出てくるので、クリックしてください。
github.com


クリックするとこんな画面に飛びます。
f:id:Jyoko:20170113233501g:plain


そもそもtoastrって何?という方は、まずは見てみるのが一番!
画面を少し下にスクロールしていただくと、

Demo
Demo can be found at http://CodeSeven.github.com/toastr

と書いてあるところがあるので、この
http://CodeSeven.github.com/toastr
をクリック。

クリックするとまたまた同じような内容で、

Demo
Demo can be found at http://codeseven.github.io/toastr/demo.html

と書いてある画面が出てくるので、
今度はこの中のリンクをクリック。
http://codeseven.github.io/toastr/demo.html


そして画面内の「Show Toast」ボタンをクリックすると、
f:id:Jyoko:20170113234029g:plain
上記のように画面右上にメッセージが浮かび上がってきます。
これがtoastr。

これは、ログイン機能を実装した際、
「ログインしました」
「ログアウトしました」
など、その時々の状態を知らせるためのメッセージを表示させる際に使用します。


それでは早速導入していきます。
先ほどのtoastrのGitHubページに戻っていただいて
下記Quick Start部分を見てください。
f:id:Jyoko:20170113235400g:plain

まずは、この流れにそって

gem 'toastr-rails'

をコピーして、Gemfileに貼付け。

続いてターミナルで

bundle

を実行。

次に、下記を見てみると、
f:id:Jyoko:20170114000118g:plain
application.css と application.jsに、

*= require toastr

//= require toastr

を追加と書いてあります。

これを参考に、app/assets/stylesheets/application.scssに

@import "toastr";

を追加。
※今回は拡張子がscssなので、scss用に書き換えています。

続いて、app/assets/javascripts/application.jsに

//= require toastr

を追加。


あとはjavascriptでtoastrを呼び出せば完了。
f:id:Jyoko:20170114005702g:plain
上記GitHubのドキュメントを参考に、

app/views/layouts/application.html.erb

<% unless flash.empty? %> //flashにメッセージがある時
    <script type="text/javascript">
      toastr.info('更新しました')
    </script>
<% end %>

などと書いて終了です。
これで、何かを保存した際などに
「更新しました」の文字が浮かびあがってきます。
上記はあくまで一例ですので、表示させたい内容により書き換えてみてください。



今回は以上です。

自分が学習する中でGitHubのドキュメントの見方がわかることで理解が進んだので、少しですがその流れも書いてみました。

記事内で間違っている部分やもっと良い方法をご存知の方がいらっしゃれば是非教えてください。

では今日はこの辺で。

画像アップロード

前回の続きですが、プロフィール画像をアップロードする機能を実装していきます。

今回から少しずつHerokuを使っていくので、アカウント登録がまだの場合は下記など参照の上、Herokuの登録と、Herokuをコマンドラインからコントロールできるようにするための「Heroku toolbelt」のインストールをおこなってみてください!

Heroku初心者がHello, Herokuをしてみる - Qiita

※HerokuとはPaaS(Platform as a Service)と呼ばれるサービスで、
アプリケーションを実行するためのプラットフォームです。


では登録が済んだらアプリケーションの作成。

$ heroku create (Herokuアプリケーション名)

※入力時にHerokuのメールアドレスとパスワードを求められるので入力してください。


アプリケーションを作成したら、下記のコマンドを実行してCloudinaryのアドオンを適用します。
参照URL:
Rails & CarrierWave integration | Cloudinary

Cloudinary + Carrierwave + Heroku + Railsでの画像を手軽に利用する方法 - Qiita

$ heroku addons:create cloudinary:starter

そして、Gemfileに

gem 'cloudinary'
gem 'carrierwave'

を追加し、bundle installを実行。

下記コマンドで画像のアップローダーを作成。

rails generate uploader Avatar

出来上がったapp/uploaders/avatar_uploader.rbにアップロードに関する記述をしていきます。

if Rails.env.production?
  include Cloudinary::CarrierWave
else
  storage :file
end


process :convert => 'png'
  process :tags => ['avatar']

  version :standard do
    process :resize_to_fill => [100, 150, :north]
  end

  version :thumbnail do 
    process :resize_to_fit => [50, 50]
  end
  ・・・
  def public_id
    model.id
  end

※「Rails.env.production?」・・・Railsがproductionモードで動いている時にtrueを返すメソッド

続いて、Userモデルにavatarのカラムを追加します。

$ rails g migration AddAvatarToUsers avatar:string

$ rake db:migrate

ついでに、
app/controllers/users_controller.rbのstrong paramaterにavatarを追加。


app/models/user.rbに下記を追加。

attr_accessor :avatar
・・・
mount_uploader :avatar, AvatarUploader

プロフィール編集のフォームに画像登録を追加。
app/views/users/edit.html.erb

<div class="avatar_edit">
  <%= image_tag(@user.avatar.url(:thumbnail), :width => 80, :height => 80) %>
  <%= f.label :画像登録 %>
  <%= f.file_field :avatar %>
</div>

※file_fieldヘルパーでファイルボックスを作成できます。

app/views/users/show.html.erb

<%= image_tag(@user.avatar_url) %>

を追加。


あとは、cloudinaryのチュートリアルを参考に、

cloudinaryにてcloudinary.ymlダウンロード
configに保存。

environment.rbに下記を追加

config.gem 'carrierwave',:version => '〜>0.4.10'
config.gem 'cloudinary'


見た目は置いておいて…出来上がった画面はとりあえずこんな感じです。
f:id:Jyoko:20161106155908g:plain

ここで「ファイル選択」→「更新」をするとエラー発生。

UsersControllerのUpdateメソッドの下記部分。

if @user.update_attributes(user_params)

convertのメソッドがありませんよ?とのことでした。

public/uploads/tmp/****内にuploadした画像は保存されている模様。
保存→コンバート→表示の過程でエラーが発生しているのかなーと思いつつ。。

とりあえずconvert部分の記述を一度コメントアウト
app/uploaders/avatar_uploader.rb

#process :convert => 'png' 
#process :tags => ['avatar']

#version :standard do
  # process :resize_to_fill => [100, 150, :north]
#end

#version :thumbnail do 
  # process :resize_to_fit => [50, 50]
#end
  
# Create different versions of your uploaded files:
  # version :thumb do
  # process :resize_to_fit => [50, 50]
# end

そして、上記でversion :thumbnailをコメントアウトしたので、
app/views/users/edit.html.erbの:thumbnailも削除。

<%= image_tag(@user.avatar.url(:thumbnail), :width => 80, :height => 80) %>
↓
<%= image_tag(@user.avatar.url, :width => 80, :height => 80) %>

これで再度アップロードを試してみると、無事マイページに画像が表示されました。
f:id:Jyoko:20161106160800g:plain

まだまだエラー盛りだくさんですが、画像が表示されたのでとりあえず今日はこの辺で。
見た目も悪いので、徐々にレイアウトも調整していきたいと思います。



追記:
前回更新からかなり日にちが空いてしまったのでうろ覚えで書いてます(汗
ゆっくりなペースではありますが、もう少しコンパクトにして更新するようにします。