【第8回 RSSフィード設定・小ワザ集  RSSフィード/Twitterフィード 編】

 

もっさん：こんにちは、アプリデザインチームです！今回は、更新された情報をリアルタイムでアプリに反映することができるRSSフィード / Twitterフィードについてご紹介します。 

 

パイセン：RSS（Rich Site Summary）とは、ブログやニュースの更新情報を自動取得できるツールですね！ 

 

もっさん：はい！設定するだけで自動更新されてとても便利です！RSSフィード / Twitterフィードが設定できる機能は、フリーレイアウト機能、ショップ機能、ニュース機能の3つです。

 

 

パイセン：実はショップ機能やニュース機能にも設定できるんです！活用方法によっては、ショップ情報と一緒に店舗ブログの表示もできちゃいますね。

 

もっさん：基本設定はどれも同じですが、今回は一番事例の多いフリーレイアウト機能の実装方法をご紹介します〜！

 

 

 

①RSSの取得方法

 

もっさん：RSSの取得には、ウェブサイト側でRSS設定が行われていることが必須です。

RSSが設定されているサイトには、下図のオレンジ色のRSSアイコンが表示されていることがあります。アメブロやWordPressなどの有名なブログ制作サイトやウェブ制作ツールでは、デフォルトでRSSが設定されています。

 

 

パイセン：ウェブサイトにRSSが設定されているか分からない場合は、無料のRSS検出ツールで調べることができます！

 

RSS検出ツールはこちら＞  ※外部サイトが開きます

 

 

②管理画面上のRSSフィードの設定方法

 

RSSを設定したいフリーレイアウト機能を開き、新規ブロックのタイトル欄に下記の文字列を入力します。

RSS(①で取得したRSSのURL,表示したい記事数,表示したい文字数) 

 

※設定した文字数を越えると、アプリ画面上では「…」という表記で省略されます。

 

もっさん：これだけでRSSフィードの設定が完了です！あとは詳細設定から画像の幅、文字サイズや色味、カラムの設定などの調整を行います。

 

 

 

 

もっさん：続いてTwitterフィードの設定です。ヤプリではTwitterのみ個別のRSS取得に対応しているため、 とっても簡単に設定することができちゃうんです〜！

※Twitter社の今後の仕様変更によっては、対応できなくなる可能性がございます。

 

 

■管理画面上のTwitterフィードの設定方法

 

Twitterフィードを設定したいフリーレイアウト機能を開き、新規ブロックのタイトル欄に下記の文字列を入力します。

twitter(取得したいアカウント名,表示したい記事数,表示したい文字数)

 

※設定した文字数を越えると、アプリ画面上では「…」という表記で省略されます。

 

 

パイセン：アカウント名を指定するだけでいいなんて本当に楽ちんですよね！

 

 

 

 

もっさん：また、今回ご紹介した機能を活かしたレイアウト例もご紹介します！ 

 

 

 

 

■設定方法

 

① 設置したいフリーレイアウト機能にRSSフィード/Twitterフィードを設定

 

 

 

② 詳細設定からカラムの幅を設定

デフォルトは「１」になっており、▼をクリックすると変更できます。 

 

 

※カラム幅の設定方法について、詳しくは【vol.6】2〜３カラムの設定で画面にメリハリをつける！の記事をご参照ください。

 

 

③ パディングでブロック内テキストエリアの余白を調整

 

 

もっさん：マージンはブロック外の余白調整、パディングはブロック内のテキストエリアの余白を調整できます。こちらのレイアウトでは画像の下にテキストが来るように、上から150pxの余白をとるように設定しています。

読み込む画像によって調整が必要なため、プレビューで確認しながら、調整してみてください。

 

 

 

 

 

■設定方法

 

① 設置したいフリーレイアウト機能にRSSフィード / Twitterフィードを設定

 

 

※画像をアップロードすると、読み込むRSSフィード / Twitterフィードに画像が設定されていなかった場合、アプリ上に反映されるようになります。

 

 

② 詳細設定から画像の幅を設定

デフォルトは「背景」になっており、▼をクリックすると変更できます。

 

 

もっさん：プレビューで見え方を確認しながら、余白の調整をします。

その他にも、文字サイズやカラー設定、角丸・シャドウなどの詳細設定が行えますので、ぜひ色々お試しください。

 

 

 

 

パイセン：さらに、RSSフィード / Twitterフィードはカルーセル機能と組み合わせることもできちゃいます！

 

 

 

※カルーセルの設定方法について、 詳しくは【vol.3】カルーセルの設定方法と、3種類の実装例をご紹介します！の記事をご参照ください。

 

 

もっさん：すご〜い！カルーセル機能で動きがつくことで、より新着情報が目立ち、アプリならではの演出ができますね。

 

パイセン：その他にも様々なレイアウトが設定できますので、ぜひお試しください！

 

 

アプリに設定できるRSSフィードには推奨形式がございます。

詳しくはこちらの記事をご参照ください ＞

 

それでは次回の更新をお楽しみに！