Tsuburaya

ブログのビルド時間を短縮した（Notion Blog）

Synced block を使えるように実装した（Notion API アップデート）

このブログも引用ブロックに対応した（Notion API アップデート）

Notion API にアップデートが加わり、Divider （区切り）ブロックがきちんと返却されるようになったので、このブログも Divider に対応しました。

このブログも divider ブロックに対応した（Notion API アップデート）

Notion にアップロードした画像は裏側では S3 にアップロードされる仕組みになってるっぽく、この画像を Notion API で取得すると Expire Date が付いた状態で返却されてしまう。当たり前なのだが、Expire Date を超えた画像に関しては 403 でエラーが返ってきてしまう。

Notion API でブログを構築するときの画像の Expire Date 問題を解決したい → 解決した

Notion Blog / Fast Notion の不具合（2021年3月5日）

https://blog.35d.jp/ogp/2021-03-05-01.jpg

久しぶりにこのブログ（Next.js / Notion Blog）のデザインを変更しました。主な変更点と、実装についてちょこっと書きました。

このブログ（Notion Blog）のデザインを変更した

https://blog.35d.jp/ogp/2020-11-23-01.png

表題の通りですが、僕が読んだ本をこのサイト（Notion Blog）で公開するようにしました。

読んだ本をこのサイト（Notion Blog）で公開するようにした（少し実装の話）

https://blog.35d.jp/ogp/2021-01-08-01.jpg

Notion Blog で記事ごとに Google Adsense の表示・非表示を切り替える実装を行ったので、そのメモです。

Notion Blog で記事ごとに Google Adsense の表示・非表示を切り替える【Notion Blog 徹底解説 #8】

https://blog.35d.jp/ogp/2020-11-22-02.png

このブログのフッターにこっそりと問い合わせ導線を追加しました。

このブログに問い合わせ導線を付けた

 で Next.js v10.0 が発表されましたね。このブログで使用している Next.js も早速 v10.0 にアップグレードしてみました。パッケージのアップデートを行ったのみで、プロダクションコードに変更は加えていないのですが、このブログに大きな影響を与えてくれそうなところをざざっと紹介していきます（詳細は

このブログ（Notion Blog）の Next.js を v9.5 → v10.0 にアップデートした

https://blog.35d.jp/ogp/2020-11-10-01.png

Notion にストックした記事を、このサイト上で公開できる仕組みを作った

https://blog.35d.jp/ogp/2020-10-27-01.png

このブログにダークモード・ライトモード切り替え機能を追加してみたのでそのメモです。

Notion Blog (Next.js) でダークモードを実現する（React Context + Styled Component）

https://blog.35d.jp/ogp/2020-10-06-01.png

Notion Blog に Medium っぽい画像のズーム機能を導入したので、そのやり方のメモです。Notion Blog は Next.js で作られているので、React 製のプロジェクトだったらどんなプロジェクトにも導入可能です。

Notion Blog に Medium っぽい画像ズーム機能を導入する（Next.js / react-medium-image-zoom）【Notion Blog 徹底解説 #7】

https://blog.35d.jp/ogp/2020-09-14-01.gif

表題の通りですが、このブログのダークテーマ対応をしました。このブログは、技術の試し切り場という側面も持っており、今回はダークテーマ対応を通して、知らない技術に触れる良い機会になりました。

Notion Blog のダークテーマ対応をした

https://blog.35d.jp/ogp/2020-07-12-01.gif

Notion Blog でローカル開発環境の構築方法について、なるべく非エンジニアの方でも分かるように書きました。

Notion Blog でローカル開発環境を構築する【Notion Blog 徹底解説 #7】

【2020/06/30 更新】このブログでは、Notion Blog の開設からカスタマイズまでを「Notion Blog 徹底解説」というシリーズでまとめています。

Notion Blog 徹底解説シリーズまとめ

Vercel の環境変数のセットに少し癖があってハマったので、記事にしておきたいと思います。主に Notion Blog 用。

Vercel の環境変数を CLI でセットする

Notion Blog にタグ機能を追加するための方法についての記事です。Notion 側の設定と、実際に Next.js をどう編集していけば良いかをステップバイステップで解説しています。

Notion Blog にタグ機能を追加する【Notion Blog 徹底解説 #6】

https://blog.35d.jp/ogp/2020-06-07-01.png

Notion Blog 徹底解説シリーズの第五弾です。今回は、Google Adsense の導入方法について解説していきたいと思います。何度かこのブログを見て頂いている方は分かるかと思いますが、このブログも、記事の下部に Google Adsense の広告が表示されるようになっています。非エンジニアの方でも、このように、広告を貼れるようになってもらうのが、この記事の趣旨です。

Notion Blog に Google Adsense を導入する【Notion Blog 徹底解説 #5】

https://blog.35d.jp/ogp/2020-06-04-01.png

2020/03/29 時点で、Notion Blog は Twitter カードの埋め込みにはデフォルトでは対応していません。Twitter カードを埋め込んでも、Notion Blog 側へは表示されないので、React のライブラリを追加して、Twitter 埋め込みカードに対応してみます。

Notion Blog への Twitter Card の埋め込み【Notion Blog 徹底解説 #４】

