変奏現実

パソコンやMMORPGのことなどを思いつくまま・・・記載されている会社名・製品名・システム名などは、各社の商標、または登録商標です。

この画面は、簡易表示です

[javascript]contenteditable

投稿日 2024年2月11日 19:52 by おっとっとっと Comment

contenteditable=”yes”属性付きのdivタグはブラウザ上で直接編集できる。

しかし、子エレメントの構造が複雑化すると改行位置などが把握しにくいので自動的に改行させないほうがいいと云う記事を見つけたので、試しに作ってみた。カスタムエレメント版も。

確かにメンドクサイｗ

コードしなくてもcontenteditable=”yes”設定で、太文字（Ctrl+B）、アンダースコア（Ctrl+B）、イタリック（Ctrl+I）でテキストを自動的に修正してくれるし、勿論HTMLの中身もどんどん変わっていく。

とりあえず、

  1. divタグからpreタグに変更。※半角空白を表示できるから
  2. inputやkeydownイベントのログ表示
  3. キャロット移動の行背景色変更や「m行m列」※範囲指定時も含む
  4. cssで行番号表示
  5. javascriptソースコードの着色※javadoc部は別処理
  6. ctrl+/でそれっぽく行コメントのトグル（ON/OFF）処理
  7. HTMLソースコードの着色も追加。※画面下の言語で切替
  8. 着色した結果をHTMLファイルでダウンロード。
  9. 言語選択状態に応じたサンプルソースを貼れるようにした。
  10. ソースを分割。
  11. バグ修正
    • 2024/2/17
      • 【彩色】押すと空行が消えてる。
        • CRクラスのspanのmarge属性が未設定だった。
      • ソースが空または１トークン分のテキストしかない場合にエラっていた。
        • 気にしてなかった。
      • 右端に縦にスクロールバーが２つ。
        • 何度調整しても不意に再現する。（謎
      • 01234と数字を入力すると先頭の0が数値扱いにならない
        • 空白のパターン（\x20+）のつもりが(x20+)になっていたせい。
          • ミスってるのに空白判定ができていたのは謎

相変わらず強制的にキャッシュされるのでソースを更新してもちゃんと反映されない。

対処方法１：ブラウザのDevToolのネットワークでキャッシュを無効化。

それでもiframe内のファイルはキャッシュされたままなので

対処方法２：そのiframe.htmlのソースの空っぽな画面だったりコンソールにエラーが表示されていたら・・・【F5】でソースを表示。

大体これで最新になる。

未解決や重複のエラーが出ていたら上の方法でキャッシュをクリアできる。（ハズ

それでもダメな時はブラウザの履歴をごっそり消すしかない様です。

それにしても、予想外の動きをするので大変だわ。（笑

ps.2024/3/21

カスタムエレメント版のHTMLのサンプルが文字化けしていたので修正。



[javascript]サンプルを実行

投稿日 2024年2月9日 19:07 by おっとっとっと Comment

ｊｓファイルにコードを書かないと簡単なサンプルも実行できない。

勿論、そんなものはオンラインにあるけど、そういうところにソースをパリッと貼り付けるのはご法度なケースも多いので・・・

パパッとjavascriptのサンプルをローカルなHTMLで実行するサンプルを作ってみた。

但し、new Functionからはグローバルな変数が見えてしまう。

それだけなら特に危なくないけど

某MS操縦士のセリフ：俺を踏み台にしたぁ～～～

なんてコードを書かれても不思議ではない碌でもない世の中なので、

ソースだけ公開。

<DOCTYPE html>
  <html lang="ja">

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>javascriptを実行させるサンプル</title>
    <link href="jstest.css" media="all" rel="stylesheet" type="text/css" />
    <script src="createelement.js"></script>
    <script src="download.js"></script>
    <script src="jstest.js"></script>
    <link href="loader.css" media="all" rel="stylesheet" type="text/css" />
    <script src="loader.js"></script>
  </head>

  <body>
    <!-- loader begin -->
    <div id="js-loader" class="loader">
      <p>＊＊＊</p>
      <p id="js-loader-text"></p>
      <p>＊＊＊</p>
    </div>
    <!-- loader end -->
    <textarea class="jsText" id="jsText1" scrolling="auto">
// sample code
return new Promise((resolve, reject) => {
  let result = new Array(10);
  for (let index = 0; index < 10; index++) {
    result[index]=index + 1;
  }
  console.log(result); console.log(10);
  console.log('aaaaaaaaaaaaaa');
  console.log({log: 'data=> result=data' });
  resolve();
});
</textarea><br />
    <button type="button" id="executeJsText">実行</button><br />
    <div class="status" id="status"></div><br />
    <textarea class="jsResult" id="jsResult1" scrolling="auto"></textarea><br />
    <button type="button" id="downloadJsText">javaScriptダウンロード</button><br />
    <button type="button" id="downloadResult">結果ダウンロード</button><br />
  </body>

  </html>
@charset "UTF-8";

textarea.jsText {
    width: 95%;
    /* 親要素の幅と合わせる */
    height: 200px;
    resize: both;
    border: 2mm ridge rgba(211, 220, 50, .6);
}

textarea.jsResult {
    width: 95%;
    /* 親要素の幅と合わせる */
    height: 100px;
    resize: both;
    border: 2mm ridge rgba(211, 220, 50, .6);
}
let CRLF = '\r\n';
window.addEventListener('load', () => init());
/**
 * 初期化処理
 */
const init = () => {
    // ボタンクリックイベントの登録
    document.querySelector('#downloadJsText').addEventListener('click', () => downloadText('jsText1'));
    document.querySelector('#downloadResult').addEventListener('click', () => downloadText('jsResult1'));
    document.querySelector('#executeJsText').addEventListener('click', () => dexecuteJsText('jsText1', 'jsResult1'));
    loaderClose();
};
/**
 * サンプルをエンコーディングしたファイルをダウンロードする
 */
