kojiokanoのブログ

コーディング業務で困ったところをまとめています。

他部署のエンジニアさんへの依頼方法

・「目的」「こうしたい」「現状」を伝えることが重要

・ 細かなコードの指定などは任せた方が良い(この指定のコードをhoge.indexの10行目に挿入してください的な頼み方はよくない。)

 

 

以下依頼参考例↓

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

目的

1 介護DB内の資料請求ボタンを押した先のLPをbiz_lpに変更したい
2 ボタンデザインも変更したい
3 どこの事業所ページからきたのか知りたいのでパラメータを付与していただきたい

リンク先ページ

https://hogehoge-form.net/forms/hoge_002/p01

変更の対象は以下の3ページになります

[PC] ボタン画像とリンク先の変更
検索結果ページ
例:http://hogehoge.com/pref/08/
事業所詳細ページ
例:http://hogehoge.com/jigyousho/08-717-20160411155206-320/

[SP] リンク文言とリンク先の変更
事業所詳細ページ
例:http://hogehoge.com/jigyousho/08-717-20160411155206-320/

リンク文言:資料を見る(無料)

ボタン画像は以下の2つになります

PC 事業所詳細ページ用

f:id:kojiokano:20170418110027p:plain


PC 検索結果ページ用

f:id:kojiokano:20170418110035p:plain


パラメータは↓のように付与してください。

https://hoge-form.net/forms/hoge_002/p01?jigyousho_and_service_id=00-000-00000000000000-000

※urlの末尾と" ? "の間に" / "が入らないようにして頂きたいです。(hoge_LPの遷移ができなくなってしまう為)


以上になります。宜しくお願いいたします。

 

 

 

 

間違ってローカルのmasterで作業してaddしてcommitしちゃった時の対処法

1.masterの名前を変更する

 git branch -m hoge

 

2.masterブランチがローカルに無いことを確認

 git branch

 

3.masterブランチを復活させる

 git checkout master

 

4.作業があるブランチhogeに移動し、作業を確認しpushする

 git ch hoge

 git push origin hoge

 

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

※git stashよりもこのやり方のほうがわかりやすいのでおすすめ。

urlのパラメータを取得し、value(フォームテキスト)に設定する方法

URLのパラメータを取得してLPのテキストフォームへ吐き出す。

※db_001で使用。db_001の場合はフォームをdisplay:noneで見えないようにしてる。

———————————————————————————————————————

 js部分

 


window.onload = function onLoad() {
param = GetQueryString();
target = document.getElementById("param").defaultValue=param["jigyousho_and_service_id"];
target.innerHTML = param["jigyousho_and_service_id"];
}
function GetQueryString() {
if (1 < document.location.search.length) {
// 最初の1文字 (?記号) を除いた文字列を取得する
var query = document.location.search.substring(1);

// クエリの区切り記号 (&) で文字列を配列に分割する
var parameters = query.split('&');

var result = new Object();
for (var i = 0; i < parameters.length; i++) {
// パラメータ名とパラメータ値に分割する
var element = parameters[i].split('=');

var paramName = decodeURIComponent(element[0]);
var paramValue = decodeURIComponent(element[1]);

// パラメータ名をキーとして連想配列に追加する
result[paramName] = decodeURIComponent(paramValue);
}
return result;
}
return null;
}

 ※赤文字部分を任意のパラメータid名に変更して使用する。 

 ※jsは外部ファイル化して任意の場所に保存しておく。

———————————————————————————————————————

 haml 1.head内で上のjsを読み込む

 

 = javascript_include_tag "jquery.example-param.js", 'data-turbolinks-track' => true

 

 haml 2.bodyにパラメータ値を設定したいフォームを書く

 

  .box--hidden.border-box
= f.answer_for :parameter do |a|
= a.text_field :body, class: 'form_item', id:'param', type:'text', value:'', :"data-prompt-position" => 'topLeft:0,10', data: { :"errormessage-value-missing" => 'お名前を入力してください。' }

 ※赤文字部分重要

 

 

 

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の部分を変えることでパターンを使い回す。