自分流

なんちゃってエンジニアによる自分用メモ

お題で開発

ツイート一覧機能の実装【お題で開発:7】

投稿日:2019年11月4日 更新日:

前回ツイート機能を作りました。

今回はツイート一覧機能を作っていきます。

 

タイムライン を作ってみたいですが

どういう仕組みかパッと浮かばないので、昔ながらの10件ずつ表示してページ送り。のような仕様で作っていこうと思います。

 

 

一覧表示って?

一覧表示の機能に必要なものって何かわかりますか?

 

  • DBからデータを取ってくる
  • ただし、一気に全部取ると表示に負荷がかかるので(数万件あると大変ですよね)一定数ずつとってくる。
  • 取ってきたデータを繰り返し表示していく
  • 次のページ、前のページ、先頭のページ、末尾のページへの遷移を考える
  • 表示したデータをクリックすると、該当ツイートの詳細ページに遷移する

 

ざっとこんなところでしょうか。

一覧表示って結構大変なんですね・・・甘く見てましたw

 

じゃあ見ていきましょう

 

 

ページネーション 、ページングって?

↓こういうやつです

ひとつのページにデータを全件表示してしまうと、読み込みが終わらない可能性ありますよね。

1ページに表示するデータを制限することで、待ち時間少なく表示させることができます。

その代わり、ユーザーにページをめくってもらう必要が出てきます。

システムとユーザビリティのトレードオフのところですね・・・

 

表示の一番下までいくと、自動的に新しいデータが出てくるページングがスマホアプリとかだと主流になってきてますが、基本的な考え方は同じだと思います。

 

 

ページネーションの仕組み

プログラム的な仕組みを考えていきましょう

しっかり考えると単純なことの積み重ねでできているのがわかります。

 

  1. 指定されたページを受け取る
    指定されていない場合は1ページ目をセット
  2. データの件数取得
  3. 末尾のページ算出
    全件数 ÷ 1ページに表示する件数 = 末尾ページ
  4. 指定されたページが有効ページ範囲にあるか判定
    なければ1ページにするなどが必要。
  5. 今のページ / 末尾のページ という表示
  6. それぞれのリンクを作成する
    最初のページ、前のページ、次のページ、最後のページなど
※割った余りが出たらページ数+1する
あるいは、少数が出たら切り上げる。という処理が必要です

 

 

その結果↓こういうのができるわけです。

 

ページ指定のリンクは

list.php?p=2

のようにgetのパラメータで渡せばいいです。

 

 

ツイート一覧機能の実装

それでは見ていきましょう。

 

ツイート一覧表示画面

色々と書いてますが少しずつ見ていきます。

 

まずはページネーション部分見てみましょうか

ページネーション

http://localhost:8080/list.php?p=2

のようにgetのpでページ数を受け取っています。

getで受け取ってるし、何か表示する部分があるのでhtmlspecialchars()で消毒する必要があるわけですね。

 

続いてデータ件数を取得します

SELECT COUNT (*)で純粋にデータ件数取ってます。

つぎはデータ件数を使って末尾のページを計算しています。

VIEW_RECORDSってのは1ページに表示する件数の定数です。
(自分で勝手に定義してます)

 

ceil()がポイントで、割り切った少数を切り上げています。

PHPの場合の割り算は勝手に少数で計算するようですね。
(バージョンによるものかもしれません。PHP7.2使用)

表示:10件、件数:53件の場合

53 / 10 = 5.3

末尾が5.3ページというのは誤りで、本当は6ページになるはず。という計算です。

 

ページが有効範囲に入るようバリーデーションして

 

そのあとは現在のページと、末尾のページを使って実際にページネーション を組み立てる部分ですね。

汚い書き方で本当に気持ちが悪いんですが、ある程度仕方ない気がします。

PHPはこういう泥臭い処理を書く必要がある言語なのかもしれませんね・・・

 

話がずれましたが

前へ というのは先頭ページの場合はリンクをつけたくない

次へ というのは末尾のページの場合はリンクをつけたくない

という処理が入ってて見づらくなってます。

キモはここです。

現在のページに-1して前のページへのリンク

現在のページに+1して次のページへのリンク

簡単ですね。

 

つぶやきの表示

話を戻して、つぶやきの表示部分です

データを取得して、取得したデータを繰り返し表示しているだけですね。

表示部分は関数化して見やすくしています。

 

データの取得はgetAllTweetDatasWithLimitという、指定ページのデータを配列で取ってくる関数を作りました。

SELECT * FROM tweets LIMIT 0, 10

データの取得はこのようなSQL文になります。

LIMITは ◯番目のデータから、◯件取得する

という命令なので、上記の場合は0番目のデータから、10件取得する。ということになります。

 

実際のソースはこうなっていて、$page:指定ページ、VIEW_RECORDSは表示件数です。

($page – 1) * VIEW_RECORDS とは

(1 – 1) * 10 = 0 * 10 = 0

と、1ページ目を指定した場合は0番目のデータから

(2 – 1) * 10 = 1 * 10 = 10

と、2ページ目を指定した場合は10番目のデータから

取得できるようになっています。

 

こういう汎用的な考え方がプログラムを作る上では超重要になってきます。

 

 

まとめ

ざっと解説しましたが、一覧の表示って結構大変なんですね。

ただ、これもパターンが決まってるので、何度か作って慣れてしまえば怖くもなんともないなって感じました。

 

ページネーション ・・・本当に泥臭いプログラムでした。

フレームワークやライブラリを使えば一行で書けたりするんだろうな。って思いながら作ってましたが、こういう基本的な部分は一回は自分で作っておくと仕組みが理解できていいですね。

 

だいぶできてきました。

次はツイート詳細画面を作っていきます!

 

今回の成果

github

 

機能一覧

  • ユーザー登録 済!
  • ログイン 済!
  • プロフィール編集 済!
  • プロフィールに画像投稿 済!
  • 新規つぶやき 済!
  • つぶやきに画像添付 済!
  • 一覧表示 済!
  • つぶやき詳細画面
  • つぶやきへのコメント
  • いいね
  • コメントへのコメント 仕様から削除
  • コメントに画像添付 仕様から削除

 

つづく

-お題で開発
-, , , ,


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

ログイン機能の実装【お題で開発:4】

前回ユーザーの新規登録を作りました。 今回は登録したユーザーでのログインを作ります。     もはやどんなサービスでも存在するログイン機能。 今更説明するまでもない機能ですが、どう …

まずは設計【お題で開発:1】

お題が決まりました!   何かしらの投稿サービス 期間一ヶ月   と言うわけで作っていくんですが、 いきなりプログラムを書き出すと漂流してしまうので道しるべを書きます。 開発の前段 …

環境構築【お題で開発:2】

前回設計が終了したので、開発していき・・・たいところですが。 開発環境をきちんと準備しておかないと、のちのち死にます。 昔であれば、XAMPPやLAMPP、MAMPでテスト環境を開発機に直に構築してい …

プロフィールの編集機能の実装【お題で開発:5】

前回ログイン機能を作りました。 今回はプロフィールの編集機能を作っていきます。 これも基本的な部分ですね。     目次1 プロフィール編集機能に必要な機能1.1 画像のアップロー …

ツイート機能の実装【お題で開発:6】

前回プロフィール編集機能を作りました。 今回は投稿(ツイート)機能を作っていきます。 メインとなる部分ですね。   今までの応用でなんとかなるのですが、せっかくなのでちょっと違うことをしてみ …

Top