質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
HttpWebRequest

HttpWebRequestとは.NETにおけるクラスであり、WebRequestクラスをHTTPに導入するものです。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

受付中

固有(独自)の関数を素のJavaScriptに置き換えたい。@grant GM_xmlhttpRequest

Meli_ssa
Meli_ssa

総合スコア0

HttpWebRequest

HttpWebRequestとは.NETにおけるクラスであり、WebRequestクラスをHTTPに導入するものです。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0回答

0リアクション

1クリップ

377閲覧

投稿2022/10/01 13:36

編集2022/11/04 07:48

前提、実現したいこと

私は現在、特にFirefoxで選択したテキストをポップアップ状で(日本語に)翻訳するスクリプトを使用しています。
いちいちwindow.openで翻訳サイトに飛ばされる工数をショートカットできるという事実に、たいへん意義と価値を感じて気に入って使っています。

しかし、GM_xmlhttpRequest({ 何らかの通信処理 });という形式にはめなければならず、現状ではTampermonkey系でしか使えない状態です。
ネットで調べた情報によれば、この特有の関数は new XMLHttpRequest();のような役割を担っているとの事だったのでnew XMLHttpRequest();に置き換えて、Tampermonkey系からの依存度を減らしたい(例えばブックマークレットとかからも実行できるようにしたい...etc)と考えています。

しかし、試してみてもnull「接続失敗」という結果しか返ってきません。

この事に関してお詳しい方、ご教示お願いできればと思います。

該当のソースコード

Tampermonkey

JavaScript