const downloadText = async (target) => {
    try {
        loaderOpen();
        try {
            let dateBegin = Date.now();
            displayStatus(`${target}ダウンロード処理中`);
            let jsText = document.querySelector(`#${target}`).value;
            download(jsText, `${target}.js`, "text/plan");
            displayStatus(`${target}ダウンロード完了。処理時間：${dateDateBetween(dateBegin, Date.now())}`);
        } catch (ex) {
            alert(`${target}ダウンロード異常終了${CRLF}${ex}`);
        }
        loaderClose();
    } catch (ex) {
        alert(ex);
    }
};
/**
 * 実行する
 * @param {*} jsText 
 * @param {*} jsResult 
 */
const dexecuteJsText = (jsText, jsResult) => {
    let jsTextElmText = document.querySelector(`#${jsText}`).value;
    let jsResultElm = document.querySelector(`#${jsResult} `);
    let dateBegin = Date.now();
    try {
        loaderOpen();
        try {
            displayStatus(`${jsText} 実行処理中`);
            let func = new Function('console', jsTextElmText);
            let result = [];
            let radix = 10;
            let rc = func({
                log: (data) => {
                    if (data === undefined) {
                        data = 'undefined';
                    }
                    if (data === null) {
                        data = 'null';
                    }
                    switch (typeof data) {
                        case 'object':
                            data = JSON.stringify(data);
                            break;
                        case 'string':
                            break;
                        default:
                            data = data.toString(radix);
                            break;
                    }
                    result.push(data);
                }
            });
            new Promise((resolve, reject) => {
                if (rc instanceof Promise) {
                    displayStatus(`${jsText} 実行中 Promise.then待ち`);
                    rc.then(() => {
                        resolve(result);
                    });
                } else {
                    resolve(result);
                }
            }).then((result) => {
                jsResultElm.innerHTML = result.join(CRLF);
                displayStatus(`${jsText} 実行完了。処理時間：${dateDateBetween(dateBegin, Date.now())} `);
            });
        } catch (ex) {
            displayStatus(`${jsText} 実行異常終了。処理時間：${dateDateBetween(dateBegin, Date.now())}${CRLF}${ex} `);
        }
        loaderClose();
    } catch (ex) {
        alert(ex);
    }
};
/**
 * ステータスを表示する
 * @param {string} text 
 */
const displayStatus = (text) => {
    let divStatus = document.querySelector('#status');
    divStatus.innerHTML = text;
    let divLoading = document.querySelector('#js-loader-text');
    divLoading.innerHTML = text;
};
/**
 * 時刻差のテキストを作成する
 * @param {Date} dateBegin 
 * @param {Date} dateEnd 
 * @returns 
 */
const dateDateBetween = (dateBegin, dateEnd) => {
    return `${(dateEnd - dateBegin) / 1000} 秒`
};

createelement.js
download.js
loader.css
loader.js

は先の記事

デスクトップに貼ったJSからSJISのCSVをダウンロードさせてみる【その後】のサンプル

と同じなので割愛。

ミソはｊｓソース中に

console.log(result);

と書かれたらどうやって取り出すか？

である。

今回は

