プラクティス完了ツイート機能の実装 #3385

konaga-k · 2021-10-12T14:51:25Z

refs #2045

概要

受講生がプラクティスを完了したとき、プラクティス完了ツイートを可能にする
プラクティス完了ツイートはモーダルから行えるようにして、以下のタイミングでモーダルを表示する
- 受講生がプラクティス詳細ページで完了ボタンを押したとき
- メンターが提出物をチェックした後、受講生が提出物詳細ページにアクセスしたとき（初回アクセス時のみ）
- 受講生が完了済みのプラクティス詳細ページ・提出物詳細ページの「完了Tweetする」ボタンを押したとき
プラクティス完了ツイートには、プラクティスごとに存在するプラクティス完了ページへのリンクURLを記載し、ツイートにはプラクティスのOGP画像が表示されるようにする
- プラクティス完了ページにはログインしていなくても（=フィヨルドブートキャンプ関係者でなくても）アクセスできる
- ※ローカル環境からのツイートではOGP画像を確認できないはずなので、staging環境で確認します
管理者・メンターはプラクティス編集ページからOGP画像を登録可能とする

モーダルの自動表示制御

プラクティス完了後、提出物詳細ページに初回アクセスしたときのみモーダルを自動表示するため、
learningsテーブルにモーダル表示済みフラグを追加する

falseのときモーダルを自動表示する
デフォルト値はfalse
本番環境にある既存の完了済みレコードではtrueにする（モーダルを自動表示しない）
プラクティス完了ツイート用モーダルを閉じたタイミングでtrueにする

UI

「完了Tweetする」ボタン

画像

プラクティス詳細ページ

提出物詳細ページ

画像

aptの基礎を覚えるの提出物___FJORD_BOOT_CAMP（フィヨルドブートキャンプ）

プラクティス完了ツイート用モーダル

画像

aptの基礎を覚える___FJORD_BOOT_CAMP（フィヨルドブートキャンプ）

プラクティス完了ツイート

画像

プラクティス編集ページ

画像

プラクティス作成___FJORD_BOOT_CAMP（フィヨルドブートキャンプ）

プラクティス完了ページ

画像

konaga-k · 2021-10-12T15:24:29Z

@machida
開発が遅くなりすみません🙇
以下ページ・要素のデザイン設定お願いします

「完了Tweetする」ボタン

プラクティス詳細ページ: /practices/:id https://github.com/fjordllc/bootcamp/blob/feature/tweet-learning_completion/app/views/practices/show.html.slim#L129-L136
提出物詳細ページ: /products/:id https://github.com/fjordllc/bootcamp/blob/feature/tweet-learning_completion/app/views/products/show.html.slim#L120-L125

現実装イメージ

プラクティス完了ツイート用モーダル

https://github.com/fjordllc/bootcamp/blob/feature/tweet-learning_completion/app/views/shared/_modal_learning_completion.html.slim

現実装イメージ

プラクティス編集ページ

/practices/:id/edit https://github.com/fjordllc/bootcamp/blob/feature/tweet-learning_completion/app/views/practices/_form.html.slim#L76-L80

現実装イメージ

プラクティス完了ページ

/practices/:practice_id/completion https://github.com/fjordllc/bootcamp/blob/feature/tweet-learning_completion/app/views/practices/completion/show.html.slim

現実装イメージ

また、テスト用のOGP画像として拾ってきたフリー画像を使っているのですが、余力があれば実際に使いそうなものに差し替えてもらえると助かります
https://github.com/fjordllc/bootcamp/blob/feature/tweet-learning_completion/test/fixtures/files/practices/ogp_images/1.jpg

konaga-k · 2021-10-13T03:48:28Z

テストが落ちているのはデザイン適用後に直そうと思います

konaga-k · 2021-10-20T13:42:15Z

先にレビュー依頼して、デザインは最後にやってもらうことになりました
テストが落ちているのとOGP画像のパスが正しくないので、そこを修正したらレビュー依頼を出します

konaga-k

