カテゴリー: js

カテゴリー
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')
});
英語めっちゃ時間かかったけどめっけたからシェア。みんな実装頑張れ！ お久しぶりでした。またいつか。
カテゴリー
js React 開発関連

ReactSlick天地中央

css – Vertical align content slickslider – Stack Overflow
https://stackoverflow.com/questions/37455322/vertical-align-content-slickslider 
.slick-track {
  display: flex;
}
.slick-track .slick-slide {
  display: flex;
  height: auto;
  align-items: center;
  justify-content: center;
}
カテゴリー
js React

gatsby-imageで死にそうになる

公式を最初に読まない自分が悪い

qiitaの記事見て「へえ！Gatsbyではgatsby-image使うんがマストなんか〜」と思って
develop中は良かったがいざbuildしようとするとエラーの嵐で恐ろしく躓いた

多分原因はバージョンのミスマッチ。途中でコマンドラインで言われるがままにgatsbyと他にもいくつか更新してからの気がする・・・
gatsby自体なのかどれかのプラグインなのか・・・
それ以降延々とエラーの原因を探し続けることに・・・
アップデートはホント作業落ち着いてから似すればよかった。

という戯言はさておき、メモメモ

とりあえず入門

GatsbyJSのimageを使ってみよう – Crieit
https://crieit.net/posts/GatsbyJS-image

パスを渡せばgatsby-imageで画像を表示してくれるコンポーネントの作成方法Takumon Blog
https://webcache.googleusercontent.com/search?q=cache:28cNeHbHP88J:https://takumon.com/simple-gatsby-image-wrapper+&cd=1&hl=ja&ct=clnk&gl=jp

gatsby-image | Gatsby
https://www.gatsbyjs.com/plugins/gatsby-image/

Gatsby.jsの画像最適化プラグインのgatsby-imageを使おう！ – Qiita
https://qiita.com/tkkrr/items/34f384956fb968a30fe5#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB

Gatsby：イメージ（画像）を表示させるための作法 – Qiita
https://qiita.com/atomyah/items/e6aebf0a0abe3d488787#%E3%82%B9%E3%82%BF%E3%83%86%E3%82%A3%E3%83%83%E3%82%AF%E3%81%AB%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%82%93%E3%81%A7%E8%A1%A8%E7%A4%BA%E3%81%95%E3%81%9B%E3%82%8B

エラーのときにみたやつ

死ぬほどあったけど残ってない

Error: The result of this StaticQuery could not be fetched. · Issue #24902 · gatsbyjs/gatsby
https://github.com/gatsbyjs/gatsby/issues/24902

カテゴリー
js React

JSでのファイルDL download blob axios react

変なとこでハマりました

基本素直にWebに落ちてる内容で行けそうなのにいざDLすると真っ白なpdfが・・・
ハマりました。

結局わかったこと

responseType: ‘blob’　ダイジ・・・

axiosの設定って知らないと通り過ぎそうになるけど、ちゃんとファイルが来るよ〜〜って
指定しないと準備できてないから、ちょ、待てよバリに空白のファイルがDLされてたみたい。

Ajaxで複数ファイルをダウンロードさせる方法 – console dot log

Ajaxで複数ファイルをダウンロードさせる方法

sonota

これではなかった

ボタンを押されたらaxiosで取得したBlobデータをダウンロードさせたくてやった事 – Qiita
https://qiita.com/tk_zawa/items/a0e65e7a9106a6535c79

ファイルをダウンロードさせるには？［JavaScript］：.NET TIPS – ＠IT
https://www.atmarkit.co.jp/ait/articles/1603/30/news026.html

【JavaScript】各ブラウザでダウンロード処理を実装する（Chrome, Firefox, IE, MS Edge, Safari） | Black Everyday Company
https://kuroeveryday.blogspot.com/2016/05/file-download-from-browser.html

jsでダウンロードを実装した話 – Qiita
https://qiita.com/Ohtak/items/b7fb05c4e3dee13c0d1f

