カテゴリー
js 開発関連

swiperのイベント発生タイミング

タイムラインでまとめてくれてるのありがたいからメモ

【最新v8】Swiperの使い方・実用的なデモ15個の解説 ー基礎から応用までー – 東京のホームページ制作 / WEB制作会社 BRISK
https://b-risk.jp/blog/2022/04/swiper/#i-3
カテゴリー
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がフロントでは消えてる・・・。きっっも。また時間できたら調べよ
カテゴリー
js 開発関連

UA判定改定中なのでメモ

急に2,3個投稿してるけど作業中タブ閉じメモなのです

どうも、開いたままのタブを閉じるために投稿するスタンスです。

UA判定は師匠と一緒に会社で勤めてた頃から出汁（判定文）を継ぎ足し継ぎ足し使っていたので、（めんどいし）後回しにしていたのですが、他の方に引き継いでいろいろいじっていただくような案件が出てきたので
「は？BBA何書いてんの？古文書？」
と言われないように必要部分だけアプデしたのでした。

続きを読む “UA判定改定中なのでメモ”
  • タグ
カテゴリー
gulp js 開発関連

全然投稿してないね。そういやgulp-imageminやめたよ

gulp-imagemin で Error [ERR_REQUIRE_ESM]: Must use import to load ES Module と怒られる – Ewig Leere(Lab2)
https://labor.ewigleere.net/2021/08/17/gulp-imagemin-become-pure-esm-package/

gulpfile.esm.js で gulp-imagemin v8.0.0 を利用するとエラーになる – dskd
https://dskd.jp/archives/116.html

他の方が保守するのでパッケージ類を最新にしたら↑のサイトさんに書いてあるようなことが起こったので、いろいろ調べたけど最終的に今後を鑑みてimageminの処理をgulp経由の処理から外したよ。っていう話。 理由はバージョン落としてまで使う気になれなかったのと、gulpの記述を全部ESModuleに変更して検証してまで使い続けるのは手間だったので。 gulp使わないプロジェクトではnpm scriptsでimagemin実行してたのでそれをgulp利用のプロジェクトでも使うようにしました。さよならgulp imagemin…

imagemin – npm
https://www.npmjs.com/package/imagemin
imageminをrequireして怒られる – Qiita
https://qiita.com/yukiji/items/fc4a2f17de5548d27fc6
カテゴリー
js React 開発関連

Gatsbyビルドが通らなくて

結構前に書いた下書き出てきたので出しとく。
めっちゃ端折ってるけど。
死ぬんかと思った。死ななかった。

Debugging HTML Builds | Gatsby
https://www.gatsbyjs.com/docs/debugging-html-builds/

ずっとエラー文で探してはいろんなもの試したけど結局インポートしてたモジュール自体の問題だったのでそっ閉じしてgatsby-nodeにこの子通してあげてねって書いた・・・。

ありがとう公式。
ReactLazyきかへんかった

Code-Splitting – React
https://reactjs.org/docs/code-splitting.html#reactlazy

色んなものがあるのう。。
公式のチェックして無理だったらろだぶるというのもあるらしい

gregberge/loadable-components: The recommended Code Splitting library for React ✂️✨
https://github.com/gregberge/loadable-components


この方の記事めちゃんこわかりやすかっった

Gatsbyビルドエラー「window is not defined」への対処法Takumon Blog

https://takumon.com/error-about-window-is-not-available-during-server-side-rendering-gatsby
カテゴリー
開発関連

今更シリーズShopify

やっとこ案件で来たので開始前に知らべたことや雑感メモ。（2021.11当時）
続きを読む “今更シリーズShopify”
カテゴリー
開発関連

from さよならnodebrew 今までありがとう to the コニチワ anybrew + nodenv

問題なかったのでずっと放置してたnode.jsのバージョン管理。 新しく参加したプロジェクトで使ってるのがnodeenvだったので、浦島太郎は色々とメモったのでurl羅列。
nodebrewからanyenvに乗り換えた | eureka
https://mykii.blog/uninstall-nodebrew-install-anyenv/ Node.js を完全にアンインストールする – Qiita
https://qiita.com/ucan-lab/items/a662532f1ce46f152c4e Homebrew 経由の anyenv 経由の nodenv 経由で Node.js をインストールする – Qiita
https://qiita.com/ucan-lab/items/ce35bcaf2562054917a8 anyenvとnodenvでNode.jsのバージョン管理をしよう！ – to-R Media
https://www.to-r.net/media/anyenv/ anyenv + macOS環境構築 – Qiita
https://qiita.com/rinpa/items/81766cd6a7b23dea9f3c オールインワンな開発環境をanyenvで構築する
https://zenn.dev/ryuu/articles/use-anyversions

Homebrewもめっちゃ更新溜まってたすみません

Homebrew で Error: homebrew-core is a shallow clone が出て brew update が実行できない問題 | gotohayato.com
https://gotohayato.com/content/528/
カテゴリー
js

barba(v2.9.7)で.no-barba的な。

お久しぶり。 久しぶりにPjax(barba.js)使ったら、リファレンスがあるようなないような、かすっててもドンピシャのものがなかったのでがんばって公式で調べたらめっけた。 barbaのv1？ではno-barbaってclassつけたリンクはbarbaの対象外の普通の遷移になるってのあったけど、今は無いのね？？ってのをしらべた。 https://barba.js.org/docs/advanced/strategies/ 
barba.init({
  // define a custom function that will prevent Barba
  // from working on links that contains a `prevent` CSS class
  prevent: ({ el }) => el.classList && el.classList.contains('prevent')
});
英語めっちゃ時間かかったけどめっけたからシェア。みんな実装頑張れ！ お久しぶりでした。またいつか。
カテゴリー
wp

All-in-One WP MigrationでDLできないサーバがあるらしい

【All-in-One WP Migration】「サーバーに問題が発生しました」エラーの原因と対処法【WordPress】 | webico blog
https://blog.webico.work/all-in-one-wp-migration-error#i-4 プラグイン用のディレクトリに保存されているから、FTPでDLしてねって。
カテゴリー
design ソフト全般（開発用）

AEでトランジションのあるボタンを作る

案件のサイトパーツを作ってるときに、ここ注目させたいので印象的に現れるボタンにできませんか、って言われたので、SVGパーツを動かしてAEからbodymovinで書き出してみた。なにげに自分で作るのは初。
気をつけるのが、AEの機能を使ってグラデーションをアニメートしたものはwebように書き出しできないということ・・・（見事今回グラデ使っていた・・・
しかしグラデ自体はアニメートしていないようにして（全体に回転掛けてグラデを動かすとか）書き出したら行けた。
なのでグラデがあるからって全部が全部書き出しできないわけじゃないのね・・・
勉強になりました。