これからeasy-notion-blogを使おうとしている方

や

これから改造したいけど途方に暮れている方…

そんな方々の参考になればと思い、

過去の記事を振り返りながら

「どんな勉強(っぽいこと)をしながら今に至ったのか…」

についてまとめようと思います。

実は

いきあたりばったりです。

「あ〜この部分改造してみたい〜」

って思っても

実際にコードを見ると

「こりゃダメだ。分かる部分でやれることやろう」

って方向転換することはよくありました。

時間がある時に

分からなかった部分を理解するための勉強をすることもありました。

勉強したからといって

そのまますぐ使いこなせるわけでもなく

違う改造をしていた時に

「あ！！この前やったあれじゃん！！」

って急に発見して嬉しくなったこともありました。

そのまま時系列で紹介してしまうと

そのいきあたりばったり感でお腹いっぱいになってしまうかと

思うので

多少前後させながら

整理して紹介していきます😂

ブログを改造する中で一番触りやすかったのが

cssファイルです。

このファイルはブログの役割ごとになっていて

「このページはこのファイル！」

といった割り当て方にはなっていません。

なので

検証画面というのを表示させて

どのファイルの

どのクラス名なのか…

といった部分を見つけてから改造を始めます。

• 検証画面の出し方
• カラーコードの探し方
• 好きなデザインパーツの探し方
• 簡単に改造できるスポット

これらを以下の記事で解説しているので

興味のある方はのぞいてみてください⭐

１行で終わる改造でも

Gitにpushすればするぼど

GitHubと仲良くなれます＼(^o^)／

VSCodeを使ってコードを編集すると

以下のような画面になります。

コードを編集すると

タブに●マークが表示されます。

保存をすると(Mac：⌘ + S , Win：Ctrl + S)

表示されていた件数が

ファイルアイコンからGitアイコンに移ります。

Gitアイコンをクリックしてみると…

変更というトグルの中に

さっき編集したファイル(blog.module.css)が表示されています。

イメージ的に

「本当に変更したってことでいいんだよね？」

っていう感じ。

Gitさん、

結構疑い深いです。

変更で問題ないと思ったら

ファイル名の右端にある【＋】をクリック。

※ やっぱ戻したい場合は【↶】をクリック

【＋】を押すと…

「ステージされている変更」というトグルが出現して

編集したファイル名(blog.module.css)が移動しているのが分かります。

でも、さっきみたいに【＋】マークはないですよね 😲

あとは[どんな変更をしたか]をメッセージにメモしてコミットします。

コミットボタンをクリックすると

【変更の同期】というボタンが出現するのでクリック！

そうすると

GitHubの方に追加されていることが確認できます。

この流れをCSSの改造をしながら

繰り返し行っていくと

Git・GitHubのことがなんとなく分かってきます⭐

画面をポチポチしてできていたことを

コマンドを使って操作しようとすると

どうなるのかが気になってきます。

そんな気持ちになったら

オススメなのがProgateのGit講座(無料)。

https://prog-8.com/lessons/git/study/1

これはチャベスさんに教えてもらいました。

普通に楽しいです。

楽しすぎて

課金してしばらくProgate三昧の時期がありましたwww

慣れれば本家の動向が気になって

追跡したくなるものですが

慣れないうちは

「本家よ！おとなしくしててくれぇ」

と祈りたくなります 🙈

ブランチを使いこなしていかないといけないので

結構大変。

過去に記事でまとめてるので見てみてください。

VSCodeにブランチを可視化してくれる拡張機能があります。

これを使いながら作業すると

心落ち着けて作業に専念できます。(いまだに使ってます)

記事一覧ページの【Next page >】をクリックすると…

戻るボタンがないことに気づきます。

戻るボタンを追加するために

調べて実装した結果、

Next.jsの知識が必要だったので

結構勉強になりました。

Next.jsにはブログを作成しながらNext.jsについて学ぶ

【Learn】というコーナーがあります。

英語が苦手な私でも

読みながら理解できたのでオススメです。

図解やまとめ問題もあります。

「Next.jsってこんな雰囲気か〜」

って部分が分かったら

さっそく改造の準備体操を始めます 🧘‍♀️

https://herohoro.com/blog/nextbotton-link_turt

Next.js13になって

ディレクトリなどが変わってしまっていますが、

流れをイメージするくらいでしたら

問題ないかなと思います。

2022/12/20現在のコードはこれです。

https://github.com/otoyo/easy-notion-blog/blob/main/components/blog-parts.tsx#L69-L90

書き方が違っているから

違う意味なのかと思うけど、

実は同じ意味。

これがまた面白いです。

進むと戻るのボタンの動きの違いを整理して

「どんな機能を追加したいのか…」

をひたすら探し求めます。

調べて

調べて

試してみて…

「これか〜〜〜」

といった流れです。

調べると

Next.jsの公式ドキュメントを何度も読む必要があるので

気づけば勉強になっていました。

Notionで勉強したことを記録することは

よくあるかと思うのですが

「誰かに読まれるかもしれない」

