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;
}
.slick-track {
display: flex;
}
.slick-track .slick-slide {
display: flex;
height: auto;
align-items: center;
justify-content: center;
}
実装のはざまで時間が出来たので、gatsbyで作ったお知り合いのサイトを地道に改善していくべくlighthouseで点数とか見てた。
WebP対応しろってか。変換めんどいのう、、と思ってなにげに調べたら
https://www.gatsbyjs.com/docs/gatsby-image/#image-query-fragments
ブレークポイントの管理について・
結局関数作るので、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/
結局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/
デフォルト対応ブラウザはブラウザシェア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
これで解決
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
まごつき2~3時間掛かった。
時間もったいないのでワールドピースのためにシェア。
ワールドピース。
注意点、このページの内容はご参考までで、実際にはgatsby公式のプラグイン紹介ページから、最新のgatsby-configの書き方を参照すること!
gatsby-plugin-manifest | Gatsby
https://www.gatsbyjs.com/plugins/gatsby-plugin-manifest/#using-with-gatsby-plugin-offline
さて。
・オフラインで閲覧できる
・アプリ的にsafariじゃなくスタンダロンで起動させる
・gatsby-plugin-manifest
・gatsby-plugin-offline
→公式参照してgatsby-configの設定きちんと書けばできる。
→gatsby-plugin-offlineの設定を追記する
gatsby-starter-defaultだとコメアウトされてる
→gatsby-starter-defaultのgatsby-plugin-manifestの設定を調整
{ 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*'] } } }
helmetでのheadへの追記とか書いてる記事あるけどいらないっぽい
よかったよかった。
最新のPWA対応非対応環境は調べてね。
追記
この記事のタイトルにたったこれだけ!と追記した。
たったこれだけだよ〜
見れるようになるまで検証に時間かけるのなんて私だけだった、というくらいみんなサクサク実装できればいいな。
最近過渡期ばっかり。楽しい構築ライフを。
ワールドピース。
主にアクセシビリティについてたくさん小言を言われた気がする。
そんとき調べたことメモ
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
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
へえへぇすみませんねぇ・・・
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
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
とても良くまとまっている。素敵。
とりあえずmyfirstprojectとか適当な名前で手を動かしながら見てたら基本の流れがほぼ把握できる。
ありがたや。
Firebase Hosting を使った静的サイトのホスティング方法 | by Kazuki Yonemoto | Medium
https://medium.com/@yonemoto/firebase-hosting-%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E9%9D%99%E7%9A%84%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AE%E3%83%9B%E3%82%B9%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0%E6%96%B9%E6%B3%95-3e0bac58d09c
GatsbyJSのStarterを比較する | dvg-179
https://dvg.179.jp/201803-gatsby-starter/
html+cssイケる人はいっちゃんシンプルなやつをカスタムしていくのが吉
(サーバーサイドのひとが多いのか、よくmaterialUI前提とかのやつある
スタイルの上書きとかじゃっかん癖があるけどずっと使っていくならmaterialUI前提とかのやつ使うのも吉)