全くの無知無能がchatGPTに頼りきりでObsidianプラグインを作成してみる挑戦

2024年6月22日

カテゴリ: 2024 Tips 創作

タグ: Blog Obsidian AI ChatGPT Hugo

きっかけ

現在、ブログ投稿用の文章を作成する際に、一旦Obsidianで投稿内容をまとめて、ブログとして投稿しています

そしてブログを作成するために僕はHugoというアプリケーションを使用しています(マークダウン形式で書いておいたファイルをいい感じに変換してくれるもの？)

そこで私は、Obsidianもマークダウン形式で書くんだよね！じゃあ、そのObsidianでまとめていたものをそのままコピペしてHugoで変換すればすぐにブログとして投稿できるじゃん！と考えました

ただ、Obsidianで記載した内容をそのままコピペすると以下のような問題発生します

Hugoが対応していないっぽい記述を消さないといけない

Obsidianでは、

text

1

こういった風にかっこで囲むと

そのページへのリンクになります (Wikiリンクって呼ばれているみたい？)

Hugoはこの記法に基本的には対応していないっぽくて（詳しく調べていない・・・）該当する部分を修正する必要が出てきそうです

ただ単にコピペするだけではちょっと微妙で、こういった記法が違う部分を修正する必要がありそうです

画像ファイルを移動させないといけない問題

Hugoを使用する際の、自分の環境でのディレクトリ構成はこんな感じになっています

    text
    
  


1
2
3
4
5
6



いろいろ/
	記事ごとのディレクトリ/
		index.md # 本文が入っている
		img1.jpg # index.mdで参照から参照する画像
		img2.jpg # 上と一緒

画像を含む記事の場合、いちいち参照している画像ファイルを探してきてまとめる必要があるので面倒です

Obsidianのノートにペーストした画像は指定した特定のディレクトリに保存することができます

僕は先駆者に倣って、Config/Extra/の下に画像が保存されるようにしているのですが、何も整理せずにガンガン画像を投げているので

この中から目的の画像をかき集める必要があります。非常につらい！！！！ (流石に他の方法も用意されたいる気はするけどね…)

なんかChatGPTちゃん賢くなったらしいじゃん？？

もともと僕の数億倍賢ったChatGPTがさらに賢くなったらしいじゃん？？？

なら、上記の問題を解決してくれるObsidianプラグインとか作ってくれるんじゃね？？？っと思ったのがきっかけです

ということでのんびりやっていきましょう

(ここからリアルタイムで取ったメモです、経過時間などにも注目すると面白いかもしれませんね)

開始時刻 11:49

まずはやってほしいことを整理しましょう。ここは人間の仕事です。悲しいかな。日本語が十分に使えないのですよ・・・私は・・・

    text
    
  


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26



僕は無能です。あなたと協力して僕専用のObsidianのプラグインを作成したいです。

### 目的

Obsidianで作成したノートを、Hugoで作成しているブログで使える形式に変換したい

### 課題

現状以下のような問題を抱えています

- Hugoはウィキリンク形式に対応していない
	- ObsidianとHugoの標準的な記法の違いがあるため単純にコピペするだけだと不十分
- 画像ファイルの問題
	- Obsidianではノート内で参照している画像ファイルは基本的にvaultのConfig/Extraディレクトリ内に保存されています。この参照されている画像ファイルたちを一つの特定のディレクトリ内にまとめたいです

### 望む動作

1. 特定のObsidianノートを開いた状態でコマンドを実行する
2. 作成するディレクトリ名(page_title)とするを尋ねる
3. 開かれたノートの内容と関連する画像ファイルを以下のディレクトリ構成で保存します
page_title/
	index.md # 開かれたノートの内容をHugoで扱える形式に変換したmarkdownファイル
	img1.ppg # 関連する画像
	img2.jpg # 関連する画像
	...

12:03 質問文を考えるだけで十数分経ったし、自分の日本語力のなさにも絶望しました。ご飯などを食べてきます

12:36 それではのんびり続きをやっていきますか・・・

