2021/01/24

Cryptoの価格表示Websiteに対するデモ

第一回目に、Djangoの構成を大まか紹介しました。よく分かるように、Djangoを利用してデモとしてCrypto価格の表示をしていきましょう。

Cryptoの価格表示Websiteに対するデモ

1.環境設定

pythonを設定します。

アプリケーションを開発する前に、最初の必要なステップは環境設定となります。
最初にはpythonを設定する必要です。https://www.python.org/に移動し、皆さんのOSに適当なPythonバージョンをダウンロードし、インストールしてください。Pythonの設定が完了した後、

ターミナルを開けて、バージョンをチェックする。

$ python

Python 3.6.5 :: Anaconda, Inc.

$

pythonにて pip freeze のコマンドで設定済の モデルをチェックできます。

$ pip freeze

certifi==2019.3.9

chardet==3.0.4

Django==2.0.6

idna==2.8

pytz==2019.1

requests==2.22.0

urllib3==1.25.3

$

次は以下のコマンドでvirtualenv ツールを設定します。

 

$ pip install virtualenv

virtualenv はpython プロジェクト作成するツールです。

プロジェクトフォルダを作成します。

$ mkdir django-projects

$ cd django-projects/

django-projectsのプロジェクトフォルダ名を作成し、作成したフォルダに遷移する。

以下のコマンドでプロジェクトの環境を設定します。

$ virtualenv .

上記のコマンドを実行した後、django-projectsフォルダに以下のいくつ環境フォルダーが生成されています。

├── django-project

    ├── bin

    ├── include

    └── lib

以下のコマンドで環境をスタートします。

$ . bin/activate

その他、以下のコマンドで環境がシャットダウンできます。

$ deactivate

Djangoを設定します。

Djangoを最終バージョンで設定したい場合、以下のコマンドで実行します。

$ pip install django

Djangoをデフォルトのバージョンで設定したい場合、設定したいバージョン番号を付ける以下のコマンドを実行してください。

$ pip install django==2.0.6

プロジェクトを設定します。

次に、以下のコマンドでDjangoでプロジェクトを作成しましょう。

$ django-admin.py startproject mysite

作成が完了した後、以下のフォルダが存在しています。

├── django-project

    ├── bin

    ├── include

    ├── lib

    └── mysite                  ← mysiteプロジェクトフォルダ

        ├── db.sqlite3

        ├── manage.py

        └── mysite              ← mysiteアプリフォルダ

            ├── __init__.py

            ├── __pycache__

            │   ├── __init__.cpython-36.pyc

            │   ├── settings.cpython-36.pyc

            │   ├── urls.cpython-36.pyc

            │   └── wsgi.cpython-36.pyc

            ├── settings.py

            ├── urls.py

            └── wsgi.py

mysiteプロジェクトにてDjangoがプロジェクト名(mysite)と同じアプリ名で基本のWebアプリケーションを自動的に作成してくれます。上記で述べたの通りに、Djangoがプロジェクト名にあまり気にしない為、アプリ名と間違えないようにそのプロジェクト名が変更できます。ここでは私はそのままで変更しません。

次は、プロジェクトを実行して見てくださいね。

# mysiteプロジェクトに移動する

$ cd mysite

$ python manage.py runserver

ブラウザーを開けて、アドレスバーにhttp://localhost:8000/を入力した後、以下のような基本的なウエブサイトが見えます。

ウエブサイトが正常に動いているようです。しかし、テミナールウインドウズを見てください。もしYou have 14 unapplied migration(s).,という警告メッセージが出る場合、以下のステップを実施する必要です。
以下の警告が出ます。

Ctr+Cボタンを押下して、閉じます。それから、以下のコマンドを実行します。

 

# mysiteプロジェクトフォルダに遷移する。

$ cd mysite

 

# migrateコマンドを実行する。

$ python manage.py migrate

 

# プロジェクトを再度スタートする。

$ python manage.py runserver

プロジェクトを再度スタートした後、上記のメッセージが見えなくなります。

Cryptoアプリケーションをを作成します。

mysiteプロジェクトフォルダに遷移し、以下のコマンドでCryptoアプリケーションをを作成します。

# mysiteプロジェクトフォルダに遷移する。

$ cd mysite

$ python manage.py startapp crypto

作成した後、フォルダの構成は以下のようです。

├── django-project

    ├── bin

    ├── include

    ├── lib

    ├── crypto   ← cryptoアプリケーションが作成された。

    └── mysite

cryptoアプリケーションには以下のようなものがあります。

├── crypto

    ├── __init__.py

    ├── __pycache__

    ├── migrations

    ├── admin.py

    ├── apps.py

    ├── models.py

    ├── tests.py

    └── views.py

settings.pycryptoアプリケーションを宣言します。

新規アプリケーションを作成した後、settings.py でDjangoと自分のアプリケーション名を宣言します。

# django-projects/mysite/mysite/settings.py

INSTALLED_APPS = [

    ‘django.contrib.admin’,

    ‘django.contrib.auth’,

    ‘django.contrib.contenttypes’,

    ‘django.contrib.sessions’,

    ‘django.contrib.messages’,

    ‘django.contrib.staticfiles’,

    ‘crypto’,    # ← cryptoアプリケーション名が追加された。

]

urlsのパスを宣言します。

