kenji148’s diary (original) (raw)

vlookup

ファイル名をエクセルに転記する方法について説明します。以下の方法で、フォルダ内のファイル名を簡単にエクセルに転記できます。

1. コマンドプロンプトを使う方法（Windows）:

1. コマンドプロンプトを開く：
   • 「Windowsキー + R」を押し、「cmd」と入力してコマンドプロンプトを開きます。
2. フォルダに移動：
   • コマンドプロンプトで、ファイルが保存されているフォルダに移動します。例えば、フォルダが「C:\Users\ユーザー名\Downloads」にある場合、以下のように入力します。cd C:\Users\ユーザー名\Downloads
3. ファイル名リストをテキストファイルに出力：
   • 次のコマンドを入力し、フォルダ内のファイル名を「filelist.txt」というテキストファイルに出力します。dir /b > filelist.txtこれで、フォルダ内のファイル名だけが含まれた filelist.txt というファイルが作成されます。
4. テキストファイルを開く：
   • filelist.txt をメモ帳で開き、その内容をコピーしてエクセルに貼り付けます。エクセルが自動的にファイル名を行ごとに分けてくれます。

2. PowerShellを使う方法（Windows）:

1. PowerShellを開く：
   • 「Windowsキー + X」を押してメニューを開き、「Windows PowerShell」を選択します。
2. フォルダに移動：
   • フォルダのパスに移動します。例えば、ダウンロードフォルダの場合、以下のように入力します。cd C:\Users\ユーザー名\Downloads
3. CSVファイルにファイル名を出力：
   • 次のコマンドを入力します。これにより、フォルダ内のファイル名が filelist.csv というファイルに保存されます。Get-ChildItem | Select-Object Name | Export-Csv -Path filelist.csv -NoTypeInformation
   • filelist.csv はエクセルで直接開くことができ、各ファイル名が行ごとに表示されます。

まとめ:

どちらの方法も非常にシンプルで、フォルダ内のファイル名をエクセルに転記する際に便利です。もし、特定の操作で困ったり、他の質問があればお気軽にお知らせください！

dialogWindow && !dialogWindow.closed を使うことで、子ウィンドウが開いているかどうかを確認できるため、isDialogOpen フラグは実際には不要になります。この場合、dialogWindow の状態を直接チェックすることで、子ウィンドウの管理ができます。

修正例

以下のように、isDialogOpen フラグを削除して、dialogWindow の状態だけで処理を行うようにコードを整理できます。

let dialogWindow = null;

function openModalDialog(url) {

if (dialogWindow && !dialogWindow.closed) {
    dialogWindow.focus();
    return; 
}

const width = 500;
const height = 400;
const left = (window.screen.width - width) / 2;
const top = (window.screen.height - height) / 2;

dialogWindow = window.open(
    url, 
    'modalDialog', 
    `width=${width},height=${height},left=${left},top=${top}`
);


if (!dialogWindow) {
    alert('ポップアップがブロックされました');
    return;
}


document.getElementById('overlay').style.display = 'block';
document.getElementById('overlay').setAttribute('aria-hidden', 'false');

const messageHandler = (event) => {
    if (event.origin !== window.location.origin) {
        return;
    }

    
    document.getElementById('result').innerText = `選択された結果: ${event.data}`;
    closeModalDialog(); 
};

window.addEventListener('message', messageHandler);


let interval = setInterval(() => {
    if (dialogWindow && dialogWindow.closed) {
        clearInterval(interval);
        closeModalDialog(); 
    }
}, 500);

}

function closeModalDialog() { document.getElementById('overlay').style.display = 'none'; document.getElementById('overlay').setAttribute('aria-hidden', 'true'); dialogWindow = null; }

const focusDialog = () => { if (dialogWindow && !dialogWindow.closed) { dialogWindow.focus(); } };

window.addEventListener('click', focusDialog); window.addEventListener('focus', focusDialog); window.addEventListener('resize', focusDialog);

document.getElementById('openDialogBtn').addEventListener('click', () => { openModalDialog('child.html'); });

主な変更点

• isDialogOpen フラグを削除: dialogWindow && !dialogWindow.closed のチェックだけで、子ウィンドウの状態を判断しています。
• コードの簡素化: 状態管理が簡素化され、可読性が向上します。

この変更により、コードがすっきりし、メンテナンスもしやすくなります。何か他に質問や相談があれば、遠慮なくお知らせください！

別解

理解しました。親ウィンドウでの操作があるたびに子ウィンドウにフォーカスを戻したい場合、focusDialog 関数を親ウィンドウでのクリック、フォーカス、リサイズのイベントごとに実行する必要があります。

