はじめに2021年3月にGatsby 3.0がリリースされたので、v2からv3への移行を実施した。 v3にアップデートすると何が良くなるのかGatsby v3 Incremental Builds in OSS, new Gatsby Image, and more | Gatsby 大きく分けて4つある。主にパフォーマンス向上を目的とされている。 開発者向け: ローカル開発速度の80%の改善以前は開発開始時にすべてのページや画像のビルドを待たないといけなく、ページ数や画像が多いサイトを開発していた人の辛みとなっていたが、改善された。 正直、個人のブログ程度だとあんまり辛みを感じていなかったが、記事数が増えていくと将来的に踏む可能性もあったので、アップデートしておいて損はない。1万ページのクライアントサイトというワードが出てきていたので、そういうオーダーでも耐えうるものを目指して進化してい

モチベーション今までこのブログのCI/CDとホスティングはNetlifyを使っていた。GitHubのリポジトリを連携するだけでビルドとデプロイとホスティングを担ってくれて、無料で使えるのでめちゃめちゃ便利なサービスなのだが、CDNのエッジサーバが日本になく、一番近いところがシンガポールで、TTFB（Time To First Byte）が少しかかるという課題があった。そのうち日本にも来るだろうと思って2年くらい待っていたのだが、一向にサポートされる気配がなさそうなので、年末年始に暇だったので、移行してみてどれくらい計測値が改善されるかを試してみた。 移行前（Netlify）の計測値Testmysite.io というサービスを使ってTTFBを計測した。奇しくもNetlifyが運営しているサービスのようだ。 Website Speed Test Tool - Testmysite.io by

モチベーション下記記事にある通り、Amazonのリンクなどをいい感じにするために gatsby-remark-component を使って、マークダウン内にスニペットを配置する方法を取っていた。 GatsbyJSで作っているブログでリッチなリンクを貼れるようにしたGatsbyJSで作っているブログでAmazonのリンクをいい感じに貼れるようにしたマークダウン内に下記のように記述すると、下記のような表示になる。ちなみに、 gatsby-remark-component の制約で <alink code="B01EJ7AK5O" /> とは記述できない。

