読者です 読者をやめる 読者になる 読者になる

jQueryValidationEngineで、フォーカス外した時にバリデーション処理をさせない方法(submitボタンを押した時だけエラーが出るようにする)

1. ヘッダー内でcdnで読み込んでいるjquery.validationEngine.jsをローカルに落として該当LPのjsフォルダに入れる。

 

2. ヘッダー内のjquery.validationEngine.jsの読み込み先をcdnから先ほど落としたファイルに変更。

 

3. jquery.validationEngine.jsを編集する。
atomなどでjquery.validationEngine.jsを開きbindedというワードで検索をかける。
該当箇所が2箇所あるが binded: true,と書かれているところの値をfalseからtrueに変更する。
下のようにする。

binded: false,

 

これだけでOK。

 

 

binded:false を指定することによって、blur event を取り除き submitボタンが押されたタイミングでしか処理しないようになる。ということらしい。

 

-------------------------------------------------------------

function.jsを書き換える方法もあるが上手くいかなかったため、やむなくこの方法で対応した。

h※psmu_001/p01に使用している。

-------------------------------------------------------------

参考ページ(なぜ表示がされなくなるかの仕組みがわかる)

http://qiita.com/rojiuratech/items/96bd154b25e4a188677e

 

 

本番,stg,devの管理画面のフォームデータをlocalに適応させる方法

メガネさんにフォームのデータをもらう以下サンプル

----------------------------------------------------------------------------------

kja_domain = Domain.find_or_create_by(name: "kaigojob-agent.com", name_stg: "kja-elb-stg-10743901.ap-northeast-1.elb.amazonaws.com")
kja_entry = EntryPoint.find_or_create_by(title: "カイゴジョブエージェント紹介")
kja_exit =ExitPoint.find_or_create_by(title: "申し込む")

Part.create(label: "お名前", input_type: 0, unique_key: "name")
Part.create(label: "電話番号", input_type: 0, unique_key: "tel")
Part.create(label: "法人名", input_type: 0, unique_key: "company")
Part.create(label: "メールアドレス", input_type: 0, unique_key: "email")
Part.create(label: "希望転職時期を教えてください[select]", input_type: 4, unique_key: "when_to_switch_jobs")
Part.create(label: "希望雇用形態を教えてください[select]", input_type: 4, unique_key: "type_of_employment")
Part.create(label: "保有資格", input_type: 1, unique_key: "qualifications_for_care")
Part.create(label: "現在までの転職回数[select]", input_type: 4, unique_key: "the_number_of_job_changes")
Part.create(label: "介護経験年数", input_type: 4, unique_key: "period_of_job_in_care ")
Part.create(label: "現在の業務内容[select]", input_type: 4, unique_key: "job_description")
Part.create(label: "関わりのあるサービスは?[checkbox]", input_type: 1, unique_key: "related_service")
Part.create(label: "興味があるソフトを選択して下さい[checkbox]", input_type: 1, unique_key: "use-soft__check")
Part.create(label: "ご利用中のソフトを教えて下さい[checkbox]", input_type: 1, unique_key: "Interest-soft__check")
Part.create(label: "会員有無", input_type: 2, unique_key: "member__radio")
Part.create(label: "設立期間を選択", input_type: 4, unique_key: "establishment__select")

