EdgeでIEモードを有効にした後、F12（開発者ツール）を開く方法は次の通りです

何が起こりましたか？

最近、プロジェクトが完成に近づき、展開の準備を進めている中で、大きな問題に遭遇しました。FTP関連の問題を解決した直後、クライアントがシステムがInternet Explorer（IE11互換モードでのEdge）に依存していることを伝えていなかったことが判明しました。

これは大きな課題となり、さまざまなパッケージをダウングレードしたり代替手段を探したりする作業に精を出しています。将来的には、各問題がどのように解決されたかを1つずつ紹介する時間を取ります。

今日は、Microsoft EdgeでIEモードを有効にしてその開発者ツールを開くことに焦点を当てましょう。

EdgeでのInternet Explorer互換モード

2022年6月にInternet Explorer（IE）のすべてのサポートが終了したにも関わらず、エンジニアたちはその影響から完全に逃れたわけではありません。

実際、EdgeはIE互換モードで開くことができます。通常、IE11の互換性をエミュレートします。この機能により、古いプログラム（銀行や政府機関などで使用されているものなど）がどれほど時代遅れでも生き残ることができました。

しかし、私たち開発者にとっては悪夢です（後で詳細に説明する価値があるかもしれません）。EdgeとChromeは同じ基盤エンジンを使用していますが、IEはまったく異なるストーリーです。

（確かに、これは悪名高いオプションです！）

適切な規約に従って、Internet Explorerでウェブページを開いていると、予期せぬ問題に遭遇しました。F12を押しても、開発者ツールが空白の画面を表示し、要素の選択さえも不可能になりました。

解決策を探る中で、Googleに頼り、IEモードでは開発者ツールにアクセスするには別の呼び出しが必要であることを発見しました。その鍵はIEChooser.exeというユーティリティにあります。

IEChooser.exe

開く方法は2つありますが、どちらも同じコマンドを使用します。

%systemroot%\system32\f12\IEChooser.exe

最初の方法は、「Windowsキー + R」のショートカットで「実行」ダイアログを開き、次にコマンドを貼り付けて実行することです。

あるいは、コマンドを直接検索ボックス（拡大鏡）に貼り付けることもできます。 - Windows11

この時点で、IE互換性で開いたすべてのページのリストが表示されます。興味のあるページを選択してください。

ミッション完了! おめでとうございます。これで、別の取り返しのつかない旅に参加しました（IEの領域にはさまざまな古代の問題が待ち受けています）。

Windowsで利用可能なすべてのPythonバージョンをリストする方法

何が起こりましたか？

ある日、オンラインチュートリアルに従って安定したDiffusionを設定しようとしていると、Pythonバージョン3.10.6が必要であるという要件に出会いました。すぐにコンピューターをチェックすると、私のバージョンが正しくないことがわかりました。私は3.9を使用していました...

Windows 上のすべての Python バージョンをリストする

基本的な Python コマンドを使用します。まず、すべてのパラメーターをリストします。

py -h # Pythonのヘルプコマンド

⬇そして、次のようになります

ほとんどのコマンドは起動に関連していますが、最後に次のようなものがあります：

• -0 / –list: 利用可能なすべてのPythonバージョンをリストします。
• -0p / –list-paths: 利用可能なすべてのPythonバージョンとそれらのパスをリストします。

興味深いことに、これらのコマンドには2つのバリエーションがあります。どちらかを選択できます（ -0は –listと同じです）。

では、その動作を見てみましょう。

(*は現在のデフォルトバージョンを示します)

新しいバージョンは公式のPythonインストーラーを使用してインストールされており、古いバージョンはAnacondaを介して管理されていることがわかります。

デフォルトのバージョンを切り替えます

デフォルトのバージョンを切り替えるには、PATH（システムプロパティ > 詳細設定）で構成する必要があります。

PATHにより上位に表示されるバージョンがデフォルトに設定されます。

HTML属性classListの紹介：要素クラスの魔法使いになる

 classList

classListは、HTML5で新たに導入された属性で、DOM要素のDOMTokenListを返します。これは読み取り専用のリストで、要素のすべてのクラスを含んでいます。

さあ、試してみましょう！たとえば、次のようなdiv要素があるとします。「apple」、「pen」、「pineapple」という3つのクラスがあります。

<div id="testDiv" class=" apple pen pineapple">
  classList test
</div>

