キクナントカ

ソフトウェアエンジニアをしています。趣味でボードゲームを制作したり、個人開発でNakamyというサービスを開発しています。詳しくはこちら

GatsbyJS (16件)

GatsbyJSで作っているブログにリセットCSSを導入した

2020-07-13

はじめに Semantic UIからMaterial-UIに移行して、Semantic UIを取り除いた際に全体のスタイルが少し崩れたので、Semantic UIが担っていたリセットCSSを改めて導入した。 どう選んだか 2020年版!おすすめのリセットCSSまとめ | Web…

GatsbyJSで作っているブログのFOUC対策をした

2020-06-18

FOUC とは FOUCとは、flash of unstyled contentの略で、CSSが適用されていない状態が一瞬表示された後にCSSが適用されることでチラつく現象のこと。 事象 このブログにおいては、ヘッダーの部分がリロードを繰り返す度にロゴがガタっとなって、チラつい…

「Webサイト高速化のための 静的サイトジェネレーター活用入門」を読んだ

2020-06-09

はじめに 巷でGatsby本と呼ばれている、「Webサイト高速化のための 静的サイトジェネレーター活用入門」を読んだので、その感想を書く。副題に「GatsbyJSで実現する高速&実用的なサイト構築」とある通り、GatsbyJSを利用したWebサイトの構築方法について解説している…

GatsbyJSで作っているブログでページ遷移時にアニメーションが付くようにした

2020-05-28

モチベーション GatsbyJSでブログを作っており、SPAでページ遷移が爆速なのがとても良いが、読み込みがないことで、逆にフィードバックがなくてページが変わったことに気づけないので、ページ遷移時にアニメーションを付けたかった できあがったもの 適当にページ遷移するとファンって…

GatsbyJSで作っているブログでAmazonのリンクをいい感じに貼れるようにした

2020-05-24

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

GatsbyJSで作っているブログでリッチなリンクを貼れるようにした

2020-04-10

モチベーション アプリやサービスを紹介する際にURLだけだと味気がないので、OGPの情報を拾ってきて、リンク先のタイトルや画像が表示されるようにしたかった noteとかでよく見るやつ できあがったもの こんな感じのやつ。アプリとかサービスの紹介とかで使っていきたい。 検討し…

GatsbyJSで作っているブログにMaterial-UIを導入した

2020-03-31

モチベーション Flutterを触るようになってMaterial Designなコンポーネントを扱う機会が増えたので、Material Designなコンポーネントに触れる機会を増やしたかった Material-UIの0系の頃に触って以来だったので、触ってみたかった Seman…

GatsbyJSで作っているブログに月別/年別アーカイブページを追加した

2020-02-18

モチベーション 月ごと、年ごとに何記事書いたかを把握したかった よくあるブログの機能を実現してみたかった やったこと 基本的に生成される系のページは、gatsby-node.js内でGraphQLで条件を指定して記事を取得し、テンプレートに当てはめて作成していく流れになる 自分…

GatsbyJSで作っているブログの記事のURLを見直した

2020-02-13

今まで これから モチベーション 年別、月別アーカイブ機能を入れるとしたら、 とか とかのルーティングにしたくなりそうなので、それに合わせたかった 記事数が増えてきて、記事ディレクトリ配下のフォルダ数が増えていて、管理しづらかった やったこと 記事ディレクトリ配下に や…

GatsbyJSで作っているブログでコードブロックの行数を表示できるようにして、プラグインの中身を少し読んでみた

2019-12-15

はじめに ギフティ Advent Calendar 2019 - Qiitaの15日目の記事。アドベントカレンダー駆動開発でこのブログを進化させていくスタイルをとっている。このブログでコードを書いた時にコードブロックがいい感じになるようにしたので、その過程をまとめる。今回はコー…

GatsbyJSで作っているブログでコードブロックで指定した行数がハイライトされるようにした

2019-12-12

はじめに ギフティ Advent Calendar 2019 - Qiitaの12日目の記事。アドベントカレンダー駆動開発でこのブログを進化させていくスタイルをとっている。このブログでコードを書いた時にコードブロックがいい感じになるようにしたので、その過程をまとめる。今回は指定…

GatsbyJSで作っているブログでコードブロックにタイトルをつけられるようにした

2019-12-11

はじめに ギフティ Advent Calendar 2019 - Qiitaの11日目の記事。アドベントカレンダー駆動開発でこのブログを進化させていくスタイルをとっている。このブログでコードを書いた時にコードブロックがいい感じになるようにしたので、その過程をまとめる。前回に引き…

GatsbyJSで作っているブログでシンタックスハイライトが適用されるようにした

2019-12-03

はじめに ギフティ Advent Calendar 2019 - Qiitaの3日目の記事。枠が空いていたので書いた。アドベントカレンダー駆動開発でこのブログを進化させていくスタイルをとっていきたい。このブログでコードを書いた時にコードブロックがいい感じになるようにしたので、そ…

GatsbyJSで作っているブログにタグ機能を導入した

2019-12-01

はじめに ギフティ Advent Calendar 2019 - Qiitaの1日目の記事。このブログにタグ機能を導入したので、その時の手順を解説する。基本的に公式の記事に従えば良いのだが、差分が分かりづらいのと、自分で理解した内容を補足したいので、記事にした。 前提 このブロ…

GatsbyJSにブログを移行するまでにやったこと

2019-03-29

ホスティング先の選定 Netlify: All-in-one platform for automating modern web projects. 大人しくNetlifyにした。Toykoリージョンはまだなく、一番近くてシンガポールのようだが、GitHubと連携するだけで、…

ブログをGatsbyJSに移行した

2019-03-27

移行した理由 「ブログをWordPressに移行した」という記事を書いて、1ヶ月も経たなかったが、やっぱりGatsbyに移行することにした。移行した理由は下記4点。 Gutenbergに慣れなかった ブログもSPAの方が体験が良い 本業と使用技術を統一して知見を深めたい Wor…