Site cover image

⚙️ ヴァルボーグの雑記ブログ

雑記、プログラミング、システム開発、ゲーム、グラブル、豆知識などなど

astro-notion-blogの中身を魔改造してみた

はじめに

最初はNotionがそのままブログとして運用できるから超便利!!!

って思って書いていたけど、使い始めてから不便が出てくることってあるよね。

使い始めて早速だけど移行も考えたレベル。

markdownに戻ろうかとも思ったけど、色々考えた結果手っ取り早く環境を整えるためにNotionはそのままにして自分で改造する方が早いかなと思ったのでやってみることにする。

移行を考えた理由

1.Notionの見出しが3種類しか無い(Notion側の制約)

HTMLには見出しタグがh1〜h6まで存在するが、Notionにはこれに該当するものが見出し1〜見出し3までしか存在しない。

最初は気づいていなかったが、記事をマークダウン形式で書いている途中に見出し4を使おうとして#を4回入力するも、変換されなかったため気づいた。

ただHTMLとして見出しを6までフルで使うような記事があるかといわれたら無いと思う。

記事を見直して分割などした方が良いのではと考えてしまう。

そのためこの点については受け入れて進むことにする。

むしろ仕様知れてラッキーって感じ。

2.見出しタグの使われ方が思っていたのと違う(自分と開発者での思想の違い?)

Notionの見出し要素はそのままHTMLの見出しタグになると思っていた。

具体例を上げると見出し1→<h1>

しかしどうやら先程の見出しが3種類しか無い理由にも繋がるのだが、

見出し1→<h4>

つまり+3された見出しになっていた。

一旦見出しタグの用途を全て記載してみる。

h1→ブログのタイトル

h2→タグ検索結果ページのタグ名(記事ページでは未使用)

h3→記事のタイトル(サイドメニュー、記事ページのタイトル、

h4→Notionの見出し1

h5→Notionの見出し2

h6→Notionの見出し3

自分の思想としては、ブログをやるのであれば見出し1がタイトル、それに関する見出しをh2以降の見出しタグを使うべきと思っている。

HTMLのh1タグはページの中で1回のみにするという制約があるが、Notionの見出し1はページ内で何回でも使えてしまう+見出しが3つしか無いので、見出し1が1回のみということは避けたい。

そのため、h1は記事のタイトルで、以降の見出しごとにh2〜h6を使う感じとなり、下記のようになる。

h1→記事のタイトル

h2→記事内の見出し1

h3→記事内の見出し2

h4→記事内の見出し3

h5→未使用

h6→未使用

記事としてこうあるべき、という思想のもと話しているが、SEO的に実際に効果があるのかまではわからないとだけは言っておく。

あと上記のルールであればmarkdownで記述したとしても違和感は無いはず。

また、asideを使ってセクションを分離しているため、aside内でもrecommendedやCategoriesという部分にh2タグを設定。

記事部分とサイドの部分で論理的に別れているのでそれぞれで見出しのh2などのタグを使えるらしい。

やはり疑問に思ったことは調べてみることが大事。

3.自分の理想のブログ構成に近づけたい(個人的思想)

サイドメニューでの見出し作成

QiitaやZennで採用されている段落がサイドバーにあってクリックで飛べてスクロールすると追従するやつ、あれをやりたい。

Notionにそういうブロックがあったが、自動で用意してくれるのが理想なので自前で用意する方法になりそう。

一応そのパーツを下記に表示してみる。

こんな感じのを作りたい

公開と非公開のステータスしか無かったので下書きプレビューなどもつけたい

現在のastro-notion-blogは公開のフラグはチェックボックス、つまり下書きプレビューがNotion上でしか確認できない。

しかし実際に公開してみたらなんか違うとかも有り得るので、下書き、テスト公開、本番公開というステータスを持つようにしたい。

これであれば複数人でブログ運営することになった場合でも、後から承認待ちとかのステータスも追加がしやすい。

移行を思いとどまった理由

1.Markdown+エディタ+Git管理よりもNotionのみにしたい

Markdownエディタについてはプラットフォームを問わずに使えるObsidianで決まっていたのだが、記事の内容についてはGitで最新の状態に同期するのが面倒ではってなった。

PCで作業していたが出かける、出先でスマホから続きというシームレスな体験がGitだと難しそう。

Obsidian Gitというコミュニティプラグインを使えば1分ごとに変更点をコミット&プッシュというのもできるが、スマホでアプリを非アクティブにした場合にそれが走らない(スリープ扱いになる?)というのがこの前あり、同期が失敗した。

2.Notion AIが使える

理由として一応あげておくが、ObsidianでもOpenAIのAPIを使って同機能が使えるコミュニティプラグインはある。

ただし従量課金と無料回数or定額課金という差はある。

3.コンセプト自体が気に入ってるので使い続けてみたい

Markdownでライブプレビューしながら記事を書く体験ができるのは自分の知る限りNotionとObsidianのみ。

まぁNotionはエディタというよりMarkdownと同じ記法で自動的にブロック変換をしてくれるというだけだが。

vscodeだと左が入力、右がプレビューという感じなので視点移動させなきゃいけないのが面倒だと思った。

4.1からやり直すのが面倒になった

ぶっちゃけ一番の理由はこれ。

というわけで自分で納得がいくブログに育てていきたいなと思ってる。

今後もまだまだ魔改造計画が残っている。

書いてから思ったけどGitHubのIssueでやれば良かった説。