ジャンプTOONにおけるサイトマップの自動生成手法について

Muddy WebはMuddy = 泥臭いとして、Webフロントエンドの開発現場における話やケーススタディなど泥臭さのある話をもとに学びを得ることを目的として開催しています。

現場で遭遇した具体的な体験を元に実際に明日から使えるかもしれないWebフロントエンド的な技術や知識を参加者の皆さまと共有し合うことを通して、フロントエンド開発の糧になれればと思います。

https://cyberagent.connpass.com/event/335669/

SGEマンガ事業部では、2024年5月にジャンプTOONをリリースしました。 ジャンプTOONでは、オリジナル連載マンガや人気作品のタテカラー版を掲載しており、毎日4作品以上が更新されます。新しいコンテンツを検索エンジンのクローラーに逸早く伝えるためには、常に最新のサイトマップにしておくことが重要です。今回は、サイトマップの作成において気をつけることや自動生成の実装手法について詳しくお話しします。

Transcript

1. ジャンプTOONにおける サイトマップの自動生成手法 浅原昌大
2. 株式会社サイバーエージェント SGEマンガ事業部 Web フロントエンドエンジニア 浅原昌大 @assa1605 @assa1605 2023年サイバーエージェント新卒入社 SGEマンガ事業部に配属 あさはらまさひろ
3. ジャンプTOONについて サイトマップについて サイトマップ生成手法の紹介 設計と実装 01
 02
 03
 04
 CONTENTS まとめと振り返り 05

4. ジャンプTOONについて サイトマップについて サイトマップ生成手法の紹介 設計と実装 01
 02
 03
 04
 CONTENTS まとめと振り返り 05

5. ジャンプTOONについて ジャンプTOON のサービス紹介 
 01
 2024 年 5 月にサービスを開始 オリジナル縦読みマンガ作品や人気作品のタテカラー版を連載中
6. サイトマップについて サイトマップとは サイト全体のページ構成を一覧で記載 • HTMLサイトマップ：ユーザーが情報を見つけやすくする役割 • XMLサイトマップ：検索エンジンにサイト内のページを伝える役割 02

7. サイトマップについて サイトマップとは サイト全体のページ構成を一覧で記載 • HTMLサイトマップ：ユーザーが情報を見つけやすくする役割 • XMLサイトマップ：検索エンジンにサイト内のページを伝える役割 02

8. サイトマップについて XMLサイトマップを作成する上で.. 02
 URL の上限件数：50,000件 サイズ上限：50MB（圧縮なし） 読み込みに上限があるため、上限 に達しないよう分割して作成する 制約 XML サイトマップの構造は、親ファイルと子ファイルから構成
9. ジャンプTOONについて サイトマップについて サイトマップ生成手法の紹介 設計と実装 01
 02
 03
 04
 CONTENTS まとめと振り返り 05

10. サイトマップ生成手法の紹介 Next.js の sitemap.js 
 03
 URL の配列を返すデフォルトの関数を エクスポートするだけでサイトマップを生成 ⭐ 特徴 • 自動的に/sitemap.xmlエンドポイント が生成される • 動的関数を使用しない限り デフォルトでキャッシュされる 
 
 https://nextjs.org/docs/app/api-reference/file-conventions/metadata/sitemap
11. サイトマップ生成手法の紹介 Next.js の sitemap.js 03
 https://nextjs.org/docs/app/api-reference/functions/generate-sitemaps sitemap.js 内でデータフェッチして 動的なパスも含めることも 
 
 
 
 
 

12. サイトマップ生成手法の紹介 generateSitemaps 関数
 03
 https://nextjs.org/docs/app/api-reference/functions/generate-sitemaps URLの分割も簡単に可能 /product/sitemap/1.xml /product/sitemap/2.xml /product/sitemap/3.xml .. 
 
 

13. サイトマップ生成手法の紹介 generateSitemaps 関数
 03
 https://nextjs.org/docs/app/api-reference/functions/generate-sitemaps sitemap.js 内でデータフェッチして 動的なパスも含めることも 
 
 
 
 
 
 
 これ使えば良さそう 👏
14. サイトマップ生成手法の紹介 Next.js の sitemap.js ちょっと待った... 03
 • URL の分割はできるが、親のインデックスファイルを生成してくれない 不都合な点
15. サイトマップ生成手法の紹介 Next.js の sitemap.js ちょっと待った... 03
 サイトマップの配信URLを変更できない • スクレイピングの対象になるため、サイトマップを隠したい • google bot だけがアクセスできればOK 不都合な点
16. サイトマップ生成手法の紹介 Next.js の sitemap.js ちょっと待った... 03
 • URL の分割はできるが、親のインデックスファイルを生成してくれない • サイトマップの配信URLを変更できない 不都合な点 自作スクリプトでサイトマップ生成する
17. ジャンプTOONについて サイトマップについて サイトマップ生成手法の紹介 設計と実装 01
 02
 03
 04
 CONTENTS まとめと振り返り 05

