herohoroブログ

easy-notion-blogがついに40スターに達した



🔄   2023-03-14

最近easy-notion-blogのスター数の増加スピードについていけていないへろほろです。

ついこの間30かと思っていたら….

おめでとうございます〜〜〜\(^o^)/\(^o^)/

私なりに急に感慨深くなってきまして…..

easy-notion-blogをForkしてから体験できたことを

振り返りたくなり記事にしてみました。

Forkする以前の私

easy-notion-blogに出会う以前、

「プログラミングの勉強したい。けど目的がない!どうしよう…」

という悩みを抱えながら過ごしていました。

そんな時期に、なんとなくのKaggle。

Kaggleは…..データ分析をするコンペ。

世界規模。

国内のコンペであるsignateでは練習コンペをワイワイ楽しむ程度だったので、

いざKaggleを覗いてみると別世界。

まずはトレーニングが必要だと察し、

無料で学べるKaggle Courseを進めていました。

image block

3つの講座を終えた後…..

image block

【頑張らなくても熱中できること】

を発見したんです。

それが『Notionで手順書を作ること』でした(´・ω・`)

お節介は私の特性

ある日お友達とNotion上で勉強ネタのやり取りしていた時、

「はじめてMac買ったんだけど便利ワザあったら教えて〜」

といったコメントが。

それを見るやいなや

紙をiPhoneでスキャンしてAir dropでMacに飛ばしてそこからPDFのサイズを調整する…

といった手順をNotionで作成してシェアしました。

もう衝動的な行動だったのでなんでそんなことをしたのか覚えていません。

ただの【お節介】というやつです。

image block

https://sparkling-cinnamon-3f9.notion.site/iphone-ipad-pdf-mac-e2054d2cec8b4dcfbbe85183bfe31a9e

これが楽しかった。

「〇〇教えて!」

って言われたら元教員の血が騒ぐわけです。

Notionはintegrationが公開された頃から使っていたので….

2021/05 頃から愛用していました。

勉強・読書・講座・野望…..

思い付いたことをそのままメモしてデータベースに収納。

別件で開いた時に頭の中が整理されていれば修正して整理整頓していく。。。

そんな感じで使い続けていたNotion。

『自分だけでなく他の人にも役に立つ内容にできたら面白そう』

そう思ったのが2021/11 頃でした。

ただ公開設定をしてもあんま広まらない。

じゃ、ブログしかない……

ということでGitHubを探すものの

中々使いこなせるリポジトリが見つかりませんでした。

easy-notion-blogを発見「信頼できるぞ」

当時公式APIでのリポジトリが少なく、

README通りに進めてもなかなかdeployまでたどり着けず

涙目になっていたところアルパカ先生のZennの記事に出会いました。

アルパカ先生のブログへ飛び、

notion-blog関連の記事を全て読み…..

image block

https://alpacat.com/blog/tag/Notion Blog/before/2021-11-30

Notionの公式APIについての

詳しい解説をしている記事が

少なかった時期に、

ここまで記事数を投稿されていることに驚かされました。

「….この人が作ったリポジトリなら安心して使えるかも」

そう感じました。

日付に注目して遡ると…..

image block

公式APIが発表されてすぐに使いはじめているんです。

この早さに私は絶大な信頼感を抱きました。(今となってはこの感覚が正しかった)

\(^o^)/

私がeasy-notion-blogをForkしたのは2021/12/10。

Fork数が一桁。

スター数も一桁。

たしか4人とかだったかな…….….…

ブログを改造できると勘違い

カスタマイズしたくなったら、私のブログの Notion Blog カテゴリ
で様々なカスタマイズ方法を解説していますのでぜひ参考にしてください。

https://zenn.dev/otoyo/articles/38e4092927f7c1

この部分を私はなんの疑いもなく真に受けてしまいます。。。。。😂

5ヶ月ほど経ってアルパカ先生が投稿された記事で…..

以前からOSS(オープンソースソフトウェア) を作ったことはありましたが、
それらは全て職業エンジニア向けのものでした。
easy-notion-blog を作ったのは Zenn にも書いた通り Notion Blog が使いたかったからと、それが楽しかったので自分だけの体験にしておくのはもったいないと思ったからでした。
easy-notion-blog を公開した当初は「OSSなのだから使える人だけ使えれば良い。よってサポートはしない」というスタンスでした。

easy-notion-blog v0.7 アップデート内容の紹介

職業エンジニアでもない私がズケズケと参上してしまったが故に

アルパカ先生までも巻き込んでしまっていた事実を知りました。

なんとお礼を言っていいのやらです(´・ω・`)

