kojiokanoのブログ

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

github管理しているデータを修正しwordpressに反映させる方法(旧cp)

ターミナルで作業するディレクトリに移動し、masterに移動。

masterで直接編集作業をする。

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

テキスト編集作業方法

↓のコマンドをうちドッカーを走らす

docker-compose up

ブラウザで localhost:9000 を表示させ、wordpressを開く

ログインし→ダッシュボード→ツール→search regexへと行き編集したい文言を探す。

(search regexが入っていない場合はプラグインで検索してインストールする。)

編集したら「更新」ボタンを押し修正を反映させる。

次に ツール→

 

 

 

 

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

rails sが走らない時の対処法

↓のようなエラーが出ている場合

port 3000 (Errno::EADDRINUSE)

これは前回の作業でrailsが走っている状態でターミナルを終了し、表示はされていないが裏でport3000でrailsが接続されている状態になっている。
エラーは既にport 3000でrailsが接続されているので更にrails sをすることはできないことを意味している。

そこで↓のコマンドを打ちport 3000に接続しているものの一覧を表示させる

lsof -i :3000

接続一覧の中でPID(接続ID)の欄に4桁の数字が表示されるので、
その接続を↓のコマンドで切断する。(※部分にPIDの数字を入れる)

kill ※※※※

複数、接続されている場合は、かくPIDの接続を切断してやる

port 3000への接続がなくなれば新たにrails sで接続できるようになる。

ターミナルを落とす際にはrails の接続をcontrol+Cで切断するように心がけるとこのようなエラーが出なくなる。

mdlアイコンの使い方例

hamlのhead内で↓を読み込む

= stylesheet_link_tag "//cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.2.1/material.min.css", 'data-turbolinks-track' => true
= stylesheet_link_tag "//fonts.googleapis.com/icon?family=Material+Icons", 'data-turbolinks-track' => true

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

style.sassでアイコンを表示させたいクラスのbeforeかafterを指定する↓

 

&::before
  +vender(display, flex)
  align-items: center
  +material-icons
  content: 'navigate_next'
  font-size: 35px
  color: #fff
  +vender(transition, .2s)

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

mixin.sassにmaterial-iconを使うためのコードを書く↓

 

=material-icons
font-family: 'Material Icons'
-webkit-font-smoothing: antialiased
text-rendering: optimizeLegibility
-moz-osx-font-smoothing: grayscale
font-feature-settings: 'liga'

 

mdlボタン使い方例(haml)

%button.mdl-button.mdl-js-button.mdl-button--raised
  MDLボタンテスト

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

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

・ 細かなコードの指定などは任せた方が良い(この指定のコードを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" => 'お名前を入力してください。' }

 ※赤文字部分重要