Skip to content
English 日本語

Letterboxd RSS を使って最新の映画鑑賞記録を表示する

Nov 10, 2025

・javascript

映画の鑑賞記録や観たいリストの保存などができる Letterboxd では公式のRSSフィードが提供されています。 取得できる情報は限られていますが、RSSフィードを利用して自分のサイトなどに最新の映画鑑賞リストを表示することが可能です。

RSSフィード

Letterboxdの自分のプロフィールURLに rss を追加するだけです。

  • プロフィールURL: https://letterboxd.com/sample/
  • RSSフィード: https://letterboxd.com/sample/rss/

取得できる情報は最新のDiary映画記録50本とリスト3件です。

実装方法

1. ライブラリのインストール

RSSフィードはXMLでそのままでは扱いにくいためライブラリを使用してJSONに変換します。 ここでは軽量の fast-xml-parser を使用します。

npm i fast-xml-parser

2. データ取得とJSONへの変換

fetch() を使用してRSSフィードのデータを取得して、1でインストールしたライブラリでJSONに変換します。

// RSSフィード取得
const response = await fetch("https://letterboxd.com/<YOUR_LETTERBOXD_ID>/rss/");
const xmlText = await response.text();

// JSONへ変換
const parser = new XMLParser();
const result = parser.parse(xmlText);

// 最新の映画鑑賞記録データを取得
const items = result.rss?.channel?.item;

各アイテムのデータの例です。

{
  title: 'Sinners, 2025 - ★★½',
  link: 'https://letterboxd.com/<YOUR_LETTERBOXD_ID>/film/sinners-2025/',
  guid: [Object],
  pubDate: 'Fri, 9 May 2025 09:27:02 +1200',
  'letterboxd:watchedDate': '2025-05-08',
  'letterboxd:rewatch': 'No',
  'letterboxd:filmTitle': 'Sinners',
  'letterboxd:filmYear': 2025,
  'letterboxd:memberRating': 2.5,
  'tmdb:movieId': 1233413,
  description: ' <p><img src="https://a.ltrbxd.com/resized/film-poster/1/1/1/6/6/0/0/1116600-sinners-2025-0-600-0-900-crop.jpg?v=5996b7d555"/></p> <p>Watched on Thursday May 8, 2025.</p> ',
  'dc:creator': 'YOUR_LETTERBOXD_ID'
}

3. データを表示する

取得したJSONデータから必要な情報を抜き出したり、実際の表示に合わせてフォーマットします。

リストの最初の3件のみ表示したい場合は slice() を使用します。

items.slice(0, 3)

各プロパティはキーを指定して取得します。

item["letterboxd:filmTitle"] // => Sinners

タイトル、公開年、自分の評価を取得する例です。

const movies: Movie[] = items.slice(0, 3).map((item: any) => {
  return {
    title: item["letterboxd:filmTitle"],
    year: item["letterboxd:filmYear"],
    rating: Number(item["letterboxd:memberRating"]),
  };
});

上記でフォーマットした movies は以下のような配列になります。

movies: [
  {
    name: 'The Mastermind',
    year: 2025,
    rating: 2.5,
  },
  {
    name: 'Frankenstein',
    year: 2025,
    rating: 3,
  },
  {
    name: 'Pillion',
    year: 2025,
    rating: 3.5,
  },
]

4. ポスター画像を表示する

ポスター画像は description の <img /> にあります。

description: ' <p><img src="https://a.ltrbxd.com/resized/film-poster/9/5/8/1/0/0/958100-frankenstein-2025-0-600-0-900-crop.jpg?v=49a1ca2305"/></p> <p>Watched on Monday November 10, 2025.</p> ',

description からポスター画像のURLを取り出す関数を作成しました。

function getPosterPath(text: string): string {
  const parser = new XMLParser({
    ignoreAttributes: false,
  });
  const doc = parser.parse(text);
  if (doc.p) {
    const firstP = Array.isArray(doc.p) ? doc.p[0] : doc.p;
    if (firstP.img && firstP.img["@_src"]) {
      return firstP.img["@_src"];
    }
  }

  return "";
}

先ほどのデータに追加します。

const movies: Movie[] = items.slice(0, 3).map((item: any) => {
  return {
    title: item["letterboxd:filmTitle"],
    year: item["letterboxd:filmYear"],
    rating: Number(item["letterboxd:memberRating"]),
    poster: getPosterPath(item.description),
  };
});

5. 鑑賞順に並べ替える

デフォルトでは更新した順にリストは並んでいます（2週間前の映画を今日更新した場合、その映画がリストの先頭にある）。鑑賞した日付順にしたい場合は toSorted() を使用してリストを並べ替えます。

// アイテムを並び替え
const sortedItems = items.toSorted(
  (a: any, b: any) =>
    Date.parse(b["letterboxd:watchedDate"]) -
    Date.parse(a["letterboxd:watchedDate"])
);

// 並び替え後のアイテムに差し替える
const movies: Movie[] = sortedItems.slice(0, limit).map((item: any) => {
  ...
});

6. 画面での表示

Reactなどで表示する場合の例です。

{
  movies.map((movie) => (
    <>
      <img src={movie.poster} alt={movie.name} />
      <p>{movie.name}</p>
      <p>{movie.year}</p>
      <div>{movie.rating && `★ ${movie.rating}`}</div>
    </>
  ));
}

まとめ

公式のRSSフィードがあるおかげで鑑賞記録をサイトに表示することができました。

実際にLetterboxdのRSSフィードで取得した映画の鑑賞リストの表示例です。

Tags

how-to react typescript