each.with_indexで番号をつけよう！

“`ruby:sample.rb
fruits = [“バナナ”,”りんご”,”みかん”,”パイナップル”]

fruits.each.with_index(1) do |fruit, index|
puts “(#{index}): #{fruit}”
end
“`

↓

“`:出力結果
(1): バナナ
(2): りんご
(3): みかん
(4): パイナップル
“`

()の中から始まる数字を順番に振ってくれます。
||の中の第２引数に変数を入れます。

似たものに `each_with_index`がありますが、必ず0から始まるので使い勝手がイマイチです。

個人的な意見としては、好きな数字から始められる `each.with_index`に軍配が上がります。

参考
>https://shirusu-ni-tarazu.hatenablog.jp/entry/2012/11/04/173513
>https://qiita.com/gestalt/items/d2c663b4be524581747e

ではまた！

#Rails logger でログ出力されることを #rspec で検証する ( expect logging in rspec )

expect の中に Rails.logger みたいにメソッドまで書けたんだ…まるで知らずに今まで苦労していた気がする

書き方が推奨かどうかは不明

doubleを繋いだりした方が良いのかもしれない

with で特定のエラーメッセージを期待するが、ゆるい正規表現にしておく

“`rb
it ‘logging as fatal’ do
expect(Rails.logger).to receive(:fatal).with(/Some error message/)
subject
end
“`