@haruguchi-yuma
レビューお願いします🙏

konaga-k · 2021-10-20T14:34:23Z

app/javascript/learning.vue

+      label#js-complete.a-button.is-md.is-warning.is-block(
+        @click='pushComplete',
+        for='modal-learning_completion'


プラクティス詳細ページの完了ボタンですが、button要素からlabel要素に変更し、for属性を追加しました
理由としては、完了ボタンを押したときにモーダル表示されるようにするためです
label要素がクリックされると for属性の値 modal-learning_completion をidとする要素がcheckedになります
モーダルがcheckedになると、sassの設定により画面上に表示されます

bootcamp/app/assets/stylesheets/blocks/shared/_modal.sass

Lines 5 to 6 in 2901dfa

input:checked + &

display: block

konaga-k · 2021-10-20T14:51:46Z

app/views/practices/show.html.slim

@@ -1,6 +1,8 @@
 - title @practice.title
 - category = @practice.category(current_user.course)

+= render '/shared/modal_learning_completion', practice: @practice, tweet_url: @tweet_url, should_display_message_automatically: false


メンターがプラクティスを完了させた後に受講生がプラクティス詳細ページに初回アクセスしたとき、モーダルを自動表示するかはどっちでもいい気がしていますが、とりあえずは自動表示しないように設定しています
プラクティス完了通知を受け取った受講生は、プラクティス詳細ページより先に、通知のリンク先である提出物詳細ページに行くと思うので、結局そっちでモーダルが表示されるだろうという想定です

konaga-k · 2021-10-20T14:55:35Z

app/views/practices/completion/show.html.slim

@@ -0,0 +1,10 @@
+- title @practice.title
+- if @practice.ogp_image.attached?
+  - set_meta_tags(og: { image: polymorphic_url(@practice.ogp_image), url: request.url })


OGP画像のパスはホスト名を含む絶対パスでないといけないようなので、そのように設定しました

polymorphic_url(@practice.ogp_image) で画像の絶対パスが取れるのは以下のブログ記事で見つけた話で、正直根拠がよく分かりません（公式のドキュメントを見てもそういう記載が見つからない）
参考: https://qiita.com/shou8/items/3c41cb6a06ff1e0cdb95#urlが欲しい
記事内で polymorphic_url と並んで載っている url_for(@practice.ogp_image) だと相対パスになってしまい、この理由も分かりません
とりあえず上手く動いているので polymorphic_url を採用してます

https://api.rubyonrails.org/classes/ActionView/RoutingUrlFor.html#method-i-url_for
調べてみたんですが、公式APIにはhostを指定しない場合はデフォルトでonly_path: trueになるみたいでurl_forを使うなら、オプションを使う必要がありそうです。

@haruguchi-yuma
ありがとうございます
なるほど、そういう理由で相対パスになるんですね

確かにhostオプションの指定や only_path: false で上手く動けばいいんですが、文法的にアウトになっちゃうんですよね（引数は0〜1個しか取れない）

wrong number of arguments (given 2, expected 0..1)

ちょっと url_for を使うのは難しそうなので、 polymorphic_url のままにしてみます

konaga-k · 2021-10-22T00:58:43Z

app/decorators/learning_decorator.rb

+module LearningDecorator
+  def should_display_message_automatically?(current_user:)
+    user == current_user && complete? && !completion_message_displayed?
+  end
+end


モーダルの初回表示判定はviewでしか使わないのでメソッドはdecoratorにしましたが、
今見ると権限系に近い処理なので、モデルに直接生やした方がよかったのか迷ってます

うーん、正直どこにメソッド定義をしたらいいか自分には判断できませんね😥
これはぜひ駒形さんに聞きたいです！

現在viewでしか使わず、今後も他で使われなさそうであればこれで良いと思います〜

haruguchi-yuma

遅くなってすみません！
twitter周りや、modalの作り方等自分が知らないことばかりでとても勉強になりました。😄
自分がみておかしいと思うところは特になかったのですが1、2点コメントしていますので確認お願いします。

