投稿

2025の投稿を表示しています

Pixabay API 追記

検索フォームと配列にキーワード追加・削除 index.php <html> <head> <meta charset="utf-8"> <title>Pixabay API</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Pixabay API Script</h1> <form name="search"> <input name="key" type="text" placeholder="キーワードを入力してください"> <input name="btn" type="submit" value="表示確認"> </form> <div id="result"></div> <hr> <script src="app.js"></script> <!-- <?php //include("regist.php"); ?> --> <?php // キーワード登録処理 $keyfile = __DIR__ . '/array.js'; $msg = ''; // キーワード削除処理(delete_kwがPOSTされた場合は必ず削除) if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['delete_kw'])) { $del_kw = $_POST['delete_kw']; $js = file_ge...

潮汐表API

イメージ
tide736.net 港別 一週間 潮汐表 都道府県 千島列島 北海道 青森県 岩手県 宮城県 秋田県 山形県 福島県 茨城県 千葉県 東京都 神奈川県 新潟県 富山県 石川県 福井県 静岡県 愛知県 三重県 京都府 大阪府 兵庫県 和歌山県 鳥取県 島根県 岡山県 広島県 山口県 徳島県 香川県 愛媛県 高知県 福岡県 佐賀県 長崎県 熊本県 大分県 宮崎県 鹿児島県 沖縄県 港 選択してください 以前作ったのを貼っておきます。code.csv(コード体系)を ...

為替レートAPI

今回、為替レートAPIを乗り換えたのでまとめ! CurrencyFreaks 乗り換えた理由は1ヶ所でドル円・ユーロ円・ビットコイン円・ビットコインドル等ほとんど揃うからw。また、今回ミニグラフもポップアプ表示してみました。 手順 アカウント作成 APIキー取得 html・JavaScript作成配置 めっちゃ簡単w 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...

アイコン付き吹き出しをJavaScriptとCSSで作る

こんにちは、私が吹き出し左です。 おいらが、右吹き出しでっす。 こんなアイコン付き吹き出しを作ってみたよ♪ WordPressみたいなアイコン付きの吹き出しを記事に簡単に挿入できないものかと、別になくても良いけどw普段あまり使わない 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...

気象庁APIのJsonを利用する為のJavascript

気象庁のJsonデータをごにょごにょする関数w 気象庁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...

PixabayのAPIを使って背景をスライドショーする。

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...

VSCでよく使う正規表現

正規表現による置換 目的 検索 置換 タグ内のスタイルをすべて除去 style="[^"]*" タグの変更 <p>(.+?)</p> <h5>$1</h5> aタグ除去・テキスト残し (※\n) <a\n[^>]*>([\s\S]*?)<\/a> $1 タグを除去 (テキスト抽出) <("[^"]*"|'[^']*'|[^'">])*> imgタグを除去 <\s*img[^>]*> 改行を除去 \r?\n 連続した空白を除去 \s{2,} コメント除去 <!--[\s\S]*?--> ...

VSCで3列のテーブルの中から2列目だけを削除する

※改行・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 用キーボードショートカット

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 パソコンの画面をロック ...

PHPとJQueryとLiteboxで画像ライブラリーをサクッと作る

イメージ
ローカルで整理したままの階層で画像ライブラリーを作ってみた 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でFloccusのXbelをHtml化する。

イメージ
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ファイルを自動的に更新し、他のデバイスと同期します。これにより、複数のデバイスで同じブックマークを使用できるようになり...