カテゴリー
css 開発関連

Androidでのスクロール制御

いつもの100vhおもてたよりおっきい問題を忘れない

シーン遷移がバグってたので自戒のためメモ

シーン遷移が途中で止まっていて、なんでやろーと思って調べたらうっかりjs内でもcss内でも100vhで画面吸着シーン制御してた。
シーンのinnerの内容が画面に内に収まってるのに100vh影響でwindow.heightをdivのclientHeightが超えて、シーン内のコンテンツ溢れててスクロールがあるみたいっすよ?と判定がおかしくなってた。 JavaScriptで画面サイズを取得・変更する方法 | UX MILK
https://uxmilk.jp/28500 スマホで100vhが見切れる問題の解決方法3つ – ゴリラドット
https://gorilla.dododori.com/972/

逆にhtmlにsetした変数–vhの値をトリたければgetPropertyValueする。(今回上フリック時に一瞬iOSでwindow.innerHeightが変わっていたので、–vhをつこた) CSSStyleDeclaration.getPropertyValue() – Web API | MDN
https://developer.mozilla.org/ja/docs/Web/API/CSSStyleDeclaration/getPropertyValue
//--vh更新タイミングの調整(過去案件より)
//resizeで判定だとファーストビューから移動したときも毎度発動するのでガクガクする→回転もチェック
//orientationchangeで判定だと回転前の数値が取れる&Androidがおかしい→resizeの中で回転を判定する
window.addEventListener('resize', function() {
    if (Math.abs(window.orientation) !== orientation) {
    fixViewHeightForVideo();
    orientation = Math.abs(window.orientation);
}

あと上フリックがやりづらいとのことだったのでCSSでpull-down-to-refreshを無視させた

How to prevent pull-down-to-refresh in Mobile Chrome? – The Web Dev
https://thewebdev.info/2021/10/09/how-to-prevent-pull-down-to-refresh-in-mobile-chrome/

body だけじゃなくて htmlにもcssかけないと効かないのでお気をつけあれ。 Android の Chrome の Pull To Refresh (画面下方向へスワイプさせ、コンテンツを縦方向にオーバースクロールするとリロードするアレ) を無効化する方法 | かきしちカンパニー Web Magazine
https://www.webmagazine.kakisiti.co.jp/?p=666 overscroll-behavior-y – CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/overscroll-behavior-y

CSSでスクロールが連鎖するのを回避する古い方法とoverscroll-behaviorを使った新しいテクニック | コリス
https://coliss.com/articles/build-websites/operation/css/prevent-scroll-chaining-overscroll-behavior.html

おまけ

シーンのinnerの内容が画面に内に収まってないときのスクロールしきったかの判定がサンプルコードに。scrollHeightべんり。こういうのあるから画面吸着シーンって嫌い。(しかも負の方向に移動してるときはまた別の判定が必要という・・・)

Element.scrollHeight – Web API | MDN

https://developer.mozilla.org/ja/docs/Web/API/Element/scrollHeight



全然関係ないけど今見たら管理画面では入ってるwp:paragraphがフロントでは消えてる・・・。きっっも。また時間できたら調べよ
カテゴリー
開発関連

ちょっぱや公開後にLighthouseのスコアの相談されてやったこと

最初はちょっぱやでってオーダーだったけど

ガリガリつくってなんとか期日までに公開・・・と最終クライアント様にサイト見せたら目の付け所がシャープでしょ、って単純に成果物評価のプライオリティが想定と全然違っていたので、作った後からいろいろ軽量化を試みる流れとなった。最近はreactとかばっかいじってたから己でそこをチューニングすることなかったし、ヒェってなったので、そんなDaysのメモ。

Gzip

サイト置くのが一般のレンサバじゃなかったので、対応可否が不明でやってなかった。やった。そもそもそのあたりの情報も検証もなかったのでサーバを調べるところから・・・。心配だったけど、構築途中でNginxからApacheに仕様変わったのもあり調べた情報ですんなり行けた。よかった・・・。NginxよりApacheのほうが文献多い&先方エンジニアさん再起動とかで動かないで良いので速度だけでNginxで!って言うとweb本業じゃないエンジニアさんは多分対応大変だよ!(こっちも一緒にやってて申し訳ない感じで辛いよ!)
カテゴリー
css

フォーム系memo jsで制御する場合にもhtml5デフォルトのバリデーションを機能させる

デフォルトのバリデーションを残すmemo

formタグに onsubmitでreturn false →デフォルトのバリデーションはされるが、送信は行われない
ボタンにonclickかonsubmitでJS制御を追加

【JavaScript入門】submitイベントで入力フォームの送信処理をする | 侍エンジニア塾ブログ | プログラミング入門者向け学習情報サイト

JavaScriptのsubmitイベントで、フォーム送信をコントロールしよう

カテゴリー
css

フォーム系memo cssトグルスイッチでフォームパーツを制御

チェックボックスでトグルスイッチ

のび太スニペットくれよ〜と言わんばかりにネットで探す。

さいしょにめっけたやつ
円形、フラット、フリップ……3種類のトグルスイッチをCSSのみで作成する方法!|SeleQt【セレキュト】

Webデザイナー必見!CSSだけで作るトグルスイッチ3種【丸スタイル・2択スタイル】

結局コレ参考にしたよってやつ
Simple CSS Toggle Switch — Create a toggle switch with only a checkbox
https://danklammer.com/articles/simple-css-toggle-switch/

最初に選んでから記事が読めて便利
CSS3 Toggle Switch Button – HTML Lion
https://www.htmllion.com/css3-toggle-switch-button.html

色んなデザイン
10 Free Customizable CSS Snippets for Radio Toggles & Switches – 1stWebDesigner

10 Free Customizable CSS Snippets for Radio Toggles & Switches

How To Create a Toggle Switch
https://www.w3schools.com/howto/howto_css_switch.asp

トグルスイッチと他のパーツのdisabledを連携させる

【jQuery入門】checkboxのchecked設定や取得まとめ! | 侍エンジニア塾ブログ | プログラミング入門者向け学習情報サイト

【jQuery入門】checkboxのchecked設定や取得まとめ!

input 要素の disabled 属性と readonly 属性の違い: 小粋空間
http://www.koikikukan.com/archives/2009/04/26-003300.php

inputがdisabledの時のCSSを指定する | CloudAdvisor

inputがdisabledの時のCSSを指定する

2014-04-11 1st – jsdo.it – Share JavaScript, HTML5 and CSS
http://jsdo.it/Yukimi.Sato/5y3C

jQueryでshow/hide, addClass/removeClass, disabledの切り替えを一行で書く
https://qiita.com/nmta/items/0f5c460d135c4f72dc4a

カテゴリー
css

ひさしぶり svg IE11 高さauto バグる

bodymovinのsvg突っ込んだら久しぶりにIEさんの制御不能に出くわすなど。
height:autoナシでwidthだけCSSで指定したら治った

IEでSVGタグを使った時にheight:autoが効かない | ふたえごのWEBテクニックブログ
https://www.futaego.com/2017/ie%E3%81%A7svg%E3%82%BF%E3%82%B0%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E6%99%82%E3%81%ABheightauto%E3%81%8C%E5%8A%B9%E3%81%8B%E3%81%AA%E3%81%84/

カテゴリー
css 開発関連

【IE】いんらいんSVG めんどくさい【爆発しろ】

IEにも対応したレスポンシブSVGの作り方 | たんしおどっとねっと
https://tanshio.net/responsive-svg

レスポンシブSVGをインラインで配置するとき、IEとandroidが高さを計算しないのに対応する -『CSS』 – webmanab.html/ウェブまなぶ
https://webmanab-html.com/tip/svg-height/