導入

あなたはすでにこのミームと Apple Notes の優位性を知っているかもしれません。

では、ブログのコンテンツを管理する CMS として使用できたらどうでしょうか?それが私が「今日学んだこと」ウェブサイトで試してみたかったことです。最終結果は https://til.julienc.me

Apple ノートのクエリ

Apple Notes からメモを取得する方法が必要です。これを行うには、Anyquery を使用します。Anyquery は、Apple Notes を含むほぼあらゆるものをクエリできる SQL データベースです。

1. Anyquery を https://anyquery.dev/docs/#installation でインストールします。
2. Apple Notes プラグインをインストールします: anyquery install Notes

3. SQL を使用してメモをクエリし、JSON に保存します (私の場合、メモはフォルダー TIL にあります)
   

   anyquery -q "SELECT name, html_body, modification_date 
   FROM notes_items WHERE folder = 'TIL';" --json > notes.json 
   

これで、オブジェクトの配列にすべてのメモが含まれるファイルnotes.jsonが完成しました。各オブジェクトには 3 つのプロパティがあります:

• 音符の名前(名前)
• 最終更新時刻 (modification_date)
• HTML の本文メモ (html_body)

例えば：

[
    {
        "name": "Example",
        "modification_date": "2024-08-11T00:00:00Z",
        "html_body": "
Example
This is an example
"
    }
]

最後のタスクは、ウェブサイトを接続することです

ウェブサイトに接続する

個人的には、Astro.JS を使用しています。最初のタスクは、各エントリの静的パスを生成することです。
そのためには、「../../notes.json」からメモをインポートするだけです。それをエクスポート関数 getStaticPaths() に渡します。また、生成された URL が有効であることを確認するために slugify 関数も使用しています。

// [...blog].astro
import notes from "../../notes.json";

function slugify(string: string) {
    return string
        .toLowerCase()
        .replace(/\s /g, "-")
        .replace(/[^a-z0-9-]/g, "");
}

export function getStaticPaths() {
    return notes.map((note) => {
        return {
            params: {
                blog: slugify(note.name),
            },
        };
    });
}

const { blog } = Astro.params;
const note = notes.find((note) => slugify(note.name) === blog);

パスが生成されたら、Apple Notes スタイルに一致するように少し CSS を記述する必要があります:

article.notes {
            color: #454545;
            font-size: 0.9rem;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            letter-spacing: -0.015rem;
        }

article.notes > div:first-child > h1 {
        color: #de9807;
        margin-bottom: 0.5rem;
}

... truncated (retrieve the full CSS in the repository at src/styles.css)

これで完了です!

結論

おめでとうございます。Apple Notes を CMS として使用できるようになりました。これは、iCloud ストレージの制限に制限されない、強力で共同作業が可能な CMS です。画像、表、フォーマットされたテキスト、コードなどを追加できます。
以下は書式設定オプションの例です:
https://til.julienc.me/example-of-capabilities

次の手順で、Apple Notes から Vercel に独自のブログをデプロイできます:

• リポジトリ git clone のクローンを作成します https://github.com/julien040/apple-notes-cms
• npm install または pnpm install を実行します
• chmod u xdeploy.sh を実行します。
• vercel を実行してプロジェクトを初期化し、接続します
• ./deploy.sh を実行してプロジェクトをビルドし、Vercel にプッシュします

リンク

ソースコード: https://github.com/julien040/apple-notes-cms
結果: https://til.julienc.me/