GatsbyJSで作っているブログにリセットCSSを導入した
2020-07-13
はじめに Semantic UIからMaterial-UIに移行して、Semantic UIを取り除いた際に全体のスタイルが少し崩れたので、Semantic UIが担っていたリセットCSSを改めて導入した。 どう選んだか 2020年版！おすすめのリセットCSSまとめ | Web…
エコバッグを買った
2020-06-30
買ったもの 今年の1月あたりに買った。買った当時は1300円くらいでもっと安かった。レジ袋有料化の流れで一時的に値段が上がってるのかもしれない。買ってよかった点をまとめると下記。 無地で黒 拘りがなかったので、男性が持っていても変でないものが良かった あと、汚れが目立たない …
GatsbyJSで作っているブログのFOUC対策をした
2020-06-18
FOUC とは FOUCとは、flash of unstyled contentの略で、CSSが適用されていない状態が一瞬表示された後にCSSが適用されることでチラつく現象のこと。 事象 このブログにおいては、ヘッダーの部分がリロードを繰り返す度にロゴがガタっとなって、チラつい…
「Webサイト高速化のための 静的サイトジェネレーター活用入門」を読んだ
2020-06-09
はじめに 巷でGatsby本と呼ばれている、「Webサイト高速化のための 静的サイトジェネレーター活用入門」を読んだので、その感想を書く。副題に「GatsbyJSで実現する高速&実用的なサイト構築」とある通り、GatsbyJSを利用したWebサイトの構築方法について解説している…
Macをターゲットディスクモードで移行した
2020-06-08
はじめに 新型 MacBook Pro 13インチ（2020年モデル）のレビュー で書いたとおり、新しいMacにデータを移行した。その際にターゲットディスクモードで移行したのだが、ハマりポイントがあったので、記事にした。 前提 MacBook Pro 13インチ（2017年モデ…
新型 MacBook Pro 13インチ（2020年モデル）のレビュー
2020-06-05
はじめに 会社で使用しているPCを買い換える機会をもらい、新型MacBook Pro 13インチ（2020年モデル）になり、2週間ほど使用したので、実際に使ってみた感想をレビューする。 3行で 新しいキーボード（Magick Keyboard）は静かでいい感じ Touch I…
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
今まで これから モチベーション 年別、月別アーカイブ機能を入れるとしたら、 とか とかのルーティングにしたくなりそうなので、それに合わせたかった 記事数が増えてきて、記事ディレクトリ配下のフォルダ数が増えていて、管理しづらかった やったこと 記事ディレクトリ配下に や…
「個人開発 Night #3」で発表した
2020-02-07
発表した場 個人開発 Night #3 - connpass 弊社（ギフティ）で主催しているイベントで発表をした。 発表した内容 個人開発をしているサービス Nakamy のインフラをAWSからGCPに変更したので、その経緯を発表した。 発表資料 おわりに 懇親会で他の個人開…
2020年のやっていき
2020-02-03
1月も終わってしまったが、2020年の抱負を宣言する。 風邪をひかない ギフティに来てから4年目になるが、風邪をひいて休んだ記憶がないので、継続して健康でいたい 徒歩通勤が菌をもらうリスクを下げつつ、運動にもなっている説があるので、移転することがあったら、引っ越したい Flut…
2019年の振り返り
2020-01-30
1月も終わろうとしているが、振り返る。 ソフトウェアエンジニアとして 2019年のコミットログはこんな感じだった 大体毎日コードは書けていたので、良かった 主にRailsで開発をしていた チームメンバーを増やしながら、安定運用しつつ、エンハンスを進めて、しっかり利益を増やすこ…
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日目の記事。このブログにタグ機能を導入したので、その時の手順を解説する。基本的に公式の記事に従えば良いのだが、差分が分かりづらいのと、自分で理解した内容を補足したいので、記事にした。 前提 このブロ…
「Gotanda.js #13 in freee」で発表した
2019-11-07
発表した場 【増枠】Gotanda.js #13 in freee - connpass 発表した内容 前回に続いてGatsbyJSとCloud Functionsを使ったアーキテクチャについて発表を行った 発表資料 おわりに デモの代わりにキャプチャを用いて発表したのだが、…
AirPods Pro を買った
2019-11-05
買った。10/29にサイレント発表され、ちょっと出遅れて予約した。10/31に届いた。税を含めると3万円也。今は評判が呼んでか、Apple Storeで2週間待ちぐらいになってるようだ。 3行で AirPods Pro便利 ノイズキャンセリング機能すごい、音楽をもっと楽しめる…
macOS Mojaveを使っていて、再起動の通知が来るけど、Catalinaにアップグレードしたくないから、「明日再通知」を無限に押している人への共有
2019-11-01
対象 macOS Mojaveを使っていて、再起動の通知が来るけど、Catalinaにアップグレードしたくないから、「明日再通知」を無限に押している人 結論 その通知はCatalinaにアップグレードする内容じゃなかった いつものMojaveのセキュリティアップデートなので、む…
「フロントエンド Night #1」で発表した
2019-09-04
発表した場 フロントエンド Night #1 - connpass イベントスペースができたので、弊社で実施することができた。 発表した内容 GatsbyJSとCloud Functionsを使ってフレームワーク比較サイトのプロトタイプを作ったので、その構成についてデモを交えて…
「Battle Conference U30 #2019」で発表した
2019-07-18
発表した場 Battle Conference Under30 2019 Battle Conference U30 #2019 - connpass 発表した経緯 招待されて登壇する枠の人もいたみたいなのだが、それとは別でconnpassでいくつかの枠を公募していたので、U3…
「Gotanda.js #11 in MobileFactory」で発表した
2019-06-04
発表した場 Gotanda.js #11 in MobileFactory - connpass 発表した内容 Netlifyのプレビュー環境にBasic認証をかける この記事で解説したように、Netlifyのプレビュー環境にBasic認証をかけることができることを聞いていて、…
Netlifyのプレビュー環境にBasic認証をかける
2019-05-31
前提 NetlifyのProに契約していることが前提となります。 Deploy previews機能とは Netlifyには、Deploy previewsという機能がある。この機能が何をしてくれるかというと、GitHubでPRを作成した際にレビュー用のプレビュー環境を立ち上げ…
「We Are JavaScripters! @31th」で発表した
2019-04-26
発表した場 We Are JavaScripters! @31th【初心者歓迎・ショートセション大会】 - connpass 発表した内容 Meguro.esで話した内容に少し肉付けして話をした。 発表資料 おわりに WebGLやJSのコアな話、Web Componentsや…
RubyKaigi 2019に参加してきた
2019-04-25
RubyKaigi 2019とは RubyKaigi 2019 近年は地方で開催するようになったRubyの国際会議。今年は福岡で開催された。Rubyの父、MatzさんのKeynoteなど数多くのセッションや展示、スポンサーブースなどがある。国際会議なだけあって、外国人の参加者の…
「Meguro.es #20」で発表した
2019-04-17
発表した場 Meguro.es # 20 @ Drecom - connpass 発表した内容 会社でLPを作る際にGatsbyJSを採用した時の話をした。このブログもそうだが、個人ブログなどで採用されているケースが多いが、法人の成果物として採用されているケースがそこまで多くな…
Sass with CSS Modulesな環境を整えた
2019-04-15
導入した背景 他の案件などでsassでスタイルを書いているので、お互いに流用しやすいので、このブログでも採用した。 CSS ModulesはGatsbyに標準で入っている。 やったこと 下記コマンドで必要なパッケージをインストールして、gatsby-config.jsに設定を追…
Semantic UI Reactを導入した
2019-04-10
導入した背景 ブログのデザインをカスタマイズするためにフレームワークを導入したかったので、普段から使い慣れているSemantic UIを導入した。Reactコンポーネント版のSemantic UI Reactがあるので、そちらを導入した。 Semantic UI Introdu…
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…