常連

注目の的

社会貢献

質問力

質問者

![イメージ説明](ae51ec71ea0ba021f0676481dcc767fc.jpeg)

ウェブサイトを作ったはいいが検索結果の画面が様にならない。

そこでこの画像のような、綺麗にまとまった形にするにはどう設定したら
いいのでしょうか？
また、なんと検索すればそうがいった方法がでてくるのでしょうか？

どなたか教えていただけると嬉しいです。

作成したウェブサイトの検索結果をきれいにまとめるには

本人認証用のメールを作成しており、Railsチュートリアルでは英文だった為問題なかったのですが、
今回は日本語で本文を作ろうとしたところ、送信したメールが文字化けしており困っております。

エンコードの違いだということはわかるのですがどのように日本語対応すれば良いかわからず困っております。参照すべきサイトでも良いので教えていただけたらと思います。自分の調べ方が悪いのかうまく情報を見つけることができなかったのでどのように検索されたかも教えていただけると幸いです。


```controller
class UserMailer < ApplicationMailer

  #メソッドに対応するビューがメールのテンプレート
  def account_activation(user)
    @user = user
    mail to: user.email, subject: "Account activation"
  end
```

```view
<h1>Instagram Clone App</h1>

<p>こんにちは、 <%= @user.name %>さん</p>

<p>
Instagramアカウントのセキュリティを確保するため、メールアドレスの認証を行ってください。
</p>

<%= link_to "メールアドレスを認証してください", edit_account_activation_url(@user.activation_token,
                                                    email: @user.email) %>

```

```
UserMailer#account_activation: processed outbound mail in 14.5ms
Sent mail to <メールアドレス> (7.6ms)
Date: Tue, 15 Oct 2019 07:52:24 +0000
From: noreply@example.com
To: ＜メールアドレス＞
Message-ID: <5da57ab83af13_2d2f279c398945f0@ip-172-31-30-48.mail>
Subject: Account activation
Mime-Version: 1.0
Content-Type: multipart/alternative;
 boundary="--==_mimepart_5da57ab8399b0_2d2f279c39894433";
 charset=UTF-8
Content-Transfer-Encoding: 7bit


----==_mimepart_5da57ab8399b0_2d2f279c39894433
Content-Type: text/plain;
 charset=UTF-8
Content-Transfer-Encoding: base64

DQrjgZPjgpPjgavjgaHjga/jgIFIaXJva2kgTWFzYWtp44GV44KTDQoNCklu
c3RhZ3JhbeOCouOCq+OCpuODs+ODiOOBruOCu+OCreODpeODquODhuOCo+OC
kueiuuS/neOBmeOCi+OBn+OCgeOAgQ0K5Lul5LiL44GuVVJM44KS44Kv44Oq
44OD44Kv44GX44CB44Oh44O844Or44Ki44OJ44Os44K544Gu6KqN6Ki844KS
6KGM44Gj44Gm44GP44Gg44GV44GE44CCDQoNCmh0dHBzOi8vZTljNDEwY2Ix


----==_mimepart_5da57ab8399b0_2d2f279c39894433
Content-Type: text/html;
 charset=UTF-8
Content-Transfer-Encoding: base64

PCFET0NUWVBFIGh0bWw+DQo8aHRtbD4NCiAgPGhlYWQ+DQogICAgPG1ldGEg
aHR0cC1lcXVpdj0iQ29udGVudC1UeXBlIiBjb250ZW50PSJ0ZXh0L2h0bWw7
IGNoYXJzZXQ9dXRmLTgiIC8+DQogICAgPHN0eWxlPg0KICAgICAgLyogRW1h
aWwgc3R5bGVzIG5lZWQgdG8gYmUgaW5saW5lICovDQogICAgPC9zdHlsZT4N
CiAgPC9oZWFkPg0KDQogIDxib2R5Pg0KICAgIDxoMT5JbnN0YWdyYW0gQ2xv
bmUgQXBwPC9oMT4NCg0KPHA+44GT44KT44Gr44Gh44Gv44CBIEhpcm9raSBN



----==_mimepart_5da57ab8399b0_2d2f279c39894433--

Redirected to https://e9c410cb1fc1485f8b4d0a858cd3b9c8.vfs.cloud9.us-east-2.amazonaws.com/
Completed 302 Found in 646ms (ActiveRecord: 9.3ms)

```

