Titanium + Alloy + napp.alloy.adapter.restapiで作る簡単Qiitaビューワーアプリ応用編（ページネーション機能の実装） #Titanium

Titanium Advent Calendar 2014の3日目です。

TitaniumMobile勉強記というブログで毎年Titanium Advent Calendar 書いてますが今回はQiitaの方にTitanium Advent Calendar 出来たのと最近の流れでTitanium関連ネタがQiitaに集約されてきてるので今年はこっちに書くことにします

前置き

今年の6月にフリーランスになって、仕事でちょっとTitaniumで開発もできるようになったし、その辺りのことでも・・と思ったのですが、それは自分のブログに書くことにして、ひとまず技術ネタを書きます。

ネタとしてはTitanium + Alloy + napp.alloy.adapter.restapiで作る簡単Qiitaビューワーアプリの続編です

やりたいこと

前回は単純にQiitaのAPIにアクセスして取得しただけでしたが

みたいに2ページ目の投稿情報を取得するような機能が実装されてないのでそこについて解説します。

結論だけ知りたい人

先に書いてしまうと、呼び出す側のControllerで、urlparamsというオプション項目をつけて


qiitaItems = Alloy.createCollection 'qiita'
qiitaItems.fetch
  urlparams:
    page     : 2
  success: () ->
    # 成功時の処理を書く

  error: () ->
    # 失敗時の処理を書く

のようにすればOKです

上記のurlparamsについての解説

ここから解説というか、このパラメーターをどのように見つけたのか順番に触れていきます

そもそもの話ですがページネーションについての実装方法について解説がない・・・

GitHubのnapp.alloy.adapter.restapiさんのREADMEを見る限りでは、パラメータの渡し方について記載がありません。。

色々カンでやっていたのですが、中々解決方法がわからなかったので、素直にソースコードを読むことにしました

関連しそうなコード

全部をしっかり読んでないですが以下のあたりが関連するのかなと思いました。

140行目あたりのmethodMapの所で、HTTP Methodとの対応処理っぽいことをやっているようでした。ひとまず今はGETメソッドのクエリーをどうやって渡すのか知りたいので、GETに対応するreadという所に注目

// 140行目あたり
    // REST - CRUD
    var methodMap = {
        'create' : 'POST',
        'read' : 'GET',
        'update' : 'PUT',
        'delete' : 'DELETE'
    };

230行目あたりでこのような処理があり、case 'read'が関連するようでここを読み込むことにしました


    switch(method) {
        case 'create' :
        // 中略 
        case 'read':

240行目で

            if (params.urlparams) {
                // build url with parameters
                params.url = encodeData(params.urlparams, params.url);
            }

という処理があります。

コメントにbuild url with parametersということが書かれており、urlparamsというオプションを渡してあげると、イイ感じにパラメータを引き渡してくれそうな予感がしました。

そこで呼び出す側のControllerから


qiitaItems = Alloy.createCollection 'qiita'
qiitaItems.fetch
  urlparams:
    page     : 2
  success: () ->
    # 成功時の処理を書く

  error: () ->
    # 失敗時の処理を書く

のようにしてあげることで意図したとおりに２ページ目の投稿情報を取得してくれます。

また、urlparamsにpageというパラメーターを渡すだけではなく


qiitaItems = Alloy.createCollection 'qiita'
qiitaItems.fetch
  urlparams:
    page     : 2
    per_page : 5
  success: () ->
    # 成功時の処理を書く

  error: () ->
    # 失敗時の処理を書く

のようにしてあげることで、１ページあたりの取得件数を５件に絞り2ページ目の投稿情報を取得してくれます。QiitaのWebAPIの仕様でデフォルトの取得件数は20件になってます。くわしくはQiitaの開発者向けのドキュメントサイトをご覧ください

まとめ

napp.alloy.adapter.restapiは便利だけど、ページネーションどうやって実現するのかドキュメントに記載はありませんでした。ただソースコード読んだら意外と簡単に使い方がわかりました。

ネイティブのモジュールのソースコードを読むのはちょっと敷居がたかいかもしれませんが、JavaScriptで書かれたライブラリならTitaniumでの開発の延長線上でなんとか理解できるケースがあるのかなと考えて今回その辺りのアプローチ方法についてもご紹介してみました。

明日は、ユーザ会会長のyagi_さんがPubNubを使ってリアルタイムメッセージング（簡単）について書くようなので、楽しみですね！