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の配列・連想配列のキーの存在チェック方法

memo localstrage redux-saga

次の案件用のメモ

【サンプル付き】Local Storageとは?使い方を詳しく解説 | webliker

【サンプル付き】Local Storageとは?使い方を詳しく解説

redux-sagaを用いたReact/Reduxアプリケーションにおけるデータ通信の実現事例 | Fintan

redux-sagaを用いたReact/Reduxアプリケーションにおけるデータ通信の実現事例

redux-sagaで処理をタイムアウトする | ハックノート

redux-sagaで処理をタイムアウトする

JSの新機能、Async Iterationの使いどころ – Qiita
https://qiita.com/cognitom/items/e67c7df29a238decf49f

JavaScript の イテレータ を極める! – Qiita
https://qiita.com/kura07/items/cf168a7ea20e8c2554c6

APIレスポンスをNormalizeして格納する

大型案件が来たらマストでやるやつ

前にチェックしたtwitterのやつ解読するんとかどこいったん・・・

とりあえず手元に残ってたURLメモ

[Redux/Fluxでも役立つ] サーバーが返却するデータは正規化して格納すべし | by Muukii (Hiroshi Kimura) | Eureka Engineering | Medium
https://medium.com/eureka-engineering/normalizing-data-shape-5a94cb89c9a2

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

React-Routerでページ遷移時にカスタムデザインのモーダルで遷移確認プロンプトを出す方法

うおおおお〜!!!ありがとう!

この投稿にclapをつけるためにMediumのアカウント作ったよ

Using React-Router v4/v5 Prompt with custom modal component | by Michael Chan | Medium
https://medium.com/@michaelchan_13570/using-react-router-v4-prompt-with-custom-modal-component-ca839f5faf39

とりあえずmessageはメッセージ表示用の文言か、遷移OKのtrueかが帰ってくる関数になってるからうまいことカスタムしてねって!(語彙!

取り合えず私は「TypeScript and React 16+ version」の記述をTSからJSに変更したら行けました。
ほぼ同じ内容のコンポーネントを通常のmodal用に作っていたので、
それを複製してfunctionをいじるだけでブラウザのpronptからmaterial-uiのmodalに変更出来ました。
(もたせてるプロパティがボタンのラベルと分岐ごとのfunctionとかでほぼ同じでデスヨネーって嬉しかった)

ありがとう〜〜〜!!投稿者〜〜〜!

その他参考

Reactでページ遷移時にアラート・確認ダイアログなどを出す方法 – Qiita
https://qiita.com/seya/items/c48a2c1618252f058dd1