20210108_アウトプット(オリジナルアプリ・即時更新されるコメント投稿機能アプリ)
今日行ったこと 3時間15分
オリジナルアプリ 1時間
👉ユーザー新規登録・ログインのビュー実装即時更新されるコメント投稿機能アプリの準備 2時間15分
👉「イシュー2:Action Cable機能の実装」まで完了
新しい発見
Action Cable(アクションケーブル)について
Action Cableは、通常のRailsのアプリケーションと同様の記述で、即時更新機能を実装できるフレームワーク。
ざっくり言うと、チャネルという即時機能のための窓口を作り、そこがコントローラーからのデータの受け取りと、保存されたと同時にJavaScriptを使ってデータを反映させることを行うものだった。
JavaScriptとの違いは、エンドポイントを作ったり、JavaScript上にコントローラーにsend
する記述をすることがないこと。Rails上の仕組みで簡単で高機能なファイルを中間に作り、それと繋がる部分(コントローラーとJavaScript)に少し記述で完成だった。
新しく知った単語
Channel(チャネル)
チャネルとは、即時更新機能を実現するサーバー側の仕組みのこと。
stream_from
stream_fromとは、サーバーとクライアントを関連付けるメソッド。
broadcast(ブロードキャスト)
stream_fromメソッドで関連付けられるデータの経路のこと。
作成の流れ
(1)アクションケーブルを実装するには、チャネルを作る。
(今回は、messageモデルとtext型でtextカラムを予め準備)
% rails g channel message
👉上記、コマンドで実装に必要な2つのファイル(app/channels/message_channel.rb
とapp/javascript/channels/message_channel.js
)が生成。
(2)app/channels/message_channel.rb
の編集
stream_from
メソッドを使ってブロードキャストを作る。(ルーティングのようなもの)
(省略) def subscribed stream_from "message_channel" end (省略)
(3)コントローラーの編集
「保存に成功したら、ブロードキャストを通して、チャネルに向けて、メッセージデータを送る」と追記。
# app/controller/messages_controller.rb (省略) def create @message = Message.new(text: params[:message][:text]) if @message.save ActionCable.server.broadcast 'message_channel', content: @message end end (省略)
(4)app/javascript/channels/message_channel.js
の編集
(3)のデータはJavaScriptファイルで受け取る。(received
の引数data
に入る。)
import consumer from "./consumer" consumer.subscriptions.create("MessageChannel", { connected() { // Called when the subscription is ready for use on the server }, disconnected() { // Called when the subscription has been terminated by the server }, received(data) { const html = `<p>${data.content.text}</p>`; const messages = document.getElementById('messages'); const newMessage = document.getElementById('message_text'); messages.insertAdjacentHTML('afterbegin', html); newMessage.value=''; } });
感想
今日は早めに起きて朝1時間、夜2時間15分行なった☺️
寝る3時間前に夜ご飯、寝る1時間半前にお風呂を心がけたからか、Apple Watchで測っている睡眠の質もよかった♪
自分がリラックスできる音楽があると良いとのことで、お風呂やドライヤーしている時に、Jackie Evanchoちゃんの音楽を聞き始めた。歌声が好き。癒される☺️
Action Cableについて、基本的な部分であればこんなに簡単に実装できるんだとびっくり。
「非同期通信といえば、JavaScript」というイメージがあり、ネット上の記事もたくさんみつかる。
Action Cableは簡単なのに、メジャーじゃないのは何故だろう?(私の知識不足なだけかもしれない)
デメリットなども調べてみた。接続部分や他のフレームワークの互換性がない=再現性が低いのがデメリットなのかな。
他の記事も、Rails5から導入された機能として、2016年ごろの記事が多かった。今書いている人が少ないので使っている人も少ないのかな。
今回のミニアプリを通して、プログラマーの方たちは、すでにデプロイしている商品に対して、どういうタイミングで、どこで信頼性をもって、技術で取り入れるのかなと思った。そこの判断基準がまだ自分にはわからないので、そこも捉えられるような人になりたい。
覚書(12/29計画の見直し)
(1)やるべきこと (2)やりたいこと (3)やれること
(1)やるべきこと
- 卒業要件の完成
(2)やりたいこと
追加実装を学ぶためのミニアプリ作成
オリジナルアプリの作成
PHPの勉強
面白そうだから参加したい・見たい(やめ太郎さんのキータ表彰・yahooイベント)
読書
(3)やれること
メンタル:楽しみながら、ゲーム感覚でいく🎮😎
時間で区切り(達成すればよし)
PHP 一日15分以上
オリジナルアプリ 1日1時間以上
追加実装のミニアプリを作り、引き出しを増やす
優先順位 | 内容(機能) | 締め切り | 達成度 |
---|---|---|---|
1 | AWS S3 | 12/18 | 完了(フリマアプリ)に実装) |
2 | AWS EC2 | 12/24 | 完了(フリマアプリに実装) |
3 | ウィザード形式 | 12/27 | 完了 |
4 | SNS認証 | 12/28 | 完了 |
5 | 複数条件検索 | 12/29 | 完了 |
6 | タグ付 | 12/31 | 完了 |
7 | 画像プレビュー | 1/2 | 完了※フォーク |
8 | 複数枚写真OK | 1/4 | 完了※7に追加実装 |
9 | コメント機能(即時更新) | 1/8 | |
10 | クレカ登録 | 1/10 | |
11 | パンくず | 1/14 | |
12 | 日本語エラー | 1/18 |
身に付ける力(直近)
PHP7
Docker