操作方法 - RSS機能

• RSSとは

  RSS（Rich Site Summary）は、ブログやニュースの更新情報を自動取得できるツールです。

  実際のウェブページを開かなくても、更新された情報をリアルタイムでアプリに反映することができます。

  Yappliでは、RSSを使って自動で更新されるコンテンツを作ることができます。
  例えば、Twitterの最新記事を表示したり、ブログやニュースの常に最新の情報を発信できます。

  また、弊社側で「RSSフィード」の生成も対応しております。
  本機能はオプション機能となりますので、詳細は下記フォームよりお問合わせください。
  
  お問い合わせフォーム

• RSSを組み込める機能

  RSSを組み込める機能は、フリーレイアウト機能・ショップ機能・ニュース機能・Block UI機能の4つです。

  

  左図：フリーレイアウト機能を使って、動きのあるホーム画面を作る

  中図：ショップ機能を使って、店舗のブログやニュースを表示させる

  右図：ニュース機能を使って、簡単に情報発信ページを作る 

• RSSを取得する

  ウェブサイト等からのRSS取得方法

  RSSはURLの形で表示されます。以下のオレンジ色のRSSアイコンを探しましょう。

  

  アメブロや WordPress など、有名なブログ制作サイトやウェブ制作ツールではデフォルトでRSSが設定されている場合があります。
  デフォルトでの設定の可否は、各コンテンツ元にご確認をお願いいたします。

  取得したいウェブサイトのRSSがわからないときは、無料で利用できるRSS検出ツールを使ってみましょう。

   

