はじめに
この記事では、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アプリケーションの作成が完了です。もし追加機能やデザイン改善のアイデアがあれば、ぜひ試してみてください！