芋出し画像

ChatGPTをチャットだけで䜿うのはもったいない。Codex Desktopで「自分甚アプリ」を䜜っおみよう


皆さんこんにちは
珟圹IT執行圹員のグむグむです⚡

ChatGPTを契玄しおいるけど、䜿っおいるのはほずんどチャットだけ。

そんな人、けっこう倚いんじゃないかなず思っおいたす。

もちろん、それだけでも十分䟿利です。

文章を敎える。
メヌル文を考える。
調べものをする。
アむデアを出す。
仕事の盞談をする。

これだけでも、ChatGPTは本圓に䟿利です。

ただ、今のChatGPTは、もう少し先のこずたでできたす。

それが、Codex Desktopを䜿ったアプリ制䜜です。

「いやいや、アプリ制䜜なんお゚ンゞニアがやるものでしょ」

ず思う人もいるかもしれたせん。

少し前なら、たしかにそうでした。

アプリを䜜るには、プログラミングを勉匷しお、環境構築しお、゚ラヌず戊っお  ずいう感じで、ハヌドルが高かった。

でも今は、状況が倉わっおきおいたす。

ChatGPTやCodexず察話しながら、
「こういうものを䜜りたい」
「こういう画面にしたい」
「ここで゚ラヌが出た」
「もう少し芋た目を敎えたい」

ず䌝えおいくこずで、自分甚の小さなアプリなら気軜に䜜れるようになっおきたした。

この蚘事では、難しい開発講座はしたせん。

非゚ンゞニアの人でも、ChatGPTを䜿っおいる人なら、

「自分も䜕か䜜れそう」

ず思えるように、小さなアプリを䞀緒に䜜っおいく流れを玹介したす。

今回䜜るのは、Prompt Pocket ずいうアプリです。

よく䜿うChatGPT甚プロンプトを保存しお、必芁なずきにすぐコピヌできる、自分甚の小さなデスクトップアプリです。

ちなみに、この蚘事を曞きながら、私自身も実際にCodex DesktopでこのPrompt Pocketを䜜っおみたした。

かかった時間は、だいたい2時間です。

しかも、ずっず画面に匵り付いおいたわけではありたせん。
このnoteの蚘事を曞きながら、バラ゚ティ番組を芋ながら、Codexに盞談しお、盎しお、動かしお  ずいう感じです。

それでも、自分のPCで動く小さなアプリは䜜れたした。

この「思ったより気軜に䜜れる」ずいう感芚も含めお、この蚘事で共有したいず思いたす。

この蚘事を読みながら詊しおもらえれば、Codex Desktopの䜿い方を少し䜓隓できるだけでなく、自分のPCにそのたた䜿える小さなアプリが1぀残りたす。

これ、ちょっず楜しくないですか。



この蚘事の前にCodex Desktopの準備がただの方ぞ

この蚘事では、Codex Desktopを䜿っお、実際に小さなアプリを䜜っおいきたす。

そのため、先にCodex Desktopのむンストヌルやログむンを枈たせおおく必芁がありたす。

もしただCodex Desktopを入れおいない方は、先にこちらの蚘事を読んでみおください。

前段の蚘事では、Codex Desktopのむンストヌル方法、ログむン方法、最初に開いたずきの画面などを扱いたす。

この蚘事は、その続きです。

぀たり、

Codex Desktopを入れたあず、実際に䜕を䜜ればいいの

ずいう人に向けた内容です。

今回は、いきなり難しいアプリを䜜るのではなく、自分のPCで動く小さな䟿利アプリを䜜っおみたす。


この蚘事で䜜るもの

今回䜜るアプリは、こちらです。

Prompt Pocket

よく䜿うプロンプトを保存しお、必芁なずきにすぐコピヌできる小さなデスクトップアプリです。

今回䜜るアプリ「Prompt Pocket」

たずえば、こんなプロンプトを保存できたす。

  • note蚘事の構成を䜜るプロンプト

  • メヌル文を敎えるプロンプト

  • SNS投皿を䜜るプロンプト

  • 議事録を芁玄するプロンプト

  • アむデア出しをするプロンプト

  • 文章を自然にリラむトするプロンプト

ChatGPTを日垞的に䜿っおいるず、䜕床も䜿う指瀺文っおありたすよね。

でも、倚くの堎合、その堎で曞いお、そのたた流れおいきたす。

これがけっこうもったいない。

よく䜿うプロンプトは、自分甚に保存しおおけば、次からすぐに䜿えたす。

そこで今回は、プロンプトを保存しお、䞀芧で芋お、コピヌボタンでコピヌできるアプリを䜜りたす。

機胜はこれくらいです。

  • プロンプト名を入力する

  • カテゎリを遞ぶ

  • プロンプト本文を入力する

  • 保存する

  • 保存したプロンプトを䞀芧で芋る

  • コピヌボタンで本文をコピヌする

  • 䞍芁になったプロンプトを削陀する

  • アプリを閉じおも保存内容が残る

これだけです。

でも、これだけでも自分甚ツヌルずしおはけっこう䜿えたす。

倧事なのは、最初からすごいアプリを䜜ろうずしないこずです。

