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.rbapp/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は簡単なのに、メジャーじゃないのは何故だろう?(私の知識不足なだけかもしれない)

  • デメリットなども調べてみた。接続部分や他のフレームワークの互換性がない=再現性が低いのがデメリットなのかな。

www.transnet.ne.jp

  • 他の記事も、Rails5から導入された機能として、2016年ごろの記事が多かった。今書いている人が少ないので使っている人も少ないのかな。

  • 今回のミニアプリを通して、プログラマーの方たちは、すでにデプロイしている商品に対して、どういうタイミングで、どこで信頼性をもって、技術で取り入れるのかなと思った。そこの判断基準がまだ自分にはわからないので、そこも捉えられるような人になりたい。



覚書(12/29計画の見直し)

(1)やるべきこと (2)やりたいこと (3)やれること

(1)やるべきこと

  • 卒業要件の完成

(2)やりたいこと

(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


身に付ける力(ゆくゆく・覚書)

  • ドメイン駆動開発

  • 環境構築

  • 環境変数などのOS知識

  • バージョン対応力

  • データベースをインポートする力・エクスポートする

  • GitHubActions×OpenAPIGenerator(APICilent)