[logging – RSpec: how to test Rails logger message expectations? – Stack Overflow](https://stackoverflow.com/questions/10998160/rspec-how-to-test-rails-logger-message-expectations)

# Original by Github issue

https://gith

【Rails】ES6が原因でHerokuへのデプロイ失敗 Uglifier::Error: Unexpected token:~

## はじめに
RailsアプリのHerokuへのデプロイにおける`Uglifier::Error: Unexpected token:~`というエラーに対する解決方法を記載します。

## 環境
– macOS Catalina 10.15.1
– zsh: 5.7.1
– Ruby: 2.6.5
– Rails: 5.2.4
– Docker: 19.03.5
– docker-compose: 1.24.1

## エラー内容
“`ruby
Uglifier::Error: Unexpected token: name (任意の内容). To use ES6 syntax, harmony mode must be enabled with Uglifier.new(:harmony => true).
“`
「ES6を使うには`Uglifier.new(:harmony => true)`で`harmony mode`を有効にしてね」とのこと。

**Uglifier**はJavaScriptの圧縮をしてくれるgem。ただES5までしか対応していません。

## 解決策

jqueryで追加された要素に対してイベントを設定するのにつまづいたこと。

# はじめに
プログラミングスクールの課題で、Railsを用いたチャットアプリを作成した際にjavascriptの処理で詰まったことがあったので、同じことで悩んでいる人もいるのではないかと思い記録に残します。

# 行なった内容
チャットグループを作成または編集する際、インクリメンタルサーチでユーザーの検索を行い、出現した名前の[追加]ボタンを押すことでメンバー一覧の箇所に選択したユーザーの名前が表示されるという流れを実装した。

# 環境
Rails 5.0.7.2
Ruby 2.5.1

# 詰まってしまった内容
上記のGifは正常に動作している状態なのですが、私は下の状態になってしまい困り果てていました。
![chatspaceerror.gif](https://qiita-image-store.s3.ap-nor

1ヶ月〇〇○円で速度改善！？事業でも個人開発でも導入できる画像リサイズのAPI

この記事は[Ateam Brides Inc. Advent Calendar 2019](https://qiita.com/advent-calendar/2019/a-t-brides)　6日目の記事です。

3日目に続きまた書きます[@fussy113](https://qiita.com/fussy113)です。

今回は実際に担当をしているWEBサービス、[HIMARI](https://hi-ma-ri.net/)で行なった簡単速度改善のお話です。

少し前の話にはなりますが、速度改善の一貫として画像のリサイズ、CDNサービスに利用したキャッシュをAWSサービスのみで実装しました。

# この記事のターゲット

– ページスピード改善を目指すエンジニア
– 一つのやり方として参考にしてなれば！

# システムの構成

導入したHIMARIはRailsで作られています。
active_storageを利用して一部画像をS3は置いてあります。

画像のリサイズ、CDN利用により、どれほどの効果が見込めるのかの検証をするため、ミニマムに一部分だけ導入を進めることとなりました

new_record?で場合分け

newとeditで同一の部分テンプレートを利用しているが、それぞれちょっとだけ変えたい時

Railsの`new_record?`メソッドを使って場合分けすることができます。

・インスタンスが新規作成されて、情報がないものは`true`
・インスタンスに既に情報が保存されている場合は`false`

“`ruby:_form.html.haml
– if tweet.new_record?
%p 新規作成
– else
%p 編集

= form_with model: tweet, local: true do |form|
…
“`

“`ruby:new.html.haml
= render “form”, tweet: @tweet
“`

“`ruby:edit.html.haml
= render “form”, tweet: @tweet
“`

newページでは`新規作成`が、
editページでは`編集`が表示されるようになりました。

直感的で非常にわかりやすいです。

前回 `current_page?`による場合分けを解説しまし

テストから考えるプログラムの役割と構造

## はじめに

Railsを始め、**フレームワーク**を利用すると良くも悪くも「プログラムの構造」に対して縛りが発生してきます。
しかしながら、Railsが好まれ・利用されている背景などを考えてみると、この`構造が縛られる`ということがむしろ好意的に受け取られているのではないかと考えてます。

つまり、何を言いたいかと言うと。。。

　**プログラムの構造を１から考えることは難しい**

プログラムの構造を考えるにあたり、`役割`を意識することが多いと考えてます。
その際に大きな問題になるのが**抽象化**と**共通化**の問題。

よく言われるのは、**共通化するな抽象化しろ**ということかなと思います。
では、どこまでが**共通化**で、どこからが**抽象化**なのか。

今回は`テスト`に焦点を当てることで、該当箇所が**抽象化**できているのか？を考えていくアプローチについて書いていければと思っています。

## なぜテストに焦点を当てたのか

答えは単純明快

　**テスト時に自分考えた構造がおかしいことに気づいたから**

これだけでは説明不十分なので、少し掘り下げて考

railsで本番とか開発環境とかの分岐

##Controllerでの分岐

“`.rb:ruby

if Rails.env.development?
logger.debug(“開発”)
elsif Rails.env.test?
logger.debug(“テスト”)
else
logger.debug(“本番”)
end

#↓　本番と開発環境を分岐

if Rails.env.development? || Rails.env.test?
logger.debug(“テスト”)
else
logger.debug(“本番”)
end
“`

おれのYoutube学習サポートアプリになりゃあ#3

#サイトモックアップを作ろう！！

今回は、Balsamq Mockups3 を使いました！！!

https://gyazo.com/94e5106652ef841cba7d502f9d150ed3
https://gyazo.com/3e8348c38d151566ad2da1f8b9d741b2
https://gyazo.com/3756412c31f5f93e0d0b559d82d94f60
https://gyazo.com/c81a84ea5a97202e5f7e209efd77000f
https://gyazo.com/ea2e6a38e482a70e3925484cf7b71b66
https://gyazo.com/386d2d308cfd0aec8c7a64bcc4fbd599
https://gyazo.com/cb5669b3c810ff464a33680fe08419d7
https://gyazo.com/fa327e88d88c0224febef2d59e81c9de

こんな感じです。細かいとこは今後変わるかも。

#DB設計をしよう！！
その前にサ

rails twitter風アプリで「いいね」機能を追加

目的

railsにて、オリジナルのSNSアプリ(「Kuishare」 URL:https://kuishare.herokuapp.com)
に「いいね」機能を追加します。

ここでいう「いいね」機能はtwitterの「いいね」と同じ意味合いです。

環境

rails 5.1.6

**「いいね」機能**に関与するモデルの現在の**構造**(今回関与しない属性は省略します)
**User**(ユーザー情報用モデル)
→name
**Post**(投稿用モデル)
→content

1.データモデルの構造

データモデルの**構造**は、ユーザをフォローする機能と少し似ています。簡単に言うと、**「いいね」**をする**”誰か”**が
**”どのマイクロポスト”**に**「いいね」**したかを管理するモデルを追加すればいいんです。
このデータモデルを実装するために、マイグレーションを生成します。

“`ruby
$ rails generate model Like user_id:integer post_id:integer

自動ログイン(Remember me)機能を実装する

[TODOアプリ](https://qiita.com/d0ne1s/items/5e63dde992f20f25b8bb)に、自動ログイン機能を追加します。

[以前の記事](https://qiita.com/d0ne1s/items/7c4d2be3f53e34a9dec7)で、sessionメソッドを使ってユーザーIDを保存しましたが、この情報はブラウザを閉じると消えてしまいます。

毎回ログインし直すのは少し不便なので、ログインフォームの「**Remember me**」チェックボックスにチェックをしてログインした場合には、再訪時に自動でログインできるように修正していきましょう。

##処理の流れ
1. 「Remember me」にチェックを入れてログインした時、**記憶トークン**（ランダムな文字列）と**記憶ダイジェスト**（記憶トークンをハッシュ化したもの）を作成

2. 記憶トークンと暗号化したユーザーIDを**cookieに保存**し(有効期限20年）、記憶ダイジェストを**DBに保存**する

3. Sessonの無いユーザーがサイトを訪問した時、cookieに

おれのYoutube学習サポートアプリになりゃあ#2

#開発前に　手順①　最小の完成形のために必要な機能は？

・ユーザー登録

・Youtubeの動画閲覧

・動画保存機能

・ノート機能

・タグ付け機能

・タグ、ワード検索機能

・webとios のデータ共有機能。

今回は初めてのアプリ制作なので、このくらいにとどめておきます。
　
##次に手順②　①を含み、自分のイメージに近いサービス調査

読書メーター
https://bookmeter.com/

・ユーザー登録機能
・ノート？（コメント）機能
・タグ付け機能
・amazon検索機能（ワード）
・保存機能（本）
・iOS連動機能

いよいよ次からはモックアップ作成します！

おれのYoutube学習サポートアプリになりゃあ#1

#目標
ruby on rails とswift とview.jsを使ってwebとiOSで動作するアプリを作る。

##開発手順
①　最小の完成形のために必要な機能（PC、スマホによる Youtubeを用いた学びの垂直統合のために必要最低限なもの）を把握

②　①を含み、自分のイメージに近い他サービスの調査（UI.どんな機能を入れているか）。google,github を使うこと。

③　サイトモックアップを書き出す

④　入力、遷移、情報表示　に関して明記（ ５W１H）

⑤　最小限の完成形を改めて定義→取捨選択

⑥　サイトマップの作成

⑦　ワイヤーフレームの作成

⑧　データベース設計

⑨　開発のマイルストーン作成（必要タスク、稼働可能日数、タスクの優先順位）

参考　

作りたいWebアプリのアイディアを迷走せずに作る方法。まず、エディターを閉じることから始めよう

（個人開発アプリのサーバーサイド環境を金と時間をかけずに用意する方法）
https://qiita.com/kazu0620/items/20ea8cd1c3a2e3bb5574

サイトマップ作成

絵が描けないからファンサイトを作った

ファンサイトを作る上で考えたこと、実際にやったことのまとめ。
# はじめに
私はVTuberにハマっている。
テレビ番組を見るようにVTuberの動画や配信を見るのが日課である。
## 何かの推しをしていると目に入るファンアート
Twitter等でファンアートをアップすると推し本人から”いいね”が貰える。稀にリプまで･･･。
ズルい、羨ましい。

私は絵が描けない。
「下手でもいいから」と言われても全く手が動かないし、模写でも無理。
人生を3周しても絵が描けるようにならない自信がある。
## ファン活動として
自分にできるファン活動として何があるかと考えた時、Webサイトを作ってそこを情報発信の一部にできないかと思いついた。
ファンアートが第一次ファン活動とすれば、ファンサイトは第二次ファン活動である。
そして、私が表に出なくていい(頑張らなくていい)システムを作ってしまえば、あとはオートマチックになんとかなるのでは？と考えた。

# ファンサイトを作るにあたって
1.ファン活動なので無理はしない
ここで身銭を切るくらいならスパチャやグッズ購入費にまわす。
なので自分の作業時間以外は制

Spotify API の簡単な使い方-ログイン機能-

#RailsとJsでSpotifyAPIをたたいてみる

###環境・前提条件
ruby 2.6.2
rails 5.2.4

###この記事に書いてあること
– ユーザーを認証し、ユーザーデータにアクセスするための承認を取得する
– Web APIエンドポイントからデータを取得する。
下記のURLはSpotifyAPIの公式ドキュメントです。公式ドキュメントとやっていることは同じですが、この記事ではわかりやすく進行していきます。

###参考URL
公式ドキュメント
https://developer.spotify.com/documentation/web-api/quick-start/
公式github
https://github.com/spotify/web-api-auth-examples

###この記事でできること
アプリのログイン→Spotifyログイン

![giitaよう.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/470271/c0b8dac5-5300-7ac8-

RuboCopを導入してみる

# TL;DR
この記事はこの記事は[RUNTEQ Advent Calendar 2019](https://qiita.com/advent-calendar/2019/runteq) 6日目の記事です。
今回はRubyのコード解析ツールRuboCopを導入しようとする時の設定について紹介します。
# 対象読者
RuboCopを導入してみようと考える初心者
## はじめに
RuboCopはディレクトリ直下に設定ファイル(.rubocop.yml)をおくことで使用できます。
.rubocop.ymlをおいたらGemfileに,

“`Gemfile
group ‘development’ do
…
gem ‘rubocop’, require: false
end
“`
と記載して， bundle installを行えばもう完了です。

RuboCopでは.rubocop.ymlの設定に応じて，　
以下の5つに関して指摘が行われます。
こうしたコードのチェックルールのことを「cop」と呼んでいきます。

– LayOut (レイアウトに関するCop)
– Lint

Railsデータ登録時に制限をかける方法

# Validatesの書き方
何かをデータベースなどに登録する編集する際に入力規則を設けたい場合は、modelファイルに記載する。

“`ruby
#models/post.rb
class Post < ApplicationRecord validates :contetnt,{presence:true,length:{maximum:140}} end ``` 上記の例では空白を許可しないvalidatesと最大文字数140文字をcontentに設定している。 この設定を実施するとcontentが未入力の状態でDataBaseを更新することはできない。 ```ruby #controllers/posts/controller.rb def new @post = Post.new() end def create @post = Post.new(content: params[:contetnt]) if @post.save flash[:notice] = "登録が完了しました" redirect_to("/

【Rails】Ransackのcollection_check_boxesで、checkboxタグに任意のクラスを指定する

チェックボックスでAjax制御しようとして、クラス名を付与しようとしたところ、collection_check_boxesだと普通にやってもクラス指定できなかったので、色々ページを巡回し、ようやく海外ページのフォーラムで手がかりを発見したのでメモ。

やりたいこと。テーブル値@regionsでチェックボックスを作成し、class名、`chkgroup`を付けたい。
#駄目な例
“`html.erb
<%= search_form_for(@q , :id=>‘city-form’, :remote => true ) do |f| %>
<%= f.collection_check_boxes :regions_in, @regions, :id, :name, class : 'chkgroup' %>
<% end %>
“`

Chromeで開発画面を見ても、クラス名は何も表示されていません。そこで色々と巡回していると、[こんなページ](https://stackoverflow.com/questions/24770491/style-rails-collection-c

CircleCI Orbsを使ってRailsのECR・ECSへのデプロイ（マイグレーション込み）を自動化した話

# TL;DR

– ECS の RunTask を実行でマイグレーション込みのデプロイが自動化できた

# いきなりですが

2 ヶ月前ぐらいまで下記の手順でデプロイを行っていました

@ローカル

1. コンテナ作成 (docker build)
2. コンテナにタグづけ (docker tag)
3. ECR のコンテナイメージを更新 (docker push)
4. AWS の RDS にマイグレーション実行 (rails db:migrate)
5. AWS コンソール画面で ECS の手動でリビジョン更新
6. サービスでタスク定義の更新
7. 新旧タスクが入れ替わるのを見守る

現在は・・・

1. デプロイブランチ(production や statging)にプッシュ
2. slack で結果を待つ

# 一番の壁、マイグレーション実行

実は、今回のこの記事でお伝えしたいのは前述の中でも 「4 の RDS のマイグレーション」の部分です:santa:

ローカルで実行していたころは、許可された IP アドレスでマイグレーション実行できるのですが、

CircleCI

Rails 6でCapistranoでデプロイする際のCredentials関連エラーに対処する

Rails 6環境で、Capistranoでデプロイしようとすると、`assets:precompile`のところでエラーが発生する現象が起きた。
エラーログをみると、下記のようにある。

“`
ArgumentError: Missing `secret_key_base` for ‘production’ environment, set this string with `rails credentials:edit`
“`

production用の設定がうまくいかず、これを解決するまでに結構ハマったので、解決方法を書いておく。

# 動作環境
macOS 10.14.6
Rails 6.0.0
Ruby 2.6.2
Capistrano 3.11.2
デプロイ先 AWS Amazon Linux2

# 解決方法
production環境用にCredentialsの設定をする。

– Credentialsについては下記参照
– https://qiita.com/NaokiIshimura/items/2a179f2ab910992c4d39

Credential