なんとなく備忘録

今回、為替レートAPIを乗り換えたのでまとめ！ CurrencyFreaks 乗り換えた理由は1ヶ所でドル円・ユーロ円・ビットコイン円・ビットコインドル等ほとんど揃うからｗ。また、今回ミニグラフもポップアプ表示してみました。 手順 アカウント作成 APIキー取得 html・JavaScript作成配置 めっちゃ簡単ｗ JavaScript //////////////////////////// 為替レート ////////////////////////// function quotesApi() { const url = "https://api.currencyfreaks.com/v2.0/rates/latest?apikey={ ここにAPIキー }&symbols=BITCOIN,EUR,JPY,USD"; getData(url).then((data) => { let output = ""; let output_eur = ""; const quotes = data.rates; const bid = Math.floor(quotes.BITCOIN * 10000); const eud = quotes.EUR; const usjp = quotes.JPY; const eujp = Math.floor(usjp / eud * 100) / 100; output += '<a href="https://stocks.finance.yahoo.co.jp/stocks/chart/?code=USDJPY=X&ct=z&t=1m" title="USD:JPY" target="_blank">$\\(<span id="usjp">' + usjp + '</span>)</a>'; output_eur += '<a href="http...

こんにちは、私が吹き出し左です。 おいらが、右吹き出しでっす。 こんなアイコン付き吹き出しを作ってみたよ♪ WordPressみたいなアイコン付きの吹き出しを記事に簡単に挿入できないものかと、別になくても良いけどｗ普段あまり使わない aside と figure タグを使ってできそうなので作ってみました。 CSS /* 吹き出し */ /* 共通 */ aside, figure { max-width: 60%; margin: 12px 0; font-family: sans-serif; font-size: 1rem; color: #111; background: linear-gradient(135deg, #ffe, #ff9); display: inline-block; display: flex; align-items: flex-start; gap: 10px; margin: 10px 0; border: 1px solid #ccc; /* 枠線 */ border-radius: 16px; /* 角丸 */ padding: 12px 18px; /* 中の文章との余白 */ position: relative; /* 三角やアイコン位置維持用 */ flex-wrap: wrap; /* ←折り返し許可 */ } /* 左吹き出し (aside) */ aside { float: left; clear: both; margin-left: 80px; /* アイコン分の余白 */ } aside::before { content: ""; position: absolute; left: -90px; /* 吹き出しの外へ */ top: 0; width: 80px; height: 80px; border-radius: 50%; background-image: var(--icon-url); background-size: cover; background-position: cen...

気象庁のJsonデータをごにょごにょする関数ｗ 気象庁APIをご存じだろうか。下記のJsonデータを解析利用する為の関数 エリアコード(pathCode) コンテンツ種別 天気予報（明後日まで・週間） 天気概況（明後日まで） 天気概況（週間） アメダス アメダス年月日 火山 JavaScript // 気象庁 // 天気概況（週間） // https://www.jma.go.jp/bosai/nowc/#area_type=class20s&area_code=1310500 // 東京 130000 千葉 120000 // areaCode = "130000"; // 文京区 1310500 八丈島 1340100 銚子 1220200 小笠原村 1342100 // cityCode="1310500"; // //////////////////////////////////////////////////// function newArea(){ // エリア初期値 東京都・文京区 areaCode = "130000"; cityCode = "1310500"; class10 = 0; // Get 引数取得 let resGet = GetQueryString(); if (resGet.area != null){ areaCode = resGet.area; let cityCodeGet = resGet.city; let cityCodeAry = cityCodeGet.split(':'); cityCode = cityCodeAry[1]; class10 = cityCodeAry[0]; } } async function weatherJmaApi() { newArea(); if (areaCode === 460040) areaCode = 460100; const now = new Date(); co...

JQuery ＋ backstretchからJavascript ＋ CSSへ このスクリプトの元を書いたのはかなり前のことなので現在のAPIと異なるところがあるかもしれません。 元はjQuery ＋ backstretchを使用して背景（Body）をスライドショーしていたものを最近書き換えたので記録に残します。一応APIの部分は今でも動きます。 JavaScript ＋ CSS // --- 設定 --- const SLIDE_MS = 30000; // 1枚表示時間 const PRELOAD_AHEAD = 3; // 次に表示する枚数だけプリロード const MAX_CONCURRENT = 3; // 同時ダウンロード上限 // --- 背景スライド（安全版） --- function setBackground(url) { const img = new Image(); img.onload = () => { document.body.style.backgroundImage = `url('${url}')`; document.body.style.backgroundSize = 'cover'; document.body.style.backgroundPosition = 'center'; document.body.style.transition = 'background-image 8s ease-in-out'; }; img.src = url; } async function preloadImages(images) { for (let i = 0; i < images.length; i += 5) { for (let j = i; j < Math.min(i + 5, images.length); j++) { const img = new Image(); img.src = ima...

正規表現による置換 目的 検索 置換 タグ内のスタイルをすべて除去 style="[^"]*" タグ内の属性を除去 ( ]+(?=>) $1 タグの変更 <p>(.+?)</p> <h5>$1</h5> aタグ除去・テキスト残し (※\n) <a\n[^>]*>([\s\S]*?)<\/a> $1 タグを除去 (テキスト抽出) <("[^"]*"|'[^']*'|[^'">])*> imgタグを除去 <\s*img[^>]*> 改行を除去 \r?\n 連続した空白を除去 \s{2,} コメント除去 <!--[\s\S]*?--> JS/CSS用ブロックコメント除去 /\*[\s\S]*?\*/ JS/CSS用行コメント除去 //.*$ よく使う正規表現文字 正規表現 意味 * 直前の文字の0回以上に一致 + 直前の文字の1...