でも、さすがにCloud Runは止められましたwww

プログラミングの難易度を理解できていないってある意味無敵ですwww

当時の私は解説記事さえ見つけられれば実装できるもんだと思い込んでいたのだから恐ろしい( ゚д゚)ハッ!

立ち会えたeasy-notion-blogの開発過程

Forkしたばかりの頃の記事一覧ページのコードはcomponentがほぼ無い状態でした。

<Header path="/blog" titlePre="" />
      <div className={`${blogStyles.flexContainer}`}>
        <div className={`${sharedStyles.layout} ${blogStyles.blogIndex}`}>
          {posts.length === 0 && (
            <p className={blogStyles.noPosts}>There are no posts yet</p>
          )}
          {posts.map(post => {
            return (
              <div className={blogStyles.postPreview} key={post.Slug}>
                {post.Date && (
                  <div className="posted">📅&nbsp;&nbsp;{post.Date}</div>
                )}
                <h3>
                  <div className={blogStyles.titleContainer}>
                    <Link
                      href="/blog/[slug]"
                      as={getBlogLink(post.Slug)}
                      passHref
                    >
                      <a>{post.Title}</a>
                    </Link>
                  </div>
                </h3>
                <div className={blogStyles.tagContainer}>
                  {post.Tags &&
                    post.Tags.length > 0 &&
                    post.Tags.map(tag => (
                      <Link
                        href="/blog/tag/[tag]"
                        as={getTagLink(tag)}
                        key={`${post.Slug}-${tag}`}
                        passHref
                      >
                        <a className={blogStyles.tag}>🔖&nbsp;&nbsp;{tag}</a>
                      </Link>
                    ))}
                </div>
                <p>{post.Excerpt}</p>
                <Link href="/blog/[slug]" as={getBlogLink(post.Slug)} passHref>
                  <a className={blogStyles.expandButton}>Read more...</a>
                </Link>
              </div>
            )
          })}
          {firstPost.Date !== posts[posts.length - 1].Date && (
            <div className={blogStyles.nextContainer}>
              <hr />
              <Link
                href="/blog/before/[date]"
                as={getBeforeLink(posts[posts.length - 1].Date)}
                passHref
              >
                <a className={blogStyles.nextButton}>Next page ></a>
              </Link>
            </div>
          )}
        </div>
        <div className={blogStyles.sideMenu}>
          <h3>Recommended</h3>
          <hr />

          {rankedPosts.length === 0 && (
            <div className={blogStyles.noContents}>There are no posts yet</div>
          )}
          {rankedPosts.length > 0 && (
            <ul>
              {rankedPosts.map(rankedPost => {
                return (
                  <li key={rankedPost.Slug}>
                    <Link
                      href="/blog/[slug]"
                      as={getBlogLink(rankedPost.Slug)}
                      passHref
                    >
                      <a>{rankedPost.Title}</a>
                    </Link>
                  </li>
                )
              })}
            </ul>
          )}
          <h3>Categories</h3>
          <hr />

          {tags.length === 0 && (
            <div className={blogStyles.noContents}>There are no tags yet</div>
          )}
          {tags.length > 0 && (
            <ul>
              {tags.map(tag => {
                return (
                  <li key={tag}>
                    <Link href="/blog/tag/[tag]" as={getTagLink(tag)} passHref>
                      <a>{tag}</a>
                    </Link>
                  </li>
                )
              })}
            </ul>
          )}
        </div>
      </div>
src/pages/blog/index.tsx

同じ表示を他のページでもしたい場合は同じコードを貼り付ける。。。

この時期の私は、

「ブログを改造する」といってもcssをいじる程度のレベルだったので

そこまで気にはなっていませんでしたが、

知識があってゴリゴリ改造しようとすると大変そうだなというのが今振り返ると理解できます。

急にやってきた台風のようなコンフリクト

突如アルパカ先生が謎のツイートをされ…..

リファクタ??