haruguchi-yuma · 2021-10-22T14:51:11Z

app/controllers/concerns/learning_completion.rb

+  def tweet_url(practice_title:)
+    completion_text = "フィヨルドブートキャンプのプラクティス「#{practice_title}」が完了しました🎉🎉🎉"
+    # ref: https://developer.twitter.com/en/docs/twitter-for-websites/tweet-button/guides/web-intent
+    tweet_param = URI.encode_www_form(text: completion_text, url: request.url, hashtags: 'fjordbootcamp')


プラクティス完了ツイートには、プラクティスごとに存在するプラクティス完了ページへのリンクURLを記載し、ツイートにはプラクティスのOGP画像が表示されるようにする

ツイートに記載されてるurlはプラクティス完了ページへ遷移するurlだと思うのですが、このままだとプラクティス詳細ページに飛んでしまうので、request.url + '/completionとした方が良さそうです。

これは気づきませんでした、指摘ありがとうございます🙏
修正前は

プラクティス詳細ページからツイートしたときはプラクティス詳細ページに飛ぶ

提出物詳細ページからツイートしたときは提出物詳細ページに飛ぶ

となっていて、URLに completion を足すだけだと対処できなさそうなので、
practice_completion_url でURLを返すようにしました
ついでに tweet_url 内で practice.title と practice.id を使うようになったので、引数は practice に変更しました
0fa7391

haruguchi-yuma · 2021-10-23T13:56:24Z

app/decorators/learning_decorator.rb

+module LearningDecorator
+  def should_display_message_automatically?(current_user:)
+    user == current_user && complete? && !completion_message_displayed?
+  end
+end


うーん、正直どこにメソッド定義をしたらいいか自分には判断できませんね😥
これはぜひ駒形さんに聞きたいです！

konaga-k

@haruguchi-yuma
修正したので再度確認お願いします🙏

konaga-k · 2021-10-24T10:08:17Z

app/controllers/concerns/learning_completion.rb

+  def tweet_url(practice_title:)
+    completion_text = "フィヨルドブートキャンプのプラクティス「#{practice_title}」が完了しました🎉🎉🎉"
+    # ref: https://developer.twitter.com/en/docs/twitter-for-websites/tweet-button/guides/web-intent
+    tweet_param = URI.encode_www_form(text: completion_text, url: request.url, hashtags: 'fjordbootcamp')


これは気づきませんでした、指摘ありがとうございます🙏
修正前は

プラクティス詳細ページからツイートしたときはプラクティス詳細ページに飛ぶ

提出物詳細ページからツイートしたときは提出物詳細ページに飛ぶ

となっていて、URLに completion を足すだけだと対処できなさそうなので、
practice_completion_url でURLを返すようにしました
ついでに tweet_url 内で practice.title と practice.id を使うようになったので、引数は practice に変更しました
0fa7391

haruguchi-yuma

確認しました。これで大丈夫だと思いますー！😃

konaga-k · 2021-10-25T11:24:02Z

@komagata
レビューお願いします🙏
まだデザインを当ててもらっていないので、マージはしないでおいてほしいです

machida · 2021-10-27T12:38:12Z

こちらのIssue、machidaが引きつぎますー

konaga-k · 2021-10-28T07:10:16Z

app/controllers/concerns/learning_completion.rb

+
+  private
+
+  def tweet_url(practice:)


これも Practice#tweet_url で呼べるようにしたほうがいいですかね…？

基本的に動詞より名詞の方が副作用がない（ように見える）のでプログラムがシンプルになります。

引数なしでいければ、Practice#tweet_urlはクラスのプロパティのように見えるのでそちらの方がわかりやすかな〜と思いました。

すみません、こちら僕がよく理解できていないかもしれません🙇‍♂️
def tweet_url(practice:) を def practice_tweet_urlに変更しました。
def Practice#tweet_url だとrubocopに引っかかるため、上記のメソッド名にしました。
僕の認識がズレていたらご指摘ください🙇‍♂️

