カテゴリー
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
カテゴリー
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;
}
カテゴリー
React ソフト全般(開発用) 開発関連

【gatsby-image】ワレwebP生成してくれるやんけワレェ!!【見直したわ】

実装のはざまで時間が出来たので、gatsbyで作ったお知り合いのサイトを地道に改善していくべくlighthouseで点数とか見てた。
WebP対応しろってか。変換めんどいのう、、と思ってなにげに調べたら

gatsby-image使ってたらwebP指定したら自動生成してくれるやんけワレェ!!!

https://www.gatsbyjs.com/docs/gatsby-image/#image-query-fragments

カテゴリー
React

breakpoint with styled-components

ブレークポイントの管理について・
結局関数作るので、styled-components便利なのか何なのかわかんなくなってきた。
mixin→jsのmixin
cssでmixin作ってなきゃ一つでOK。
多分全部JSでやりたいバックエンドの人とかには便利なんだな。

この世は便利になっているのか、messなchaosなのか・・・
cssのvariableもそう。ie使えないからフォールバック二度手間。。
用法用量はサイトのプライオリティ守ろうね。

How to create a breakpoint mixin with styled-components | Tobias Lindström
https://tobbelindstrom.com/blog/how-to-create-a-breakpoint-mixin-with-styled-components/

How to use media queries with styled components
https://jsramblings.com/how-to-use-media-queries-with-styled-components/

カテゴリー
React

reactでFacebook Page Plugin をリサイズ

結局iframeをそのまま突っ込んでwidthをstateで持つようにしました。
Re-render a React Component on Window Resize | Pluralsight
https://www.pluralsight.com/guides/re-render-react-component-on-window-resize

javascript – How to get a width of a div when using ReactJS? – Stack Overflow
https://stackoverflow.com/questions/57641047/how-to-get-a-width-of-a-div-when-using-reactjs

react-hosymf – StackBlitz

その他(まえはjsでsdk叩いてたなー)
なんかうまくいきませんでした。
Responsive width Facebook Page Plugin – Stack Overflow
https://stackoverflow.com/questions/29429296/responsive-width-facebook-page-plugin/31971705

なんかエラー出たときに見たみたい
javascript – Facebook SDK error: init not called with valid version – Stack Overflow
https://stackoverflow.com/questions/53232654/facebook-sdk-error-init-not-called-with-valid-version

Gatsby ソーシャルボタンを画面遷移時にも正しく表示する方法 | MMMブログ
https://blog.mmmcorp.co.jp/blog/2020/05/18/gatsby-social-button/

カテゴリー
React 開発関連

gatsbyでのie11対応

デフォルト対応ブラウザはブラウザシェア1%以上、現存する(死んでない)バージョン、だったら現状はie11も入ってるやろうし何もしないでいいはず・・・と思うのだけど、
ターゲットブラウザにie11を追記したら動くようになったっぽい。

GatsbyJSのIE 11対処方法 – Qiita
https://qiita.com/mako-tos/items/4eba04a8d1206bc00bfe

How to get Gatsby to work in Internet Explorer 11 | by Nicholas Feitel | Level Up Coding
https://levelup.gitconnected.com/how-to-get-gatsby-to-work-in-internet-explorer-11-7aecedcb22ba

カテゴリー
React

reactでのブラウザサイズ監視

これで解決
Re-render a React Component on Window Resize | Pluralsight
https://www.pluralsight.com/guides/re-render-react-component-on-window-resize

その他

Reactでwindowに対して、resizeイベントを登録していた時のエラー – Qiita
https://qiita.com/oedkty/items/f76a7da72130b1e762fa

javascript – How to get a width of a div when using ReactJS? – Stack Overflow
https://stackoverflow.com/questions/57641047/how-to-get-a-width-of-a-div-when-using-reactjs

カテゴリー
React

【メッモ】たったこれだけ!gatsbyで構築したサイトでPWA対応!

必要なもの全部入ってるのに!!まごついた!!

まごつき2~3時間掛かった。
時間もったいないのでワールドピースのためにシェア。
ワールドピース。