以下のように、initialize 関数でイベントリスナーを設定し、親ウィンドウでの処理が発生するたびに子ウィンドウにフォーカスを戻すようにします。

修正後のコード

let dialogWindow = null;

const messageHandler = (event) => { if (event.origin !== window.location.origin) { return; }

document.getElementById('result').innerText = `選択された結果: ${event.data}`;
closeModalDialog(); 

};

const focusDialog = () => { if (dialogWindow && !dialogWindow.closed) { dialogWindow.focus(); } };

function initialize() {

window.addEventListener('click', focusDialog);
window.addEventListener('focus', focusDialog);
window.addEventListener('resize', focusDialog);

}

function openModalDialog(url) {

if (dialogWindow && !dialogWindow.closed) {
    dialogWindow.focus();
    return; 
}

const width = 500;
const height = 400;
const left = (window.screen.width - width) / 2;
const top = (window.screen.height - height) / 2;

dialogWindow = window.open(
    url, 
    'modalDialog', 
    `width=${width},height=${height},left=${left},top=${top}`
);


if (!dialogWindow) {
    alert('ポップアップがブロックされました');
    return;
}


document.getElementById('overlay').style.display = 'block';
document.getElementById('overlay').setAttribute('aria-hidden', 'false');


window.addEventListener('message', messageHandler);


let interval = setInterval(() => {
    if (dialogWindow && dialogWindow.closed) {
        clearInterval(interval);
        closeModalDialog(); 
        window.removeEventListener('message', messageHandler); 
    }
}, 500);

}

function closeModalDialog() { document.getElementById('overlay').style.display = 'none'; document.getElementById('overlay').setAttribute('aria-hidden', 'true'); dialogWindow = null; }

document.addEventListener('DOMContentLoaded', (event) => { initialize(); });

document.getElementById('openDialogBtn').addEventListener('click', () => { openModalDialog('child.html'); });

説明

• イベントリスナーの追加: initialize 関数で、親ウィンドウのクリック、フォーカス、リサイズイベントごとに focusDialog を呼び出します。
• 子ウィンドウにフォーカスを戻す: これにより、親ウィンドウでのアクションが発生するたびに、子ウィンドウにフォーカスが戻ります。

この構造により、親ウィンドウでの操作に応じて、子ウィンドウが常にフォーカスを持つようになります。他に質問や改善点があれば、遠慮なくお知らせください！

initialize 関数は、親ウィンドウのクリック、フォーカス、リサイズのイベントリスナーを一度だけ追加します。しかし、その後に追加されたイベントリスナー（focusDialog）が親ウィンドウでのアクションのたびに動作します。

イベントリスナーの仕組み

1. イベントリスナーの追加:
   • initialize 関数内で、window.addEventListener('click', focusDialog); のようにイベントリスナーを追加します。これは一度だけ行われ、イベントリスナーは親ウィンドウの全体に対して機能します。
2. イベントのトリガー:
   • 追加されたイベントリスナー（focusDialog）は、親ウィンドウでのクリック、フォーカス、リサイズイベントが発生するたびに呼び出されます。このイベントリスナーは、親ウィンドウでのアクションがあるたびに実行されるため、子ウィンドウにフォーカスを戻す処理が行われます。

例

以下の流れで処理が進みます：

• ユーザーが親ウィンドウをクリックする。
• クリックイベントがトリガーされ、focusDialog 関数が実行される。
• focusDialog 内で dialogWindow.focus() が呼び出され、子ウィンドウにフォーカスが戻る。

このように、initialize 関数が1回だけ呼び出されることで、イベントリスナーが親ウィンドウに対して設定され、その後は親ウィンドウでの各アクションに応じて focusDialog が実行されます。

まとめ

initialize 関数はイベントリスナーを一度だけ追加しますが、そのリスナーは親ウィンドウでのアクションがあるたびに実行されるため、子ウィンドウにフォーカスを戻すことができるというわけです。この仕組みを理解していただければと思います。他に質問があれば、どうぞお知らせください！

メモリ使用量確認

イベントリスナーが何度も追加されているかどうかを確認し、メモリ使用量を監視するためのいくつかの方法があります。

1. コンソールでの確認

ブラウザの開発者ツールを使用して、特定のイベントリスナーが何回追加されているかを確認できます。

• Chrome や Firefox の開発者ツールを開きます。
• Elements タブで対象の要素を選択し、右クリックして Break on... から subtree modifications を選択します。これにより、DOMの変更時にブレークポイントが発動します。
• その後、親ウィンドウでクリックやフォーカスなどのイベントを発生させ、リスナーが何度追加されているかを確認します。

