プラグインを利用して、X、Facebook、はてなブックマークのシェアボタンを実装 #7153

88-99 · 2023-12-17T10:08:08Z

Issue

外部向けブログページにシェアボタンを付ける #6407

概要

外部向けのブログページの上部と下部に、X、Facebook、はてなブックマークのシェアボタンを設置する。

変更確認方法

feature/add-share-buttons-on-blog-page-for-externalをローカルに取り込む
bootcamp を起動する foreman start -f Procfile.dev
ブログ記事のどれかにアクセスする
フッターまで下にスクロール → ブログ → 任意のブログ記事
画面上部と下部に設置した各シェアボタンを押して挙動を確認する
確認には予め、X、Facebook、はてなブックマークへログインをお願いいたします。

変更前

上部

1-1_development__VirtualBoxでLinuxを使おう___FJORD_BOOT_CAMP（フィヨルドブートキャンプ）

下部

1-2_development__VirtualBoxでLinuxを使おう___FJORD_BOOT_CAMP（フィヨルドブートキャンプ）

変更後

上部

2-1_development__VirtualBoxでLinuxを使おう___FJORD_BOOT_CAMP（フィヨルドブートキャンプ）

下部

2-2_development__VirtualBoxでLinuxを使おう___FJORD_BOOT_CAMP（フィヨルドブートキャンプ）

ボタンを押したときの挙動

X

別タブでXが開き、その中にブログ記事のURLと#fjordbootcampが記載されたポスト用の小ウィンドウが開く。

Facebook

共有するブログ記事のサムネイルが記載されたポスト用の小ウィンドウが開く。
開発環境のブログ記事は実在しないため、サムネイルには「ご指定のページは見つかりません」と表示される。
app/views/articles/_share_button_facebook.html.erbで<%= article %>を実在する95に書き換えると、サムネイルが実際の画像に反映される。

はてなブックマーク

共有するブログ記事がブックマークされていない場合

開発環境のブログ記事は実在しないため、「このページはまだブックマークされていません」と表示される。

共有するブログ記事がブックマークされている場合

app/views/articles/_share_button_hatena.html.erbで<%= article %>を実在する95に書き換えると、以下のように反映される。

使用プラグイン

88-99 · 2023-12-18T14:00:08Z

@machida
デザインをお願いできますでしょうか？

machida · 2023-12-27T15:57:01Z

@88-99 おまたせしました！！着手しますー💪

machida · 2024-01-05T07:28:42Z

@88-99 おまたせしました！デザイン入れました。最新のmainをrebaseしたので、

git pull --rebase origin feature/add-share-buttons-on-blog-page-for-external をお願いします。

88-99 · 2024-01-06T14:04:49Z

@machida

ありがとうございます！

goruchanchan · 2024-01-19T03:45:27Z

@88-99
お疲れ様です！レビュー依頼ありがとうございます！1週間以内に確認いたします🙇‍♂️

88-99 · 2024-01-19T04:21:48Z

@goruchanchan

お疲れ様です！レビュー依頼ありがとうございます！1週間以内に確認いたします🙇‍♂️

お疲れ様です。
こちらのレビューのお願いは、間違いでした。
コメントを残しておけば良かったのですが、お騒がせしてすみません🙇‍♂️

88-99 · 2024-02-01T03:22:08Z

@kyokucho1989

お疲れ様です。
急ぎませんので、お手隙の時にこちらのレビューをお願いできませんでしょうか？🙏

kyokucho1989 · 2024-02-01T03:29:00Z

@88-99
了解しました！
来週の水曜までかかるかと思います。

今日は取り急ぎ、家に帰ってテストしてみます

kyokucho1989

@88-99
レビューしました。コメントつけています。

X, Facebook , はてなのいづれもシェア機能が使えることが確認できました。
ただ、下側のシェアボタンは機能しませんでした。確認してみてください

kyokucho1989 · 2024-02-01T10:49:09Z

test/system/articles_test.rb

+  test 'share button Facebook' do
+    visit "/articles/#{@article.id}"
+
+    within find('.fb-share-button', match: :first) do
+      within_frame do
+        assert_selector "a[
+                            href='/sharer/sharer.php?kid_directed_site=0&sdk=joey&" \
+                            "u=https%3A%2F%2Fbootcamp.fjord.jp%2Farticles%2F#{@article.id}&display=popup&" \
+                            "ref=plugin&src=share_button'
+                          ]"
+      end
+    end


