猫モフ Apps - 小説執筆アプリを創ろう - 02. プロジェクト選択

猫モフ Apps は、猫をモフモフしながら思いついたアイデアを、バイブコーディングでゆるっと創っていく企画です。

前回は実際にアプリが起動するところまででした。
今回からはnovelaid-editorの機能を確認しつつ、自分専用の小説執筆アプリを作成していきます。

どのようなアプリにしたいか

まずは、今現在どのような執筆スタイル、アプリを使用して執筆をしているかから確認していきます。
私の場合、執筆用のエディターとしては、

のような環境で執筆をしていました。

VSCodeは、当初は良かったのですが、エピソード数が多くなったあたりからソフトが重くなって作業に支障が出てくるようになりました。
これは、VSCodeを執筆以外のプログラミング環境としても使用している弊害かもしれません。

そこで、Obsidianに乗り換え、自作のプラグインを作成して執筆環境を構築しました。
これは、特に設定用のファイルの扱いについては中々良く、執筆環境としての不満はなかったのですが、プラグインを自作する上での情報不足や触れない部分に不満がありました。

このような事情から、じゃあ、自分専用の小説執筆アプリを創ろうとなったわけです。

つまるところ、今までの執筆環境自体にそれほど不満があったわけではありません。
そのため、作成するアプリも、今までの環境をベースに、VSCode+Obsidianのイメージで作成されています。

では、実際にどのようなアプリになっているか見ていく前に、私の執筆環境でのフォルダー構成を見てみます。

　　

小説用のフォルダー構成は以下のようになっています。

UnmemoryWorldOnline
├─01_設定
│  ├─登場人物
│  │  ├─images
│  │  └─わんメモ
│  └─設定
│     ├─地理
│     ├─歴史
│     └─用語
└─10_novels
    ├─Unmemory World Online
    └─わんメモ
        ├─010_第一章_アンメモへようこそ！
        ├─020_第二章_正式サービス開始！
        ├─025_閑話_魔王のダンジョン色々チャンネル
        └─030_第三章_ペンギン大戦！
            ├─030_プロット
            └─031_エピソード

フォルダー構成をどうするかは試行錯誤中ですが、まず、作業フォルダーの中を設定用と小説用に分けています。
小説フォルダーの中には２つの小説用のフォルダーがあります。
小説を書く場合に何を起点に書くかと考えた場合に、私の場合は設定(世界観)から始めることが多いです。
そこで、作業フォルダーは世界観でまとめるようにしており、この場合は同じ世界観の中に２つの小説用のフォルダーがあります。

このように、この小説執筆アプリではフォルダー単位で管理して作業を行います。
そのため、アプリ起動時にはプロジェクトとしてフォルダー選択画面が表示されます。

　　

機能としては、

があるみたいです。
私の場合、「既存の書庫を開く」か「最近使った書庫」の機能しか使用していないので、今現在、他の機能が動作するかわかりません……。

ともかく、小説執筆アプリを作成するにあたって必要なのはフォルダー選択機能ということが分かりましたので、作業フォルダーを選択する部分から作成していきます。

プロジェクト選択をつくろう

では早速、AIとチャットして……とする前に、簡単に仕様を作成するところから始めてみます。
ほら、小説を書く時もプロットから作成するでしょう？
ちなみに、私はプロットも仕様書も書かずに作業しています。

この行き当たりばったりを反省して手順を書き残しながら作業をするのもこの記事を書いている目的の一つです。

というわけで、doc/dev フォルダーに アプリケーション仕様.md というファイルを作成し、次のように書きました。

# アプリケーション仕様

`novelaid-editor-clone`はWEB小説執筆用アプリです。  

### プロジェクト選択画面

アプリ起動時、プロジェクト選択画面を表示し作業フォルダーとなるプロジェクト(プロジェクト)を選択します。

### メイン画面

//TODO

こうやって仕様を文章に残していくことは必要だと思います。
Antigravityはプロジェクト内のファイルを読みにいくので多分仕様があったほうが良いです。

下準備も済んだところで、やっと作業を開始します。
AIに対してこの仕様で作成してもらうわけですが、一番分かりやすい方法でチャットのやり取りとして指示してみます。

以下の仕様でプロジェクト選択画面とメイン画面を追加してください

※ Shift+Enterで改行できるので、「アプリケーション仕様.md」の内容をコピペ

プロジェクト選択画面