// ==UserScript== // @name textを選択して任意の言語を日本語に翻訳 // @version 1.3.5 // @description ←最も不要だと思うが、これ設定しないと叱られる // @match *://*/* // @run-at document-start // @connect translate.google.com // @grant GM_xmlhttpRequest // ==/UserScript== //「// @connect」は、某サイトの機能をユーザーが使うか確認するストッパー(安全装置)を取り外すような役割があり、なくても煩わしいだけで使える。 // また、「// @connect」自体はTampermonkeyの設定「セキュリティ」→「@connect 文を確認: 」→「無効」に調整可能。 window.addEventListener('load', () => { 'use strict'; var target_language = 'auto'; // 翻訳targetは、的を絞らず多言語に対応したいので auto // 以下は元のURLから &tl=ja を語尾にくっつけただけ。↓ var googleUrl = 'https://translate.google.com/translate_a/single?client=gtx&dt=t&dt=bd&dj=1&source=input&hl=auto&sl=auto&tl=ja'; var iconSize = 24; var translationTestSize = 16; var icon = document.createElement('div'); var word = ''; var style = '' + 'width:23px;' + 'height:23px;' + 'margin:4px!important;' + 'cursor: pointer;' + ''; icon.innerHTML = // <svg><path> がダラダラ長過ぎるので <img> に変更 '<img src="https://storage.googleapis.com/gweb-uniblog-publish-prod/images/Translate_logo.max-500x500.png" style="width:23px; height:23px; margin-top:5px;margin-left:5px; cursor: pointer; ">'; icon.setAttribute('style', '' + 'width:32px!important;' + 'height:32px!important;' + 'display:none!important;' + 'background:#fff!important;' + 'border-radius:16px!important;' + 'box-shadow:4px 4px 8px #888!important;' + 'position:absolute!important;' + 'z-index:2147483647!important;' + ''); // DOM に翻訳アイコンを追加する document.documentElement.appendChild(icon); // マウス イベント: 選択したテキストが消えるのを防ぐ document.addEventListener('mousedown', (e) => { // // 翻訳アイコンをクリック if (e.target == icon || (e.target.parentNode && e.target.parentNode == icon) || (e.target.parentNode.parentNode && e.target.parentNode.parentNode == icon)) { e.preventDefault(); } }); // 選択変更イベント: 選択したテキストをクリックすると、翻訳アイコンと翻訳パネルが非表示に。 document.addEventListener("selectionchange", () => { if (!window.getSelection().toString().trim()) { icon.style.display = 'none'; server.containerDestroy(); } }); // マウス イベント: 選択したテキストが消えるのを防ぐ; 翻訳アイコンを表示、非表示に。 document.addEventListener('mouseup', (e) => { // // 翻訳アイコンをクリック if (e.target == icon || (e.target.parentNode && e.target.parentNode == icon) || (e.target.parentNode.parentNode && e.target.parentNode.parentNode == icon)) { e.preventDefault(); return; } for (var i = 0; i < server.rendered.length; i++) { // 翻訳コンテンツ パネルをクリック if (e.target == server.rendered[i]) return; // 翻訳アイコンを作成しない } var text = window.getSelection().toString().trim(); word = text; if (text && icon.style.display == 'none') { icon.style.top = e.pageY + 12 + 'px'; icon.style.left = e.pageX + 'px'; icon.style.display = 'block'; } else if (!text) { icon.style.display = 'none'; server.containerDestroy(); // 翻訳コンテンツ パネルを破棄 } }); // 翻訳アイコンクリックイベント icon.addEventListener('click', (e) => { var text = window.getSelection().toString().trim(); if (text) { icon.style.display = 'none'; server.containerDestroy(); // 翻訳コンテンツ パネルを破棄 // 新しい翻訳コンテンツ パネルを作成。 var container = server.container(); container.style.top = e.pageY + 'px'; if (e.pageX + 350 <= document.body.clientWidth) //コンテナ パネルの最大幅 250px。 container.style.left = e.pageX + 'px'; else container.style.left = document.body.clientWidth - 350 + 'px'; document.body.appendChild(container); server.rendered.push(container); googleUrl += `&tk=${token(text)}`; if (isJapan_customized_by_me(text)) { // 英語に対して日本語変換処理? ajax(googleUrl + '&tl=en&q=', encodeURIComponent(text), 1, container); // ajax(googleUrl + '&tl=ja&q=', encodeURIComponent(text), 1, container); } else if (countOfWord(text) !== 1) { // 多言語に対して日本語変換処理? ajax(googleUrl + '&tl=' + target_language + '&dt=t&q=', encodeURIComponent(text), 1, container); } } }); function countOfWord(str) { var value = String(str); value = value.replace(/^\s+|\s+$/gi, ""); // 先頭と末尾のスペースは単語としてカウントされない value = value.replace(/\s+/gi, " "); // 複数のスペースを 1 つのスペースに置き換え var length = 0; //更新回数 var match = value.match(/\s/g); // 一致しない場合 null を返す if (match) { length = match.length + 1; } else if (value) { length = 1; } return length; } function isJapan_customized_by_me(str) { var reg = /^([\u4E00-\u9FA5]|[\uFF00-\uFF20]|[\u3000-\u301C])+$/; return !!reg.test(str); } // Google 翻訳のトークン計算 function token(a) { const b = 406644; const b1 = 3293161072; const jd = "."; const sb = "+-a^+6"; const Zb = "+-3^+b+-f"; let e = []; let f = 0; let g = 0; for (e = [], f = 0, g = 0; g < a.length; g++) { let m = a.charCodeAt(g); 128 > m ? e[f++] = m : (2048 > m ? e[f++] = m >> 6 | 192 : (55296 == (m & 64512) && g + 1 < a.length && 56320 == (a.charCodeAt(g + 1) & 64512) ? (m = 65536 + ((m & 1023) << 10) + (a.charCodeAt(++g) & 1023), e[f++] = m >> 18 | 240, e[f++] = m >> 12 & 63 | 128) : e[f++] = m >> 12 | 224, e[f++] = m >> 6 & 63 | 128), e[f++] = m & 63 | 128) } a = b; for (f = 0; f < e.length; f++) a += e[f], a = RL(a, sb); a = RL(a, Zb); a ^= b1 || 0; 0 > a && (a = (a & 2147483647) + 2147483648); a %= 1E6; return a.toString() + jd + (a ^ b); } // Google 翻訳のトークン計算、token() function RL(a, b) { const t = "a"; const Yb = "+"; for (let c = 0; c < b.length - 2; c += 3) { let d = b.charAt(c + 2); d = d >= t ? d.charCodeAt(0) - 87 : Number(d); d = b.charAt(c + 1) == Yb ? a >>> d : a << d; a = b.charAt(c) == Yb ? a + d & 4294967295 : a ^ d; } return a; } // ajax はドメイン全体でパブリック メソッドにアクセス function ajax(url, text, target, element, method, data, headers) { if (!!!method) method = 'GET'; url += text; if (!!!headers) headers = { 'cookie': '' }; //--------------------------------------------------------// // 試した事 ↓ /* var xhr = new XMLHttpRequest(); xhr.onload = function (res) { if(target !== 0){ google(res.responseText, element); } } xhr.open(method, url,[headers, data], false); // true xhr.send(); xhr.onerror=function(res){ displaycontainer("接続失敗",element); } xhr.send(null); */ //--↓ 以下から Tampermonkey依存の関数 ↓ -----------------// GM_xmlhttpRequest({ method: method, url: url, headers: headers, data: data, onload: function(res) { if (target !== 0) { // target == 0 改め // 省略 }else{ google(res.responseText, element); } }, onerror: function(res) { displaycontainer("接続失敗", element); } }); //↑ 以上までがTampermonkey依存の関数 ↑ ---------------// } // この辺りの内容を大幅省略 // Google 翻訳エンジン function google(rst, element) { var json = JSON.parse(rst), html = ''; for (var i = 0; i < json.sentences.length; i++) { html += json.sentences[i].trans; } displaycontainer(html, element); store_ajax(word, html, element); } function displaycontainer(text, element) { element.innerHTML = text; element.style.display = 'block'; // 結果を表示 } // 翻訳サーバー var server = { // 生成された翻訳コンテンツパネルを格納(破棄時に使用) rendered: [], // 生成された翻訳コンテンツ パネルを破棄する containerDestroy: function() { for (var i = this.rendered.length - 1; i >= 0; i--) { if (this.rendered[i] && this.rendered[i].parentNode) { this.rendered[i].parentNode.removeChild(this.rendered[i]); } } }, // 翻訳結果パネル DOM を生成 (この時点ではまだページに追加されていない) container: function() { var div = document.createElement('div'); div.setAttribute('style', '' + 'display:none!important;' + 'position:absolute!important;' + 'font-size:13px!important;' + 'overflow:auto!important;' + 'background:#fff!important;' + 'font-family:sans-serif,Arial!important;' + 'font-weight:normal!important;' + 'text-align:left!important;' + 'color:#000!important;' + 'padding:0.5em 1em!important;' + 'line-height:1.5em!important;' + 'border-radius:5px!important;' + 'border:1px solid #ccc!important;' + 'box-shadow:4px 4px 8px #888!important;' + 'max-width:350px!important;' + 'max-height:216px!important;' + 'z-index:2147483647!important;' + ''); return div; } }; // 翻訳サーバーの終了 });

補足

追記ですが
Greasemonkeyとの互換性はありません。
Violentmonkeyとの互換性はあります。

ホームを追記します
https://www.tampermonkey.net/documentation.php#GM_xmlhttpRequest

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

HttpWebRequest

HttpWebRequestとは.NETにおけるクラスであり、WebRequestクラスをHTTPに導入するものです。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。