2. リスナーのカウント

イベントリスナーを追加する際にカウンタを用意し、リスナーが追加されるたびにそのカウントを増やす方法があります。

let eventListenerCount = 0;

function initialize() {

window.addEventListener('click', focusDialog);
eventListenerCount++;
console.log(`Added click listener. Total listeners: ${eventListenerCount}`);


window.addEventListener('focus', focusDialog);
eventListenerCount++;
console.log(`Added focus listener. Total listeners: ${eventListenerCount}`);


window.addEventListener('resize', focusDialog);
eventListenerCount++;
console.log(`Added resize listener. Total listeners: ${eventListenerCount}`);

}

3. メモリの使用量を監視

ブラウザの開発者ツールでメモリ使用量を監視することができます。特に Memory タブを使用して、以下の方法でメモリ使用量をチェックします。

• Heap Snapshot: 現在のメモリ使用状況のスナップショットを取得します。このスナップショットを比較することで、メモリリークの有無を確認できます。
• Allocation Timeline: アロケーションのタイムラインを監視して、特定のアクションがメモリ使用量にどのように影響するかを確認できます。

4. パフォーマンスプロファイリング

• Performance タブでプロファイリングを行い、イベントリスナーの追加や削除がどのようにパフォーマンスに影響を与えているかを確認できます。記録を開始し、親ウィンドウの操作を行い、イベントリスナーが実行されるたびにどのようなパフォーマンスの変化があるかを観察します。

まとめ

これらの方法を使って、イベントリスナーの追加回数やメモリ使用量を確認することができます。特に、リスナーが重複して追加されることによるパフォーマンスへの影響を防ぐために、必要なリスナーを適切に管理することが重要です。何か他に質問や具体的な問題があれば、お気軽にお知らせください！

横方向に勝手にスクロールバーが表示される一般的な例を以下に示します。この問題は、width: 100%を設定した要素にpaddingやmarginが加わると、親要素の幅を超えてしまうことが原因です。

HTML

CSS (styles.css)

body { margin: 0; padding: 0; }