現在、アドレスバーにhttp://localhost:8000/を入力した後、Djangoがmysite アプリケーションからデータを読み込んで、画面に表示します。では、どのようにDjangoがmysite アプリケーションに遷移せずに、crypto アプリケーションに移動させられるでしょうか。

まず、以下のようにcrypto フォルダにてurls.pyファイルを作成する必要です。

# django-projects/mysite/crypto/urls.py

 

from django.urls import path

from . import views

 

urlpatterns = [

    # パスを空白の単一引用符()で宣言する場合,

    # それはルートurlhttp://localhost:8000/)という意味です。

    path(”, views.home, name=’home’),

   

    # もしhttp://localhost:8000/homeurlを入力したい場合

    # 以下のように宣言する必要です。:

    # path(‘home’, views.home, name=’home’),

]

path(”, views.home, name=’home’) について、具体的にどういう意味ですかを後で説明します。

次はmysite アプリケーションのurls.py に入り、以下のようにcrypto のurls.pyを宣言します。

# include関数をインポートする。

from django.urls import include

 

urlpatterns = [

    …

    # cryptourlsを宣言する。

    path(”, include(‘crypto.urls’))

]

cryptoのurlsのpath(”, views.home, name=’home’)定義というのは ブラウザーのアドレスバーに http://localhost:8000/を入力した後、 Djangoがそのパスを受けて、urlsファイルでどのviews がユーザのリクエストに該当し、処理するかを検索します。本ケースでは、views.py のhome()関数が対応します。

viewsを定義します。

views.pyのhome() 関数がcrypto価格一覧を表示することを指定した後、 views.py ファイルを開けて、以下のようにhome() 関数を定義してください。

# django-projects/mysite/crypto/views.py

 

from django.shortcuts import render

import requests

import json

 

def home(request):

 

    # crypto price Dataを取得する。

    price_request = requests.get(“https://min-api.cryptocompare.com/data/pricemultifull?fsyms=BTC,XRP&tsyms=USD,EUR”)

    price = json.loads(price_request.content)

 

    # 表示させる為に、templateにデータを渡す

    return render(request, ‘home.html’, {“price”: price})

Crypto価格の取得にてhttps://min-api.cryptocompare.com のサービスでクエリを実行します。本記事ではそのサービスのAPIsの利用を記載しませんが、全体的にそのサービスが簡単ですので、参照してみてください。

最初には、送信と返却値を取得する為に、requests とjsonの2モデルをインポートする必要です。表示するhtml テンプレートとテンプレート経由で価格データを渡す為のrender モデルをインポートします。

requests.get()関数は指摘アドレスにリクエストを作成する関数です。ここではBTC、XRP通貨の価格を取得する為のapis.アドレスを渡します。
json.loads() 関数はjson型式でpricesの返却データを受ける関数です。レンダーでは、表示するテンプレートをhome.htmlと指定します。

home.html はどのファイルで、どこに宣言するのでしょうか。

templates(テンプレート)を定義します。

Htmlファイルを宣言する為に、cryptoフォルダの直下に templatesというフォルダ名のフォルダを作成する必要です。templatesフォルダを作成した後、home.htmlファイルを作成する必要です。今回、フォルダの構成は以下のようです。

crypto

    │   ├── __init__.py

    │   ├── __pycache__

    │   ├── admin.py

    │   ├── apps.py

    │   ├── migrations

    │   ├── models.py

    │   ├── templates          ← 作成したtemplatesフォルダ

    │   │   ├── home.html      ← 作成したhome.htmlファイル

    │   ├── tests.py

    │   ├── urls.py

    │   └── views.py

 

ファイルを作成した後、以下のようにhome.html ファイルを定義してください。

<table class=”table table-striped”>

  <thead>

    <tr>

      <th scope=”col”>Name</th>

      <th scope=”col”>Price</th>

      <th scope=”col”>24h High</th>

      <th scope=”col”>24h Low</th>

      <th scope=”col”>Market Cap</th>

    </tr>

  </thead>

  <tbody>

    {% for key, value in price.DISPLAY.items %}

    <tr>

      <td>{{ key }}</td>

      <td>{{ value.USD.PRICE }}</td>

      <td>{{ value.USD.HIGHDAY }}</td>

      <td>{{ value.USD.LOWDAY }}</td>

      <td>{{ value.USD.MKTCAP }}</td>

    </tr>

    {% endfor %}

  </tbody>

  </table>

cryptoのApisが返すpriceのjson 構成で、price.DISPLAY.itemsを使用して Cryptoの価格一覧をクエリします。.

price.DISPLAY.items は一覧となり、crytoのそれぞれの価格を表示する為に、 forのループを使用します。

ブラウザーをリロードしてみてください。以下のように表示されます。

上記のテーブルがきれいに表示されるのはBootstrapを利用するからです。基本的に価格一覧がそのようにループされ、表示されます。

以下のウエブサイトはDjandoで作成したデモのサイトです。詳細は私のソースコードを参照してください。

Github: https://github.com/lando110390/django_get_price_crypto

まとめ

Djangoがで書かれて、ほとんどウエブサイトを作成する為のフレームワークです。現在一般利用されているPHPで書いたフレームワークの他に、ウエブサイトを作成したい時、他の言語を学ぶ必要ではなく、DjangoがPythonプログラマーに対する1つの選びです。テンプレート関しては構成、コマンド、関数が現在のテンプレートと同じでありますので、このフレームワークにアプローチするのはあまり複雑ではないと思います。