「開発関連」カテゴリーアーカイブ

Netlify関連

お昼休みが終わる前にガンガン投稿しておく。タブがいっぱい開いていて重い・・・メモメモ

静的サイトを作る上でホスティングサービスの検討とNetlifyを使ってみた感想 – suzu6
https://www.suzu6.net/posts/55-hosting-service/

Netlify概要

Netlifyの使い方入門 無料料金枠や独自ドメイン設定方法について | Simple IT Life
https://simple-it-life.com/2020/08/30/netlify/#%E7%8B%AC%E8%87%AA%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E3%81%AE%E8%A8%AD%E5%AE%9A

徹底比較!Firebase vs Netlify (2018年版) – KAYAC engineers’ blog

ドメイン設定

github + Netlify + ムームードメイン(独自ドメイン)でホスティングする – Qiita
https://qiita.com/cislv/items/9678758ffe9ae74c7326

【Netlify】カスタムドメインを設定する – Qiita
https://qiita.com/NaokiIshimura/items/64e060ccc244e38d0c15

ブログの独自ドメイン化。ムームードメインの設定方法 | うしじのブログ
https://www.ushiji.online/netlify-muumuu-domain#netlify%E3%81%AE%E7%8B%AC%E8%87%AA%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E5%8C%96%E3%81%AE%E8%A8%AD%E5%AE%9A

お引越し

Netlify移行記:GitHub Pagesから独自ドメイン+Netlifyの引っ越しでやったこと|おちゃカメラ。
https://photo-tea.com/p/17/netlify-github-pages-hexo/#www%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E7%84%A1%E3%81%97%E3%81%AB%E3%81%97%E3%81%9F

レンタルサーバーを乗り換えよう!トラブルなく移転するためのポイントをご紹介|レンタルサーバーナレッジ
https://knowledge.cpi.ad.jp/basic-knowledge/276/

font-familyの旅2020

特定端末でメイリオや游ゴシックがジャギるんだよね〜って相談の流れで
デザイナーさんにもらったURLが良心と技術の玉手箱、ICSさんだった。

以前巷に溢れてた感じから結構変わってるからメモ。用法用量は案件のプライオリティに合わせて。
このあたりも毎年見直したほうがいいのかもしれない(やること増え続けるね〜

2020年に最適なfont-familyの書き方 – ICS MEDIA
https://ics.media/entry/200317/

それって本当に必要?Gatsby-imageとか。

という、githubのquestionsタグのついたissueを見て、とてもおもしろかったのだが・・・
urlどっかに消えた〜
しゅーん
内容としては、スレ主はCGデザイナーで、3Gでの表示速度の最適化や表示のときのブラーエフェクトよりも、
どうしてもKVの画像だけはいち早くDLしてほしいのに全体のloadが終わるのを待つから、Gatsby-imageは使い所えらばなきゃだよね
っていう内容。

とりあえず他のをめも

入門者でもわかるGatsbyでの画像の設定方法 | アールエフェクト
https://reffect.co.jp/react/gatsby-image-understand-for-beginner

gatsby-image browser support · Issue #4021 · gatsbyjs/gatsby
https://github.com/gatsbyjs/gatsby/issues/4021

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で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/

gatsbyでのie11対応

デフォルト対応ブラウザはブラウザシェア1%以上、現存する(死んでない)バージョン、だったら何もしないでいいはず・・・と思うのだけど、
ターゲットブラウザに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