ここのテストが失敗してしまいます。

Failure: ArticlesTest#test_share_button_Facebook [/Users/kondoukou/bootcamp/test/system/articles_test.rb:381]: expected to find css "a[\n href='/sharer/sharer.php?kid_directed_site=0&sdk=joey&u=https%3A%2F%2Fbootcamp.fjord.jp%2Farticles%2F655299028&display=popup&ref=plugin&src=share_button'\n ]" but there were no matches

自分のPCでは通りました。
昨日以下のテストコマンドを実行すると最初は落ちたのですが、その後は通り、今日は一発で通りました。
Facebookのシェアボタンだけ表示される速度が見るからに遅いので、それも関係しているのでしょうか。

$ bin/rails test test/system/articles_test.rb Running via Spring preloader in process 53982 Run options: --seed 11339 # Running: .................................. [Minitest::CI] Generating test report in JUnit XML format... Finished in 21.243046s, 1.6005 runs/s, 3.8130 assertions/s. 34 runs, 81 assertions, 0 failures, 0 errors, 0 skips

自分のPCで何回かテストしました。3回やって2回パスするくらいの割合ですね。
表示速度の問題もあるのでしょうが、解消の仕方がわかりません...

1日調べさせてください。

@88-99
このテストだけ待ち時間を増やすなどの対策ができるかもしれません。
が、やり方がわからないため質問するなどしてみてください 🙏

https://speakerdeck.com/mstshiwasaki/bu-an-ding-tesutowosheng-michu-sucapybarawodiao-jiao-suru?slide=24

ご確認と参考記事ありがとうございます🙇‍♂️
テストが通らなかったときに、待ち時間について調べたこともあったのですが、test_helper.rbの設定でCapybara.default_max_wait_time = 10が記述されているので、テスト全体としてその設定にはなっているのだと思っていました。

確認してみます。

@kyokucho1989
URLが長かったので必要そうな部分に限定してチェックするよう修正してみました。私の環境では落ちることはなくなりました。
assert_selector "a[href*='u=https%3A%2F%2Fbootcamp.fjord.jp%2Farticles%2F#{@article.id}']"

@komagata
テストが通りにくい(下記修正前)ということでご指摘いただいています。
スレッドの先頭：#7153 (comment)

次の修正を加えました。URLが長かったので不要と思われる部分を削除して、シェアするブログ記事のURLが存在するかをチェックしています。何か問題点などありましたら、ご意見をいただけないでしょうか？
333bdaa

@88-99

通るようになりました！

PRをDraft状態からReady for Reviewに変更してください。Approveします。

@kyokucho1989

ご確認いただき、ありがとうございます!!
marked this pull request as ready for review になりました。
お願いいたします🙏

kyokucho1989 · 2024-02-01T10:52:52Z

app/javascript/stylesheets/welcome/articles/_share-buttons.sass

@@ -0,0 +1,53 @@
+.share-buttons


スマホからだと表示が崩れてしまいます。
どこをどう修正すればいいのかわからないのですが...
どの環境からのデザインまで想定しているのか、@machidaさんに確認してみてくださいー

PC

スマホ

スマホのご確認ありがとうございます。

スマホからだと表示が崩れてしまいます。
どこをどう修正すればいいのかわからないのですが...
どの環境からのデザインまで想定しているのか、@machidaさんに確認してみてくださいー

@kyokucho1989
私の方でもスマホで確認してみましたが、全体的にロードが不十分できちんと確認はできませんでした。

@machida
スマホで確認すると、シェアボタンの大きさや間隔が違うというご指摘ですが、いかがでしょうか？

【スマホのスクショ】

@kyokucho1989

私は以下を参考にして確認したのですが、kyokucho1989さんはどのような方法で確認されましたか？
https://qiita.com/mako5656/items/411be80fff4600f241c3

@88-99
おはようございます。
私はChromeのデベロッパーツールで確認しました。

赤枠のボタンを押すとスマホで見た場合で表示されます。

@88-99
そうなんですか。であれば、私の環境がなにか違うのかもしれませんね…

ご確認ありがとうございます🙏
私の確認不足もありましたので、ご指摘いただいて勉強になりました。
町田さんにもご確認いただけると思いますので、ご意見をお聞きしたいと思います。

@88-99 @kyokucho1989 なんか僕の環境だと小さく表示されるバージョンが再現できないんですよね。。。シミュレーターを使うなど、他の方法もためしてみますー