.container { width: 100%; background-color: #f0f0f0; }

.box { width: 100%;
padding: 20px;
background-color: #4CAF50; color: white; box-sizing: content-box; }

このコードでは、.boxクラスの要素がwidth: 100%で設定されているため、親要素の幅いっぱいに広がりますが、paddingが20px加わるため、合計幅が100%を超えてしまい、横スクロールバーが表示されます。

解決策

この問題を解決するために、box-sizingをborder-boxに設定します。これにより、paddingがボックスの幅に含まれるようになり、合計幅が親要素を超えなくなります。

修正後のCSS

.box { width: 100%; padding: 20px; background-color: #4CAF50; color: white; box-sizing: border-box; }

この修正を行うことで、横スクロールバーが表示されなくなります。

IEでの挙動

その通りです！Internet Explorer（IE）では、要素の幅の計算にborder-boxがデフォルトで使用されるため、paddingやborderが含まれても、要素が親の幅を超えることはありません。一方で、Microsoft Edgeではデフォルトがcontent-boxとなるため、paddingが加わると合計幅が100%を超えてしまい、横スクロールバーが表示されることがあります。

もしEdgeでの表示を調整したい場合は、CSSでbox-sizing: border-box;を設定するのが良いでしょう。これにより、IEと同様の動作が期待でき、意図しないスクロールバーの出現を防げます。全体のスタイルに対して一括で適用する場合は、以下のようにすると便利です。

全体に適用する例

• { box-sizing: border-box; }

このようにすると、すべての要素に対してbox-sizing: border-box;が適用されるため、予期せぬ横スクロールを防ぐことができます。

overflow-xを使用しなくてもスクロールバーは出る

overflow-xプロパティを使用しなくても、要素が親要素の幅を超える場合、横スクロールバーが自動的に表示されることがあります。これは、ブラウザが要素のサイズを計算して、表示可能な領域を超えている場合に発生します。

具体的には、以下のような状況で横スクロールバーが表示されることがあります：

1. 要素の幅が100%を超える: width: 100%を設定した要素にpaddingやborderがある場合。
2. 固定幅の要素: 固定幅（pxなど）を持つ要素が親要素よりも広い場合。
3. ネガティブマージン: ネガティブマージンを使用して、要素が親要素の外に出てしまう場合。
4. 絶対配置の要素: position: absolute;またはposition: fixed;を使用している要素が、親要素の境界を超える場合。

これらの状況では、ブラウザは表示可能な領域を超えた部分を処理するために横スクロールバーを表示します。

overflow-xプロパティを使うことで、スクロールバーの表示方法を制御することもできますが、要素のサイズやマージン、パディングなどが適切に設定されているかを確認することが基本的な解決策になります。

!importantを使わずに.button3:hoverがinput[type="button"]:hoverよりも優先されるようにするためには、特異性を高める必要があります。特異性を高めるためには、より具体的なセレクタを使うか、異なるクラスを適切に使用する必要があります。

方法1: 特異性を高める

以下のように、特定の親要素を含むセレクタを使って特異性を高めることができます。

方法2: クラスの組み合わせを使う

特異性を高める別の方法として、button3のクラス名を使った特異なセレクタを作成します。

input.button3:hover { background-color: darkorange; color: white; }

まとめ

上記の方法を用いることで、!importantを使わずに.button3:hoverがinput[type="button"]:hoverよりも優先されるように設定できます。特異性を高めることによって、望ましいスタイルを適用することが可能です。これをお試しいただき、問題が解決するか確認してみてください。他に質問があればお知らせください！

簡易な場合はcssで

CSSの:hoverとJavaScriptのonmouseover/onmouseout

• CSSの:hover: この擬似クラスは、ユーザーが要素にカーソルを合わせたときにスタイルを適用します。単にCSSを使用するだけで、視覚的な効果を実現することができます。これにより、ホバー時のスタイル変更（色の変更、サイズの変更など）を簡単に設定できます。

  button:hover {
      background-color: deepskyblue; /* ホバー時の色 */
      color: white; /* ホバー時のテキスト色 */
  }

• JavaScriptのonmouseover/onmouseout: これらのイベントは、よりインタラクティブな動作を実装したい場合に使用します。たとえば、ボタンにカーソルを合わせたときに特定の動作を実行したり、アニメーションを開始したりする場合などです。

  const button = document.querySelector('.button');

  button.onmouseover = function() {
      this.style.backgroundColor = 'deepskyblue'; // ホバー時の色変更
      this.style.color = 'white'; // ホバー時のテキスト色変更
  };

  button.onmouseout = function() {
      this.style.backgroundColor = ''; // 元の色に戻す
      this.style.color = ''; // 元のテキスト色に戻す
  };

結論

• 視覚的な変化のみを目的とする場合: CSSの:hoverを使用することで、シンプルにスタイルを変更できます。これが一般的で、効率的です。
• 追加のインタラクションや動作を実装したい場合: JavaScriptのonmouseoverやonmouseoutイベントを使用して、より複雑な動作を定義できます。

通常、視覚的なスタイル変更だけが必要な場合は、CSSの:hoverで十分です。もし特別な動作を実装したい場合は、JavaScriptを使うことを検討してください。

selectの見栄えを調整するメモです

Internet Explorerでの選択状態の色が青っぽいことを再現するためには、背景色を青に変更しつつ、文字色を白に設定することができます。下記のようにCSSを調整して、選択後に青い背景色が適用されるようにしましょう。

説明:

1. background-color: #0078d7;: これはInternet Explorerの選択時の青っぽい色に近い色です。この色を背景に指定して、選択後に青い背景が表示されるようにしています。
2. select.selected: JavaScriptで選択されたら、selectedクラスを追加し、背景を青、文字色を白に変更しています。
3. option:checked: ドロップダウン内の選択されたオプションに対しても、青背景・白文字を適用しています。

これで、選択後の色がInternet Explorerのように青色になり、選択される前は通常の白背景・黒文字になります。

bodyにheight: 100vhをセットせずに、スクロールができるようにすることは可能です。height: 100vhを使用することで、bodyタグが画面全体の高さに固定されますが、これが不要な場合、bodyの高さをコンテンツの高さに応じて自動的に調整させることでスクロールを発生させることができます。

次のような変更を加えることで、height: 100vhを使わずにスクロールができる状態にできます。

修正後のコード例

この方法では、選択肢が多くて高さを超える場合にのみスクロールバーが表示されます。

オプション2: JavaScriptで選択肢の数に応じてサイズを調整する

JavaScriptを使って、選択肢の数に応じてsizeを動的に設定することができます。

この方法では、選択肢が少ない場合にスクロールバーが表示されず、sizeが選択肢の数に応じて自動的に調整されます（最大10まで表示）。

これでスクロールバーの表示を制御できます。何か質問があれば、気軽にどうぞ！

スクロール幅調整2

スクロールバーが表示されていない場合でも、スクロールバーの幅分を強制的に追加することは可能です。そのためには、スクロールバーの有無にかかわらず、右側に余白を設けることで対応できます。

以下の方法で、スクロールバーが表示されていない場合でもスクロールバー分の幅を確保できます。

1. padding-rightを追加して幅を確保する方法

padding-rightを使用して、スクロールバー分のスペースを追加できます。以下の例では、スクロールバーの幅を確保するために16pxの余白を追加しています。

select { padding-right: 16px; }

2. フレックスボックスやグリッドでレイアウトを調整する方法

特定のデザイン要件に基づいて、フレックスボックスやグリッドレイアウトを使って、選択ボックス全体にスクロールバーがあるかのようなスペースを確保することもできます。

3. JavaScriptを使用してスクロールバーの幅を計算し、追加する

JavaScriptを使用して、現在の環境におけるスクロールバーの幅を取得し、その幅をスタイルに適用することもできます。スクロールバーがある場合とない場合の幅を動的に調整できます。

function getScrollbarWidth() {

const outer = document.createElement('div'); outer.style.visibility = 'hidden'; outer.style.overflow = 'scroll'; outer.style.msOverflowStyle = 'scrollbar'; document.body.appendChild(outer);

const inner = document.createElement('div'); outer.appendChild(inner);

const scrollbarWidth = outer.offsetWidth - inner.offsetWidth;

outer.parentNode.removeChild(outer);

return scrollbarWidth; }

const scrollbarWidth = getScrollbarWidth(); document.querySelector('select').style.paddingRight = ${scrollbarWidth}px;

このJavaScriptのコードは、現在のブラウザにおけるスクロールバーの幅を自動的に取得し、その幅分だけ右側にパディングを追加します。

これにより、スクロールバーの有無にかかわらず、幅を調整してコンテンツが動かないように見せることができます。

スクロール幅調整3

この動作を実現するためには、CSSとJavaScriptを組み合わせて、データの高さによってスクロールバーの表示とその幅の調整を行うことができます。具体的には、以下の手順で実装できます。

1. データが高さ分に収まっている場合:

• スクロールバーは非表示
• スクロールバー分の幅（余白）を追加

2. データが高さからはみ出している場合:

• スクロールバーを表示
• スクロールバー分の幅を追加しない

実装方法

CSS部分

select { overflow-y: auto; box-sizing: content-box; }

JavaScript部分

次に、JavaScriptでデータの高さをチェックし、スクロールバーが必要な場合と必要でない場合でパディングを動的に調整します。

説明

• adjustSelectWidth関数では、scrollHeightとclientHeightを比較して、select要素がスクロール可能かどうかを判断します。
• スクロールが必要でない場合、スクロールバーの幅を計算し、右側にその分のパディングを追加します。
• スクロールが必要な場合、パディングは追加されません。

実装の流れ

1. ページが読み込まれたときにadjustSelectWidthが実行され、選択ボックスのスクロールが必要かどうかをチェックします。
2. スクロールが不要な場合はパディングを追加し、必要な場合はパディングを削除してスクロールバーを表示します。
3. ウィンドウサイズの変更やデータの量が変わる場合（例えば動的にオプションが追加される場合など）、スクロールバーと幅を再調整します。

これで、スクロールの状態に応じて幅の調整ができるはずです。

スクロール幅調整4

この動作を実現するためには、CSSとJavaScriptを組み合わせて、データの高さによってスクロールバーの表示とその幅の調整を行うことができます。具体的には、以下の手順で実装できます。

1. データが高さ分に収まっている場合:

• スクロールバーは非表示
• スクロールバー分の幅（余白）を追加

2. データが高さからはみ出している場合:

• スクロールバーを表示
• スクロールバー分の幅を追加しない

実装方法

CSS部分

select { overflow-y: auto; box-sizing: content-box; }

JavaScript部分

次に、JavaScriptでデータの高さをチェックし、スクロールバーが必要な場合と必要でない場合でパディングを動的に調整します。

説明

• adjustSelectWidth関数では、scrollHeightとclientHeightを比較して、select要素がスクロール可能かどうかを判断します。
• スクロールが必要でない場合、スクロールバーの幅を計算し、右側にその分のパディングを追加します。
• スクロールが必要な場合、パディングは追加されません。

実装の流れ

1. ページが読み込まれたときにadjustSelectWidthが実行され、選択ボックスのスクロールが必要かどうかをチェックします。
2. スクロールが不要な場合はパディングを追加し、必要な場合はパディングを削除してスクロールバーを表示します。
3. ウィンドウサイズの変更やデータの量が変わる場合（例えば動的にオプションが追加される場合など）、スクロールバーと幅を再調整します。

これで、スクロールの状態に応じて幅の調整ができるはずです。