ブラウザ上で変更可能な選択した文字列を英語から日本語に翻訳するブックマークレット

最初、claude.ai に作成してもらいました。ai が作成するチャットのタイトルが英語で困っていたので。

01.javascript:(function(){
02.    var selectedText = window.getSelection().toString();
03.    if (selectedText) {
04.        fetch('https://api.mymemory.translated.net/get?q=' + encodeURIComponent(selectedText) + '&langpair=en|ja')
05.        .then(response => response.json())
06.        .then(data => {
07.            var translatedText = data.responseData.translatedText;
08.            document.execCommand('insertText', false, translatedText);
09.        })
10.        .catch(error => console.error('Error:', error));
11.    } else {
12.        alert('テキストを選択してください。');
13.    }
14.})();

これで動作はしていますが、api.mymemory.translated.net と言う良く詳細の解らない API が使われているので、
同じ事をもう一度 claude.ai に聞いてみると、Google の API で返して来ました。
しかし、今度はコードがおかしくてうまく動きませんでした

原因究明するより、動作しているほうのコードに、主体の API を転記しました。

01.javascript:(function(){
02.    var selectedText = window.getSelection().toString();
03.    if (selectedText) {
04.        fetch(`https://translate.googleapis.com/translate_a/single?client=gtx&sl=en&tl=ja&dt=t&q=${encodeURIComponent(selectedText)}`)
05.        .then(response => response.json())
06.        .then(data => {
07.            var translatedText = data[0].map(item => item[0]).join('');
08.            document.execCommand('insertText', false, translatedText);
09.        })
10.        .catch(error => console.error('Error:', error));
11.    } else {
12.        alert('テキストを選択してください。');
13.    }
14.})();


1回目で動いたのは運が良かったと言わざるを得ないので、今後は数回。できれば AI も変えて試すのがいいと思いました。

JavaScript, 記録

ChatGPT で トップまでスクロールする ブックマークレット

ブックマークバーにドラッグ & ドロップしてください。

共有用のリンクページでも動作するようです

CharGPT scroll TOP


1.<a href="javascript:document.getElementsByClassName('text-base')[0].scrollIntoView(false);void(0);">CharGPT scroll TOP</a>


JScript : Excel の新しいブックのデフォルトのシートのセルに直接値をセットして、オートフィルを Range オブジェクトから実行する



Range オブジェクトの作成に数値を使用します

プログラミングで処理を行うので、Range("A1:A20") というような表現を使わずに、Cells(行,列) を使って Range オブジェクトを作成しています。
01.// ****************************
02.// 初期処理
03.// ****************************
04.WScript.Echo( "処理を開始します" );
05.var WshShell = new ActiveXObject("WScript.Shell");
06.var ExcelApp = new ActiveXObject( "Excel.Application" );
07. 
08.// デバッグ時は、Excel の本体を表示させて状況が解るようにする
09.ExcelApp.Visible = true;
10.// UI でチェックさせるようなダイアログを表示せずに実行する
11.ExcelApp.DisplayAlerts = false;
12. 
13.try {
14. 
15.        // ****************************
16.        // ブック追加
17.        // ****************************
18.        var Book = ExcelApp.Workbooks.Add();
19. 
20.        // 通常一つのシートが作成されています
21.        var Sheet = Book.Worksheets( 1 );
22. 
23.        // ****************************
24.        // シート名変更
25.        // ****************************
26.        Sheet.Name = "JScriptの処理";
27. 
28.        // ****************************
29.        // セルに値を直接セット
30.        // ****************************
31.        for( var i = 1; i <= 10; i++ )
32.        {
33.                Sheet.Cells(i, 1) = "処理 : " + i;
34.        }
35. 
36.        // ****************************
37.        // 1つのセルから
38.        // AutoFill で値をセット
39.        // ****************************
40.        Sheet.Cells(1, 2) = "子";
41.        // 基となるセル範囲
42.        var SourceRange = Sheet.Range(Sheet.Cells(1, 2), Sheet.Cells(1,2));
43.        // オートフィルの範囲(基となるセル範囲を含む )
44.        var FillRange = Sheet.Range(Sheet.Cells(1, 2), Sheet.Cells(10,2));
45.        SourceRange.AutoFill(FillRange);
46. 
47.        // ****************************
48.        // 保存
49.        // ****************************
50.        Book.SaveAs( WshShell.CurrentDirectory + "\\sample.xlsx" );
51.  
52.} catch (error) {
53.        ExcelApp.Quit();
54.        ExcelApp = null;
55.        WshShell.Popup(error.description);
56.        WScript.Quit();
57.}
58. 
59.ExcelApp.Quit();
60.ExcelApp = null;
61. 
62.// ****************************
63.// ファイルの最後
64.// ****************************
65.WshShell.Popup("処理を終了します");

