Rails × Vue.jsでカルーセルを実装

https://ssense.github.io/vue-carousel/
カルーセルとはこんな感じ。

これを実装していく。
トップページのログインページにこれを表示させたいので、

#自作vueコンポーネントをerbに表示させる

“`erb

<%= image_tag 'coffee_gif.gif' ,class: "coffee-gif"%>

Von Voyage!

Coffee Passportとはあなたが出会ったコーヒーの記録を共有できるサービスです

【Rails】エラーメッセージ日本語化(メモ）

#　目標
###エラーメッセージ日本語化

この英語のメッセージを日本語に変える。

#実装
まず`gemfile`に`rails-i18n`を記述してインストールする。

“`ruby:Gemfile
gem ‘rails-i18n’
“`

`bundle install`します。

“`ruby:ターミナル
$ bundle install
“`

`config/application.rb`ファイルに`config.i18n.default_locale = :jack_o_lantern:`を記述します。

“`ruby:config/application.rb
config.i18n.default_locale = :jack_o_lantern:
“`

ローカル

[Rails]０から新規アプリケーションの作成

##初めに

####記事の対象者
・Macユーザ
・Railsでアプリケーションを一度も作ったことない人

####環境
・Macbook Air (Retina, 13-inch,2019)
・プロセッサ 1.6GHz デュアルコアIntel Core i5
・メモリ　8GB 2133 Mhz LPDDR3
・MacOS Big Sur　バージョン 11.5.2

####新規作成までの道のり
（1）Ruby用の環境構築
（2）Railsのインストール
（3）Railsのアプリケーションの作成

##Ruby用の環境構築
(1)下記のリンクからHomebrewの公式サイトへ移動し、Install Homebrewの下にあるコマンドをコピーする。（https://brew.sh/）

ーターミナルを起動してさっきコピーした

Nginx+unicornをherokuで使う方法

##Nginxサーバーとは##
Nginxとは処理速度が速く、高負荷に比較的強いWEBサーバーのことです。
ローカル環境ではデフォルトでpumaという名前のWebサーバーが使われており、railsサーバ起動時のログでpumaが使われています。
この記事ではアプリケーションサーバー（Nginx)を設定する方法をお伝えしたいと思います。

##Nginxサーバーをセッティングする##
unicornのインストール
unicornについては下記サイトを参考にして下さい
https://www.autovice.jp/articles/146

まずはGemをインストール
Gemfile

“`
gem ‘unicorn’
gem ‘unicorn-rails’
“`

gemfileの書き込みが終わったら

“`
$ bundle install
“`
あらゆる言語でのアプリケーション開発を可能にする Heroku buildpackを実行
Nginxをインストール

“`
$ heroku buildpacks:add heroku-community/nginx
“`
アプリ

[Ajax]いいね機能を非同期にした

# はじめに
本記事では、非同期通信についてを記述します。
本日実装しました。

## 前提
いいね機能は同期通信で実装しています。

また、オリジナルアプリ開発途中で不要なコードが多いので、
`省略は多め`ですが、該当箇所は記載します。

# いいね機能
### ビュー
いいねを表示しているビュー`index.html.erb`

`

Rails ルーティングのrootについて

#ルーティングとは
ルーティングはwebサービスで言うとこのURLです。
ルーティングは***routes.rbに記載***できます。
ここで***どう処理してどう動くかを記載***します。

下の参考資料を参考に説明していきます。

#ルーティングの種類

主に代表的なものです。他にもあるので調べてみてください。

1 HTTPレスポンス　
GET POST PUT PATCH DElETEなど

2 root
　今回はrootをメインで説明していきます。

❗️注意点
***同じ条件（HTTPリクエストとURL）のルーティングがあった場合***
***上の条件を優先的に処理をします。***

#ルーティングのroot

⚫︎rootとは

・特定のコントローラー内アクションへ割り当てる。
アクションはindex show create update edit new destroy

・***アプリを実行するときの軸となる場所でrootで指定したところを
URLの中心として開発していきます。***

ex