railsチュートリアルの時はサーバーを立ち上げたターミナル内で本文が確認できたような記憶があるので何か設定が必要なのかと考えております。ご確認お願い致します。

メールで日本語を使用したい。

### 徐々に円を描くCSSアニメーションの作り方がわかりません
CSSで[こちら](https://is4-ssl.mzstatic.com/image/thumb/Purple128/v4/77/98/cf/7798cf1d-6532-b920-f243-c71ed7548aaf/mzl.hdifhfqy.png/313x0w.jpg)の画像のように時間が経つに連れて円ができていくアニメーションを作るにはどうすればいいでしょうか。(どうしようもない素人なのでタイマーの機能も併せて行った抱けるとありがたいです。)

### loading時のcssは試しました。

```HTML
<div class="sk-fading-circle">
  <div class="sk-circle1 sk-circle"></div>
  <div class="sk-circle2 sk-circle"></div>
  <div class="sk-circle3 sk-circle"></div>
  <div class="sk-circle4 sk-circle"></div>
  <div class="sk-circle5 sk-circle"></div>
  <div class="sk-circle6 sk-circle"></div>
  <div class="sk-circle7 sk-circle"></div>
  <div class="sk-circle8 sk-circle"></div>
  <div class="sk-circle9 sk-circle"></div>
  <div class="sk-circle10 sk-circle"></div>
  <div class="sk-circle11 sk-circle"></div>
  <div class="sk-circle12 sk-circle"></div>
</div>
```
``` CSS
.sk-fading-circle {
  margin: 100px auto;
  width: 40px;
  height: 40px;
  position: relative;
}

.sk-fading-circle .sk-circle {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.sk-fading-circle .sk-circle:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #333;
  border-radius: 100%;
  -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
          animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
}
.sk-fading-circle .sk-circle2 {
  -webkit-transform: rotate(30deg);
      -ms-transform: rotate(30deg);
          transform: rotate(30deg);
}
.sk-fading-circle .sk-circle3 {
  -webkit-transform: rotate(60deg);
      -ms-transform: rotate(60deg);
          transform: rotate(60deg);
}
.sk-fading-circle .sk-circle4 {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
}
.sk-fading-circle .sk-circle5 {
  -webkit-transform: rotate(120deg);
      -ms-transform: rotate(120deg);
          transform: rotate(120deg);
}
.sk-fading-circle .sk-circle6 {
  -webkit-transform: rotate(150deg);
      -ms-transform: rotate(150deg);
          transform: rotate(150deg);
}
.sk-fading-circle .sk-circle7 {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}
.sk-fading-circle .sk-circle8 {
  -webkit-transform: rotate(210deg);
      -ms-transform: rotate(210deg);
          transform: rotate(210deg);
}
.sk-fading-circle .sk-circle9 {
  -webkit-transform: rotate(240deg);
      -ms-transform: rotate(240deg);
          transform: rotate(240deg);
}
.sk-fading-circle .sk-circle10 {
  -webkit-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
          transform: rotate(270deg);
}
.sk-fading-circle .sk-circle11 {
  -webkit-transform: rotate(300deg);
      -ms-transform: rotate(300deg);
          transform: rotate(300deg); 
}
.sk-fading-circle .sk-circle12 {
  -webkit-transform: rotate(330deg);
      -ms-transform: rotate(330deg);
          transform: rotate(330deg); 
}
.sk-fading-circle .sk-circle2:before {
  -webkit-animation-delay: -1.1s;
          animation-delay: -1.1s; 
}
.sk-fading-circle .sk-circle3:before {
  -webkit-animation-delay: -1s;
          animation-delay: -1s; 
}
.sk-fading-circle .sk-circle4:before {
  -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s; 
}
.sk-fading-circle .sk-circle5:before {
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s; 
}
.sk-fading-circle .sk-circle6:before {
  -webkit-animation-delay: -0.7s;
          animation-delay: -0.7s; 
}
.sk-fading-circle .sk-circle7:before {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s; 
}
.sk-fading-circle .sk-circle8:before {
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s; 
}
.sk-fading-circle .sk-circle9:before {
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s;
}
.sk-fading-circle .sk-circle10:before {
  -webkit-animation-delay: -0.3s;
          animation-delay: -0.3s;
}
.sk-fading-circle .sk-circle11:before {
  -webkit-animation-delay: -0.2s;
          animation-delay: -0.2s;
}
.sk-fading-circle .sk-circle12:before {
  -webkit-animation-delay: -0.1s;
          animation-delay: -0.1s;
}

@-webkit-keyframes sk-circleFadeDelay {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; }
}

@keyframes sk-circleFadeDelay {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; } 
}
```

### 試したこと

ここに問題に対して試したことを記載してください。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

徐々に円を描くCSSアニメーションの作り方

iphoneアプリの開発をする際、どの画面サイズを基準にデザインなど行なっていけば良いのでしょうか？
[こちら](https://teratail.com/questions/164562)の質問を拝見したのですが、appleの審査に受かるためには、 最新の画面サイズに対応していなければならないかのように思えました。
デザインをしていくにしても、どれかに基準を合わせて開発していく必要があるように思えます。
以下の画像はデザインツール(adobe xd)ですが、どれかのiphoneモデルに合わせてデザイン作っていく必要があります。
![イメージ説明](3fc34dc1b0b398aa5f6edb721e8ff7ec.png)
少し、混乱してしまっている部分もある為、ご助言頂けましたら幸いです。

iphoneアプリ開発を行っていく際の、基準となる画面サイズについて

Railsでネットショップを開発しております。

下記2点の機能を実装したいのですが、どのようなロジックにすれば実装できるか教えていただきたく、質問致しました。
よろしくお願い致します。

0. 注文をするボタンを押した後に、そのユーザーのカートの中身を空にしたい
0. これまでに自分が注文した履歴を表示するページを作成したい

商品をカートに入れてから注文を確定するまでの流れは現状以下のようになっております。

---
**・商品一覧ページです**
![イメージ説明](01fe24ec142037ea38a900b6c4b5e738.png)
---
**・商品をカートに入れる個数を選択するページです**
![イメージ説明](36989e2c66182a0c5400ebfb665913d7.png)
---
**・カートの中身を表示するページです(hoge２は商品名、２２２は値段、4は個数です)**
![イメージ説明](94dbcdf7ebc855d5c3543dfe93065717.png)
---
**・注文を出すためのページです**
![イメージ説明](40604ade479ab31b25f175954cb4c4c2.png)
---
・注文をするボタンを押すとカート表示ページに飛びます
![イメージ説明](427e7dbff340db8f3e85a68c350fe454.png)
---


注文履歴ページに関しては下記の画像のような表示をイメージしております

![イメージ説明](bd329090dadc63d52d13c879a793ce7e.png)

---

各モデルとコントローラーは以下になります

```ruby
#カート
class Cart < ApplicationRecord
  belongs_to :user 
  has_many :cart_items
end

#カートに入れた商品
class CartItem < ApplicationRecord
  belongs_to :product
  belongs_to :cart
end

#注文
class Order < ApplicationRecord
  has_many :cart_item, dependent: :destroy
end

#商品
class Product < ApplicationRecord
  has_many :carts, through: :cart_items
  mount_uploader :picture, PictureUploader
end
```

```ruby
class CartItemsController < ApplicationController
  before_action :setup_item, only: [:destroy]
  
  def destroy
    @setup_item.destroy
    redirect_to current_cart
    
  end
  
  private

    def setup_item
      @setup_item = CartItem.find(params[:id])
    end
end
```

```ruby
class CartsController < ApplicationController
  before_action :setup_cart_item, only: [:add_item, :delete_item, :show]

  def show
    @cart_items = CartItem.where(cart_id:current_cart.id)
    @total_price = 0
    if @cart_items
      @cart_items.each do |cart_item|
        @total_price += cart_item.product.price * cart_item.quantity
      end
    end
  end
 
  def add_item
    if CartItem.find_by(product_id: params[:product_id], cart_id: current_cart.id).blank?
      @cart_item = current_cart.cart_items.create(product_id: params[:product_id])
    end
    
    @cart_item.quantity += params[:product][:quantity].to_i
    @cart_item.save!
    redirect_to current_cart
  end

  def destroy
    @cart_item.destroy
    redirect_to current_cart
    
  end

  def delete_item
    @cart_item.destroy
    redirect_to current_cart
  end

  private

  def setup_cart_item
    @cart_item = CartItem.find_by(cart_id: current_cart.id,product_id: params[:product_id])
  end
end
```

```ruby
class OrdersController < ApplicationController
  def index
    @orders = Order.all
  end

  def show
  end

  def new
    @order = Order.new
  end

  def create
    @order = Order.new(order_params)
    @cart_items = CartItem.where(cart_id:current_cart.id)
    redirect_to current_cart
  end

  def destroy
    @order.destroy
  end
  
  private
  
    def set_order
      @order = Order.find(params[:id])
    end

    def order_params
      params.require(:order).permit(:name, :address, :email)
    end
end

```

```ruby
class ProductsController < ApplicationController
  def index
    @products = Product.all
  end
  
  def show
    @product = Product.find(params[:id])
  end
  
  def new
    @product = Product.new
  end
  
  def create
    @product = Product.new(product_params)
    if @product.save # => Validation
      # Sucess
      flash[:success] = "商品を登録しました"
      redirect_to root_url
    else
      render 'new'
    end
  end
  
  def ensure_correct_user
    if current_user.admin?
    else
      flash[:notice] = "アクセス権限がありません"
      redirect_to root_url
    end
  end
  
  private

    def product_params
      params.require(:product).permit(:name, :price)
      params.require(:product).permit(:title, :memo, :author, :picture)
    end
end

```
加筆
> ユーザのカートを空にするmethodを仮に user.cart.clear としたときに、それをどのcontrllerのどのアクションのどの位置に入れるか

カートの中身を空にするタイミングは、orderが作成(注文が確定)されたタイミングで行いたいと考えております。
```ruby
class OrdersController < ApplicationController

def create
    @order = Order.new(order_params)
    @cart_items = CartItem.where(cart_id:current_cart.id)
    redirect_to current_cart

    user.cart.clear #カートの中身を空にする

  end

end

```
---

> 履歴一覧を出すにあたって、何がわからないのでしょうか

現状ではカートの中に入っている商品はcart_itemで管理しています。cart_itemにはカートのid(cart_id)、商品のid(product_id)、商品の個数(quantity)の情報を保存しています。


orderでは1つのidに対して1つの**注文**を管理したいのですが、1回の注文で複数の商品を購入する場合もあるため、
order1つに対して複数のproduct_idを紐付ける必要がありそうですが、prpduct_idの個数が可変なため、それはできないと思い、他に方法はないか、というのが現時点での疑問になります。

例えばAさんというユーザー(user_id=2とする)はcart_id=3のカートと紐付いていて、現在カートに3つの商品が入っていたとすると、cart_item(CartItem.where(cart_id:3))は以下のようになります。

![イメージ説明](4ec4030f7355ae38528ff547ac184d14.png)

この状態で注文をした場合、orderを以下のようなイメージで作成できればと思っております(cart_idがuser_idになっても可)

![イメージ説明](c85d7841d7dc5d625f71db47f5fee266.png)