関連する記事

JScript : Visual Studio Code で、WSH を使用する準備

JScript でエラーが発生した行を知る方法

実行プログラムが cscript.exe や wscript.exe の場合、try ~ catch 内のエラー発生の行番号を知る事ができないので、以下の手順で処理します。
1) 拡張子を hta に変更する
2) WScript を使った実行をコメントにする
3) ソースの先頭に <script> ソースの最後に </script> を記述する
4) さらにソースの先頭に <meta http-equiv="x-ua-compatible" content="ie=edge"> を記述する
5) catch の中で、error.stack を表示する
6) エクスプローラからこのソースをダブルクリックする
    ( HTML アプリケーションホストで実行させる )




.hta 用コード

01.<meta http-equiv="x-ua-compatible" content="ie=edge">
02.<script>
03.// ****************************
04.// 初期処理
05.// ****************************
06.//WScript.Echo( "処理を開始します" );
07.var WshShell = new ActiveXObject("WScript.Shell");
08.var ExcelApp = new ActiveXObject( "Excel.Application" );
09. 
10.// デバッグ時は、Excel の本体を表示させて状況が解るようにする
11.ExcelApp.Visible = true;
12.// UI でチェックさせるようなダイアログを表示せずに実行する
13.ExcelApp.DisplayAlerts = false;
14. 
15.try {
16. 
17.    // ****************************
18.    // ブック追加
19.    // ****************************
20.    var Book = ExcelApp.Workbooks.Add();
21. 
22.    // 通常一つのシートが作成されています
23.    var Sheet = Book.Worksheets( 1 );
24. 
25.    // ****************************
26.    // シート名変更
27.    // ****************************
28.    Sheet.Name = "JScriptの処理";
29. 
30.    // ****************************
31.    // セルに値を直接セット
32.    // ****************************
33.    for( var i = 1; i <= 10; i++ )
34.    {
35.        Sheet.Cells(i, 1) = "処理 : " + i;
36.    }
37. 
38.    // ****************************
39.    // 1つのセルから
40.    // AutoFill で値をセット
41.    // ****************************
42.    Sheet.Cells(1, 2) = "子";
43.    // 基となるセル範囲
44.    var SourceRange = Sheet.Range(Sheet.Cells(1, 2), Sheet.Cells(1,2));
45.    // オートフィルの範囲(基となるセル範囲を含む )
46.    var FillRange = Sheet.Range(Sheet.Cells(1, 2), Sheet.Cells(10,2));
47.    SourceRange.utoFill(FillRange);
48. 
49.    // ****************************
50.    // 保存
51.    // ****************************
52.    Book.SaveAs( WshShell.CurrentDirectory + "\\sample.xlsx" );
53. 
54. 
55.} catch (error) {
56.    ExcelApp.Quit();
57.    ExcelApp = null;
58.    WshShell.Popup(error.description + error.stack);
59.    WScript.Quit();   
60.}
61. 
62.ExcelApp.Quit();
63.ExcelApp = null;
64. 
65.// ****************************
66.// ファイルの最後
67.// ****************************
68.WshShell.Popup("処理を終了します");
69.</script>

関連する Microsoft ドキュメント

Application オブジェクト Workbook オブジェクトのコレクション Workbook オブジェクト Worksheet オブジェクトのコレクション Worksheet オブジェクト Cells プロパティ

JScript : Visual Studio Code で、WSH を使用する準備

Visual Studio Code は、基本的には UTF-8 で記述され、Shift_JIS でソースコードを書いて運用するにはひと工夫が必要になります。( そもそも、Shift_JIS の自動判定が完全ではありません )

1) Visual Studio Code の設定

設定タブを表示させて設定の検索フィールドに『encoding』と入力すると、Auto Guess Encoding が表示されるのでチェックします。( これは、settings.json に "files.autoGuessEncoding": true と書き込む処理となります ) これによって、テキストファイルのキャラクタセットを自動で判定するようになりますが、残念ながらテキストの内容によって失敗する事が多々あるので判定がうまく行くようにテンプレートを作成します。