konaga-k · 2021-11-01T02:48:00Z

@komagata
コンフリクトが発生していますが、まだデザイン適用前でどのみちマージはできないので、
レビューだけお願いしてもよいでしょうか？
コンフリクト解消については、レビューが終わってから（もしくはレビュー指摘が発生してから）machidaさんと調整します

komagata · 2021-11-01T15:19:08Z

@konaga-k

コンフリクトが発生していますが、まだデザイン適用前でどのみちマージはできないので、

これはなぜでしょう？

konaga-k · 2021-11-02T00:53:14Z

@komagata
このPRではデザインを当てる箇所が多く時間がかかるため、
先にレビューから進めるようにとmachidaさんから言われています
そのため、レビューが完了してもデザイン適用待ちになると思います

ここまで書いて思ったんですが、このPRのAssigneeはデザインを担当するmachidaさんが引き継いでます
レビュー指摘によって修正が必要であれば、machidaさんから自分に修正依頼が飛ぶことになっていた気がします
自分がレビューの進め方について直接komagataさんに提案するのは権限超えてますね🙇

@machida
デザインもPRレビューも膠着していて、コンフリクトが発生している状態なんですが、以下のような進め方をしてもらう方針でよいでしょうか？（もっとやりやすい方法があればそちらで決めてもらえれば）

@komagata
コンフリクトが発生していますが、まだデザイン適用前でどのみちマージはできないので、
レビューだけお願いしてもよいでしょうか？
コンフリクト解消については、レビューが終わってから（もしくはレビュー指摘が発生してから）machidaさんと調整します

komagata · 2021-11-02T04:25:16Z

@konaga-k コンフリクトしているのはjsとymlなのでデザイン関係ないので解消できるのではと思うのですがいかがでしょう？

komagata · 2021-11-02T07:50:00Z

📝 @komagata のレビュー待ち。

R-Tsukada · 2022-02-01T07:40:09Z

@komagata
コンフリクト修正しました🙇‍♂️

komagata

確認しました、OKですー🙆‍♂️

komagata · 2022-02-01T12:27:56Z

@machida コードの方はレビューOKです〜！

R-Tsukada · 2022-02-01T12:49:16Z

ありがとうございます🙇‍♂️

machida · 2022-02-09T07:51:52Z

@komagata ありがとうございます！！では、こちら画像の準備ができるまでコメントアウトしてマージしたいと思います。

komagata · 2022-02-10T05:23:53Z

@machida 了解です〜
準備ができたらマージしちゃってください〜

machida · 2022-02-10T06:18:03Z

@komagata コメントアウトしてテストが通ったのでマージしてしまいますー

konaga-k self-assigned this Oct 12, 2021

konaga-k force-pushed the feature/tweet-learning_completion branch 3 times, most recently from c7492f5 to 9645997 Compare October 12, 2021 15:21

konaga-k force-pushed the feature/tweet-learning_completion branch from 9645997 to 8189301 Compare October 12, 2021 15:36

konaga-k assigned machida Oct 13, 2021

konaga-k marked this pull request as draft October 13, 2021 12:57

konaga-k unassigned machida Oct 20, 2021

konaga-k force-pushed the feature/tweet-learning_completion branch from 8189301 to 2901dfa Compare October 20, 2021 14:16

konaga-k marked this pull request as ready for review October 20, 2021 14:58

konaga-k commented Oct 20, 2021

View reviewed changes

konaga-k requested a review from haruguchi-yuma October 20, 2021 15:03

konaga-k commented Oct 22, 2021

View reviewed changes

haruguchi-yuma reviewed Oct 24, 2021

View reviewed changes

konaga-k commented Oct 24, 2021

View reviewed changes

machida self-assigned this Oct 25, 2021

haruguchi-yuma reviewed Oct 25, 2021

View reviewed changes

konaga-k requested a review from komagata October 25, 2021 11:23

machida unassigned konaga-k Oct 27, 2021

