paloma blog

NWエンジニアやってます。主に自宅環境のお遊びを書きます。Pythonもちょっと。タイトルは好きなカクテルから。

カーセンサーAPIを使って取得結果をHTMLで表示してみる

早いものでもう10月になってしまいました。

先月末にキャンプに行ったのですが、遠出するとマイカーが欲しくなります。
私は千葉に住んでいて普段は電車移動なのでいつもレンタカー借りていくんですが、
返却の時間とか気にしないといけないので自分の車があるといいですよね。

中古車サイトなんか見るのが好きなんですが、APIとか提供されてないかなと思い調べてみたらカーセンサーAPIというものを見つけました。

http://www.carsensorlab.net/webservice/files/webapidoc_ver2.2.pdf

というわけでこのAPIを使ってさくっと探せないかなーということでAPIを使った検索をやってみます。
取るだけだとつまらないので、ブラウザで見れるように連携も行います。
HTMLの勉強もしたいので。

やること

  • APIで中古車情報を取得する
  • 取得した方法をブラウザで表示する

やらないこと

やらなきゃいけないことは死ぬほどあると思いますが、今回は上記の機能確認のみするので、下記のことはやりません。
(技術的にも作れない…)

  • 検索機能
  • 条件機能
    • 簡単な条件はつけますが、POST系の実装は今回作りません。
  • ページング
    • 検索系には必須だと思いますが、ロジックがわかりません…

環境

サブ機のUbuntu18.04で動かしてみます。

masashi@PC-ubuntu:~$ lsb_release -a
No LSB modules are available.
Distributor ID: Ubuntu
Description:    Ubuntu 18.04.1 LTS
Release:    18.04
Codename:   bionic

プログラミング言語はPythonをやり続けてきたので今回もPythonでやります。
Webの部分はFlaskを使います。
Djangoは多機能すぎるので私にはまだ早そう。

venv(python3)で作った環境です。

(carsearch) masashi@PC-ubuntu:~/carsearch/app$ python --version
Python 3.6.5
(carsearch) masashi@PC-ubuntu:~/carsearch/app$ 
(carsearch) masashi@PC-ubuntu:~/carsearch/app$ pip list
# 抜粋
beautifulsoup4 (4.6.3)
Flask (1.0.2)
Flask-Bootstrap (3.3.7.1)
Jinja2 (2.10)
lxml (4.2.5)

使用パッケージの詳細

  • 検索処理

    • requests
    • Beautifulsoup
      • レスポンスはxmlで返ってくるので使い慣れているBeautifulsoupでパースします。
      • リファレンス上にはjsonも使えると書いてあったのですが、返ってこないのでxmlで進めます
    • lxml
      • xmlをパースするには必要? インポートしないとパースエラーになりました

  • 表示部分

    • Flask
      • HTMLの仕組みを理解するためスクラッチで作るつもりでFlaskを使います。
    • Bootstrap
      • 1人だとCSSまでは手が回らないので利用します。
      • サーバ側にファイル置かなくていいCDN版もあるみたいです(知らなかった)
      • Flask内で書けるflask-bootstrapというライブラリを使います

構成

├── app.py
├── carsearch.py
├── requests.txt
└── templates
    └── index.html

app.py

  • Flaskの実行部分
    • よく見るtutorial的な書き方です
    • carsearch.pyをインポートして取得結果をindex.htmlに渡します
(carsearch) masashi@PC-ubuntu:~/carsearch/app$ cat app.py 
from flask import Flask, render_template
from flask_bootstrap import Bootstrap
from carsearch import CarSearch

app = Flask(__name__)
bootstrap = Bootstrap(app)


@app.route('/')
def index():
    # CarSearch()
    return render_template('index.html', S=CarSearch())

if __name__ == '__main__':
    app.run(debug=True)

carsearch.py

  • API取得部分
    • 簡単な条件を入れています。(千葉県、20個取得、100万円以下)
    • これもBeautifulSoupのtutorialな書き方です
(carsearch) masashi@PC-ubuntu:~/carsearch/app$ cat carsearch.py 
import requests
from bs4 import BeautifulSoup
import lxml

URL = 'http://www.carsensorlab.net/webapi/V2/usedCarSearch/'

# car conditions
condition = {
    'area': 'chiba',
    'count': 20,
    'price': ';1000000'
    }

def CarSearch():
    r = requests.get(URL, params=condition)
    soup = BeautifulSoup(r.text, 'xml')
    return soup

requests.txt

  • パッケージファイル
    • あとでどこかにデプロイしたくなったときのために書いておきます
(carsearch) masashi@PC-ubuntu:~/carsearch/app$ cat requests.txt 
requests
bs4
lxml
flask
flask-bootstrap

index.html

(carsearch) masashi@PC-ubuntu:~/carsearch/app$ cat templates/index.html 
{% extends "bootstrap/base.html" %}

{% block title %}UsedCar Search{% endblock %}

{% block content %}
<div class="container">
    <div class="page-header">
    <h1>Hello World!</h1>
    </div>
</div>

<!-- 県 -->
<h1>{{ S.find('Prefecture').text }}</h1>

<!-- 車出力 -->
<div class="container">
  <div class="row">
      {% for a in S.select('UsedCar') %}
            <div class="col-md-4">
               <div class="panel panel-default">
                メーカー: {{ a.Brand.text }} 車種: {{ a.Model.text }} </br>価格: {{ a.Price.text }} </br>
                {{ a.Meter.text }} {{ a.Color.text }}  </br>
                <img src="{{ a.ImageSUrl.text }}"></br>
                <a href="{{ a.DetailURL.text }}">{{ a.DetailURL.text }}</a>
               </div>
            </div>
      {% endfor %}
    </div>
</div>

{% endblock %}

アクセスしてみます

  • Flask起動
(carsearch) masashi@PC-ubuntu:~/carsearch/app$ python app.py 
 * Serving Flask app "app" (lazy loading)
 * Environment: production
   WARNING: Do not use the development server in a production environment.
   Use a production WSGI server instead.
 * Debug mode: on
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 211-547-104
  • アクセス

f:id:paloma69:20181013163051p:plain

なんかそれっぽい感じに表示されました！
メーカ指定しないとレクサスが最初に取得されるようですね。

感想

Bootstrapに頼ってはいますが、しっかりとしたHTMLまで自分で書いたのは初めてだと思います。
頭の中ではレイアウトはできているんですが、いざ実装しようとするとかなり難しいですね。
デザインもそうですが、アプリケーションと連携しようとするとコードが混乱します。

私は本業はNWエンジニアのため、仕事でHTMLを書くことは無いのですが、
Webアプリの仕事してる人はさくっと書けちゃうんでしょうか。

でもこういう見えるものを作るのはすごく楽しいですね。
NW機器はEnd-Endの環境が揃うか、キャプチャでもしないと実際の動きは見えないので。

これを基礎に特定条件専用の中古車検索サイトでも作って公開してみようと思います。
(いつかできたらね)