Contents
アクセストークンの取得手順（API KEY/OAuth）
Unsplash APIを利用するためにアクセストークンの取得は必須です。このトークンは、リクエストの認証に使用されるため、適切な管理が求められます。
1. アプリケーション登録とClient ID/Secret Keyの取得
Unsplash Developersサイトでアプリケーションを登録し、Client IDとSecret Keyを取得します。OAuth認証ではこれらの情報が必要です。公式サイトの「Get Started」から手続きが可能です。
注意：Client IDとSecret Keyは機密情報であるため、リポジトリや公開環境に含まれないよう管理してください。
2. OAuth認証フローの基本手順
OAuth 2.0フローでアクセストークンを取得するには、以下のような手順が一般的です：
-
認可コードの取得
https://unsplash.com/oauth/authorize?client_id=XXX&redirect_uri=XXXにリダイレクトし、ユーザーが承諾すると認可コードが発行されます。 -
アクセストークンとリフレッシュトークンの交換
認可コードを使用して、https://api.unsplash.com/oauth/tokenにPOSTリクエストを送信します。以下のコマンド例をご覧ください：
|
1 2 3 4 5 6 |
curl -X POST "https://api.unsplash.com/oauth/token" \ -H "Authorization: Basic $(echo -n 'client_id:client_secret' | base64)" \ -d grant_type=authorization_code \ -d code=認可コード \ -d redirect_uri=リダイレクトURI |
3. トークン有効期限の管理とセキュリティ対策
発行されたアクセストークンは1時間の有効期間を持ち、リフレッシュトークンを使用して再取得可能です。PHPやReactアプリでは、トークンの保存方法に注意が必要です（例：ローカルストレージ、セッション）。
重要ポイント：
- アクセストークンは常にHTTPS経由で通信することを推奨します。
- リフレッシュトークンは厳密に保護し、アクセス権の過剰な拡散を防ぎましょう。
画像検索APIエンドポイントの使い方
Unsplash APIではGET /search/photosエンドポイントを使用して画像を検索できます。検索キーワードや絞り込み条件をクエリパラメータで指定可能です。
クエリパラメータの設定と例
| パラメータ | 説明 | 例 |
|---|---|---|
query |
検索キーワード（必須） | sunset |
page |
ページ番号 | 2 |
per_page |
1ページあたりの画像数 | 5 |
ページネーションとキャッシュ戦略
繰り返し同じ検索をするとパフォーマンスに影響が出るため、キャッシュの導入（例：Redis、ファイルキャッシュ）が有効です。
|
1 2 3 4 5 6 7 8 9 10 |
$perPage = 5; $page = isset($_GET['page']) ? (int)$_GET['page'] : 1; $url = "https://api.unsplash.com/search/photos?" . http_build_query([ 'query' => 'nature', 'page' => $page, 'per_page' => $perPage ]); |
セキュリティ警告：PHP例では
$_GETを直接使用しています。不正な入力やSQLインジェクションのリスクに注意し、入力を検証する処理（例：filter_var()）を追加してください。
レスポンスデータから画像URLを抽出する方法
Unsplash APIが返すJSONには、urlsフィールドにさまざまなサイズの画像URLが含まれています。それぞれの用途に応じた抽出方法を確認しましょう。
サムネイルとフルサイズURLの比較表
| URL種類 | 説明 | 使用例 |
|---|---|---|
raw |
拡張可能なベースURL（画像処理パラメータ追加可） | Imgix連携などに使用 |
full |
フルサイズのリンク（ブログ投稿向け） | <img src="https://unsplash.com/photos/123456789"> |
small |
低解像度画像（サムネイル用） | プレビュー表示に最適 |
JSON構造解析とエラーハンドリング
以下のJSON構造からデータを抽出できます：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
{ "results": [ { "id": "12345", "urls": { "raw": "...", "full": "...", "small": "..." } } ] } |
JavaScriptでのエラーハンドリング例は以下の通りです：
|
1 2 3 4 5 6 7 8 9 10 |
fetch(url) .then(res => { if (!res.ok) throw new Error('ネットワークエラー'); return res.json(); }) .then(data => { if (data.errors) console.error(data.errors); // 正常処理 }); |
ブログ記事への埋め込みコード実装例
画像URLを取得したら、HTMLやReactコンポーネントでブログへ埋め込みます。PHPでも動的に表示可能です。
HTMLでの直接埋め込み
|
1 2 |
<img src="https://images.unsplash.com/photo-123456789.jpg?ixlib=rb-4.0.3&w=800" alt="自然の風景"> |
Reactコンポーネントの作り方
画像データをAPIから取得し、<img>タグで表示する例です：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
function ImageGallery({ photos }) { return ( <div> {photos.map(photo => ( <div key={photo.id}> <img src={photo.urls.small} alt={photo.description || '画像'} /> </div> ))} </div> ); } |
PHPでの動的表示処理
|
1 2 3 4 |
foreach ($photos as $photo) { echo "<img src='{$photo['urls']['small']}' alt='{$photo['description']}'>"; } |
Unsplashとデザイナーとの連携の特徴
Unsplashは、デザイン業界との協力体制が整っているため、プロフェッショナルな画像素材を豊富に提供しています。以下がその主な特徴です。
-
プロ向けのライブラリ提供
デザイナーが撮影した高品質画像をすぐに公開・利用可能です。 -
商用利用の自由度
利用シーンや目的に関係なく、クリエイターが商用利用できます。 -
投稿者の追跡と認知向上
画像素材へのアクセス履歴を元に、撮影者に利益還元が可能です。
Imgixとの連携による画像最適化
Unsplash APIから取得したURLにImgixのパラメータを追加することで、ブログ表示時のロード速度や画質の最適化が可能になります。
リサイズ/品質調整の具体例
| パラメータ | 種類 | 作用 |
|---|---|---|
w |
数値型 | 幅指定（例：w=400） |
q |
数値型 | 品質調整（例：q=75） |
auto=format&lossless=true |
論理型 | 画像フォーマットの自動選択と無損失圧縮 |
Imgix利用時の注意点
- ライセンス条件：Imgixは有料ライセンスが必要な場合があります。導入前に公式サイトで確認してください。
- パフォーマンスリスク：Imgixが提供するCDNや画像処理に過度に依存すると、リソースの冗長化につながる可能性があります。
無料アカウント登録後の即時実装ガイド
Unsplash API無料アカウントを取得後、以下の手順でコードをコピー・貼り付けし、すぐに画像表示テストを行ってください。
1. コードのコピー・貼り付け手順
- Unsplash DevelopersからClient IDとSecret Keyを取得します。
- 上記で解説したPHPコードやReactコンポーネントをプロジェクトに反映させます。
2. エラー発生時のトラブルシューティング
- 401認証エラー：アクセストークンの有効期限切れまたは不正なトークン。
- 5xxサーバーエラー：Unsplash API側の障害（公式Twitterで確認）。
3. 実装後の確認ポイント
- ブログ記事内に画像が表示されているか
- クロスドメインリソース読み込みがブラウザで許可されているか
- ImgixパラメータがURLに正しく追加されているか
無料アカウント登録後、本文で紹介したコードを即実装してみてください。Unsplash APIはコストゼロかつ高品質な画像素材の活用に最適です。
