live-exportを使ってInkdropで書いた記事をAstroサイトに同期させてみた
最近はInkdropというノートアプリを使って、学習した内容をメモしています。
シンプルであることをコンセプトとし、基本的にはノートとタグで管理できるMarkdown特化アプリなので、このアプリでZennや個人ブログの記事を管理したいなと思うようになりました。
InkdropのノートをAstroサイトに簡単に同期する方法で紹介されているlive-exportパッケージを利用したところ、Astroプロジェクトへリアルタイムにエクスポート、つまり同期化することに成功したので試したことを残しておきます。
サンプルプロジェクトを試す
まず記事の中で紹介されている、サンプルプロジェクトをcloneし動作を確認しました。
Inkdropのローカルサーバーを有効にする設定が上手くいっているかを確認できるので、サンプルプロジェクトを動かしてみることをお勧めします。
プロジェクトにパッケージを追加
サンプルプロジェクトが動くことを確認し、次に自分のプロジェクトで試します。以下のパッケージを追加でインストールしました。
- @inkdropapp/live-export
- dotenv
- npm-run-all（必要であれば）
dotenvは.envファイルを読み込むためで、npm-run-allは並列実行のためです。以下で詳細を述べます。
package.jsonに追記
以下のコマンドを追記しました。
"dev": "astro dev",
"live-import": "node --experimental-vm-modules tools/import.mjs",
"live-dev": "run-p dev live-import"
live-importを叩くとエクスポートが開始されます。
live-devは先ほど述べた通り、devとlive-importを並列で実行（run-p）するために追記しています。これをすることで、ローカルサーバーで立ち上げたサイトを見ながらInkdropで書くことができます。
モジュールと.envファイルを配置
以下をルート直下に配置します。サンプルプロジェクトから直接コピーしました。
- tools/import.mjs
- tools/env.mjs
- .env
実際に動かしてみる
live-devを実行して動かしてみます。無事にエクスポートされました。
課題
さて、うまくいきましたがまだ課題はありそうです。
- タイトルが日本語の場合、slugを指定していないとundefined.mdとなる
- 毎回frontmatterを記述するのが面倒
1つ目は、日本語以外でslugを指定することで解決できますが、毎回英語を考えて設定するのが面倒です。動的に一意なslugが割り振られるようにするために作成日時のタイムスタンプ値が設定されるようプログラム修正しました。
Inkdropから取得したデータにnoteオブジェクトがあり、createdAtプロパティが作成日時のタイムスタンプ値です。この値をこれをノートのslugとなるように設定します。
await liveExport.start({
live: true,
bookId: INKDROP_BOOKID,
preProcessNote: ({ note, frontmatter, tags }) => {
frontmatter.title = note.title;
frontmatter.tags = tags.map(t => t.name);
- // if (!frontmatter.slug) frontmatter.slug = toKebabCase(note.title);
+ if (!frontmatter.slug) frontmatter.slug = note.createdAt;
},
プラグインを使って記事のTemplateを作成
2つ目の課題について、Inkdropのプラグインを使って解決しました。プラグインを使わずともTemplateを作成する方法はあるみたいですが、プラグインを使った方が早そうです。
以下のようにfrontmatterを指定する必要がありました。2つ目がAstro側で必要とするfrontmatterです。作成日は自動で出力させています。
File > Templatesより選択し、ノートを作成することができます。
---
id: Tech Blog Template
label: "Tech Blog Template"
title: "ブログタイトル"
---
---
public: true
description: 導入文
pubDatetime: {{'now' | date: '%Y-%m-%dT%H:%M:%S+09:00'}}
draft: false
featured: false
---
導入文
## Table of contents
## 見出し1
まとめ
Astroプロジェクトじゃなくても他のプロジェクトでも利用できます。一元管理もできるし、好きなアプリで記事を書ける体験は素晴らしいのでぜひ導入してみてはどうでしょうか。
Discussion