herohoroブログ

作って学んでオシャレに楽しくしちゃおう!!_NotionDBでブログを管理するからできるダッシュボードのカスタマイズ



🔄   2023-03-14

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

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

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

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

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

Notionだって負けてません。

だってNotionだもの。

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

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

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

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

今日は

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

について整理しながら、

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

簡単に使えるけど不自由

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

https://indify.co/

image block

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

image block

🤔
ちょっと使いたい方向性が違うんだよな……..

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

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

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

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

image block

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

ダッシュボードのカスタマイズで求めること

カスタマイズする際、

何に重きを置くか….

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

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

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

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

いろいろだと思います。

私の場合で言えば、

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

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

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

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

3つの要素を埋め込む

私の求める要素:

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

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

動線を良くするための埋め込み

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

月ごとに履歴や予定を管理する

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

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

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

image block

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

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

image block

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

image block

🌝
うん。満足

Tag別に記事を表示する

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

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

image block

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

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

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

本家リポジトリの進捗を管理する

OSSなeasy-notion-blog。

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

意外とハマるのは、

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

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

といった時。

「fitchしろよ」

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

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

すぐに裁けない私は、

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

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

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

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

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

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

image block

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

アイディアをとりあえずストックする

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

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

image block

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

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

🥳
動線仕上がってきたかも…..🎶

オシャレにする埋め込み

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

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

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

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

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

image block
テキストを可愛くアレンジできるColor Paletteが激アツだ_equation より

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

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

image block

image block

🥳
カラフルになってきたね〜〜〜〜

モチベーションを維持するための埋め込み

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

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

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

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

というより

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

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

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

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

すやすや おやすみモード

image block

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

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

腹式呼吸な動き。

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

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

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

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

見通しをなんとなくながめる

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

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

なんとな〜く

「来週何日だっけ?」

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

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

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

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

埋め込んでみました。

image block

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

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

字幕もありません。

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

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

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

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

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

https://youtu.be/hdnt-jdDlao

ちょっぴり緊張感

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

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

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

image block

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

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

https://youtu.be/IFNUXlqtROc

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

まとめ

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

image block
image block
これはTask用に簡易的にDBを作ってます
image block
image block
image block
image block

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

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

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

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

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

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

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

いいとこ取りでした\(^o^)/

👆
作成した埋め込みはショート動画にしてこのスレッドに記録しています。気になる方はのぞいてみてね。

Twitterでは更新のお知らせを随時行っています

興味ある方はLet'sフォロー★

▼ この記事に興味があったら同じタグから関連記事をのぞいてみてね

Buy Me A Coffee

新着記事を通知したい??


RSSリーダーにatomのリンクを登録すると通知が行くよ🐌

https://herohoro.com/atom

やってみてね(*´ω`*)(*´ω`*)

Twitter Timeline


フォロー大歓迎\(^o^)/