kja_001 = InquiryForm.create(name: "SF連携_KJA_資格(旧lp_155)", prefix: "kja_001", domain_id: kja_domain.id, entry_point_id: kja_entry.id, exit_point_id: kja_exit.id)
kja_002 = InquiryForm.create(name: "SF連携_KJA_非公開(旧lp_156)", prefix: "kja_002", domain_id: kja_domain.id, entry_point_id: kja_entry.id, exit_point_id: kja_exit.id)
kja_003 = InquiryForm.create(name: "SF連携_KJA_高年収(旧lp_157)", prefix: "kja_003", domain_id: kja_domain.id, entry_point_id: kja_entry.id, exit_point_id: kja_exit.id)
kja_004 = InquiryForm.create(name: "SF連携_KJA_年収UP(旧lp_159)", prefix: "kja_004", domain_id: kja_domain.id, entry_point_id: kja_entry.id, exit_point_id: kja_exit.id)
kja_005 = InquiryForm.create(name: "SF連携_KJA_施設長(旧lp_857)", prefix: "kja_005", domain_id: kja_domain.id, entry_point_id: kja_entry.id, exit_point_id: kja_exit.id)
kja_006 = InquiryForm.create(name: "SF連携_KJA_MM(旧lp_858)", prefix: "kja_006", domain_id: kja_domain.id, entry_point_id: kja_entry.id, exit_point_id: kja_exit.id)
kja_007 = InquiryForm.create(name: "SF連携_KJA_SMS_改善(旧lp_173)", prefix: "kja_007", domain_id: kja_domain.id, entry_point_id: kja_entry.id, exit_point_id: kja_exit.id)
kja_008 = InquiryForm.create(name: "SF連携_KJA_高待遇(旧lp_176)", prefix: "kja_008", domain_id: kja_domain.id, entry_point_id: kja_entry.id, exit_point_id: kja_exit.id)
kja_009 = InquiryForm.create(name: "SF連携_KJA_アンケート(旧lp_177)", prefix: "kja_009", domain_id: kja_domain.id, entry_point_id: kja_entry.id, exit_point_id: kja_exit.id)
kja_010 = InquiryForm.create(name: "SF連携_KJA_介護福祉士(旧lp_179)", prefix: "kja_010", domain_id: kja_domain.id, entry_point_id: kja_entry.id, exit_point_id: kja_exit.id)

kja_forms = [kja_001, kja_002, kja_003, kja_004, kja_005, kja_006, kja_007, kja_008, kja_009, kja_010]

# kja_001_parts_key = ["qualifications_for_care", "period_of_job_in_care ", "type_of_employment", "when_to_switch_jobs", "job_description", "the_number_of_job_changes"]
# kja_002_parts_key = ["qualifications_for_care", "period_of_job_in_care ", "type_of_employment", "when_to_switch_jobs", "job_description", "the_number_of_job_changes"]
# kja_003_parts_key = ["qualifications_for_care", "period_of_job_in_care ", "type_of_employment", "when_to_switch_jobs", "job_description", "the_number_of_job_changes"]
# kja_004_parts_key = ["qualifications_for_care", "period_of_job_in_care ", "type_of_employment", "when_to_switch_jobs", "job_description", "the_number_of_job_changes"]
# kja_005_parts_key = ["qualifications_for_care", "period_of_job_in_care ", "type_of_employment", "when_to_switch_jobs", "job_description", "the_number_of_job_changes"]
# kja_006_parts_key = ["qualifications_for_care", "period_of_job_in_care ", "type_of_employment", "when_to_switch_jobs", "job_description", "the_number_of_job_changes"]
# kja_007_parts_key = ["qualifications_for_care", "period_of_job_in_care ", "type_of_employment", "when_to_switch_jobs", "job_description", "the_number_of_job_changes"]
# kja_008_parts_key = ["qualifications_for_care", "period_of_job_in_care ", "type_of_employment", "when_to_switch_jobs", "job_description", "the_number_of_job_changes"]
# kja_009_parts_key = ["qualifications_for_care", "period_of_job_in_care ", "type_of_employment", "when_to_switch_jobs", "job_description", "the_number_of_job_changes"]
# kja_010_parts_key = ["qualifications_for_care", "period_of_job_in_care ", "type_of_employment", "when_to_switch_jobs", "job_description", "the_number_of_job_changes"]

parts_key = ["qualifications_for_care", "period_of_job_in_care ", "type_of_employment", "when_to_switch_jobs", "job_description", "the_number_of_job_changes"]

kja_forms.each do |form_obj|
parts_key.each.with_index do |key, index|
form_obj.form_parts.build(order: index+1, part_id: Part.find_by_unique_key(key).id).save
end
end

# kja_001.form_parts.build(order: 1, part_id: Part.find_by_unique_key('qualifications_for_care').id).save

# 2017/03/07
Part.create(label: "事業運営にあたり興味ある項目", input_type: :text, unique_key: "caremanagement_interest")
Part.create(label: "運営規模", input_type: :text, unique_key: "base_number")
Part.create(label: "介護ソフトのリースが1年以上残っているか?", input_type: :text, unique_key: "caresoft_lease_year")
Part.create(label: "利用中のソフト名", input_type: :text, unique_key: "caresoft_inuse")
Part.create(label: "立場を教えてください", input_type: :checkbox, unique_key: "customer_position")
Part.create(label: "関わりのあるサービスは?", input_type: :checkbox, unique_key: "careservice_type")
Part.create(label: "開業時期", input_type: :selectbox, unique_key: "establishment_year")

