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

RSS連携(RSSリスト)

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

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

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

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

注意:

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

関連記事


取得したRSS URLを追加する

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

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

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

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

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

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

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


RSSで取得した変数データ(プロパティ)を紐付ける

追加したRSSリストに、連携した変数データ(プロパティ)を紐付けます。

1. リストアイテム内のボックス要素を選択する

変数データ(プロパティ)を紐付けたいRSSリスト内のボックス要素を選択します。

紐付けるデータの内容により、使用するボックスが変わります。

2. 右パネルで各要素に合わせた設定タブを開く

右パネルで、選択した要素に合わせた設定タブを開きます。パネルが閉じている場合には、右パネルを開いてください。

  • 画像ボックス:[画像]タブ

  • テキストボックス:[テキスト]タブ

3. 各要素の設定欄で変数データ(プロパティ)を選択して紐付ける

各タブ内の設定入力欄でプロパティリストから紐付ける変数データ(プロパティ)を選択します。

  • 画像ボックス:[URL]入力欄

  • テキストボックス:[テキスト]入力欄

注意:ダミープロパティが紐付いている場合

RSSリストの各種要素に、media_thumbnail などのダミープロパティがデフォルトで紐付けられている場合があります。

以下の手順で、ダミープロパティから紐付け済みの変数データ(プロパティ)への置き換えを行なってください。

  1. リストアイテム内のボックス要素を選択します。

  2. 右パネルで各要素に合わせた設定タブを開きます。画像ボックスの場合は[画像]タブ、テキストボックスの場合には[テキスト]タブを開きます。

  3. 設定欄をクリックし、変数データ(プロパティ)リストから対象の要素に紐付けたいデータを選択します。


フィルタを活用する

表示するデータに対してフィルタを設定すると、日付のフォーマットや表示する文字数を指定するなど調整が可能です。

詳しくは、プロパティの文字列フィルタをご覧ください。


サンプルボックスの更新

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

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


RSSデータの切り替え

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

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

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

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

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

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


アメブロ note

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