2) JScript 用テンプレート

いろいろ試してみて Shift_JIS と判定してくれるようなコメントを作成し、ついでに WScript.Shell オブジェクトを作成しておいて、実行の終了時にメッセージボックスを出すようにしています。
01.// ****************************
02.// 初期処理
03.// ****************************
04.WScript.Echo( "処理を開始します" );
05.var WshShell = new ActiveXObject("WScript.Shell");
06. 
07. 
08. 
09. 
10.// ****************************
11.// ファイルの最後
12.// ****************************
13.WshShell.Popup("処理を終了します");

オブジェクトの作成は『WScript.CreateObject("WScript.Shell")』でも可能ですが、HTML アプリケーションに転用してコードを再利用する目的で、『new ActiveXObject("WScript.Shell")』を使用しています

3) tasks.json の配置

実行フォルダに、.vscode フォルダを作成して tasks.json をセッティングする必要があります。Visual Studio Code の UI から tasks.json を作成する処理( Configure Task )は回りくどい上にどうせ変更しなくてはならないので、一つ作成しておいて新しいフォルダにコピーして運用するといいでしょう。 tasks.json を正しく設定すると、『ビルドタスクの実行 ( CTRL + SHIFT + B )』で、開いているソースコードを cscript.exe で実行して Visual Studio Code のターミナルで結果を知る事ができます。 この設定では、実行後フォーカスがターミナルに移動するので、何かキーを押せばターミナルを閉じる事ができます。
01.{
02.        "version": "2.0.0",
03.        "presentation": {
04.                "focus": true
05.        },     
06.        "tasks": [
07.                {
08.                        "label": "WSH",
09.                        "type": "shell",
10.                        "args": ["${file}"],
11.                        "group": {
12.                                "kind": "build",
13.                                "isDefault": true
14.                                },
15.                        "command": "cscript"
16.                }
17.        ]
18.}





要素を参照する document オブジェクトのメソッド

単数

要素(Element) が単数形になっています(戻されるのは一つのオブジェクトです)

var element = document.getElementById(id);

セレクタに一致した最初のオブジェクトを返します

var element = document.querySelector(selectors);

複数

要素(Element) が複数形(Elements)になっています。戻されるのは複数のオブジェクトなので、そのうちの一つを参照する為に[index] で番号( 0 はじまり) で指定します。要するに戻されるのはコレクションですが、記述方法は配列です。

🔴 name 属性で取得

var elements = document.getElementsByName(name);

▼ この記事内の title( 単数と複数 ) を デベロッパーツールで表示( F12 で開いてください )



01.<script>
02.function test_name_title() {
03.        var elements = document.getElementsByName("title");
04.        console.dir( elements );
05.        for (var i = 0; i < elements.length; i++) {
06.                var item = elements[i];
07.                console.log( item.textContent );
08.        }
09.}
10.</script>
11. 
12.<input type="button" value="実行" onclick="test_name_title();">

▼ MDN より引用
リストの要素について処理を回すために for...in や for each...in を用いてはいけません。なぜなら、 NodeList のプロパティである要素に加えて、 length プロパティについても処理が適用されるため、 element オブジェクトのみ処理すべきスクリプトではエラーが生じます。また、for..in で取得されるプロパティの順番は保証されていません。

for...of ループ は IE11 で使用できません

🔴 要素名で取得

var elements = document.getElementsByTagName(name);

🔴 クラス名で取得

var elements = document.getElementsByClassName(names);
// または
var elements = rootElement.getElementsByClassName(names);

🔴 CSS セレクタで取得

セレクタに一致した全てのコレクションを返します

var elementList = parentNode.querySelectorAll(selectors);

ブークマークレットの作成方法( コードの書き方 )

通常の https:// の代わりに javascript: と書いて、その後には普通に JavaScript のコードを書きます。但し、改行コードは使えないので長い JavaScript のコードの場合は他でテストした上で改行コード取り去る必要があります。

また、メッセージボックスが出ないコードの場合は、最後に void(0); を追加するのが簡単です。

だれにでも解りやすい使い方

WEB ページ上の入力フィールドに固定値を表示させる事ができます。入力フィールドを DOM で参照する必要があり、その定義情報を知る知識が必要である事と、その定義情報はいつ変更されても仕方が無いという事を理解しておく必要があります。

