このセクションの記事一覧はこちら

【vol.8】RSSフィード/Twitterフィードで自動更新!楽ちんアプリ運用!

コンテンツを自動で読み込んでくれるRSSフィード/Twitterフィードの設定方法とレイアウト例についてご紹介します!
home_top_0.png

 

home_top.png

 

home_06.png

 

 

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

 

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

 

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

 

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

 

image_01.png

 

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

 

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

 

 

h2_01.png

 

①RSSの取得方法

 

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

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

 

image_02.png

 

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

 

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

 

 

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

 

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

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

 

image_02.png

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

 

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

 

 

 

h2_02.png

 

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

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

 

 

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

 

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

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

 

image_03.png

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

 

 

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

 

 

 

h2_03.png

 

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

 

 

image_04.png

 

 

■設定方法

 

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

 

image_05.png

 

 

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

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

 

image_05.png

 

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

 

 

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

 

image_07.png

 

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

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

 

 

 

image_08.png

 

 

■設定方法

 

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

 

image_09.png

 

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

 

 

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

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

 

image_10.png

 

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

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

 

 

 

h2_04.png

 

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

 

cal.gif

 

image_11.png

 

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

 

 

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

 

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

 

 

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

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

 

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

不明点はございますか? お気軽にお問い合わせください >

不明点はございますか? お気軽にお問い合わせください >