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

Slide 1

Slide 1 text

ジャンプTOONにおけるサイトマップの自動生成手法浅原昌大

Slide 2

Slide 2 text

株式会社サイバーエージェント SGEマンガ事業部 Web フロントエンドエンジニア浅原昌大 @assa1605 @assa1605 2023年サイバーエージェント新卒入社 SGEマンガ事業部に配属あさはらまさひろ

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

ジャンプTOONについてジャンプTOON のサービス紹介   01  2024 年 5 月にサービスを開始オリジナル縦読みマンガ作品や人気作品のタテカラー版を連載中

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Slide 8

Slide 8 text

サイトマップについて XMLサイトマップを作成する上で.. 02  URL の上限件数：50,000件サイズ上限：50MB（圧縮なし）読み込みに上限があるため、上限に達しないよう分割して作成する制約 XML サイトマップの構造は、親ファイルと子ファイルから構成

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

サイトマップ生成手法の紹介 Next.js の sitemap.js 03  https://nextjs.org/docs/app/api-reference/functions/generate-sitemaps sitemap.js 内でデータフェッチして動的なパスも含めることも            

Slide 12

Slide 12 text

サイトマップ生成手法の紹介 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 ..      

Slide 13

Slide 13 text

サイトマップ生成手法の紹介 generateSitemaps 関数  03  https://nextjs.org/docs/app/api-reference/functions/generate-sitemaps sitemap.js 内でデータフェッチして動的なパスも含めることも               これ使えば良さそう 👏

Slide 14

Slide 14 text

サイトマップ生成手法の紹介 Next.js の sitemap.js ちょっと待った... 03  ● URL の分割はできるが、親のインデックスファイルを生成してくれない不都合な点

Slide 15

Slide 15 text

サイトマップ生成手法の紹介 Next.js の sitemap.js ちょっと待った... 03  サイトマップの配信URLを変更できない ● スクレイピングの対象になるため、サイトマップを隠したい ● google bot だけがアクセスできればOK 不都合な点

Slide 16

Slide 16 text

サイトマップ生成手法の紹介 Next.js の sitemap.js ちょっと待った... 03  ● URL の分割はできるが、親のインデックスファイルを生成してくれない ● サイトマップの配信URLを変更できない不都合な点自作スクリプトでサイトマップ生成する

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

設計と実装サイトマップに含める情報 04      有無詳細含めるサイト内の一つのページについての情報を説明する含めるページの最終更新日を記載する (コンテンツが変わった時のみ更新) 含めないページの更新頻度を記載する。 Googleでは無視される。含めないページの優先度合いを示す。 Googleでは無視される。

Slide 20

Slide 20 text

設計と実装ディレクトリ構成 04  上から順に - 定期的にサイトマップを生成するためのワークフローファイル - サイトマップの生成スクリプト - Route 個別のパスを定義 - サイトマップを生成するための固有ロジック

Slide 21

Slide 21 text

設計と実装ディレクトリ構成 04  サイトマップを作成するためのロジック類

Slide 22

Slide 22 text

設計と実装 lib/sitemap/constant.ts 04  サイトマップ作成する上で必要な情報  

Slide 23

Slide 23 text

設計と実装 lib/sitemap/sitemap.ts 04  createSitemapItem URL と更新日を含むオブジェクトを返す

Slide 24

Slide 24 text

設計と実装 lib/sitemap/sitemap.ts 04  getSitemapData サーバーのレスポンスから必要データを取得

Slide 25

Slide 25 text

設計と実装ディレクトリ構成 04  Route 個別の SitemapItem を作成する

Slide 26

Slide 26 text

設計と実装 src/app/_sitemap.ts 04  generatePageSitemapItems シグネチャは統一しておく動的パス　静的パス　

Slide 27

Slide 27 text

設計と実装ディレクトリ構成 04  各 Route の SitemapItem を結合 XMLサイトマップ組み立てる

Slide 28

Slide 28 text

設計と実装 script/sitemap/generate-xml.ts 04  generateSItemapIndexXml 親ファイルのサイトマップのフォーマットに沿った XML を返す

Slide 29

Slide 29 text

設計と実装 script/sitemap/generate-xml.ts 04  generateSitemapXml 子ファイルのサイトマップのフォーマットに沿った XML を返す更新日 (lastmod) のみ含める

Slide 30

Slide 30 text

設計と実装 script/sitemap/ save-split-sitemap.ts 04  saveSplitSitmap Route 個別の sitemapItem と出力先を受け取ってファイルに書き込み url の上限やファイルサイズを考慮しておく

Slide 31

Slide 31 text

設計と実装 script/sitemap/ save-split-sitemap.ts 04  saveSplitSitmap Route 個別の sitemapItem と出力先を受け取ってファイルに書き込み実際にファイルに書き込み

Slide 32

Slide 32 text

設計と実装 script/sitemap/save-split-sitemap.ts 04  writeToFile ファイルパスと中身をファイルに書き込む writeSitemapFile ファイル番号を受け取れるようにして writeToFile 関数を呼ぶ

Slide 33

Slide 33 text

設計と実装 script/sitemap/save-split-sitemap.ts 04  createSitemapFile サイトマップを生成する Route 個別の sitemapItem を saveSplitSitmap 関数に受け渡し

Slide 34

Slide 34 text

設計と実装 script/sitemap/purge-fastly-cache.sh 04  一部コード省略サイトマップは、CDN(fastly) でキャッシュしている。 purge_cache サロゲートキーが諸事情で使えなかったので、一時的に作ったパージ用のスクリプト

Slide 35

Slide 35 text

設計と実装ディレクトリ構成 04  定期バッチ、GCSに転送、失敗通知

Slide 36

Slide 36 text

設計と実装 github/workﬂows/sitemap.yml 04  毎日サイトマップを更新するため cron を使って定期実行

Slide 37

Slide 37 text

設計と実装 github/workﬂows/sitemap.yml 04  GCS からサイトマップ生成に必要なjson 取得

Slide 38

Slide 38 text

サイトマップ生成設計と実装 github/workﬂows/sitemap.yml 04 

Slide 39

Slide 39 text

設計と実装 github/workﬂows/sitemap.yml 04  生成したサイトマップを配信用の GCS バケットへアップロード

Slide 40

Slide 40 text

設計と実装 github/workﬂows/sitemap.yml 04  キャッシュ削除

Slide 41

Slide 41 text

設計と実装 github/workﬂows/sitemap.yml 04  生成に失敗したら、 GitHub Actions の実行結果を Slack に通知

Slide 42

Slide 42 text

設計と実装出来上がった sitemap 👏 04  親ファイル子ファイル

Slide 43

Slide 43 text

設計と実装サイトマップをサーチコンソールから登録 04 

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

● サイトマップの自動生成を行った ○ ライブラリやNext.js に用意されている機能を使わず自作した ○ マンガの作品や話が増えた場合でも、自動でサイトマップファイルがスケールするように ● 全体の設計方針にあるコロケーションの概念とも一致した構成 ● 自作コードに対してテストコードもその分必要 ○ サイトマップを分割するロジックなどはライブラリに頼ってよかったかもまとめと振り返り 05  まとめと振り返り

Slide 46

Slide 46 text

ジャンプTOONについてジャンプTOON Web の技術   01  https://developers.cyberagent.co.jp/blog/archives/49294/ https://developers.cyberagent.co.jp/blog/archives/49429/

Slide 47

Slide 47 text

ご清聴ありがとうございました Thank you!