SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

サンプルコードで学ぶRuby on Rails 5実践入門

Rails 5の目玉機能「Action Cable」で双方向通信を実装(1)

サンプルコードで学ぶRuby on Rails 5実践入門 第7回

  • X ポスト
  • このエントリーをはてなブックマークに追加

 前回はRails 5が提供するフロントエンドの開発環境を解説しました。今回からは2回にわたり、Rails 5目玉機能の1つであるAction Cableのサンプルアプリ実装を通して、Action Cableへの理解を深めていきます。

  • X ポスト
  • このエントリーをはてなブックマークに追加

Action Cableのおさらい

 本連載の第1回でも紹介しましたが、Rails 5の目玉機能であるAction Cableは、Rails上でWebSocketによる双方向通信を簡単に実現する新しい機能です。WebSocket(ウェブソケット)とは、サーバーを介してWebブラウザ間で双方向通信を行う仕組みです。これまでWebSocketをRails上で実現するには、複雑な処理を自前で書く必要がありました。Rails 5で新たに用意されたAction Cableを使うと、驚く程簡単に双方向通信が実現できます。Action Cableでは以下の機能が用意されています。

主な機能 機能概要 実装の配置箇所
コネクション WebSocket通信をサーバーとクライアントで接続する仕組み app/channels/application_cable/connection.rbとして提供
チャネル WebSocketを使う上で必要となるサーバー側の仕組み app/channels配下にApplicationCable::Channelを継承して利用
クライアント WebSocketを使う上で必要となるクライアント側の仕組み。JavaScript/CoffeeScriptで提供 app/assets/javascripts/channels配下に配置
ジェネレーター rails g channelコマンドによるチャネル・クライアントのコードひな型自動生成 -

開発するチャットアプリ(1)

 今回はAction Cableの機能を利用して、リアルタイムチャット機能を実装します。この機能の要件をまとめると以下の通りです。

図1 チャットアプリの完成イメージ
図1 チャットアプリの完成イメージ
  • 発言するにはユーザー登録が必要
  • 各クライアントのブラウザで入力ボックスに文字を入れ、エンターキーを押下すると発言できる
  • 発言はチャットに接続している各クライアントに対して即座に配信される
  • 発言はデータベースに保存される

 これらの要件を満たすチャットアプリを以下の手順で開発していきます。

  1. チャット用コントローラーの作成
  2. チャット用モデルの作成
  3. チャット用チャネルの作成
  4. 入力フォームの作成
  5. 動作確認
  6. 発言をデータベースに保存できるようにする
  7. 発言を登録済みユーザーに限定させる

チャット用コントローラーの作成

 まず、チャット用のコントローラーを作成します。以下のジェネレートコマンドでコントローラーを作成します。なお、チャット表示用の画面のみで必要となるため、indexアクションだけを指定します。

bin/rails g controller ChatMessages index

 ↓

Running via Spring preloader in process 17041
      create  app/controllers/chat_messages_controller.rb
       route  get 'chat_messages/index'
      invoke  erb
      create    app/views/chat_messages
      create    app/views/chat_messages/index.html.erb
      invoke  test_unit
      create    test/controllers/chat_messages_controller_test.rb
      invoke  helper
      create    app/helpers/chat_messages_helper.rb
      invoke    test_unit
      invoke  assets
      invoke    coffee
      create      app/assets/javascripts/chat_messages.coffee
      invoke    scss
      create      app/assets/stylesheets/chat_messages.scss

チャット用モデルの作成

 次に、チャットメッセージ保存用のモデルを作成します。モデル名はchat_message、ユーザーIDとメッセージ本文を保存する必要があるので、カラムにuser_idbodyを指定します。以下のジェネレートコマンドでモデルを作成しましょう。

bin/rails g model chat_message user_id:integer body:text

 ↓

Running via Spring preloader in process 17756
      invoke  active_record
      create    db/migrate/20170317102938_create_chat_messages.rb
      create    app/models/chat_message.rb
      invoke    test_unit
      create      test/models/chat_message_test.rb
      create      test/fixtures/chat_messages.yml

 先立ってマイグレーションを実行しておきます。

bin/rails db:migrate

 ↓

== 20170317102938 CreateChatMessages: migrating ===============================
-- create_table(:chat_messages)
   -> 0.0155s
== 20170317102938 CreateChatMessages: migrated (0.0155s) ======================

次のページ
開発するチャットアプリ(2)

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
サンプルコードで学ぶRuby on Rails 5実践入門連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト 竹馬 力(チクバ ツトム)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/10153 2017/05/17 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング