Flickr APIからデータを取得し、PythonオブジェクトとYAMLファイルに変換するスクリプトをWebアプリケーション化する方法について説明します。WebフレームワークとしてFlaskを使用し、フロントエンドとの通信にAjaxを利用します。
1. **システムアーキテクチャ**
このアプリケーションは3層構造で構成されます：
- データ取得層（Flickr API）
- 処理層（Pythonバックエンド）
- 表示層（HTMLフロントエンド）
2. **技術スタック**
主な使用技術：
- バックエンド：Flaskフレームワーク
- フロントエンド：HTML5 + jQuery
- データ形式：JSON/YAML
3. **実装例**
バックエンド実装（Flaskアプリケーション）:
# server.py
from flask import Flask, jsonify, request
import yaml
import requests
web_app = Flask(__name__)
@web_app.route('/api/photos', methods=['GET'])
def fetch_photos():
api_endpoint = 'https://api.flickr.com/services/rest/'
params = {
'method': 'flickr.photos.search',
'api_key': 'YOUR_API_KEY',
'tags': request.args.get('keywords'),
'format': 'json',
'nojsoncallback': 1
}
api_response = requests.get(api_endpoint, params=params)
photo_list = api_response.json().get('photos', {}).get('photo', [])
with open('photo_data.yml', 'w') as output_file:
yaml.safe_dump(photo_list, output_file)
return jsonify({'status': 'success', 'count': len(photo_list)})
if __name__ == '__main__':
web_app.run(debug=True)
<!-- viewer.html -->
<!DOCTYPE html>
<html>
<head>
<title>写真ビューア</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function fetchPhotoData() {
const searchTerms = $('#search_input').val();
$.get('/api/photos', {keywords: searchTerms})
.done(function(data) {
$('#result_message').text(
`${data.count}件の写真を取得しました`
);
})
.fail(function() {
alert('データ取得に失敗しました');
});
}
</script>
</head>
<body>
<h1>Flickr写真検索</h1>
<input type="text" id="search_input" placeholder="検索キーワード">
<button onclick="fetchPhotoData()">検索</button>
<p id="result_message"></p>
</body>
</html>