jsでファイルを一括ダウンロードしてみる – Qiita
https://qiita.com/saki_kawa/items/ecf24297943a37ce0626

ファイルをダウンロード保存する方法 – JavaScript の基本 – JavaScript 入門
https://javascript.keicode.com/newjs/download-files.php#1-3

Blob() – Web APIs | MDN
https://developer.mozilla.org/en-US/docs/Web/API/Blob/Blob

カテゴリー
js

JS !! ビックリマーク２つはboollenやで。

誰かの役に立ちますように。

JavaScript – Javascriptで !! ←この意味がわかりません｜teratail
https://teratail.com/questions/146649

カテゴリー
js

バグじゃないけどIEさんよ・・・！

DOMがらみで要素指定してのforEachは気をつけよう

javascript forEachをIEで使う時の注意点 | Next Clip
http://nextclip.net/front-end/185

JSONとかのArrayからのforEachは大丈夫みたい？
死ぬかと。

参考

IEで NodeList を forEach するとエラーになる問題の対処方 – Qiita
https://qiita.com/snjssk/items/8d179566b023703c0663

おまけ
forEach vs map in JavaScript – Qiita
https://qiita.com/Uuparu/items/e9867cb6c48736700a4f

おまけ２
async-awaitでもforEachしたい！ – Qiita
https://qiita.com/jkr_2255/items/62b3ee3361315d55078a

カテゴリー
js

【tweenMax→gsap】tweenMaxの名前変わってた件。。

久々につかおうとしてgsap3にしたらtweenMaxの呼び出しがうまく行かんかったのでメモ。

tweenMax→gsapへ変更されました

yes, gsap is the replacement for TweenMax.

GSAP 3 css – GSAP – GreenSock
https://greensock.com/forums/topic/21864-gsap-3-css/

インストールについてはこちらから

GreenSock | Docs | Installation
https://greensock.com/docs/v3/Installation

利用例（プラグインScrollToPluginの場合）

ScrollToPlugin – Plugins – GreenSock
https://greensock.com/scrolltoplugin/

ScrollToPlugin: Scroll to Element

カテゴリー
js 開発関連

未だにjQuery→素のJSでググり倒すのでメモ

逆引きしやすいものから順に並べる。

一覧たすかります

You Might Not Need jQuery
http://youmightnotneedjquery.com/

続きを読む “未だにjQuery→素のJSでググり倒すのでメモ”
カテゴリー
js 開発関連

Youtubeで Failed to execute ‘postMessage’ on ‘DOMWindow’: が止まらない

なんじゃこりゃ

Failed to execute ‘postMessage’ on ‘DOMWindow’: The target origin provided (‘https://www.youtube.com’) does not match the recipient window’s origin (‘http://sample.com’).

去年は普通に動いていたはずのサイトで、上記のエラーが出ているので調べた。

結局今の所、１）放置２）気持ち悪いけど対処する、の２択

<script src="https://www.youtube.com/iframe_api"></script>

をサイトに読み込ませればいいが、JavascriptIframeApiでも同じ領域を読み込ませるようにしているので、最終的なソースでは二重に呼び出すこととなり、気持ち悪い。。。というわけで、今の所、放置するか、気持ち悪いけど上記スクリプトを読ませるかの二択。

以下経緯

続きを読む “Youtubeで Failed to execute ‘postMessage’ on ‘DOMWindow’: が止まらない”
カテゴリー
css js

いつかやってって言われそうなエフェクトメモ

いつかやってって言われそうだから調べたやつ、すぐわすれるメモ。

Ripple Effect

クリックしたところが波紋のように反応するgoogleさんが大好きなやつ

クリックで波紋を出すエフェクト（Ripple Effect）実装メモ – Qiita
https://qiita.com/nekoneko-wanwan/items/c9f26ce049bd422e555c

続きを読む “いつかやってって言われそうなエフェクトメモ”