Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

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にアクセスして取得しただけでしたが

https://qiita.com/api/v1/tags/qiita/items?page=2

みたいに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: () ->
    # 失敗時の処理を書く

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

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

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

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

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

shot-2014-12-01-7.01.13.png

まとめ

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

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

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

h5y1m141@github
クラフトビールが好きすぎて、iPhone&Android&Webアプリの開発をTitanium+CoffeeScript+Node.js+αな感じでやってます http://craftbeer-fan.info/ あとは、非公式のQiita Viewerアプリ作ってます https://github.com/h5y1m141/TiQiita 仕事では気づいたらRails4中心です
http://h5y1m141.hatenablog.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away