“`routes.rb
root to: “home#index”
“

【Rails】 Cannot assign to read only property ‘exports’ 【webpacker】

# 問題
RailsでとあるNodeモジュールを入れたらブラウザ上で
>Cannot assign to read only property ‘exports’

っていうエラーが出た。調べると”module.exportsとimportを同時に使うとエラーになるぞ”という情報が出てくるのだが、別にそういうわけではない。

# 解決策
色々調べてるとこんな情報が出てきた。

> [I suspect @rails/webpacker v6 (not yet released) will fix this issue, because it drops the “nodeModules” loader completely. See changelog](https://github.com/apostrophecms/sanitize-html/issues/420)

実際にやってみたところ確かに出なくなった。

# 結論
原因はよくわからないがnodeModulesローダーがnode_moduls/以下をトランスパイルしてるせいでたまに出るエラーらしい。上の通りWebpacker

SNSシェアボタンの導入

##目次
– 概要（SNSシェアボタンって何？）
– 導入方法
– Facebookボタンの注意点
– ボタンサイズの変更
– 参考サイト
– 振り返り

##概要
SNSシェアボタンとはニュースサイト等でよく使われる、クリック一つで投稿できるボタンのことです。
こちらはQiitaのもの。
私の場合、出欠サイトを作成したため、対象者に入力を促す目的で導入しました。
[Githubはこちら](https://github.com/huacnlee/social-share-button)
##導入方法
“`Gemfile.
gem ‘social-share-button’
“`
Gemを記載したら、下記コマンドを入力します。

“`
$ bundle install
$ rails genera

DB　マイグレーションファイル

マイグレーションファイルとは、DBのテーブルの作成や変更を管理するファイルである。
書式は
def change
　create_table :テーブル名 do |t|
　　t.データ型 :カラム名
　end
end
である。
記述を終えたら、コマンドを実行する必要がある。これは作成時も修正時も同様である。
コマンドは、
＄　rails db:migrated
である。

上記は、カラムの定義に当たるが、カラムを追加または削除する方法もある。
カラムを追加するには、
＄　rails g migrate Addカラム名Toテーブル名 カラム名:型名
のコマンドが必要である。
カラムの削除は、
＄　rails g migrate Removeカラム名Fromテーブル名 カラム名:型名
のコマンドが必要である。

ルーティングの記述

ルーティングでは、ユーザーが特定のURLにアクセスした時に、どのコントローラーのどのアクションに処理を振り分けるかを定義する。
それは、HTTPリクエストを指しており、HTTPリクエストは、
HTTPメソッド’URL’=>’コントローラ名#アクション名’
となっており、
HTTPメソッドは要求の主な内容を表しており、「どのURLにアクセスした時に、どのコントローラのどのアクションを呼び出すか」を定義している。

ruby on rails

Ruby on Rails　とはウェブアプリケーションを作成するためのフレームワークである。
フレームワークとは雛形のことで、アプリケーション開発に必要な細々した機能を簡単な手順で設定できるようになっている。

インスタンス変数

インスタンス変数とは、クラスのオブジェクト（インスタンス）が持つ変数の１つである。

HTTPメソッドとHTTPリクエスト

学習中のメモです。
HTTP（Hypertext Transfer Protocol）は、通信規約（プロトコル）の一種で、ユーザーが行いたい処理をサーバーに伝える役割をしている。
HTTPリクエストとは、ユーザーが行いたい処理をサーバーに伝えることである。

真：Sorceryで複数モデルを扱う

ユーザと管理者で Model をわけたいと考えて以下の記事を参考にしました。

https://qiita.com/mzmt/items/cbc2e4f2a51ded97db83

`current_user`をオーバーライドしても、`login`などは適切に動きません。

ログを見ると `config` で指定していた `user_class`でログイン処理が走ります。

ソースコードを追っかけてみると・・・

“`ruby:sorcery-0.16.1/lib/sorcery/controller.rb

module Sorcery
module Controller

module InstanceMethods

# Takes credentials and returns a user on successful authentication.
# Runs hooks after login or failed login.
def login(*credentials)
@current_user =

プロフィールにタグを表示する

現在投稿系のアプリを作成してまして、その時にプロフィール画面のデザインで結構悩みました
結果としてはあまり欲張りすぎずにシンプルなデザインにすることで見やすいし、実装もし易くなりました。

欲張っていろいろ詰め込んでも見にくいだけですしね笑

それでも完全に手抜きで作るのではなくて自分なりにあったらいいなと思うのを探してみました。

・ユーザーアイコン
・ニックネーム
・自己紹介文
・好きなものを#で表示
・編集

正直これくらいしか思いつかなかったです、、、、笑

実装していきます

＃の機能以外はそこまで苦戦しなかったのでコード貼っておきます

使っているgemです

・devise(userのログインとか新規登録とかめっちゃ簡単にできます)

・carrierwave(画像のupするので使いました)

・mini_magi

not found in ‘date-fns’が出た

# 前提
* yarnを導入している
* rails6

# 概要
“`
$ yarn add date-fns
“`
をした後に、

“`javascript
// sample.js

