PCと音楽とゲームと読み物とインターネットなブログです

GatsbyJSの画像プラグイン導入でいい感じに詰む ('A`)→打開(゚∀゚)

2021年03月10日
インターネット 0
gatsbyjs-icon_1


静的サイトジェネレータでサイト作成、さっそく詰む!なないようです。



Gatsbyjsでサイトをつくってみようということで、数日前から作成しています。
静的サイトジェネレータは、新しいホームページの形、こんな感じです。
こまけえことは、wiki、公式でおしらべください。


そんなGatsbyですが、画像プラグインのインストールから、
様子がおかしいという話からです。


前回1から環境を整えて、作り直したときと同じく、
gatsby developからサイトがでてこない。
この症状またでた。マータジャネーカ('A`)


今回も、画像プラグインでおかしくなりました。
どうもおかしいです。

gatsby-config.js、gatsby-transformer-sharpこの辺で、
もう一回さいしょからやりなおします。

これ手を出しちゃいけない世界だったのかもしれない。


プッシュ、リポジトリ、git!。
スターターを違うタイプに変更。

中の記述は、参考書のままじゃなく、素のままで一度ためそう。
スターターの段階でよさげなのをチョイスしてみた結果、


https://www.gatsbyjs.com/starters/gatsbyjs/gatsby-starter-hello-world


画像プラグインも無事インストール完了しました。直りました。♪(´ε` )
configのファイル内容をシンプルなのに変更。

cssのファイル名のリネームでサイトの表示が戻りました。
凡ミス。chromebookは字が小さい。


これですっきり画像最適化の章へむかうことができます。
画像バンバン付けてLighthouseで満点とるために。



そんな希望と夢をよそに画像の最適化には地獄が待っていたんだ。
そう。GraphiQLというモノホンのじごくが。

graphiql


参考書どおりにして、変換した右側に、なぜかextentionが表示される。

ほんとは表示されないのです。また謎が1つ増えました。
新きゃらしかくいくん


フラグメントってなんなんだよ
フラグメントのところ打開できました。そのまま書いてればよかった。


gatsbyでサイト作ると、webpに対応してないブラウザならjpg表示させるとかできるようです。ブログにこういう機能があったらいいな!なんてのが解決されてる。

画像最適化について
サイトの画像表示ですりガラス風からきれいな表示は、ブラーアップというらしい。
すこしモザイクのようになってからパッと表示されるあれです。

べつではtracedsvgといって、画像の中は表示され、色は抜けてるような効果もあるようです。

静的サイトジェネレータおもしろい。こういう用語を調べられるまで、
知るまでの時間が検索では長くなってて、本買ってよかった。
本で体系的に学ぶのはいい。
順番があるのは、とてもいいです。(´・ω:;.:...




Comment(0)

There are no comments yet.