WEBVTT

1
00:00:00.000 --> 00:00:00.919
こんにちは。

2
00:00:00.919 --> 00:00:04.287
今回は、ジェネレートメタデータの使い方です。

3
00:00:04.287 --> 00:00:09.340
ウェブサイトでは、ページごとにタイトルや説明文が違うのが普通です。

4
00:00:09.340 --> 00:00:15.771
記事のページなら記事の見出しを、商品のページなら商品名をタイトルにしたいところです。

5
00:00:15.771 --> 00:00:19.599
手作業でページごとに書く代わりに、データから自動で組み立ててくれるのが、

6
00:00:19.599 --> 00:00:23.427
ジェネレートメタデータです。

7
00:00:23.427 --> 00:00:29.092
タイトル、ディスクリプションと呼ばれる説明文、そしてSNSで共有されたときの表示、

8
00:00:29.092 --> 00:00:34.757
いわゆるオージーピーの情報を、ページのデータに合わせて生成します。

9
00:00:34.757 --> 00:00:41.188
今回は、記事のコードを読みながら、本文とメタデータを一致させる考え方まで押さえます。

10
00:00:41.188 --> 00:00:42.154
まず前提です。

11
00:00:42.154 --> 00:00:48.637
この記事の例は、ネクストジェイエス十五以降の非同期リクエストエーピーアイに合わせた書き方です。

12
00:00:48.637 --> 00:00:54.569
ネクストジェイエス十六では、キャッシュコンポーネンツを有効にしない構成を前提とします。

13
00:00:54.569 --> 00:01:01.191
タイプスクリプトは五・二以降で、利用するネクストジェイエスが対応するノードジェイエスを使います。

14
00:01:01.191 --> 00:01:07.674
配置先は、アプリ直下にレイアウト・ティーエスエックスを備えたアップルーターのプロジェクトです。

15
00:01:07.674 --> 00:01:15.124
ページズルーターとは配置先も実行場所も異なるため、プロジェクトのルーターとバージョンを先に確認してください。

16
00:01:15.124 --> 00:01:19.952
ジェネレートメタデータは、ブラウザーではなくサーバー側で動く機能です。

17
00:01:19.952 --> 00:01:21.884
引数と戻り値を整理します。

18
00:01:21.884 --> 00:01:31.247
ジェネレートメタデータは、ページのプロップスと同じ形の引数を受け取り、その中には動的ルートの値であるパラムスなどが含まれます。

19
00:01:31.247 --> 00:01:34.367
戻り値は、メタデータ型のオブジェクトです。

20
00:01:34.367 --> 00:01:41.798
非同期関数として書く場合は、プロミス・メタデータ、つまりメタデータを返すプロミスが戻り値になります。

21
00:01:41.798 --> 00:01:43.284
使い分けも大切です。

22
00:01:43.284 --> 00:01:49.377
どのページでも変わらない固定の情報は、メタデータという名前でそのまま書き出します。

23
00:01:49.377 --> 00:01:56.214
一方、記事や商品のようにページごとに変わる動的な情報は、ジェネレートメタデータで生成します。

24
00:01:56.214 --> 00:01:58.740
この役割分担が、設計の出発点です。

25
00:01:58.740 --> 00:02:00.917
記事のコードの前半、土台の部分です。

26
00:02:00.917 --> 00:02:06.723
ファイルは、アプリ、アイテムズ、角括弧スラッグというフォルダーのページ・ティーエスエックスです。

27
00:02:06.723 --> 00:02:12.771
まず、ネクストからメタデータ型を読み込み、見つからない場合に使うノットファウンドも読み込んでいます。

28
00:02:12.771 --> 00:02:18.819
アイテムズという対応表には、スラッグのノートブックに対して、学習ノートというタイトルが入っています。

29
00:02:18.819 --> 00:02:24.021
プロップスの型では、パラムスがスラッグという文字列を持つプロミスであることを表します。

