はじめに

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

目次

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

画面イメージ

1. Qiita APIの準備

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

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

Qiita にログインします。
設定ページに移動し、「アプリケーション」のセクションに進みます。
「アクセストークンを生成」をクリックし、適切な権限を設定してトークンを生成します。

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

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

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

pip install Flask requests

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

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

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

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件の記事を取得するようにしています。

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 を使います。以下は、Qiitaの記事をカード形式で表示するためのindex.htmlテンプレートです。

`index.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`

Flask
requests

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

pip install -r requirements.txt

7. 実行方法

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

python app.py

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

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