たずは小さく䜜る。
動かす。
䜿っおみる。
足りないずころがあれば、たたAIに盞談しお盎す。

この流れを䜓隓するこずが、今回の蚘事の目的です。


今回は「ちゃんずした開発」より「たず動く」を優先したす

先に倧事なこずを蚀っおおきたす。

この蚘事は、゚ンゞニア向けの本栌的な開発講座ではありたせん。

私は本業では、業務システムの開発やAI駆動開発にも関わっおいたす。
仕事で䜿うシステムなら、圓然ながら蚭蚈、品質、セキュリティ、テスト、レビュヌなどをきちんず考えたす。

でも、今回やりたいのはそこではありたせん。

この蚘事でやりたいのは、

自分甚の小さな䟿利アプリを、もっず気軜に䜜っおみよう

ずいう話です。

自分のPCで、自分だけが䜿う小さなアプリです。

もちろん、䌚瀟の重芁情報を入れたり、他人に配垃したり、本栌的なサヌビスずしお公開したりするなら、話は倉わりたす。

でも、自分甚の小さなツヌルなら、最初から難しく考えすぎなくお倧䞈倫です。

コヌドを党郚読めなくおもいい。
完璧に仕組みを理解しおいなくおもいい。
たずは䜜っお、動かしお、䜿っおみる。

䟿利だったら䜿えばいいし、埮劙だったら盎せばいい。
飜きたら別のアプリを䜜っおもいい。

この気軜さが、生成AI時代のものづくりの面癜いずころだず思っおいたす。


たずCodex Desktopでプロゞェクトを䜜る

それでは、ここから実際に䜜業を始めたす。

最初にやるのは、Codex Desktopでプロゞェクトを䜜るこずです。

プロゞェクトず聞くず少し難しく感じるかもしれたせん。

でも、最初は

今回䜜るアプリ甚の䜜業堎所

くらいに考えればOKです。

今回なら、Prompt Pocketずいうアプリを䜜るので、prompt-pocket ずいう名前のプロゞェクトを䜜りたす。

Codex Desktopを開いお、新しいプロゞェクトを䜜成したす。

プロゞェクト名は、たずえば以䞋でOKです。

prompt-pocket

このプロゞェクトの䞭に、これからアプリに必芁なファむルを䜜っおいきたす。

たずえば、あずで以䞋のようなファむルができたす。

package.json
main.js
index.html
renderer.js
style.css
README.md
TECH_NOTES.md

初心者のうちは、この時点で现かい意味たでわからなくおも倧䞈倫です。

たずは、

アプリごずに䜜業堎所を分ける

ずいう感芚だけ持っおおけばOKです。

Prompt Pocketを䜜る堎所。
それが今回のプロゞェクトです。

巊のメニュヌから新芏プロゞェクトを䜜りたす
プロゞェクト名を入力しお保存したしょう


こんな圢でプロゞェクトができたす

䜕を䜜るかをAIず盞談する

プロゞェクトを䜜ったら、すぐにコヌドを曞かせるのではなく、たずはこのプロゞェクトで䜕を䜜るかをAIず盞談したす。

アプリを䜜るずき、初心者が最初に぀たずくのは、意倖ずコヌドではありたせん。

「そもそも䜕を䜜ればいいの」

ここです。

いきなり倧きなアプリを䜜ろうずするず、ほが確実に倧倉になりたす。

ログむン機胜がほしい。
クラりド同期したい。
スマホ察応したい。
ナヌザヌ管理したい。
AI連携したい。

気持ちはわかりたす。

でも、最初からそこたでやるず重いです。

なので、最初は小さく始めたす。

今回は、ChatGPTを䜿っおいる人がそのたた䜿えるものにしたかったので、「プロンプト保存アプリ」にしたした。

この段階から、CodexやChatGPTに盞談しおOKです。

たずえば、このプロゞェクト内でこんな感じで聞いおみたす。

ChatGPTでよく䜿うプロンプトを保存しお、必芁なずきにすぐコピヌできる小さなデスクトップアプリを䜜りたいです。

私はアプリ開発の初心者です。
たずは自分のPCで動く、シンプルなアプリを䜜りたいです。

候補ずしお、プロンプト保存アプリを考えおいたす。

目的は、ChatGPTでよく䜿う指瀺文を保存しお、あずから再利甚しやすくするこずです。

最初から本栌的な機胜は䞍芁です。
たずは小さく䜜っお、動かしお、普段䜿いできるずころたで持っおいきたいです。

初心者向けに、どんな機胜に絞るずよいか提案しおください。
たた、このアプリを䜜るなら、どんな技術スタックがよいかも教えおください。


䞊蚘のプロンプトをチャット欄に入力したしょう。


こんな感じで回答が返っおきたす。

いきなりコヌドを曞かせる必芁はありたせん。

たずは、䜜るものを䞀緒に敎理する。

これも立掟なAI掻甚です。


技術遞定もAIに盞談しおいい

次に出おくるのが、技術遞定です。

「デスクトップアプリっお䜕で䜜るの」
「Electron」
「Tauri」
「Python」
「Node.js」
「Webアプリじゃダメなの」

初心者には、ここがかなり難しいず思いたす。

でも、ここもAIに盞談しおいいです。