ChatGPTに質問をします

12:38 すっごいぐるぐるします。嫌われたのでしょうか？再読み込みなんかすっごい読み込んでいるんだけど！！！！！！！ナニコレ！！！！

おい！！！！止まってんじゃねぇか！！！！！！

え？？止まっているってことだよね？？？？なんでこんなドンピシャ？？？？嫌いなの？？？自分のこと？？？？

・・・寝るか

13:02 お！戻っている戻っている！！やるかぁ～

(上記の質問文を投げた)

chatGPTの返答

    text
    
1
2
3

一緒にObsidianのプラグインを作成するのは楽しいプロジェクトだね！まず、プラグインの概要と機能を整理しようにゃ。以下に必要な手順をまとめるにゃ：

省略・・・

何やらコードを書いてくれるようですが、ファイルの配置方法がわからないので尋ねてみました

ChatGPTの返答

    text
    
  


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


Obsidianのプラグインフォルダに配置するためのディレクトリ構成は以下のようにするのが一般的にゃ。プラグインのコードと関連ファイルを特定のフォルダにまとめて、そのフォルダをObsidianのプラグインフォルダに配置するにゃ。

.obsidian/
└── plugins/
    └── my-plugin/
        ├── main.js
        ├── manifest.json
        └── styles.css (必要なら)
        
### 各ファイルの内容

#### `main.js`

javascript

省略・・・

良し！回答をもらったのでひとまず言われたとおりにしてみます！！

ファイルを配置して～～

Obsidianを再起動

コマンドパレットからコマンドが打てるようになっているらしいので見てみます・・・？

あれでないけど・・・？

(しばらく探している)

ちょっと～！自分でアクティブにする必要がありそうじゃん～それを行ってくれないと困るよキミ～～

しかもなんかダメっぽいじゃないか！！！

ダメっぽいのでクレームをつけることにします

今は画像も読み込めるらしいので丁寧に画像付きで質問しました

コードの修正と確認事項を言われたのでわからないことを質問しつつ、確認することにします

13:45 ちょっと仮眠をとっていました・・・(不可抗力)

ChatGPTが教えてくれた指摘事項を試してみてもうまくいかない……

他のプラグインのmain.jsを眺めていると

var obsidian = require('obsidian');

という記述があるけど、今回ChatGPTが作成したコードにはないことに気づいたのでこれについて質問します

    text
    
1

他のobsidianのpluginのmain.jsを見ていると var obsidian = require('obsidian'); という記述がありますが、今あなたが提示したmain.jsには含まれていません。これが必要なのではないでしょうか

ChatGPTの返信:

    text
    
1
2
3

確かに、Obsidianのプラグインでは`obsidian`モジュールをインポートする必要があります。`obsidian`モジュールのインポートがないと、`Plugin`クラスや`Notice`クラスなどを使用することができません。以下は、修正された`main.js`です。

### 修正された`main.js`

「確かに」じゃないよ・・・

とりあえず言われたとおりに編集します

はい！！！オンにできるようになりました！！！

こ・・・コマンドが表示されている・・・！！！恐る恐る実行します

パレットも出てきた！！！OKを押します！！

・・・何も起こらない・・・？なにもおこんないな・・・？

コードをざっくり見た感じ処理が終了したらconversion completeと表示されそうだけどその表示も見えない・・・いったい何が起こっているんだ・・・

テキストボックスが空白の状態だとちゃんとそのことを指摘するメッセージが出ているので完全に壊れているわけではない気がする…もう一度実行してみることにします

無反応

クレームをつけることにします！

text

1

プラグインを読み込むことができるようになりました しかしコマンドを実行しても何も起きる様子がありません new Notice('Conversion complete.'); というメッセージも表示されません。おそらく不具合があると思うので修正してください

ChatGPT

    text
    
1
2
3
4
5

プラグインのコマンドが正しく動作しない場合、原因としていくつかの点を確認し、修正する必要があります。以下のコードをより詳細にデバッグし、必要な修正を加えましたので、再度試してみてくださいにゃ。