コンポーネント???

よくわからないけど

とりあえず

私のような初心者にとって

嬉しいバージョンになるってことだけは

伝わってきました。

めっちゃゴリゴリやられているのも伝わり…..

少しずつ嫌な予感が…..

リリースされたとき、

驚くを通り越して笑ってしまいました😂

image block

https://github.com/otoyo/easy-notion-blog/commit/1bd218b40fdf3a31caa1204f86084a0fb15a37ed

コンフリクトしない部分がほぼ無いという内容。。。

この時期レイアウトも改造し、

記事一覧にサムネも追加して2カラムにしており…..

class名も追加していてメモしながら整理しないともう理解できない状況でした。

不安でたまらないことを察してくださったのか

アルパカ先生からこんな返信が

このコメントで勇気づけられ、

急がず焦らず深呼吸で

「できること」

「調べればできること」

「お手上げなこと」

を仕分けながらなんとか乗り越えることができました。

この経験がeasy-notion-blogの構造を理解する上でとても役立ちました。

改造しようと思った時に

どのファイルに何があるかを自然と覚えることができたんです。

涙目になりながらもなんとか食らいついてよかった…..(´;ω;`)

増してきた改造力

その後公式APIが追加されるとすぐeasy-notion-blogにも導入してくださり….

本当仕事が早いアルパカ先生。

image block

https://herohoro.com/blog/support_check

easy-notion-blogがどんどん成長していく過程が

すごく可愛くて

追加されるcommitを取り込むのが

ペットを世話しているような感覚になり

無くては困る存在になっていきました。

同じリポジトリで

「こんなこともできる」

「あんなこともできる」

を紹介したくて改造に熱が入り、

create-next-appから組み立ててeasy-notion-blogの簡易版を再現してみたり、

Reactの講座を受講してみたり、

参考書を買ってみたり、、、、

いろいろやっていくうちに作りたいことを実装できるようになりました。

職業エンジニアではない私でもなんとかなっちゃう改造レベル。

「誰でもできるんだよ〜」

っていうことを伝えたくて解説記事を投稿し続けています(*^^*)///

見習いたい人が湧いてくるTwitterコミュニティ

アルパカ先生の最新情報をキャッチするスピードの早さにいつも驚かされます。

このコミュニティができたことでeasy-notion-bog仲間が増えました。

いつも不思議なことがありまして…..

『みんないい人』

なんです。

誰か1人くらい

すんごい感じの悪い人がいてもいいはずなのに

誰もいない。

不思議です。

そして勉強熱心な方ばかり。

「何かお困りごとあれば〜」

と声をかけられたら

「じゃ、これ教えてくださいー」

ってならない。

これまた不思議。。。。

『ちょっとまだ自分の力を信じて格闘してみます🔥』

っていう熱気が本当眩しい。

私も頑張ろっていつも励まされます。

上手くいかないとすぐ涙目になってしまうのは今でも同じなので。。。。

見習いたいことが沢山あって

「私もやりたいです!!」

ってすぐコメントしてしまうけど、

実際行動できていないのは…..

『落ち着いて考えてみると優先順位低いよな。』

って自分の目標をあとから見返して反省しているからなのです。。。

本当は全部やってみたいし、学びたい。

そんな気持ちでいつもツイートを拝見しています(*´ω`*)(*´ω`*)

最後に

スター数をブックマーク的機能だと勘違いしていて

最近easy-notion-blogのスターを押したへろほろwww

そして2月までアルパカ先生が女性だと思いこんでやたらと絡んでいました。

(女子大出身なもので、急に距離を近くしてしまう癖が…..)

そんな感じでも適度な距離感をキープしつつ

冷静に対応してくれるアルパカ先生が大好きです(^^) ※ 男性としてとかではなく人間として

すごい人なんだろうというのは薄々察しています。

easy-notion-blogを企業のテックブログへと普及させようとされていて、

それはどういう意味を持つのかという部分までは考えが及びませんが、

全力でついていきたいと思います\(^o^)/

面白い世界が広がりそうな予感がしています⭐

(結局お手紙みたいな締めになってしまいすみません 😅)

では、いい週末を(*´∀`*)www

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

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

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

Buy Me A Coffee

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


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

https://herohoro.com/atom

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

Twitter Timeline


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