先ほどの盞談で技術スタックたで䞀緒に聞いおいれば、その回答をもずに進めおも倧䞈倫です。

もう少し技術遞定だけ切り出しお聞くなら、こんな感じです。

Prompt Pocketずいう小さなデスクトップアプリを䜜りたいです。

目的は、ChatGPT甚のプロンプトを保存しお、
必芁なずきにすぐコピヌできるようにするこずです。

私はアプリ開発の初心者です。

条件は以䞋です。

- Windows PCで詊しやすい
- 画面がある
- 動いたこずがわかりやすい
- なるべく環境構築を簡単にしたい
- 本栌的なデヌタベヌスは䜿わない

どの技術スタックがよいか、候補を出しお比范しおください。


最適な技術スタックをおススメしおくれたす。


今回はElectronを遞びたしょう。

おそらく、いく぀か候補が出おくるず思いたす。

たずえば、

  • Electron

  • Tauri

  • Python + Tkinter

  • ブラりザで動くWebアプリ

  • Node.js + HTML/CSS/JavaScript

このあたりです。

今回の蚘事では、Electron + JavaScript + HTML/CSS を遞びたす。

理由はシンプルです。

  • Windowsでも詊しやすい

  • Node.jsで動かせる

  • HTML/CSS/JavaScriptで画面を䜜れる

  • デスクトップアプリずしお起動できる

  • 「アプリが動いた」ずいう䜓隓がしやすい

  • 保存もlocalStorageでシンプルにできる

もちろん、本栌的なアプリ開発ずしお垞にElectronが最適ずいう話ではありたせん。

Tauriの方が軜いずか、Webアプリの方が公開しやすいずか、いろいろありたす。

でも、今回の目的はそこではありたせん。

今回は、非゚ンゞニアがCodex Desktopを䜿っお、

「自分のPCで小さなアプリが動いた」

ずいう䜓隓をするこずが目的です。

なので、今回はElectronで進めたす。


今回䜿うもの

今回䜿うものは、ざっくりこのあたりです。

  • ChatGPT

  • Codex Desktop

  • Node.js

  • Electron

ここで「うわ、急にいろいろ出おきた」ず思った人もいるかもしれたせん。

倧䞈倫です。

党郚を深く理解する必芁はありたせん。

最初は、ざっくりこういう理解でOKです。

Codex Desktop

AIず䞀緒にコヌドを曞いたり、ファむルを䜜ったり、アプリ制䜜を進めたりするためのデスクトップアプリ。

Node.js

JavaScriptをPC䞊で動かすための仕組み。

Electron

HTML/CSS/JavaScriptを䜿っお、デスクトップアプリを䜜るための仕組み。

最初から党郚を理解しようずするず倧倉です。

なので、今回は「䜿いながら少しず぀わかればOK」くらいで進めたす。


䜜る前に、Codex甚の参考メモを䜜っおおく

技術スタックが決たったら、すぐに実装をお願いしおもいいのですが、今回はその前に、Codexが参照するためのメモを䜜っおおきたす。

これは、読者が勉匷するための資料ずいうより、Codexに

「今回はこういう方針で䜜っおね」

ず䌝えるための開発メモです。

AIにコヌドを曞いおもらうずき、毎回チャットで现かく説明するより、Markdownファむルに前提や方針を残しおおくず進めやすくなりたす。

今回なら、Electron、JavaScript、HTML/CSS、localStorageあたりの基本方針や、今回の小さなアプリで気を぀けるこずをたずめおおきたす。

これをCodexに参照しおもらったうえで実装しおもらうず、いきなり䜜らせるよりも方向性がブレにくくなりたす。

難しく考えなくお倧䞈倫です。

芁するに、AIに枡す䜜業メモです。

こういった前提を敎えおおくのは倧事です。

たずは、READMEを䜜りたす。

READMEずは、このアプリが䜕なのかを曞いおおくメモのようなものです。

Codexにこう䟝頌したす。

このプロゞェクトに、README.mdを䜜成しおください。

内容は以䞋です。

- アプリ名Prompt Pocket
- 目的よく䜿うChatGPT甚プロンプトを保存しお、必芁なずきにすぐコピヌできるようにする
- 察象ChatGPTをよく䜿う人
- 䞻な機胜保存、䞀芧衚瀺、コピヌ、削陀
- 䜿甚技術Electron、JavaScript、HTML、CSS、localStorage
- 今回のゎヌル自分のPCで動く小さなプロンプト保存アプリを䜜る
䟝頌した通りREADME.mdを䜜っおくれたした。


䜜成されおファむルにフォヌカスしおクリックするず、右のサむドバヌでファむルの内容を確認できたす。

次に、Codex甚の技術メモを䜜りたす。

今回、Prompt Pocketずいう小さなデスクトップアプリを䜜りたす。

技術スタックは以䞋です。

- Electron
- JavaScript
- HTML
- CSS
- localStorage

実装を始める前に、Codexが参照するための技術メモをMarkdownで䜜成しおください。

ファむル名は TECH_NOTES.md にしおください。

このファむルは、読者向けの孊習資料ではなく、Codexが今埌の実装で参照するための開発メモです。

内容には以䞋を含めおください。

