JavaScriptでHTMLの"<texterea>"に書いてある文章を取得してツイートしたい

Question

前提・実現したいこと

JavaScriptでHTMLの"<texterea>"に書いてある文章を取得してツイートしたい

JavaScriptを最近勉強し始めた初心者です。
サイト内にテキストエリアを設置し、その中身をツイートする機能を諸事情で作りたいのですが
ツイートボタンを押したあとに新規ウィンドウは表示されるのですが、下記のエラーメッセージが表示されます。

発生している問題・エラーメッセージ

ブラウザ：GoogleChrome

このページは動作していません
この問題が何度も発生する場合は、サイト所有者にお問い合わせください。
HTTP ERROR 400

該当のソースコード

<form name="result_form">
<textarea name="result" rows="5" cols="60"></textarea>
<p><input type="button" value="文章をツイート" onclick="twitText()"/></p>

function twitText() {
  var s, url;
  s = document.result_form.result.value;
  url = document.location.href;

  if (s != "") {
    if (s.length > 140) {
      //文字数制限
      alert("テキストが140字を超えています");
    } else {
      //投稿画面を開く
      url = "http://twitter.com/share?url=" + escape(url) + "&text='" + s +"'";
      window.open(url,"_blank","width=600,height=300");
    }
  } 
}

JavaScript３行目の変数[s]を任意のテキストにすると動作するのですが、上記の記述にすると動作しません。
以上、改善方法を教えていただけないでしょうか。また、改善するのにTwitterAPIなどが必要な場合は補足いただけますと幸いです。
よろしくお願いいたします。

Comments

[m.ts10806]

f (s.length > 140) {　←これは本当にこのように書かれていますか？コピペミスはありませんか？

[m.ts10806]

現象が再現できなかったのですが、このhtmlはどのように実行されていますか？サーバー上でしょうか？ローカル上でしょうか？（URLがfile://となっていればローカルファイルでの実行です）

[m.ts10806]

実際に送信してみたテキストなどもご提示いただければと思います。

Answer 1

ちょっと書き方がまずそうなところだけ調整してみました

function twitText() {
  var s, url;
  s = document.querySelector('[name="result_form"] [name="result"]').value;
  url = document.location.href;
  if (s != "") {
    if (s.length > 140) {
      alert("テキストが140字を超えています");
    } else {
      url = "http://twitter.com/share?url=" + encodeURIComponent(url) + "&text='" + encodeURIComponent(s) +"'";
      window.open(url,"_blank","width=600,height=300");
    }
  } 
}

Comments

[molgen46]

コメントありがとうございます。原因は他の方の回答で解決しましたが、ソース修正の参考にさせていただきます！

Answer 2

私の方でローカルファイル実行（file:///）とWebサーバー上で実行（http）で試したのですが、現象が再現確認できませんでした。
GoogleChrome最新、FireFox最新で試しています。

幾つか試していただきたいので、下記、ご確認ください。

• httpsにする

url = "https://twitter.com/share?  //以下略

• 取得テキストを設定している部分で囲っているシングルクォートを除く

url = "https://twitter.com/share?url=" + escape(url) + "&text=" + s ;

400エラーは送信したリクエストが不正（または不正な形式）であることを示すエラーです。

• エラー メッセージ : HTTP エラー 400

リクエストの作り方に何かしら問題があるのかもしれません。
送ろうとしているメッセージに不正な文言が紛れ込んでいたとか、
文字数制限をオーバーしたとか・・・。
いずれにしてもTwitterは140字という文字制限がありますし、ツイートに載せるURLも含まれているとしたら、打ち込めるコメントの文字数も更に短くなります。
その観点からも確認してみてください。urlを渡さないようにするとか、短いコメントだけ送信してみるとか。

Comments

[molgen46]

>>送ろうとしているメッセージに不正な文言が紛れ込んでいた
まさしく仰る通りで、取得したテキストの中身に半角の「%」が混ざっていたことが原因でした…！シングルクォートの箇所もご指摘の通り問題がありますので修正いたします。おかげさまで解決いたしました！この度はありがとうございました！！

[m.ts10806]

なるほど。urlエンコードにかかる部分でしたね。
その部分はyambejpさんが提示されているコードを参考にして修正するとうまいこと送信できるかもしれませんのでそちらも試してみてください。
yambejpさんの回答にあるように、任意で入力できる文字列をそのまま送信するのはセキュリティ的によろしくありませんので。

[molgen46]

修正前のコードだとセキュリティ面で問題があるのですね。初心者なのでとても勉強になりました、ありがとうございます！