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

【第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のURL,表示したい記事数,表示したい文字数)
※設定した文字数を越えると、アプリ画面上では「…」という表記で省略されます。
もっさん:これだけでRSSフィードの設定が完了です!あとは詳細設定から画像の幅、文字サイズや色味、カラムの設定などの調整を行います。
もっさん:続いてTwitterフィードの設定です。ヤプリではTwitterのみ個別のRSS取得に対応しているため、 とっても簡単に設定することができちゃうんです〜!
※Twitter社の今後の仕様変更によっては、対応できなくなる可能性がございます。
■管理画面上のTwitterフィードの設定方法
Twitterフィードを設定したいフリーレイアウト機能を開き、新規ブロックのタイトル欄に下記の文字列を入力します。
twitter(取得したいアカウント名,表示したい記事数,表示したい文字数)
※設定した文字数を越えると、アプリ画面上では「…」という表記で省略されます。
パイセン:アカウント名を指定するだけでいいなんて本当に楽ちんですよね!
もっさん:また、今回ご紹介した機能を活かしたレイアウト例もご紹介します!
■設定方法
① 設置したいフリーレイアウト機能にRSSフィード/Twitterフィードを設定
② 詳細設定からカラムの幅を設定
デフォルトは「1」になっており、▼をクリックすると変更できます。
※カラム幅の設定方法について、詳しくは【vol.6】2〜3カラムの設定で画面にメリハリをつける!の記事をご参照ください。
③ パディングでブロック内テキストエリアの余白を調整
もっさん:マージンはブロック外の余白調整、パディングはブロック内のテキストエリアの余白を調整できます。こちらのレイアウトでは画像の下にテキストが来るように、上から150pxの余白をとるように設定しています。
読み込む画像によって調整が必要なため、プレビューで確認しながら、調整してみてください。
パイセン:その他にも様々なレイアウトが設定できますので、ぜひお試しください!
アプリに設定できるRSSフィードには推奨形式がございます。
それでは次回の更新をお楽しみに!

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

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