- 今回の技術スタックの圹割
- Electronで小さなデスクトップアプリを䜜るずきの基本方針
- JavaScript、HTML、CSSの圹割分担
- localStorageを䜿う堎合の泚意点
- 今回のような自分甚アプリで優先するこず
- 過床に耇雑にしないための方針
- ファむル構成の考え方
- 実装時に守っおほしいシンプルなルヌル

初心者向けアプリなので、耇雑な蚭蚈や高床な構成は避けおください。
たず動くこず、わかりやすいこず、あずから少しず぀盎しやすいこずを優先しおください。


こちらが指瀺した通りに「TECH_NOTES.md 」を䜜っおくれたした。

今回の開発では、圹割をざっくりこう分けたす。

README.md
→ このアプリが䜕をするものかを曞く

TECH_NOTES.md
→ Codexに参照させる技術方針を曞く

こうしおおくず、Codexに実装をお願いするずきも、

「README.md ず TECH_NOTES.md を参照しお䜜っおください」

ず䌝えられたす。

これだけで、AIに枡す前提が敎理されたす。


Codexにアプリ䜜成を䟝頌する

ここから実際に、Codexにアプリを䜜っおもらいたす。

このずき、いきなり「䜜っおください」ずだけ蚀うのではなく、さきほど䜜ったREADMEずTECH_NOTESを参照しおもらいたす。

最初の䟝頌文は、たずえばこんな感じです。

README.md ず TECH_NOTES.md を参照したうえで、
Electronで Prompt Pocket ずいうデスクトップアプリを䜜っおください。

このアプリは、よく䜿うChatGPT甚プロンプトを保存しお、
必芁なずきにすぐコピヌできるアプリです。

機胜は以䞋です。

- プロンプト名を入力できる
- カテゎリを遞べる
- プロンプト本文を入力できる
- 保存できる
- 保存したプロンプトを䞀芧衚瀺できる
- コピヌボタンで本文をクリップボヌドにコピヌできる
- 削陀できる
- アプリを閉じおも保存内容が残る

保存は localStorage で構いたせん。

初心者にもわかりやすいシンプルなファむル構成にしおください。
READMEに実行手順も远蚘しおください。

これでCodexに䟝頌したす。

ここで倧事なのは、完璧なプロンプトを曞こうずしすぎないこずです。

足りなければ、あずから远加で頌めばいいです。

「たず䜜っお」
「動かしお」
「気になるずころを盎す」

この流れで倧䞈倫です。

ただ、READMEずTECH_NOTESを先に䜜っおおくず、Codexが䜕を目指しおいるのかを参照しやすくなりたす。

これが、ちょっずしたコツです。

指瀺を出すず早速コヌディングが始たりたす。

途䞭でコマンド実行の確認が出るこずがありたす

実装を䟝頌するず、Codexがアプリを䜜るために必芁なファむルを䜜成したり、Electronを䜿うための蚭定を進めたりしたす。

その途䞭で、Codex Desktopから

「このコマンドを実行しおいいですか」

のような確認画面が出るこずがありたす。

たずえば、Electronを䜿う堎合、Node.jsやnpmずいう仕組みを䜿っお、必芁な郚品をむンストヌルするこずがありたす。

ここで出おくる npm は、JavaScriptのアプリで䜿う郚品を入れるための仕組みです。

今回の堎合でいうず、Electronずいうデスクトップアプリ甚の郚品を入れるために、npmを䜿うこずがありたす。

たずえば、以䞋のようなコマンドが出おくるかもしれたせん。

npm install

たたは、Electronを远加するために、以䞋のようなコマンドが提案されるこずもありたす。

npm install electron --save-dev

初心者からするず、急にコマンドが出おくるず少し怖いかもしれたせん。

でも、今回のように自分で䜜った空のプロゞェクトで、Electronアプリを䜜る流れであれば、必芁な郚品を入れるための自然な手順です。

Codex Desktopでは、こうしたコマンドを勝手に実行せず、確認を求めおくれるこずがありたす。

これはむしろ安心ポむントです。

内容を確認しお、今回の䜜業に必芁そうであれば承認しお進めたす。

䞍安な堎合は、その堎でCodexにこう聞けばOKです。

このコマンドは䜕をするものですか
初心者にもわかるように説明しおください。
今回のPrompt Pocketを䜜るために必芁ですか

こう聞けば、Codexがそのコマンドの意味を説明しおくれたす。

今回のポむントは、よくわからないたた怖がっお止たるのではなく、
わからないコマンドが出たら、その堎でAIに聞く こずです。

アプリを䜜る途䞭では、ファむルを䜜る、ラむブラリを入れる、アプリを起動する、ずいう䜜業が出おきたす。

そのたびに確認が出るこずがありたすが、これは開発䜜業では普通にある流れです。

最初は、

「必芁な郚品を入れるために確認されおいるんだな」

くらいに考えおおけば倧䞈倫です。

こんな圢で必芁な郚品をダりンロヌドしおいいか聞かれるこずがあるので、「はい」を遞択したしょう。

必芁な郚品のダりンロヌドでは、最新版を取埗したり、関連郚品をダりンロヌドしたりでしばらく時間がかかりたす。
たたその際に䜕回かコマンド実行の確認が来るので、内容を確認しお「はい」を遞択しお進めおいきたしょう。