konaga-k commented Oct 28, 2021

View reviewed changes

machida and others added 17 commits February 1, 2022 16:19

文言変更、デザイン変更に伴うテスト修正

9cfe3e6

テストの修正

84e239a

テストの修正

58e3d6a

テストの修正

293d57e

テストの修正

d84b135

プラクティス編集画面の「完了おめでとう画像」に関するテストを修正

1a35971

completionのテストを修正

b6443d5

プラクティス終了時に表示されるモーダルを閉じるテストを修正

64bd09c

【完了Tweetする】ボタンをクリックする処理を追加

aac43fd

クリックの処理を削除

226ed7e

learning-completion-message.jsの読み込みを追加

a5ce05b

プラクティス完了モーダルの「閉じる」をクリックする処理を追加し、2回目以降はモーダルを表示しないことをテストできるようにした。

f4fb7a8

リファクタリングを実施

cad0d2a

findメソッドにセレクターを追加

bfcdf78

メソッド名と引数を変更

0cda629

tweet_urlメソッドをPractice#tweet_urlで呼べるように修正

678e225

テストを修正

122c058

R-Tsukada force-pushed the feature/tweet-learning_completion branch from c3ce55e to 122c058 Compare February 1, 2022 07:21

komagata approved these changes Feb 1, 2022

View reviewed changes

machida added 2 commits February 9, 2022 17:15

完了Tweet機能をコメントアウトした

731e8ac

コメントアウトの記法を変更

4e34beb

machida merged commit 83d7d80 into main Feb 10, 2022

machida deleted the feature/tweet-learning_completion branch February 10, 2022 06:18

github-actions bot mentioned this pull request Feb 10, 2022

Release 2022-02-18 02:36:10 #4129

Merged

54 tasks

プラクティス完了ツイート機能の実装 #3385

プラクティス完了ツイート機能の実装 #3385

Conversation

konaga-k commented Oct 12, 2021 • edited by R-Tsukada Loading

概要

モーダルの自動表示制御

UI

「完了Tweetする」ボタン

提出物詳細ページ

プラクティス完了ツイート用モーダル

プラクティス完了ツイート

プラクティス編集ページ

プラクティス完了ページ

konaga-k commented Oct 12, 2021 • edited Loading

「完了Tweetする」ボタン

プラクティス完了ツイート用モーダル

プラクティス編集ページ

プラクティス完了ページ

konaga-k commented Oct 13, 2021

konaga-k commented Oct 20, 2021 • edited Loading

konaga-k left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

konaga-k Oct 20, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

konaga-k Oct 25, 2021 • edited Loading

Choose a reason for hiding this comment

konaga-k Oct 22, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

haruguchi-yuma left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

konaga-k left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

haruguchi-yuma left a comment

Choose a reason for hiding this comment

konaga-k commented Oct 25, 2021 • edited Loading

machida commented Oct 27, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

konaga-k commented Nov 1, 2021 • edited Loading

komagata commented Nov 1, 2021

konaga-k commented Nov 2, 2021 • edited Loading

komagata commented Nov 2, 2021

komagata commented Nov 2, 2021

R-Tsukada commented Feb 1, 2022

komagata left a comment

Choose a reason for hiding this comment

komagata commented Feb 1, 2022

R-Tsukada commented Feb 1, 2022

machida commented Feb 9, 2022

komagata commented Feb 10, 2022

machida commented Feb 10, 2022

konaga-k commented Oct 12, 2021 •

edited by R-Tsukada

Loading

konaga-k commented Oct 12, 2021 •

edited

Loading

konaga-k commented Oct 20, 2021 •

edited

Loading

konaga-k Oct 20, 2021 •

edited

Loading

konaga-k Oct 25, 2021 •

edited

Loading

konaga-k Oct 22, 2021 •

edited

Loading

konaga-k commented Oct 25, 2021 •

edited

Loading

konaga-k commented Nov 1, 2021 •

edited

Loading

konaga-k commented Nov 2, 2021 •

edited

Loading