カテゴリー: 開発関連

カテゴリー
wp ソフト全般（開発用） 開発関連

Local by Flywheel の更新のたびに戦う

例のごとく久しぶりに使おうとしたら更新溜まってる→実行→エラーが出たので今度は何かな？と調べたらちゃんとまとめて記事を書いていらした。最新版DLでかいけつ！

ありがとうインターネッツ！ありがとう書いてくれた方！

Local by Flywheel をアップデートしようとしたらエラーが出た。｜あやおり子のうぇぶさいと
https://ayaoriko.com/coding/wordpress/local-by-flywheel-update-error/
カテゴリー
開発関連

Netlifyのなんちゃらイメージのやつ(ビルドイメージの更新)は意外と簡単

Netlifyでデフォのビルドイメージが変わったから2022/11/15?以降設定変更しないとビルド通んないよってメール来てたやつ。

一個目のGatsbyサイトで対応したときに書いてなかったのでメモ。（最近ローカルにメモすることが多くなってきた）
  • node-sassでコンパイルやインストールが躓く場合はバージョン問題が多いのでnodeのバージョンが正しいかをチェックする
  • コンパイルできたら最新をgithubにプッシュ
  • Netlifyにログインしてデプロイ状況を確認する
    • コケているので表示された注意文からビルドイメージの設定へ
      • Ubuntu Focalにへんこうする
      • 再度ビルドする
      • なにも問題なければコンパイル通ってデプロイ
      • わーい
以前に見て参考にさせていただいた記事も載せておこう。 【netlify】ビルドイメージを更新 [ Ubuntu Xenial 16.04 → Ubuntu Focal 20.04 ]｜notes by SHARESL
https://notes.sharesl.net/articles/2648/ ご参考まで。
カテゴリー
開発関連

【mac】ログイン項目のバックグラウンドでの許可リストに知らない子がいた

楳図かずお先生のキャラよろしく、ぎゃぁあああと言ったのですが

どうやら知ってる子だった

  • Ross Tulloch
    • 太古に入れたゴミファイルお掃除ソフトBlueHervestの製作者の名前→BlueHervestの更新チェックに多分使われている
  • AhnLab,INC.
    • 韓国系のセキュリティ会社だったので「Ahn LINE」でぐぐったらヒット　LINE WORKSのセキュリティやってたので多分LINE関係の更新に使われている

びっくりした。調べるって、大事。

カテゴリー
開発関連

WPでの時間表記

タイムゾーンを考慮したらwp_date。date_i18nは非推奨。へぇ。— hirokona (@hirokona) September 20, 2022

footerのコピーライト自動で変えてって久しぶりに言われた。 しかもグローバルサイトだったのでロケールに合わせたほうがいいかなって思って調べたら
wp_date('Y') だって。へえ。
カテゴリー
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”