メインコンテンツにスキップ

RSS連携(RSSリスト)

noteなどの外部サービスのRSS記事リストをStudioで作成したサイト上に自動表示することができます。 この記事では、RSS URLの追加、リストの配置、データの紐付けと更新方法について説明します。

今日アップデートされました

プロジェクトに追加したRSSを動的リストに紐付けて配置すると、外部サービス側の更新内容がStudioサイト上のリストにも自動で反映されます。

RSSリストは、アイテム表示数やデザインなどのカスタマイズも可能です。

注意:

RSS URLにはタイトルや要約などの情報が含まれますが、その内容は出力元サービスによって異なります。 RSS URLに含まれていない情報はStudio側では表示できないため、出力される情報の詳細はRSS URLを取得したサービスへ問い合わせてください。

関連記事


取得したRSS URLを追加する

  1. 外部サービスやRSS取得サービスを使い、ユーザーやマガジンなどのRSSリンクを取得します。

  2. Studioでデザインエディタを開きます。

  3. エディタ画面左のナビゲーションから、[接続]アイコンを選択します。

  4. [RSS]タブを選択します。

  5. [新規RSSを追加]をクリックし、表示されたRSSリンク入力欄に取得したRSS URLを入力して[OK]をクリックします。

  6. 追加したRSSのサンプルボックスが左側のRSSメニューに表示されます。

  7. サンプルボックスをスクリーンにドラッグ&ドロップすると、RSSリストがサイト上に埋め込まれます。

サイト上に表示できるRSSの最大表示件数は20件です。 表示件数を増やしたい場合は、ボックスのレイアウトやページ構成を調整してください。


プロパティ(変数データ)の紐付け

配置したRSS埋め込みボックスには、デフォルトでカバー画像や記事タイトルなどが表示されます。 これらはRSSから取得したデータをプロパティとして要素ごとに紐付けて表示しています。

テキストや画像などに紐付けるプロパティは、RSSが持っているデータの中から変更できます。 不要な要素は削除し、必要な要素には別のプロパティを設定することで、一覧の構成を柔軟に調整できます。

紐付けは、右パネル内の各種設定パネルで行います。


フィルタを活用する

表示するデータに対してフィルタを設定すると、日付のフォーマットや表示する文字数を指定するなど調整が可能です。詳しくは、プロパティの文字列フィルタをご覧ください。


サンプルボックスの更新

公開サイトではRSSボックスは都度最新の状態を読み込んで表示します。

ただし、エディタやライブプレビューで確認できるサンプルボックスの表示内容の更新には手動での操作が必要です。追加パネル RSSメニューにて、更新ボタンをクリックします。


RSSデータの切り替え

1つのプロジェクトには、最大3件までRSSを登録できます。 この上限はサイト全体の件数であり、ページごとに3件までではない点に注意してください。

RSSデータの切り替えは、右パネル上の[データ]パネルから行います。

  1. RSSリストを選択します。

  2. 右パネルで[データ]タブを選択します。

    パネルが閉じている場合には、右パネルを開いてください。

  3. [リスト]に紐付いているデータをクリックし、RSSデータを切り替えてください。


アメブロ note

こちらの回答で解決しましたか?