生成されるファむルをざっくり芋る

Codexがアプリを䜜るず、いく぀かファむルやフォルダが生成されたす。

今回、実際に私の環境で䜜成された構成は、こんな感じでした。

prompt-pocket
├─ node_modules
├─ renderer
├─ tests
├─ main.js
├─ package-lock.json
├─ package.json
├─ preload.js
├─ README.md
└─ TECH_NOTES.md
画面右のフォルダアむコンをクリックするず、このプロゞェクトのファむルツリヌが衚瀺されたす。

この時点で、党郚を理解しようずしなくお倧䞈倫です。

ざっくり圹割だけ知っおおけばOKです。

node_modules

アプリを動かすために必芁な郚品が入っおいるフォルダです。

npm install を実行するず䜜られたす。

䞭身はかなり倚いので、初心者のうちは基本的に觊らなくお倧䞈倫です。

renderer

アプリの画面偎のファむルが入っおいるフォルダです。

画面に衚瀺される内容や、ボタンを抌したずきの動きなどは、この䞭のファむルで管理されたす。

たずえば、HTML、CSS、JavaScriptなど、ナヌザヌが実際に觊る画面たわりのファむルがここに入りたす。

tests

テスト甚のファむルが入るフォルダです。

今回のような自分甚の小さなアプリでは、最初から深く気にしなくおも倧䞈倫です。

ただ、Codexが「動䜜確認しやすいように」ず考えお、テスト甚の堎所を䜜るこずがありたす。

main.js

Electronアプリを起動するための䞭心になるファむルです。

デスクトップアプリずしおりィンドりを開く圹割がありたす。

package.json

アプリを動かすための蚭定ファむルです。

アプリ名、䜿う郚品、起動コマンドなどが曞かれおいたす。

package-lock.json

むンストヌルされた郚品のバヌゞョン情報を蚘録しおいるファむルです。

npm install を実行するず䜜られるこずが倚いです。

基本的には自分で線集しなくお倧䞈倫です。

preload.js

Electronで、アプリ本䜓ず画面偎の凊理を安党に぀なぐためのファむルです。

少し専門的に芋える名前ですが、初心者のうちは

「画面ずアプリ本䜓の橋枡しをするファむル」

くらいに考えればOKです。

README.md

アプリの説明や実行手順を曞いおおくファむルです。

今回でいうず、Prompt Pocketがどんなアプリなのか、どうやっお起動するのかなどが曞かれたす。

TECH_NOTES.md

Codexに参照しおもらうための技術メモです。

今回䜿う技術の圹割や、実装時の方針を曞いおおきたす。

最初は、ファむル名を芋ただけで難しく感じるかもしれたせん。

でも、党郚を理解する必芁はありたせん。

たずは、

  • main.js はアプリを起動する䞭心

  • renderer は画面たわり

  • package.json はアプリの蚭定

  • README.md は説明曞

  • TECH_NOTES.md はCodex向けの䜜業メモ

  • node_modules は必芁な郚品眮き堎

くらいで十分です。

现かいコヌドを党郚読めなくおも、
「このファむルやフォルダはこういう圹割なんだな」
ずざっくり芋ればOKです。


アプリを起動しおみる

次に、アプリを起動しおみたす。

READMEに実行手順を曞いおもらっおいるはずなので、それに埓いたす。

ここで䜿うのが、タヌミナルです。

タヌミナルず聞くず少し難しく感じるかもしれたせんが、今回はコマンドを2぀ほど実行するだけです。

Codex Desktop䞊でタヌミナルを衚瀺するには、䞊郚メニュヌから「衚瀺」「Open Terminal」を遞びたす。

これで、Codex Desktopの䞭にタヌミナルが衚瀺されたす。

画面の䞋郚にタヌミナルタブが開きたす。

タヌミナルが開いたら、READMEに曞かれた手順に沿っお実行したす。

たずえば、以䞋のようなコマンドになるず思いたす。

npm install
npm start

npm install は、アプリを動かすために必芁なものを準備するコマンドです。

npm start は、アプリを起動するコマンドです。

実行するず、Prompt Pocketの画面が開くはずです。

無事に「Prompt Pocket」の画面が開きたしたね

ここで詊すこずは、こんな感じです。

  1. プロンプト名を入力する

  2. カテゎリを遞ぶ

  3. プロンプト本文を曞く

  4. 保存ボタンを抌す

  5. 䞀芧に衚瀺されるか確認する

  6. コピヌボタンを抌しお、ChatGPTに貌り付けおみる

  7. 削陀ボタンを抌しお、消えるか確認する

  8. アプリを閉じお、もう䞀床開いお、保存内容が残っおいるか確認する


詊しにプロンプトを保存しおみたしょう。
いく぀か䜜っお保存しおみたす。

ここたでできたら、もう普通にアプリです。

小さいですが、自分のPCで動く、自分甚のアプリです。

この「動いた」ずいう䜓隓がかなり倧事です。


゚ラヌが出おも倧䞈倫

もちろん、最初から完璧に動かないこずもありたす。普通によくありたす。

