Splamoments! 開発記録 Part4:ツイートを動的に表示する

magmaslime Blog / Splamoments! Part4:ツイートを動的に表示する

この記事では、Splamoments!の開発記録を書いていきます。
前回の記事では、Rails の View コンポーネントを改造し、ツイートを表示できるようにしました。
今回は、Rails の Controller コンポーネントを改造し、ツイートを動的に表示できるようにします。

View のコードをシンプルにする

Controller を改造する前に、View のコードを改造してツイートを表示するコードをシンプルにします。

前回の記事では、ツイートを表示するために、Twitter のページから埋め込みコードを入手し、それをそのまま View に貼っていました。

// ツイートの埋め込みコード
<blockquote class="twitter-tweet" data-lang="ja">
  <p lang="ja" dir="ltr">
    テスト用です。
    <a
      href="https://twitter.com/hashtag/Splatoon2?src=hash&amp;ref_src=twsrc%5Etfw"
      >#Splatoon2
    </a>
    <a
      href="https://twitter.com/hashtag/%E3%82%B9%E3%83%97%E3%83%A9%E3%83%88%E3%82%A5%E3%83%BC%E3%83%B32?src=hash&amp;ref_src=twsrc%5Etfw"
      >#スプラトゥーン2
    </a>
    <a
      href="https://twitter.com/hashtag/NintendoSwitch?src=hash&amp;ref_src=twsrc%5Etfw"
      >#NintendoSwitch
    </a>
    <a href="https://t.co/rylgie75RH">pic.twitter.com/rylgie75RH</a>
  </p>
  &mdash; SplaMoments! (@splamoments)
  <a
    href="https://twitter.com/splamoments/status/1085911593383120896?ref_src=twsrc%5Etfw"
    >2019年1月17日
  </a>
</blockquote>

このままでもツイートは表示できますが、以下のコードだけでもツイートを表示する事ができます。(widget.js がうまく処理してくれているようです。)

// シンプルなツイートの埋め込みコード
<blockquote class="twitter-tweet">
  <a href="https://twitter.com/a/status/1085911593383120896">
  </a>
</blockquote>

ツイートのリンク中のaと書いたところは、もともとツイートをした人のユーザネームが入っていました。ただ、ここには必ずしもユーザネームが入っている必要はなく、ただaと書いても有効なリンクになります。今回は、ユーザネームをツイートごとに正しく指定するのを省略でき、かつ最も簡単な文字列であるaを書いています。ちなみに、ここはどんな文字列でも大丈夫なようですが、空だとエラーになります。

ここで、View コンポーネントで利用できるメソッドでリンクを記述して、View の body タグのコードを以下のように修正します。a タグを link_to メソッドで書き直しましたが、実際にブラウザで表示される場合はどちらも同じようになります。これは、<%= =>でくくった部分が Rails で解釈され、link_to メソッドが a タグに変換してくれるためです。

//app/views/moment/home.html.erb
<body>
  <blockquote class="twitter-tweet">
    <%= link_to("", "https://twitter.com/a/status/1085911593383120896") %>
  </blockquote>
</body>

このコードから分かるように、ツイートを表示するにはツイート ID があれば良いです。 そこで、Controller からツイート ID を渡すことができれば、任意のツイートを表示する事ができるようになります。

Controller から渡すツイート ID を格納する変数を@tweet_urlという名前にすることにして、先に View のコードを修正します。

//app/views/moment/home.html.erb
<body>
  <blockquote class="twitter-tweet">
    <%= link_to("", @tweet_url) %>
  </blockquote>
</body>

これで View 側の修正は完了です。続いて Controller を改造していきます。

Controller からツイート ID を View に渡す

Rails では、View の画面の名前(例えば home)と同名の Controller のメソッドが呼ばれる事になっています。

今回は home 画面が呼ばれるタイミングで Controller の home メソッドでツイート ID を定義します。

//app/controllers/moment_controller.rb
class MomentController < ApplicationController
  home
    tweet_id = "1085911593383120896"
    @tweet_url = "https://twitter.com/a/status/" + tweet_id
  end
end

Controller から View にわたす変数はインスタンス変数で定義する必要があるので、@tweet_urlとして定義します。

以上で Controller の修正も完了したので、ブラウザから「http://localhost:3000」にアクセスしてみましょう。 前回の記事と同様に、ツイートが表示できていると思います。

tweet-on-view

試しに、別のツイートも表示できるか試してみます。Contoller から渡すツイート ID を以下のように変えてみます。

//app/controllers/moment_controller.rb
class MomentController < ApplicationController
  home
    tweet_id = "993169386453135365"
    @tweet_url = "https://twitter.com/a/status/" + tweet_id
  end
end

修正したらブラウザで「http://localhost:3000」にアクセスしてみましょう。別のツイートに変わっている事が確認できます。

another-tweet-on-view

これで、(Controller のツイート ID を変えることで)ツイートを動的に表示できるようになりました。

次の記事では、Rails の Model コンポーネントを改造し、データベースからツイートを表示してみます。