GitBookスクロールしたら追加の情報を読み込む:実装編さきほどはスクロールしたら追加の情報を読み込む実現方法についていくつかご紹介をしたので、この章では実装方法について解説します。実装のポイントをまずは解説TableViewSectionで投稿情報別に区切る方法を実装していきます。実装自体はシンプルそうに見えるのですが、いくつかポイントになる箇所があるのでまずはその点について解説します。QiitaのWebAPIのページネーションについてQiitaのWebAPIにリクエストを投げる時に、何ページ目の情報を何件取得するのかオプションで指定することが出来るページネーションの機能が備わってます。オプションの指定をせずにhttps://qiita.com/api/v1/itemsにアクセスすると、1ページ目の情報を20件取得する仕様になってます。APIのドキュメントを参照してください)https://qiita.com/docs例えば、2ページ目の情報を取得したい場合にはURLの末尾に?page=ページ名を付け加えます。具体的には以下のようにします。https://qiita.com/api/v1/items?page=2また、リクエスト辺りの取得件数を5件に制限したい場合には?per_page=件数とすることで処理ができます。具体的には以下のようにします。https://qiita.com/api/v1/items?per_page=5上記2つを組み合わせて利用することも出来ます。イベントを利用します。イベント発火のタイミングでその保持してるページ情報を1つ増加させるデータ取得後にTableViewSectionを生成した上で投稿情報を追加するという処理を行うのですが、上記処理途中にスクロール出来る状態のままにしておくとscrollEndイベントが頻発してしまう可能性があります。それを防ぐためにTalbeViewのスクロールを一時的に利用不可にしつつ、処理途中であることを明示したほうが使い勝手の良いアプリケーションにつながると思います。実装これまで作ってきたアプリケーションをベースに開発をしていきます。app.jsのソースコードapp.jsはそのまま流用します。win.open();style.jsのソースコード引っ張って更新処理を実装するで利用したソースコードをそのまま流用します。style:Ti.UI.iPhone.ActivityIndicatorStyle.DARK};qiita.jsのソースコードQiitaのWebAPIにアクセスする際に何ページ目を取得するのか指定する必要があります。xhr.send();};mainWindow.jsのソースコードユーザインタフェース側の処理が多くなるため、上記3つと比較すると少し長くなりますが、先にソースコード全体を以下に記載します。起動時に表示するページ数を設定TableViewSectionの挿入箇所となる変数を設定。起動時にWebAPIからデータを取得して投稿情報が取得できたらmainTableにセットQiitaのWebAPIから取得した投稿情報を引数にして後述するcreateSection関数を利用してTableViewSectionを生成し、それをTableView.setData()を利用してTableViewに反映させるscrollEndイベント発火した時に処理中であることを示すために、TableViewのscrollableの値をfalseに設定することで、スクロール出来ないように制御します。その後のopacityの値をデフォルトの1.0から0に近い値(今回は0.3)に変更していますが、こうすることでTableView全体が少し暗くなり処理中であるというのが利用してるユーザさんにはより伝わりやすくなるかと思います。後述するgetQiitaItems関数を利用して、QiitaのWebAPIから投稿情報を取得します。QiitaのWebAPIから取得した投稿情報を引数にして後述するcreateSection関数を利用してTableViewSectionを生成しておきますTableViewのinsertSectionAfterメソッドを利用して上記7.で生成したTableViewSectionを挿入します。APIから投稿情報を取得します。APIから取得できた投稿情報を渡して必要な要素が追加されたTableViewRowを順番に生成し、そのRowをTableViewSectionに順番に追加して、最後にそのTableViewSectionを返します最終的な実行結果スクロール中の状態を画面キャプチャー取れないので見た目にはわかりづらいのですが以下のようになります。iPhoneでの実行イメージAndroidでの実行イメージ。