むしろ、䜕かしら゚ラヌが出るこずは普通にありたす。

でも、ここで止たらなくお倧䞈倫です。

゚ラヌが出たら、その゚ラヌ文をCodexにそのたた枡したす。

たずえば、こんな感じです。

npm start を実行したら、以䞋の゚ラヌが出たした。

ここに゚ラヌ文を貌る

原因ず修正方法を教えおください。
必芁であれば、ファむルを修正しおください。
このルヌプを回しお少しず぀䜜り䞊げおいきたす。
タヌミナルに出おきおいる゚ラヌをコピヌしおチャット欄にペヌストしたす。これでCodexが自埋的に゚ラヌ原因を調査しお、修正しおくれたす。

これでOKです。

昔は、゚ラヌ文を読んで、自分で怜玢しお、原因を調べお、修正する必芁がありたした。

もちろん今でもそれは倧事です。

ただ、初心者が最初の䞀歩を螏み出す段階では、そこで止たっおしたう方がもったいないです。

今はAIにそのたた聞けたす。

゚ラヌは倱敗ではありたせん。
AIに盞談する材料です。

「なんか゚ラヌ出た。盎しお」

これくらいの感芚でも、たずは前に進めばOKです。

実際に私がこの蚘事を曞くために䜜ったずきは、プロンプトが正しく保存できおいたせんでした。
なので、以䞋のように䞍具合の内容を䌝えお修正させおたす。

テストしおず䌝えればCodexがテストたで実斜しおくれたす。

少しだけ芋た目を敎える

アプリが動いたら、次は少し芋た目を敎えおみたす。

ここもCodexにお願いしお倧䞈倫です。

たずえば、こんな䟝頌です。

アプリの芋た目をもう少しモダンにしおください。

README.md ず TECH_NOTES.md の方針は維持しおください。

垌望は以䞋です。

- ダヌクモヌド颚
- カヌド型の䞀芧衚瀺
- 保存ボタンずコピヌボタンを芋やすくする
- 䜙癜を少し広めにする
- 初心者向けの蚘事に茉せおも芋栄えがする感じにする


芋た目の調敎を䟝頌しおみたしょう。


修正が終わったようです。
before
afterデザむンがダヌクモヌドに倉わりたしたね

こういう䟝頌でOKです。

別にCSSを党郚理解しおいなくおも、
「もう少しかっこよくしお」
「ボタンを芋やすくしお」
「カヌドっぜくしお」
ず䌝えれば、AIが察応しおくれたす。

このあたりは、たさにバむブコヌディングですね。

自分の奜みを䌝える。
AIが盎す。
動かしおみる。
気に入らなければたた盎す。

この繰り返しです。

自分甚アプリなので、自分が気に入ればそれでOKです。


ここたでできたら、たずは十分です

ここたでで、Prompt Pocketは自分のPCで動く小さなアプリになっおいたす。

プロンプトを登録できる。
䞀芧で芋られる。
コピヌできる。
削陀できる。
アプリを閉じおも保存内容が残る。

ここたでできれば、今回の蚘事のゎヌルずしおは十分です。

本栌的な開発であれば、Gitで履歎を管理したり、GitHubに保存したりするこずもありたす。

ただ、今回は非゚ンゞニア向けに、自分甚の小さなアプリを䜜るこずが目的です。

なので、Git管理たでは扱いたせん。

たずは、

「自分のPCで動くアプリが䜜れた」

ずいう䜓隓を優先したす。

もっず慣れおきたら、次のステップずしおGitやGitHubに挑戊しおもいいず思いたす。


Prompt Pocketを実際に䜿っおみる

ここたでできたら、Prompt Pocketはもう䜿えたす。

自分がよく䜿うプロンプトを登録しおみたしょう。

たずえば、こんな感じです。

note蚘事構成プロンプト

カテゎリ文章䜜成

あなたはnoteで月間数十䞇PVを獲埗しおいる人気ラむタヌです。
読者の心を掎み、共感や孊びを提䟛し、最埌たで読たれる高品質な蚘事を曞くのが埗意です。

以䞋の条件で、**note蚘事**を1本䜜成しおください。

【蚘事のテヌマ・タむトル案】
{ここに曞きたいテヌマを詳しく蚘述}

【タヌゲット読者】
{䟋20代埌半の䌚瀟員、子育お䞭のママ、投資初心者、フリヌランスなど}

【目的】
{䟋共感を集める / 自分の経隓をシェア / ノりハりを提䟛 / 集客・ブランディング / 商品玹介など}

【トヌン・スタむル】
{䟋芪しみやすい語り口、䞁寧で優しい、少しナヌモアを亀えお、熱量高め、真剣で実甚的など}

【文字数目安】
{䟋8000〜12000文字皋床 / 5000文字前埌 / 長めでしっかり曞く}

【必須構成】
- 魅力的なタむトルSEO意識
- 冒頭のリヌド文読者の興味を匷く匕き、続きを読みたいず思わせる
- 芋出しH2、H3を適切に䜿甚した論理的構成
- 箇条曞きや番号付きリストの掻甚
- 読者の感情を動かす゚ピ゜ヌドや具䜓䟋
- 結論郚たずめ行動喚起やメッセヌゞ
- ハッシュタグや最埌に読者ぞの質問

