「js」カテゴリーアーカイブ

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でのファイル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

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

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

javascript forEachをIEで使う時の注意点 | Next Clip

[javascript]forEachをIEで使う時の注意点

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

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

【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
https://codepen.io/GreenSock/pen/LkOrKY

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’).

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

結局今の所、1)放置2)気持ち悪いけど対処する、の2択

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

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

以下経緯

続きを読む Youtubeで Failed to execute ‘postMessage’ on ‘DOMWindow’: が止まらない

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

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

Ripple Effect

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

クリックで波紋を出すエフェクト(Ripple Effect)実装メモ – Qiita
https://qiita.com/nekoneko-wanwan/items/c9f26ce049bd422e555c
続きを読む いつかやってって言われそうなエフェクトメモ

多言語対応サイトでは訪問時にどうサイトを表示させるのが良いだろう?

タイトルまんま。言語判定とかリダイレクトのお話です。

ええっと、表示方法や出し分け方法っていろいろ手法があるんやんな、どれがえんやっけ。今まで悩んだこと無いの、なんでやっけ。

サイトで多言語対応するにあたっての、ブラウザ言語設定での切り替え・出し分け・ローカライズ(?)に関する考察。

ユーザーにとってほんとに良いのはどういう挙動だろう?

これの最適解まとめたのってあんま見たことないなぁ〜と思ったので、時間出来たので調べてみました。そして調べる最中頭こんがらかったり、情報整理する必要が出たりしと挫折しそうになったので、同志のために記事にまとめました。あかんところあったらゆーて下さい。

頭に浮かんだ手法羅列

  • いったんデフォルト言語で出してユーザーが必要に応じてボタンなどから切り替え
  • URLのクエリで言語設定して該当言語のコンテンツをPHPでインクルード
  • ブラウザ言語設定を参照して該当言語のコンテンツを格納したページへリダイレクト
  • ブラウザ言語設定を参照してajaxでコンテンツをページ内で出し分け
  • PHPロケール情報から判定
  • 各言語ページの一個上の階層に親ページを用意して選択
  • 文字サイズボタンみたいにcookieで記憶させといて2回目以降訪問時に出し分け
    「コンテンツの表示の仕方」と「ユーザー言語の判定の仕方」と「ディレクトリ(URL)の作成方法」の問題が全部ごっちゃになってますが、いったん羅列、です。

結論

訪問時は特に出し分けはしない、もしくはサイトTOPへの初回訪問時のみブラウザ言語設定の言語のコンテンツを表示させるなどする(手法はJSでもPHPでも。)

サイト内に言語の切り替えボタンは必須。そこからユーザーの意志で各言語に行き来出来るようにする

最終で見ていた言語をcookieで保持しておいて次回訪問時にコンテンツをajaxで出し分け、とかもできればしない。(ユーザーが意図せぬ挙動となる可能性・検索結果が最適化されない問題)

ディレクトリ等コンテンツ自体を各言語で作成し、URLさえ叩けば目的言語のコンテンツに行けるようにするのが吉。

以上。一般的?用途?規模?のサイトにはこうかと。もちろんコンテンツの内容や構成、目的によって例外もあり。理由は次項「理由」にて。

ex)
日本語
https://example.com/
https://example.com/about/
↑↓(※共通パーツとして各言語間を行き来出来るボタンをサイト内の目立つ位置に置く)↑↓
英語
https://example.com/en/
https://example.com/en/about/

一番単純なのが吉ってことですね。

今まで悩んだこと無いのは最適と思われる形が単純なものだったからか。

出し分けの具体的な手法メモったのは下の方に移動しました。ほんとは真っ先に調べたんだけど。
記事書いていろいろ情報をたどる間にいろいろ変にいじんないほうが良さそうだなーってなったので。

理由

サイトの情報を利用するのはエンドユーザーだけではないから。検索エンジンのクローラーに正しい情報を提供する→エンドユーザーを適切なコンテンツへ導く手助けにもなるよねって話。

続きを読む 多言語対応サイトでは訪問時にどうサイトを表示させるのが良いだろう?

node nodebrew 更新 エラー

npxが動かなかったのでnode.jsを更新

しようとしたらできなかった

一旦nodebrewをインスコし直し

nodebrewでinstallが失敗するようになった – Qiita
https://qiita.com/shimitei/items/7975bc1b60cfb477817e

$ curl -L git.io/nodebrew | perl - setup

nodebrewをインスコし直し!
ここにたどり着くのに一時間かかった。
通ってよかった!

nodebrewで手軽にnode.jsバージョンアップ&バージョン切り替え – Qiita
https://qiita.com/strsk/items/db64f4dd27484a875d20

ちな確認と更新

$ nodebrew ls-remote
$ nodebrew install-binary v9.11.1
$ nodebrew use 9.11.1

ちなnode最新情報
Node.js
https://nodejs.org/en/blog/