kojiokanoのブログ

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

パラメータのcode=の値の5文字目以降を取得し表示するjavascript

以下をhead内に書き込む ---------------------------------------------------------------------------- // 一旦パラメータを取得するようにしているq=のあとを取得する :javascript window.onload = function onLoad() { param = GetQueryString(); targ…

cssのflexboxを使ってレイアウトを簡単にしよう

↓はflexboxの例。これくらいcssを用意しておくと汎用性があって便利 .flex +vender(display, flex) &--center align-items: center justify-content: center &--row-right flex-direction: row justify-content: flex-end &--row-center flex-direction: row…

ランディングページでよく使われているjs wow.js

ランディングページを見ていてよくあるスクロールした時にページの構成要素が上下左右から流れてきて定位置におさまるというアニメーション表現。 これはwow.jsというjsで簡単に実装できる 詳しくは↓などで確認 coliss.com

git pull 時に、commitエディタが出ないようにする

勝手にatomが立ち上がって↓のようにコミットメッセージを入力しろという状態になることがあるのでその対処法 --------------------------------------------------------------------------------- Merge branch 'master' of github.com:bm-sms/kaigomedia-l…

変更したくないファイルを間違ってaddした時の対処法

addしちゃったファイルを戻すコマンド↓ $ git reset HEAD app/hoge.html これでOK

mac上でiphoneを起動してサイトのビューを確認してみよう

google chromeのデベロッパーツールは便利ですが、iphoneの実機のsafariと表示が異なるところが多々あります。 macは使っているけどiphoneは持っていないとか、macもiphone7もあるけどiphone5の小さい画面での確認ができない、とかそういう場合の対処法にな…

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

ターミナルで作業するディレクトリに移動し、masterに移動。 masterで直接編集作業をする。 ----------------------------------------------------------------------- テキスト編集作業方法 ↓のコマンドをうちドッカーを走らす docker-compose up ブラウザ…

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

↓のようなエラーが出ている場合 port 3000 (Errno::EADDRINUSE) これは前回の作業でrailsが走っている状態でターミナルを終了し、表示はされていないが裏でport3000でrailsが接続されている状態になっている。エラーは既にport 3000でrailsが接続されている…

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", 'dat…

mdlボタン使い方例(haml)

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

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

・「目的」「こうしたい」「現状」を伝えることが重要 ・ 細かなコードの指定などは任せた方が良い(この指定のコードをhoge.indexの10行目に挿入してください的な頼み方はよくない。) 以下依頼参考例↓ --------------------------------------------------…

間違ってローカルの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 ----…

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

URLのパラメータを取得してLPのテキストフォームへ吐き出す。 ※db_001で使用。db_001の場合はフォームをdisplay:noneで見えないようにしてる。 ——————————————————————————————————————— js部分 window.onload = function onLoad() { param = GetQueryString…

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

1. ヘッダー内でcdnで読み込んでいるjquery.validationEngine.jsをローカルに落として該当LPのjsフォルダに入れる。 2. ヘッダー内のjquery.validationEngine.jsの読み込み先をcdnから先ほど落としたファイルに変更。 3. jquery.validationEngine.jsを編集す…

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

メガネさんにフォームのデータをもらう以下サンプル ---------------------------------------------------------------------------------- kja_domain = Domain.find_or_create_by(name: "kaigojob-agent.com", name_stg: "kja-elb-stg-10743901.ap-northe…

LP_BEM命名規則

使用例 Block__Elements--Modifire __Elements はアンダーバーを2つ使用--Modifire はハイフンを2つ使用 例 list__item--big Modifireなどで一言で命名できなければ(-)一つで繋げてあげる key-value 例 list__item--text-center クラスの付け方 主に迷うと…

thanksページの共通化(LP)

ステップの一番最後のページ(今までのthanksページにあたるページ)で以下のようにページ読み込みをする ----------------------------------------------------------------------------------------------- = render "inquiry_forms/templates/thanks/tha…

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

MDLグリッドとは MDLのグリッドを使うとレスポンシブサイトが簡単に作れるMDLグリッドの構造 ブラウザの画面を横のサイズによって3つのグリットパターンで表示する。 pc=12col ◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎ tab=8col ◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎ sp=4col ◼︎◼︎◼︎◼︎ 各col…

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

異なるプレフィックスのLP間でのURLのパラメータ引き継ぎ方法 LP164やLP859などのように一つのLPの中にもう一つのLPへの遷移が含まれる場合、URLのパラメータが引き継がれず流入元が不明になってしまう。 そこで異なるLP間での URLのパラメータ引き継ぎをjs…

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

branchはこまめに削除しましょう。 ----------------------------------------------------------------------------------------- ローカルbranchの削除方法 1.下のコマンドを打ちローカルブランチのリストを表示 git branch 2.下のコマンドを打ちブランチ…

hamlページのAMP化

AMPとは 簡単に言うと、モバイル端末でのウェブページの表示を高速化するためのフレームワークでAMPのフォーマットでモバイルサイトを構成すると、リンク先のページを高速に表示することが可能になる仕様。AMP対応のページはスマホのgoogle検索で上位に表示…

hamlで作成したフォームのplaceholder内で改行したい時の対処法

lp_861のテキストエリアで使った方法 ↓使用例 -------------------------------------------------------------------------------------- haml = f.fields_for :answers do |a| -if a.object.body.nil? = a.hidden_field :form_part_id, value: @parts[1].i…

LPのトップページをnoindex、followにする

LPの最初ページをnoindex、followにすることがあります。 そうすることでindex(検索結果での表示)を拒否しながらリンクをたどることをrobotに許可することができます。 やり方はLPの最初のページのhead内に↓の書き込みをしてあげればOK %meta{:content => "n…

テキストの組み合わせでデザインする際のポイント

文字を画像にせず、なるべくテキストで表示させたい(seo的な観点から)ということがあるかと思います。 例えば ↓のようなデザインであれば ↓のようにほとんどデザインを崩さずテキスト化が可能です(ブラウザによって見え方は多少かわります) この例のよう…

LPのBEMルール

BEMルールを共通化して誰が見ても理解できて編集しやすいLPをつくることが目標 使用例 Block__Elements--Modifire __Elements はアンダーバーを2つ使用--Modifire はハイフンを2つ使用 例 list__item--big ↑なぜこのような書き方かと言うとLPのフレームワ…

iphoneのsafariでボタンの表示がおかしくなる場合の理由と対処法

LPなどのページを作っているとき、PCのブラウザでの互換表示ではちゃんと表示できていたのに、サーバーに上げて実機でみたら表示が違ったなんてことがよくあるとおもいます。 その原因の1つとしてiphone(ios)のsafariはinput要素にグラデーションを勝手に…

LPへのPDF貼り付け方

無料でガイドを見る系のLPでpdfファイルを見せたい場合があるかと思います。 LPページではpdfは他の画像ファイルとは異なる扱いになっているためフォルダの場所なども特殊です。 以下がpdfの貼り付け方になります。 ーーーーーーーーーーーーーーーーーーー…

スマホでフォームをタップした時にテンキーが表示されるようにする

LPで電話番号などの数字を入力する項目はよくあると思います。スマホユーザーが項目をタップすると通常はテキストのキーボードが立ち上がりますが、最初からテンキーを表示してやることでページからの離脱を減らすことができるかと思います。 方法は以下これ…

LPのフォーム作成方法2

任意の項目を作る場合の注意点 必須ではない項目を複数作る場合↓のようなコードで書くと遷移先のページの項目が重複して表示されることがある。 ●1つのフォームが複数表示されるのを直す。2行目のbodyをform_part_idに変更する = f.fields_for :answers do …

ステップ分けのあるLPの遷移方法

例.3ステップ後に完了ページへと遷移する場合 ------------------------------------------------------- ●ページ構成 1ページ目・・・_form.html.haml 2ページ目・・・_form_1.html.haml 3ページ目・・・_form_2.html.haml 完了ページ・・・_thanks.html.h…