30
00:02:24.021 --> 00:02:28.254
ジェネレートスタティックパラムスで生成対象を列挙し、ダイナミックパラムスをフォルスにして、

31
00:02:28.254 --> 00:02:32.488
それ以外のスラッグを受け付けないようにしています。

32
00:02:32.488 --> 00:02:34.347
コードの後半、生成の本体です。

33
00:02:34.347 --> 00:02:40.048
ジェネレートメタデータは非同期関数で、最初にパラムスをアウェイトしてスラッグを取り出します。

34
00:02:40.048 --> 00:02:43.147
次に、対応表からそのスラッグのタイトルを引きます。

35
00:02:43.147 --> 00:02:48.600
タイトルがなければノットファウンドを呼んで、見つからないページとして処理を切り替えます。

36
00:02:48.600 --> 00:02:54.797
タイトルがあれば、タイトルそのものと、タイトルに説明文の文言をつないだディスクリプションを返します。

37
00:02:54.797 --> 00:02:57.647
スライドでは、テンプレート文字列を文字列の連結に置き換えて表示していますが、

38
00:02:57.647 --> 00:03:00.498
意味は同じです。

39
00:03:00.498 --> 00:03:03.596
この戻り値が、そのままページの頭の情報になります。

40
00:03:03.596 --> 00:03:05.397
実行結果を確認します。

41
00:03:05.397 --> 00:03:10.308
アイテムズ・スラッシュ・ノートブックを開くと、ブラウザーのタイトルに学習ノートが入り、

42
00:03:10.308 --> 00:03:15.219
ディスクリプションも生成されます。

43
00:03:15.219 --> 00:03:20.049
ページ本体も同じパラムスをアウェイトし、同じ対応表から見出しを表示するので、

44
00:03:20.049 --> 00:03:24.878
タイトルと本文の見出しが自然に一致します。

45
00:03:24.878 --> 00:03:29.135
もう一つ知っておきたいのが、親レイアウトの影響です。

46
00:03:29.135 --> 00:03:35.438
親のレイアウトにタイトルのテンプレート、つまりサイト名を後ろに付けるような決まりがある場合は、

47
00:03:35.438 --> 00:03:41.740
その決まりも適用されたうえで、最終的なタイトルが決まります。

48
00:03:41.740 --> 00:03:46.488
生成した値だけを見て、最終表示と違うと慌てないでください。

49
00:03:46.488 --> 00:03:49.770
オージーピーと、メタデータベースについてです。

50
00:03:49.770 --> 00:03:55.978
SNSで共有されたときに表示される画像、いわゆるオーグ画像のユーアールエルを追加する場合は、

51
00:03:55.978 --> 00:04:02.185
絶対ユーアールエルで書くか、メタデータベースという土台のアドレスと組み合わせます。

52
00:04:02.185 --> 00:04:09.177
メタデータベースを設定しておけば、相対パスで書いた画像も、正しい絶対ユーアールエルに解決されます。

53
00:04:09.177 --> 00:04:14.600
設定を忘れると、画像の場所が解決できず、共有時に画像が出ないことがあります。

54
00:04:14.600 --> 00:04:22.306
そして、指定した画像が実際に公開されているか、エイチティーティーピーで正しく応答するかまで確認してください。

55
00:04:22.306 --> 00:04:25.588
コードに書いただけでは、表示は保証されません。

56
00:04:25.588 --> 00:04:27.719
つまずきやすい点の一つ目です。

57
00:04:27.719 --> 00:04:34.823
ジェネレートメタデータはサーバー側で使う機能なので、クライアントコンポーネントからは書き出せません。

58
00:04:34.823 --> 00:04:41.501
よくある間違いが、操作ボタンを置くためにページ全体へユースクライアントを付けてしまうことです。

59
00:04:41.501 --> 00:04:45.479
そうすると、サーバー専用の書き出しと衝突してしまいます。

