本記事では，「絵を描かずにネームを作れないか？」というアイデアを元に，自由にコマ割りができるテキストエディタの開発を行っていきます．
この記事の目的
なんでもいいから，個人開発アプリを完成させて，実際に公開してみたい．
私は新しいことに挑戦するのが苦手で，しかも何かを継続することも苦手でした．
しかし，「もし昨日の自分と今の自分が戦ったらどっちが勝つんだろう？」というくだらない妄想をしているうちに，「あれ？何も成長してなくね？」と，自分の人生が停滞していることに気づきました．
こりゃいかん，ということで，「一日一つ，何でもいいから成長する」というのを今後の人生のテーマに定めました．
私自身，アプリ開発は全くの初心者です．しかも，開発テーマは「漫画のコマ割り」なのに，私は一切絵が描けません．当然マンガも描いたことがありません．
しかし，自分の全く知らない分野だからこそ，挑戦する価値があります．
この記事の目的は，自分の成長を形にして残しておくことです．
ですが，もし私と同様に自分の世界の狭さに悩んでいる方が読者の中にいたら，この記事が何か新しいことを始めるきっかけになれば嬉しいです．
どんなアプリにしたいか
最終的な目標は「プロットを入力したら，自動的にコマ割りを生成してくれる」機能を実装することです．流行りのAIアプリってやつですね．
当然このアイデア自体は既存で，「コマ割り 自動生成」と検索すれば，数々の漫画自動生成サービスが紹介されます．
現時点(2025/05/31)で「コマ割り 自動生成」でgoogle検索すると，World Makerという，あらすじを書くだけで自動で漫画を出力してくれるサービスが一番上位に表示されました．
これらのサービスとの差別化を図るために，本アプリは「プロットからコマ割りを自動生成する」という部分に特化させることにします．
また，コマ割りのみに集中するため，あえて「コマに文字しか打ち込めない」ようにします．この制限により，次のような利点がもたらされると考えられます．
- ネーム作成時，イラストの勢いで誤魔化してしまうのを防ぎ，言葉による物語の構築を徹底させられる
- イラストを描く前に，そのコマの役割をあらかじめ決めておくことで，1コマに情報を詰め込みすぎてしまうのを防げる
- コマの役割や情報量が文字データで与えられるので，AIによるネームの評価を，絵の解釈の仕方に依存せずに行える
とりあえず手を付けてみる
細かいことは置いておいて，一旦単純すぎるくらいの低機能エディタを実際に作成し，動かしてみる．
一から自力でアプリ制作を学ぶとなると絶対にモチベーションが続かないので，Geminiに頼んで開発環境やプログラムの構築方法を教えてもらいました．
コマの位置やサイズは固定です．「新しいパネルを追加」ボタンを押したら，テキストを打ち込めるパネルが追加されます．
コマの位置や変形を管理するハンドラを追加したらいい感じに漫画のコマっぽくなりそうですね．
開発手順
開発言語とかIDEとかの詳細な説明は行いません．
じゃあ何を書くのかと言うと，生成AI(Gemini)を使ったアプリ開発の方法について説明しようと思います．
生成AIのはなし
皆さん，生成AI使ってますか？
生成AIといえばchatGPT, Gemini, Claudeが有名ですよね．Geminiとかは無料プランでも1日の質問数に制限がないので嬉しいですよね．
ですが，ぜひとも有料プランを使っていただきたいです．安いプランなら月2000~3000円くらいです．
高いと感じますか？しかし，それだけの価値はあります．本当です．
特にGeminiはGoogleが開発しているので，簡単なことならGeminiに聞けばGoogle検索しなくてもすぐに高精度な解答を出力してくれます．
今回のようにアプリ開発を行う際も，勉強のために本を買ったり，ネット記事を漁って本当に動くかどうか分からないコードを一生懸命いじったりする必要もありません．
バグもコピペしたら解析してくれますし，分からないところは聞けば詳細に教えてくれます．理解度チェッククイズもその場で生成してくれます．
「いや，生成AIにプログラムを全部かかせるのって危険じゃない？」と感じている人も多いと思います．
しかし，本当に危険なのは，生成AIに書かせたプログラムを，理解せずにそのまま使うことです．
「生成AIに書かせたプログラムが無事動いた．よし，完成！」とするのではなく，しっかり内容を解説してもらい，理解したうえで，ネット上で自分でも調べて，出力されたプログラムをしっかりと吟味・修正することが大事です．
「生成AIにプログラムを書かせるのが危険」みたいな話は，生成AIが便利すぎて，この「内容を吟味・修正する」という過程を飛ばしてしまう可能性があることに起因しているのだと思います．
というわけで，少し話が逸れましたが，ここからは今回私が生成AIを用いて低機能エディタアプリを作った手順を説明します．
手順１．アイデアを出す
生成AIを使ったプログラムの手法については，調べればいろんな人が素晴らしい方法を紹介してくれています．しかしどんな素晴らしい手法でも合う合わないはありますから，やっぱり色々自分で試してみるしかないですね．
私は，Geminiを主に書記や相談相手として使っています．
GeminiにはCanvasという機能があり，Canvasに結果を出力するよう命令できます．
Geminiに「こういう機能を搭載したいんだけど，どうかな？」と入力すると，その機能の優れた点や更に掘り下げるべき点，実現方法等を出力してくれます．何度も対話を繰り返して満足のいく案が完成したら，Canvasに出力させて，自分が実装したい機能を整理・保存します．
今回の「コマ割りエディタ」はこんな風に相談してアイデアを固めました．
私：「漫画のコマ割りみたいにテキストドキュメントを分けて、それぞれのコマにメモを書く、というメモ帳エディタのアイディアを思いついたんだけど、これって既存？」
Gemini：「類似するサービスに○○，××等があります．これらとの相違点は△△，差別化を図るべき点は◇◇です．」私：「漫画のコマ割りを見て思いついただけで，まだこのエディタの使い方とか便利な点とかは一切考えてないから、既存のもので知的財産権とかに引っ掛からなそうなら、本格的に考えてみようかなって考えてるんだけど，どう？」
Gemini：「漫画のコマ割りのように情報を整理する，というコンセプトは既存ですが，アプローチによっては十分オリジナリティのあるものになる可能性があります．○○や××の部分についてアイデアを広げるといいでしょう．」ーーーその後も対話を続けてーーー
私：「このエディタのアイデアを300字以内でまとめて」
Gemini：「はい、承知いたしました。「コマ割りエディタ」のアイデアを300字以内でまとめます。
『コマ割りエディタ』は、作画に入る前のネーム（絵コンテ）作成段階で、テキスト入力によりコマ割り構想を具体化するWindows向け編集アプリです。各コマにセリフ、ト書き、描写を記述し、コマの「型」や情報量を管理することで、物語の構造、展開のテンポ、視覚的バランスを深く練り込めます。情報過多のコマへの警告機能や、構成テンプレート（予定）により、初心者から経験者まで、より効率的で質の高いネーム作成を支援。イラストに頼らず、まず物語の骨子を固めたいクリエイターに最適です。オープンソース（MITライセンス）で開発を進めています。(281字)」 手順２．プログラムを作ってもらう
「作ってもらう」という部分を見て拒絶反応を起こす人がいるかもしれません．
何を隠そう，かつての私がそうでした．
「丸投げするのではなく，自分で理解して作ったプログラムではないと意味がない！」という無駄なプライドを抱えていたのです．
しかし，プログラムの内容をちゃんと理解するのは，とりあえず無事に動作するのを見届けてからでもいいはずです．
「プログラムを勉強する段階で飽きて，結局作りたかったものが作れなかった」となっては，結局何もしなかったのと一緒ですからね．
私：「開発環境はどうすればいい？」
Gemini：「○○，××，△△などが良いでしょう．」私：「プログラムの構成はどのように考えるといい？」
Gemini：「■■，★★，...，という風に分けるのがおすすめです．」私：「その構成案をもとに，まずは必要最低限の機能だけ備えたプログラムを出力して」
Gemini：プログラムを出力してくれる手順３．プログラムの修正を行う
生成AIが出力したプログラムにも当然間違いは含まれるので，最初から一発で動くことはありません．したがって，エラー出力を生成AIに読み込ませてデバッグを行います．
当然，生成AIでも原因が分からないバグも多々発生します．そういうときは仕方ないので，自分で原因を調査する必要があります．
手順４．プログラムの動作を教えてもらう
無事プログラムが動いたら，プログラムがどう動いているのかしっかり確認しましょう．
このプログラムは実際に動作しているという実績があるので，仮に「ほんとにここのコード，こんなんでいいのか？」と思うような理解できないコードに出くわしても，「いや，でも実際動いてるしな…」となります．
これが本やネット記事に掲載されているプログラムならこうはいきませんよね．
ちなみに，今回作成した，「コマ割りエディタ」の骨子となる低機能エディタの開発環境と動作はこんな感じです．
Windows上でVisual Studioを利用。C#言語とWPF(.NET 8)を使い、MVVMパターンで設計。Git/GitHubでソースコードをバージョン管理。
アプリ起動後、メインウィンドウ(MainWindow)が表示され、そのデータコンテキストにMainViewModelが設定される。ウィンドウ上の「新しいパネルを追加」ボタンを押すと、AddPanelCommandが実行され、新しいPanelViewModelインスタンスがMainViewModel内のPanels( ObservableCollection )に追加される。
ItemsControlがこのPanelsコレクションを監視し、各PanelViewModelをCanvas上に「枠線で囲まれたテキストボックス」として描画する。各パネルの位置、サイズ、内部テキストは、対応するPanelViewModelのプロパティ（X, Y, Width, Height, Text）と双方向データバインディングされる。
パネルをクリックするとそのPanelViewModelが選択状態（枠の色が変化）となり、MainViewModelのSelectedPanelプロパティが更新される。「選択パネルを削除」ボタンで、この選択されたパネルをリストから除去できる。ViewModelプロパティの変更はINotifyPropertyChangedにより、リストの変更はObservableCollectionの機能により、UIへ即座に反映される。まとめ
- 個人開発には生成AIを使おう
- 生成AIはちゃんと有料プランにしよう
コメント