Pythonで通貨換算ツールを自作する方法

2023.01.18 2022.09.29

商品やサービスを提供しようとしたとき、あるいは単に価格を異なる通貨で表示したいと思ったことはありませんか？その場合、最新かつ正確な為替レートを提供することがいかに困難であるかはご存知の通りです。

そこで登場するのが、為替APIです。

為替APIは、為替レートの変換を処理するのに役立ちます。

この例では、Flaskウェブフレームワークとフロントエンドのスタイリングのための少しのJavascriptを使用して、あなた自身の通貨コンバータを構築できるように、通貨APIをシンプルなPythonアプリケーションに統合する方法を見ていきます。

Python で通貨換算器を作成するためのステップバイステップガイド

Python で通貨換算器を作成するためのステップバイステップガイド

まず、開発スタックをセットアップします。

Python 3 (> 3.7)
Flask
Javascript (Node)
Yarn (npm install -global yarn)
Vite
Tailwind CSS
postcss
autoprefixer
無料currencyapi.com APIキー

ステップ1：I

ステップ2: スタイリングの設定 (オプション)

スタイリングは任意ですが、このステップを踏む場合は、Tailwind CSSの使用をお勧めします。

Autoprefixer & postcssを使用すると、さらにスムーズな開発が可能になります。

そのため、これらのパッケージをインストールする必要があります。

yarn create vite currency-converter --template vanilla

ここで、tailwindを初期化します。

設定ファイル(tailwind.config.js)を作成します。

yarn add -D tailwindcss postcss autoprefixer

この新しく作成された設定ファイルを、Viteプロジェクトの設定に合わせる必要があります。

npx tailwindcss init

Tailwind CSSをインクルードするには、style.cssの先頭に以下の行を追加してください。

module.exports = {

 content: [

   './main.js',

   './index.html',

 ],

 theme: {

   extend: {},

 },

 plugins: [],
}

次に、postcss のルートディレクトリに postcss.config.js という名前の設定ファイルを作成する必要があります。

そこで、以下のように追加します。

@tailwind base;
@tailwind components;
@tailwind utilities;

ステップ3: vite の起動

ホットリロードでファイルを提供するために、viteをdevモードで起動します。

module.exports = {

    plugins: [

        require('tailwindcss'),

        require('autoprefixer')

    ]
}

ステップ4：HTMLを準備する

次に、デフォルトのランディングページを適応させたいと思います。

そのために、index.htmlを開き、フォームを作成します。

以下の要素が必要です。

入力用のラッパー t
基本通貨を入力するためのもの。 * 基本通貨の入力
ベースとなる通貨の選択
送信ボタン

レスポンスコンテナ

index.htmlの実装はこんな感じです。

yarn dev

ステップ5: JavaScriptでフォーム送信を処理する

main.jsで、通貨の量 (base_currency_input) と通貨 (base_currency) をバックエンドに送ります。

レスポンスとして、すべての通貨のリストと対応する値を受け取ります。

<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8" />

 <link rel="icon" type="image/svg+xml" href="favicon.svg" />

 <meta name="viewport" content="width=device-width, initial-scale=1.0" />

 <title>Currency converter example</title>

</head>

<body class="bg-gradient-to-b from-cyan-800 to-slate-800 min-h-screen py-5">

 <form id="currency_converter" class="mx-auto w-full max-w-sm bg-white shadow rounded-md p-5 space-y-3 text-sm">

   <div class="flex items-center space-x-5">

     <label for="base_currency_input">Amount:</label>

     <input type="tel" id="base_currency_input" name="base_currency_input" placeholder="1" value=""

       class="grow border-slate-300 border rounded-md py-2 px-4 text-sm" required />

   </div>

   <div class="flex items-center space-x-5">

     <label for="currency">Currency:</label>

     <select name="currency" id="currency"

       class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">

       <option selected value="USD">USD</option>

       <option value="EUR">EUR</option>

       <option value="CHF">CHF</option>

     </select>

   </div>

   <button type="submit" class="bg-slate-800 text-white rounded-md py-2 px-4 mx-auto relative block w-full">Convert

   </button>

 </form>

 <div id="result"

   class="mx-auto my-5 w-full max-w-sm bg-white shadow rounded-md relative overflow-hidden text-sm empty:hidden divide-y divide-dotted divide-slate-300">

 </div>

 <script type="module" src="/main.js"></script>

</body>

</html>

ステップ6: バックエンドアプリケーションの準備

カレンシーコンバーター」フォルダーの中に、「backend-application」フォルダーを作成します。

注意: このコマンドはmacOS/Linuxで有効ですが、Windowsではこちらをご覧ください。

import './style.css'

const currencyConverter = document.getElementById('currency_converter');

const baseCurrencyInput = document.getElementById('base_currency_input');

const baseCurrency = document.getElementById('currency');

const resultContainer = document.getElementById('result');

currencyConverter.addEventListener('submit', (e) => {

 e.preventDefault();

 fetch(`http://localhost:6001/convert?` + new URLSearchParams({ 'base_currency_input': baseCurrencyInput.value, 'currency': baseCurrency.value }))

   .then(response => response.json())

   .then(data => {

     var result = '<div class="space-y-1 px-5 py-3 border-2 rounded-md">';

     for (let entry of data) {

       result += `<div class="flex items-baseline justify-between"><span class="font-medium">${entry.code}:</span><span>${entry.value}</span></div>`;

     }

     resultContainer.innerHTML = result;

   });
});

ステップ7：バックエンドアプリの作成

最後のステップでは、main.pyという新しいファイルを追加するだけです。

mkdir backend-application
cd backend-application
python3 –m venv venv
. venv/bin/activate
pip install Flask currencyapicom

いくつかの簡単なコマンドで、アプリケーションを実行できます（他のアプリケーションとの競合を避けるために、ポートを6001にバインドしています）。

from flask import Flask, request, jsonify

from currencyapicom import Client

from config import CURRENCYAPI_KEY

app = Flask(__name__)

@app.route("/convert", methods=['GET'])

def convert():

   currency_input = request.args.get('base_currency_input', '')

   currency = request.args.get('currency', 'USD')

   if currency_input and currency in ['USD', 'EUR', 'CHF']:

       api_client = Client(CURRENCYAPI_KEY)

       response = api_client.latest(currency)

       response = jsonify([{'value': response['data'][x]['value'] * float(currency_input), 'code': x} for x in response['data'].keys()])

       response.headers.add("Access-Control-Allow-Origin", "*")

       return response

最後のステップでは、currencyapi.com の API キーを含む config.py ファイルを作成する必要があります。

APIキーは無料で入手でき、ドキュメントでAPIについて詳しく知ることができます。

以上です。