ECのウェブ担当者のメモ

ECサイトを運営管理している、WEB担当プログラマのメモ

スポンサーリンク

Chromeのユーザー切り替えショートカットキー (Mac)

f:id:jun9632:20180524110306p:plain

Google クロームのユーザー切り替えショートカットキーはこれ

Shift + Command + M

プロジェクト毎にChromeのユーザーを切り替えて使っているのですが、 これを知ったら最高に便利でした。

今までメニューの => ユーザーの => という感じで選択していたんですが マウス不要でユーザー切り替えができます。

関連記事

marketing-web.hatenablog.com

「プロジェクトマネジメント」実践講座

「プロジェクトマネジメント」実践講座

基礎から学ぶ Vue.js

基礎から学ぶ Vue.js

Nuxt.js + Netlify でform機能がまともに動かない

f:id:jun9632:20180208235528p:plain

Nuxt.js + Netlifyで無料サイトを作っていたら、 Netlifyのフォーム機能が正常に動きませんでした。

だいぶハマりました、、、、

その、解決策です。

Nuxt.js と Netlify はそれぞれ以下です。

Nuxt.js

ja.nuxtjs.org

Netlify

www.netlify.com

Netlifyのドキュメントを読むと

ドキュメントはこちら https://www.netlify.com/docs/form-handling/

Netlifyのドキュメントに書いてある、formのサンプルは以下です。

<form name="contact" netlify-honeypot="bot-field" action="thank-you" netlify>
  <p class="hidden">
    <label>Don’t fill this out: <input name="bot-field"></label>
  </p>
  <p>
    <label>Email: <input type="text" name="name"></label>
  </p>
  <p>
    <label>Message: <textarea name="message"></textarea></label>
  </p>
  <p>
    <button type=”submit”>Send</button>
  </p>
</form>

これをそのまま使うと失敗します。 middlema + Netlifyの時は問題無く使えたので、Nuxt.jsとの組み合わせで失敗するのではないかと思います。

変更後のコード

変更後がこちら

<form name="contact" netlify-honeypot="bot-field" action="thank-you"  data-netlify="true" method="post">
  <input type="hidden" name="form-name" value="contact" />
  <p class="hidden"  style="display: none;">
    <label>Don’t fill this out: <input name="bot-field"></label>
  </p>
  <p>
    <label>Email: <input type="text" name="name"></label>
  </p>
  <p>
    <label>Message: <textarea name="message"></textarea></label>
  </p>
  <p>
    <button type=”submit”>Send</button>
  </p>
</form>

解決策

一番のポイントがこれです。

  <input type="hidden" name="form-name" value="contact" />

form-nameも一緒にサブミットして上げることです。 ドキュメントを読む限りでは、 formタグのname属性に名前を指定すればOK的な話になっているんですが、 input hiddenで form-nameを送信して上げないとどうやらダメみたいです。

あと、method='post'を指定したりしていますが、おまけ程度です。

関連記事

JavaScript フレームワーク入門

JavaScript フレームワーク入門

いまから始めるWebフロントエンド開発

いまから始めるWebフロントエンド開発

ActionController::InvalidCrossOriginRequestが発生した時の対策

f:id:jun9632:20171130231253p:plain

Ruby on RailsでActionController::InvalidCrossOriginRequestが発生した時の対策です。

なぜInvalidCrossOriginRequestが発生するのか?

大半が、Ruby on Rails が行ってくれている、CSRF(クロスサイトリクエストフォージェリ)対策に引っかかっているからだと思います。

CSRF(クロスサイトリクエストフォージェリ)については、下記のwikiを参照ください。

クロスサイトリクエストフォージェリ - Wikipedia

その、CSRF対策として、RailsがフォームやらAjaxやらで、トークンを発行して認証までしてくれています。 ほとんどの場合、何も気にすることなく、勝手に認証されているのではないでしょうか。

その、認証に失敗した場合に、InvalidCrossOriginRequestが発生します。

対処方法

CSRF 対策を全アクションで無効にする

コントローラーに下記を追加します

protect_from_forgery with: :exception

追加した、コントローラーの全ての認証処理をパスしてくれます。

この書き方は、とても注意が必要だと思います。本当にCSRF対策が必要無いのかを必ず確認してください。 入力フォームがあって、サブミットするようなアクションがある場合は避けた方が良いと思います。

CSRF 対策を一部のアクションで無効にする

コントローラーに下記を追加します

protect_from_forgery except: :index

こうすることで、indexアクションだけ、CSRF 対策をスキップしてくれます。 create や updateアクションでは、認証処理をしてくれます。

まとめ

個人的には、データを取得するために AjaxのFormを作った時に、リクエスト先のアクションに protect_from_forgeryを設定することがよくあります。

下記のようなフォームです。

= form_tag xxxx_paht, method: :get, remote: true

そして、基本的に通常の入力フォームがある場合のアクションには設定しない。

無理せずなるべく安全に行きましょう!

関連記事

marketing-web.hatenablog.com

marketing-web.hatenablog.com

Ruby on Railsで秒で指定した時間を時:分:秒に変換する

f:id:jun9632:20171020214441p:plain

やりたいことは、タイトルの通りですが、 73秒で指定した時に、00:01:13という結果が欲しい時は

Time.at(73).utc.strftime('%X')

と指定すると、

00:01:13

となってくれます。

