米ドル→日本円換算するChrome拡張機能を作ってみた【ウミノ】


ウミノ@AI×マーケティングの専門家

米ドル→日本円換算するChrome拡張機能を作ってみた

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機能に課金して使いましょう。

  • Windsurf
  • VS Code
  • Cursor

あたりが有名です。どれを選んでも大差ないです。安いのは月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に「これが新しい拡張機能だよ」と教えてあげましょう。

  1. Chromeブラウザで、拡張機能の管理ページ(アドレスバーに chrome://extensions と入力)を開きます。
  2. ページの右上にある「デベロッパーモード」のスイッチをONにします。
  3. 左上に表示される「パッケージ化されていない拡張機能を読み込む」というボタンをクリックします。
  4. 先ほどコードを保存したフォルダを選択します。

たったこれだけで、あなたのツールバーに自作の拡張機能のアイコンが表示されます。思ったよりかんたんですよね。

この拡張機能は「あなた専用」なので、だれかに見られたりすることもありません。あなたのパソコンのファイルを見に行っています。

ちょっとしたミニツールが作れるようになるととっても便利なので、ぜひ夏休みにチャレンジしてみてくださいね。

P.S.

noteメンバーシップ「自動化オタクの頭の中(ジドオタ)」は参加者が178名になりました!

初月無料はやめる予定ですので、試したい方はお早めにどうぞ。


今日はここまで。

最後まで読んでくださってありがとうございます!
今日も良い一日をお過ごしください。

ウミノ

📣質問・お悩み相談・ひとこと感想募集中!直接📩に返信してね。受講中のUdemyコースのご質問はUdemyのQ&Aからどうぞ!

過去の例:プロンプト書くのめんどくさいです / ChatGPT課金すべき? / Canvaの時短術を教えてください etc...

🛜X / YouTube / Podcast / instagram フォローしてね

📩お友だちにこのメルマガをすすめてね

ご紹介用のページはこちら

本メルマガ(3200名超)に号外広告出稿をご希望の方は直接返信でご相談ください(料金:10万円~)

AI×マーケティングで不確実性の時代をサバイブする

1日5分、サクッとAIとマーケティングを学べるメルマガです。

Read more from AI×マーケティングで不確実性の時代をサバイブする

ウミノ@AI×マーケティングの専門家 旅行代金をチャラにする Readerさん、こんにちは!ウミノです。 ※今回はnano bananaのお話も最後にしています。 今週は人生初の沖縄に来ていまして、 こんなにステキで楽しいところならもっと早く来ればよかった!! という嬉しい後悔をしています。 いつも沖縄飛び越えて台湾とかに行っちゃってたんですよね✈ 空も海もきれいだし、食べ物超おいしいし(太)、アクティビティも楽しいし、ホテルの花火もきれいだったし、大満足でした。 旅行代金をチャラにする わたしは毎回、旅行中にいかに旅行代金をまかなえるか、みたいなチャレンジをいつもこっそりしています。 今月は全然宣伝できなかったんですが、それでも26万円をUdemyからいただけているので旅行代はまかなえました! ウミノ🤖AI×マーケティングのプロ @umino_chibi やっぱり8月は忙しい…帰省に旅行に夏休みにということで、今月はUdemyを全然宣伝できなかったんですが、それでも263,454円もいただけています。今回はマイル&ポイントで予約したので、旅行代がまかなえてる~✈...

ウミノ@AI×マーケティングの専門家 XからThreadsに自動投稿させてみたら衝撃の結果に Readerさん、こんにちは!ウミノです。 SNSのThreadsって使ってますか? わたしはThreadsは一時期毎日投稿してたんですが、飽きちゃってずっと放置してたんです。 noteや音声配信のお知らせだけを自動投稿するだけの用途で、もちろんインプレッションもほぼゼロ。 ただ、なんかもったいないなという感じはしていました。 Xの投稿をThreadsに自動投稿させてみたら… そこでXからThreadsに自動投稿するワークフローを作ってみたんです。 わたしのnoteメンバーシップ「自動化オタクの頭の中(ジドオタ)」で紹介したいなとも思って。 これが思った以上に大変で、1週間ぐらい今も格闘しています。 XのAPIの制限もあって、65点ぐらいの満足度ではありますが、たった2日でこんな成果が! ウミノ🤖AI×マーケティングのプロ @umino_chibi まったく稼働してなかったしゅれっじゅが、Xの投稿を自動投稿させるようになったら生き返ったwww...

ウミノ@AI×マーケティングの専門家 Chromeの標準機能で日本語字幕がつけられる? Readerさん、こんにちは!ウミノです。 英語の動画を視聴するとき、みなさんはどうやって見ていますか? YouTubeはほとんど日本語字幕をつけられるようになって便利になりましたよね。 わたしは英語はそこまで得意というわけではないので、字幕はあってほしい派です(キリッ) でもないときは仕方なくそのまま視聴するしかなく、腰は重いわ集中力は続かないわ聞き取れないところはあるわで、あまりうまく理解できていませんでした。 Chromeの標準機能に自動字幕が! 今回、海外のオンラインコースを視聴することになったんですが、字幕機能がなかったんですね。(Udemyではないです) そこで自分で拡張機能を作ろうかなと思ったんですが、結構大変そうなのですでにあるならそれを使おうと思って調べてみたんです。 そしたら拡張機能ではなく、Chromeの標準機能で自動字幕機能があるじゃないですか~! Chromeの設定 Chromeの設定→ユーザー補助機能で 自動字幕起こしをON...