@88-99 @kyokucho1989
実機で確認してサイズが小さくなる現象は起きなかったので、これでリリースしようと思います。
もし、本番で小さくなる現象が起きたら急ぎで対応します。

実機確認方法

192.168.0.112 の場合。

/bootcamp/config/environments/development.rb の

config.action_controller.asset_host と Rails.application.routes.default_url_options[:host] の設定を変更。
以下のようにする。

config.action_controller.asset_host = "http://192.168.0.112:3000/"

Rails.application.routes.default_url_options[:host] = '192.168.0.112:3000'

設定を変更した上で、

$bundle exec rails server -b 192.168.0.112

で立ち上げる。

同じWiFiに繋がってるスマホで、http://192.168.0.112:3000/ にアクセス。SafariではこのURLではシェアボタンが表示されないので、Chromeで確認。

@machida

お忙しいところご確認いただきありがとうございました🙏
私の方でも教えていただいた方法ですと、スマホのchromeで確認できました。
問題のある現象は見受けられませんでした。

実機で確認してサイズが小さくなる現象は起きなかったので、これでリリースしようと思います。
もし、本番で小さくなる現象が起きたら急ぎで対応します。

かしまりました。

kyokucho1989 · 2024-02-01T12:13:10Z

app/views/articles/show.html.slim

                - if @article.thumbnail.attached?
                  = image_tag @article.thumbnail_url, class: 'article__image'
              .article__body
                .js-markdown-view.a-long-text.is-md
                  = @article.body
+                = render 'share_buttons', article: @article


下側のシェアボタンがうまく機能していません。

article: @article.id が正しいかと思います。

すみません、抜けていました。修正しました。

kyokucho1989 · 2024-02-01T12:19:42Z

test/system/articles_test.rb

+
+    within_frame(find('.hatena-bookmark-button-frame', match: :first)) do
+      assert_selector "a[href='https://b.hatena.ne.jp/entry/s/bootcamp.fjord.jp/articles/#{@article.id}#bbutton']"
+    end


こちらはなぜ#bbutton となるのでしょうか。#button ではなく。

開発者ツールのElementsタブで実際の値を確認すると#bbuttonになっているため、そちらを利用しております。

了解です。タイポではないようなので、修正はいらないかと思います

ありがとうございます😃

88-99 · 2024-02-01T14:57:33Z

@kyokucho1989
早々にレビューいただき誠にありがとうございます。
本日改めてテストを通したところ落ちました。ご指摘いただいた内容と合わせて修正でき次第コメントさせていただきます🙇‍♂️

kyokucho1989 · 2024-02-04T01:25:10Z

@88-99
こんにちは。もろもろのコメント返信しました。テストが通る方法については私も少し調べてみます。
明日連絡します。

kyokucho1989 · 2024-02-05T20:36:19Z

@88-99
遅くなりました…!! コメントしました。スレッドに追記しています。

kyokucho1989 · 2024-02-08T22:44:45Z

@88-99
確認しました。オッケーです。
Komagataさんにレビューをお願いしてください

88-99 · 2024-02-09T14:19:26Z

@kyokucho1989
ご確認いただきまして、ありがとうございました！

@komagata

承認をいただきましたので、レビューをお願いできますでしょうか？

kyokucho1989

Approveしてませんでした... Approveします。

88-99 · 2024-02-10T10:12:07Z

@komagata

承認をいただけましたので、レビューをお願いいたします🙏

komagata

@88-99 コンフリクトの解消をお願いします〜

88-99 · 2024-02-18T14:42:04Z

@komagata

コンフリクトの解消をお願いします〜

解消しました。ご確認お願いいたします。

komagata

確認させて頂きました。OKです〜🙆‍♂️

88-99 · 2024-02-20T15:25:47Z

@komagata
ありがとうございます！！

88-99 assigned 88-99 and machida Dec 18, 2023

machida force-pushed the feature/add-share-buttons-on-blog-page-for-external branch from 9c80e89 to 31846d4 Compare January 5, 2024 07:27

machida removed their assignment Jan 5, 2024

komagata force-pushed the main branch from 715f2be to c461cb3 Compare January 11, 2024 04:42

88-99 force-pushed the feature/add-share-buttons-on-blog-page-for-external branch from 31846d4 to 3742252 Compare January 13, 2024 13:30

88-99 requested review from goruchanchan and removed request for goruchanchan January 18, 2024 14:29

88-99 force-pushed the feature/add-share-buttons-on-blog-page-for-external branch from 4f6b365 to 1f8ad96 Compare January 30, 2024 10:06