biz_001 = InquiryForm.create(name: "SFA連携_処遇改善加算LP", prefix: "biz_001", domain_id: 1, entry_point_id: 1, exit_point_id: 1)

parts_key = %w(customer_position careservice_type name tel company email caremanagement_interest base_number establishment_year caresoft_inuse caresoft_lease_year)

parts_key.each.with_index do |key, index|
biz_001.form_parts.build(order: index+1, part_id: Part.find_by_unique_key(key).id).save
end

https://bm-sms.slack.com/files/nashiro/F4FMJVD19/db_seed_rb.js

----------------------------------------------------------------------------------

 

↑をseeds.rbにコピペする

 

seeds.rbの以下↓をコメントアウトする

----------------------------------------------------------------------------------

テストデータ用
customer_list = []
500.times do |i|
customer_list << Customer.new(name: "test_data_2000k_#{i}", tel: "090200101#{i}", email: "test_data_2000k_#{i}@example.com", company: "test_data_2000k_#{i}company")
end

----------------------------------------------------------------------------------

 

 ↓のコマンドを打ちフォーム内容を管理システムに反映させる。

 

 

bundle exec rake db:seed

 

うまくいけば何も表示されない

1回だけ叩くようにする(23回連続で叩いてはいけない)

LP_BEM命名規則

使用例

Block__Elements--Modifire

__Elements はアンダーバーを2つ使用
--Modifire はハイフンを2つ使用

例 list__item--big

Modifireなどで一言で命名できなければ
(-)一つで繋げてあげる

key-value

例 list__item--text-center

クラスの付け方

主に迷うときはModifireを使用する時かと思いますが例をあげておきます。


.list .list--big
.list__item .list__item--big

ファイル単位

style.sass

  1. importはここで行う
  2. blockごとにコメントをつけてあげる(検索用)
  3. ブロックの命名参考 http://qiita.com/manabuyasuda/items/dbb76ed36970bec95470

_mixin.sass

_variable.sass
変数を書くところ

_base.sass
生のタグを書くところ


header
main
footer
ul

_js.sass
js関連のcssはここにまとめる
ライブラリなどの場合で命名規則がBEMではない場合があると思いますがその部分はBEMに変換する必要性はない気がします。(時短という意味合いで!)
理想は変えてあげるほうがいい

_mdl.sass
MDLの書き換えを行うところ多分あまり使わないと思いますがフレームワークには微調整がつきものかと思いますので!

thanksページの共通化(LP)

ステップの一番最後のページ(今までのthanksページにあたるページ)で以下のようにページ読み込みをする

-----------------------------------------------------------------------------------------------

= render "inquiry_forms/templates/thanks/thanks_hoge"

-----------------------------------------------------------------------------------------------

 

hogeの部分を変えることでパターンを使い回す。

MDLのgridを使ったレスポンシブサイト作成法(sass,hamlの場合)

MDLグリッドとは

MDLのグリッドを使うとレスポンシブサイトが簡単に作れる

MDLグリッドの構造

ブラウザの画面を横のサイズによって3つのグリットパターンで表示する。

pc=12col  ◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎

tab=8col   ◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎

sp=4col        ◼︎◼︎◼︎◼︎

各col数分だけ一度に並べて表示ができる。

綺麗に表示するためにはpcの場合tabの場合spの場合をクラスで設定してやる必要がある。

 

作成例1
・pcでは4列、tabでは2列、spでは1列で表示する場合

=========================

1.
head内でmaterial.min.cssを読み込む

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

= stylesheet_link_tag "//cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.2.1/material.min.css", 'data-turbolinks-track' => true

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

 

2.親要素にクラス(.mdl-grid)を追加
※.mainというdivを親とする

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

    .main.mdl-grid

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

 

3.子要素を追加しpcようのレイアウトをclassで指定(12÷4=3colづつ)

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

  .main.mdl-grid
    .mdl-cell.mdl-cell--3-col
      hoge

    .mdl-cell.mdl-cell--3-col
      hoga
    .mdl-cell.mdl-cell--3-col
      hogo
    .mdl-cell.mdl-cell--3-col
      hogu

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー


