referrerについての実装メモ
referrerとは
document.referrerプロパティは、リファラー（リンク元URL）を参照。
Document.referrer プロパティは、このページへ「リンク」していたページの URI を返します。
参考リンク
仕様
日本語・英語ページのTOP,もしくは指定のページ以外へ行ったらその導線を出現させたい。
出現は最初の1回のみで同一サイトをいく場合、処理を行わない。
ページの階層
├── index.html // 英語版か日本語版のどちらへいくか → MAINTOP ├── en │ ├── index.html // 英語版のTOPページ → ENTOP │ └── other.html // 英語版のTOPページ以外(複数) → ENOTHER └── jp ├── index.html // 日本語版のTOPページ → JPTOP └── other.html // 日本語版のTOPページ以外(複数) → JPOTHERT
動作
MIANTOPへいくと処理しないENTOP,ENOTHER,JPTOP,JPOTHERTの初回アクセス時には処理を行うENTOP→ENOTHERの場合にはENOTHERページでは処理を行わないENTOP→ENOTHER(1回目)→ページ閉じる→ENOTHER(2回目)の場合は、ENTOP,ENOTHER(2回目)のみ処理を行う
※ENOTHER(2回目)はurl直打ちや履歴から訪れる前提ENOTHERの一部ページのみ処理を行わない
今回作成したもの
Github
Page
作成した手順
http://localhost:8080/jp/other2.htmlから http://localhost:8080/jp/index.html へいく場合
今回はどのように動いているか見るためにページ移動での様子を記載しています。
現在のurlとページの名前を取得する
現在のページを取得し、.htmlの部分を取得する
var pathName = location.pathname.split('/') // ["", "jp", "index.html"] var pageName = pathName[2] // index.html
referrerを使って前のページの情報を取得する
同一ページから来た判定(ページ内移動)として referrerHost
var referrerAry = document.referrer.split('/') // ["http:", "", "localhost:8080", "jp", "other2.html"] var referrerHost = referrerAry[2] // localhost:8080
条件に合ったら処理を行う
referrerHostがサイトのurlが同じではないかurl直打ちかlocalhost:8080のページではないかlocalhost:8080/jp/other2.htmlのページではないか
の条件に合ったら処理を行う。
if( (referrerHost != location.host || referrerHost === '') && pageName != '' && pageName != 'other2.html' ) { // 何かしらの処理 }
実装に使おうと思った候補
cookie
最初は〇〇分たったら出そうと思ったが、1分で離脱してまた来る人もいれば1時間いる人も思ったので、時間の切替は無理だと思い不採用
session
ページにいる間はずっと情報を保持してくれると思ったが、ページ1からページ2へ行くと情報がなくなってしまうと思い不採用
iosでモーダルの高さ100vhがいい感じに反応してくれない
iosでモーダルの高さを100vhにしたときに下のコンテンツが上手く表示されなかったので、そのときの対応したことのメモ
jsでの高さ取得については今回は省略します。
実際にどんな状態か
See the Pen modal-viewport-ng by miwa_shuntaro (@miwashutaro0611) on CodePen.
現状行っているコードについて
仕様のマークアップ
上のコードは一部タグ省略。
<button type='button'>モーダルが開く</button><!-- モダールを開くためのボタン --> <div class='modal'> <div class='modal--header'> <!-- 上の固定部分 --> <button type='button'>モーダルが閉じる</button> </div> <form class='modal__inner'> <div class='modal__inner--content'><!-- スクロールする部分 --> <input type='text' value='' /> <!-- ここからいろいろ続く --> </div> <div class='modal__inner--footer'> <!-- 下の固定部分 --> <button type='submit'>フォームの内容送信</button> </div> </form> </div>
.modal
モーダル全体の大枠を作成
- 通常時
.modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; display: none; background-color: rgba(0, 0, 0, 0.5); }
- モーダルが出現したら
.modal.is-open { display: block; opacity: 1; pointer-events: auto; }
.modal--header
モーダルが出現した時の上部分
.modal--header { position: absolute; top: 0; right: 0; left: 0; z-index: 11; margin: 0; height: 56px; background-color: #f00; }
.modal__inner--content
実際に要素がスクロールする部分
.modal__inner--content { overflow-y: scroll; box-sizing: border-box; padding: 56px 0 60px; height: 100vh; -webkit-overflow-scrolling: touch; }
.modal__inner--content__text .modal__inner--content__text > p
高さを100vh以上いくための仮埋めなので、省略。
.modal__inner--footer
モーダルが出現した時の下部分
.class { position: fixed; right: 0; bottom: 0; left: 0; z-index: 11; padding: 4px 12px; height: 60px; background-color: #0ff; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2); }
解決方法
See the Pen modal-viewport-ok by miwa_shuntaro (@miwashutaro0611) on CodePen.
現状行っているコードについて
<button type='button'>モーダルが開く</button><!-- モダールを開くためのボタン --> <div class='modal'> <div class='modal--header'> <!-- 上の固定部分 --> <button type='button'>モーダルが閉じる</button> </div> <form class='modal__inner'><!-- スクロールする部分をここに変更 --> <div class='modal__inner--content'> <input type='text' value='' /> <!-- ここからいろいろ続く --> </div> <div class='modal__inner--footer'> <!-- 下の固定部分 --> <button type='submit'>フォームの内容送信</button> </div> </form> </div>
.modal
.modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; display: none; height: 100%; /* 親要素の高さを取得する */ background-color: rgba(0, 0, 0, 0.5); }
.modal--header
変更なし
.modal__inner
.modal__inner { overflow-y: auto; box-sizing: border-box; margin-top: 56px; /* header分marginを空ける */ height: calc(100% - 60px - 56px); /* 100% - header分の高さ - footer分の高さ */ -webkit-overflow-scrolling: touch; }
.modal__inner--content
ここにあった既存の要素は削除
.modal__inner--footer
変更なし
補足
スクロールエリアを.modal__innerではなく、.modal__inner--contentのままにした場合は
.modal__inner
.modal__inner { height: 100%; }
.modal__inner--content
.modal__inner--content { overflow-y: auto; box-sizing: border-box; margin-top: 56px; /* header分marginを空ける */ height: calc(100% - 60px - 56px); /* 100% - header分の高さ - footer分の高さ */ -webkit-overflow-scrolling: touch; }
のように対応すればできる。
なぜ起こるのか
height: 100% と height: 100vh の違い
100% を指定した場合 要素の縦幅は画面の縦幅からアドレスバーを差し引いた高さとなります。
100vh を指定した場合 要素の縦幅は画面の縦幅と同じ高さになります。
によって取得できる高さが違うため。
https://hysryt.com/archives/1092 より画像・テキストを引用
また、包含ブロックに対して height: 100%を宣言すれば height: 100%で高さを取得することができるため、今回は height: 100% で対応。
https://w3g.jp/css/guide/contining_block より参考
その他参考リンク
cssでの色の管理
色の取得をしてくれるもの
基本的な書き方
css
通常
:root { --blue: #00f; } .className { color: var(--blue); /* 青色 */ }
scss
通常
$blue: #00f;
.className {
color: $blue; // 青色
}
パレットを使ってそこで管理
$palettes: (
'default': (
'blue': #00f
),
'footer': (
'dark': #333
)
);
@function palette($palette-type, $palette-group: 'default') {
@return map-get(map-get($palettes, $palette-group), $palette-type);
}
.className {
color: palette('blue'); // #00fが適応される
}
参考 : https://www.nxworld.net/tips/color-palettes-using-sass-maps.html
stylus
通常
$blue = #00f .className color $blue // 青色
パレットを使ってそこで管理
COLOR_Palette = {
default: {
back: #fff,
text: #323232,
},
firstview: {
back: #e7f3ff
},
}
MixinColorPalette(type, pattern = default)
return COLOR_Palette[pattern][type]
.className
color MixinColorPalette(text) // #323232 が適応される
参考 : https://chaika.hatenablog.com/entry/2016/11/30/114217
所感
長期的に運用していくものだと、コンテンツがどんどん増えていくと思う&色ベースで管理した方が事故が起こりにくいと思うので、
$palettes: (
'blue': (
'main': #2681e7,
'dark': #2c3e51
),
'monotone': (
'black': #333,
'white': #fff
)
);
のような「色ベース」で管理した方が良いと思った。
逆に更新がほとんどされないもの(コーポレートサイトなど)だと コンテンツはそんなに増えていかない(増えたとしてもコンテンツ内で色を追加すればよい)&「〇〇の色は青」みたいな方が伝えやすいと思うので、
$palettes: (
'default': (
'text': #333
),
'btn': (
'main': #2681e7,
'blue': #0000ff,
),
);
のような「コンテンツベース」で管理した方が良いと思った。
cssジェネレーターについて
cssを作っていく上で便利そうなジェネレーターメモ。
図形
CSS三角形作成ツール
url : http://apps.eky.hk/css-triangle-generator/ja
使い方
- 左側の「方向」や「サイズ」を変更
- 右側の「CSS」の部分に書き出されるので、それをコピーして使う
吹き出し作成ツール
url : http://www.cssarrowplease.com/
使い方
- 左側の「Position」や「Size」などを変更
- 右側にcssが書き出されるので、それをコピーして使う
border-radius作成ツール
url : https://9elements.github.io/fancy-border-radius/
使い方
イージング
cubic-bezier
url : https://cubic-bezier.com/
使い方
- 左側の曲線の赤い点・青い点を色々触る
cubic-bezier(.17,.67,.83,.67)の部分が変更し、「GO!」のボタンで動きを確認できる（赤い四角）- 「Library」の部分を触ると青い四角の方の動きを変更できる
Ceaser
url : https://matthewlein.com/tools/ceaser
使い方
- 「Easing」のプルダウンか左側の曲線部分から変更できる
変更できる種類
- 「Duration」の部分で動く秒数を指定可能
- 作成したコードについては下の方にある「Code snippets, short and long-hand:」から取得することができる
影
box-shadowとborder-radiusジェネレーター
url : http://www.bad-company.jp/box-shadow/
使い方
- 「borderの設定」などで各種設定可能
- 「ソースコード」からコードを取得することができる
text-shadowジェネレーター
url : http://www.bad-company.jp/text-shadow/
使い方
- 「shadowの設定」などで各種設定可能
- 「ソースコード」からコードを取得することができる
アイコン
CSS ICON
url : https://cssicon.space/#/
使い方
- 左側のアイコンを選択(CSS ICON のロゴも選択できる)
- 右側に
HTML,CSSがでるので、それをコピーして使う
色
グラデーションジェネレーター
url : https://www.colorzilla.com/gradient-editor/
使い方
- 左側から色などを変更
- 右側のcssから取得することができる
配置
flexbox
url : https://suiq.jp/flex-layout-generator/
使い方
- 左側から並べたい要素を選択
- 右下からcssを取得
Grid
url : https://cssgrid-generator.netlify.com/
使い方
- 配置したい順番で左側のボックスをクリック
- 右側の「Columns」や「Column Gap」で配置数や余白を調節できる
- 右側の「Please may I have some code」の部分をクリックするとモーダルが出てくるので、そこから
HTML,CSSをコピーして使う
ホバー
cssfx
url : https://cssfx.dev/
使い方
- 「Bubble」などをホバー or フォーカスで動きを確認
- 要素をクリックすることで
HTML,CSSを取得可能
CSS WANT
url : https://www.csswand.dev
使い方
- 「Grow」などをホバー or フォーカスで動きを確認
- 要素をクリックすることで
HTML,CSSを取得可能
Transform
CSS Transform Simulator
url : https://nagasawaaaa.github.io/css-transform-simulator/
使い方
CSS3 Transform
url : https://css-transform.moro.es/
使い方
いろいろ
CSS3 Generator
使い方
text-shadow の場合
余白
line-heightの余白を調整できるジェネレーター
url : http://text-crop.eightshapes.com/
使い方
- 「Configure the Crop」のオレンジと青色の部分を変更。ここでフォントやサイズについても変更可能
- 「Confirm the Result」で余白について確認
- 「Copy the Code」でcssをコピー
CSSジェネレーターリンク
ESlint, prettierを使ってjavascript, vueのコード品質を保つ
scssのコード品質については stylelint,prettierを使ってscssのコード品質を保つ - みわのブログを参考。
また、.jsと.vueが混在しているプロジェクトを想定。(.jsについてはjQueryも使っている想定)
eslint, prettierをインストール
$ yarn add babel-eslint eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-prettier eslint-plugin-vue
参考
- babel-eslint - npm
- eslint - npm
- eslint-config-airbnb - npm
- eslint-config-prettier - npm
- eslint-plugin-import - npm
- eslint-plugin-prettier - npm
- eslint-plugin-vue - npm
prettierrcの設定・.eslintrc.jsonの設定
.prettierrc
{ "printWidth": 120, "tabWidth": 2, "useTabs": false, "singleQuote": true, "proseWrap": "preserve" }
参考
.eslintrc.json
{ "env": { "es6": true, "browser": true, "jquery": true // if use $ }, "plugins": [ "import" ], "parserOptions": { "parser": "babel-eslint", "sourceType": "module", "allowImportExportEverywhere": false }, "extends": [ "airbnb-base", "eslint:recommended", "plugin:vue/recommended", "plugin:prettier/recommended" ], "globals": { "gon": true }, "rules": { "semi": [ "error", "never" ], "comma-dangle": [ "error", "never" ], "no-param-reassign": [ "error", { "ignorePropertyModificationsFor": [ "state" ] } ], "prettier/prettier": [ "error", { "printWidth": 120, "singleQuote": true, "trailingComma": "none", "semi": false } ] } }
参考
- prettierの使い方 - Qiita
- ESLintとPrettierを併用するときの設定(eslint-plugin-prettier, eslint-config-prettier) - dackdive’s blog
- Vue.jsにPrettier環境を設定するときのメモ - Qiita
- もうprettierで消耗したくない人へのvueでのeslint設定 - Qiita
- Prettier 入門 ～ESLintとの違いを理解して併用する～ - Qiita
- Vue.jsスタイルガイドとeslint-plugin-vue検証ルールのマッピング - Qiita
- 運用中のVue.jsプロジェクトにESLintを入れるためにやったこと - Qiita
- ESLintのエラールール。日本語ざっくり解説スタイル編 - Qiita
package.json(npm script)
app/frontend/javascriptsよりも下にjs,vueファイルを入れている場合。
{ "scripts": { "lint:javascript": "eslint --fix app/frontend/javascripts/**/*.{js,vue}" }, }
Variable Fontについて少し調べてみた
Variable Fontとは
一つのフォントから複数の太さや幅などいろいろなものを変更できるフォント。
Variable Fontについていろいろと試すことができるサイト
ブラウザのサポート状況
https://caniuse.com/#search=font-variation-settings
実装について
font-variation-settings の値を使って簡単なアニメーション。
See the Pen oNvQVaB by miwa_shuntaro (@miwashutaro0611) on CodePen.
触ってみての所感
- テキスト自体のアニメーションができると思ったので、演出周りがもう少し広げることができそう。
- どのフォントでもできるというわけでもないので、アニメーションを入れる場合などでもちゃんと場面を選ばないといけさなそう
参考url一覧
cssアニメーションについてメモ
CSSアニメーションについて
CSS TransitionとCSS Animationの2つの機能がある。
CSS Transition,Transform
単純な動きのアニメーションを実装する時に利用する。 トグルボタン、ドロワーメニュー、など
Transitionについて
translate（移動）、scale（縮尺）、rotate（回転）など図形を変形させたいときに使用する
Transformについて
:hoverされたときなどに時間をかけて変化させたいときに使用する
CSS Animation
キーフレームアニメーションを適用できる機能。
ローディングアニメーションなどの細かい動きのアニメーションを実装する時に利用する。
Transition,Transform,Animationの3つの違い簡単に説明
transform・・・変形(傾けたり、拡大縮小)
taransition・・・変遷(時間をかけて状態変わる)
animation・・・Flashのような細かいアニメーション
参考：https://www.greenwich.co.jp/blog-archives/p/5760
jsのアニメーションとの違い
- サイドからナビゲーションメニューをスライドさせたり、ツールチップを表示したりする場合はcss
- アニメーションを細かく制御する必要がある場合（ボタンを押したら動くなど）は、JavaScript を使用
- 使う場面を選ぶ(ボタン押したら、表示範囲になったらなど)場合は、動きはcssでも大丈夫だが、js(classの付加など)も少し記載する
CSS Transitionについて
- hoverなどのアニメーションで使用
- 要素をつけたり消したりしてアニメーションを行う
書き方
まとめて指定できるプロパティ。
- transition-property
- transition-duration
- transition-delay
- transition-timing-function
ex.) transition:all 0.5s 0.1s ease;
1. transition-property
どのプロパティにアニメーションを適用するか指定するプロパティ。
2. transition-duration
アニメーション開始から終了までの所要時間を指定するプロパティ。
3. transition-delay
アニメーションが開始するまでの遅延時間を指定するプロパティ。
4. transition-function
アニメーションのイージングを指定するプロパティ。
宣言できるイージングについて
| 値 | 読み方 | 説明 | cubic-bezierで表した値 |
|---|---|---|---|
| ease（初期値） | イーズ | 開始時と終了時は緩やかに変化 | cubic-bezier(0.25, 0.1, 0.25, 1.0) |
| linear | ライナー | 開始から終了まで一定に変化 | cubic-bezier(0.25, 0.1, 0.25, 1.0) |
| ease-in | イーズ・イン | 開始時は緩やかに変化、終了に近づくと早く変化 | cubic-bezier(0.0, 0.0, 1.0, 1.0) |
| ease-out | イーズ・アウト | 開始時は早く変化し、終了時は緩やかに変化 | cubic-bezier(0.42, 0.0, 1.0, 1.0) |
| ease-in-out | イーズ・イン・アウト | 開始時と終了時は、かなり緩やかに変化 | cubic-bezier(0, 0, 0.58, 1.0) |
| cubic-bezier(x軸の値, y軸の値, x軸の値, y軸の値) | キュービック・ベジェ | 変化の度合いを3次ベジェ曲線で指定 | - |
cubic-bezierのカスタマイズ
- chromeのジェネレーター
trantionのeaseの左側にある~みたいな記号を選択
その後に画像のようなジェネレーターが出てくるの
- webのジェネレーター
http://matthewlein.com/ceaser/
CSS Animationについて
animationプロパティと@keyframesを使うと、CSSだけでアニメーションの設定ができる
書き方
animetionの書き方
animation-nameの値
- animation-durationの値
- animation-timing-functionの値
- animation-delayの値
- animation-iteration-countの値
- animation-directionの値
- animation-fill-modeの値
- animation-play-stateの値
の順番でスペースで区切って記入する
| 値 | 説明 | 初期値 |
|---|---|---|
| animation-name | アニメーションの名前 | none |
| animation-duration | アニメーションが始まって終わるまでの時間 | 0 |
| animation-timing-function | アニメーションの進行の度合い | ease |
| animation-delay | アニメーションが始まる時間 | 0 |
| animation-iteration-count | アニメーションの繰り返し回数 | 1 |
| animation-direction | アニメーションの再生方向を指定 | normal |
| animation-fill-mode | アニメーションの開始前、終了後のスタイル | none |
| animation-play-state | アニメーションの再生・停止 | running |
| animation | 上記、8つのプロパティを一括で指定できる、ショートハンドプロパティ | - |
.anime {
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state;
}
.anime {
animetion: anime1 5s ease -2s infinite alternate none running;
}
セレクタ名 {
animation: 名前 開始から終了までの時間 進行の度合い 開始時間 繰り返し回数 再生方向 開始前・終了後のスタイル 再生・停止;
}
↑ 順番は順不同で指定できるが、
animation-durationとanimation-delay
のみ宣言が同じ(秒数)のため、最初の秒数がanimation-duration、後の秒数がanimation-delayが呼び出される。
1. animation-name
@keyframesで記述した内容を記述
(@keyframesはあとで説明・・・)
この段階では動作はするが、アニメーションはしない
2. animation-duration
アニメーションが始まって終わるまでの時間を指定する
秒数(s)やミリ秒数(ms)を使って行う
3. animation-timing-function
変化の度合いを指定できるプロパティ
基本的なものについては表の1-8で、特殊な変化をさせたい、自分で設定したいときにはcubic-bezierを使用する
- 使うことができるもの
| No | 値 | 説明 |
|---|---|---|
| 1 | ease | 初期値です。開始時と終了時は緩やかに変化します。 |
| 2 | ease-in | 開始時は緩やかに変化、終了に近づくと早く変化します。 |
| 3 | ease-out | 開始時は早く変化し、終了時は緩やかに変化します。 |
| 4 | ease-in-out | 開始時と終了時は、かなり緩やかに変化します。 |
| 5 | linear | 開始から終了まで一定に変化します。 |
| 6 | step-start | 開始時に最終の状態になります。 |
| 7 | step-end | 終了時に最終の状態になります。 |
| 8 | steps(正数, start または end) | 指定した正数の段階で変化します。第2引数には start または end を指定できます。start を指定すると、アニメーション開始時から変化します。end を指定すると、アニメーション終了時に変化します。 |
| 9 | cubic-bezier(x軸の値, y軸の値, x軸の値, y軸の値) | 変化の度合いを任意で指定します。 |
4. animation-delay
アニメーションを開始する時間を指定することができる
使い方はanimation-durationのときと同じ
5. animation-iteration-count
アニメーションを繰り返す回数
1回の場合は1,3回の場合は3,無限に繰り返したい場合はinfiniteを指定する
6. animation-direction
アニメーションの再生方向
| 値 | 説明 |
|---|---|
| normal | 毎回、指定した通り（順方向）のアニメーションが再生 |
| reverse | 毎回、逆方向からのアニメーションが再生 |
| alternate | 順方向、逆方向のアニメーションを交互に繰り返し |
| alternate-reverse | 逆方向、順方向のアニメーションを交互に繰り返し |
7. animation-fill-mode
アニメーションの開始前、終了後のスタイルを指定させるか
| 値 | 説明 |
|---|---|
| none | アニメーションで指定したスタイルは、アニメーションの開始前、終了後には適用されない |
| forwards | アニメーション終了時のスタイルがアニメーション終了後にも適用される |
| backwards | アニメーション開始時のスタイルがアニメーション開始前にも適用される |
| both | forward と backwards の両方が適用される |
8. animation-play-state
アニメーションの再生・停止を指定できるプロパティ
| 値 | 説明 |
|---|---|
| running | アニメーションが実行されます。 |
| paused | アニメーションが停止されます。 |
keyframeについて
keyframeの書き方
@keyframes 任意の名前 {
0% {
CSSプロパティ:値;
}
100% {
CSSプロパティ:値;
}
}
@keyframes 任意の名前 {
from {
CSSプロパティ:値;
}
to {
CSSプロパティ:値;
}
}
0%orfromはアニメーション開始時、100%or toはアニメーション終了時
複数のアニメーションを指定したいときには,で区切る
@keyframes fadeIn{
・・・
}
@keyframes fadeOut{
・・・
}
.sample {
width: 50px;
height: 50px;
background: #ef0000;
animation: fadeIn 3s, fadeOut 3s 5s forwards;
}
fadeInは0-3秒、fadeOutは3-5秒で効果が適応される
まとめ(最低限覚えておくと良いこと)
@keyframes
説明
アニメーション流れ（開始から終了まで）を細かく指定できる。基本的にはanimationとセットで利用する。
使用場面
アニメーション開始時は透明で終了時には不透明にするなど。
animation
説明
アニメーションが開始するタイミングや、開始時から終了時までの時間などを指定できる。
基本的には@keyframesとセットで利用する。
使用場面
3秒後にアニメーションを開始して、5秒後にアニメーションを終了するなど。
transform
説明
移動や回転、伸縮、傾斜などの変形を指定できる。
使用場面
右方向へ30px移動、X軸方向に回転するなど。
transition
説明
特定のCSSプロパティに対して、どのタイミングで、どのくらいの時間をかけて変化するか指定できる。基本的にはhoverなどの疑似クラスに対しての変化を指定する。
使用場面
マウスオーバーしたときに3秒かけて変化するなど。