アプリ起動時、プロジェクト選択画面を表示し作業フォルダーとなるプロジェクト(プロ…

右側のAgent画面に上記を入力し、Enterかボタンで送信してください。
AI君が色々解析して実施計画を立ててくれます。

うん、英語ですね。「プランを日本語にして」と言えば日本語にしてくれます。
また、プランに対して修正のためのコメントを入れたりもできます。

作成される名前を若干変更しておきました。

これは、分かりやすさからと、オリジナルのnovelaid-editorの名称を参考にしています。
ついでに、先程書いたアプリケーション仕様の方にも書き足しておきます。

...(略)

### プロジェクト選択画面(ProjectLauncher)

アプリ起動時、プロジェクト選択画面を表示し作業フォルダーとなるプロジェクト(プロジェクト)を選択します。

### メイン画面(MainLayout)

...(略)

では、作業を進めてもらいます。
チャット欄に「実装して」などと入れるか、プラン画面右上の「Proceed」ボタンを押せば実装が開始されます。

しばらくして、作業を続けていたAI君に呼ばれました。

「コマンドを実行するけど良い？」ということです。
今回は、New-Item -ItemType Directoryのコマンドで、ディレクトリ作成するってことらしいので、Runボタンで許可して実行してもらいます。

更に実装が進み、Walkthrough(作業報告)が表示されたら完了です。

なお、右下にずらずらっと見えているのは各ファイルの変更点です。
とりあえずはAccept allボタンを押してください。gitを導入していれば、gitの方でも確認できます。

では、出来上がったアプリを実行してみます。

npm start

ターミナル画面でnpm startと入力し、しばらく待ってアプリが起動したら成功です。


プロジェクト(フォルダー)選択からメイン画面が開くことが確認できました。

変更内容の確認

変更されたファイルは上図。
ソース管理(git)タブで確認できます。
また、上の方の変更の横の「…」を押すと、ツリー表示に切り替えられます。

ファイルをクリックすると変更内容を見ることができます。

特に問題がなければ、コミットメッセージに「プロジェクト選択追加」等と入力してコミットしてください。

まとめ

次回は設定画面とUIを少し調整します。

MORE

これ以降はTauri版、および、プログラマー寄りの補足的な内容となっています。

プロジェクト選択をつくろう(Tauri版)

Electron版同様、仕様を書いてからAIに作業をしてもらいます。
なお、Electron版での修正を反映させた状態の仕様を渡します。

# アプリケーション仕様

`novelaid-editor-next`はWEB小説執筆用アプリです。  

### プロジェクト選択画面(ProjectLauncher)

アプリ起動時、プロジェクト選択画面を表示し作業フォルダーとなるプロジェクト(プロジェクト)を選択します。

### メイン画面(MainLayout)

//TODO

なお、オリジナルのnovelaid-editorを参考にしてと伝えると更に近い形で作成してくれました。
が、今回の記事や比較用に適さなかったのでそれらの文言は含めていません。
同じAntigravityで開発しているため、ローカル情報が共有されているのか、それとも、GitHubの方のnovelaid-editorを参考にしたのかは不明です。
近いものを作りたい場合は参照してみて下さい。
いや、それならむしろ、git cloneして改造したほうが良いのでは？

Implementation Plan の確認

学習も兼ねて、実施計画(Implementation Plan)も中身も少しは確認します。

ずらずらっとAI君が解析して……おっと、この記事自体(02_プロジェクト選択.md)も解析対象に入っています。
Antigravityのプロジェクト内のドキュメントは解析対象に入るため、Electron版との純粋な実装の違いの比較は出来なさそうです。
技術仕様等は主にこちらのTauri版に入れる予定のため、結果がどう変わるかも比較はしたいと思います。

あれ、Electron版より丁寧な作りを検討しているっぽいです。
この記事も参照されているので、忖度されているのかもしれません。

npm install react-router-dom lucide-reactを実行し、ルーティングとアイコン用ライブラリを導入します。

アイコン用のライブラリも導入するみたいです。

npm install @tauri-apps/plugin-dialog およびTauri側の設定( src-tauri/Cargo.toml , src-tauri/src/lib.rs )にdialogプラグインを追加します（可能なら npm run tauri plugin add dialog コマンドを使用）。

Tauriではプラグインの形で機能提供する仕組みがあるみたいです。
//TODO そのうち調査

画面左側にサイドバー、右側にメインのエディタ領域を持つ基本的なレイアウトシェル(枠組み)を実装します

Electron版より進んでいるかも。 また、Electron版からフィードバックで仕様に書き加えた、ProjectLauncher、MainLayoutの名称が使用されるようになっていました。

Electron版とTauri版で同じようなプロンプトを使用したにも関わらず、違いがでてくるのは面白くもあり、AIガチャと言われる所以でもありますね。
ただ、ドキュメント的なものをワークスペース内にきちんと入れておくのは大事そうです。

今回は特にプランにコメントを入れることなく実装に進みます。

Walkthrough の確認

今回は特に入力を求められる事なく進みました。

プロジェクト選択画面(ProjectLauncher)とメイン画面(MainLayout)の実装が完了しました。 以下の作業を実施しました： react-router-dom を使って、アプリ起動時に / (ProjectLauncher) が開き、フォルダ選択後に /editor (MainLayout) へ遷移するようルーティングを設定。 Tauri側のダイアログプラグイン(@tauri-apps/plugin-dialog)を導入し、OS標準のフォルダ選択ダイアログを表示する機能を準備。 MainLayout.tsx に、サイドバーとエディタメイン部分を持つ枠組みとなるレイアウトを構築しました。 App.css を用いて、ダーク/ライトテーマに対応する汎用的なカラー変数を設定しました。 ビルドに問題無いことも確認済みです。詳細は walkthrough.md をご確認ください。 アプリを実行して($ などでTauri側を起動し)実際の画面遷移等をお試しください。追加の機能実装や修正事項がありましたらお知らせください。

なにやらテーマ対応的な事も書いてありますが、まずは、実行してみます。

npm run tauri dev


Electron版同様、プロジェクト(フォルダー)選択からメイン画面が開くことが確認できました。
しかし、Electron版よりエディターっぽいですね。アイコンがあるのも大きいかもしれません。
ただ、ライトテーマなのが私の目には辛いので、次回はそこから変更していこうと思います。

変更内容の確認


変更されたファイルは上図。 ちなみに、VSCode(Antigravity)のgit表示ってツリー表示に切り替えられたの初めて知った。

Electron版と比較。

フォルダーを開く部分は、Electron版はmain側で実装しているが、Tauri版はplugin-dialogの機能として実装されている。
TauriのプラグインはElectron版でのrenderer側呼び出しとmain側実装を含めてパッケージしたライブラリみたいなものっぽいです。