実務に役立つ記事集

実務に役立つ参考記事集(2020年6月第2週目)

今週の取り組み

・自社サイトのフォームの入力で、アルファベット以外は受け付けない仕様に変更
(メールアドレスやURLなどの文字入力を規制するscriptを追加)

・WordPressサイト修正のため、MAMPにてローカルサーバーを立てる

・商品販売用のLPを作成(第1弾)

■Git

元々依頼の依頼

①masterからdevelopmentブランチを生やして
②202006_add_formというブランチをプッシュしてから、
③developmentを作って、
④プルリク先をdevelopmentにする

git branch -a
リモートリポジトリにあるもの
(基本はcheckout・移動しない)

リモートとローカルのリポジトリのみ
・masterに移動

・masterからdevelopmentを生やす

・masterに移動

・【push】リモートmasterとローカルmasterをマージ
(git pull origin master)


・developmentに移動

・masterからマージ
(git merge master)
※ここでは、developmentとmaster(どのマスタ?)と同期?????

・developmentにプッシュ
(git push origin development)
※これでローカルとホスティング(Bitbucket)のdevelopが同期される

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

エラーが出たら・・・
git pull origin development

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

今週覚えた新しいgitコマンド

pwd
→現在地を表示する

open .
→ディレクトリを画面上に開く

mkdir ディレクトリ名
例)mkdir wp2
→ディレクトリを作成する

新サイトのブランチ作成の流れ
masterからdevelopmentを生やして、そこからさらにブランチ作成

masterから新しくブランチを生やす場合
①リモートリポジトリmasterとローカルリポジトリmasterをマージ(pull)する

②ブランチを生やす

元々あるブランチを再利用する場合
※今回は202006_add_result

①masterブランチに移動

②リモートmasterとローカルmasterをマージする
※git pull origin master

③202006_add_resultに移動

④masterと同期をとる
※git merge master
※リモートリポジトリを経由する時だけ【pull】と言う。
※ローカルリポジトリのmasterから202006_add_resultの同期を取る時は【merge】

間違えてmasterにpushした
本来ならgit push origin 202006_add_result
やりとりで時間がかかったが、結局もう一回git push origin 202006_add_resultで良かった

■docker

Dockerを理解するための8つの軸
https://thinkit.co.jp/story/2015/07/29/5382

■MAMP

ワードプレスをローカルサーバーを立てて修正する
(MAMPのインストールから設定まで)

【2020年版 MAMPでWordPressをインストールする方法】
https://webst8.com/blog/mamp-wordpress-install/

PHP MY ADMINに入ったら・・・
データベースを新規作成し、データベース名は何でも良い(サイトに書いてあるもので良い)
MAMPのhtdocsフォルダ内にwp01フォルダを作成したら、そこにSPAIAのワードプレスデータを流し込む

・複数サイトを管理する場合、wp01内にデータを流し込む
・流し込む場合はgitコマンドを使うと楽

■MAMPの設定
MAMP>Preferences>Web Server

Document Root の Selectボタンで publicを選択して selectボタンをクリック
→すると、localhostでサイトが立ち上がる
(※localhost/wp01/public/index.html などのルートを指定しなくてもよくなる)

他のサイト(wp01 wp02 wp03)を表示させたい時は、Document Rootの選択を変えてからlocalhostに飛ぶと切り替わる

■Node.js

・nodejsの使用可能なver表示(実際に端末にインストールされているものではない)

・npmのver表示
https://qiita.com/ucan-lab/items/517ee13a2f8769ab866c

■Nodeの設定

npm install

node brew list
→インストールされているverを確認

gulp build

npm -g gulp install

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

npm installでnpmをインストール

データベースについて

https://www.sejuku.net/blog/8763

■HTML

textareaタグ
https://techacademy.jp/magazine/5864

formのname属性とは?
同じinputタグ内のidと合わせる?
今回はjcityのname値に依存しているのがポイント

レスポンシブサイトのコーディングは必ずエミュレーターで確認する!

HTMLタグの中に使えるタグ
https://webliker.info/46840/

■CSS

n番目以降の指定
https://saburo-design.com/16957/

否定疑似クラス(指定以外)
https://www.sejuku.net/blog/56193

フレックスボックス(縦並びにする)
https://web-designer.cman.jp/css_ref/abc_list/flex-direction/

フレックスボックス(おまけ)
https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet

画像の下に余白ができる現象を解消する
→imgタグにdisplay: blockをかけると解消する

position: fixedでリンク先の高さがずれる問題解消CSS
https://liginc.co.jp/web/js/jquery/80140
→しかしこれだと、各要素のトップに余白ができてしまって、余白感が崩れる

そこで登場したのがこれ

ページ内リンクが固定ヘッダと重なって隠れる問題を解決するCSSのテクニック
https://coliss.com/articles/build-websites/operation/css/fixed-headers-on-page-links-and-overlapping-content.html
→一方、こちらはスマホブラウザだと機能しない

■jQuery

スムーススクロール
$(‘p’).attr(‘id’)
=pタグのid属性を取得する

スムーススクロールの実装コード
https://techacademy.jp/magazine/9532

めちゃくちゃ詳しく解説しているブログ
https://www.flatflag.nir87.com/scroll-1195