18. 設計と実装 サイトマップに含めないパス 04
 • マイページなど noindex のパス
 • リダイレクトのみのパス
 • 検索結果
 

19. 設計と実装 サイトマップに含める情報 04
 
 
 有無 詳細 <loc> 含める サイト内の一つのページについて の情報を説明する <lastmod> 含める ページの最終更新日を記載する (コンテンツが変わった時のみ更新) <changefreq> 含めない ページの更新頻度を記載する。 Googleでは無視される。 <priority> 含めない ページの優先度合いを示す。 Googleでは無視される。
20. 設計と実装 ディレクトリ構成 04
 上から順に - 定期的にサイトマップを生成するためのワーク フローファイル - サイトマップの生成スクリプト - Route 個別のパスを定義 - サイトマップを生成するための固有ロジック
21. 設計と実装 ディレクトリ構成 04
 サイトマップを作成するためのロジック類
22. 設計と実装 lib/sitemap/constant.ts 04
 サイトマップ作成する上で必要な情報 

23. 設計と実装 lib/sitemap/sitemap.ts 04
 createSitemapItem URL と更新日を含む オブジェクトを返す
24. 設計と実装 lib/sitemap/sitemap.ts 04
 getSitemapData サーバーのレスポンスから必要データを取得
25. 設計と実装 ディレクトリ構成 04
 Route 個別の SitemapItem を作成する
26. 設計と実装 src/app/_sitemap.ts 04
 generatePageSitemapItems シグネチャは統一しておく 動的パス　 静的パス　
27. 設計と実装 ディレクトリ構成 04
 各 Route の SitemapItem を結合 XMLサイトマップ組み立てる
28. 設計と実装 script/sitemap/generate-xml.ts 04
 generateSItemapIndexXml 親ファイルのサイトマップのフォーマットに沿った XML を返す
29. 設計と実装 script/sitemap/generate-xml.ts 04
 generateSitemapXml 子ファイルのサイトマップのフォーマットに沿った XML を返す 更新日 (lastmod) のみ含める
30. 設計と実装 script/sitemap/ save-split-sitemap.ts 04
 saveSplitSitmap Route 個別の sitemapItem と 出力先 を受け取ってファイルに書き込み url の上限やファイルサイズを考慮しておく
31. 設計と実装 script/sitemap/ save-split-sitemap.ts 04
 saveSplitSitmap Route 個別の sitemapItem と 出力先 を受け取ってファイルに書き込み 実際にファイルに書き込み
32. 設計と実装 script/sitemap/save-split-sitemap.ts 04
 writeToFile ファイルパスと中身をファイルに 書き込む writeSitemapFile ファイル番号を受け取れるように して writeToFile 関数を呼ぶ
33. 設計と実装 script/sitemap/save-split-sitemap.ts 04
 createSitemapFile サイトマップを生成する Route 個別の sitemapItem を saveSplitSitmap 関数に受け渡し
34. 設計と実装 script/sitemap/purge-fastly-cache.sh 04
 一部コード省略 サイトマップは、CDN(fastly) で キャッシュしている。 purge_cache サロゲートキーが諸事情で使えなかっ たので、一時的に作ったパージ用のス クリプト
35. 設計と実装 ディレクトリ構成 04
 定期バッチ、GCSに転送、失敗通知
36. 設計と実装 github/workflows/sitemap.yml 04
 毎日 サイトマップを更新する ため cron を使って定期実行
37. 設計と実装 github/workflows/sitemap.yml 04
 GCS からサイトマップ 生成に必要なjson 取得
38. サイトマップ生成 設計と実装 github/workflows/sitemap.yml 04

39. 設計と実装 github/workflows/sitemap.yml 04
 生成したサイトマップを 配信用の GCS バケット へアップロード
40. 設計と実装 github/workflows/sitemap.yml 04
 キャッシュ削除
41. 設計と実装 github/workflows/sitemap.yml 04
 生成に失敗したら、 GitHub Actions の実行結果を Slack に通知
42. 設計と実装 出来上がった sitemap 👏 04
 親ファイル 子ファイル
43. 設計と実装 サイトマップをサーチコンソールから登録 04

44. ジャンプTOONについて サイトマップについて サイトマップ生成手法の紹介 設計と実装 01
 02
 03
 04
 CONTENTS まとめと振り返り 05

45. • サイトマップの自動生成を行った ◦ ライブラリやNext.js に用意されている機能を使わず自作した ◦ マンガの作品や話が増えた場合でも、自動でサイトマップファイルがス ケールするように • 全体の設計方針にあるコロケーションの概念とも一致した構成 • 自作コードに対してテストコードもその分必要 ◦ サイトマップを分割するロジックなどはライブラリに頼ってよかったかも まとめと振り返り 05
 まとめと振り返り
46. ジャンプTOONについて ジャンプTOON Web の技術 
 01
 https://developers.cyberagent.co.jp/blog/archives/49294/ https://developers.cyberagent.co.jp/blog/archives/49429/
47. ご清聴ありがとうございました Thank you!