リンクをコピーしました

Wiseを毎日使う開発者が作った通貨変換ツール — Currency Converter Boardの舞台裏

旅系Vlogを作っていたころ、通貨レートの画像を1枚作るだけでかなり時間がかかっていました。
為替を調べて、計算して、Illustratorへ入力する。数字を間違えたら最初からやり直しです。

この手作業を減らしたくて作ったのが、Currency Converter Boardです。
この記事では、作った理由と実際に使える範囲を書きます。

動画1本で同じ作業を3〜4回繰り返していた

旅行動画では、宿泊費や食事代を複数の通貨で見せる場面があります。
僕の場合、当時は次のように作っていました。

  1. Pythonなどで為替レートを確認する
  2. 必要な通貨へ換算する
  3. Illustratorでレイアウトする
  4. フォント、サイズ、色を調整する
  5. 画像を書き出す

動画1本につき3〜4枚。
公開前に金額の間違いを見つけると、再計算からやり直していました。

欲しかったのは、複数通貨を並べ、必要なら過去の日付を指定し、そのまま画像にできる道具です。
探しても自分の用途に合うものが見つからなかったので、自分で作ることにしました。

Currency Converter Boardでできること

Currency Converter Boardでは、金額と通貨を選び、換算結果をボードとして表示できます。
僕が動画制作で欲しかった機能を中心に入れました。

  • 複数通貨を同時に表示する
  • 通貨をドラッグアンドドロップで並べ替える
  • 日付を指定して過去のレートを表示する
  • PNGまたはJPGで書き出す
  • 出力サイズ、線の太さ、色を調整する
  • iframeでブログやWebサイトへ埋め込む

選べる通貨や取得できる日付は、データ提供元と現在の実装に依存します。
レートも金融取引の確定値ではないため、送金や両替の最終金額は利用するサービス側で確認してください。

実際に出力した画像

Currency Converter Boardのボード例

動画なら、必要な通貨を選んで画像を書き出し、編集ソフトへ入れます。
以前のようにIllustratorで数字を一つずつ打ち直す必要がなくなりました。

ブログにはiframeで埋め込める

旅行費用を記事に載せる場合は、画像の代わりにボードを埋め込めます。
たとえば5,000,000ベトナムドンを複数通貨へ換算するコードは次の形です。

<iframe
  src="https://currency-converter-board.com/embed?amount=5000000&from=VND&targets=JPY%2CGBP%2CUSD%2CINR%2CCAD%2CAUD%2CCHF%2CMXN%2CAED%2CBRL%2CCLP%2CCNY%2CCOP%2CCZK%2CDKK%2CEUR%2CHKD%2CHUF%2CIDR%2CILS%2CKRW%2CMYR%2CNOK%2CNZD%2CPHP%2CPLN%2CRON%2CRUB%2CSAR%2CSEK%2CSGD%2CTHB%2CTRY%2CZAR"
  width="100%"
  style="border:0;display:block;width:100%;height:0;overflow:hidden;"
  scrolling="no"
  frameborder="0"
  title="Currency Converter Board"
  name="ccb-e2al12ms"
  data-ccb-resize-id="ccb-e2al12ms"
></iframe>
<script src="https://currency-converter-board.com/embed-resize.js"></script>

埋め込んだあとの表示は次のとおりです。

埋め込みなら、記事を開いた時点のレートを表示できます。
一方、旅行当時の金額を固定して残したい記事では、日付を指定して画像を書き出す方が扱いやすいです。

Wise APIを使った理由

僕は以前からWiseを国際送金に使っていました。
その流れでAPIを知り、Currency Converter Boardのレート取得にも使っています。

フロントエンドはReactベースです。
画像のプレビューにはブラウザのCanvas APIを使い、バックエンド側も含めて画像を書き出せるようにしました。
描画部分は、普段の仕事でシェーダーを作る感覚に近く、Web開発の中では取り組みやすいところでした。

Webの知識は十分ではありませんでしたが、必要な情報を調べ、AIにも実装を手伝ってもらいながら形にしました。
ただ、為替データの扱いと表示結果は自分で確認する必要があり、この部分は生成されたコードに任せきりにはできませんでした。

無料公開とアフィリエイトについて

Currency Converter Boardは、現在無料で公開しています。
最初から有料にするより、まず自分が困っていた作業を解決できる状態で使ってもらいたかったからです。

サイト内にはWiseのアフィリエイトリンクがあります。
リンク経由の利用状況によって僕に報酬が入る可能性があり、運営費の一部に充てています。
ツールの利用にWiseへの登録は必要ありません。

送金手数料やキャンペーンは、金額、通貨、地域、時期などで変わります。
銀行やほかのサービスより必ず安いとは限らないため、利用前に各サービスの見積もりを比べてください。

手作業を一つ減らせた

Currency Converter Boardは、あらゆる為替用途を置き換えるサービスではありません。
僕にとっては、旅行動画のレート画像を作るたびに発生していた再計算と手入力を減らす道具です。

同じように複数通貨の画像を動画や記事へ載せる人なら、作成画面や埋め込みサンプルから試せます。

Wiseを検討する場合は、Wiseカードの案内もあります（アフィリエイトリンク）。
APIの仕様はWise Platform APIドキュメントで確認できます。