関連する記事 🚩 要素を参照する document オブジェクトのメソッド

Google のページ 🚩 https://www.google.co.jp/ の検索入力で試します

Google の検索は name="q" なので以下のようなコードをブックマークに書き込めば使えます。

※ 例えば業務上の社員番号入力などに使えます。

▼ コードの書き方には以下のようなバリエーションがあります
1.javascript:(function(){document.getElementsByName("q")[0].value="ブックマークレット";})();

この記法は無名 function の定義を実行するという意味で、書き換えると以下のようになります。
1.javascript:var a=function(){document.getElementsByName("q")[0].value="ブックマークレット";};a();

または以下のようにも書けますが、使い勝手が悪いので避けたほうがいいでしょう。


WEB ページから登録できるようにするには、A 要素で以下のように記述します。
1.<a href="javascript:var%20a=function(){document.getElementsByName(%22q%22)[0].value=%22ブックマークレット%22;};a();" onclick="alert('クリックでは使えません');return false">ブックマークレット</a>

Edge 以外では、これをブックマークバーにドラッグ & ドロップで登録されると思います。

▼ 登録用リンク
ブックマークレット

Google のログインは、id="identifierId" なので、少し変えればアカウントの入力に使用できるでしょう。( 使うのは自宅の PC にしましょう )




clipboard.js を使用して WEBページ上でテキストをクリップボードにコピーする

clipboard.js
CDNJS

デモページ

ページ下部は、div に contenteditable="true" を設定しているので直接編集できるエリアになっています。なので、クリップボードにコピーした後は普通に貼り付けて確認できます。

実装内容

1) ページにひとつだけ、クリップボード転送用の要素を DIV で作成します(ここでは id="clipboard")
   (body 要素直下でいいと思います)

2) DIV 内に改行やスペースを反映させる為に white-space:pre-wrap を設定する
( 3) で幅を指定してそこで改行させる為の -wrap を使用します )

3) ページ上から隠す為に、position:absolute;left:-1000px を設定する
   (クリップボートへコピーする為に選択する必要があるので、非表示では動作しません)
   転送したテキストがこちら側へ表示しないように width:900px と word-wrap:break-word を指定する

4) クリックイベントは、ボタンである必要は無く、どのような要素でも良い

5) ここでは、クリップボードへコピーが終了した後、alert でメッセージを表示しています
( 必要な場合にこのようにイベントを使用します )

注意事項

ここでは、WEB ページ内に無い文字列を加工等してクリップボードに転送する事を想定しているので、転送用の隠し DIV を用意していますが、WEB ページ上に既にあるテキストならば、その要素に対して直接 data-clipboard-target 属性をトリガー要素に設定します

001.<!DOCTYPE html>
002.<html>
003.<head>
004.<meta charset="utf-8">
005.<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">
006.<title>クリップボードへコピー</title>
007. 
008.<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
009.<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css" />
010. 
011.<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>
012. 
013.<script>
014.$(function(){
015. 
016.        // ***************************
017.        // クリップボード
018.        // ***************************
019.        // コピーする時のトリガーとなる要素に設定されるクラスを決定
020.        var clipboard = new ClipboardJS('.clip_trigger');
021. 
022.        // ***************************
023.        // コピー成功後のイベント
024.        // ***************************
025.        clipboard.on('success', function(e) {
026.                alert("クリップボードにコピーしました");
027.        });
028. 
029.        // ***************************
030.        // クリップボード用データ転送
031.        // ***************************
032.        $("#act_copy").on("click", function(){
033. 
034.                $("#clipboard").text( $("#text_data").val() );
035. 
036.        });
037. 
038.});
039. 
040.</script>
041. 
042.<style>
043.html,body {
044.        height: 100%;
045.}
046. 
047.body {
048.        margin: 0;
049.}
050. 
051.#text_data {
052.        width:300px;
053.}
054. 
055./* 上下エリア フィットコントロール用  */
056.#head {
057.        padding: 16px;
058.        width: 100%;
059.        height: 230px;
060.}
061.#extend {
062.        padding: 4px 16px;
063.        border: solid 2px #c0c0c0;
064.        overflow: scroll;
065. 
066.        margin-left: auto;
067.        margin-right: auto;
068.        width: calc( 100% - 3px );
069. 
070.        height: calc( 100% - 230px - 2px );
071.}
072. 
073.</style>
074. 
075.</head>
076.<body>
077.<!-- クリップボード用隠しエリア -->
078.<div id="clipboard" style='position:absolute;left:-1000px;width:900px;white-space:pre-wrap;word-wrap:break-word;'></div>
079.<div id="head">
080.        <div class="alert alert-primary">クリップボード処理
081.        <a class="btn btn-secondary btn-sm float-right align-top" href=".">フォルダ</a>
082.</div>
083. 
084.        <span class="align-top mr-4">クリップボードへコピー</span>
085. 
086.        <textarea class="align-top mr-4" id="text_data"></textarea>
087. 
088.        <input
089.                id="act_copy"
090.                data-clipboard-target="#clipboard"
091.                class="clip_trigger btn btn-primary align-top mr-4"
092.                type="button"
093.                value="実行">
094. 
095.        <input
096.                onclick="location.reload(true)"
097.                class="btn btn-info btn-sm align-top  mr-4"
098.                type="button"
099.                value="再表示">
100. 
101. 
102.</div>
103. 
104.<!-- 編集可能なエリア : ここにクリップボードの内容を貼り付けて確認する -->
105.<div id="extend" contenteditable="true"></div>
106. 
107. 
108. 
109.</body>
110.</html>