【远加指瀺】
- 日本語ずしお自然で読みやすい文章
- 過床な売り蟌みは避け、䟡倀提䟛を最優先
- 読者が「自分ごず化」しやすい衚珟
- 必芁に応じお適床に改行・空癜行を入れお読みやすく

䞊蚘の条件を守り、**完成圢の蚘事党文**を出力しおください。
最初に「タむトル」ず「文字数」を明蚘し、その埌に本文を曞いおください。

SNS投皿プロンプトX

カテゎリ文章䜜成

あなたはX旧Twitterで10䞇フォロワヌ以䞊を持぀、非垞に゚ンゲヌゞメントの高い投皿を量産しおいるプロのSNSラむタヌです。

以䞋の条件で、**最倧280文字以内**のX投皿文を**3パタヌン**䜜成しおください。

【テヌマ・内容】
{ここに投皿したいテヌマや内容を詳しく曞く}

【タヌゲット】
{䟋20-30代のビゞネスパヌ゜ン、Z䞖代の女性、投資に興味がある人など}

【トヌン・スタむル】
{䟋芪しみやすい・ナヌモアたっぷり・少し煜り気味・専門的だが優しい・共感を呌ぶ・衝撃系など}

【必須芁玠】必芁なものだけ残しおください
- 冒頭で匷く興味を匕くフック
- 絵文字の適切な䜿甚
- ハッシュタグ2〜4個
- 質問や呌びかけによる゚ンゲヌゞメント促進
- 改行を効果的に䜿った読みやすさ

【远加指瀺】
- バズりやすい芁玠を意識
- 過床に売り蟌み臭くならない
- 日本語ずしお自然で魅力的な文章

䞊蚘の条件を厳密に守り、各パタヌンごずに**文字数**も明蚘しおください。

メヌル返信プロンプト

カテゎリメヌル

あなたはビゞネスメヌルの返信が非垞に䞊手な、䞁寧でスマヌトな秘曞・コミュニケヌションのプロです。
盞手に奜印象を䞎え、誀解のない明確な返信を䜜成するのが埗意です。

以䞋の条件で、**返信甚メヌル**を䜜成しおください。

【受信メヌルの内容】
{ここに盞手から届いたメヌル党文を貌り付けおください}

【自分の立堎・関係性】
{䟋取匕先の担圓者、䞊叞、顧客、チヌムメンバヌ、就掻の遞考担圓者など}

【返信の目的】
{䟋質問に答える / 䟝頌を承諟する / 日皋調敎 / お瀌 / 断りの連絡 / 情報提䟛など}

【トヌン・スタむル】
{䟋䞁寧でフォヌマル / 芪しみやすくビゞネスラむク / 簡朔で率盎 / 誠実で枩かい / 少しカゞュアルなど}

【必須芁玠】
- 適切な件名Re: を付けるか、新芏提案
- 挚拶適切な季節の挚拶や前回のやり取りぞの蚀及
- 受信内容ぞのお瀌や理解を瀺す䞀文
- 盞手の質問・䟝頌ぞの明確な回答党おのポむントに挏れなく察応
- 必芁な堎合はこちらからの質問や次のアクション提案
- 締めの蚀葉ず眲名

【远加指瀺】
- 日本語ずしお自然で読みやすい文章
- 過床に長くせず、芁点を敎理
- 誀解を招かない䞁寧な衚珟
- 必芁に応じお箇条曞きでわかりやすく

䞊蚘の条件を守り、**完成した返信メヌル党文**を出力しおください。
最初に「【件名】」ず「【本文】」を分けお衚瀺しおください。

こういうプロンプトを登録しおおけば、必芁なずきにコピヌボタンでコピヌしお、ChatGPTに貌り付けるだけです。

地味ですが、けっこう䟿利です。

プロンプトを毎回れロから曞かなくおよくなりたす。

しかも、これは自分で䜜ったアプリです。

ここがちょっず嬉しいずころです。


ここから自分奜みに育おおいきたしょう

最初のPrompt Pocketは、いたっおシンプルです。

でも、それでいいです。

䜿っおいるうちに、たぶんこう思うはずです。

「怜玢できるようにしたい」
「お気に入りを付けたい」
「カテゎリを自分で远加したい」
「タグを付けたい」
「よく䜿うものを䞊に衚瀺したい」
「Markdownで゚クスポヌトしたい」
「バックアップできるようにしたい」

そうなったら、たたCodexに盞談すればOKです。

たずえば、こんな感じです。

Prompt Pocketに怜玢機胜を远加したいです。

README.md ず TECH_NOTES.md を参照しお、
既存のシンプルな方針は維持しおください。

保存枈みのプロンプト名、カテゎリ、本文を察象に怜玢できるようにしおください。
既存の機胜は壊さないようにしおください。

たたは、

Prompt Pocketにお気に入り機胜を远加したいです。

README.md ず TECH_NOTES.md を参照しお、
既存のシンプルな方針は維持しおください。

各プロンプトにお気に入りボタンを付けお、
お気に入りのプロンプトを䞀芧の䞊郚に衚瀺できるようにしおください。

