Qiita APIを使って記事を表示するWebアプリケーションを作ろう【Python & Flask & Bootstrap】

# はじめに
この記事では、Qiita APIを使ってPythonで簡単なWebアプリケーションを作成し、Qiitaの記事を取得して表示する方法を紹介します。デザインにはBootstrapを使用して、モバイル対応の見た目も考慮しています。

## 目次
1. Qiita APIの準備
2. 必要なライブラリのインストール
3. Flaskアプリケーションの作成
4. Qiita APIから記事を取得
5. Bootstrapを使ったデザイン
6. 最終的なディレクトリ構成
7. 実行方法

---

## 画面イメージ
![スクリーンショット 2024-09-18 17.28.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75802/7603427e-324b-0206-6f7b-4d6456cc1646.png)


## 1. Qiita APIの準備

まず、Qiita APIを使うために、Qiitaからアクセストークンを取得する必要があります。

### アクセストークンの取得方法

1. [Qiita](https://qiita.com/) にログインします。
2. 設定ページに移動し、「アプリケーション」のセクションに進みます。
3. 「アクセストークンを生成」をクリックし、適切な権限を設定してトークンを生成します。

生成したトークンを後ほど使用しますので、メモしておいてください。

---

## 2. 必要なライブラリのインストール

次に、必要なライブラリをインストールします。Pythonのパッケージ管理ツール`pip`を使います。今回は`Flask`と`requests`を使用します。

```bash
pip install Flask requests
```

FlaskはPythonの軽量Webフレームワークで、requestsはHTTPリクエストを送るために使用します。

---

## 3. Flaskアプリケーションの作成

次に、Flaskアプリケーションを作成します。基本的なファイルとして`app.py`を作成します。

```python
from flask import Flask, render_template
import requests

app = Flask(__name__)

QIITA_TOKEN = 'あなたのQiita APIトークン'
headers = {
    'Authorization': f'Bearer {QIITA_TOKEN}',
}

def get_qiita_articles(tag, page=1, per_page=10):
    url = f'https://qiita.com/api/v2/items'
    params = {
        'page': page,
        'per_page': per_page,
        'query': f'tag:{tag}'
    }
    response = requests.get(url, headers=headers, params=params)
    if response.status_code == 200:
        return response.json()
    else:
        return []

@app.route('/')
def index():
    tag = 'Python'  # ここでQiitaのタグを指定
    articles = get_qiita_articles(tag)
    return render_template('index.html', articles=articles)

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

### ポイント
- `get_qiita_articles`関数で、Qiita APIから特定のタグ（この例では`Python`タグ）に関連する記事を取得します。
- アクセストークンをリクエストヘッダーに設定して、Qiita APIを認証します。
- `render_template`を使って、取得した記事をHTMLで表示します。

---

## 4. Qiita APIから記事を取得

`get_qiita_articles`関数でQiita APIを呼び出し、指定したタグの記事を取得します。この例では、1ページ目に表示される10件の記事を取得するようにしています。

```python
def get_qiita_articles(tag, page=1, per_page=10):
    url = f'https://qiita.com/api/v2/items'
    params = {
        'page': page,
        'per_page': per_page,
        'query': f'tag:{tag}'
    }
    response = requests.get(url, headers=headers, params=params)
    if response.status_code == 200:
        return response.json()
    else:
        return []
```

取得したデータはJSON形式で返されるので、それをリストとして扱い、記事タイトルやURLを表示します。

---

## 5. Bootstrapを使ったデザイン

より見やすいデザインにするために、[Bootstrap](https://getbootstrap.com/) を使います。以下は、Qiitaの記事をカード形式で表示するための`index.html`テンプレートです。

### `index.html`

```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Qiita記事一覧</title>
    <!-- BootstrapのCSSを読み込む -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light">
    <div class="container">
        <h1 class="my-4 text-center">Qiita記事一覧</h1>
        <div class="row">
            {% for article in articles %}
            <div class="col-md-4">
                <div class="card mb-4 shadow-sm">
                    <div class="card-body">
                        <h5 class="card-title">{{ article['title'] }}</h5>
                        <a href="{{ article['url'] }}" class="btn btn-primary" target="_blank">記事を読む</a>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
    <!-- BootstrapのJavaScriptを読み込む -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
```

### ポイント
- `col-md-4`を使って、デスクトップでは3カラム表示、モバイルでは1カラムに自動でレイアウトされます。
- カードデザインを使って、記事ごとに独立したスタイリングが適用され、見た目が洗練されます。

---

## 6. 最終的なディレクトリ構成

プロジェクトのディレクトリ構成は次のようになります。

```
/qiita-app
├── app.py               # Flaskアプリケーション
├── templates            # HTMLテンプレートディレクトリ
│   └── index.html       # Qiitaの記事一覧を表示するHTMLファイル
└── requirements.txt     # 必要なライブラリリスト
```

### `requirements.txt`

```txt
Flask
requests
```

`requirements.txt`を使って、次のコマンドで必要なライブラリを一括インストールできます。

```bash
pip install -r requirements.txt
```

---

## 7. 実行方法

次に、Flaskアプリケーションを起動します。

```bash
python app.py
```

ブラウザで`http://localhost:5000`にアクセスすると、QiitaのPythonタグの記事がカード形式で表示されます。

---

これで、Qiita APIを使った簡単なWebアプリケーションの作成が完了です。もし追加機能やデザイン改善のアイデアがあれば、ぜひ試してみてください！

---