⬆️上記のように、3つのクラスが表示されていることがわかります。次に、これらのクラスを操作する方法について説明しましょう。

対応するメソッド

classList属性には、クラスリストを操作するためのいくつかの関数が用意されています。これには以下が含まれます：

• add: 新しいクラスを追加します。
• remove: クラスを削除します。
• replace: あるクラスを別のクラスに置き換えます。
• toggle: クラスをトグルします - 存在する場合は削除し、存在しない場合は追加します。

// 上記の例から続ける
tarDiv.classList.add('orange')   // 新しいクラス - orangeを追加
tarDiv.classList.remove('apple') // appleを削除
tarDiv.classList.replace('pen','pencil') // penをpencilに置き換える
tarDiv.classList.toggle('pineapple')     // 存在する場合は削除します

皆さんはこの手順に従って実行し、結果を想像してみることができます。

⬇ 結果をステップバイステップで出力し、期待通りかどうかを確認してください。

クラスが存在するかどうかを確認するための関数もあります：

• contains: 特定のクラスが存在するかどうかを示すブール値を返します。

tarDiv.classList.contains('apple')

複数のパラメーター - 複数のクラスの操作と強制

addとremoveの両方は、コンマで区切られた複数のクラス名を操作対象として受け入れることができます。

tarDiv.classList.add('orange', 'melon') 
tarDiv.classList.add('apple', 'pen') 

toggleも第二引数を受け入れます。forceはブール値です。

名前が示すように、forceがtrueに設定されている場合、クラスが存在しているかどうかに関係なく操作が強制されます。falseに設定されている場合、逆の方法で動作します - クラスは常に削除されます。

// クラスを強制的に追加する
tarDiv.classList.toggle('apple', true); // 存在していても、'apple'クラスを追加します

// クラスを強制的に削除する
tarDiv.classList.toggle('apple', false); // もはや存在しなくても、'apple'クラスを削除します 

重要なCSSプロパティ - Displayの紹介、display:noneにとどまっているのですか？

 "display"プロパティとは、具体的には何ですか？

"display"プロパティは、要素がどのように表示されるかを制御するCSSの重要な属性です。

より技術的な言葉で言えば、指定された要素ボックスがどのようにレンダリングされるかを制御し、全体のレイアウトに大きな影響を与えます。

よく使われるdisplayの値は以下の通りです：

• none: これはおそらくみんなにとって最も馴染み深いものです。要素を非表示にします。
• block: 要素をブロックレベルの要素としてレンダリングし、親要素の全幅を占有します。次のレイアウトは次の行で開始されます。
• inline: インライン要素は同じ行に表示され、コンテンツに必要な幅のみを占有します。
• inline-block: インライン要素とブロック要素の特性を併せ持ちます。要素は同じ行に表示されますが、幅と高さを設定することができます。
• flex: フレックスコンテナーを確立し、フレックスレイアウトモデルを使用してそれ内のアイテムの柔軟な配置を可能にします。
• grid: グリッドコンテナーを作成し、グリッドレイアウトモデルを使用して強力な2次元のレイアウトを可能にします。
• table: HTMLの <table> 要素のように振る舞い、要素をテーブル要素に変換し、関連する table-row 要素と table-cell 要素を持たせます。

これらの異なるdisplay値は、ウェブページ内の要素のレイアウトと配置を制御する多様な方法を提供します。

以下は、block、inline、inline-blockの違いの例です。

See the Pen Untitled by story zyra (@story-zyra) on CodePen.

⭐ 実際、<div> 要素のデフォルトの表示値は block です。そのため、自然に改行を起こし、親コンテナの全幅を占有します。

テキストエリア入力のプレースホルダーに改行を追加する方法

何が起こりましたか？

最近、Chart JS を探求していて、いくつかの実験のための機能を作成しようと考えました。

しかし、プレースホルダーテキストの改行に関する問題に遭遇しました。

なぜ ' \n ' 改行文字がプレースホルダーの書式設定に機能しないのでしょうか？

結局のところ、これはプログラミングコミュニティで広く使用されているテクニックですよね？

⬇こちらで試すことができます

See the Pen textarea_placeholder_test by story zyra (@story-zyra) on CodePen.

(中国語での意味は：改行したいです！ 改行、改行)

少し検索した結果、解決策をついに見つけました！

それらはそれぞれ "&#13;" と "&#10;" です。

彼らはそれぞれ次のASCIIコードです：

LF（改行）：ASCIIコード10で、改行を表します。= \n