本当にナイスです。

メソッド無しで考えると、3600で割り算して、60で割り算してみたいなことを一瞬考えてしまい、 嫌気がさしたところにこんなニッチな素晴らしいメソッドがあるなんて。

本当にありがとうございます。 感謝致します。

関連記事

marketing-web.hatenablog.com

marketing-web.hatenablog.com

marketing-web.hatenablog.com

プログラミング言語 Ruby

プログラミング言語 Ruby

  • 作者: まつもとゆきひろ,David Flanagan,卜部昌平(監訳),長尾高弘
  • 出版社/メーカー: オライリージャパン
  • 発売日: 2009/01/26
  • メディア: 大型本
  • 購入: 21人 クリック: 356回
  • この商品を含むブログ (129件) を見る

Rubyでstringの文字数を調整したり、部分的に取り出したりする

f:id:jun9632:20171010101257p:plain

Rubyでstringの文字数を調整したり、部分的に取り出したりする方法です。

使用用途として外部のサービにデータを渡す時など、文字数に制限がかっかていたりすので、 その仕様に合わせて文字数を調整する方法です。

先頭から5文字取得する

先に実際のサンプルは以下になります。

number = "1234567890"
number[0, 5]

=> "12345"

大事なところは、

number[0, 5]

です。

number[index, len]

となって

index => 何番目の文字から取得開始するか len => 何文字取得するか

number[0, 5]

の場合だと、

0番目から、5文字取得する

となります。

同じ雰囲気を出しながら

number[0..5]

とやると、

=> "123456"

6までとれてしまうので注意が必要です。

上記のパターンだとインデックスで0番目から5番目まで取得することになるので6文字取得することになります。

number[0, 5]

と同じことをするのであれば

number[0..4]

になります。

文字列の途中から5文字取得する

基本的にはこれを使えば問題なしです。

number[index, len]

インデックスで3番目から5文字取得しようとすると下記の様になります。

number = "1234567890"
number[3, 5]

=> "45678"

後ろから5文字取得する

後ろから取得する場合も、以下が使えます。

number[index, len]

後ろから5文字取得する場合は、

number = "1234567890"
number[-5, 5]

=> "67890"

indexのところで、マイナス値(-5)を設定します。 後ろから5番目から5文字取得しますという感じになります。

関連記事

marketing-web.hatenablog.com

marketing-web.hatenablog.com

改訂2版 パーフェクトRuby

改訂2版 パーフェクトRuby

Railsのenumで値(Value)を取得する

f:id:jun9632:20170809110202p:plain

下記のようなenumがあったときに、

class Item < ActiveRecord::Base
  enum status: { draft: 1, published: 2, test: 3 }

Imteオブジェクトから Valueの値(1 とか 2 とか)を取得したい時の方法です。

hash的な考え方

まず1つ目が、

Item.statuses[item.status]

です。

hashみたいにkeyを指定して、valueを取得します。

その際に、statuses と複数系になることにご注意ください。

xxxx_before_type_castを使う

なにはともあれ、下記で取得できる。

Item.status_before_type_cast

こちらの方が、スマートな雰囲気で取得できますね。

ActiveRecord::AttributeMethods::BeforeTypeCast

関連記事

marketing-web.hatenablog.com

Ruby on Rails 5アプリケーションプログラミング

Ruby on Rails 5アプリケーションプログラミング

検索でのランディングページを確認する方法

f:id:jun9632:20170709143836p:plain

Googleアナリティクスで、検索でどんなページがランディングしているか確認する方法です。

まず、Googleアナリティクスを開いて

[集客] > [Search Console] > [ランディングページ]をクリックします。

f:id:jun9632:20170709141333p:plain

そうすると、ランディングページの一覧を確認することができます。

ランディングページの結果ページで考えること

まず、ランディングページの結果を何のためにみるのか?です。

そもそも、ランディングページ(LP)なので、最初にアクセスしたページです。 つまり、Googleの検索や、メール、URLを直接入力して、どこかのページにランディングします。 そのページが、ランディングページです。

そして、サイトやページにはきっと何かしらの目的があると思います。

  • 自社の商品を買ってもらうことや
  • 申し込みをしてもらうこと
  • 自社の商品を知ってもらうこと

それぞれあると思います。

そのランディングしたページから、目的を達成するための導線をつなげることが ランディングページを分析する、目的だと思います。

基本的な事かもしれませんが、これを意識するかしないかは大きなことだと思います。 まずはこのことを意識してみてください。

ある目的を持ったページ、ちゃんと目的に向かった誘導できているのか?

言い換えれば

ある商品の購入してもらうためのページが、ちゃんと購入に向けて誘導できているのか。

これを意識すると、

購入だけがゴールではなく、 ちゃんと商品のことを説明しないといけないとか、 自社のことを信頼してもらえないといけないとか、 購入後もサポートがちゃんとあって安心してつかえることを知ってもらえないといけないとか

いろいろな、改善点が見えてくるのではないでしょうか?

関連記事

marketing-web.hatenablog.com

marketing-web.hatenablog.com

できる逆引き Googleアナリティクス Web解析の現場で使える実践ワザ240 ユニバーサルアナリティクス&Googleタグマネージャ対応

できる逆引き Googleアナリティクス Web解析の現場で使える実践ワザ240 ユニバーサルアナリティクス&Googleタグマネージャ対応