質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.11%

【Swift】ニュースアプリの快適なタブめくりを実現するためには?

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 581

HNSZ

score 11

こんばんわ
Swift+Firebase+XLPagerTabStripを利用して、ニュースアプリを作成しています。

基本部分は完成したのですが、画面表示が遅い問題があります。
立ち上げの際もそうですし、タブめくりした際の表示はより遅い状況です・・・・

有名なグノシー他、ニュースアプリですと
タブ切り替えの際はなんのストレスもなく、即時表示されていますが、
どのような仕組みかご存知でないでしょうか?
曖昧な依頼で恐縮ですが、快適に表示されるコツや参考サイト、参考コードをご存知でしたら
お力添えいただけると幸いです。

■基本情報
・画面イメージイメージ説明
・構造イメージ説明

  • タブ毎にストーリーボード、swiftがあります。
  • 表示、切り替え時に、表示された画面のviewdidloadでfirebaseのタブに該当する箇所より情報を取得後、tableviewをリロードして表示

■検討していること
1タブ目表示時に、3タブ目までの情報をfirebaseより取得しておくことで解決できるのかなと思いましたが、
表示されないかもしれないタブの情報を取得するのは無駄なのかなとも思っています。
世間一般的にはどうなのかご存知でないでしょうか。

■読み込み速度が遅い理由
「 let imageData = try? NSData(contentsOf: url! as URL,options: NSData.ReadingOptions.mappedIfSafe)」の処理に約1秒かかってしまいます。。。

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "ContentsTableViewXib") as! ContentsTableViewXib
        cell.selectionStyle = UITableViewCellSelectionStyle.none

        let dict = items[(indexPath as NSIndexPath).row] //jsonデータを代入

        let contentsTableImage = cell.viewWithTag(3) as! UIImageView
        imageURL = dict["Image"] as? String //0.000(s) //dictから画像URLを取得
        let url = NSURL(string: "\(imageURL!)") //0.000(s) 
        let imageData = try? NSData(contentsOf: url! as URL,options: NSData.ReadingOptions.mappedIfSafe) // 1.179(s)
        let img = UIImage(data:imageData! as Data) //0.030(s)
        contentsTableImage.image = img //0.000(s)

        return cell
        }
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+1

先読みでよいと思います
大手は先読みしていないところもありますが、あれは色々工夫して速度を上げてるのでアレで良いんだと思います
(問題はpageViewControllerの先読み方法です)

今後のポイントとしてはa
・viewの表示が遅いのか、APIが遅いのかを調べる
・PageViewControllerのデフォルトの先読みはviewDidLoadまでしか呼ばれない

あたりだと思います
私が自分で実装するなら横UICollectionView使っちゃいます。iOS10から先読みが強化されたので(ただ全部合わせて1画面になるので設計に注意が必要ですが)

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/11/01 22:19

    kosanai様
    ご丁寧にありがとうございます!
    遅い理由の特定ができておらず、実施してみた結果として、
    APIは問題ないのですが、
    jsonから取得した画像urlデータをtableviewcellに表示するタイミングで、
    1枚毎に約1秒かかってしまっていました。

    ソースを本文に追加しておりますので、ご覧いただけないでしょうか。
    この時間を短縮するには、画像ローダーの導入で解決されるものでしょうか?
    あるいは、ソースコード自体に改善の余地がございますでしょうか?

    もしご存知でしたらご教示いただけると嬉しいです。
    宜しくお願いします。

    >横UICollectionView使っちゃいます
    こちらの検討ができていなかったため、速度比較してみたいと思います。
    情報ありがとうございます!

    キャンセル

  • 2018/11/02 10:15 編集

    一旦ソース見ずに予想で書きますが、おそらく画像のロードをメインスレッドでやってるのではないでしょうか
    もしそうならば、画像ダウンロード&反映を非同期処理でやるべきですが
    理解するのに少し時間がかかるので一旦便利なライブラリを使って動くか確認するのも手です
    https://qiita.com/H_Crane/items/422811dfc18ae919f8a4

    キャンセル

  • 2018/11/03 00:25

    kosanai様
    ライブラリの共有ありがとうございます!
    Kingfisherにて満足行く表示速度になりました。
    ありがとうございます。

    仕組みは追って理解いたします><

    キャンセル

+1

何を優先させたいのかによって、対応方法や方針が変わると思います。
今回のあれば、画面の表示速度を優先したいということであれば、それを基準に実装すれば良いと思います。

何の処理に時間がかかり遅いのかは計測すれば、判断出来ると思いますが実施済みでしょうか。
すぐに思いつくのは、以下の要素です。
・画面描画
・データ取得(通信部分、データベースからの読み取り)
・メディアデータなどの容量が大きいものがある

それぞれ、早くする方法としては
・画面描画する量を減らす(不要な部分は描画しない)、そもそものデザインを見直す
・事前にキャッシュしておく。(アプリが起動される前に、事前にサービスなどで読み取っておく)
・読み取り頻度が高いものは、データベースから毎回読むのではなくメモリに一時保存しておく
・メディアデータもキャッシュや小さいデータ(サムネイル画像)などが活用出来ないかを検討する

上記の内容は、特別なアプリではなくとも検討される内容だと思います。
有名どころのアプリは、さらに計測やチューニングをしていると思いますが、それらはまずは計測がしっかり出来ないと検討すら出来ないと思います。

参考になれば幸いです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/11/01 22:12

    Miyake様
    ご丁寧にありがとうございます!
    計測ができておらず、、実施いたしました。

    結果として、jsonから取得した画像urlデータをtableviewcellに表示するタイミングで、
    1枚毎に約1秒かかってしまっていました。。

    ソースを本文に追加しておりますので、ご覧いただけないでしょうか。
    この時間を短縮するには、画像ローダーの導入で解決されるものでしょうか?
    あるいは、ソースコード自体に改善の余地がございますでしょうか?

    もしご存知でしたらご教示いただけると嬉しいです。
    宜しくお願いします。

    キャンセル

  • 2018/11/02 09:45

    画像ローダーが何を指しているのかが分かりませんので、それで解決するかどうか不明です。
    何を解決したいのかによって、変わります。
    表示速度がというのであれば、表示速度はほぼ一瞬で表示されているということで解決済みだと思います。
    画像の取得速度を解決したいということであれば、いろいろな考え方が出来ます。
    ・取得する画像サイズを小さいものに変える(相対的に取得時間が短くなる)
    ・並列でダウンロードする。(平均1秒であれば、それが同時に10枚ダウンロードしてもほぼ1秒です)
    ・ダウンロードするタイミングを変える。(先読みも一つの方法だと思います)

    ソースコードでこうすれば良い というのを公開するのは簡単ではあるのですが、
    このサイトの趣旨に反するので説明だけにさせて頂きます。

    キャンセル

  • 2018/11/03 00:27

    Miyake様
    ご回答ありがとうございます!
    ひとまず、ライブラリKingfisherにて対処いたしました。

    頂いたアドバイス中心に細部はこれから実施して改善します。
    画像サイズはすぐにでもできそうです。
    ありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.11%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる