ECのウェブ担当者のメモ

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

スポンサーリンク

JSON形式のWEB APIをすぐにホスティングできるサイトを作りました

APIって便利ですよね。

ここ最近。色々なサービスでAPIが提供されていて JSONを扱う機会が増えて来ていると感じる今日この頃です。

そんな時代に開発をしていると、ちょっとスタブがわりのJSONが欲しいんだけどー

っていう、フロント系エンジニアは多いんじゃないでしょうか?

そんな方(自分)の為にJSON形式のWEB APIをすぐにホスティングできる JSON OKIBA (https://json.okiba.me/)というサイトを作りました!

JSON OKIBAはこちら

↓こちら↓

最短30秒でJSON形式のWEB APIを公開 | JSON OKIBA

↑こちら↑

f:id:jun9632:20180528230238p:plain

使い方

使い方は、とっても簡単!

  1. 返却して欲しい、jsonを書く
  2. 保存ボタンをクリック
  3. アクセス用URLが生成

以上。

最短 30秒で自分用のJSON形式のWEB APIを公開できるとうたっています。

頑張ればもっと短くできるはず!!

サンプルのjson や JSONの書き方も書いてあらので是非ご参考に。

Rubyで複数の区切り文字で文字列を配列に変換したい!

f:id:jun9632:20180525231031p:plain

例えば

str = 'aaaa+bbbb cccc'

の文字列を

['aaaa', `bbbb', 'cccc']

にしたいんだよね!という時の話です。

解決案

個人的にたどり着いたのは

一回置換しよう!

str.gsub('+', ' ').split(/[[:blank:]]+/)

です。

「+」を「 」スペース に置換してから

「 」スペースでsplitです。

以上です。

関連記事

marketing-web.hatenablog.com

marketing-web.hatenablog.com

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