はじめに
別に狙ったわけではなく、Nodeでnoteです。ややこしいわ。
noteの数値を観測したいから、自分で作るか
とあるnoteアカウントでほぼ毎日投稿しているのですが、アクセス解析とかフォロー数の増減とか、そういうのが 微妙に使いづらい です。「今」のフォロー数とか、「今」の記事のアクセス数・スキ(いいね)数は見られる。それもいいけど、時系列に数の増え方を見たいなーと思って、ちょっと調べました。
調べた結果、noteは巷で非公式APIと呼ばれているものがあり、逆に公式はない。ほしい人は、非公式APIを使っているようです。もちろん、仕様はオープンになっていないし、急な仕様変更もある。不正アクセスとして、使っているアカウントがバンされるかもしれない。
ちなみにそれは、noteを使っているときの通信を開発者ツールで見て探すらしいです。めんどくさいなぁ。
ログインもめんどくさい
というわけで、それをやってみようかなーと思った最初の壁が、ログインです。
まぁちゃんと作ればできるかもしれないけど、ちゃんとやるほど仕様変更対応がめんどくさい。せっかく作ったのに...ってなる。
ダメ人間丸出しか。
めんどくさい x めんどくさい = ブックマークレット
対策として、ブラウザでログイン（クッキーで）した上で、ブックマークレットでAPIアクセスすれば、クリックを数回やればすむと気付きました。
そしてブックマークレットの開発は、Node.jsでやりたいよなぁということで、「Nodeでnoteのブックマークレット作成」です。
ほぼ、環境設定の記事です。
作成
環境構築 ステップ１
最初のこういうの↓はいいとして
mkdir bookmarklet-ts
cd bookmarklet-ts
npm init -y
npm install --save-dev typescript
npx tsc --init
tsconfig.jsonはこうしました。↓
{
"compilerOptions": {
"rootDir": "./src",
"outDir": "./dist",
"target": "ES2017",
"module": "none",
"strict": true,
"skipLibCheck": true,
"removeComments": true,
"moduleDetection": "legacy"
},
"include": ["src/**/*"]
}
package.jsonのscriptsはこう。↓
"scripts": {
"build": "npx tsc"
}
で初めのソースとして、
(() => {
const msg = "ブックマークレットからこんにちは！";
alert(msg);
})();
これで、npm run buildを実行すると、dist/main.jsができる。この時コメントも削除されます。
環境構築 ステップ２
つぎに、dist/main.jsを読みこんで、ブックマークレットに入れられる形に加工します。
scriptsフォルダを作って、scripts/build-bookmarklet.jsを作成。↓
const fs = require("fs");
const path = require("path");
const jsPath = path.join(__dirname, "..", "dist", "main.js");
const jsCode = fs.readFileSync(jsPath, "utf8");
// 余計な改行をつぶして1行に
const oneLine = jsCode.replace(/\s+/g, " ");
// IIFE で包んで bookmarklet 用にする
const wrapped = "javascript:(()=>{" + oneLine + "})();";
// URL エンコードしておくと安全な場合が多い
const encoded = "javascript:" + encodeURIComponent("(function(){" +
oneLine +
"})();"
);
// そのまま版と、エンコード版を両方出力
console.log("=== bookmarklet (raw) ===");
console.log(wrapped);
console.log("");
console.log("=== bookmarklet (encoded) ===");
console.log(encoded);
このスクリプトが実行されるように、package.jsonのscriptsに仕込みます。
"scripts": {
"build": "npx tsc",
"bookmarklet": "node scripts/build-bookmarklet.js",
"build:all": "npm run build && npm run bookmarklet"
}
これで、npm run build:allを実行することで、ブックマークレットへコピペできる１行のJavaScriptがコンソール画面に表示されます。
ブックマークから実行することで、ブラウザのコンソールに出力されると。
肝心のnoteのAPI呼び出し
API自体は調べればいろいろ出てくるので、ここでは詳しく書きません。
"notemag"という公式のnote編集部さんの記事一覧を取得するTypeScriptがこちら。
async function main() {
const userId = "notemag";
const page = 1;
const url =
`https://note.com/api/v2/creators/${userId}` +
`/contents?kind=note&page=${page}`;
// コメントを書いても大丈夫
fetch(url)
.then((res) => res.json())
.then((data) => {
console.log("note api:", data);
alert("OK: console を見てください");
})
.catch((err) => {
console.error(err);
alert("API error");
})
;
}
main().catch((e) => {
console.error(e);
});
こういうの↓が出てきて、ブックマークレットとして動かして、無事動きました。
javascript:(()=>{"use strict"; async function main() { const userId = "notemag"; const page = 1; const url = `https://note.com/api/v2/creators/${userId}` + `/contents?kind=note&page=${page}`; fetch(url) .then((res) => res.json()) .then((data) => { console.log("note api:", data); alert("OK: console を見てください"); }) .catch((err) => { console.error(err); alert("API error"); }); } main().catch((e) => { console.error(e); }); })();
無事ゲット↓
Next
ここからいろいろなAPIを呼び出して、欲しいデータを取得して加工とかですね！でもなんか関心が薄れてきて気力が尽きたところで私はおしまい😑 次の人にバトンをつなぎます🏃➡️
httpサーバーを自分で立て、そこにブックマークレットからPOSTし、サーバーでDBへ登録すれば、記録とかBI化まで見えますね。でもモチベ切れです。
おわりに
noteのAPI非対応というのはどういうポリシーなんでしょうね。自動化の時代にそぐわない気がする。置いてかれる気がする。
今はAPIは、エンジニアだけが使うものではなくAIも使うのだから、AIの向こう側にいる一般ユーザーもAPIを使うと言っても過言ではないと私は思います。
ところでこういう軽いコーディングは、AIでコーディングをするとすごく早い。関数の引数とか調べなくていいですよね。楽。
もう少ししたら、今回の内容とか、「それだったらブックマークレット使うといいよ！作りましょうか？」とかまでいくのかなぁ。いくんでしょうねぇ。
ではよきブログライフを！