... { resolve: "gatsby-plugin-google-gtag", options: { trackingIds: ["UA-XXXXXXXX-X"], pluginConfig: { head: true, }, },},... head直下に下記のようなスクリプトが吐き出されていた。 GAのコンソール画面上に生成されるコードと異なり、 "send_page_view":false となっているが、これは、SPAの遷移をハンドリングして、PVを飛ばす機構をプラグイン側が用意しているので、GA側が用意しているMPA用の遷移時にPVを飛ばす仕組みをキャンセルする設定になっている。プラグイン内の下記コードがSPAでPVを飛ばすためのコードとなる。気になる人は確認してみると良いだろう。 exports.onRouteUpdate = ({ location }) => { i

モチベーションこのブログ、実は少ないながらも割と検索流入で記事を見てもらえていることもあって、回遊してもらうきっかけを作りたかった。 完成したものトップ 記事下部 やったこと記事数がそれなりに揃っているおすすめしたいタグをいい感じにリンクさせるようにした。まだまだ記事数が少ないので、コンテンツとして成り立つタグがなかなかないが、記事数が増えてきたものから随時追加していけるようにした。「記事数がN件以上のタグ」などで自動的に抽出する案もあったが、 重複した記事を扱う似たようなタグが乱立してしまう順序を指定したかったという2点から、自分で任意のものを出し分けできるように手動でフラグを立てる方針を取った。タグが乱立する件に関しては、記事に対するタグの付け方自体が微妙なのかもしれないが、タグに関してはTwitterのハッシュタグのように記事を書いた時の勢いで自由に付けられるようにしておきたい。手動

モチベーションブログの遷移時にアニメーションを付けていたのだが、下記記事の「後日追記」の通り、モバイルでスタイル崩れが発生してしまっていたので、アニメーションを取っていた。やっぱり付けたかった。 GatsbyJSで作っているブログでページ遷移時にアニメーションが付くようにした 完成したもの ページ遷移してもらえると、コンテンツが切り替わる際にフェードのアニメーションがかかっているのが確認できる。 やったことJSで頑張るアプローチを捨ててシンプルにCSSだけでアニメーションを付けたら上手くいった。もっと早くこちらのアプローチを試していれば良かった… JSで頑張るアプローチが難しいのは、Gatsbyが遷移時にスクロール位置の調整をしていて、アニメーションに合わせてスクロール位置を調整する処理を遅延させたりしないといけない点で、なるべく余分なロジックを持ちたくないので、CSSで実現するのが良さそ

モチベーション前の記事、次の記事の部分がスターターのスタイルのままになっていて、手を付けられていなかったので、スタイルを当てていい感じにしたかった。 Before After デザイン今回もアイキャッチコンポーネントを組み合わせるデザインとした。前の記事は左側に、次の記事は右側にアイキャッチが来るようにして前と次を表現した。 アイキャッチコンポーネントが汎用性が高く、記事のリンクを張る際に使いやすいので、用意しておいて良かった。 GatsbyJSで作っているブログでアイキャッチが自動でいい感じに付くようにした やったことまず、アイキャッチコンポーネントに渡す記事に紐づくタグ一覧が、前の記事、次の記事に関しては取得できていなかったので、 gatsby-node.js のGraphQLのクエリにtagsを追加して取れるようにした。 そして、下記のような PreviousAndNextPosts

モチベーションずっと手を付けられていなかった記事一覧のデザインをいい感じにしたかった Before After やったこと前回の記事で記事の頭にアイキャッチが付くようにしたので、その仕組みを応用して、記事一覧にもアイキャッチが表示されるようにした。 GatsbyJSで作っているブログでアイキャッチが自動でいい感じに付くようにした 各記事のリンクはPostというコンポーネントを作っていて、GraphQLで取得した記事のデータを渡せばいい感じに表示してくれるようにしている。 import dayjs from "dayjs" import { Link } from "gatsby" import React from "react" import Date from "./date" import EyeCatch from "./eye_catch" import styles from

モチベーションブログにアイキャッチがなかったので、付けたかった。毎回、ブログの記事に適したアイキャッチ画像を用意するのが理想的ではあるのだが、記事を書くハードルをなるべく下げたいので、記事に紐付いているタグベースで自動でいい感じのアイキャッチが付けられないか検討してみた。 Before After 解説アイデアの元ネタはcatnoseさんの下記記事だ。 ブログ執筆を効率化するための工夫 | Cat Knows catnoseさんは各記事毎に絵文字を設定できるようにプロパティを増やしているのだが、各記事毎に絵文字を設定するのすら面倒だったため、記事に付いているタグで出し分けるアプローチを取ってみた。 具体的には、下記のようなタグのマスターを持っていて、記事に紐付けたタグ名が一致した場合は、そのタグに設定された絵文字と背景色のアイキャッチが表示されるようになっている。 - name: 読んだ

なにこれ 自分のブログ(Gatsby製)のビルドが遅すぎてNetlifyでタイムアウトしてしまうので、ビルドチューニングをしました。 15分以上かかっていたビルドが7分以下になり50%短縮できたので、その時の知見をまとめます。 割と地味な作業が多いですが、Gatsbyのビルド時間短縮に関するTipsを効果がある順にご紹介します。 🚀1. 画像生成処理を並列化する 🚅2. 必要な画像だけクエリで取得する 🚂3. 生成画像の種類を減らす 🚗4. 画像の縦横サイズを最適化する 🚴🏻5. 画像のファイルサイズを圧縮する 🏃🏻6. 生成する画像をシンプル＆低クオリティにする 🏊🏻7. netlify-plugin-gatsby-cacheを使う 💎番外編1: Circle CIでビルドしてNetlifyにデプロイする なぜビルドが遅いのか → 画像生成に時間がかかっている ビル

FOUC とはFOUCとは、flash of unstyled contentの略で、CSSが適用されていない状態が一瞬表示された後にCSSが適用されることでチラつく現象のこと。 事象このブログにおいては、ヘッダーの部分がリロードを繰り返す度にロゴがガタっとなって、チラついていた。 やったことちょうどヘッダーだけMaterial-UIのコンポーネントに変えていたので、GatsbyJSとMaterial-UIの組み合わせが怪しそうだということで、調査してみるとまさしくなIssueがヒットした。 Flicker of Unstyled Content (FOUC) with Gatsby and Material UI · Issue #15097 · gatsbyjs/gatsby その中でGatsbyのコントリビュータの対応策のコメントを見つけた。SSRするページでMaterial-UIの

モチベーションGatsbyJSでブログを作っており、SPAでページ遷移が爆速なのがとても良いが、読み込みがないことで、逆にフィードバックがなくてページが変わったことに気づけないので、ページ遷移時にアニメーションを付けたかった。 できあがったもの適当にページ遷移するとファンってなるのを体験できる。 ※ 後日追記下記 react-transition-group と gatsby-plugin-layout を使う方法でページ遷移時にアニメーションを付いたのだが、モバイル端末でスタイル崩れが発生したので、ページ遷移時のアニメーションは外した。 ※ さらに追記で、CSSで実現する方法が良さそうだったので、記事にした。 続・GatsbyJSで作っているブログでページ遷移時にアニメーションが付くようにした GatsbyJSのTransition事情gatsby-plugin-transition-l

モチベーションGatsbyJSで作っているブログでリッチなリンクを貼れるようにした の記事でリッチなリンクを貼れるような仕組みを作ったのだが、AmazonはOGPデータが設定されておらず、上手く表示ができなかった買ってよかったものとかを紹介する際にリッチないい感じのリンクを置きたいブログを収益化したいできあがったもの

モチベーションアプリやサービスを紹介する際にURLだけだと味気がないので、OGPの情報を拾ってきて、リンク先のタイトルや画像が表示されるようにしたかったnoteとかでよく見るやつできあがったもの ‎Bear - プライベートメモ ‎Bearは、ライター／弁護士／シェフ／教師／エンジニア／学生や保護者などのさまざまなユーザーによって利用されている自由なメモアプリです。 Bearは、素早い整理機能・編集ツール・エクスポート機能を備えているため、素早く書いてどこでも共有することができます。また、暗号化によってプライバシーを保護します。 2017 Apple デザインアワード 2016 年 App Store アプリオブ・ザ・イヤー 「Bear は、私が一番気に入っている執筆アプリ」- Kit Eaton, New York Times 柔軟かつシンプルなツールで*自由に書きましょう* Bear

モチベーションFlutterを触るようになってMaterial Designなコンポーネントを扱う機会が増えたので、Material Designなコンポーネントに触れる機会を増やしたかったMaterial-UIの0系の頃に触って以来だったので、触ってみたかったSemantic UIの開発が止まってしまっており、本家からフォークされたFomantic-UIの開発も進んでいるが、将来的に統合されるかも不透明という背景もあり、乗り換え先を探していたやったことMaterial-UIのインストールヘッダーをMaterial-UI製にしてみたAppBarを使うシャドウが濃かったので、調整したスマホで見た時に記事の読むスペースをなるべく広げられるように、よくある、下にスクロールしたら上にヘッダーが隠れて、隠れている最中に上にスクロールしたらヘッダーが出てくる挙動にしたnoteとかもこういう挙動おわりに

今までhttps://kikunantoka.com/2020-02-13--fix-url これからhttps://kikunantoka.com/2020/02/13--fix-url モチベーション年別、月別アーカイブ機能を入れるとしたら、/2020/ とか /2020/02/ とかのルーティングにしたくなりそうなので、それに合わせたかった記事数が増えてきて、記事ディレクトリ配下のフォルダ数が増えていて、管理しづらかったやったこと記事ディレクトリ配下に /2020 や /2019 などのフォルダを追加して階層化した一部の記事がSEOで上位を取れていて、せっかく検索してたどり着いてくれた人にNot Foundを出すのもなーと思ったので、Netlify用のリダイレクトルールを書いたワイルドカードで指定することができて、便利Redirect options | Netlify Docs /