HTA か IE11(要設定) で動作する Excel.Application の処理を JavaScript で記述したサンプル

JavaScript で記述しているのは、jQuery を使用したいからです。Excel 部分以外であれば他の用途にそのまま利用できるように考えています。

twitter-bootstrap を使用して簡単で美しい見栄えが利用できます。

Excel.Application を JavaScript で利用する際は、Microsoft が認識しているバグがあるので、サンプルのような終わり方をする必要があります。そうしなければ、メモリに Excel のプロセスが残ってしまう事を避けられません。Microsoft は、VBScript を使えば問題無いと書いていますが、IE11 でそもそも VBScript を使うのはいろいろ制限や工夫が必要な上に他へのリソースの流用ができないので、このようなアプローチが必要かもしれません。
001.<!DOCTYPE html>
002.<html>
003.<head>
004.<meta http-equiv="x-ua-compatible" content="ie=edge" />
005.<meta charset="sjift_jis">
006.<title>Excel の処理</title>
007.<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
008.<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css" />
009.<script>
010. 
011.        // ****************************
012.        // HTA の時のみ使用
013.        // ****************************
014.        //top.moveTo( 300, 150 );
015.        //top.resizeTo( 800, 600 );
016. 
017.        var WshShell = new ActiveXObject("WScript.Shell");
018.        var FilePath = "";
019. 
020.        $(function(){
021. 
022.                $("#action").on("click", function(){
023. 
024.                        // ****************************
025.                        // Excel.Application を解放する為に
026.                        // ローカル変数を使用しています
027.                        // ****************************
028.                        var Excel = null;
029.                        var Book = null;
030.                        var Worksheet = null;
031. 
032.                        Excel = new ActiveXObject("Excel.Application");
033. 
034.                        // ****************************
035.                        // 保存ダイアログを前面に
036.                        // 表示する為の処理です
037.                        // ****************************
038.                        Excel.Visible = true;
039.                        Excel.WindowState = 2;  // Minimize
040.                        Excel.WindowState = 1;  // Maximize
041.                        Excel.Visible = false;
042. 
043.                        // ****************************
044.                        // 警告を出さないようにする
045.                        // 使用すると上書きの警告が
046.                        // 出なくなります
047.                        // ****************************
048.                        // Excel.DisplayAlerts = false;
049. 
050.                        // ****************************
051.                        // ブック追加
052.                        // ****************************
053.                        Excel.Workbooks.Add();
054. 
055.                        // ****************************
056.                        // 追加したブックを取得
057.                        // ****************************
058.                        Book = Excel.Workbooks( Excel.Workbooks.Count );
059. 
060.                        // ****************************
061.                        // 現状、ブックにはシート一つ
062.                        // という前提で処理していますが
063.                        // 必要であれば、Book.Worksheets.Count
064.                        // で現在のシートの数を取得できます
065.                        // ****************************
066.                        Worksheet = Book.Worksheets( 1 );
067.                        Worksheet.Activate();
068. 
069.                        // ****************************
070.                        // シート名設定
071.                        // ****************************
072.                        Worksheet.Name = "新しい情報";
073. 
074.                        // ****************************
075.                        // 参照
076.                        // 最後の 1 は、使用するフィルター
077.                        // の番号です
078.                        // ****************************
079.                        FilePath = Excel.GetSaveAsFilename( "excel_001","Excel ファイル (*.xlsx), *.xlsx", 1)
080.                        if ( FilePath == false ) {
081.                                // ****************************
082.                                // 保存していないので
083.                                // 保存した事にして閉じます
084.                                // ****************************
085.                                Book.Saved = true;
086.                                Book.Close();
087.                                Excel.Quit();
088.                                Excel = null;
089. 
090.                                alert( "Excel ファイルの保存選択がキャンセルされました" );
091. 
092.                                window.setTimeout("Cleanup();",1);
093.                                return;
094.                        }
095. 
096.                        // ****************************
097.                        // セルへセット
098.                        // ****************************
099.                        // タイトル部分の参照
100.                        $("#tbl th").each(function(idx){
101.                                Worksheet.Cells(1, idx+1) = $(this).text();
102.                        });
103. 
104.                        // 行一覧の参照
105.                        $("#tbl tr").each(function(row){
106.                                $(this).find("td").each(function(idx){
107.                                        Worksheet.Cells(row, idx+1) = $(this).text();
108.                                });
109.                        });
110. 
111.                        // ****************************
112.                        // セルをデータに合わせて
113.                        // 整理して左上を選択
114.                        // ****************************
115.                        Worksheet.Columns("A:C").Select();
116.                        Worksheet.Columns("A:C").EntireColumn.AutoFit();
117.                        Worksheet.Range("A1").Select();
118. 
119.                        // ****************************
120.                        // 保存
121.                        // 拡張子を .xls で保存するには
122.                        // Call ExcelBook.SaveAs( FilePath, 56 ) とします
123.                        // ****************************
124. 
125.                        try {
126.                                Book.SaveAs( FilePath );
127.                        }
128.                        catch (e) {
129.                                console.dir(e);
130.                                alert("Book.SaveAs でエラーが発生しました");
131.                        }
132. 
133.                        // ****************************
134.                        // Excel をアプリケーションとして終了
135.                        // ****************************
136.                        Excel.Quit();
137.                        Excel = null;
138.                        idTmr = window.setTimeout("Cleanup();",1);
139. 
140.                        alert("処理が終了しました \n\n 保存したブックを開きます");
141. 
142.                        WshShell.Run( "RunDLL32.EXE shell32.dll,ShellExec_RunDLL " + FilePath );
143. 
144.                });
145. 
146.        });
147. 
148.function Cleanup() {
149.        CollectGarbage();
150.}
151.</script>
152. 
153.<style>
154.html,body {
155.        /* height: 100%; */
156.}
157. 
158..entry td {
159.        padding: 6px;
160.}
161. 
162./* ****************************
163.テーブル内のデータを選択不可
164.( ダブルクリック対応 )
165.******************************/
166.#tbl {
167.        user-select: none;
168.        -moz-user-select: none;
169.        -webkit-user-select: none;
170.        -ms-user-select: none;
171.}
172. 
173.#tbl th {
174.        cursor: default;
175.}
176. 
177.#tbl td {
178.        cursor: default;
179.        color: black;
180.}
181. 
182.</style>
183. 
184.</head>
185.<body>
186.<div class="main">
187. 
188.<table class="entry ml-3 mt-3">
189.        <tr>
190.                <td>
191.                        <input id="action" type="button" value="Excel.Application の実行" class="form-control btn btn-primary">
192.                </td>
193.        </tr>
194.</table>
195. 
196. 
197.<table class="table ml-3 mt-2" id="data" style='width:400px;'>
198. 
199.        <tbody id="tbl">
200. 
201.                <tr>
202.                        <th>コード</th>        <th>開始日</th>        <th>終了日</th>
203.                </tr>
204. 
205.                <tr>
206.                        <td>FIRST</td><td>2018/04/01</td><td>2018/06/30</td>
207.                </tr><tr>
208.                        <td>SECOND</td><td>2018/07/01</td><td>2018/09/30</td>
209.                </tr><tr>
210.                        <td>THIRD</td><td>2018/10/01</td><td>2018/12/31</td>
211.                </tr><tr>
212.                        <td>FOURTH</td><td>2019/01/01</td><td>2019/03/31</td>
213.                </tr>
214. 
215.        </tbody>
216. 
217.</table>
218. 
219. 
220.</div>
221.</body>
222.</html>