import format from ‘date-fns’
“`
こうすると、以下のエラーが出る

“`
“export ‘default’ (imported as ‘format’) was not found in ‘date-fns’
“`

# 結論
“`javascript
// sample.js

import { format } from ‘date-fns’
“`

`{}`が必要らしい

date-fns側で`名前付きエクスポート`をしているため、このように書く必要があるっぽい。

# 参考

[export – JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/export)

[Rails]フォローしたユーザーの直近１週間の投稿のみ表示させる

# はじめに
本日は、過去にフォロー機能を実装していたので、
せっかくなので、アプリケーションっぽくトップページには、
フォローしているユーザーのみの投稿を表示させるようにしました。

# コード
コントローラー

“`ruby
def index
@foods = Food.order(“created_at DESC”).where(user_id: [current_user.id,*current_user.following_ids])
@like = Like.new
@ranks = Food.find(Like.group(:food_id).order(‘count(food_id) desc’).limit(5).pluck(:food_id))
end
“`

ビューは特に見せるところはないので割愛します。
eachメソッド使ってとりあえずまずは全部の投稿を出すようにすれば良いと思います。

`order(“created_at DESC”)`
新しい投稿が上になるように設定。

`where(user_id: [current

rails tutorial4章進めた時の覚書

カスタムヘルパー
> Railsのビューでは膨大な数の組み込み関数が使えますが、それだけでなく、新しく作成することもできます。新しく作ったメソッドはカスタムヘルパー と呼ばれます

作り方
full_titleヘルパーを製作
helpers/application_helper.rb に、full_titleヘルパーを定義する。

“`rb
module ApplicationHelper

# ページごとの完全なタイトルを返します。
def full_title(page_title = ”)
base_title = “Ruby on Rails Tutorial Sample App”
if page_title.empty?
base_title
else
page_title + ” | ” + base_title
end
end
end
“`

> コンソールの中で何をしようとも、何かを壊すことはまずありえないので、ご安心ください。

いいことを聞いた

“`
‘#{foo} bar’ #

Rails configファイルとは

#configとは
***Configration(設定)***という意味です。
Railsにおいては***何かを設定する時***に使うファイルです。
***「config.パラメーター名　= 値」***の形式で設定

#configの中でよく使うもの

1 ***routes.rb***
ルーティングの設定でよく使われます。
ルーティングはurlみたいなものでどのコントローラーのどの処理をどのように処理を
するのかを設定するものです。

2 ***webpack***
フロントエンドnoJavascriptなどの複数のモジュール（部品)をまとめるツールです。

3 ***application.rb***
アプリ全体の設定をする。

4 enviroment
環境ごとの設定ファイルを入れておくディレクトリです。

・development.rb
開発環境の設定ファイルです。

・test.rb
テスト環境の設定ファイルです。

・production.rb
本番環境の設定ファイルです。

5 initializer
初期化処理や設定情報を入れておくディレクトリです。

他にも

WebpackerでHotReloadは動くが、コンパイル結果が反映されない

# はじめに

最近は仕事でWebアプリケーションを作成しています。
本日もいつも通りWebページを作成し、Javascriptを書いたのですが、なぜかリロードしてもJavascriptが反応しませんでした。
色々調べたのですが、同じ現象の方がいなかったようなので、簡単にメモしていきます。

また、この解決に会社の上司の方が手助けをしてくれました。
タイトルも上司の方につけていただきました。

# 環境

– Docker Desktop for Windows
– WSL2
– VSCode

# 問題
Docker(WSL2)環境で以下の問題がいきなり発生しました。

ローカルとコンテナをマウントしている状態で、JavaScriptのファイルを編集しましたが、なぜか反映さません。

JavaScriptは`webpacker`のコンテナをDockerで立ち上げて管理しています。
JavaScriptを編集した後に保存(Ctrl+s)をすると、ホットリロードが働いていることはターミナルから確認ができます。

そして、ターミナルではCompling….と走っていました。

しかし、