はじめに

こんにちは！株式会社ZOZOでiOSエンジニアをしている加藤です。私はショップスタッフの販売サポートツール「FAANS」の開発に従事しています。FAANSでは、この度、ショップスタッフのコーデ投稿を支援するPDFの表示機能が実装され、コーデ投稿に関する情報が掲載されたPDFをアプリ内で閲覧できるようになりました。

FAANSにおけるPDFの閲覧機能はPDFKitを用いて作成されており、PDFの左下に閲覧中のページ数を表示するデザインを採用しています。本記事では、PDFKitを用いて表示したPDFにおいて、閲覧中のページ数を取得し、表示する方法について書きます！

目次

PDFKitを用いたPDF表示
縦長PDFのページ番号表示
横長PDFのページ番号表示

PDFKitを用いたPDF表示

PDFKitを用いたPDF表示は以下のようなプログラムで行えます。

var document: PDFDocument?

@MainActor
func setupPDFView() {
    let pdfView = PDFView()
    pdfView.displayMode = .singlePageContinuous // PDFを連続で表示する
    pdfView.displayDirection = .vertical // 縦方向に表示する
    pdfView.autoScales = true // 自動的にPDFのスケールを画面に合わせる
    pdfView.document = document
    return pdfView
}

func loadPdfDocument() async {
    do {
        let (data, _) = try await URLSession.shared.data(with: pdfUrl) // URLから非同期でPDFデータを取得
        if let document = PDFDocument(data: data), document.pageCount > 0 {
            self.document = document // 有効なPDFを設定
        } else {
            // 表示できるPDFがないケース
        }
    } catch {
        // 表示できるPDFがないケース
    }
}

extension URLSession {
    func data(with url: URL) async throws -> (Data, URLResponse) {
        try await data(from: url)
    }
}

上記のように、URLを指定してPDFDocumentを生成して、PDFViewのdocumentに設定することでPDFが表示されます。また、.displayMode = .singlePageContinuous、.displayDirection = .verticalに設定することでPDFが縦方向に連続で表示されるようにしています。

縦長PDFのページ番号表示

先に提示したGifのように、縦長PDFを表示中に閲覧しているページ番号を取得する方法を紹介します。以下のコードは、ページが変更されるたびに通知を受け取り、現在のページ番号を取得する仕組みです。

let pdfView = PDFView()

NotificationCenter.default.addObserver(forName: .PDFViewPageChanged, object: pdfView, queue: .main) { _ in
    Task { @MainActor in
        // 現在のページ番号を取得
        if let pageNumber = pdfView.currentPage?.pageRef?.pageNumber {
            // pageNumberを画像上に表示
        }
    }
}

このコードでは、NotificationCenterを使用して.PDFViewPageChanged通知を監視しています。この通知は、PDFViewでページをスクロールするなどして表示中のページが変更されるたびにトリガーされます。また、pdfView.currentPageで現在のページを取得でき、pageRef?.pageNumberから現在のページ番号（1始まり）を取得しています。

横長PDFのページ番号表示

横長のPDFを表示する場合、前節と同じようにページ番号を取得すると、初期状態で表示されるページ番号が2になってしまいます。初期のページ番号が2になっているGifを以下に示します。

初期のページ番号が2になってしまう原因は、横長PDFの場合、画面上に複数ページが同時に表示されることです。初期の画面では、1〜3ページが表示され、中央に最も近いページが2ページ目のため、取得されるページ数が2となります。FAANSでは、PDFの上端が表示されている場合は、ページ数の表示は1にしたいため、以下のように実装しました。

let pdfView = PDFView()

// ページ変更通知を監視して、現在のページ番号を更新
NotificationCenter.default.addObserver(forName: .PDFViewPageChanged, object: pdfView, queue: .main) { _ in
    Task { @MainActor in
        // 現在のページ番号を取得し、上端が表示されている場合は1を設定
        if let pageNumber = pdfView.currentPage?.pageRef?.pageNumber {
            currentPage = showPdfTop ? 1 : pageNumber
        }
    }
}

// scrollViewのcontentOffsetを監視してPDFのスクロール位置を検出
if let scrollView = pdfView.scrollView() {
    cancellableStore.cancellable = scrollView.publisher(for: \.contentOffset)
        .sink { [weak pdfView] contentOffset in
            Task { @MainActor in
                guard let pdfView = pdfView else { return }
                    if contentOffset.y <= 0.0 {
                        // PDFの最上部が表示されている場合
                        currentPage = 1
                        showPdfTop = true
                    } else if let pageNumber = pdfView.currentPage?.pageRef?.pageNumber, pageNumber != currentPage {
                        // ページが変更された場合に通知を送信
                        NotificationCenter.default.post(name: .PDFViewPageChanged, object: pdfView)
                        showPdfTop = false
                    }
                }
            }
}

fileprivate extension PDFView {
    // PDFViewのサブビューからUIScrollViewを取得
    func scrollView() -> UIScrollView? {
        return self.subviews.compactMap { $0 as? UIScrollView }.first
    }
}

このプログラムでは、PDFViewからスクロール位置を検出するために内部のUIScrollViewを取得し、そのcontentOffsetをCombineのPublisherを使用して監視しています。contentOffsetが0以下の場合、PDFの最上端が表示されていると判断してページ番号を1に設定します。これにより、横長PDFであっても意図したページ番号を正しく表示できます。

まとめ

PDFKitを用いてPDFを表示する方法と、縦長・横長のPDFで現在のページ番号を取得する方法を紹介しました。この記事が、今後PDFKitを用いてiOSアプリにPDF表示機能を実装する方の参考になれば幸いです。