2018年11月30日スポンサーリンク前回まででapiを叩いてTableViewに表示できるようになっています。今までの実装では起動時にqiitaのapiで最新の20記事を取得しそれを表示するだけで一番下にすぐたどりついてしまいます。今回は20記事移行も表示できるようにしていきたいと思います。なったときに最初に取得する記事数を20記事だったのを100記事とか1000記事とかに増やせばいいのではないか、となりますがこれでは結局一番下にたどり着いてしまったらそこでおわり記事数を増やせば増やすほどapiの通信が時間がかかるようになるではどうすればいいのでしょうか。いうことで今回はTableViewの無限スクロールを実装していこうと思います。無限スクロールとはとりあえず実物を見たほうがわかりやすいと思うのでこんなかんじです。(Xcodeをアップデートしたのでシミュレーターの雰囲気が前回と比べて変わっています。下にたどり着く頃には次の記事が既に表示されている2〜3の繰り返しこのようになっていて見た目的には一番下にたどり着かず無限にスクロールするように見えるけど裏では分割して20記事を取得しているというかんじです。注目してほしいのはスクロールバーです。下にスクロールしてる途中でスクロールバーの位置が突然上に移動する時が来ると思います。そのタイミングが追加で記事を取得して表示されている瞬間です。いうことでこの無限スクロールを実装していきます。}}このようなかんじです。これに手を加えていきます。下にたどり着く頃には次の記事が既に表示されている2〜3の繰り返し1に関しては既に実装されているので2をやっていきます。今回は、まず、ある程度スクロールしたら次のapiを叩くという処理を実装していきたいので、ある程度スクロールしたかの判定が出来るようにします。「一番下にたどりつく500px前に次のapiを叩く」という実装にしていきたいと思います。追加の記事読み込みに対してスクロールして一番下にたどり着くのが早いことがないように数値をあとから調整するようにしましょう。厳密にやるなら500pxという固定の数値を用いるのではなく端末によってサイズが異なるので使用端末の画面サイズかScrollViewの高さに応じて決まる数値に設定するのが良いかなと思います。(ある一定の割合)というように条件設定してる場合がありますが、この条件だと記事数が多くなってTableViewの高さが大きくなると、追加読み込みをしてもすぐ条件を満たしてしまうようになってしまうので、先程のように割合を使わないように定義するようにしました。ScrollViewDidScrollを使用するでは、「一番下にたどりつく500px前に次のapiを叩く」の部分を実装していきます。必要になってくるのがTableViewの高さ現在の位置の座標です。TableViewでは、スクロールしたときに呼ばれるScrollViewDidScrollメソッドがあるので今回はこれを使用します。ScrollViewDidScrollメソッドについてわからない人は以下の記事でまとめてあるので参考にしてください。【Swift入門】初心者でもわかるTableViewを実装しようこんばんは。今回はアプリ作成に欠かせないのに加えて、特有な設定が多くて初心者が挫折しやすいTableViewを作成する手順をまとめてい...scrollViewDidScrollでは引数にscrollViewが渡されるのでこれで先程の2つを取得することができます。このように実装しました。\(distanceToBottom)")}ビルドして実行してみるとこのようになりました。このようにスクロールするたびに呼ばれています。}}下にスクロールするにつれてdistanceToBottomが小さくなっていくのでこのようにdistanceToBottomが500を下回ったときにfetchArticles()を呼ぶようにします。(いままでviewModelはprivateで定義していましたがここで使用するためにfileprivateに書き換えました。次にapiを叩く処理に手を加えていきます。先程distanceToBottomが500を下回ったらapiを呼ぶ処理を書きましたがこれではひたすら同じ記事を取得するapiを叩くことになるので取得してる記事の続きを取得するように書き換えます。今まで使用してたものはhttp://qiita.com/api/v2/itemsでした。今まで叩いていたapiのクエリパラメータの説明が書いてありました。/api/v2/items投稿の一覧を作成日時の降順で返します。stringこのように設定をすることができます。クエリパラメータというのは詳細な設定を書くことができて、今回でいうとhttp://qiita.com/api/v2/items?page=2&per_page=20というように設定することができ、URLの末尾に?をつけて、○○=△△のような形式を&でつなげていくつでも設定することができます。今回は、per_pageは20で固定にして、pageが1つずつ増えていくようにしていきましょうということで、まずこのように書き換えました。}}まず叩くリクエストのURLを現状の取得記事数に応じて変えるようにしなければいけません。pageというプロパティを作成し、pageに応じてクエリパラメータが決まるように書き換えます。追加で記事取得するのでapiで値が返ってきたあとにself.articlesにセットする際に現状取得している記事に足すようにするように書き換えます。取得し終わったらpageを+1するようにします。これで大丈夫そうではないかなと思われますが、1つ問題点があります。viewModel.fetchArticles()}この実装では下にスクロールして条件をみたすようになってから大量にapiが叩かれることになってしまいます。(その結果apiのアクセス制限をくらう可能性もあります)なのでapiを叩いて結果を待ってる間はapiを叩かないようにする処理を書かなければいけません。このように変更を加えました。}}このようになりました。loadStatusを導入して現在の状況を管理できるようにしました。loadStatusの内容はこのようにしています。エラーこれでfetching,fullの状態ではController側からviewModel.fetchArticles()が呼ばれたとしてもapiを叩かないようにしています。ビルドして実行してみると正常に実行できるようになりました。他の記事では読み込み中的なステータスをviewControllerで管理しているものもあると思います。今回の場合ではViewModelで管理するようにしています。これはMVVMで実装しているのでその場合で言うとデータの管理はViewModelが持つべき役割なのでViewControllerは現在のapiの状態がどうなっているかは知らないけど現在のViewの状態から追加読み込みをすべきかどうかを判断してその場合にViewModelに命令を送るという設計にしています。当サイトはエックスサーバーで運営しています。方はこちらの記事を参考にしてください。仮想通貨1【windows】FFmpegをインストールする手順2FFmpegで動画変換!各OSごとのインストール方法と使い方まとめ3【簡単】MacにHomebrewをインストールする方法と基本的な使い方4macOSにXcodeをインストールしよう5HomebrewでMacにFFmpegをインストールする方法と使い方6BootCampでMacにWindows10をインストールする7〜初心者でもわかるswift入門〜基本文法からiOSアプリを開発するまで8【swift入門】apiを叩いてTableViewに表示させる9【Xcode】ファイル追加削除するときの注意10【入門】Reactチュートリアルをやりながら実践入門お問い合わせこちらからお願いいたします。