let result = "";
let func = new Function( 'console', jsテキスト);☚jsテキストの処理に対してパラメータ'console'を宣言
func({log: (data) => ☚{...}内がconsoleオブジェクトとして扱われ、result変数にセットされる。

これでjsテキストの中でconsole.logメソッドがそれっぽく動き出す。

jsコードがwindowやdocumentを直接参照するのが嫌なら

let func = new Function( 'console', 'window', 'document', ..., jsテキスト);
func(
{log: (data) => result.push(data);},
{console: (data) => xxxx;},
{body: (data) => xxxx;},
);

とパラメータを追加し、見せたい情報を渡してサンドバック風にできるだろう。



「JavaScript」連番の配列を作ってみる

投稿日 2024年2月9日 04:09 by おっとっとっと Comment

どうでもいいけど、C言語っぽく

let result = new Array(10);
for (let index = 0; index < 10; index++) {
　result[index]= index + 1;
}
console.log(result);
// (10) [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

では色々注意が必要。

から始まって・・・

let result = []
for (let index = 0; index < 10; index++) {
　result.push(index + 1);
}
console.log(result);
// (10) [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

この時点でまだindexをいっぱい書いてあるから

index + 1じゃなくて let index=1すれば良い！

とか余計な修正をしだすと

index < 10の部分を見落としてそう。

つまり、indexの出現は少ない方が良い。

しかし、

var result = [...Array(10)].map((_, i) => i+1) 
console.log(result);
// (10) [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

では作業用配列をいくつも作ってしまう。

Array(10)とか[…xxx]とかね。

とは云え

var result = Array.from({length: 10},(_, index) => index + 1);
console.log(result);
// (10) [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

に至っては {length:10 } でObjectの振りというか {…}は紛れもなくObjectだけど、

length: 10とよくあるプロパティでArray.fromを騙すのはいいとして

indexが唐突に出てくる感じがするけど・・・

Array.from(arrayLike, mapFn)

Array.fromはこんなパラメータになっているので

Array.prototype.map((value, index) => { ... });

を思い浮かべば、理解してもらえそう。

それに無駄な作業用配列も作らないから

１から１万までの連番配列を作るには丁度良い。

気がする。

そこで

Array.from(arrayLike, mapFn, thisArg)

まで使ってみると

var result = Array.from({ length: 10 }, function (_, index) { return index + this.start; }, { start: 1 });
console.log(result);
// (10) [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

明示的に連番の初期値を設定できて気持ちはすっきりするけど、

アロー関数にとってthisはwindowしかありえないので

無名functionにしないといけないし

スクロールバーが出るくらい長いので蛇足感がある。

だが、連番＋αのテストデータを作るのには向いている気がするので次点とした。

結果は・・・

var result = Array.from({length: 10},(_, index) => index + 1);

が良さげ。

/**
 *  連番作成
 * @param {integer} start           開始番号
 * @param {integer} end             終了番号
 * @return {Array of object}        開始番号～終了番号の配列
 */
const range = (start, end) => {
    let rc = Array.from({ length: (end - start + 1) }, (_, index) => index + start);
    if (callbackMap) {
        rc = rc.map(callbackMap);
    }
    return rc;
};

range().map(callback) をラップしてrangeMapを作ってみたが、使い心地は・・・

range(1, rows).map((nRow) => {
    createTrElement(objTable, nRow, ...);
});

rangeMap(1, rows,(nRow) => {
    createTrElement(objTable, nRow, ...);
});

見分けが付かないくらい同じだった。（笑

ps.

クエスチョン：spreadSheetのコードで上のrangeを使ってみると妙に重い（初期表示２秒前後）。何でだろう？

アンサー：今のEXCELって最大1048576行16384列なのでこの最大値に合わてみたら、初期表示で物凄い量の配列を作っていた！普通のfor文に戻すとサクっと初期表示。配列のままでも動かない訳では無いけど、時々Chromeやタスクバーがマウスに反応しなかった原因のような気がする。

１００万×１.6万≒１６０億　だからなぁ～

でもfor文のままなのも、配列じゃなくても連番指定でsomeとmapっぽく動作すればいいから

/**
 *  連番配列っぽいイテレータを作成する
 * @param {integer} start           開始番号
 * @param {integer} end             終了番号
 * @returns {iterator}              開始番号から終了番号を格納した配列っぽいイテレータ
 */
const range = (start, end) => {
    let step = 1

    const rangeIterator = {
        some: function (func) {//someっぽく動作させる
            for (let cnt = start; cnt <= end; cnt += step) {
                if (func(cnt)) {
                    return true;
                }
            }
            return false;
        },
        map: function (func) {//mapっぽく動作させる
            const f = false;//配列を返さない
            let aRc;
            if (f) {
                aRc = new Array(end - start + 1);
            }
            let index = 0;
            for (let cnt = start; cnt <= end; cnt += step) {
                const rc = func(cnt);
                if (aRc) aRc[index++] = rc;
            }
            return aRc;
        },
    };
    return rangeIterator;
}


「javascript」postMessageとPromise

投稿日 2024年2月9日 00:00 by おっとっとっと Comment

デスクトップに貼ったJSからSJISのCSVをダウンロードさせてみる【その後】の中で、
iframeへ送信したメッセージの応答をawaitで待機するようにしていますが、postMessageは本当にメッセージをポストするダケの機能なのでレス待ちなんで事ができません。

        displayStatus(`サンプルを${encoding}に変換中`);
        let unicode16CSV = await getSampleTextInnerText();

タネを明かすと、これを実現するために外部変数messageResponseStackにPromiseのresolveを保持し、どこかで応答メッセージを受信したらresolveを呼び出してawaitの待機状態を解除してもらっています。

つまり職場（プロセス）に居れば誰でも見れるホワイトボード（外部変数）に取引先(requestID)と連絡先（resolve）を書いてあるので、暇になった人が気が付けばかかってきた電話の相手先(requestID)の要件(event.data.message)を連絡してもらえる（ハズ

な仕組みです。

ついでにrequestIDはワンタイムなIDなのでホワイトボードから消してます。

/**
 * iframeのサンプルを取得する
 * @returns 
 */
const getSampleTextInnerText = () => {
    return new Promise((resolve, reject) => {
        loaderOpen();
        var us = getUniqueStr();
        messageResponseStack[us] = { 'resolve': resolve, 'reject': reject };
        myPostMessage('iframe', "getSampleText", "", us);
    });
};
    messageProcSetup({ ☚ここでmessageListner の応答メッセージタイプ毎のコールバック先をリストアップ
　　　　　　・・・
        'getEncodingListResponse': messageResponseProc,
　　　　　　・・・
    });
/**
 * メッセージのレスポンス処理　☚ messageListnerからコールバックされる。
 */
const messageResponseStack = {};
const messageResponseProc = (data) => {
    loaderClose();
    if (data.requestId !== undefined) {
        messageResponseStack[data.requestId].resolve(JSON.parse(data.message));
        delete messageResponseStack[data.requestId];
    } else {
        alert(`not requestId${CRLF}data.type: ${data.type}`);
    }
};
/**
 * メッセージを受信する
 * @param {MessageEvent} event 
 */
const messageListner = (event) => {
    if (event.origin !== myOriginListener || event.type !== 'message') return;
    let data = event.data;
    let messageInfo = messageInfoList[data.type];
    if (messageInfo === undefined) {
        alert(`unkonwn message type = '${data.type}'${CRLF}message: ${data.message}`);
        return;
    }
    if (messageInfo !== undefined && messageInfo !== null) {
        if (Array.isArray(messageInfo)) {
            if (messageInfo.length > 1) {
                messageInfo[0](data, ...(messageInfo.slice(1)));
            } else {
                messageInfo[0](data);
            }
        } else {
            messageInfo(data);
        }
    }
};
/**
 * メッセージを送信する
 * @param {string} textType 
 * @param {string} textMessage 
 * @param {string} textRequestId
 */
const myPostMessage = (to, textType, textMessage, textRequestId) => {
    switch (to) {
        case 'parent':  //  親ドキュメントに送信する
            to = window.parent;
            break;
        case 'iframe': //   iframeへメッセージを送信する
            to = document.querySelector("iframe").contentWindow;
            break;
    }
    to.postMessage({
        type: textType,
        message: textMessage,
        requestId: textRequestId,
    }, myOriginSender);
};

もっといい方法があったらいいなぁ。



デスクトップに貼ったJSからSJISのCSVをダウンロードさせてみる【その後】

投稿日 2024年2月4日 17:20 by おっとっとっと Comment

あれから６年？（大笑

結局何が原因でうまくいかなかったのかと云えば

FileReader.readAsText(${Blob型データ},”SJIS”);に

未定義あるいはUTF16に変換できない文字を与えるとの大雑把には

  • シフトJISの下位コードのMSBが０の場合は、「0xfffd」「下位コード」の２バイトに変換。
  • シフトJISの下位コードのMSBが１の場合は、「0xfffd」の１バイトに変換。

している様に見えるが・・・

Blobに１文字づつ入れFileReaderで読むと

  • シフトJISの下位コードのMSBに関わらず、「0xfffd」の１バイトに変換。

してしまうので

Blobに複数の文字を入れると、

挙動が不安定になるらしい。

なので、

１文字づつシフトJISをUTF16に変換してシフトJIS変換表を作成するしかない様だ。

実際に動かしてみると、

１秒もかからず変換表を作ってしまうので

これでいいんじゃないかな？

まだ、黑(fc4f)付近で変換に失敗している？？？

あ、文字領域が拡張されていたｗ（６年の重みかな？

f040～fc7e、f080～fcfcを変換表に追加。

ついでに外部変数を止めPromiseでガガガと作らせようとしたら・・・

Promiseを１００個以上作るとPromise.Allでうまく処理できない　※返事が返ってこない。

ので、awaitで順次処理に変えてみる。※asyncも付けまくる。

さらにダウンロードの直前に変換表を作り直してみると

３秒くらいかかってしまった。

変換表をjsファイルでダウンロードできるようにした方がいいかな？

サンプルをSJIS変換を使って作成してみた。

やはり処理時間が長めだな。

あれ？未定義な文字しかない行が結構ある！

カット！

ちゃんと処理時間を表示してみると長めだなぁ。

サンプルをiframe化しUTF16未対応文字は□に変えてみた。

さらに、EUCとかも対応できそうなのでやってみた。

※サンプル

まだ、EUC-jpやiso-2022-jpでコードページを変更するコード（エスケープシーケンス等）が必要な文字は変換時に化けてしまう。

どんどん遅くなっていく。（キニシナイ

外部変数アクセスするのを減らそうとawaitしてみるとasync宣言付けたアロー関数だらけ。

Promise と resolve と　await を良い塩梅で混ぜないといけないのも大変。

一番困ったのはVisualStudio Codeでデバッグしてみると

頻繁にPromise.allが暴走するが

それは非同期処理中はエラっても「デバッグコンソール」は裏に隠れたままなので、

SyntaxErrorがあっても気が付かないせい。

暫くしても処理が終わらないなぁ？と思い、

「問題」「出力」「デバッグコンソール」「ターミナル」タグをひっくり返してみると。

ｘｘｘ変数は未定義です。

とか

ｘｘｘにmapプロパティは存在しません。

が見つかる。

でもデバッグを再開してもコンソールは初期化されないので、　2024/3/21現在はクリアされてる。

エラったらコンソールをクリアしてからデバッグしなおさないと泥沼。

postMessageでiframeとやり取りしているので、サンプルに入力した内容等がブラウザの他のタブにもpostされている可能性があります。

またサロゲートペア（𩸽：U+D867とU+DE3D、𠮷：U+D842とU+DFB7とか）にも対応していません。

※サロゲートペアは入力したいサロゲートペア文字の16進コードが判れば、IMEパッドの文字カデゴリの上位サロゲートD８67の枠をクリックすると�っぽく表示されますが下位サロゲートからDE3Dの枠をクリックすると𩸽に変わります。

と云うのも、サロゲートペアはUTF16独自のものでSJIS文字に対応する文字の定義が無いっぽいです。SJIS変換表はSJISの文字領域に対して作成していますが行頭の””で囲まれた文字に上記のサロゲートペアが無いのです。または「部」から１１画の魚辺の終わりの方にある𩸽を探し出すかですね。

JIS第4水準の第93区に𩸽が、AJ1ベース文字-JIS外に𠮷があるっぽいですが、ISO-2022-JPのザックリとしたエスケープシーケンスでは得られないっぽいです。

  • ASCII: 1b 28 42
  • JIS X 0208: 1b 24 42

一応、ISO-2022-JP-2004も追加してみたけどブラウザ未対応のencoding名らしく組み込んだエスケープ文字がそのまま出力され全角どころか半角すらちゃんと出なくなってしまう。

encodingx.jsのconst encodingInfoList をイジるとブラウザが対応している色々なencodingを試せます。

JISの様に文字の前にエスケープシーケンスが必要なものは配列の５～６番目に配列で記入できます。

  • ５番目は文字を全角等に切替るシーケンス
  • ６番目は半角に戻すシーケンス。

ここに新たなencodingを追加すればHTMLのselectの項目も自動的に増えます。

※まともに動作するかどうかは不明だけど

/**
 * エンコーディング情報
 *  {
 *      "encoding": {
 *          8:  [
 *                  [上位開始バイト,上位終了バイト,下位開始バイト,下位終了バイト,[接頭語...],[接尾語...]]
 *              ... 
 *          ],
 *          16: [
 *                  [上位開始バイト,上位終了バイト,下位開始バイト,下位終了バイト,[接頭語...],[接尾語...]]
 *              ...
 *          ],
 *      },
 *  ...
 *  }
 */
const encodingInfoList = {
    "windows-1252": {
        //  8ビット
        8: [
            [0x0000, 0x0000, 0x0000, 0x00ff],
        ],
    },
    "shift-jis": {
        //  8ビット
        8: [
            [0x0000, 0x0000, 0x0000, 0x00ff],
        ],
        //  16ビット
        16: [
            //  第1面
            [0x0081, 0x009f, 0x0040, 0x007e],
            [0x0081, 0x009f, 0x0080, 0x00fc],
            [0x00e0, 0x00ef, 0x0040, 0x007e],
            [0x00e0, 0x00ef, 0x0080, 0x00fc],
            //  第2面
            [0x00f0, 0x00fc, 0x0040, 0x007e],
            [0x00f0, 0x00fc, 0x0080, 0x00fc],
        ],
    },
    "iso-2022-jp": {
        8: [
            //  8ビット
            [0x0000, 0x0000, 0x0000, 0x00ff, [0x1B, 0x28, 0x42], []],
        ],
        16: [
            // JIS X 0208コード表   １面
            //
            // 記号、英数字、かな(01区～08区)
            [0x0021, 0x0028, 0x0020, 0x007f, [0x1B, 0x24, 0x42], [0x1B, 0x28, 0x42]],
            // 第1水準漢字(16区～47区)
            [0x0030, 0x004f, 0x0020, 0x007f, [0x1B, 0x24, 0x42], [0x1B, 0x28, 0x42]],
            // 第2水準漢字(48区～84区)
            [0x0050, 0x0073, 0x0020, 0x007f, [0x1B, 0x24, 0x42], [0x1B, 0x28, 0x42]],
            [0x0074, 0x0074, 0x0020, 0x002f, [0x1B, 0x24, 0x42], [0x1B, 0x28, 0x42]],
        ],
    },
    "iso-2022-jp-2004": {
        8: [
            //  ASCII
            [0x0000, 0x0000, 0x0000, 0x00ff, [0x1B, 0x28, 0x42], []],
        ],
        16: [
            // JIS X 0213漢字集合１面:コード表
            // 1面（JIS X 0208および第3水準漢字）(01区～94区)
            [0x0021, 0x007e, 0x0020, 0x007f, [0x1B, 0x24, 0x28, 0x51], [0x1B, 0x28, 0x42]],

            // JIS X 0213漢字集合２面:コード表
            // 2面（第4水準漢字）(01区～08区)
            [0x0021, 0x007e, 0x0020, 0x007f, [0x1B, 0x24, 0x28, 0x50], [0x1B, 0x28, 0x42]],
        ],
    },
    "euc-jp": {
        //  8ビット
        8: [
            [0x0000, 0x0000, 0x0000, 0x007f],
            [0x0000, 0x0000, 0x00a0, 0x00df, [0x8e], []],
        ],
        // JIS X 0208コード表   １面
        //
        // 記号、英数字、かな(01区～08区)
        16: [
            [1 + 0x0a0, 8 + 0x0a0, 0 + 0x0a0, 95 + 0x0a0],
            // 第1水準漢字(16区～47区)
            [16 + 0x0a0, 47 + 0x0a0, 0 + 0x0a0, 95 + 0x0a0],
            // 第2水準漢字(48区～84区)
            [48 + 0x0a0, 83 + 0x0a0, 0 + 0x0a0, 95 + 0x0a0],
            [84 + 0x0a0, 84 + 0x0a0, 0 + 0x0a0, 15 + 0x0a0],
        ],
    },
};

ここまでくるとブラウザのJavaScriptのreadAsTextのencodingのチェッカーっぽくなってきた。（笑

今更UTF-8以外のテキストデータをブラウザで使う意味は遠の昔に消えているので、

ExcelがUTF-8のCSVをちゃんと読める様になったら、もう存在意義が無いに等しい。（大笑

なので、あて名書き５をアップ。おっと2014年？2024年に修正っと（笑

なんてこった１０年も経ってたのか！

ps.2024/2/13

readAsTextで１文字づつ処理するのはやはり遅い。文字間にNULエリアを挿入してみたら文字同士の影響が無い様なので、エスケープシーケンスも考慮して１６バイト毎に文字を配置することで、データの下位バイトの範囲単位で（サンプルの場合は１行単位）で処理するように修正したら、１秒以内に処理を終える様にしたのでchromeで見ているなら【２４時間以内の履歴を削除】するとサンプルの変換処理が妙に速くなる。（ハズ

全データの範囲を一度に処理すればもっと速くなるハズ。



[javascript]videoタグ

投稿日 2024年2月3日 08:32 by おっとっとっと Comment

※大抵のページに動画のファイルをドラッグするとドラッグ処理が無効になっているから別タブで動画が再生される。

videoタグのサンプルを作成した。

何かの動画のファイルをページにドロップすると再生する。

しかし、サーバーに配置しているので、

ローカルの動画ファイルパスを指定してもアクセス不可なので

ファイルパスの指定を諦めてファイルからBlobデータを作ってsrcに設定すれば再生できた。

レイアウト構成をJSON形式で、Import Export できるようにしたのに・・・

[
  {
    "fileName": [
      "file:///${drive-1}:/${path-1}/${file-1}.${ext-1}",
      ...
      "file:///${drive-n}:/${path-n}/${file-n}.${ext-n}"
    ],
    "height": ${height},
    "width": ${width}
  },
  ...
]

複数の動画ファイルをドラッグすると、ページを大きくはみ出て再生しだすので、

【分割】ボタンで適当にページに収まりそうな感じにvideoタグをリサイズしてみた。

Excelのウインドウの整列っぽくするのは難しそう。



[javascript]createElementとかaddEventListenerはダルい

投稿日 2024年1月25日 03:11 by おっとっとっと Comment

createElementはダルい。

そもそも、innerHTMLを使えば済む。

createElementはタグ名が付いてるダケの空っぽなHTMLエレメントを作るだけなので

var button = createElement('button');
button.className = 'fileButton fileDrag';
button.id = 'fileButton' + buttonId;
button.type = 'button';
button.innerHTML = caption;
parentObj.appendChild(button);

と・・・ダラダラと書かないといけないから

      var fileButton  = createElement('button', {
        className:  ['fileButton','fileDrag'],
        id:         'fileButton' + buttonId,
        type:       'button',
        innerHTML:  caption,
        parent:     parentObj
      });

の様に連想配列でエレメントの属性を一式で指定できればいいのに・・・

と思ったので書いてみた。

    //  HTMLエレメントを作成します
    const createElement = (tagName, options) => {
      var eventList = ['ended'];
      var elm  = document.createElement(tagName);
      Object.keys(options).forEach( (key) => {
        // eventの場合
        if( eventList.includes(key) ) {
          elm.addEventListener(key,options[key]);
        } else {
          // event以外の場合
          switch(key) {
            case 'className': // プロパティはclassNameですが、タグの属性はclassなので別途に処理します。
              if(Array.isArray(options[key])) {
                elm.classList.add(...options[key]); // 配列を展開しパラメータとして引き渡す
              } else {
                elm.classList.add(options[key]);
              }
              break;
            case 'innerHTML': // setAttributeではタグ内にinnerhtml="***"と属性を生成するので別途に処理します。
              elm.innerHTML = options[key];
              break;
            case 'parent':    // setAttributeではタグ内にparent="***"と属性を生成する様で、画面に生成したエレメントを割り付けないので別途に処理します。
              options[key].appendChild(elm);
              break;
            default:
              elm.setAttribute(key, options[key]);
              break;
          }
        }
      });
      return elm;
    };

イベントに対応するeventListの中身が少ないのは、creapteElementの後で毎回addEventListenerするのも面倒なので、スクリプトの最初でクラス指定でイベント登録を済ませたかったから・・・

とは云え、クラス数×イベント数がいっぱいあったら、その分のdocument.addEventListenerは呼び出したくないので、

    const onLoadWindow = () => {
      //  コントロールのイベント処理を登録します
      const classEvents = [
        /* onload */
        { className:  'fileButton',         events:   { 'click':  onClickFileButton}},
      ...
      ];
      registEventListener(classEvents);
    };
    //  documenイベント処理
    var documentEvents = {};
    const documentEventListener = (event) => {
      // 処理
      var target = event.target || event.srcElement;
      Array.from(target.classList).map((className) => documentEvents[event.type][className])
        .filter((func) => func !== undefined)
        .forEach((func) => func(event));
    };
    //  指定クラスを持つＨＴＭＬエレメントにイベントを登録します
    const registEventListener = (classEvents) => {
      // classEvents配列数分ループ
      classEvents.forEach((classEvent) => {
        // イベント数分ループ
        Object.keys(classEvent.events).forEach((eventName) => {
          // クラスのイベントごとの処理
          if( documentEvents[eventName] === undefined ) {
            // documentEvents[eventName][classEvent.className]に代入できるように初期化
            documentEvents[eventName] = {};
            document.addEventListener(eventName, documentEventListener);
          }
          // ※同じクラス・同じイベントに対応する処理は１つだけ
          documentEvents[eventName][classEvent.className] = classEvent.events[eventName];
        });
      });
    };
    //  画面初期表示時の処理
    window.onload = onLoadWindow;

イベントごとに１回document.addEventListenerを呼び出し、イベント発生時に呼出された時にイベントターゲットのクラス名からイベントで処理したい関数をリストアップして呼び出す様にしてみた。

const classEvents =[
  {
    className:  'fileButton',
    events:   {
      'click':  onClickFileButton}
    },
  },
  ...
]

この書き方は思いついたイベントを書き殴るには都合がいいけど、documentEventsでは扱いにくいので

var documentEvents = [
  {
    'click': [
      {
        'fileButton': onClickFileButton,
        ...
      }
    ],
  ...
  }
]

に置き換え、documentEvents[‘click’][‘fileButton’]からonClickFileButtonが容易に取得できるようにしている。

で・・・全部済ませたかったが、

videoタグのendedイベントはdocument.addEventListenerで拾えなかったので

自作のcreateElementで作成したHTMLエレメントにaddEventListenerでendedイベントを登録できるようにした。（ワケ

気分的には楽になるけど、

なぜかソースは長くなる。（大笑い



[javascript]matchとか

投稿日 2024年1月25日 02:59 by おっとっとっと Comment

HTMLで同じようなタグが多いとのidに１とか２とか数値を付けるけど、

この数値の部分だけ欲しい時がある。

parseInt(id.match(/\d+$/))

とするとidの末尾の方の数字を数値で得られる。

matchは配列を返すので [0] を付けてparseIntに渡した方がいいけど、parseIntは引数を文字列に変換する際に配列なら先頭のみを対象とするみたいでこのままでも支障は無い。

ファイルの拡張子ダケ欲しい時

fileName.match(/([.])(.*$)/)[2]

[1]の様に思えるけど

matchはキャプチャグループを使うと

[0]:全体

[1]:１つ目のキャプチャグループ

[2]:2つ目のキャプチャグループ

の様に返すので ピリオドの後の拡張子部分ダケ欲しい場合は[2]になる。



[AlmaLinux]DNF update失敗

投稿日 2024年1月25日 02:09 by おっとっとっと Comment

AlmaLinux 8.9 (Midnight Oncilla)はcockpitでアップデートに失敗したけど

dnfコマンドで無事アップデートできたが

AlmaLinux 8.8 (Sapphire Caracal)はダメだった。

# dnf update
メタデータの期限切れの最終確認: 2:35:57 前の 2024年01月24日 23時23分56秒 に実施しました。
エラー:
 問題: libgs-9.27-11.el8.x86_64 と libgs-9.27-6.el8.x86_64 どちらもインストールできません
  - パッケージ libgs-devel-9.27-6.el8.x86_64 には libgs(x86-64) = 9.27-6.el8 が必要ですが、どのプロバイダーからもインストールできません
  - パッケージの最良アップデート候補をインストールできません libgs-9.27-6.el8.x86_64
  - インストール済パッケージの問題 libgs-devel-9.27-6.el8.x86_64
(競合するパッケージを置き換えるには、コマンドラインに '--allowerasing' を追加してみてください または、'--skip-broken' を追加して、インストール不可のパッケージをスキップしてください または、'--nobest' を追加して、最適候補のパッケージのみを使用しないでください)

パッケージの依存関係が解消できなかった様だ。

あーメンドクサイ。

とりあえず、指示通りに

–allowerasingをコマンドに付ける事により依存関係で競合してるパッケージを削除を削除してみる。

$ dnf -y update --allowerasing
（・・・中略・・・）
依存関係のインストール:
 perl-Digest                                      noarch      1.17-395.el8                                                     baseos          27 k
 perl-Digest-MD5                                  x86_64      2.55-396.el8                                                     baseos          37 k
 perl-IO-Socket-SSL                               noarch      2.066-4.module_el8.6.0+2811+fe6c84b0                             appstream      297 k
 perl-Net-SSLeay                                  x86_64      1.88-2.module_el8.6.0+2811+fe6c84b0                              appstream      378 k
 perl-URI                                         noarch      1.73-3.el8                                                       baseos         116 k
 perl-libnet                                      noarch      3.11-3.el8                                                       baseos         121 k
削除中:
 kernel                                           x86_64      4.18.0-477.21.1.el8_8                                            @baseos          0
 kernel-core                                      x86_64      4.18.0-477.21.1.el8_8                                            @baseos         70 M
 kernel-modules                                   x86_64      4.18.0-477.21.1.el8_8                                            @baseos         25 M
 kernel-modules-extra                             x86_64      4.18.0-477.21.1.el8_8                                            @baseos        677 k
依存関係パッケージの削除:
 libgs-devel                                      x86_64      9.27-6.el8                                                       @System         39 k

トランザクションの概要
====================================================================================================================================================
インストール     10 パッケージ
アップグレード  499 パッケージ
削除              5 パッケージ

ダウンロードサイズの合計: 1.0 G
パッケージのダウンロード
(1/509): kernel-4.18.0-513.11.1.el8_9.x86_64.rpm                                                                    6.3 MB/s |  10 MB     00:01
（・・・中略・・・）
(509/509): webkit2gtk3-2.40.5-1.el8_9.1.alma.1.x86_64.rpm                                                           5.5 MB/s |  24 MB     00:04
----------------------------------------------------------------------------------------------------------------------------------------------------
合計                                                                                                                 15 MB/s | 1.0 GB     01:11
AlmaLinux 8 - BaseOS                                                                                                4.9 MB/s | 5.0 kB     00:00
GPG 鍵 0xC21AD6EA をインポート中:
 Userid     : "AlmaLinux <packager@almalinux.org>"
 Fingerprint: E53C F5EF 91CE B0AD 1812 ECB8 51D6 647E C21A D6EA
 From       : /etc/pki/rpm-gpg/RPM-GPG-KEY-AlmaLinux
鍵のインポートに成功しました
GPG 鍵 0xCED7258B をインポート中:
 Userid     : "AlmaLinux OS 8 <packager@almalinux.org>"
 Fingerprint: BC5E DDCA DF50 2C07 7F15 8288 2AE8 1E8A CED7 258B
 From       : /etc/pki/rpm-gpg/RPM-GPG-KEY-AlmaLinux
鍵のインポートに成功しました
トランザクションの確認を実行中
トランザクションの確認に成功しました。
トランザクションのテストを実行中
トランザクションのテストに成功しました。
トランザクションを実行中
  scriptletの実行中: kmod-kvdo-6.2.8.7-92.el8.x86_64                                                                                            1/1
  scriptletの実行中: java-1.8.0-openjdk-headless-1:1.8.0.402.b06-2.el8.x86_64                                                                   1/1
  準備             :                                                                                                                            1/1
  scriptletの実行中: libgcc-8.5.0-20.el8.alma.x86_64                                                                                            1/1
  アップグレード中 : libgcc-8.5.0-20.el8.alma.x86_64                                                                                         1/1013
（・・・中略・・・）
  アップグレード中 : pam-1.3.1-27.el8.x86_64                                                                                                24/1013
警告: /etc/pam.d/smartcard-auth は /etc/pam.d/smartcard-auth.rpmnew として作成されました。
（・・・中略・・・）
  scriptletの実行中: python36-3.6.8-38.module_el8.9.0+3700+efebe9fd.x86_64                                                                 182/1013
シンボリックリンク /usr/bin/pip3 -> /etc/alternatives/pip3 の作成に失敗しました。 /usr/bin/pip3 がすでに存在しており、シンボリックリンクファイルではありません。
（・・・中略・・・）
  scriptletの実行中: python3-wheel-1:0.31.1-3.module_el8.9.0+3700+efebe9fd.noarch                                                          429/1013
シンボリックリンク /usr/bin/pip3 -> /etc/alternatives/pip3 の作成に失敗しました。 /usr/bin/pip3 がすでに存在しており、シンボリックリンクファイルではありません。
（・・・中略・・・）
  整理             : libwbclient-4.17.5-3.el8_8.alma.x86_64                                                                                804/1013
警告: ファイル /usr/lib64/samba/wbclient/libwbclient.so.0.15: 削除に失敗しました: No such file or directory
警告: ファイル /usr/lib64/samba/wbclient/libwbclient.so.0: 削除に失敗しました: No such file or directory

と、沢山のパッケージがアップデート！

php3系でパイプの処理がちょっと怪しい。

libwbclient系で何か削除に失敗してる。

大丈夫かな・・・

  整理             : libgcc-8.5.0-18.el8.alma.x86_64                                                                                      1013/1013
  scriptletの実行中: libgcc-8.5.0-18.el8.alma.x86_64                                                                                      1013/1013
  scriptletの実行中: glibc-all-langpacks-2.28-236.el8.7.x86_64                                                                            1013/1013
  scriptletの実行中: ipa-selinux-4.9.12-9.module_el8.9.0+3688+465b6369.alma.1.noarch                                                      1013/1013
  scriptletの実行中: crypto-policies-scripts-20230731-1.git3177e06.el8.noarch                                                             1013/1013
  scriptletの実行中: nss-3.90.0-4.el8_9.x86_64                                                                                            1013/1013
  scriptletの実行中: gnome-session-3.28.1-21.el8.x86_64                                                                                   1013/1013
  scriptletの実行中: grub2-efi-x64-1:2.02-150.el8.alma.1.x86_64                                                                           1013/1013
  scriptletの実行中: kernel-core-4.18.0-513.11.1.el8_9.x86_64                                                                             1013/1013
  scriptletの実行中: kernel-modules-4.18.0-513.11.1.el8_9.x86_64                                                                          1013/1013
  scriptletの実行中: kmod-kvdo-6.2.8.7-92.el8.x86_64                                                                                      1013/1013
  scriptletの実行中: java-1.8.0-openjdk-headless-1:1.8.0.402.b06-2.el8.x86_64                                                             1013/1013
  scriptletの実行中: authselect-libs-1.2.6-2.el8.x86_64                                                                                   1013/1013
  scriptletの実行中: httpd-2.4.37-62.module_el8.9.0+3646+acd210d0.x86_64                                                                  1013/1013
  scriptletの実行中: libvirt-daemon-8.0.0-22.module_el8.9.0+3714+46544554.x86_64                                                          1013/1013
  scriptletの実行中: libvirt-daemon-driver-network-8.0.0-22.module_el8.9.0+3714+46544554.x86_64                                           1013/1013
  scriptletの実行中: libvirt-daemon-driver-interface-8.0.0-22.module_el8.9.0+3714+46544554.x86_64                                         1013/1013
  scriptletの実行中: libvirt-daemon-driver-nodedev-8.0.0-22.module_el8.9.0+3714+46544554.x86_64                                           1013/1013
  scriptletの実行中: libvirt-daemon-driver-nwfilter-8.0.0-22.module_el8.9.0+3714+46544554.x86_64                                          1013/1013
  scriptletの実行中: libvirt-daemon-driver-qemu-8.0.0-22.module_el8.9.0+3714+46544554.x86_64                                              1013/1013
  scriptletの実行中: libvirt-daemon-config-network-8.0.0-22.module_el8.9.0+3714+46544554.x86_64                                           1013/1013
  scriptletの実行中: libvirt-daemon-driver-secret-8.0.0-22.module_el8.9.0+3714+46544554.x86_64                                            1013/1013
  scriptletの実行中: libvirt-daemon-config-nwfilter-8.0.0-22.module_el8.9.0+3714+46544554.x86_64                                          1013/1013
  scriptletの実行中: libvirt-daemon-driver-storage-8.0.0-22.module_el8.9.0+3714+46544554.x86_64                                           1013/1013
  scriptletの実行中: sssd-common-2.9.1-4.el8_9.alma.1.x86_64                                                                              1013/1013
  scriptletの実行中: authselect-compat-1.2.6-2.el8.x86_64                                                                                 1013/1013
  scriptletの実行中: tuned-2.21.0-1.el8_9.noarch                                                                                          1013/1013
  scriptletの実行中: java-1.8.0-openjdk-1:1.8.0.402.b06-2.el8.x86_64                                                                      1013/1013
  scriptletの実行中: firefox-115.6.0-1.el8_9.alma.x86_64                                                                                  1013/1013
  scriptletの実行中: microcode_ctl-4:20230808-2.20231009.1.el8_9.x86_64                                                                   1013/1013
  scriptletの実行中: libgcc-8.5.0-18.el8.alma.x86_64                                                                                      1013/1013
  scriptletの実行中: glibc-common-2.28-236.el8.7.x86_64                                                                                   1013/1013
  scriptletの実行中: systemd-239-78.el8.x86_64                                                                                            1013/1013
  scriptletの実行中: systemd-udev-239-78.el8.x86_64                                                                                       1013/1013
  
  検証             : kernel-4.18.0-513.11.1.el8_9.x86_64                                                                                     1/1013  
...
  検証             : libgs-devel-9.27-6.el8.x86_64                                                                                        1013/1013

アップグレード済み:
  NetworkManager-1:1.40.16-13.el8_9.alma.1.x86_64
...
  zlib-devel-1.2.11-25.el8.x86_64
インストール済み:
  kernel-4.18.0-513.11.1.el8_9.x86_64                                        kernel-core-4.18.0-513.11.1.el8_9.x86_64
  kernel-modules-4.18.0-513.11.1.el8_9.x86_64                                kernel-modules-extra-4.18.0-513.11.1.el8_9.x86_64
  perl-Digest-1.17-395.el8.noarch                                            perl-Digest-MD5-2.55-396.el8.x86_64
  perl-IO-Socket-SSL-2.066-4.module_el8.6.0+2811+fe6c84b0.noarch             perl-Net-SSLeay-1.88-2.module_el8.6.0+2811+fe6c84b0.x86_64
  perl-URI-1.73-3.el8.noarch                                                 perl-libnet-3.11-3.el8.noarch
削除しました:
  kernel-4.18.0-477.21.1.el8_8.x86_64                   kernel-core-4.18.0-477.21.1.el8_8.x86_64     kernel-modules-4.18.0-477.21.1.el8_8.x86_64
  kernel-modules-extra-4.18.0-477.21.1.el8_8.x86_64     libgs-devel-9.27-6.el8.x86_64

完了しました!

リブートできたし、AlmaLinux 8.9 (Midnight Oncilla)にアップグレードできてるし、結果オーライ。



「Windows10]KB5034441が0x80070643エラー

