「Dribbble」や国産の「JAYPEG」等、クリエイターがポートフォリオをつくるWEBサービスがいくつかあります。
今回はAdobeが提供している「behance」のAPIを使いbehanceに登録したプロジェクト（作品）を自分のサイトに取り込む方法をご紹介します。
behance：https://www.behance.net/
まずbehanceについてはこちら
Behanceとは、クリエイターが自身の作品を数百万件以上公開しているソーシャルネットワークサービスです。カテゴリを越えた世界中のさまざまなクリエイティブプロフェッショナルが利用しているため、その業界のトレンドをキャッチアップでき、自ら発信することもできます。
behaneの特徴としてカバー画像（サムネイル）はきっちりトリミングしようというコンセプトもあり、縦横のサイズが決まっているのでレイアウトもしやすく、プロジェクト一覧を並べたとき、綺麗にまとまります。
ポートフォリオ管理にwordpressを入れるほどでもない場合は、かなりおすすめ。
大まかな流れ
- API KEYの取得
- プロジェクトのリスト取得（JSON）
- プロジェクトの個別情報取得（JSON）
- PHPでJSONをデコード
- 必要な情報を出力
API KEYの取得
behance developper(https://www.behance.net/dev)にアクセス
「Register Your App」のボタンを押して登録画面から
- Application Name
- Website
- Description
を入力。これでAPIが利用可能になりました。facebookに比べるとだいぶ簡単です。
プロジェクト情報の取得
Developer Console（https://www.behance.net/dev/api/console）
どんな情報が出力されるかシミュレーションできるコンソール
Serviceから「Get projects」を選択
- client_id にAPI KEYを入れて「Send」をクリック。
- 自分のプロジェクト一覧が表示されてば問題なし
- 出力されたURLをPHPにコピーする。
PHPでデコード、HTML出力
|
1 2 3 4 5 6 7 8 9 |
$json = file_get_contents("http://www.behance.net/v2/users/（ユーザー名）/projects?client_id=（API KEY）"); // UTF-8に変換 $json = mb_convert_encoding($json, 'UTF8', 'ASCII,JIS,UTF-8,EUC-JP,SJIS-WIN'); // オブジェクト毎にパース $userprojects = json_decode($json); // パースに失敗した時は処理終了 if ($userprojects === NULL) { return; } |
HTMLとして出力する
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?php foreach($userprojects->projects as $projects){ $projectsname = $projects->{'name'}; $projectsimageurl = $projects->{'covers'}->{'404'}; // 横幅404のカバー画像を取得 $projectsurl = $projects->{'url'}; // behanceのプロジェクト詳細ページURL ?> <h1 class="entry-title"><?php echo $projectsname; ?></h1> <p class="photo-thum"><img src="<?php echo $projectsimageurl; ?>" alt="<?php echo $projectsname; ?>"/></p> <p class="text-center"><a href="<?php echo $projectsyrl; ?>">詳細を見る</a></p> <?php } ?> |
これで登録したプロジェクト一覧が表示されます。なお公開が「public」のプロジェクトのみが対象です。
同様に各プロジェクトの詳細を取得するには
http://www.behance.net/v2/projects/（プロジェクトID）?client_id=（API KEY）”でJSONを取得し同じようにデコードし出力します。
反省点・失敗したこと
実際にこのまま使うと毎回APIにアクセスするのでブラウザアクセス時に表示が遅いです。
プロジェクト数が増えてきたときは、APIを使いCronで定期的に必要な情報のみを集約したXMLを自分のサーバーに生成。
そのXMLをパースして表示するのが実用的です。
サンプルプログラムでWebGLを使い、3D表現をしたギャラリーを作ろうとしていましたが、WebGLが仕様上外部サーバーにある画像を取得することができず。該当する画像を自分のサーバーにコピーする仕組みも必要でした。今回は複雑になりすぎたので断念。
