Readerさん、こんにちは!ウミノです。
海外のツールを見ていて、
「このドル表記の金額、日本円だといくらになるんだろう?」
って、一瞬手が止まってしまうこと、ありませんか?
だいたい150倍すればいいんだけど、半端な数字だったり、金額が大きかったりすると暗算できなくて笑
特に海外からの収入がある方だと、毎月の収益レポートを確認するたびに電卓を叩いたり、換算サイトを開いたりと、地味に手間がかかりますよね。
わたしもUdemyでAIのオンラインコースを販売しているので、この「ドル→円」のひと手間が、ずーっとプチストレスだったんです。
こんな感じでドル表記。わからん!
でもある日、「そうだ、拡張機能を作ればいいんだ!」と思いついて、自分専用のツール開発に挑戦してみました😊
ちなみにこのChrome拡張機能、ChatGPTのCodex CLIにお願いしたら、たったの5分で完成しちゃいました。
単純なものなら割と早くできるので、バイブコーディングのはじめの一歩に、拡張機能はおすすめです。
プログラミングの知識がなくても大丈夫。AIに頼めば、驚くほど簡単に「あなただけ」の便利ツールが作れる時代なんです。
わたしはChatGPT Plus(3000円くらいのプラン)に課金しているのでCodex CLIを使ったのですが、ChatGPTにもClaudeにも課金していない方は完全無料のGemini CLIもいいですね。
Gemini CLIはすぐに上限に達してしまうそうなので、わたしは使っていませんが、Google Workspaceの課金者により多くの利用上限が付与されるようになったらちゃんと使おうと思っています。(今はだれでも無料)
ちなみに性能はClaude Codeが一番いい気がします(個人の感想です)
🤔 なぜ「ドル→円」換算ツールが必要だったの?
わたしが今回、わざわざ自分でツールを作ろうと思った一番の理由は、収入源の一つであるUdemyの収益が「ドル建て」だからなんです。
Udemyから送られてくるレポートや管理画面の数字は、すべて米ドルで表示されています。これが、なんとも実感が湧きにくいんですよね…。
たとえば、先月のわたしのUdemyからの収益は「3356ドル」でした。この数字だけを見ても、正直「ふーん、そうなんだ」くらいで、あまりピンとこないんです。
アメリカに3年住んでいたのにこれなので、ずっと日本に住んでいたらもっとピンと来づらいですよね。
でも、日本で生活している以上、やっぱり日本円でいくらなのかが知りたいじゃないですか。それが分かって初めて、「今月は頑張ったな」とか「来月はもっとこうしよう」とか、具体的な手応えを感じられるんですよね。
収益をチェックするたびに、iPhoneの電卓アプリで、金額を入力して換算する…という作業をしていました。(iPhoneの電卓アプリ、外貨換算もできるんです!)
ほんの数十秒のできごとなんですけど、割とわたし毎日のようにチェックしてまして笑…となると地味に面倒で。この小さな手間をなくしたい!というのが、開発のきっかけでした。
✨ 実際に作ったChrome拡張機能がこちら
そこで作ったのが、Webページ上のドル表記を、自動で日本円に書き換えてくれるChrome拡張機能です。
使い方はとってもシンプルで、Chromeにインストールして機能をONにするだけ。
たとえば、「$3356.29」という表記があったら、Chrome拡張機能をクリックした瞬間に「¥491,831」という風に、表示そのものが書き換わるようにしました。
クリックする前
クリックした後
こうやって具体的な日本円がパッと目に入るだけで、仕事へのモチベーションが全然違ってくるから不思議ですよね。ぼんやりドルで受け取るよりも、日本円のほうが実感がわきます(単純)
「今月もがんばったな、わたし!」って、自分を褒めてあげやすくなりました。数字が持つ力って、やっぱり大きいなと感じます。
🛍️ 副業や普段の買い物でも大活躍!
この拡張機能、もともとはUdemyの収益確認のために作ったんですが、完成してみたら日常生活のいろんな場面で大活躍してくれています。特に、海外のサービスやツールを使うときに便利。
あなたも、最近話題のAIツールの料金を調べることがあるかもしれません。たとえば、わたしが愛用しているmake.comの月額料金は月払いの場合10.59ドル。
料金プランのページを開いたときに、拡張機能がONになっていれば、わざわざ計算しなくても日本円で表示してくれます。
これ、地味に便利です😊
このツールがあれば、「あ、このサービスは月々このくらいの金額なんだな」と直感的に理解できるので、サービスを比較検討するのもスムーズになりました。
🤖AIと5分で作るChrome拡張機能
「でも、Chrome拡張機能を作るなんて、プログラミングの知識がないと無理でしょう?」
きっと、そう思いますよね。わかります。
でも今は複数のファイルにまたがるツールもAIで作りやすくなりました。
ではいったいどんな手順でバイブコーディングしているのか、説明していきますね。
非エンジニアによるバイブコーディングの進め方 ステップ0:AIツールを選択する
複数のファイルにまたがるChrome拡張機能を作りたい場合は、ChatGPTやClaudeなどのチャットAIツールだけでは力不足です。(逆に言うと1つのファイルだけで完結するプログラムならチャットAIツールでもOK)
CLI(Command Line Interface)だと、あなたが課金しているAIツールの料金の範囲内で使えるものがあるかも。ただ、インストールの難易度は高めです。
- Codex CLI(ChatGPTに課金してれば使える)
- Claude Code(Claudeに課金してれば使える)
- Gemini CLI(誰でも無料だけど制限きつめ)
CLIは「ターミナル」で動くツールです。要するにあの黒いコマンドプロンプトで動くやつです。ちょっと心理的ハードル高いですよね。
ちょっとそれはきつい…という方は、以下のようなプログラマ向けのエディタのAI機能に課金して使いましょう。
あたりが有名です。どれを選んでも大差ないです。安いのは月10ドルのVS Codeかな。わたしは月15ドルのWindsurfを使っています。Cursorは月20ドルです。
バイブコーディングについては話していませんが、「バイブライティング」に特化したコースならご用意があります。これはこれで超おすすめ。Windsurfを元に解説していますが、ぶっちゃけCursorもVS Codeもほぼ同じなので、これで応用できます。
ステップ1:作りたいものをAIに伝える
まずは、上にあげたようなAIツールに、「どんなものを作りたいか」を具体的に伝えます。わたしはこんな風にお願いしました。
Chrome拡張機能をONにすると、Webページ上に表示されているドル表記(例: $100 や $99.99 など)を、現在の為替レートを取得して日本円に換算し、表示を書き換えるChrome拡張機能を作りたいです。 そのために必要な仕様書を作ってください。
ポイントは、「いつ(どんな時に)」「なにが」「どうなるか」を、できるだけ詳しく、人間にお願いするように伝えることです。AIも、具体的な指示があった方がいい仕事をしてくれますからね。
ステップ2:仕様書をもとに生成させる
お願いすると、AIが「はい、承知いたしました。」という感じで、必要なコードをファイルごとに分けて生成してくれます。
わたしたちがやることは、たまに
と聞かれるので、
と伝える(Enterを押す)だけです。
そうするとフォルダの中にmanifest.json、content.js、background.js、icons/というような3~4つのファイルができるはず。
ステップ3:Chromeに読み込ませる
最後に、作ったプログラムをChromeに「これが新しい拡張機能だよ」と教えてあげましょう。
- Chromeブラウザで、拡張機能の管理ページ(アドレスバーに
chrome://extensions
と入力)を開きます。
- ページの右上にある「デベロッパーモード」のスイッチをONにします。
- 左上に表示される「パッケージ化されていない拡張機能を読み込む」というボタンをクリックします。
- 先ほどコードを保存したフォルダを選択します。
たったこれだけで、あなたのツールバーに自作の拡張機能のアイコンが表示されます。思ったよりかんたんですよね。
この拡張機能は「あなた専用」なので、だれかに見られたりすることもありません。あなたのパソコンのファイルを見に行っています。
ちょっとしたミニツールが作れるようになるととっても便利なので、ぜひ夏休みにチャレンジしてみてくださいね。
P.S.
noteメンバーシップ「自動化オタクの頭の中(ジドオタ)」は参加者が178名になりました!
初月無料はやめる予定ですので、試したい方はお早めにどうぞ。
今日はここまで。
最後まで読んでくださってありがとうございます!
今日も良い一日をお過ごしください。
ウミノ
📣質問・お悩み相談・ひとこと感想募集中!直接📩に返信してね。受講中のUdemyコースのご質問はUdemyのQ&Aからどうぞ!
過去の例:プロンプト書くのめんどくさいです / ChatGPT課金すべき? / Canvaの時短術を教えてください etc...
🛜X / YouTube / Podcast / instagram フォローしてね
📩お友だちにこのメルマガをすすめてね
ご紹介用のページはこちら
本メルマガ(3200名超)に号外広告出稿をご希望の方は直接返信でご相談ください(料金:10万円~)