ブログの改造に６ヶ月ほど熱狂してきた私。

「ダッシュボードもカスタマイズしたい….」

という欲が突如となく現れました。

人間の欲って終わりがないですね(´ﾟдﾟ｀)

今まで「easy-notion-blogは改造しやすい!!!」ということを熱く語りまくってきましたが、

Notionだって負けてません。

だってNotionだもの。

ブログを改造するより簡単に埋め込むことができます。

何を埋め込むか…って部分が萌え要素。

Notionを使いはじめて間もない頃はIndifyやApptionを使って満足していました。

でも少しずつ不自由さが。

今日は

• その不自由さはどんな部分で感じたのか
• カスタマイズする上で何を求めているのか

について整理しながら、

実装する上で学べる過程を紹介しようと思います。

簡単にカレンダーや時計などをオシャレに埋め込めるIndify

https://indify.co/

でも有料にすると機能を追加できるようです。

左のサイドバーから色を設定できるものの、

痒いところに手が届きそうで届いていない感じ。

• 複数月を並べて見通す使い方をしたい
• 登録した予定を表示させるというより日付をみたい

ブログを書く時、予定を立てるのはNotionDBのCalendar viewで十分です…..

NotionDBのCalendar viewに無い機能を埋め込みたいのです(´・ω・｀)

カスタマイズする際、

何に重きを置くか….

によって個性がでるかと思います。

「動線を良くして生産性を上げたい!!!」

「オシャレにしたい!!!!」

「モチベーションを維持できるようにしたい!!!!」

いろいろだと思います。

私の場合で言えば、

「動線を良くして生産性を上げつつオシャレにしてモチベーションを上げたい」

全部欲しい。(´・ω・｀)

全部欲しいけど、１つ１つの要素に対してはそこまで高性能なものを必要としておらず、

ざっくり習慣化できればいい….といった大雑把な使い方が性に合います。

私の求める要素：

1. 動線を良くする
2. オシャレにする
3. モチベーションを維持する

過去に作成した記事も紹介しながら３つの要素を埋め込む過程を紹介します。

easy-notion-blogのNotionDBを活用すると動線を良くすることもできます。

先程ちらっと見せたこのNotionDBのカレンダー。

「週に１回のペースで投稿するぞ」

と数日前目標を立てたので達成するための見通しをざっくりメモしています。

これは、easy-notion-blogで用意されるNotionDBをCalendar viewに切り替えただけの状態です。

切り替える前はこんな感じ。

easy-notion-blogをset upする際、初期化scriptによって空のNotionDBに列が追加されます。

記事がある程度たまってくると分類済の状態で見たいことが多々あります。

Tag列でフィルター設定をするとviewごとに切り替えられて便利です。

同じ種類の記事とにらめっこしながら、

• Rankをどうするか
• Slugをどうするか
• OGImageの統一感はあるか
• サブTagにモレはないか….

そんなことを意識する時に活躍してくれるviewです。

OSSなeasy-notion-blog。

新たなcommitがあれば取り込まねばなりません。

意外とハマるのは、

ブログの改造をしていて思うように実装できない原因が

最新のcommitを本家から取り込めていなかったから….

といった時。

「fitchしろよ」

と言われればそれまでなんですが、

commitを取り込む際に競合コードの指摘を受けても

すぐに裁けない私は、

改造しようかなと思った時、

「追加commit来てるから….この日に時間とってじっくりやろうかな」

「じっくりやって学んだことを記事にしてみようかな….」

「記事に清書するのをいつにしようかな…..」

そんなことを考えないと実行できないんです。

記事を管理するNotionDBの下にcommitを管理するNotionDBを入れています。

Zapierを使ってちょちょっと実装できるのでオススメです⭐

Fast Notionをダッシュボードページに連携させて

ページの末尾にはFast Notionから飛んでくるメモを入れています。

公式サイトのマニュアルがすごく分かりやすく迷うことなく設定できるのでストレスなく設定できます。

過去に記事にして解説したこともあるので興味のある方はのぞいてみてください~~。

厳密に言えば埋め込みというより「装飾」かな？？？

動線の説明の中で度々登場したタイトル。

謎にカラフルで凸凹しているのはテキストを数式表示にしているから。

数式で文字の色を切り替えられる….

それを知ったのは数ヶ月前。

この装飾をNotionDBにしてまとめてくださったのがeasy-notion-blogのメンバーでもあるひつじさんです。

以前興奮しながら使い方の解説記事を投稿しているので気になる方はのぞいてみてくださいね〜🎶

ふとダッシュボードを開いた時に

「はぁ…..面倒くさっ」

っていう気持ちになってしまうのは避けたいところ。

限られた時間の中カツカツ記事を仕上げる…..

というより

ゆったり楽しみながら記事を仕上げる…..

といった楽しみ方をしている私は

居心地の良さを演出しつつ

ちょっぴり緊張感も出したいなと思いました。

トトロのお腹の動きってすごく安心感があって落ち着くなと小さい時思ってから

あのゆったりした動きを見ると癒やされるのは今でも変わりません。

腹式呼吸な動き。

実際緊張している時に「ふぅ〜〜」ってすると落ち着くことありますよね。

そんな動きをダッシュボードに埋め込めたら落ち着けるのかなと思い実装してみました。

マイナスイオン的な動きなので

疲れたらじっと見ると元気になれます。(私だけ!?)

具体的なスケジュールはNotionDBで満足しているので、

記事を作成しようかな〜と思った時に

なんとな〜く

「来週何日だっけ？」

「あ、この日あれがあったな….」

「じゃ、今日これやっとこうかな…」

「ってなると、来月のこの日までにここまで仕上げたいな….」

みたいな見通しを意識できる埋め込みがあると心強いなと思い、

埋め込んでみました。

実装は、Online Tutorial というYouTubeチャンネルを見ながら作ることができました。

このチャンネルは音声による解説は一切なく、

字幕もありません。

ただただBGMと作業過程を収録した動画です。

それがすごく分かりやすく、性に合いました。

無言の動画上であっても検証画面の使い方やライブラリの取り込み方などを学べます。

言語の壁が取っ払われた形式がなんとも感動的だなと思い、

習慣的に視聴しています⭐

https://youtu.be/hdnt-jdDlao

天井に「目と口の３点」があるとお化けだと思い込む….

っていうシーンをテレビドラマで見てはっとしました。(ディーン・フジオカのドラマだったっけか。)

「動く目があれば誰かに見られている感を作れるかも」って。

これもOnline Tutorialの動画を参考に作りました。

カーソルに合わせて瞳が動くscriptを入れています。

https://youtu.be/IFNUXlqtROc

カタツムリはオリジナルですwww

こんな感じのダッシュボードが出来上がりました〜〜〜〜

ブログの記事管理をNotionDBで行っているeasy-notion-blog。

ブログ上の改造はVSCodeでゴリゴリと。

ブログのダッシュボード上ではNotion的にゴリゴリと。

埋め込む内容に幅を広げるために

出来合いのサイトを使わず、

コードを組んで作り上げる。

作り上げる過程の中で知らなかったプロパティやライブラリなどに出会えて勉強にもなる。

いいとこ取りでした＼(^o^)／