Requests + Bootstrap で楽天APIからHTMLページを作る
Pythonでrequestsモジュールを使えば、楽天APIを手軽に扱えることがわかったので、戻ってきたJSONデータからHTMLファイルを作って画面を表示させてみる。表示させる画面のHTMLは、cssフレームワークのBootstrapを利用して、これまたお手軽に作ってみた。
つい最近までcssフレームワークという言葉は知らなかった。このところのマンネリ化を打破するために「Webサービスのつくり方」という本を買って読んでいたら、サイトの見栄えをよくするためのcssフレームワークの利用について書いてあった。こういう便利なものを使えば、ほとんどcssを書かずにページをお手軽に作成できることを知った。この本は技術を奥深く説明するというより、「こんなことやってサイト作ってますよ」というスタンスでエッセー風に書いてあるので読みやすい。
楽天ウェブサービスAPI
APIは前回同様に楽天ウェブサービス: 楽天商品検索API(version:2014-02-22) | API一覧を使う。
APIを叩いて戻ってきたJSON形式のレスポンスから、検索結果の商品名(itemName)、商品価格(itemPrice)、商品画像128x128URL(mediumImageUrls)を取得してHTMLを作る。JSONで得られたデータの文字コードはUNICODEになっているので忘れずにUTF-8に変換する。商品画像はリストで最大３枚を得られるが最初の画像URLを使うことにする。
Bootstrap
BootstrapはGetting started – BootstrapからBootstrapをダウンロードする。解凍するとbootstrap-3.2.0-distフォルダが作られて、css、fonts、jsのフォルダが出来ている。この３つをこれから作るHTMLファイルを置いておくWEBサーバのディレクトリにコピーしておく。
cssフレームワークという考え方や、cssで使われる言葉の意味がよくわからなかったので下記の本を読んだ。AmazonのカスタマーレビューなどではBootstrap本家の説明を読めば十分だという意見もあったのだが、薄い本でさくっと読めて、グリッド、モバイルファーストなどという言葉も理解できて僕にとっては良かった。
実験環境
- ThinkPad X200
- Windows7 Professional 64bit
- Python 2.7.3
- さくらのレンタルサーバ（スタンダード）
プログラム
# -*- coding: utf-8 -*-
import requests
html = '''<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>rakuten web service</title>
<link href="./css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="container">
<div class="row">
<div class="col col-md-12">
<h1>楽天ウェブサービスのテスト</h1>
</div>
</div>
<!-- 商品開始 -->
%s
<!-- 商品終了 -->
<div class="row">
<div class="col col-md-12">
<p>© 2013 bty備忘録 All rights reserved</p>
</div>
</div>
</div>
<!-- /container -->
<script src="http://code.jquery.com/jquery.js"></script>
<script src="./js/bootstrap.min.js"></script>
</body>
</html>'''
def make_html(items):
hitems = []
for i in items:
hitem = [
'<div class="col col-md-3"><div class="well">',
'<p>%s</p>' % i['name'],
'<p>%s yen</p>' % i['price'],
'<img src="%s">' % i['imgurl'],
'</div></div>']
hitems.append('\n'.join(hitem))
nitems = len(items)
nrow = nitems / 4
if nitems % 4: nrow += 1
#print nitems, nrow
hrows = []
for n in range(nrow):
hrow = ['<div class="row">']
for i in range(4):
nitem = n * 4 + i
#print nitem
if nitem >= nitems: break
hrow.append(hitems[nitem])
hrow.append('</div>')
hrows.append('\n'.join(hrow))
return html % '\n'.join(hrows)
def search():
url = 'https://app.rakuten.co.jp/services/api/IchibaItem/Search/20140222'
payload = {
'applicationId': [アプリID],
'keyword': 'ラジオ',
'hits': 30,
#'sort': '+itemPrice',
}
r = requests.get(url, params=payload)
resp = r.json()
items = []
for i in resp['Items']:
h = {}
item = i['Item']
h['name'] = item['itemName'].encode('utf8')
h['price'] = item['itemPrice']
h['imgurl'] = item['mediumImageUrls'][0]['imageUrl'].encode('utf8')
items.append(h)
return items
if __name__ == '__main__':
items = search()
html = make_html(items)
print html
プログラムを実行するとHTMLが表示されるので、たとえばtest1.htmlという名前でリダイレクトしてファイルに保存し、WinSCPなどで自分のサイトに転送すれば完成する。転送先のディレクトリにはBootstrapのcss、fonts、jsのフォルダがある。
作成したHTMLページ
http://bty.sakura.ne.jp/raku/test1.html
