概要#

Obsidianをブログの記事編集用エディタとして使う際の設定方法や勘所のまとめです。

マルチデバイス対応#

ラズパイにSyncthing導入#

Syncthing

syncthing.net

記事ディレクトリをラズパイに置き、Syncthingで端末間のファイルを同期させる。
Syncthingはオンプレで動くDropboxのようなもの。

インストール後ラズパイ側でサービス化しておき、起動する。

セキュリティ上rootのサービスではなく、ユーザーのサービスとして起動すると良いらしい。

1
sudo systemctl enable syncthing@[ユーザー名].service
2
sudo systemctl start syncthing@[ユーザー名].service

デフォルト設定では以下のURLでSyncthingのブラウザUIにアクセスできる。
http://localhost:8384/

トラブルが発生したとき用に、ラズパイ以外のマシンからもブラウザUIにアクセスできるようにしておく。
右上の設定からGUIのアドレスを他端末からアクセス可能なIPやドメインに設定し、ユーザーパスワードで認証可能にする。

ここでラズパイ上の所定のパスを共有ディレクトリの対象として登録。

クライアントにSyncthing導入#

Windows、Androidなどの端末にもSyncthingを入れておく。
その後ラズパイ側のブラウザUIから、共有対象のマシンをSyncthingに登録する。

そうしたら共有対象ディレクトリの設定を開き、共有タブの中にある共有対象のクライアントにチェックを入れる。

これでラズパイ側、クライアント側でSyncthingが起動しているとき、自動的にディレクトリの内容が同期されるようになる。

備考:SMB、ネットワークドライブ化
記事ディレクトリ(src/content/postsとか)をSMBでWindowsマシンからアクセスできるようにしておく。SMBは自宅内のLANに繋いでいるときに使用する。
これのメリットは主に自宅にいるときはSyncthingクライアントを起動しなくて済むのと、反映のラグの低減にある。
出先でネットワークドライブに置かれたObsidianのVaultを開こうとすると、すべてのファイルをダウンロードしてから編集可能になるため、通信量が多くなってしまう。
だがローカルネットから直接開く分には気にならないのと、Syncthingは反映に若干ラグが出る。
Syncthing自体もクライアントで起動しておかなければならないなどの手間もあるので、ローカルマシンではネットワークドライブにあるVaultを開くのが都合がいい場合がある。

設定変更#

Obsidianならではの仕様がAstroの挙動に影響を及ぼしてしまうため、「ファイルとリンク」設定をいくつか変更する。

新規作成するリンクの形式を、ファイルに対する相対パスにする
デフォルトだとリンクにファイル名しか記載されず、Astro側でパスを解決できないことがあるため。
内部リンクを毎回更新する
これを有効にするとファイル名を変更したとき記事内のリンクがすべて修正される。執筆時は多分必須になるだろう。
エディタの設定でウィキリンクを無効化する
そうしないと画像リンクがmarkdown形式にならず、Astroでパースされなくなる。
添付ファイルの格納先をサブディレクトリの任意の名前に設定しておく
記事をフォルダ単位で管理するのに都合がよいので。

大抵記事に添付するのは画像なのでimgフォルダにしている

baseを作る
notionにはデータベースという機能がある。
各ページの上部に設定するプロパティをテーブル形式で表示し、フィルタリングや並べ替え、新規ページの作成などができるやつ。
obsidianにも似たようなものがあり、その名もズバリ 「base」
記事一覧みたいなbaseを作っておくと、執筆順に並べ替えたりドラフト中とかをフィルタリングしたりできる。
表ビュー
カードビューではサムネの表示もできる
ただし、このbaseがAstroに検知されてしまうとビルドが通らなくなったりするので除外設定はやっておこう。
開発サーバーなら勝手に無視されるみたいだが、本番ビルドでは影響が出る。
現時点でこのブログはGitHubのソースからCloudflareでビルドを行っているので、gitignoreに追加してbaseファイルをプッシュしないようにして解決している。

ローカルLLMの設定#

コミュニティプラグインのcopilotとtextgeneratorを導入。
プロバイダー、モデルをそれぞれ設定しておく。
textgeneratorはautocompleteの仕様が英文入力に特化しているため調整が必要。
autocompleteは無効にし、Custom default generation promptを、Auto suggestionのプロンプトに置き換えておく。

もしプラグインが動かなかったら・・・
プラグインのバージョンによってはスマホで有効化できなかったりするので、bartという各種プラグインのGitHubリポジトリを指定し、任意のreleaseバージョンからインストールすることができるプラグインも入れておくといい。
具体的にはtextgenerator0.82はAndroidで動かなかった。
0.75では動いていたのでそちらをインストールしなおして動くようになった

画像の添付方法#

