CORSとは Rails5 でAdsense表示

Rack::Coresとは

Webアプリケーションのクロスオリジンリソースシェアリング(CORS)のサポートを提供してくれます。 CORS仕様により、WebアプリケーションはJSONPなどの回避策を使用せずにクロスドメインAJAX呼び出しを行うことができます。

そもそもCORSがなぜ必要なの?

ブラウザには、クロスドメイン通信を拒否する仕組みがあります。 これはどういうことかというと、釣り情報をみたいと思って訪問したサイト(オリジン)に悪意のあるJavaScript等が埋め込まれていて、他のサイトへデータを勝手送っていたら困ります。それでオリジンのサイト以外からはデータのやり取りができないように作られています。クロスサイトスクリプティングを防止するためです。

CORSとは

上記を踏まえて、CORSとはオリジン以外のサーバーからデータを取得する仕組みです。W3C が推進している世界標準のルールです。

どんな時につかう?

Google Adsenseなどには大変便利なしくみですね。広告は、Googleが自動で作成しますね。それはオリジンのサイト(ブロガー等)に訪問したユーザーのページに広告を表示するために、Google Adsense のサーバーにアクセスしますね。 CORSをサポートしていないと、これがうまく表示されません。死活問題ですね。
だから必要です。

CORの実装 RailsにてAdsense 表示のため

gem の install

gem 'rack-cors'

そしてbundle install

config/application.rb へ追記 (Rails 5)

    config.middleware.insert_before 0, Rack::Cors do
      allow do
        origins '*'
        resource '*', headers: :any, methods: [:get, :post, :options]
      end
    end

insert_beforeを使用すると、Rack :: Corsがスタックの先頭で実行され、他のミドルウェアによる干渉を受けないようになります。

そもそもRackとは

RackはRubyでWEBアプリケーションを開発する時に利用する、ミドルウエアです。

ミドルウエアとは

コンピュータの基本的な制御を行うオペレーティングシステム(OS)と、各業務処理を行うアプリケーションソフトウェアとの中間に入るソフトウェアのことです。
ミドルウエアが、アプリケーションの起動・停止・監視などを含めた制御をします。 大切ですね。
で , config.middlewareでミドルウエアスタックに新しくミドルウエアを追加しています。同時に読み込み順位も設定しています。

$ rails middleware で確認できます。

確認してみます。

//先頭に入っていますね
use Rack::Cors
use Rack::Sendfile
use ActionDispatch::Static
use ActionDispatch::Executor
use ActiveSupport::Cache::Strategy::LocalCache::Middleware
use Rack::Runtime
use Rack::MethodOverride
use ActionDispatch::RequestId
use ActionDispatch::RemoteIp
use Sprockets::Rails::QuietAssets
use Rails::Rack::Logger
use ActionDispatch::ShowExceptions
use WebConsole::Middleware
use ActionDispatch::DebugExceptions
use ActionDispatch::Reloader
use ActionDispatch::Callbacks
use ActiveRecord::Migration::CheckPending
use ActionDispatch::Cookies
use ActionDispatch::Session::CookieStore
use ActionDispatch::Flash
use ActionDispatch::ContentSecurityPolicy::Middleware
use Rack::Head
use Rack::ConditionalGet
use Rack::ETag
use Rack::TempfileReaper
use Warden::Manager
run ThaiDict::Application.routes

Adsenseにてソースを取得

f:id:happy_teeth_ago:20190816195733p:plain

必要な箇所にに貼り付ける。
上記の設定が済んでいるので、これだけで表示されます。 CORS良いですね。(^^) f:id:happy_teeth_ago:20190816195919p:plain

Rails Adsense 忘備録

Adsense のGoogle ワーニング

要注意 - 収益に重大な影響が出ないよう、ads.txt ファイルの問題を修正してください。


1 つのサイトで使用する ads.txt ファイルを作成する
収益に重大な影響が出ないよう、ads.txt ファイルをダウンロードして、次の各サイトのルートレベルのドメインにアップロードしてください。

環境 Ruby (2.6.1p33)

Rails(Rails 5.2.2)

Heroku

Qads.txtは入手したけど、https://○○.com/ads.txtにアクセスした場合にads.txtを表示する方法をどうするか?