88-99 requested a review from kyokucho1989 February 1, 2024 03:20

kyokucho1989 reviewed Feb 1, 2024

View reviewed changes

88-99 marked this pull request as ready for review February 8, 2024 13:32

kyokucho1989 approved these changes Feb 9, 2024

View reviewed changes

komagata reviewed Feb 11, 2024

View reviewed changes

88-99 added 2 commits February 18, 2024 15:38

はてなブックマークのシェアボタンを設置

1e6f556

Facebookのシェアボタンを設置

9dab983

88-99 and others added 15 commits February 18, 2024 15:38

Xのシェアボタンを設置。コードを整理。

66353b5

ブログ記事の下部にもシェアボタンを設置

28982fb

テンプレートにarticle.idを渡すのではなく、articleを渡してテンプレート側でarticle.idを使って値を取得するよう修正

9951f3c

RuboCop修正

f2cccd1

シェアボタンにデザインを入れた

a3d3b0b

double quotesをsingle quotesに変更

34a8fef

share_buttonsに＠article.idを渡すよう修正。ブログ個別ページのURLが正しく表示されないため。

e317de7

Xのシェアボタンのテストを実装

619fd65

はてぶのシェアボタンのテストを実装

7226a72

Facebookのシェアボタンのテストを実装

5de83b4

Xのシェアボタンのテストを修正

cecdcb4

はてぶのシェアボタンのテストを修正

cfd3e1a

Facebookのシェアボタンのテストを修正

c8aea07

下側のシェアボタンで＠article.idを渡すよう修正

0f94982

URLをスリム化。シェアするブログ記事をチェックする。

901571f

88-99 force-pushed the feature/add-share-buttons-on-blog-page-for-external branch from b3e7848 to 901571f Compare February 18, 2024 06:59

komagata approved these changes Feb 20, 2024

View reviewed changes

komagata merged commit 4a622cd into main Feb 20, 2024
2 checks passed

komagata deleted the feature/add-share-buttons-on-blog-page-for-external branch February 20, 2024 06:29

github-actions bot mentioned this pull request Feb 20, 2024

Release 2024-02-22 02:12:52 #7389

Merged

19 tasks

プラグインを利用して、X、Facebook、はてなブックマークのシェアボタンを実装 #7153

プラグインを利用して、X、Facebook、はてなブックマークのシェアボタンを実装 #7153

Conversation

88-99 commented Dec 17, 2023 • edited Loading

Issue

概要

変更確認方法

変更前

上部

下部

変更後

上部

下部

ボタンを押したときの挙動

X

Facebook

はてなブックマーク

共有するブログ記事がブックマークされていない場合

共有するブログ記事がブックマークされている場合

使用プラグイン

X

Facebook

はてなブックマーク

88-99 commented Dec 18, 2023

machida commented Dec 27, 2023

machida commented Jan 5, 2024

88-99 commented Jan 6, 2024

goruchanchan commented Jan 19, 2024

88-99 commented Jan 19, 2024

88-99 commented Feb 1, 2024

kyokucho1989 commented Feb 1, 2024

kyokucho1989 left a comment • edited Loading

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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

88-99 Feb 7, 2024 • edited Loading

Choose a reason for hiding this comment

kyokucho1989 Feb 7, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

PC

スマホ

Choose a reason for hiding this comment

88-99 Feb 2, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kyokucho1989 Feb 3, 2024 • edited Loading

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

実機確認方法

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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

88-99 commented Feb 1, 2024

kyokucho1989 commented Feb 4, 2024

kyokucho1989 commented Feb 5, 2024

kyokucho1989 commented Feb 8, 2024

88-99 commented Feb 9, 2024

kyokucho1989 left a comment • edited Loading

Choose a reason for hiding this comment

88-99 commented Feb 10, 2024

komagata left a comment

Choose a reason for hiding this comment

88-99 commented Feb 18, 2024

komagata left a comment

Choose a reason for hiding this comment

88-99 commented Feb 20, 2024

88-99 commented Dec 17, 2023 •

edited

Loading

kyokucho1989 left a comment •

edited

Loading

88-99 Feb 7, 2024 •

edited

Loading

kyokucho1989 Feb 7, 2024 •

edited

Loading

88-99 Feb 2, 2024 •

edited

Loading

kyokucho1989 Feb 3, 2024 •

edited

Loading

kyokucho1989 left a comment •

edited

Loading