***

更新：

• deployをして自動化・他 __2022/05/02

***

Zapierは便利だけど５つまでしか無料で使えない。

詳細：「本家リポジトリで追加されたPull Request 内のcommitをNotionで管理する_Zapier」

と思いながら調べていると。

Notion developerにこんなものが。

https://notion-group.readmepreview.com/page/examples

リポジトリのIssueと同期する機能。

まさにこれ。

詳細：「本家リポジトリで追加されたIssueをNotionで管理する_Zapier」

【Fork repository on GitHub】をクリックすると

https://github.com/makenotion/notion-sdk-js/tree/main/examples/notion-github-sync

公開ソースコードがあります。

他にも「makenotion」というアカウントからNotionに関するいろいろなレポジトリがあるようで。

https://github.com/makenotion

今回発見した「notion-github-sync」は【notion-sdk-jp】リポジトリにあります。

使い方はすごく簡単！

https://github.com/makenotion/notion-sdk-js/tree/main/examples/notion-github-sync#running-locally

今日はNotion developerにあるレポジトリをもとに

本家リポジトリのIssueをNotionデータベースへ同期していきます⭐

1. Step1_1：リポジトリをclone
2. Step1_2：dockerコンテナを用意してnpmをインストール
3. Dockerを使わないでnpmをインストールする
4. Step２：.envファイルを用意する
5. Step2_1~2_3：必要なキーを取得する
6. Step3：実行
7. サーバーにdeployして自動化

• VSCodeのメニュ機能を駆使してclone・commit~push
• VSCode_拡張機能「Git Graph」 を使って迷子防止
• VSCode_拡張機能「Docker」を使ってコンテナ作成

ターミナルから

git clone https://github.com/makenotion/notion-sdk-js.git

を打てばいいんだけど・・・・

小ネタとして・・・・

VSCodeの拡張機能で「Git Graph」を入れたらすごく使いやすくなりました。

*** ▲ Git Graphについては以上....

VSCodeのメニュー機能を駆使すれば、

ポチポチするだけでコマンド入力の呪縛から解法されます☆

左のサイドメニューからソース管理アイコンを選び、「リポジトリのクローン」を選択。

VSCodeを立ち上げたばかりなら「作業の開始」タブにも表示されます。

リポジトリURLを入力する欄が表示されるので

https://github.com/makenotion/notion-sdk-js.gitを入力。

cloneの置く場所を設定する画面になる。

今回はこのフォルダ内にリポジトリフォルダを入れたいので

「リポジトリの場所を選択」をクリック

VSCodeに切り替わって画面右下に通知が現れる。

「開く」をクリック

信頼するかの画面になる。

無事にcloneしたファイルをVSCodeで表示されました＼(^o^)／

今回使用するのはnotion-sdk-jsの中のexamplesの中の【notion-github-sync】

examplesフォルダを開くと【notion-github-sync】にある

• cloneする

git clone https://github.com/makenotion/notion-sdk-js.git

• cloneしたフォルダ内にある今回使用する「github-issue-sync」へ移動

cd examples/github-issue-sync

*****

※ docker使わずローカル上でやっても全然問題ありません....😂

使わない方は

👇こちらから進めてください

Dockerを使わないでnpmをインストールする

*****

notion-github-syncフォルダ内にdockerフォルダを用意して

その中でDockerfileとdocker-compose.ymlを作成してみました。

▼　Dockerfile

FROM node

ENV NODE_ENV=development

# 雛形を生成パッケージ
RUN npm install -g express-generator

WORKDIR /usr/src/app/

# ポート3000番を開放
EXPOSE 3000

▼　docker-compose.yml

version: '3.8'
services:
  webserver:
    build: .
    image: node_npm
    tty: true
    volumes:
      - ../../../:/usr/src/app
    ports:
      - "8080:3000"

👆 imageはDockerfileで作ったimageの呼び名を命名してる

dockerについて詳しい解説記事はこちら

commitメッセージを入力

※　volumeの記述「../../../」に修正する前の画像ですm(_ _)m

commit！！

git add -A をせずにcommitするとこんな親切なメッセージが表示される。

出力タブが表示され、質問に答える。

ターミナルタブから

git config --global user.name "githubアカウントの名前"
git config --global user.email "githubアカウントのアドレス"

そしたらもう一度commit！！！

無事に送られた・・・

