bottleで作るTwitter検索用クライアント

bottleはとりあえず触ってやってみると意外と楽だな、簡単だな。
というのが実感できるフレームワークだと思います。

やはり簡単でそれなりに作った気になるためにもAPIを使うのがいいと思います。

今回はbottleを使ってTwitterの検索クライアントを作ってみます。

```index.py

#!/user/bin/env python
# -*- coding: utf-8 -*-
from bottle import route, run, template, request, static_file, url, get, post, response, error
from requests_oauthlib import OAuth1Session
import json
import sys, codecs
sys.stdout = codecs.getwriter("utf-8")(sys.stdout)

@route("/")
def html_index():
	return template("index")

@route("/static/<filepath:path>", name="static_file")
def static(filepath):	
	return static_file(filepath, root="./static")


@route("/show", method="GET")
def search_twitter():
	
	search_words = request.query.search_words
	
	C_KEY = "*****************************"
	C_SECRET = "*****************************"
	A_KEY = "*****************************"
	A_SECRET = "*****************************"

	url = "https://api.twitter.com/1.1/search/tweets.json?"
	
	params = {
			"q": (search_words, "utf-8"),
			"lang": "ja",
			"result_type": "mixed",
			"count": "100"
			}		
	tw = OAuth1Session(C_KEY,C_SECRET,A_KEY,A_SECRET)
	req = tw.get(url, params = params)
	tweets = json.loads(req.text)
	
	if req.status_code == 200:
		for tweet in tweets["statuses"]:
			created_at = (tweet["created_at"])
			User = (tweet["user"]["screen_name"].encode("utf-8"))
			U_Name = (tweet["user"]["name"].encode("utf-8"))
			U_img = (tweet["user"]["profile_image_url"])
			Text = (tweet["text"].encode("utf-8"))
			
	return template("show", 
				Text=Text, 
				User=User, 
				U_Name=U_Name,
				U_img=U_img, 
				created_at=created_at,
				url=url
				)	
run(host="localhost", port=8000, debug=True, reloader=True)
```

次にviewsフォルダの中にindex.html と　show.htmlというファイルを作ります。

```index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link href="../static/css/style.css" type="text/css" rel="stylesheet" />
<title>Twitter TL</title>
</head>

<body>



<div id="content">

<div class="area">
<form method="GET" action="/show">
<p>Twitter 検索: <input type="text" name="search_words"> <input type="submit" value="送信する"></p>
</form>
</div><!-- area -->

</div><!-- content -->


</body>

</html>
```

```show.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link href="../static/css/style.css" type="text/css" rel="stylesheet" />
<title>Twitter TL</title>
</head>

<body>



<div id="content">

<div class="area">

<p><img src="{{U_img}}"></p>
<p>{{User}}:{{U_Name}}</p>
<p>TEXT: {{Text}}</p>
<p>{{created_at}}</p>

<p><input type="button" value="このページを再読込" onclick="location.reload();" /></p>

</div><!-- area -->

</div><!-- content -->


</body>

</html>
```

これだけでは悲しくなるのでCSSは　staticフォルダをviewsフォルダと同じ階層に作って/CSSフォルダけ入れ込みます。

```style.css
@charset "UTF-8";

* {
margin: 0;
padding: 0;
}

body {
margin:0;
padding:0;
}


#content {
margin-right:auto; 
margin-left:auto;
width:800px;
}

.area{
margin: 80px 0 0 0;
}


ul li {
list-style:none;
margin:0;
padding:0;
}

input[type=text]{
   border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   -o-border-radius: 5px;
   -ms-border-radius: 5px;
   border:#a9a9a9 1px solid;
   -moz-box-shadow: inset 0 0 5px rgba(0,0,0,0.2),0 0 2px rgba(0,0,0,0.3);
   -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2),0 0 2px rgba(0,0,0,0.3);
   box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2),0 0 2px rgba(0,0,0,0.3);
   width:50%;
   height:30px;
   padding:0 3px;
}

input[type=text]:focus {
   border:solid 1px #20b2aa;
}

input[type=text], select { 
   outline: none;
}

input[type=submit]{
   border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   -o-border-radius: 5px;
   -ms-border-radius: 5px;
   border:#a9a9a9 1px solid;
   -moz-box-shadow: inset 0 0 5px rgba(0,0,0,0.2),0 0 2px rgba(0,0,0,0.3);
   -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2),0 0 2px rgba(0,0,0,0.3);
   box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2),0 0 2px rgba(0,0,0,0.3);
   width:100px;
   margin-left:auto;
   margin-right:auto;
   height:40px;
   padding:0 3px;
   cursor:pointer;
   color:#333;
   font-weight:bold;
   background:#f5f5f5;
   text-shadow:1px 1px 0px #fff;
   text-align:center;
}

input[type=button]{
   border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   -o-border-radius: 5px;
   -ms-border-radius: 5px;
   border:#a9a9a9 1px solid;
   -moz-box-shadow: inset 0 0 5px rgba(0,0,0,0.2),0 0 2px rgba(0,0,0,0.3);
   -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2),0 0 2px rgba(0,0,0,0.3);
   box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2),0 0 2px rgba(0,0,0,0.3);
   width:150px;
   margin-left:auto;
   margin-right:auto;
   height:40px;
   padding:0 3px;
   cursor:pointer;
   color:#333;
   font-weight:bold;
   background:#f5f5f5;
   text-shadow:1px 1px 0px #fff;
   text-align:center;
}
```

これでindex.pyを動かせばTwitterからツイートの検索ができます。show.html内に　% for~で書いてやれば、取得したツイートを全数表示できます。