Bootstrapでアプリの見た目を作ろう
Bootstrapで、見た目を作る
さて、Bootstrapでひな形を作ったところで、さっそく見た目の部分を作成していこうと思います。最終的な画面としては、このような画面を創っていきます。
このチュートリアルでは、HTML / CSSのマークアップについては詳しく解説しません。
ですので、HTML, CSS, Bootstrapについてはコピペで問題ありません。
さきに、完成形のindex.htmlをお見せしようと思います。そこから、細かく解説していきます。今は理解できなくてもよいので、コード全体でどのような処理をしているのかざっとみてみましょう。
templates/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrapの基本テンプレート</title>
<!-- ここがBootstrapのCDN -->
<!-- <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"> -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<!-- ここにstylesheetを追加 -->
<link rel="stylesheet" href="/static/css/style.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>;;
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>;;
<![endif]-->
</head>
<body class="bg-gray">
<main>
<div class="container">
<!-- 検索フォーム -->
<div class="row">
<div class="col-md-12 p-2">
<h1><a href="/" class="no-decoration">Toptweets</a></h1>
<p>ツイッターのIDを入れると、直近のいいね数とリツイート数、最もリツイートされたツイートが一覧できます。</p>
<form class="form-inline" method="post">
<div class="form-group">
<label class="sr-only" for="screen_name"></label>
<div class="input-group mb-3">
<span class="input-group-text">@</span>
<input id="screen_name" name="screen_name" placeholder="ここにツイッターのIDを入力してください。" type="text" class="form-control">
</div>
<button type="submit" class="btn btn-primary">取得する</button>
</div>
</form>
</div><!-- col-md-12 -->
</div><!-- row -->
{% if profile %}
<!-- chart -->
<div class="row mb-3">
<div class="col-md-12">
<h2 class="mb-3">{{profile.screen_name}}さんの最近の投稿パフォーマンス</h2>
<canvas id="chart"></canvas>
</div>
</div><!-- row -->
{% endif %}
{% if profile %}
<div class="row">
<!-- プロフィール -->
<div class="col-md-4">
<div class="bg-white p-5">
<div class="pb-3 border-bottom">
<img src="{{profile.image}}" width="100px">
<a href="https://twitter.com/{{profile.screen_name}}">@{{profile.screen_name}}</a>
<div class="pt-3">{{profile.description}}</div>
</div>
<div class="pt-3">
{% for index, row in grouped_df.iterrows() %}
<div>{{index}}
<span class="float-end">
<i class="fas fa-retweet" style="color: limegreen;"></i>{{row["retweets"]}}
<i class="fa fa-heart pr-2" style="color: hotpink;"></i> {{row["fav"]}}
</span>
</div>
{% endfor %}
</div>
</div>
</div><!-- col-md-4 -->
<!-- ツイート一覧 -->
<div class="col-md-8">
<h2 class="mb-3">もっともリツイート・いいねされたツイート</h2>
{% for index, row in sorted_df.iterrows() %}
<div class="bg-white p-3 border-bottom mb-3">
<div>{{row["created_at"]}}</div>
<div class="tweet-text">{{row["text"]}}</div>
<div class="">
<i class="fas fa-retweet" style="color: limegreen;"></i><span class="pr-2">{{ row["retweets"] }}</span>
<i class="fa fa-heart" style="color: hotpink;"></i><span class="pr-2">{{ row["fav"] }}</span>
</div>
</div>
{% endfor %}
{% endif %}
</div><!-- col-md-8 -->
</div><!-- row -->
</div><!-- container -->
<! -- ここがBootstrapのCDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
<!-- chartjs -->
<script>
{% if profile %}
// bar chart data
var barData = {
labels : [{% for index, row in tweets_df.sort_values(by="created_at", ascending=True).iterrows() %}
"{{row['created_at']}}",
{% endfor %}],
datasets : [
{
label: "リツイート数",
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255,99,132,1)',
borderWidth:10,
bezierCurve : false,
data : [{% for index, row in tweets_df.sort_values(by="created_at", ascending=True).iterrows() %}
{{row["retweets"]}},
{% endfor %}]
},{
label: "いいね数",
data : [{% for index, row in tweets_df.sort_values(by="created_at", ascending=True).iterrows() %}
{{row["fav"]}},
{% endfor %}],
type: 'line',
borderColor: 'rgb(63, 127, 191)',
}
]
}
// draw bar chart
var mychart = document.getElementById("chart");
var chart = new Chart(mychart, {
type:'bar',
data:barData,
options: {
scales: {
yAxes: [
{
ticks: {
beginAtZero: true,
min: 0,
}
}
]
}
}
});
{% endif %}
</script>
</main>
</body>
</html>
static/css/style.css
.bg-gray{
background-color:#e6ecf0;
}
.bg-white{
background-color:#ffffff;
}
.no-decoration{
text-decoration: none;
}
それではさっそくPythonのコーディングを行っていきましょう！