Twitterのシェアボタンに渡すテキストに特殊な文字が含まれていると動作しない

Question

ご覧いただきありがとうございます。

現在、JavaScriptによるシェアボタンを実装したいと思っています。
公式のリファレンスは、以下になります。
Tweet Button — Twitter Developers

Tweet Buttonの中でも Web Intent と呼ばれる種類の形式でシェア（ツイート）ボタンを実装したいと考えています。

また、textの内容はRailsから出力した内容で、以下のようなコードになっています。

ビュー

=link_to twitter_share_url(@name), class: 'btn', target: '_blank' do
   %i.fa.fa-twitter
   あなたのタイムラインへシェアする

ヘルパーメソッド

def twitter_share_url(name)
  "https://twitter.com/intent/tweet?text=#{name}さんは・・・（省略）・・・です。"
end

正常にTwitterでのシェアウィンドウが開かれる場合

@user = "太郎"のケースです。

<a class="btn" target="_blank" href="https://twitter.com/intent/tweet?text=太郎さんは・・・（省略）・・・です。">
    <i class="fa fa-twitter left"></i>
    あなたのタイムラインへシェアする
</a>

そして以下が、このリンクから遷移した結果です、

URL: https://twitter.com/intent/tweet?text=太郎さんは・・・（省略）・・・です。

動作しないパターン

ユーザー名（@name）に特殊な文字列が含まれていると、うまくTwitterのシェアウィンドウが開きません。

---

@user = "太郎|きびだんごチーム"のケースです。|という文字列が、含まれています。

<a class="btn" target="_blank" href="https://twitter.com/intent/tweet?text=太郎 | きびだんごチームは・・・（省略）・・・です。">
    <i class="fa fa-twitter left"></i>
    あなたのタイムラインへシェアする
</a>

そして、以下が、リンクを踏んだ際のURLです。

URL: https://twitter.com/intent/tweet?text=太郎%20|%20きびだんごチームは・・・（省略）・・・です。

遷移後は、真っ白の状態で何も開かれない。

考えていること

恐らく、|が特殊な文字列であり、URLに含める場合はサーバーサイド側かJavaScriptで何らかのエスケープ処理が必要となる中、そういった処理を噛ませられていないため、Twitterシェアボタンが正常に動作していないのだと思います。

しかし、自分の方で色々とエスケープ周りを試行錯誤していますが、未だに正常な動作が実現できていません。

何かアドバイスを頂けますと幸いです。

よろしくお願いいたします。

Comments

[defghi1977]

URLエンコードをRubyで行うかJavaScriptで行うか

[peanuts]

URLエンコード周りが鍵というヒントをありがとうございます。サーバーサイドで完了できればと思っており、現在、Ruby側で試行錯誤しています。

Answer 1

@defghi1977さん、ヒントを頂きありがとうございました。

以下のようにインテントのURLのtextのクエリー部分をURLエンコードしてあげることで、解決できました。

def twitter_share_url(name)
  "https://twitter.com/intent/tweet?text=#{escape_text(name)}"
end

private

def escape_text(name)
  CGI.escape(name + "は・・・（省略）・・・です。")
end

また、今回のデバッグ経験で、URLエンコードについておさらいすることができました。
以下の記事は初歩から理解でき、おすすめです。

URLエンコードについておさらいしてみた - Qiita

ありがとうございました。