「同期の変更」に【１】という表示になった

「同期の変更」をクリックしてpush!!!!!

「OK」を選ぶ

足りないことがあれば通知から教えてくれます。

完了すると通知から「githubを開きますか？」と聞かれるので「開く」を選ぶと・・

無事自分のリポジトリのpushされていることを確認。

念の為「commits」から追加した「Add docker」が存在するかを見てみると・・

あった〜〜〜＼(^o^)／

現在地が親フォルダ(notion-sdk-js)なので

examples/notion-github-sync/dockerフォルダへ移動

cd examples/notion-github-sync/docker

dockerfileからimageを作成

docker-compose build

左サイドメニューの拡張機能アイコンから「Docker」を検索

インストール

左サイドメニューに「Docker」が追加される

開いてみると作成したimageが表示されている

image作成完了を確認＼(^o^)／

【Shift + コマンド + P】でコマンドパレットを表示させ

【docker compose Up】を選択

「docker」という名前のコンテナが作成できました＼(^o^)／

npmがインストールされているか確認

npm -v

「8.1.2」と表示された＼(^o^)／

***** ▲ ここまでがDockerでやるバージョン

npm install

とターミナルに打ち込めばOKです☆

👆「1.Setup your local project」まで終わりました！！！

notion-github-syncフォルダ内に.envを追加

READMEのソースコードをコピペする

公式リファレンスに説明があります⭐

手順が多いので画面を２分割表示して工程ごと設定していくといいかも・・・

⑧の「Select scopes」は

• repo👉✓
• admin:repo_hook/read:public_key👉✓

tokenをコピーしたらVSCodeへ戻って入力

Notion API公式リファレンスに説明あります⭐

説明内にある動画も参考にするととても分かりやすいです＼(^o^)／

過去にこのブログを開設する時にもAPIを作成したのでその記事も参考になります⭐

記事：easy-notion-blogを開設する流れ_これでもかと丁寧に解説

手順通りに進み「submit」

「Show」から「copy」

VSCodeへ戻って入力

READMEにはテンプレが用意されているとのことなので

埋め込まれているリンクへアクセス

https://www.notion.so/367cd67cfe8f49bfaf0ac21305ebb9bf?v=bc79ca62b36e4c54b655ceed4ef06ebd

「Duplicate」から複製して自分のnotionへ取り込もう＼(^o^)／

好きな位置に移す(Move to→Turn into inline)

Notion APIをInvite

⭐公式Notion API作成の説明の次(Step2)にあります⭐

Database IDを取得する

⭐公式Notion APIのInviteの下(Step2内)に説明あります⭐

?の前の文字列をコピーしたらVSCodeへ戻って貼り付ける

作りたいのは親リポジトリでIssueが追加されたらNotionデータベースへ追加する機能。

このブログ(easy-notion-blog-02)の

親リポジトリ(easy-notion-blog)の

持ち主(otoyo)になる(´・ω・`)

VSCodeに戻って入力

できた＼(^o^)／

READMEより

そのままnode index.jsで実行するとエラーになる

親のREADMEより

installする必要があるとのこと。

npm install @notionhq/client

notion-github-syncフォルダに「package-lock.json」「node_modules」ができた。

もう一度実行をしてみる

node index.js

できた＼(^o^)／

うおおおおおおおおおおおおおΣ(ﾟ∀ﾟﾉ)ﾉｷｬｰ

転記成功＼(^o^)／＼(^o^)／

Vercelに今回作成したリポジトリを同期。

.envで入力したkeyやvalueをsetting/Environment Variablesへ登録

👇

setting/GeneralからBUIDL COMMANDをnode index.jsにする。

READMEのRun code＼(^o^)／

node index.jsを実行するディレクトリはexamples/notion-github-syncなので.....

Build & Development Settings の次の項目にあるRoot Directoryで設定。

そしたらdeploy!!!

これでZapierを１つ卒業できそうです⭐

めでたしめでたし(*´∀｀*)

今回使用したコードはこちら

これを改造して

commit追加時にNotionデータベースへ

転記してくれるようにしたいな・・・(´・ω・`)

いつになることやら....

ちょいと前にサポートされたDBのGitHub機能。

これであっさりと脱Zappierできてしまう世の中になりました。

この記事の意味は一体…

ま、以前はこんな大変だったのさっていう思い出話としてとっておくことにします。。。。