herohoroブログ

notion_sdk_jsを使って本家リポジトリIssueをNotionへ同期する_脱Zapier



🔄   2022-09-20

***

更新:

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

***

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

image block

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

🤨
そろそろ脱Zapierしたいな・・・

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

Notion developerにこんなものが。

image block

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

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

まさにこれ。

image block

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

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

image block

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

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

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

image block

https://github.com/makenotion

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

image block

使い方はすごく簡単!

image block

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. Step2:.envファイルを用意する
  5. Step2_1~2_3:必要なキーを取得する
  6. Step3:実行
  7. サーバーにdeployして自動化

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


Step1_1:githubレポジトリをclone

ターミナルから

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

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

VSCodeを駆使してcloneしてみる

小ネタとして・・・・

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

image block
😊
ブランチの迷子防止!!

image block

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

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

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

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

image block

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

image block

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

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

image block

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

image block

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

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

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

image block

「開く」をクリック

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

image block
😗
Notion公式レポジトリだし「はい」でいいかな。

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

image block

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

image block

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

image block


ターミナルで操作する場合

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

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

Step1_2:dockerコンテナを用意してnpmをインストール

*****

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

使わない方は

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

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

*****

😤
あえてdockerを使ってみるぞ

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

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

image block

▼ 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について詳しい解説記事はこちら

VSCodeのメニュー機能を使ってcommit

commitメッセージを入力

image block

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

commit!!

image block

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

image block
image block

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

image block

ターミナルタブから

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

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

image block

無事に送られた・・・

image block

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

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

image block

「OK」を選ぶ

image block

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

image block

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

image block

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

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

image block

あった〜〜〜\(^o^)/

docker image作成_ターミナルからの操作

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

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

cd examples/notion-github-sync/docker

dockerfileからimageを作成

docker-compose build

VSCode_拡張機能「Docker」を使ってコンテナ作成

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

image block

インストール

image block

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

image block

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

image block

image作成完了を確認\(^o^)/

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

image block

【docker compose Up】を選択

image block

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

image block

🤔
コンテナ名設定しておけばよかったな。。。 volume元のディレクトリ名になっちゃった。

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

npm -v

「8.1.2」と表示された\(^o^)/

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

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

npm install
cd example/github-issue-syncで実行

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

どこまでやったかというと・・・・
image block

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

Step2:.envファイルを用意する

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

image block

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

image block

👀
< >の部分を調べながら入れていくよ〜〜〜〜

Step2_1:githubのアカウントアクセスTOKENを取得

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

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

image block

⑧の「Select scopes」

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

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

image block
⚠️
“ ” は不要!!< > も不要!!そのまま入力!!

Step2_2:NotionAPIキーを取得

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

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

image block

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

image block

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

手順通りに進み「submit」

image block

「Show」から「copy」

image block

VSCodeへ戻って入力

image block

Step2_3:Notionデータベースidを取得

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

image block

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

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

image block

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

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

image block

Notion APIをInvite

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

image block

Database IDを取得する

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

image block

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

image block

Step2_4:取得したいgithubレポジトリに関する名前を取得

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

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

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

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

image block

VSCodeに戻って入力

image block

できた\(^o^)/

Step3:実行

READMEより

image block

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

image block

🤔
親のREADMEを確認したらいいのかな・・・・

親のREADMEより

image block

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

npm install @notionhq/client
cdはexamples/notion-github-sync

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

image block
🤔
さっきの「MODULE_NOT_FOUND」はnode_modulesが無かったってことかも・・。

もう一度実行をしてみる

node index.js

image block

できた\(^o^)/

Notionデータベースへ転記されているか見てみる

image block

うおおおおおおおおおおおおおΣ(゚∀゚ノ)ノキャー

転記成功\(^o^)/\(^o^)/

サーバーにdeployして自動化

🥳
deployする部分追加しました ______2022/05/02

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

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

image block

👇

image block

setting/GeneralからBUIDL COMMANDnode index.jsにする。

image block

😐
node index.jsって.....
image block

READMEのRun code\(^o^)/

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

image block

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

そしたらdeploy!!!

image block

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

image block

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

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


これを改造して

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

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

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


SDKせずとも同期できるようになった

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

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

この記事の意味は一体…

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

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

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

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

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


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

https://herohoro.com/atom

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

Twitter Timeline


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