関連する記事

🔻 IE11 の設定と VBScript でのサンプルです
IE11 で Excel のブックにアクセスする / JavaScript を使用して Excel のブックのセルにデータをセットして更新



Google Chrome のアドレス部分に書き込む簡易エディタ



以下をクリックして選択状態にして、Google Chrome のブックマークバーへドラッグすると、ブックマークレットとしていつでも実行できるようになります。( タイトルは編集で変更してください )

▲ このテキストを Google Chrome のアドレスへ書き込むだけで簡易的なテキストエディタになり、ローカルへ SHIFT_JIS で保存する事ができ、既存のテキスト( SHIFT_JIS と Unicode と UTF8:BOMあり )を読み込む事ができます。

▼ もちろん、通常のWEB ページ上で使用する事もできます


以下が【保存用】のテスト用ソースコードです。( 改行コードが CRLF になるように処理しています )
01.<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
02.<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
03.<script src="https://winofsql.jp/js/encoding.js"></script>
04.<script src="https://winofsql.jp/js/save-sjis.js"></script>
05. 
06.<script>
07.$( function(){
08. 
09.        $("#save-action").on("click", function(){
10. 
11.                // テキストエリアのテキストを jQuery で取得            
12.                var text = $("#save-text").val();
13.                // lf のみを crlf に変換
14.                text = text.replace(/\n/g, '\r\n');
15.                // ローカルに保存する
16.                save_sjis( "save-sjis.txt", text );
17.        });
18. 
19.});
20.</script>
21.<div><input type="button" id="save-action" value="Save as Shift_JIS"></div>
22.<textarea id="save-text" style='width:400px;height:100px;'></textarea>