CR（キャリッジリターン）：Enterキーを押す効果と類似 = \r、ASCIIコード13です。

したがって、元の \r\n はこれらのコードを使用して置換できます。

それでは、実際にどのように機能するか見てみましょう。

See the Pen textarea_placeholder_asciicode by story zyra (@story-zyra) on CodePen.

JavaScriptのスパース配列の謎 - インデックス0から9が消えた理由

 何が起こりましたか？

LeetCode #509 Fibonacci Number Solution & Explanation – Zyrastory を書いている間、次のJavaScriptコードセグメントに出会いました。

var fib = function(n) {
    arr = [0,1];
    
    for(let i = 2; i<=n; i++)
    {
        arr[i] = arr[i-1]+arr[i-2];
    }
    return arr[n];
};

C#やJavaとは異なり、JavaScriptの配列の長さは固定されておらず、動的に変更できます。
これにより、故意にインデックスをスキップして値を割り当てる際の配列の動作に疑問を持ちました。配列はどのように見えるでしょうか？
迷いなく、すぐに開発者コンソール（F12）を開き、次のコードスニペットを入力しました：

arr = []
arr[10] = 10

arr.forEach(function(item,index) {
  console.log("index "+index+": "+item);
})
console.log("Length of arr : "+arr.length)

空の配列 arr が最初に定義され、その後、インデックス10に値10が割り当てられます。

さて、問題は、配列の長さは何ですか？推測してみましょう！

この場合、foreach構文が使用され、ちなみに、関連記事もいくつか言及しておきましょう：Unraveling the Peculiar Pitfall in JavaScript – forEach Loop Fails to Exit with return! – Zyrastory

準備はできています！ では、答えを発表します：

なんですか！

なぜ1つのオブジェクトしか表示されないのですか？

しかし、長さが1と言うのも間違っています。はっきりと11と表示されています。

この時点で、arr[0]をチェックする以外に選択肢はありません ➡ undefinedです。

さて、インデックス0から9までを印刷してみましょう ➡ 驚くことではありませんが、すべてundefinedです。

そして、今日のトピックに移りましょう。

疎な配列 (Sparse Array)

疎な配列は、配列の長さがその要素の数と一致しない場合を指します。これは、住民のいない家があるような、家の列に似ています。一方で、通常使用される対応関係は、全てのインデックスに要素がある密な配列です。

その印刷方法は？

JavaScriptでは、forEachメソッドは配列の割り当てられたインデックスのみを反復処理し、疎な配列の未割り当てのインデックスを反復処理しません。

この場合、最も基本的な形式のforループを実際に使用できます。

arr = []
arr[10] = 10

for(let i = 0; i<arr.length;i++)
{
    console.log("indx"+i+": "+arr[i])
}
console.log("Length of arr : "+arr.length)

今では配列全体が見えますね！

Windowsコマンドの探索：CDコマンドの紹介 - Dドライブに切り替えられない理由

 何が起こりましたか？

ファイルエクスプローラーからDドライブのパスをコピーして、CMDで 'cd'コマンドを使用して切り替えようとしたことがありますか？しかし、それが機能しないことに気付いたことがありますか？

この記事では、CDコマンドについて話しましょう！

コンピュータの世界では、コマンドはシステムとのやり取り方法です。Windowsでよく使われるツールであるコマンドプロンプトを使用すると、さまざまなコマンドを入力してオペレーティングシステムやファイルシステムを制御できます。

この記事では、CDコマンドの紹介と、Windows環境で異なるディスクドライブ間を切り替える方法について説明します。

HTML Canvas要素をダウンロードする方法 - toDataURL()

 何が起こったのですか。

この記事は、Chart.jsとの私の旅の別の章であり、新しい課題に直面しました。オンラインのチャート可視化を開発している最中に、ダウンロード機能の必要性に気付きました。これにより、その実装方法を探ることになりました。

この記事では、この課題に取り組む経験を共有し、Chart.jsとそのキャンバスベースのチャートを使用しながら、この見かけ上簡単なタスクをどのように乗り越えるかについて洞察を提供します。

toDataURL()

toDataURL()は、キャンバス要素に固有のユニークな機能です。これは、キャンバス要素の内容を表すDataURLオブジェクトを返します。

単純に言えば、これは画像形式と画像自体がBase64でエンコードされた文字列を生成します。

渡すことができる2つのオプションパラメータがあります: typeとencoderOptions。