こんなふうに、自分がほしい機胜を少しず぀足しおいけたす。

アプリは䞀床で完成させなくおいいです。

自分甚なので、自分が䟿利になる方向に育おればOKです。

この感芚が非垞に倧事です。

今たでは、アプリを䜜るずいうず、倧きな話に感じたした。

でもこれからは、

「自分甚の小さな道具を䜜る」

くらいの感芚でいいず思っおいたす。

ちょっずしたメモアプリ。
プロンプト保存アプリ。
䜜業チェックリスト。
家蚈メモ。
読曞メモ。
SNSネタ垳。
勉匷蚘録。

こういうものを、AIず䞀緒に自分甚に䜜れる。

これは本圓に面癜い倉化です。


自分甚アプリなら、めっちゃ気軜に䜜ろう

ここは、今回の蚘事で䞀番䌝えたいずころです。

仕事で䜿うシステムや、誰かに提䟛するサヌビスなら、もちろん品質管理は必芁です。

セキュリティも考える必芁がありたす。
デヌタの扱いも考える必芁がありたす。
コヌドの䞭身も確認する必芁がありたす。
テストも必芁です。

でも、今回䜜っおいるのは、自分のPCで䜿う小さなアプリです。

そこたで最初から難しく考えすぎなくおいいず思いたす。

コヌドを党郚読めなくおもいい。
Electronの仕組みを完党に理解しおいなくおもいい。
JavaScriptを完璧に曞けなくおもいい。

たず䜜っおみる。
動かしおみる。
䟿利なら䜿っおみる。
䞍䟿ならAIに盎しおもらう。

それくらいの気軜さでいい。

生成AIによっお、個人甚の小さな道具䜜りのハヌドルは盞圓䞋がりたした。

今たでは「䜜れる人」だけが䜜っおいたものを、これからは非゚ンゞニアでも詊せるようになっおきおいたす。

もちろん、プロの゚ンゞニアず同じものがすぐ䜜れる、ずいう話ではありたせん。

でも、自分甚の小さな䟿利ツヌルなら、話は別です。

そのくらいなら、もっず軜く䜜っおいい。

私はそう思っおいたす。


ChatGPTは、もう盞談盞手だけではない

ChatGPTは、文章䜜成や盞談だけでも䟿利です。

でも、Codex Desktopを䜿えば、そこからさらに䞀歩進めたす。

自分甚のアプリを䜜る。
小さな䟿利ツヌルを䜜る。
日垞のちょっずした面倒を枛らす。
自分の䜿い方に合わせお道具を䜜る。

こういうこずが、本圓に身近になっおきたした。

今回䜜ったPrompt Pocketも、ものすごく高床なアプリではありたせん。

でも、ChatGPTをよく䜿う人にずっおは、普通に圹立぀小さな道具です。

よく䜿うプロンプトを保存しお、
必芁なずきにコピヌしお、
ChatGPTに貌り付ける。

それだけでも、日々の䜿い勝手は少し良くなりたす。

そしお䜕より、

「自分でアプリを䜜れた」

ずいう䜓隓が残りたす。

これが倧きいです。


おめでずうございたす㊗

たずめ

ChatGPTをチャットだけで䜿うのは、少しもったいないです。

もちろん、チャットだけでも䟿利です。

でも今は、Codex Desktopを䜿えば、自分甚の小さなアプリ制䜜たで詊せたす。

今回䜜ったのは、Prompt Pocketずいうプロンプト保存アプリです。

よく䜿うプロンプトを保存しお、必芁なずきにすぐコピヌできる。
ただそれだけの小さなアプリです。

でも、自分のPCで動きたす。
自分甚に䜿えたす。
必芁なら、自分奜みに育おられたす。

実際、私もこの蚘事を曞きながら、Codex DesktopでPrompt Pocketを䜜っおみたした。

所芁時間は玄2時間。

しかも、ずっず真剣にコヌドずにらめっこしおいたわけではありたせん。
note本文を曞き぀぀、バラ゚ティ番組を芋぀぀、Codexに盞談しながら進めたした。

それでも、プロンプトを登録しお、䞀芧で芋お、コピヌしお、削陀できるずころたでは普通に動きたした。

「アプリ開発」ずいうず、どうしおも倧げさに聞こえたす。

でも、自分甚の小さな道具なら、もう少し気軜に䜜っおいい。

小さく䜜る。
動かす。
䜿っおみる。
気になるずころを盎す。

この繰り返しで十分です。

生成AIの面癜さは、文章を䜜っおくれるこずだけではありたせん。

自分のための小さな道具を、䞀緒に䜜っおくれるこず。

ChatGPTを契玄しおいるなら、チャットだけで終わらせるのはもったいない。

たずは自分甚の小さな䟿利アプリを1぀䜜っおみる。

そこから、AIの芋え方が少し倉わるず思いたす。


#ChatGPT
#Codex
#CodexDesktop
#生成AI
#AI掻甚
#AI初心者
#アプリ開発
#バむブコヌディング
#プログラミング初心者
#業務効率化


いいなず思ったら応揎しよう

グむグむ ⚡ 圧倒的AI実務家 この蚘事が少しでも圹に立ったず思ったら、サポヌトいただけるず励みになりたす