Windowsならスニッピングツールで簡単にトリミングと貼り付けができるが、Androidでやろうとすると工夫がいる。
GoogleドライブやNASの画像へアクセスできることが前提として、その画像をトリミングする場合は標準のフォトアプリを使うことができるが、その際に明示的にトリミングした画像の保存先を指定しなければならない。

クリップボードにコピーできないため、Obsidian、フォト、ファイラーを行ったり来たりすることになる。
なので画像の添付はPCでやるのが無難。

Astro側の設定#

Obsidianのプラグインの中には、ルートディレクトリにフォルダが作られることがある。
その中にmdファイルがあると、frontmatterのバリデーションに引っかかり、ページが表示できないことがある。
またホットリロードが無用に発生することもあるので、フォルダを無視したり、frontmatterバリデーションを調整する。
手っ取り早いのは、必須入力項目をoptionalにしてしまうこと。
それ以外のフォーマットチェックはそのままでも問題ないはず。

バリデーションの効果を弱めることになるが、表示できないよりはマシ。

1
import { defineCollection, z } from "Astro:content";
2

3
const postsCollection = defineCollection({
4
  schema: z.object({
5
    title: z.string().optional(), //<-- タイトルとか普通は必須だが、あえてoptionalにしている。
6
    published: z.date().optional(),
7
    updated: z.date().optional(),
8
    draft: z.boolean().optional().default(false),
9
    description: z.string().optional().default(""),
10
    image: z.string().optional().default(""),
11
    tags: z.array(z.string()).optional().default([]),
12
    category: z.string().optional().nullable().default(""),
13
    lang: z.string().optional().default(""),
14

15
    /* For internal use */
16
    prevTitle: z.string().default(""),
17
    prevSlug: z.string().default(""),
18
    nextTitle: z.string().default(""),
19
    nextSlug: z.string().default(""),
20
  }),
21
});
22
const specCollection = defineCollection({
23
  schema: z.object({}),
24
});
25
export const collections = {
26
  posts: postsCollection,
27
  spec: specCollection,
28
};

コレクションの対象からも外しておく。

1
import { type CollectionEntry, getCollection } from "astro:content";
2
import I18nKey from "@i18n/i18nKey";
3
import { i18n } from "@i18n/translation";
4
import { getCategoryUrl } from "@utils/url-utils.ts";
5

6
// // Retrieve posts and sort them by publication date
7
async function getRawSortedPosts() {
8
  const allBlogPosts = await getCollection("posts", ({ data, id }) => {
9
    if (id.startsWith("copilot")) return false; //<-copilotから始まるパスをコレクションから除外
10
    return import.meta.env.PROD ? data.draft !== true : true;
11
  });
12

13
  const sorted = allBlogPosts.sort((a, b) => {
14
    const dateA = new Date(a.data.published);
15
    const dateB = new Date(b.data.published);
16
    return dateA > dateB ? -1 : 1;
17
  });
18
  return sorted;
19
}
20

21
// getTagList、getCategoryListも同様に修正

ホットリロードはastro.config.ts の server 設定に追加。

1
    server: {
2
        port: 4321,
3
        allowedHosts: [],
4
        watch: {
5
            usePolling: true,
6
            // .obsidian フォルダ内の変更をすべて無視する
7
            ignored: [
8
                "**/src/content/posts/.obsidian/**",
9
                "**/src/content/posts/.trash/**",
10
                "**/src/content/posts/.stfolder/**",
11
                "**/src/content/posts/copilot/**",
12
            ],
13
        },
14
    },

書くときの流れ#

Syncthingで同期したフォルダは各クライアントのローカルに保持される。
それをObsidianのVaultとして開いて、Obsidian上で編集する。

Syncthingを有効にしっぱなしにすれば、ほぼほぼリアルタイムで同期され、表示もされる。数文字変更される度にmdファイル全体がアップロードされるため、帯域に余裕がある時にはこの方法がいい。

従量課金のネットでは最初にSyncthingを有効にし同期を取って無効にする。
書き進めながら必要なときに同期してトラフィックを節約する。
~~所詮テキストファイルしか連携されないのであまり気にしなくてもいいけれど~~

画像を削除するとエラー画面から変化しなくなることがあるので、開発サーバーを再起動する手段があるとよし。
AndroidでもSSHアプリはあるので、VPN経由で astro dev を restart してやれば大抵直る。

なおVPNについてはCloudflare Tunnelを使っている。

そこそこでいい

sksk-blog.wa10rawa.com

総評と執筆作業の所感#

この環境を構築したことで、通勤中にスマホから記事のあらすじを書いたり、修正作業ができるようになった。ノートPCを出先で使ってガッツリ編集ということもでき、場所を選ばなくなりつつある。
その事自体は良いのだが、自宅でも執筆に集中できる方法がないかと模索している。