※改行・Tab・スペース等の条件は考慮してません。(;^_^A アセアセ・・・ HTML3列のテーブルで2列目だけを正規表現を使って削除する 手順 HTMLテーブルの構造を確認 : HTMLのテーブルは通常、以下のような構造です。 <table><tr><td>列1のデータ</td><td>列2のデータ</td><td>列3のデータ</td></tr><!-- 他の行 --></table> 2列目を削除 : 各行( <tr> )から2番目の <td>...</td> を削除します。 具体的な方法 手動で削除 : 2列目の <td>...</td> をすべて削除します。 正規表現を使った削除 : Ctrl + H を押して、置換機能を開きます。 検索ボックスに <td>.*?</td> と入力し、2番目の一致を削除するように調整します。 正規表現を有効にして、すべて置換します。 具体例 元のHTMLテーブル : <table><tr><td>列1</td><td>列2</td><td>列3</td></tr><tr><td>A</td><td>B</td><td>C</td></tr></table> 2列目を削除したHTMLテーブル : <table><tr>...

Windows用 ★表示／全表示 Win キー 操作 Win スタートメニューを表示/非表示 Win + A アクションセンターを表示/非表示 Win + B 通知領域（タスクバーの右側）をフォーカス Win + C コルタナを起動 Win + D デスクトップを表示する Win + E エクスプローラーを起動 Win + F フィードバックHubを起動 Win + G Xboxゲームバーを表示 Win + I Windowsの設定を起動 Win + K デバイスの接続画面を開く Win + L パソコンの画面をロック ...

ローカルで整理したままの階層で画像ライブラリーを作ってみた SNSに画像を貼るとき、フォルダーで整理していると便利ですよね。 でも、SNSの画像アップロード画面ではフォルダー構造が反映されないので、アップロードした画像が増えてくると、目的の画像を探すのが大変です。 そこで、ローカルで整理したフォルダー構造をそのまま反映した画像ライブラリーを作ってみました。 画像をクリックすると、Lightboxで拡大表示されます。 画像の下に表示されているURLをコピーして、ブログの画像挿入画面に貼り付ければ、簡単に画像を挿入できます。 画像のURLは、 https://*********.jp/blogger/img/ 以下に、ローカルのフォルダー構造が反映されています。 例えば、 img/16x9_X/1280x720/imageDisplay.PNG のようになります。 画像のURLをコピーするには、 Copy URL ボタンをクリックしてください。 クリップボードにコピーされます。 image_display.php <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Image Display with Folder Tree</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fo...

GAS(Google Apps Script)でGoogleDriveに拡張Floccusによって自動同期されたBookmarks.xbelをブラウザで表示する。 概要 GoogleDriveに保存されたBookmarks.xbelファイルをブラウザで表示するには、Floccusという拡張機能を使用することができます。Floccusは、ブラウザのブックマークをクラウドストレージに同期するためのツールであり、GoogleDriveもサポートしています。これとGAS(Google Apps Script)を通してブラウザで表示します。 手順 FloccusをインストールしてブックマークをGoogleDriveへ同期保存 GAS(Google Apps Script)でGoogleDriveのBookmarks.xbelを取得してブラウザで表示 Floccus Floccusは、ブラウザのブックマークをGoogleDriveやNextcloudなどのクラウドストレージに保存して、複数のデバイスで同期できる拡張機能です。Floccusを使用すると、ブラウザのブックマークを自動的にクラウドにバックアップし、他のデバイスと同期できます。 Floccusを使用してGoogleDriveにブックマークを保存するには、以下の手順を実行します。 Floccusをインストールします。Floccusは、Firefox、Chrome、Edgeなどの主要なブラウザで利用できます。 Floccusを開き、GoogleDriveアカウントに接続します。Floccusの設定画面で、GoogleDriveを選択し、認証プロセスを完了します。 同期するブックマークフォルダを選択します。Floccusの設定画面で、同期したいブックマークフォルダを選択します。 同期を開始します。Floccusの設定画面で、「同期」ボタンをクリックして、ブックマークの同期を開始します。 Floccusは、GoogleDriveに保存されたBookmarks.xbelファイルを自動的に更新し、他のデバイスと同期します。これにより、複数のデバイスで同じブックマークを使用できるようになり...

Edgeコマンド ◀▶ Firefoxコマンド 開発・診断向けのchrome://コマンド これらのコマンドは、ブラウザの設定や内部ツールに素早くアクセスするために使われます。 よく使われる chrome:// コマンド chrome://settings : Chromeの一般的な設定ページです。 chrome://downloads : ダウンロード履歴を確認できます。 chrome://history : 閲覧履歴を確認できます。 chrome://bookmarks : ブックマークを管理できます。 chrome://extensions : 拡張機能の管理ページです。 開発・診断向けの chrome:// コマンド chrome://flags : 実験的な機能を有効または無効にできます。Edgeの edge://flags と同様です。 chrome://version : ブラウザの詳細なバージョン情報、コマンドライン引数、ユーザーエージェントなどを確認できます。 chrome://dino : ネットワーク接続がない場合に表示される恐竜ゲームをプレイできます。隠しコマンドとしても有名です。 chrome://about : すべての chrome:// コマンドへのリンクが表示されます。 これらのコマンドは、Chromeのパフォーマンス管理や、特定の機能への素早いアクセスに非常に便利です。 これらはブラウザのトラブルシューティングや、開発者が詳細な情報を確認するために使用されます。 よく使われる隠しコマンド chrome://restart : Chromeを再起動させます。Edgeの edge://restart と同様に、開いているタブをすべて維持したまま再起動できるため非常に便利です。 ...

Chromeコマンド ◀▶ Edgeコマンド Firefoxの内部コマンドは、EdgeやChromeと同様に about: で始まります。 これらのコマンドは、設定や内部ツールに素早くアクセスするために使われます。 よく使われる about: コマンド about:about : 利用可能なすべての about: ページへのリンクを表示します。このページからすべてのコマンドを確認できます。 about:preferences : 設定ページを開きます。 about:preferences#privacy のように、特定のセクションに直接移動することもできます。 about:config : Firefoxの高度な設定項目を管理します。注意深く操作する必要があります。 about:addons : 拡張機能やテーマの管理ページです。 about:debugging : 開発者向けのページで、アドオンやサービスワーカーのデバッグに使用します。 about:sync-log : Firefoxアカウントの同期状況やエラーログを確認できます。同期トラブルの診断に役立ちます。 about:support : トラブルシューティング情報ページです。ブラウザのバージョン、プロファイルフォルダの場所、キャッシュ情報などを確認できます。 開発・診断向けの about: コマンド about:memory : メモリ使用量を詳細に分析します。どのタブやアドオンが多くのメモリを消費しているか確認できます。 about:performance : CPUとメモリの使用状況をリアルタイムで監視し、タブごとのパフォーマンスを評価します。 about:plugins : インストールされているプラグインのリストと詳細情報を表示します。（※現代ではほとんど使われません） ...

Chromeコマンド ◀▶ Firefoxコマンド Edgeの edge:// コマンドは、設定や内部ツールにアクセスするための便利なコマンドです。 ここでは、よく使われるものや特に役立つものをいくつかご紹介します。 設定関連 edge://settings : Edgeの一般的な設定ページにアクセスします。 edge://settings/help : Edgeのバージョン情報や更新を確認するページです。 edge://settings/system : パフォーマンスやシステムの詳細設定を管理するページです。 edge://settings/profiles : プロファイルの追加や管理を行うページです。 edge://settings/passwords : 保存されたパスワードを確認・管理するページです。 内部ツールと診断 edge://flags : 実験的な機能（非推奨の可能性あり）を有効にしたり無効にしたりできます。 edge://downloads : ダウンロード履歴を確認できます。 edge://history : 閲覧履歴を確認できます。 edge://favorites : お気に入り（ブックマーク）を管理できます。 edge://extensions : 拡張機能の管理ページです。 edge://newtab : 新しいタブページのカスタマイズを行います。 edge://version : ブラウザの詳細なバージョン情報、コマンドライン引数、ユーザーエージェントなどを確認できます。 開発とデバッグ edge://inspect : Chrome DevToolsの機能で、ウェブサイトのデバッグ、サービスワーカー...

VSCodeのバックアップ的な機能は主に以下の3つ 1. ワークスペースのバックアップ（未保存ファイルの一時保存） 目的： 保存していない変更内容をクラッシュ後でも復元できるようにする 保存先（デフォルト）： %APPDATA%\Code\Backups 注意点： バックアップは一時的なものであり、永続的な保存を保証しない VSCodeの設定でバックアップの保持期間を変更可能 設定例： "files.hotExit": "onExitAndWindowClose" "onExit"：VSCode終了時にのみバックアップを保存 "onExitAndWindowClose"：ウィンドウを閉じるときにもバックアップを保存 "off"：バックアップを無効化 (推奨されない) 2. 自動保存（Auto Save） 目的： 編集内容を定期的に保存し、データ損失を防ぐ 設定例： "files.autoSave": "afterDelay", "files.autoSaveDelay": 1000 "off"：自動保存を無効化 "afterDelay"：指定した遅延時間（ミ...

コマンドプロンプトで「SET」コマンドを実行 コマンドプロンプトで「SET」コマンドを実行すると環境変数とその値が表示される。画面では、ユーザー名が「user」なので、「%HOMEPATH%」の値が「\Users\user」になっている。この「user」の部分や「%LOGONSERVER%」に格納されている「ログオンサーバ名」などは実行する環境によって異なるので注意 パスの指定に利用できる環境変数の一覧 変数名 デフォルトの値（パス） %ALLUSERSPROFILE% C:\ProgramData %APPDATA% C:\Users\ ＜ユーザー名＞ \AppData\Roaming %COMMONPROGRAMFILES% C:\Program Files\Common Files %COMMONPROGRAMFILES(x86)% C:\Program Files (x86)\Common Filesv %CommonProgramW6432% C:\Program Files\Common Filesv %HOMEDRIVE% C:\ %HOMEPATH% \Users\ ＜ユーザー名＞ %LOCALAPPDATA% C:\Users\ ＜ユーザー名＞ \AppData\Local ...