▼ save-sjis.js の内容です
01.var load_save_file_name = null;
02. 
03.var str2array = function(str) {
04. 
05.        var array = [],i,il=str.length;
06.        for(i=0;i<il;i++) array.push(str.charCodeAt(i));
07.        return array;
08. 
09.};
10. 
11.function save_sjis( filename, str ) {
12. 
13.        var array = str2array( str );
14.        var sjis_array = Encoding.convert(array, "SJIS", "UNICODE");
15.        var sjis_data = new Uint8Array(sjis_array);
16. 
17.        if ( load_save_file_name != null ) {
18.                filename = load_save_file_name;
19.        }
20. 
21.        saveAs(
22.                new Blob(
23.                        [sjis_data]
24.                        , {type: "text/plain;charset=shift_jis"}
25.                )
26.                , filename
27.        );
28. 
29.}
30. 
31.function load_sjis( event, target ) {
32. 
33.        var file = event.target.files[0];
34.        load_save_file_name = file.name;
35. 
36.        var reader = new FileReader();
37.        reader.onload = function(event) {
38.                target.value = event.target.result;
39.        };
40. 
41.        reader.readAsText(file,"shift_jis");
42. 
43.}

▼ 読込みのサンプルは以下のようになります
01.<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
02.<script src="https://winofsql.jp/js/save-sjis.js"></script>
03. 
04.<script>
05.$( function(){
06. 
07.        $("#get-text").on("change", function( event ){
08. 
09.                load_sjis( event, $("#save-text").get(0) );
10. 
11.        });
12. 
13.});
14.</script>
15.<div><input type="file" id="get-text"></div>
16.<textarea id="save-text" style='width:400px;height:100px;'></textarea>




nanaco 番号の入力ブックマークレット( 番号なのでアカウントのようには記憶しづらい )

prompt メソッドでダイアログが表示されて入力します。

例えば、nanaco ならば(パスワードでログイン)というサンプルですが、好みによって番号の初期値を設定も可能です。

※ nanaco は番号なのでアカウントのようには記憶しづらいのでサンプルとしています。
1.javascript:var a=prompt('nanaco番号入力','番号初期値を入れる場合はココ');if(a!=''&&a!=null){document.getElementsByClassName('txtBoxLogin')[2].value=a;};void(0);

そのページをデベロッパーツールで input 要素の id または name または class をチェックして入力した値を転送するので、一応たいていの入力すべき値を転送できます。但し、自宅以外で行うのはセキュリティ上よろしく無いので注意して下さい( 番号やアカウント名が他人に漏れてしまいます )

サンプルではワンクッション置いて入力ダイアログを表示していますが、それを省いたほうが早く処理が可能にはなります