Splamoments! 開発記録 Part3:Railsでツイートを表示する

magmaslime Blog / Splamoments! Part3:Railsでツイートを表示する

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

ホーム画面用の Controller と View を生成

まずはツイートを表示する画面を作っていきます。 以下のコマンドを実行し、Controller と View を生成しましょう。 Momentは Controller の名前を指し、その後のhomeは Controller 内のメソッド(かつ View) の名前を指しています。

Controller、View は Web システムのアーキテクチャである MVC モデルにおけるコンポーネントの名前です。MVC モデルについては知りたい方は、Qiita などにある解説を参照してください。

//bash
rails generate controller Moment home

rails gと略しても、rails generateと同じコマンドになります。

このコマンドにより、app/controllers/moment_controller.rbapp/views/moment/home.html.erbが作成されます。

Rails では View 画面と Controller のメソッドが紐付いており、View の home 画面にアクセスすると Controller の home メソッドが呼び出されるようになっています。

.erbは「embedded Ruby」の略で、HTML に Ruby のスクリプトを埋め込めるようになっています。

今回は Controller の改造は行わず、View 画面のみ改造していきます。

View を改造

では早速 View にツイートを表示してみます。表示するツイートは以下です。

まずは Twitter にアクセスして、表示したいツイートの埋め込み用コードを取得します。

埋め込みたいツイートの右上にあるプルダウンをクリックすると、ツイートの埋め込むという選択肢があると思います。

tweet-option

これをクリックすると、埋め込み用のコードが表示されるので、コピーしましょう。

tweet-embed-code

Rails に移って、View のソースに、先ほどの埋め込みコードを貼ります。

//app/views/moment/home.html.erb
<!DOCTYPE html>
<html>
  <script async type="text/javascript" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<head>
</head>
<body>
  <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>
</body>
</html>

これで View 画面の改造は完了です。続いてこの画面をトップページ(http://localhost:3000/)に表示できるように設定します。

ルーティングの設定

Web ページの URL と、View の画面の紐付け(ルーティング)は、config/routes.rbで設定します。

以下のようにコードを書き、トップページで home が表示されるように設定しましょう。

//config/routes.rb
Rails.application.routes.draw do
  root 'moment#home'
end

最後に、トップページにアクセスしてツイートが表示されているか確認しましょう。
http://localhost:3000/」にアクセスしてみます。

tweet-on-view

図のようにツイートが表示されていれば成功です。
※図では他の設定により、背景やページタイトルが変わっています。

次の記事では、Rails の Controller コンポーネントを改造し、ツイートを動的に表示してみます。