60
00:04:45.479 --> 00:04:51.233
対策はシンプルで、ページ自体はサーバーコンポーネントのままにし、クリック操作が必要な部分だけを子コンポーネントに切り出して、

61
00:04:51.233 --> 00:04:56.987
そちらにユースクライアントを付けます。

62
00:04:56.987 --> 00:05:02.528
ページ全体の性質を変えるのではなく、必要な部分だけを分ける、という考え方です。

63
00:05:02.528 --> 00:05:04.801
二つ目は、内容の誠実さです。

64
00:05:04.801 --> 00:05:12.271
実務では、本文とメタデータが同じ商品や記事を参照するように、データの取得処理を共通化します。

65
00:05:12.271 --> 00:05:17.629
片方だけが更新されて、タイトルと本文が食い違う事態を防ぐためです。

66
00:05:17.629 --> 00:05:23.312
また、実際の本文にない情報や、過大な説明を盛り込むのも避けてください。

67
00:05:23.312 --> 00:05:30.132
キーワードを詰め込んでも効果はなく、ページ固有の内容を短く正確に表すことが基本です。

68
00:05:30.132 --> 00:05:37.764
なお、メタデータを整えただけで、検索順位やエーアイ検索への採用が保証されるわけではありません。

69
00:05:37.764 --> 00:05:41.661
表示の土台を整える作業だと理解しておきましょう。

70
00:05:41.661 --> 00:05:46.288
タイトルと説明文は、開く前にそのページの中身を正しく予告するもの、と考えると、

71
00:05:46.288 --> 00:05:50.916
盛りすぎない書き方が自然と選べます。

72
00:05:50.916 --> 00:05:52.763
静的出力と確認課題です。

73
00:05:52.763 --> 00:05:57.844
今回の例は、ビルド時に値を確定できるため、静的出力に組み込めます。

74
00:05:57.844 --> 00:06:04.618
ただし、シーメス、シーエムエスの更新などで値を変えた場合は、再ビルドと再配置が必要です。

75
00:06:04.618 --> 00:06:08.775
確認課題として、タイトルを変更し、本文のエイチワンと、ヘッドのタイトル、

76
00:06:08.775 --> 00:06:12.932
ディスクリプションを比べてください。

77
00:06:12.932 --> 00:06:20.629
オージーピーを加えたら、画像のエイチティーティーピー応答と、SNS側のキャッシュを分けて確認します。

78
00:06:20.629 --> 00:06:26.403
開発サーバーだけでなく、本番用ビルドと公開先でも、ユーアールエルを直接開く場合とリンクから移る場合、

79
00:06:26.403 --> 00:06:32.176
値がない場合と不正な値の場合を分けて試しましょう。

80
00:06:32.176 --> 00:06:32.990
まとめです。

81
00:06:32.990 --> 00:06:37.739
ジェネレートメタデータは、アップルーターでページごとのタイトル、ディスクリプション、

82
00:06:37.739 --> 00:06:42.488
オージーピーを、データから生成するサーバー側の関数です。

83
00:06:42.488 --> 00:06:48.323
パラムスをアウェイトして値を取り出し、メタデータ型のオブジェクトを返すのが基本形です。

84
00:06:48.323 --> 00:06:54.700
固定情報はメタデータ、動的情報はジェネレートメタデータと分け、本文とは同じデータ源を使います。

85
00:06:54.700 --> 00:06:59.720
クライアントコンポーネントからは書き出さず、オーグ画像はメタデータベースや絶対ユーアールエルと合わせて、

86
00:06:59.720 --> 00:07:04.741
実際に公開されているかまで確認してください。

87
00:07:04.741 --> 00:07:07.455
これでジェネレートメタデータは完了です。

88
00:07:07.455 --> 00:07:08.676
お疲れさまでした。

89
00:07:08.676 --> 00:07:12.068
次回はジェネレートスタティックパラムスを学びます。