SYSTEM NOTICE

Auto translation by AI. Be sure, accuracy, nuances and authorial intent may not be fully reflected.
見出し画像

I created a 'Stacking Notebook' to analyze the results of my daily writing in my own way | Ohayo Kanojo #52

Introduction

"Ohayo Kanojo" is an X account where an AI-illustrated girlfriend says goodbye to me every morning at 7:30.

The note dashboard is convenient, but the lack of a follower count trend graph was subtly inconvenient.

I know "how many followers I have now," but I don't know "when they increased."
I want to write articles and see the reaction, but I can't even remember yesterday's numbers, let alone whether they increased or decreased.


The background of why I decided to make it

When you continue posting every day, things start to bother you.

"I got a lot of likes today," "I feel like my followers have increased."
But I don't know which article was effective.
I can't even remember yesterday's numbers.

I wanted to record the follower count, which is easy to get, and know what kind of articles people are interested in.

Because of my profession, I have a habit of looking at what APIs web apps are hitting.
When I accessed the note creator page, I found the API being called in the background.
Information such as the follower count is returned in JSON.
This looks useful.

# こういうURLにアクセスすると、クリエータページのデータがJSONで返ってくる
https://note.com/api/v2/creators/ユーザID

例:hasyamoの場合
https://note.com/api/v2/creators/hasyamo

I thought I would make a simple web page based on this API.

At first, I created a mechanism to automatically fetch it every day using GitHub Actions.
With this, it was complete for my own use.

But then I thought,
"I want note users in the AI illustration community to use it too, but GitHub is a high hurdle..."

Forking, changing settings, setting up Actions permissions... it's tough for non-engineers.

So I changed my perspective.
If I save the data in the browser, can't anyone use it without forking?

I decided to make it a PWA (Progressive Web App) and create a tool that can be used just by accessing the URL.


What I made

I made a PWA called "Stacking Notebook."

It's a tool that records note follower counts and lets you see the trends in a graph.
If you add it to your iPhone home screen, you can use it almost like an app.

Home screen icon
Dashboard screen

What it can do

This is what it looks like when you open it.

  • Current follower count (displayed in large text)

  • Day-over-day, weekly, monthly, and cumulative changes

  • Line graph of follower trends

  • Bar graph of daily changes
    (Green for days with an increase, red for days with a decrease)

  • Recent records table

Graph screen
Recent records table

When you press the 'Update Now' button, it fetches the latest follower count and adds it to the records. Just by pressing it once a day, the data accumulates automatically.


Results after using it for 6 days

I started recording on 1/26, and today is the 6th day.

136 followers → 146 followers, an increase of 10 for the week.

Looking at the daily changes, there was a minus 1 only on 1/29. This serves as a trigger to look back and wonder what I posted that day.

Conversely, on 1/27, it was +4. Maybe the article from that day was effective.

These 'vague feelings' have now become visible through 'numbers'.
However, since the decrease in follower count is also visualized, it is a double-edged sword.


Technical details

The internals are simple.

  • HTML/CSS/JavaScript (no framework)

  • Chart.js (for graph rendering)

  • localStorage (data storage)

  • PWA (a mechanism that allows adding to the home screen)

I am fetching the follower count from the unofficial note API.
Since calling the API directly from the browser is blocked by CORS, I created a proxy using Cloudflare Workers.

The data is saved within the smartphone's browser.
Since nothing is sent to the server, no one other than the user can see the data.


Points to note

localStorage is deleted when browser data is cleared. Also, iOS Safari has a specification where data is automatically deleted if there is no access for 7 days.

However, this tool is intended to be opened and updated daily, so it should not be a problem if used normally.
The expiration date is extended if you access it within 7 days.

Just in case, I made it possible to export as JSON from the settings screen. Even if it disappears, you can restore it by importing.


It is now public

It is published on GitHub Pages, so anyone can use it.

How to use it is simple:

  1. Access the URL

  2. Enter your note creator ID (the 'xxx' part of note.com/xxx)

  3. Open it every day and press 'Update Now'

If you 'Add to Home Screen', you can use it like an app.

For iPhone: Open in Safari, tap the share button (the icon with a square and an arrow pointing up) -> 'Add to Home Screen'

For Android: Open in Chrome, tap the menu in the top right (︙) -> 'Add to Home Screen' or 'Install App'

As a note, data is separate when opened in a browser versus when opened from the home screen. If you switch between them, you can transfer your data by exporting and then importing from the settings screen.


Things I want to do in the future

I want to link article publication dates with follower growth to analyze 'which articles were effective in gaining followers'.

Right now, I'm in the stage of gathering data.
I'll use it for a while, and if I see areas for improvement, I'll add them.


If a feature isn't on note, I can just build it myself.

If I get help from AI, I can build something that works in just a weekend.
Big thanks to Claude Code.

If you try it out and think, 'It would be nice to have this feature,' I'd be happy if you let me know in the comments.


Magazines this article is participating in

[Mugiya] note x AI Utilization Promotion Magazine

A magazine that shares practical applications of AI x note, such as AI-assisted article creation and research.


👉 'Good Morning Girlfriend' is posted every morning at 7:30 AM at @ohayo_kanojo.


#PersonalDevelopment
#DevelopmentDiary

#GenerativeAI
#Programming
#Record
#RealExperience
#MorningRoutine

#Akarium

いいなと思ったら応援しよう!