toDataURL()
toDataURL(type)
toDataURL(type, encoderOptions)

type: 画像形式。デフォルトはimage/pngです。

encoderOptions: 画像の品質。0から1までの範囲で、値が高いほどクリアでファイルサイズが大きくなります。(*このパラメータは、jpegやwebpなどの損失圧縮形式の画像タイプにのみ影響を与えることに注意してください。)

取得したDataURLオブジェクトは、さまざまな目的で使用できます:

• ウェブページで表示: 画像またはiframe要素のソース(src)として直接使用できます。
• ダウンロード: DataURLをダウンロード可能なリンクとして提供し、ユーザーが画像をローカルに保存できます。

ダウンロード/参照された画像が黒く表示される理由は何ですか？

簡単な例を見てみましょう:

See the Pen canvas_download_1 by story zyra (@story-zyra) on CodePen.

⬆️ 自分で試してみることができます

なぜ黒く表示されるのでしょうか？実際には、この問題は画像ファイルの種類に関連しています！この問題はJPEG形式の場合にのみ発生します。

以下の例をご覧ください。表示にiframeを使用したダウンロードプロセスを変更しました。

See the Pen canvas_img_test by story zyra (@story-zyra) on CodePen.

明らかに、PNGとWebPファイルにはこの問題がありません。

調査の結果、JPEGは透明な背景をサポートしていないことがわかりました。これが、デフォルトの動作が黒に変換される理由かもしれません。

しかし、解決策は非常にシンプルです：自分で背景を描きます !!

    var ctx = canvas.getContext('2d');

    ctx.globalCompositeOperation = 'destination-over'
    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

行 "ctx.globalCompositeOperation = 'destination-over'" は、新しく描かれた背景が既存のチャートの下に表示されるようにします。

JavaScriptでの奇妙な問題 - forEachがループを抜ける - returnがなぜ効かないのか!?

この前、私がLeetCodeの問題練習をしていて、JavaScriptに関する問題に遭遇しました。忘れないように、メモしておきました。

それはこの問題です ➡ LeetCode #1338 Reduce Array Size to The Half Solution & Explanation - Zyrastory - Code & Food Research Center

事の経緯は以下の通りです（一部のコードを抜粋しました）

配列に対してforEachループを行う部分があります（Object.valuesは配列を返します）

    //2.order by values
    var k = Object.values(dict);
    k.sort();
    k = k.reverse();
    
    //3.find result
    var res = 0;
    k.forEach(function(s){
        if (s>mid)
        {                
            return res == 0 ? 1 : res+1;
        }
        else if (s<mid)
        {
            mid -= s;
            res +=1;
        }
        else    //s == mid
        {
            return res+1;
        }
    });
    return res;

確かに、そのロジックには問題がないはずなのに、なぜ常に提出が失敗するのか不思議です。

確認したところ、どうやら23行目までしか実行されず、その後の処理が行われていないようです。

何が起こっているのでしょうか？上記のif else文にはreturnが必要ですが、なぜ効果がないのでしょうか？

確かに不思議ですね。それでは、簡単なプログラムを使って試してみましょう。

function test() {
    arr = ['apple','pineapple','orange','lemon'];

    let result = '';

    arr.forEach(function(s){
        if(s=='apple')
        {
            result = 'りんご';
        }
        else if(s=='orange')
        {
            result = 'オレンジ';
        }
    });

    return '桜';
}
k = test();

ああ…私たちは【桜】を得た…明らかにりんごであるべきなのに…

それでは、次のJavaScriptの技術ドキュメントを見てみましょう。以下のようなものを見つけました。

ええっ！？異常を投げないと中止できないの？普段使っているC#のforeachとはまったく違うんですね。

だから最初の問題は基本的なforループを使って戻るべきですね。

//2.order by values
    var k = Object.values(dict);
    k.sort();
    k = k.reverse();
    
    //3.find result
    var res = 0;
    for (let i = 0; i < k.length; i++) {
        const s = k[i];
        
        if (s>mid)
        {                
            return res == 0 ? 1 : res+1;
        }
        else if (s<mid)
        {
            mid -= s;
            res +=1;
        }
        else    //s == mid
        {
            return res+1;
        }
    }
    
    return res;

これで正しい値を返すことができるようになりました。疑問が解消されて、安心して眠れるようになりました。

今後機会があれば、ドキュメントに記載されている every() と some() も調べてみたいと思います。