Allied ArchitectsAllied ArchitectsEngineer Blog

Knockout.jsでフォト蔵APIを使って写真一覧とボタンによるページ追加を作ってみる

2013/09/11 Knockout.js

どーも、青山です。

もう、9月ですね。
最近、朝晩涼しく、秋ですね。

前回は「WordPressのURLの構造で(標準では)出来ない事」について記事を書かせて
いただきましたが、今回は関係なく、「Kockout.js」についてです。

Knockout.jsについては、最近あだ名が「しゃかまる」に落ち着いた村上君が「過去の記事」で紹介しているので、説明は割愛させていただきます。
しかし、それだとあまりにも、あれなので、Knockout.jsを使おうと思った理由だけ紹介します。
・MVVMモデルでViewのDOM構造に依存せずにロジックを組める
・jQueryのバージョンなど他ライブラリに依存しない
・複数ページで使わず、単一ページで十分
・IE6~8にも対応している
などが主な理由です。

では、タイトルの通り、フォト蔵APIを使って写真一覧を作ってみましょう。

■フォト蔵APIの紹介
http://photozou.jp/basic/api
画像取得のAPIを色々と探してみましたが、当然のように、API Keyの取得のために開発者登録が
必要だったりして、面倒です。
そんな中、フォト蔵の「photo_list_public APIメソッド」は公開されている写真を取得するには特に
API Keyの取得や認証が必要なかったため、使わせていただくことにしました。

■JSONP非対応の壁を乗り越える
しかし、そんなフォト蔵さんのAPIもJSONPには対応していません。
このままだと、別ドメインのJavascriptからはアクセスできないので、困りました。
そこで、下記ブログ記事を参考にさせていただき、Yahoo PipesのAPIを使って
JSONをJSONPに変換して利用することにしました。
JSONをJSONPに変換するYahoo PipesのAPI

■動作サンプル
で、knockout.jsを使って作ったものが、下記のものとなります。
「More!」ボタンを押すと、3件ずつ写真を取得してくれます。
読み込み中は、ローディング画像が表示されるようになっています。
(※画像が読み込まれない場合は、Yahoo Pipesでうまく通信ができていない場合があるので「More」ボタンをもう一度押してください。)

■ソース
一応サンプルコードを簡単に紹介していきましょう。

▼ライブラリの読み込み
jQueryとkockout.jsを読み込みます。jQueryのバージョンは、このブログが1.4.4なだけで、特に指定はありません。

▼API通信とViewModel
フォト蔵APIの通信とViewModelになります。
Photozoの部分では、主にフォト蔵のAPIのURLをエンコードして、Yahoo PipesのAPIの引数として渡したり、
API通信部分の定義をしています。
viewModelでは次のページを読み込めるか(isMore)、ロード中か(isLoading)判定する関数を定義しています。
見てもらえば、わかりますが、ViewのHTML要素に依存しない内容となっています。
そのため、ViewのHTMLの内容が変わっても影響がありません。

▼View(HTML)
「data-bind」という属性(アトリビュート)でViewModelとViewを結び付けています。
View側でも指定できるようにしているので、画像のキャプション(title)を14文字でカットするようにしていたりします。
(「$root.photozo.cutStr(photo_title,14)」の部分)

▼CSS
画像をただ並べるだけだとさびしいので、CSS3でちょっとあしらいをしています。

ひじょーにざっくりですが、こんな感じです。(ソースは貼り付ければ、ローカルでも動くようにしています。)
どこまでをどう説明するか考えているうちに、面倒になってほとんど解説がありませんが、
ありがたいことに、knockout.jsの公式ドキュメントを日本語に翻訳して下さっているサイトがあります。

■knockout.jsの日本語ドキュメント
http://kojs.sukobuto.com/

今回紹介したサンプルは、knockout.jsでできることのほんの一部でしかありません。
興味を持たれた方は、いろいろ試してみるといいのではないでしょうか。

■最後に
アライドアーキテクツでは現在、エンジニアを募集中です。
興味を持っていただけたら、↑の採用サイトからご応募ください。

aoyama
  • aoyama
  • Webエンジニア
  • 受託案件を担当しています。 Javascript, Wordpressなどテーマはその時々で変わりますが、役に立つ情報を提供できればと思います。

RELATION ENTRY

WordPressでカスタムフィールドを使うならWPAlchemyがおすすめ(Advent Calendar 22日目)

WordPressでカスタムフィールドを...

2014/12/22 Wordpress

アライドアーキテクツAdvent Calendar22日目の記事になります。 ごあいさつ どーも、aoyamaです。 前回は「長所から考えるCMS(MovableType、WordPress)の使いどころ」について書きました。 新しく他のCMSを触って、それについて書こうと思っていたら、あっ...

続きを読む

長所から考えるCMS(MovableType、WordPress)の使いどころ(Advent Calendar 13日目)

長所から考えるCMS(MovableTy...

2014/12/13 CMS

アライドアーキテクツAdvent Calendar13日目の記事になります。 ごあいさつ どーも、aoyamaです。 前回このブログに記事を書いたのが、8月20日なので、大分久しぶりです。 季節も変わって、最近は、毎日寒いですね。 ここ1、2年ぐらい、コーポレートサイトやテーマサイトブログ...

続きを読む

aoyamaの記事一覧へ

ページTOPへ