SHOEISHA iD

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

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

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

Rails 5のAPIモードを使ってAPIを実装

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

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

既存チャットアプリの修正

 前回までに開発したRailsのチャットアプリを、条件に応じてAPIを実行するように修正します。以下の手順はRailsアプリのディレクトリが異なるので注意してください。

条件に応じてAPIを呼び出すよう処理を追加

 発言をクライアント側で受け取った際、発言が「/img」で始まる場合に検索語句を渡してAPIリクエストする処理をリスト7の通りに追加します。

リスト7 rails5_sample/app/assets/javascripts/channels/chat_message.coffee
  received: (data) ->
    $('#chat_messages').append '<div>' + data['user_name'] + ': ' + data['message'] + '</div>'
    ret = data["message"].match(/^\/img (.*)/)
    if ret?
      $.get 'http://localhost:3001/images/' + ret[1], (ret_api) ->
        $('#chat_messages').append '<img src=' + ret_api['image_path'] + ' />'

 receivedの2行目でmatchを使って、正規表現で先頭が/imgの発言の検索語句を取得しています。検索語句が取得できた場合は、先ほど開発したAPIを取得した検索語句でリクエストします(receivedの4行目)。APIからのレスポンスはret_apiに代入され、ret_api['image_path']で画像パスを取得することができます。receivedの5行目で、imgタグを追加しています。

APIと連係するチャットアプリの動作確認

 チャットアプリのRailsとAPIのRailsをそれぞれ立ち上げます。それぞれのRailsアプリのルートディレクトリ上でコマンドを実行する必要があることに注意してください。

# チャットアプリ
bin/rails s

# API
bin/raisl s -p 3001

 チャットアプリ「http://localhost:3000/chat_messages/index」にアクセスします。前回までに作成したユーザーIDでログインし、「こんにちは」「/img rails」「/img ruby」と入力してみましょう。図2のようにRailsとRubyのロゴ画像が表示されることが確認できます。

図2 API連係の動作確認
図2 API連係の動作確認

まとめ

 今回はRails 5のもう一つの目玉機能であるAPIモードでRailsアプリを新規作成し、Action Cableサンプルアプリと連係しました。

次のページ
連載最終回にあたって

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

  • 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/10354 2017/08/17 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング