kojiokanoのブログ

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

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

以下をhead内に書き込む


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

// 一旦パラメータを取得するようにしているq=のあとを取得する


:javascript
window.onload = function onLoad() {
param = GetQueryString();
target = document.getElementById("param");
target.innerHTML = param["code"];

}

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]) .slice('5');

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

}
return result;
}
return null;
}

----------------------------------------------------------------------------
※赤文字部分は任意に変えて使う
----------------------------------------------------------------------------
body内の
#paramを設置した場所にパラメータの5文字目以降が吐き出される

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

パラメータ例

http://kojiokano.hatenablog.com/code=仕事を探す 東京都

↑「仕事を探す」を抜かした部分(東京都)がテキストとして吐き出される

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
align-items: center

&--row-left
flex-direction: row
justify-content: flex-start
align-items: center

&--row-top
flex-direction: row
align-items: flex-start

&--row-bottom
flex-direction: row
align-items: flex-end

&--column-center
flex-direction: column
align-items: center
justify-content: center

&--column-left
flex-direction: column
align-items: flex-start
justify-content: center

&--column-right
flex-direction: column
align-items: flex-end
justify-content: center

&--space-between
justify-content: space-between

&--vertical-center
align-items: center

&--side-left
flex-flow: wrap
justify-content: flex-end

&--side-center
justify-content: center

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

ランディングページを見ていてよくあるスクロールした時にページの構成要素が上下左右から流れてきて定位置におさまるというアニメーション表現。

これはwow.jsというjsで簡単に実装できる

詳しくは↓などで確認

coliss.com

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

勝手にatomが立ち上がって↓のようにコミットメッセージを入力しろという状態になることがあるのでその対処法

 

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

Merge branch 'master' of github.com:bm-sms/kaigomedia-landingpage

gpage

# Please enter a commit message to explain why this merge is necessary,
# especially if it merges an updated upstream into a topic branch.
#
# Lines starting with '#' will be ignored, and an empty message aborts
# the commit.

 

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

 

git pull --no-edit origin master

↑一旦これで解決

 

詳しくは↓

snickerjp.blogspot.jp

 

 

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

addしちゃったファイルを戻すコマンド↓

 

$ git reset HEAD app/hoge.html

 

これでOK

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

google chromeデベロッパーツールは便利ですが、iphoneの実機のsafariと表示が異なるところが多々あります。

macは使っているけどiphoneは持っていないとか、macもiphone7もあるけどiphone5の小さい画面での確認ができない、とかそういう場合の対処法になります。

まずmacxcodeをインストールしましょう。

あとは以下の通り、イメージとしてはmac上でiosをマウントしている感じでしょうか。

 

1. xcodeを立ち上げる。

2. 「xcode」→「open developer tool」→「simulator」でOK

 

あとはお好みの機種を選択すればiosが立ち上げsafariを起動すればiphoneと同じ表示でサイトの確認が取れます。

もともとアプリの開発向けのソフトなのでかなり正確に表示できてます。

※ちなみにホームボタンはないですがショートカットキー(shift+command+h)があるのでそれで対応しましょう。

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

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

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

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

テキスト編集作業方法

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

docker-compose up

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

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

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

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

次に ツール→

 

 

 

 

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