remixとcloudflareを使ってみるMarch 28, 2022インストール コマンドとのやりとりをしてく 終わるとこんな構成でファイル群が出来上がる 動かしてみる localhost:8787にブラウザでアクセスすると こんな感じで表示される cloudflareの登録 cloudflare にアクセスしメールとパスワードで登録できます デプロイ cloudflare workersにアプリを乗っけるためにwrangler というものを使う。 the…続きを読む →
Gatsbyjsブログ記事を共有するときにカードが表示されなくなってしまったMarch 27, 2022Card validator でチェックしてみると カードが見つからないと出てくる しかし Seoのコンポーネントにはしっかり書かれている ググってみると ヘッダータグの中のメタタグの前に他のタグがあると読み込まれないらしい gatsby-ssr.jsに こんな感じのことを書き込めと書いてあるサイトがちらほら Gatsby open graph meta tags are not…続きを読む →
レスポンシブデザインで画面を広げた時に右側にサブトピックをつけるMarch 26, 2022こんな感じで画面サイズを変えたら記事の配置を変えたい 修正前は最新記事が２等分になって表示するようになっている。タブレットサイズ以上はここの右側に新しいおすすめ記事項目を作りたい。 このサイトのテンプレートは gatsby-starter-netlify-cms でcssのフレームワークにBulmaが使われている。 Bulma…続きを読む →
shopping iconをヘッダーに表示させ、商品追加ごとに数字が増えるようにするMarch 25, 2022やること ヘッダーのカート文字のところをiconに置き換え、その近くに追加している商品数を表示させる 調査 iconのパッケージを調べてみると react-icons Material icons などが出てくる 今回はreact-iconsを使う インストールしたパッケージ 編集コード src/components/Navbar.jsを編集する 使いたいアイコンはReact Icons…続きを読む →
gatsby-starter-netlify-cmsのヘッダーをスクロールした時に表示させるMarch 24, 2022インストールしたパッケージ 編集コード Navbarがヘッダー部分に相当するコンポーネント クラス型になっているので関数型に書き直し useScrollPositionを使えるようにする 元のコード htmlのnavタグのスタイルをの内容によって書き換えている 完成形 参考 上スクロールしたときだけ表示されるヘッダ続きを読む →
商品を追加したときにhtmlタグでダイアログ表示させる。March 23, 2022サーバー不要Gatsbyプロジェクトで商品を売る方法。stripeの決済機能実装。 Gatsbyjsで作ったサイトにStripeの決済機能を組み込み、ショッピングカート機能をつける 上のリンクの続きになります 表示結果 add-to-cart コード修正 dialogタグはhtml要素の上位に配置したいためgatsby-browser.js…続きを読む →
Gatsbyjsで作ったサイトにStripeの決済機能を組み込み、ショッピングカート機能をつけるMarch 22, 2022GatsbyのプロジェクトにStripe決済をつける方法は サーバー不要Gatsbyプロジェクトで商品を売る方法。stripeの決済機能実装。 上のリンクの続きになります パッケージをインストール コードを追加 use-shopping-cartを使用するにはプロバイダーコンポーネントの中に商品を含めないといけないのでgatsby-browser.js…続きを読む →
ビルドした時にerror "window" is not available during server side rendering.と出たMarch 21, 2022Gatsbyのプロジェクトで開発中は特にエラーもなかったのですが、ビルドしたらエラーが出てしまった。 useEffectの中で変数に代入するといけるみたい 参考 Gatsby.js 【error "window" is not available during server side rendering.】続きを読む →
Stripe決済後にメールを送信する方法March 20, 2022Stripeで商品を作ったら、その都度git pushで更新しなければならない Stripeの商品価格は50円以上でなければならない Stripe…続きを読む →
Github ActionsでビルドしてNetlify上にGatsbyjsプロジェクトをデプロイするMarch 19, 2022NetlifyのBuild settingsをStop buildsに変更する go to Site settings > Build & deploy > Continuous deployment > Build settings を以下のようにつくる netlify-cliをインストールする必要はない NETLIFY_AUTH_TOKEN取得 https://app.netlify.com…続きを読む →
