hihihi のすべての投稿

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でのブラウザサイズ監視

これで解決
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

【メッモ】たったこれだけ!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対応非対応環境は調べてね。

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

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

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

my first Firebase + gatsby Project

参考サイトをメモ

基本のき(ありがたや

とても良くまとまっている。素敵。
とりあえず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

starterについて

GatsbyJSのStarterを比較する | dvg-179
https://dvg.179.jp/201803-gatsby-starter/

html+cssイケる人はいっちゃんシンプルなやつをカスタムしていくのが吉
(サーバーサイドのひとが多いのか、よくmaterialUI前提とかのやつある
スタイルの上書きとかじゃっかん癖があるけどずっと使っていくならmaterialUI前提とかのやつ使うのも吉)
続きを読む my first Firebase + gatsby Project

ゴン・・・お前・・・MySQL5.1だったのか・・・

WP管理画面でアップデートしてね☆って出たからサクッとアップデートしようとさくらの記事ググったら5.1は古すぎるから自分でやれって流れで引いた。けど簡単にできた。

参考サイト(ありがたや〜

WordPress MySQL 移行メモ (5.5 → 5.7) – さくらサーバー | てまりうた

WordPress MySQL 移行メモ (5.5 → 5.7) – さくらサーバー

MySQL 5.1 to 5.7 | Paepoi Blog

MySQL 5.1 to 5.7

わたしの場合はDB名がそのまま移行できる形じゃなかった

ので、違うDB名で新規作成→シンクロ?→wp-configの編集のときにDB名も新しいDB名に変更
うまくいきました。
良かったね。
これで早くなって。(きぼう

ついでにサイトヘルスに出ていた他の項目も対応していく

Server Environment – Make WordPress Hosting

Server Environment

php.iniに追加してねって

参考サイト(ありがたや〜

imagickがインストールされていない、の解決方法【WPサイトヘルス】

「imagickがインストールされていない」解決方法【WPサイトヘルス】

firebase+ムームードメイン 独自ドメインの設定をする、ドメインをさくらサーバと共用する

わけわからんくなったのでメモ

DNSをさくらのもの使っていたらムームーDNSに変更する

ムームードメイン+さくらレンタルサーバで独自ドメインとリダイレクトを設定 | ものぐさノート
https://monogusa-note.com/muumuu-sakura

ムームードメインで取得した独自ドメインを、さくらインターネットのレンタルサーバや自宅サーバで使う方法 | oiio.jp
https://oiio.jp/entries/1053

ムームーDNSにfirebaseの設定値を追加入力する

Firebase Hostingで独自ドメインを使う – 猫好きが猫以外のことも書く
https://bitto.jp/posts/%E6%8A%80%E8%A1%93/Google/firebase/firebase-original-domain/

Firebase Hostingにカスタムドメインを割り当てる手順 – suzu6
https://www.suzu6.net/posts/58-hosting-muu-muu-domain/

sonota

カスタム ドメインを接続する  |  Firebase
https://firebase.google.com/docs/hosting/custom-domain?hl=ja#ssl-provisioning

React SPA作成時にかゆいところに手が届いた記事

SPAでエラー処理導線の設計したことがなかった私へ

Reactアプリにおける非同期通信エラー処理の実装案 | Hypertext Candy
https://www.hypertextcandy.com/react-error-handling

useEffectをあまり調べずにcomponentDidMountと同じでしょ?と思っていた私へ

React.useEffect でハマったポイントのまとめ
https://snamiki1212.com/react-useeffect-pitfall

react関係ねぇ。JS基礎で調べながら実装してた私へ

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

JavaScriptの配列・連想配列のキーの存在チェック方法 | てらこや.work

JavaScriptの配列・連想配列のキーの存在チェック方法