省略

開発者コンソールを開きます（`Ctrl+Shift+I` または `Cmd+Option+I`）

え・・・開発者コンソールなんてものがあるの・・？

めっちゃエラー出てるじゃん！！！！このエラー文を教えてあげれば直してくれるのでは？？？

    text
    
1
2
3
4

エラー内容

というエラーが表示されていました それと前から気になっていたのですが、hugo用に変換したファイルたちを直接windowsのダウンロードディレクトリの保存することはできませんか？（ブラウザでファイルをダウンロードした時みたいに） そのように変更してほしいです

ついでに、どうやらObsidianのvaultがあるディレクトリ？にhugo用に変換したファイルたちを作成しようとしていたので、そうではなく普通にダウンロードできるようにしてほしいとお願いしてみました

ChatGPT：

    text
    
1
2
3
4
5
6
7
8

File name cannot contain any of the following characters: * " \ / < > : | ? というエラーは、入力されたディレクトリ名に無効な文字が含まれているために発生していますにゃ。この問題を回避するために、ディレクトリ名の入力時に無効な文字をチェックして除去するように変更しますにゃ。

また、変換したファイルをWindowsのダウンロードディレクトリに保存するように変更します。ブラウザでのダウンロードのようにファイルを保存するには、Node.jsのfsモジュールを使ってファイルシステムにアクセスし、ダウンロードディレクトリにファイルを保存することができますにゃ。

以下に、修正されたコードを示しますにゃ。

省略

言われたとおりにコピペしてみます

が・・・エラー発生・・・

とはいえ、なんとなく Config/Extraディレクトリではなく、Extraディレクトリを探しているのが問題っぽいことがわかるのでそこを修正してもらいます

修正してもらったコードに更新してもう一度実行します

ついに出ました！！！！確認してみましょう！問題ないのであればwindowsのdownloadディレクトリに完成したファイルが入っているはずです！！！

入っている！（なぜかひとつ前のもいる！！！）

![](Pasted image 20240608141708.png)

おー画像ファイルも同じディレクトリに入っています！！

確認してみます！

惜しい！！！惜しい！！！！けどコマンド入力、ファイルの読み込み、書き出しがうまくいくことが分かったので、文字列の変換の部分などを調整すればちゃんとつかえるものができるぞ！！！！

現在時刻 14:21

ずぶの素人でもChatGPTに頼れば2時間ちょっとでそれっぽい？？ことができることが分かりました！！！！！いけるジャン意外と！！！

簡単なものであれば、とりあえず意外といけそう！？？！ってことが分かったのでこの記事はここまでにしたいと思います！！

・・・まあでもrequireに自分が気づかなかったら一生完成しなかったよね・・・？？

会話履歴を共有しようとしたけど…

もしかして画像をアップロードしたら共有できなくなるのかなぁ…？

まあ思い出した時にまあ試してみることにします

おまけ(その続き)

本当はChatGPTとの会話を公開しようと思っていたんだけど、なんかリンクが取れない・・・あと、画像を上げてしまったからか会話の続きができなくなったので、新しく会話を作り直す・・・

あとGPT-4oの使用制限が来たのであほになっちゃうかも・・・けどまあ使ってみます・・・

よしよし・・・3.5ちゃんもなかなかやるな・・・次はタグとかもHugoで使える形式にしたい、ってかタイトル！タイトルとかもつけるようにしないと・・・！！！ただなんっていうんだっけ・・・？この上の部分フロントマター？って使っているテーマによって全く違ったと思うのでもし外部に公開していろいろな人が使えるようにするならこの辺も指定できるようにしたいよねぇ・・・

17:40 あーーーーだいぶ苦労したけどできたじゃろう・・・まあ良い経験となったでしょう・・・ちょっと休憩・・・まとめてネットに公開しておきたいではあるね 17:41 使いたい人いるかもだし、もうちょっといろいろ調整してあげてもいいかもって感じるね。自分が使わない機能の追加をすることになるかもだけどまあそういうもんだよね！！