何回言えばわかる。最初に読むのはqiitaじゃなく公式だよ!!!わかったかい!

注意点、このページの内容はご参考までで、実際にはgatsby公式のプラグイン紹介ページから、最新のgatsby-configの書き方を参照すること!

gatsby-plugin-manifest | Gatsby
https://www.gatsbyjs.com/plugins/gatsby-plugin-manifest/#using-with-gatsby-plugin-offline

さて。

PWAの機能の中でも今回やりたかっただたこと

・オフラインで閲覧できる
・アプリ的にsafariじゃなくスタンダロンで起動させる

starterとしてgatsby-starter-default使用していたら必要なプラグインは入っているよ!ヤッタネ!!

・gatsby-plugin-manifest
・gatsby-plugin-offline

今回やりたかっただたことの設定したのこと

→公式参照してgatsby-configの設定きちんと書けばできる。

オフラインで閲覧

→gatsby-plugin-offlineの設定を追記する
gatsby-starter-defaultだとコメアウトされてる

スタンダロンで起動

→gatsby-starter-defaultのgatsby-plugin-manifestの設定を調整

gatsby-configのplugins部分に追記する内容

{
   resolve: 'gatsby-plugin-manifest',
   options: {
      name: `GatsbyJS`,
      short_name: `GatsbyJS`,
      start_url: `/`,
      background_color: `#f7f0eb`,
      theme_color: `#a2466c`,
      display: `standalone`,
      icon: `src/images/icon.png`, // This path is relative to the root of the site.
      cache_busting_mode: 'none'
   }
},
{
   resolve: 'gatsby-plugin-offline',
   options: {
      workboxConfig: {
         globPatterns: ['**/icon-path*']
      }
   }
}

gatsby-plugin-manifestで必要なファビコンは自動生成される

helmetでのheadへの追記とか書いてる記事あるけどいらないっぽい

Mac,iPad,iPhoneでホームに追加。サイトひと通り見た後ならオフラインで動くのを確認。

よかったよかった。
最新のPWA対応非対応環境は調べてね。

追記
この記事のタイトルにたったこれだけ!と追記した。
たったこれだけだよ〜
見れるようになるまで検証に時間かけるのなんて私だけだった、というくらいみんなサクサク実装できればいいな。
最近過渡期ばっかり。楽しい構築ライフを。
ワールドピース。

カテゴリー
React

my first gatsby 警告たくさん出てチッチチッチ言いながら直したメモ

いやサクッとサイト作るのにそこまで気が回ってないだけなんやけどさ

主にアクセシビリティについてたくさん小言を言われた気がする。
そんとき調べたことメモ

warning Visible, non-interactive elements with click handlers must have at least one keyboard listener

クリックだけじゃなくてkeyboardエベントでも発火できるようにねって。

javascript – How to add a keyboard listener to my onClick handler? – Stack Overflow
https://stackoverflow.com/questions/48575674/how-to-add-a-keyboard-listener-to-my-onclick-handler

Static HTML elements with event handlers require a role

aタグパーツの役割を示してねって言われた(渡しの場合はボタン)

reactjs – How to fix ‘Static HTML elements with event handlers require a role.’? – Stack Overflow
https://stackoverflow.com/questions/54274473/how-to-fix-static-html-elements-with-event-handlers-require-a-role

warning Elements with the ‘button’ interactive role must be tabbable

たばぶるってなに、って思ったらTABKeyでもフォーカス移動できるようにしてねって話だった

へえへぇすみませんねぇ・・・ javascript – How to fix ‘button’ interactive role must be focusable – Stack Overflow
https://stackoverflow.com/questions/56441825/how-to-fix-button-interactive-role-must-be-focusable

[new!]A control must be associated with a text label

aria-labelをつけなさいだって〜

javascript – A control must be associated with a text label – Stack Overflow
https://stackoverflow.com/questions/58367013/a-control-must-be-associated-with-a-text-label
<i
   role="button"
   aria-label="Mute volume"
   className={classN}
   onClick={this.muteVolume}
   onKeyDown={this.muteVolume}
 />
だって〜
カテゴリー
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