投稿日 2024年1月10日 19:24 by おっとっとっと Comment

詳しいことは詳しい記事にお任せして、

見よう見まねでコマンドラインから回復パーティションを拡張しようとしたが

やはり失敗。（予定通り

原因は回復パーティションを拡張するにはディスクに未割当な部分（つまり隙間）が必要だが、Windowsのインストール時にディスクに隙間無く領域を割り当てるから隙間が全くないせいだ。

（と思う。

とは云うものの、DiskPartコマンドでディスクのパーティションを無駄なく割り当てるのはとても難しい。（と思える。

と云う訳で、AOMEIさんのPartiton Assitant Standard（機能制限のある体験版）のお手軽なUIで解決。

（１）Cドライブと回復パーティションを画面右のリサイズ機能でそれぞれ容量を調整する。

今回の手元のPCでは、Cドライブ、回復パーティションの順にならんでいたので、

  • Cドライブのパーティションをリサイズで縮小して未割当な領域（隙間）を作る。
  • 回復パーティションをリサイズで１.５GB程度に拡張する。

な感じで調整。

逆順だったら移動すればいいのかな？

（２）画面左上の『適用』ボタンを押す。

（３）ポップアップしたダイアログで『続行』ボタンを押すと

※操作時の画像を取り忘れた！画像はイメージです。

自動的に再起動しPartiton Assitant がディスクのパーティション調整を終わるまでじっくり待つ。

※２４０GBのSSDでも最初のボリュームチェックが結構長く数秒で１％進むペースだが、調整自体は数分だった。

再起動後にPartiton Assitant で調整結果を確認。

WindowsUpdateも確認すると

エラーは出なく無くなったので無事終了したようだ。

しかし、ツールを使ってディスクをイジるのはリスクがあるので、Windows10 – 22H2 のインストールUSBディスクを作ってクリーンインストールした方が安心！

ps.

このPCはCPUが古いから１１にアップデートできないので、どうせならWindows11をクリーンインストールでディスクのボリュームも割り当てしなおした方が良かったのかな？




top