JavaScriptChrome拡張機能『Design Tracker – 画像を重ねてコーディングを微調整』をリリースしました！
画像越しに要素を検証！Design Trackerの「Inspectモード」がコーディングの常識を変える件 こんにちは、志乃です。 先日リリースしたChrome拡張機能『Design Tracker – Overlay for Coding...
効率化
JavaScript
JavaScript効率的なリサーチワークフローの構築：ClipContextによるコンテキスト保持とタブ管理の自動化
はじめに ウェブベースのリサーチ業務において、情報の断片化は避けて通れない課題です。「コピー＆ペースト」という日常的な操作の中で、出典URLの記録漏れや、後で見返した際の文脈（コンテキスト）の喪失が、作業効率を著しく低下させる要因となります...
JavaScriptPerformance APIとchrome.webRequestの比較
ブラウザ拡張機能を開発していると、「リクエストの情報を取りたいのに取れない！」という場面に出くわすことがあります。そんなとき候補に上がるのがPerformance APIとchrome.webRequest APIの2つです。 どちらもリク...
JavaScriptKH（炭酸塩硬度）をmg/L（ppm, アメリカ硬度）からドイツ硬度（°dH）に変換するWebツール
数年ぶりにアクアリウムを始めました。pHとKHの値でCO2濃度が計算出来るのですが、購入した試験紙のKHの単位がアメリカ硬度のmg/Lでして……ドイツ度に変換したくて自動変換Webアプリを（雑に）作りました。入力欄には数字を、例えば40mg...
業務効率化公開しているウェブサイトの本番ファイルを消してしまった……バックアップも取っていない時にまず確認すること
投稿のネタが切れ気味なので、昔役に立ったことは何だったろうかと思い返していたところ、まず思い当たったのがタイトルの通り「Web開発をしている時に本番ファイルを上書きや消去で壊してしまった……しかもバックアップ取ってない……場合に普及させる（...
JavaScriptハマっているこの部分だけお願いしたい……ちょっと見てもらいたい方へのサービスを開始しました
この度、JavaScript, HTML, CSS, SEO（コンテンツ構成案やライティング、キーワード分析、リーチ数検証など）のみとさせていただきますが、以前からちょこちょこ「この部分だけ助けてもらうことってできますか？」とか「これであっ...
JavaScriptソースコード内における「?（はてなマーク）」の意味と使い方【JavaScript】
以前、『JavaScriptにおける「$（ドルマーク）」の意味と使い方』で、ドルマークの利用シーンについてまとめましたが、本ページでは「?」はてなマーク（クエスチョンマーク）についてJavaScript内でどのように使われるのかシーン別でま...
JavaScriptDOM（要素）の変更や更新を検知するベストな方法〜MutationObserver APIの使い方【JavaScriptガイド】
最近、仕事でDOMが変更されたときにコードを発火したい場面が多く、クリック時やajaxで内容の更新などのタイミングでその都度似たようなメソッドを仕込むのが面倒になることがありました。特に大量のiframeを扱う必要があったので、1ヶ所１ヶ所...
JavaScript2024年最新版 ああ、やっぱり。文字コードの世界シェアランキング
ふとShift JISって結構対応しているけど、需要あるのか疑問に感じたのでWebサイトの文字コードの世界シェアについて調べてみました。きっかけはVSCodeでSJISファイルの編集をする機会がちょこちょこあって、文字化けが面倒で、なんかも...
JavaScriptインターバルタイマー Webブラウザ版【PC/スマホ/タブレット対応・3つ利用可・無料】
無料Webブラウザ版インターバルタイマーです。クイック起動ボタンがあり、素早く起動できます。設定の保存も可能です。全画面表示対応なので特にiPadでの利用がおすすめです。
JavaScripthtml2canvasをスマートフォン（iPhone iOS Safari, Android Chromeのレスポンシブページ）に対応させる方法【JavaScript】
先日、『【PNG画像出力&エクセル出力対応】チーム分けWebツール・重複なしで均等に【グループ分けや組み分けを行うランダム生成オススメWebアプリ】』と『【簡易画像キャプチャ機能付き】テキストを比較して差分を表示するdiffツール【Java...
JavaScript【簡易画像キャプチャ機能付き】テキストを比較して差分を表示するdiffツール【JavaScriptでWebツール】
#text-container { display: flex; justify-content: space-between; } #text-container span { background-color: #ccc; } .inp...
業務効率化【色変更・プレビュー機能付き】SVGタグをBase64変換してCSSのbackground-imageプロパティ用に変換するツール【Photoshop,Illustrator】
SVGタグを入力: 変換 CSS background-image: SVGプレビュー: 色を選択: ※fill値が無いなど色変更できない場合もあります※色を選択するとbackground-imageプロパティのコードも変わります #con...
業務効率化チーム分けWebツール～グループ分けや組み分けをランダム生成！
もちろん無料のチーム分けツールです！Webで完結します。使いやすさを追求した便利機能付き！人数カウンターやグループハイライトなど
業務効率化【優柔不断専用】2択、3択…… 瞬時に決めるWebツール【選べない時、決められない時にご利用ください】
2択、3択～お好みに応じて数を指定出来る運命選択ツール。さあ、数字を心に思い浮かべて……念じた数字が出るかは運次第！優柔不断専用です。