• RSSをアプリに組み込む

  RSSを取得した後は、下記のルールに則って設定します。

   

  フリーレイアウト機能、ショップ機能にRSSを組み込む

  フリーレイアウト機能やショップ機能にRSSを組み込む場合は、以下のルールでコードを入力します。

  RSS組み込み

  rss(rssのURL,表示する数,文字数)

  タイトルと本文それぞれ文字数指定する場合のRSS組み込み

  rss(rssのURL,表示する数,タイトルの文字数:本文の文字数)

  CSS上書き設定のRSS組み込み

  rss_webview(ウェブビュー機能ID,rssのURL,表示する数,文字数)

  参考：『RSSにCSS上書き設定を反映させる』

   

  組み込みたい記事のURL「https://yapp.li/」、表示させたい内容「最新5記事、タイトルの文字数 10文字、本文の文字数 100文字」の場合、コードは以下となります。

  rss(https://news.yappli.co.jp/rss,5,10:100)

  rss_webview(aaaaaaa,https://yapp.li/blog/feed/,5,10:100)

   

   

  ニュース機能でRSSを組み込む

  ニュース機能でブログやツイッターのRSSを組み込むときは、文字数や記事数を指定する必要はありません。RSSのURLを、赤枠内に入力するだけで組み込みが可能です。

   

   

  リンク先での挙動-iOSアプリ

  アプリ内ウェブビュー機能でリンク先が開かれます。

  RSSのリンク先を外部ブラウザ（Safari）で開きたい場合は、末尾に「1」を追加します。

  rss(rssのURL,表示する数,文字数,1)

  この設定をした場合、Androidのバージョンによって挙動が異なりますので、下記をご参考ください。

   

   

  リンク先での挙動-Androidアプリ  10.52.0以降

  アプリ内ウェブビュー機能でリンク先が開かれます。

  iOS/Android共に外部ブラウザ（Safari）で開きたい場合は、末尾に「1」を追加します。

  rss(rssのURL,表示する数,文字数,1)

  アプリのアップデートを行われたい場合は、以下サポートページをご参考ください。

  参考：『アプリを再申請する』

   

   

  リンク先での挙動-Androidアプリ  10.52.0未満

  外部ブラウザでリンク先が開かれます。

• RSSにCSS上書き設定を反映させる

   

  他のウェブビュー機能で設定したCSS上書き設定を、フリーレイアウトで指定したRSSに反映させる事ができます。

   

  RSSにCSS上書き設定を反映させる場合のルールは以下の通りです。

  rss_webview(ウェブビュー機能ID,rssのURL,表示する数,文字数)
  rss_webview(ウェブビュー機能ID,rssのURL,表示する数,タイトルの文字数:本文の文字数)

   

  上記の様に「rss_webview」という名称を使用することで、指定したウェブビュー機能のCSS上書き設定をRSSに反映させることが出来ます。

   

  ヒント

  • 「ウェブビュー機能ID」には、「設定したいCSS上書き設定」が登録されているウェブビュー機能のURL末尾の英数字8桁を入力してください。
    例：CSS上書きを設定しているウェブビュー機能のURLが「https://c.yapp.li/apps/content/webview?sku=11111111&id=aaaaaaa」の場合、
    ウェブビュー機能IDは「aaaaaaa」となります。
  • 通常のRSS設定方法は、以下のサポートページを御覧ください
    参考：『RSSをアプリに組み込む』

• 推奨されている形式 - RSS機能

  フリーレイアウト機能・ショップ機能が受け付けるRSSの形式

  <?xml version="1.0" encoding="utf-8"?>
  <rss version="2.0">
      <channel>
          <item>
          <title>【タイトルに入る文字列】</title>
          <description>
               <![CDATA[
                   <img src="【背景画像のURL】">　【本文に入る文字列】
               ]]>
          </description>
          <link>
              【リンク先のURL】＋トラッキング用パラメータ（UTM等）
          </link>
          </item>
         ...(itemの繰り返し)
      </channel>
  </rss>

   

  Block UIレイアウトブロックが受け付けるRSSの形式

  <?xml version="1.0" encoding="utf-8"?>
  <rss version="2.0">
      <channel>
          <item>
          <title>【タイトルに入る文字列】</title>
          <description>
               <![CDATA[
                   <img src="【背景画像のURL】">　【本文に入る文字列】
               ]]>
          </description>
          <link>
              【リンク先のURL】＋トラッキング用パラメータ（UTM等）
          </link>
          <pubDate>
              【日付】
          </pubDate>
          </item>
         ...(itemの繰り返し)
      </channel>
  </rss>

   

  ヒント

  • <item>タグは繰り返すことにより複数入れることができます。
  • <title>、<description>およびその中の<![CDATA]>、<link>、はそれぞれ値が入っていれば認識し、なければ認識されません。
  • 上記タグ郡は省略することも可能です。省略された場合は無視され、対応する欄に値は何も入りません。
  • Windows での改行【 \r\n(CRLF)】は正しく動作しない可能性があります。mac(unix) の改行【\n(LF)】をご利用ください。

   

  RSSに含まれる画像の推奨形式

  RSSに含まれる画像については「JPEG/PNGを推奨」としています。
  その他形式の画像、正しい拡張子がついていない画像については、動作対象外となります。

   

   

  その他オプション

  弊社側で「RSSフィード」の生成も対応しております。
  オプション機能となりますので、詳細は以下フォームよりお問い合わせください。
  
  お問い合わせフォーム

   

   

  更新履歴

  • 2023年7月6日　Block UIレイアウトブロックが受け付けるRSSの形式を追加

• アプリでの見え方 - RSS機能

  フリーレイアウト機能を使って、RSSを表示させる

  

   

   

  ショップ機能を使って、店舗のブログやニュースを表示させる

  

   

   

  ニュース機能を使って、簡単に情報発信ページを作る

  ニュース機能でブログやツイッターのRSSを組み込むときは、文字数や記事数を指定する必要はありません。RSSURLなどを、赤枠内に入力するだけで組み込みが可能です。

  

• フリーレイアウト機能を使ったレイアウト5選 - RSS機能

  フリーレイアウト機能にRSSを組み込む際には、同じRSSでも様々なレイアウトで表示することができます。

  ここでは、以下のようなレイアウトを実現するための具体的なフリーレイアウト機能の設定方法についてご紹介します。

   

  ①タイトルだけを表示させる

  ②画像とタイトルを横一列に配置する

  ③画像とタイトル・本文を表示させる

  ④画像と文字を複数列で配置する

  ⑤画像だけを表示させる

   

   

  RSS機能のレイアウトを設定する前に

  • 使用するRSSを用意しましょう。事前にRSSの推奨される形式をご確認ください。
    参考：『RSSとは』『推奨されている形式 - RSS機能』
    今回は Yappli note のRSS  [https://news.yappli.co.jp/rss]を例として使用します。
    
  • 前提としてフリーレイアウト機能を使用いたします。フリーレイアウト機能の操作方法については下記サポートページをご覧ください。
    参考：『フリーレイアウト機能とは』

   

   

  ①タイトルだけを表示させる

  1. RSSに組み込むコードの「表示させる文字数」を「0」に設定します。例えば、表示したい記事数が6の場合は以下となります。
     rss(https://news.yappli.co.jp/rss,6,0)
  2. 「詳細設定」より、画像の繰り返しを「有効」に設定します。
     
     

   

   

  ②画像とタイトルを横一列に配置する

  1. RSSを組み込んだブロックの「詳細設定」をクリックします。
  2. 「画像の幅」を任意のサイズに変更いたします。ここでは30％に設定いたします。
     

  ヒント

  • 画像が表示されない場合は、「画像の幅」が「背景」になっていないかをご確認ください。
  • それでも表示されない場合は、RSSの記述内に「img src="」ではじまる記述があるかをご確認ください。
    参考：『推奨されている形式 - RSS機能』
  • RSSに画像がない場合でも、ブロックに画像を設定しておくことで、デフォルトで表示される画像を設定することができます。
    

   

   

  ③画像とタイトル・本文を表示させる

  RSSで取得できる情報は、「タイトル」と「本文」に分かれています。

  本文の内容を表示させたい場合は、以下のように本文に表示する文字数を設定します。

  rss(https://news.yappli.co.jp/rss,6,100)

   

  

  ヒント

  • タイトル・本文は、「詳細設定」よりそれぞれフォントサイズや色・配置を自由に変更することができます。
  • ここではわかりやすいようにタイトルを青色に設定しています。

   

   

  ④画像と文字を複数列で配置する

  画像のように縦2列や3列に並べて、RSSを表示する方法です。

  1. RSSを組み込んだブロックの「詳細設定」をクリックします。
  2. 「画像の繰り返し」を「無効」にします。
  3. 「カラムの幅」を変更します。2列であれば1/2、3列であれば1/3を選択します。
  4. パディング（内側の余白）を調整し、タイトル・本文の表示位置を調整します。RSSで取得している画像の高さに合わせて、一番左の"上の余白"に任意の数字を入れます（目安：100〜200程度）。
     
     

  ヒント

  • RSSで取得する画像のサイズは全て同じ、または同程度のサイズを推奨しております。異なるサイズですとレイアウトが崩れる可能性がございますので、予めご確認ください。
  • 4.で画像を表示させる際は、プレビューヤプリを使って画像がきれいに表示されるように余白サイズを調整しましょう。

   

   

  ⑤画像だけを表示させる

  1. RSSを組み込んだブロックの「詳細設定」をクリックします。
  2. 「画像の繰り返し」を「無効」にします。
  3. 「タイトルカラー」「本文カラー」を"0%"に設定します。
  4. 必要に応じて「マージン」を設定します。
     ここでは記事と記事の間に余白を作るために「10 10 10 10」と設定します。
     

  ヒント

  • RSSに組み込むコードの「表示させる文字数」を入力しているとその分の余白が生まれます。画像だけを表示させたいは場合は「表示させる文字数」を0にすることを推奨します。