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のコーディングを行っていきましょう!