A アプリのpublic配下に配置すればいいみたい。

ドメイン名/ads.textでアクセスできるようになる。

Bootstrap4 from textarea まとめ

Bootstrap4 のHTML from textarea忘備録

実現したいこと

f:id:happy_teeth_ago:20190812134626p:plain

ポイント1.divで囲む class="form-group" を当てる

ポイント2.labelとtextareaのセットで書くべし

ポイント3.textareaにはclass="form-control" を当てる

ポイント4.buttonはtype="submit"

ポイント5.ボタンの色はclass="btn btn-primary"等 を当てる

    <div class="form-group">
          <label for="message">ご要望</label>
          <textarea name="message" rows="5" class="form-control"></textarea>
        </div>
        <button type="submit" class="btn btn-primary">送信する</button>
   </div>

  <!-- Bootstrap -->
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"
    integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o"
    crossorigin="anonymous"></script>

ボタンの色

getbootstrap.com

ついでにバッジも

getbootstrap.com

Bootstrap checkboxまとめ

Bootstrapにてcheckboxを実装する時の忘備録

ポイント1. クラスform-groupを当てておく

ポイント2. divでクラス checkboxを当てておく bootstrapの仕様

ポイント3. name属性は同じで良い。

ポイント4.inputタグのtype= "checkbox"

ポイント5.複数選択可能の時にcheckbox

こんな画面にしたい。 f:id:happy_teeth_ago:20190812124525p:plain

html

        <div class="form-group">
          <label>質問内容</label>
          <div class="checkbox">
            <label>
              <input id="q1_html" type="checkbox" name="q_1" value="html">
              Rails
            </label>
          </div>
          <div class="checkbox">
            <label>
              <input id="q1_html" type="checkbox" name="q_1" value="html">
              javascript
            </label>
          </div>
          <div class="checkbox">
            <label>
              <input id="q1_html" type="checkbox" name="q_1" value="html">
              Python
            </label>
          </div>
        </div>


 <!-- Bootstrap -->
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"
    integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o"
    crossorigin="anonymous"></script>

ついでにバッジ

f:id:happy_teeth_ago:20190812135345p:plain

ポイント1. spanで指定 spanはインライン要素-> 横に並ぶ

ポイント1. class="badge"を当てる

色は下記参照

     
       <div class="form-group">
          <label for="name">お名前<span class="badge badge-danger">必須</span></label>
          <input type="text" id="name" name="name" class="form-control">
        </div>

badgeの色

getbootstrap.com

rails log デバッグまとめ

railsのログは log > development.log に出力

そのファイルを開いて、中のログを削除して確認する。 ログは削除しても何度でも作られるので問題ない。 f:id:happy_teeth_ago:20190810162319p:plain

logger.debug(変数等)で確認

  # GET /goals/new
  def new
    @goal = current_user.goals.new

//デバッグ実行 byebugを利用
 byebug

//development.logに出力
    logger.debug("hogehoge")
    logger.debug(@goal)
  
  end

コマンド一覧

n               ステップオーバー(next)
s               ステップイン(step)
c               実行継続(continue)
fin             ステップアウト(finish)

h               ヘルプ表示(help)
h COMMAND       コマンドのヘルプを表示

変数名          変数の中身を表示
p 変数名        変数の中身を表示
eval 変数名     変数の中身を表示
変数名 = 値     変数に代入
v l             ローカル変数表示
disp 変数名     変数をウォッチする

参考にさせていただきました。

railsでbyebugの使い方知りたいだけな人向けのメモ - Qiita

cssアニメーション 画像がゆっくり透過する

画面にマウスを載せた時に、色を薄くする。

まず画像にアニメーションの設定をします。

.description img {
  float: left;
  margin: 0 10px 10px 0;
//アニメーション 透過
  transition-property: opacity;
//時間指定 1transition-duration: 1s;
//進行割合 easeでよい。linear などもあるが画面の上にhoverした時に薄くする程度ではほとんど関係ない
  transition-timing-function: ease;
  transition-delay: 0s;
}

そしてhover(マウスが載った時) に透過を指定します。

.description img:hover {
//透明度 0.5
  opacity: .5;
}

上記2つを分けて記載するのがポイント