3.
子要素(.mdl-cell)を追加しpc用のレイアウトをclassで追加(.mdl-cell--3-col
※(12col÷4列=3colづつ)

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

  .main.mdl-grid
    .mdl-cell.mdl-cell--3-col
      hoge

    .mdl-cell.mdl-cell--3-col
      hoga
    .mdl-cell.mdl-cell--3-col
      hogo
    .mdl-cell.mdl-cell--3-col
      hogu

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

 


4
.tab用のレイアウトをclassで追加.mdl-cell--4-col-tablet
※(8col÷2列=4colづつ)

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

  .main.mdl-grid
    .mdl-cell.mdl-cell--3-col.mdl-cell--4-col-tablet
      hoge

    .mdl-cell.mdl-cell--3-col.mdl-cell--4-col-tablet
      hoga
    .mdl-cell.mdl-cell--3-col.mdl-cell--4-col-tablet
      hogo
    .mdl-cell.mdl-cell--3-col.mdl-cell--4-col-tablet
      hogu

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

 

5.sp用のレイアウトをclassで追加.mdl-cell--4-col-phone
※(4col÷1列=4colづつ)

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

  .main.mdl-grid
    .mdl-cell.mdl-cell--3-col.mdl-cell--4-col-tablet.mdl-cell--4-col-phone
      hoge

    .mdl-cell.mdl-cell--3-col.mdl-cell--4-col-tablet.mdl-cell--4-col-phone
      hoga
    .mdl-cell.mdl-cell--3-col.mdl-cell--4-col-tablet.mdl-cell--4-col-phone
      hogo
    .mdl-cell.mdl-cell--3-col.mdl-cell--4-col-tablet.mdl-cell--4-col-phone
      hogu

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

 

 

作成例2
・pcでは5列、tabでは2列、spでは1列で表示する場合

※pcのグリッド数が12colで5列で割ることができないので最初と最後の1colを非表示にする形で対応する

=========================

1.
head内でmaterial.min.cssを読み込む

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

= stylesheet_link_tag "//cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.2.1/material.min.css", 'data-turbolinks-track' => true

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

 

2.親要素にクラス(.mdl-grid)を追加
※.mainというdivを親とする。最初と最後の1colを表示しないので親要素のmax-widthを作成例1よりも大きくしておく。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

    .main.mdl-grid

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

 

3.子要素を追加しpcようのレイアウトをclassで指定(1col,2col,2col,2col,2col,2col,1col,
pc以外では最初と最後の1colを非表示にする(.displaynone)を追加

※.displaynoneは任意のstyle.sassに書き込むwidthが840px以内の時にdisplay:noneにする。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

  .main.mdl-grid
    .mdl-cell.mdl-cell--1-col.displaynone

    .mdl-cell.mdl-cell--2-col
      hoge
    .mdl-cell.mdl-cell--2-col

      hoga
    .mdl-cell.mdl-cell--2-col
      hogo
    .mdl-cell.mdl-cell--2-col
      hogu
    .mdl-cell.mdl-cell--2-col
      hogi
   .mdl-cell.mdl-cell--1-col.displaynone

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー


4.
tab用のレイアウトをclassで追加(.mdl-cell--4-col-tablet
※(8col÷2列=4colづつ)

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

  .main.mdl-grid
    .mdl-cell.mdl-cell--1-col.displaynone

    .mdl-cell.mdl-cell--2-col.mdl-cell--4-col-tablet
      hoge
    .mdl-cell.mdl-cell--2-col.mdl-cell--4-col-tablet

      hoga
    .mdl-cell.mdl-cell--2-col.mdl-cell--4-col-tablet
      hogo
    .mdl-cell.mdl-cell--2-col.mdl-cell--4-col-tablet
      hogu
    .mdl-cell.mdl-cell--2-col.mdl-cell--4-col-tablet
      hogi
   .mdl-cell.mdl-cell--1-col.displaynone

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

 

5.sp用のレイアウトをclassで追加.mdl-cell--4-col-phone
※(4col÷1列=4colづつ)

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

  .main.mdl-grid
    .mdl-cell.mdl-cell--1-col.displaynone

    .mdl-cell.mdl-cell--2-col.mdl-cell--4-col-tablet.mdl-cell--4-col-phone
      hoge
    .mdl-cell.mdl-cell--2-col.mdl-cell--4-col-tablet.mdl-cell--4-col-phone

      hoga
    .mdl-cell.mdl-cell--2-col.mdl-cell--4-col-tablet.mdl-cell--4-col-phone
      hogo
    .mdl-cell.mdl-cell--2-col.mdl-cell--4-col-tablet.mdl-cell--4-col-phone
      hogu
    .mdl-cell.mdl-cell--2-col.mdl-cell--4-col-tablet
      hogi
   .mdl-cell.mdl-cell--1-col.displaynone

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

 

6.任意のstyle.sassに.displaynoneを書き込む

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

@media screen and (max-width: 840px)
  .displaynone
    display: none

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

参考画像

 

f:id:kojiokano:20170302152655p:plain

f:id:kojiokano:20170302152710p:plain

f:id:kojiokano:20170302152720p:plain




///////////////////////////////////////////////////////////////////////

参考サイト

getmdl.io

///////////////////////////////////////////////////////////////////////

URLの値を引き継ぐ(複数LP間での遷移)

異なるプレフィックスのLP間でのURLのパラメータ引き継ぎ方法

LP164やLP859などのように一つのLPの中にもう一つのLPへの遷移が含まれる場合、URLのパラメータが引き継がれず流入元が不明になってしまう。

そこで異なるLP間での URLのパラメータ引き継ぎをjsでできるようにする。

やり方は以下。

---------------------------------------------------------------------------------------------------

●遷移の元になるページに読み込ませるjs(function.jsなどの任意のjsに貼り付けて読み込めばOK)

 

// LP間のURLパラメーター引き継ぎ遷移元
jQuery(function(){
var arg = new Object;
var pair=location.search.substring(1).split('&');
for(var i=0;pair[i];i++) {
var kv = pair[i].split('=');
arg[kv[0]]=kv[1];
}
jQuery("a").each(function() {
var obj = jQuery(this);
var link = obj.attr("href");
obj.attr("href",link+"?code="+arg.code+"&gclid="+arg.gclid)
});
});

 

---------------------------------------------------------------------------------------------------

---------------------------------------------------------------------------------------------------

---------------------------------------------------------------------------------------------------

---------------------------------------------------------------------------------------------------

 

  上の例だとページ内のaタグ全てにパラメータがついてしまい、ページ内遷移や利用規約へのリンクが動かなくなるその場合は↓のようにする。 

---------------------------------------------------------------------------------------------------


●遷移の元になるページに読み込ませるjs(function.jsなどの任意のjsに貼り付けて読み込めばOK)
ここでaタグではなくclass名で指定してやる。

 

// LP間のURLパラメーター引き継ぎ遷移元
jQuery(function(){
var arg = new Object;
var pair=location.search.substring(1).split('&');
for(var i=0;pair[i];i++) {
var kv = pair[i].split('=');
arg[kv[0]]=kv[1];
}
jQuery(".js-page-link").each(function() {
var obj = jQuery(this);
var link = obj.attr("href");
obj.attr("href",link+"?code="+arg.code+"&gclid="+arg.gclid)
});
});

 

 

---------------------------------------------------------------------------------------------------

 

●遷移元hamlのリンクタグにclass( js-page-link)を付ける。以下リンク例。

 

%a(href="/forms/lp_860" target="_self" class="btn-2 js-page-link" content="nofollow")

---------------------------------------------------------------------------------------------------

 

branchの削除(リモート、ローカル)

branchはこまめに削除しましょう。

-----------------------------------------------------------------------------------------

ローカルbranchの削除方法

1.下のコマンドを打ちローカルブランチのリストを表示

   git branch

2.下のコマンドを打ちブランチを1つづつ削除

   git branch -d ブランチ名


※マージしていないブランチは上のコマンドでは削除できないので下のコマンドで強制削除する。

   git branch -D ブランチ名

-----------------------------------------------------------------------------------------

リモートbranchの削除方法

1.下のコマンドを打ち全てのブランチのリストを表示

   git branch -a

 

2.リスト上部にローカルのブランチが表示され下部にリモートブランチが表示されるので、下のコマンドを打ち不要なブランチを1つづつ削除

   git push origin :ブランチ名

※他人が使っているブランチもあるので慎重に削除しましょう。