今回は Notion Blog に YouTube 動画を埋め込む実装をしていきたいと思います。Notion Blog はデフォルトでは YouTube 動画埋め込みをサポートしていないので、その機能の付け方を解説していきたいと思います。

Notion Blog で YouTube 動画埋め込みを実現する【Notion Blog 徹底解説 #3】

https://blog.35d.jp/ogp/2020-05-28-01.png

今回の記事では、お名前ドットコムで独自ドメインを取得して、Notion Blog (Vercel / 旧 Zeit Nox)に独自ドメインを当てる方法の解説をしたいと思います。

Notion Blog に独自ドメインを当てる（Vercel (旧 Zeit Now) + お名前.com）【Notion Blog 徹底解説 #2】

https://blog.35d.jp/ogp/2020-05-24-01.png

（2020/06/20 更新）非エンジニアでも Notion Blog を使って自分のブログを開設できるように、丁寧めに書いてみました。

Notion Blog でブログを開設する【Notion Blog 徹底解説 #1】

https://blog.35d.jp/ogp/2020-05-23-01.png

表題の通りですが、「次の記事 / 前の記事」のリンクを記事下に実装しました。

Notion Blog に「次の記事 / 前の記事」機能を実装した

Notion Blog (Next.js) の記事下に、Google Adsense を表示するようにしました。少しハマりながらもなんとかできたので、実現方法を書いておきたいと思います。

Notion Blog (Next.js) に Google Adsense を導入する

Notion Blog へ移行した（VuePress との比較）

会社の後輩に Notion Blog というものの存在を教えてもらったので試し切りしてみました。 Notion Blog は Notion をバックエンドにしたヘッドレス CMS で、コンテンツの入稿が Notion でできると言う素晴らしいものです。 実際に触ってみたのですが、環境構築も一瞬で終わり、Notion で記事を書いて公開するまで 10 分程度でいけました。 （ビュー部分はテンプレートとして準備されているものを使用しました。）

Notion Blog を使って、いま最もモダンなブログ環境を構築する

https://s3.us-west-2.amazonaws.com/secure.notion-static.com/a259a3aa-af3e-44d2-a43c-15b7ff21cc3a/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=ASIAT73L2G45M36HSGCJ%2F20200330%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20200330T175041Z&X-Amz-Expires=86400&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEPn%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaCXVzLXdlc3QtMiJHMEUCIQDXXJ6gMLyLRUvKDjo2c4qwBzp8s1KN3FhL1jnkk%2B9j0wIgPKlH1%2BsglggPRh%2Bo%2FBWzh7XBY1v24wbk4MtBEAsysq8qvQMI8v%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FARAAGgwyNzQ1NjcxNDkzNzAiDFLQjNZ%2FtcY%2FBKEugSqRA4kQIykykJCcxzUfd7qiBE%2Fx87k6oRSrFN0ie1SkqEKBFa9j%2F%2B3b8JYFf1cf3VJ80f0s8KdOgedwC2X40fyQexBSQ5XhStF75KNKsku1ZRywoH2yrHNkptDCCksRWn4HgFb9%2BcDcx6vFB7LNVRKdrDm8mVXxqXLfssYU2ifaOl5QmHA9rEnh2DWpbxZC4IxSByTLG3Z5o3r9G3LOK1d%2BdkexdGd9HRdMzixGSC3aBKPZDcmqeygtljfD9RQOdb94Uxd85E5%2BeUul8JRBRrZUrO4%2BAa6SdIot6h0YhCzFDsSvYTpsz6Tj1MELzszCvJWIusmFcPAEYS4pfTI9uZNdExTUdu0US3F3TTi2kpGV1BEoSEt%2BsyARfW2WfNh3q%2F28wqIZ1bsAERnbxGEMtkt9bGD58v5Mlx0SUMeVfsRap0de%2FqC0WD7QPMYx93EcGiG9ZiiXXgPHeaYBQUwaxE%2F5Hq3fxou63xihKbkZCqhhMTco4Bq7xOXVte9htKDDMhk%2Faz%2FPjb%2BY92PEuLVFZDhodF%2BLMJ3EiPQFOusB2ez0UyO3IheRtv%2FyA%2Btlqtp1na6DFHKZGZiii15q5y4BQmXd5EOhrbxfYwR9vXHQueDcRPdilRlo64dNPOUeF4MT155LWEOGbpieuGAHh9x1KE9cRjmRr9EGgGUW7u3O4KpAhpwE6jQUvSBkFVdheaRDhGDWTmv1lrvqbOw%2BjsO5PvMdt1nEEZG67bmLepOH6NOKjMBJKgSHg2INGm5b5TrCWNiLKYJtFEkWMtcDwxiWfYsXDb5tamvRAvNaatoEMylyHP8XCZgFTZz3O7Z9IxlQhsJ%2Fltih%2BrDemreMtaGieJ7CPRmh8tB2lQ%3D%3D&X-Amz-Signature=3c0dc27308825f554c6e85153709b9569ed5c41660d920da391fbc905a9d007a&X-Amz-SignedHeaders=host&response-content-disposition=filename %3D"Untitled.png"

Notion Blog が含まれる記事一覧