というスパイスを加えることで

自然と整理の仕方が変わってきます。

私はブログの改造をしたかったけど

これといって記事にするテーマを決めていませんでした。

結果的にブログの改造をテーマに扱うことになりましたが

それが自分の知識の整頓にもつながりました。

実は改造したけど

記事にできていない内容って結構あります。

それは今やお蔵入りになってしまっているけど

他の方がその内容で解説されているのを読んで

「なるほど〜」

と一人でつぶやきながら

復習し、弱い部分を補っています。

過去に２回振り返りの記事を投稿しているので

興味のある方はのぞいてみてください⭐

改造を進めていくと

「DBのプロパティを追加したい」

「記事以外のDBを表示させたい」

「固定ページもNotionで管理したい」

といった欲望に襲われてきます。

Notion API についてもう少し勉強しておいたほうがよさそうかな…

という現実を突きつけられた時期に

私はeasy-notion-blogをもっと簡単にした状態のものを

再現してみることにしました。

https://nextjs.org/docs/getting-started

まっさらなNext.jsを使って

• 画面遷移
• レイアウトを色分け
• header・footerをcomponentへ切り出し
• .module.cssの反映
• DBプロパティの取得・表示
• パスの作り方
• 記事内にNotionテキストを取得・表示

これらを実装しながら

Next.js Learnでふわっと理解した部分を

ガッツリ習得して、

Notion APIと仲良くなっていきました。

実際すごく時間がかかって苦労しましたが

改造の幅を広げることができたので

オススメです。

本家のコードにいろいろ分からない条件分岐がありましたが

分かる部分だけを使って実装しました。

すごく簡単なeasy-notion-blogの再現をすることのみを

目標にしていたので

省略しても動いてくれましたが、

ちゃんとしたブログにするには必要な記述だったと思います。

まだ理解できていない部分は追々勉強して

分かるコードにしていきたいなと思っています＼(^o^)／

「DBのプロパティを追加したい」

「記事以外のDBを表示させたい」

「固定ページもNotionで管理したい」

これらを実現させていきながら

ツヨツヨにします🔥

記事以外のNotionDBを表示する

NotionDBにプロパティを追加して表示する

固定ページをNotionページで管理する

libで取得して

componentsで切り出して

任意の場所に貼り付ける…

といったパターンをつかめてきます＼(^o^)／

ブログはすでに用意されている記事を

【表示する】機能。

でも

いろんなブログを見ると

入力フォームがあったり

いいねボタンがあったり

コメント機能があったり

ちょっと気になってきます。

そのために必要なのが「HTTP通信」と言われる知識。

APIがまさにそれで、

HTTP通信を勉強する前とした後とでは

親しみやすさのレベルが違うなと感じています。

過去にアルパカ先生が

easy-notion-blogをもっと楽しむための本を紹介していて

私も読みました📖

特にWebを支える技術は改造する時に

頻繁に読み返す本の１つです。

https://amzn.to/3WcUScS

よく目にするアルファベット３文字。

ISR、SSR、SDN…

これについて図解で詳しく説明されているのが

WEB+DB PRESS Vol.123です。

https://amzn.to/3hEoXmx

page/apiディレクトリに詰まっています！！

bookmark ブロックがライブラリを使わず実装されるようになり

HTTP通信の記述をのぞけるようになりました。

https://github.com/otoyo/easy-notion-blog/blob/main/pages/api/url-metadata.ts#L44-L50

いいねボタンは

アルパカ先生のブログのコードを覗きに行くと

見つけられます。

https://github.com/otoyo/notion-blog/blob/main/pages/api/like.ts#L29-L37

他にもOgImageブロックやNotionブロックの記述もapiディレクトリにあるので

見てると楽しいです。

本家でサポートされているHTTPは

そのまま取り込めば終わりですが、

アルパカ先生のブログにしかない機能だったり

自分で作ってみたい機能の場合には

元々ある本家のコードを手がかりに

知恵を絞ります。

実際に作ってみると

多くのことを知ることができました。

他にも検索機能を追加するとかコメント機能とかも頑張ればできそうですが、

入力フォームの実装で燃え尽きているhotomiは

しばらく休憩しようかなと思っていますwww

まだeasy-notion-blogを楽しむ部分があって

その中で一番気になっているのが「キャッシュ」です。

数ヶ月前

SlackのデータをSlackみたいに表示するアプリを作ったときに

ブログの改造とはまた違う壁にぶち当たりました。

それがキャッシュでした。

結果、

クリックするたびに

重々しいアプリになってしまい

使い物になりませんでした。

このアプリを使いやすくしたいので

キャッシュを勉強していきたい🔥

飽き性な私でも

easy-notion-blogを使い続けている理由は

【終わりがないから】

なのかもしれないなと最近思えてきました(*´ω`*)(*´ω`*)

この記事が

これからeasy-notion-blogを使おうとしている方や

これから改造したいけど途方に暮れている方の参考になれば幸いです。

まずはできることからはじめてみましょ＼(^o^)／