こんきつね🦊の技術ばなし

📰 投稿記事一覧（111 件）

このページでは、当ブログで公開しているすべての記事を一覧で確認できます。 Webクライアント開発、データ保存技術、ブラウザ内部の仕組み、UI部品の作成など、カテゴリーを横断して学べるように構成しています。興味のある技術やテーマを探したい場合は、この投稿記事一覧をご活用ください。

【開発環境について】Android端末でのルート認証局（CA）の証明書設定（2026-09-13）
Google Pixel 6a（Android 17）にmkcertで作成したルート認証局（CA）の証明書を登録し、プライベートネットワーク内のHTTPSテスト環境へChromeから警告なしでアクセスする手順を解説します。

【開発環境について】外部アクセス対応のHTTPSテスト環境の構築（2026-09-11）
モバイル端末など、プライベートネットワーク内の外部端末から、HTTPSテスト環境へアクセスできる環境を実際に構築する手順について解説しています。

【開発環境について】外部からのHTTPSテスト環境アクセスについて（2026-09-08）
モバイル端末など、プライベートネットワーク内の外部端末から、HTTPSテスト環境へアクセスする方法について説明しています。

【はじめに】サイトの大規模リニューアルについて（2026-09-06）
iphone（iOS 26）の縦横変化で、Web 頁に固定化しているメニューバーが半分ほどスクロールしてしまう問題を確認しました。その現象と調査結果について説明します。

【はじめに】iPhone（iOS 26）の縦横回転で画面がずれる問題について（2026-08-29）
iphone（iOS 26）の縦横変化で、Web 頁に固定化しているメニューバーが半分ほどスクロールしてしまう問題を確認しました。その現象と調査結果について説明します。

【はじめに】iPhone（iOS 26）で画面がずれる問題について（2026-08-27）
iOS 26 の iPhone で、Web 頁内の入力欄にフォーカスすると、固定しているメニューバーがスクロールしてしまう問題を確認しました。原因調査のため記事投稿を一時停止していた件も含め、現象と調査結果について説明します。

【外部ライブラリ】Zip ファイルを読み書きするライブラリ(JSZip) （2026-08-15）
Zip ファイルの読み書きを行う代表的なライブラリである JSZip ライブラリについて、その基本的な使い方を解説しています。

【外部ライブラリ】複数のファイルをまとめるアーカイブ形式(Zip)② （2026-08-09）
Web上でのファイルのやりとりに使われる Zip ファイルの内部構造について、図を交えわかりやすく解説しています。

【外部ライブラリ】複数のファイルをまとめるアーカイブ形式(Zip)① （2026-08-09）
Web上でのファイルのやりとりに使われる Zip ファイルの内部構造について、図を交えわかりやすく解説しています。

【データ保存技術】OPFS の深堀（MIMEタイプ）（2026-08-04）
OPFS の同期操作を行う際に、明示的に意識する必要のある、MIME タイプについて説明しています。また、OPFS 上のファイルの MIME タイプがいつどこで設定されるのかについても深堀しています。

【データ保存技術】OPFS の動作確認（同期操作）（2026-08-02）
実際に OPFS に同期操作を行うサンプルプログラムを作成し、動かしてみることで、オブジェクトや API の動きなどを確認しています。

【データ保存技術】OPFS の動作確認（非同期操作）（2026-07-27）
実際に OPFS に非同期操作を行うサンプルプログラムを作成し、動かしてみることで、オブジェクトや API の動きなどを確認しています。

【モダンJavaScript入門】Web Worker の動作確認② （2026-07-24）
「Web Worker の動作確認①」で作成したサンプルプログラムを Web Worker 化する方法について解説しています。また、実際に Web Worker 化して動作させた上で、その効果についてもまとめています。

【モダンJavaScript入門】Web Worker の動作確認① （2026-07-24）
通常のスクリプトと Web Worker のコードの違いを比較するためのサンプルプログラムを作成し、その使い方について解説しています。

【モダンJavaScript入門】Web Worker の深堀（2026-07-20）
通常のスクリプトとは異なる Web Worker で、外部スクリプトを使用する方法について、コードを明示して解説しています。

【モダンJavaScript入門】Web Worker の使い方⑤ （2026-07-14）
Web Worker とメインスレッドとのメッセージの受け渡し方法の１つである、ブラウザが実体を管理するオブジェクトを使用したデータの受け渡しについて解説しています。

【モダンJavaScript入門】Web Worker の使い方④ （2026-07-14）
共有メモリ領域（ SharedArrayBuffer ）での競合を避ける技術　Atomics API について、具体的に解説しています。

【モダンJavaScript入門】Web Worker の使い方③ （2026-07-14）
Web Worker とメインスレッドとのメッセージの受け渡し方法の１つである、共有メモリ領域（ SharedArrayBuffer ）を使用したデータの受け渡しについて解説しています。

【モダンJavaScript入門】Web Worker の使い方② （2026-07-14）
Web Worker とメインスレッドとのメッセージの受け渡し方法の１つである、転送（データ領域の所有権を受け渡す）という仕組みについて解説しています。

【モダンJavaScript入門】Web Worker の使い方① （2026-07-14）
Web Worker による平行処理とメインスレッドとの基本的なメッセージ送受信機能について、コードを交えて解説しています。

【モダンJavaScript入門】Web Worker の基本（2026-07-13）
同期処理や重たい処理を回避するための非同期処理 API である Web Worker について、具体例をあげて概説しています。

【モダンJavaScript入門】JavaScriptで扱えるデータ型まとめ③ （2026-06-28）
ES6 以降で追加された Map / Set などのキー・コレクションも含め、JavaScript で使用できるデータ型をまとめて解説しています。

【モダンJavaScript入門】JavaScriptで扱えるデータ型まとめ② （2026-06-28）
ES6 以降で追加された Map / Set などのキー・コレクションも含め、JavaScript で使用できるデータ型をまとめて解説しています。

【モダンJavaScript入門】JavaScriptで扱えるデータ型まとめ① （2026-06-28）
ES6 以降で追加された Map / Set などのキー・コレクションも含め、JavaScript で使用できるデータ型をまとめて解説しています。

【データ保存技術】OPFS のファイル操作③ （2026-06-25）
OPFS への同期アクセスを行う時に使用するオブジェクトや API について、コードを示しながら、わかりやすく解説します。

【データ保存技術】OPFS のファイル操作② （2026-06-25）
OPFS への非同期アクセスを行う時に使用するオブジェクトや API について、コードを示しながら、わかりやすく解説します。

【データ保存技術】OPFS のファイル操作① （2026-06-25）
OPFS へのファイル操作を行う FileSystemFileHandle オブジェクトについて、コードを示しながら、わかりやすく解説します。

【データ保存技術】OPFS のディレクトリ操作（2026-06-22）
OPFS のディレクトリ操作について、 File System Access API を使ったコードを示しながら、わかりやすく解説します。

【データ保存技術】OPFS の API 概説（2026-06-21）
OPFS にアクセスするための File System Access API のオブジェクト構成について、図を交えて解説しています。

【データ保存技術】OPFSとは② （2026-06-21）
OPFS におけるよくある勘違いや、OPFS 使用上の注意すべきセキュリティ絡みについて、わかりやすく解説しています。

【データ保存技術】OPFSとは① （2026-06-21）
OPFS とは何かからはじまり、その基本的な使い方をわかりやすく解説しています。

【外部ライブラリ】idb ライブラリの動作確認② （2026-06-20）
「idb ライブラリの動作確認①」で idb ライブラリに対応したサンプルプログラムの全コード（ HTML, CSS, JavaScript ）を公開しています。

【外部ライブラリ】idb ライブラリの動作確認① （2026-06-20）
「拡張tableタグの作成③」で作成した IndexedDB アクセスサンプルプログラムの idb ライブラリへの変更方法や、実際に変更した後の動作確認について解説しています。

【はじめに】パソコンを取り巻く環境について（2026-06-19）
長らく開発環境として使用してきたWindowsに加え、新たにChromeOSを加える理由について述べています。

【サイト構築について】実践 Eleventy v3 対応（2026-06-18）
Eleventy で実際に作成中のブログサイトをバージョンアップ（ v2 → v3 ）し、その変更点をコードを明示して、まとめています。

【サイト構築について】Eleventy v3 への対応（2026-06-17）
Eleventy ツールのバージョンアップ（v3）に伴い、その対応方法について解説しています。

【外部ライブラリ】idb ライブラリの深堀（2026-06-16）
idb ライブラリの応用的な使い方について、コードを交えて解説しています。

【データ保存技術】IndexedDBの深堀（2026-06-15）
既に作成済みの IndexedDB にデータストアや Index を追加する方法について、コード例を示しながら具体的に解説しています。

【外部ライブラリ】IndexedDB を “モダンに” 使う（idb ライブラリ）（2026-06-13）
IndexedDB を “モダンに” 使える、idb ライブラリの基本について解説しています。

【モダンJavaScript入門】クラス構文（class）のモダンな使い方② （2026-06-12）
本物のクラスらしい機能が揃ったクラス構文（ `class` ）について、その使い方をわかりやすく解説しています。

【モダンJavaScript入門】クラス構文（class）のモダンな使い方① （2026-06-12）
本物のクラスらしい機能が揃ったクラス構文（ `class` ）について、その使い方をわかりやすく解説しています。

【モダンJavaScript入門】fetch API（XHR からの進化）（2026-06-12）
「Web API と通信するための標準手段」として、従来の XMLHttpRequest（XHR）にかわり追加された fetch API の使い方をわかりやすく解説しています。

【モダンJavaScript入門】非同期処理のモダンな書き方（2026-06-09）
非同期処理の基本である `Promise` と、現代的な書き方である `async` / `await` を、実例を交えながら丁寧に解説しています。

【モダンJavaScript入門】モジュール間のデータ共有の方法（2026-06-09）
独立したスコープをもつようになった ES Modules と通常のスクリプト間でのデータ共有方法について、具体例をあげて解説しています。

【モダンJavaScript入門】importとexportの基本（2026-06-08）
ES6（2015）で導入された ES Modules を使用するための import / export の使い方について、コードを明示して解説しています。

【モダンJavaScript入門】モジュールスクリプトの基本（2026-06-08）
ES6（ECMAScript 2015）で追加された新たにモジュールという概念について、通常のスクリプトと何が違うのかについてわかりやすく説明しています。

【はじめに】カテゴリー新設に思うところ（2026-06-07）
新たに、「モダンJavaScript入門」カテゴリーを新設したいきさつについて述べています。

【モダンJavaScript入門】JavaScriptの進化と“モダン”の意味（2026-06-07）
2015 年に登場した ES6（ECMAScript 2015）以降、 JavaScript に発生しきた大きな変化について、概説しています。

【ブラウザ拡張機能】popup画面の実装（2026-06-02）
実際にポップアップを持つテスト用の拡張機能を作成してブラウザに登録し、動作確認を行っています。また、ブラウザへの登録方法についても具体的に解説しています。

【ブラウザ拡張機能】popup.htmlとpopup.jsとは② （2026-06-01）
拡張機能のアイコンをクリックした時に表示されるポップアップの作り方について、コードを明示して解説しています。

【ブラウザ拡張機能】popup.htmlとpopup.jsとは① （2026-06-01）
拡張機能のアイコンをクリックした時に表示されるポップアップの作り方について、コードを明示して解説しています。

【ブラウザ拡張機能】manifest.jsonについて③ （2026-05-31）
ブラウザ拡張機能の構成定義ファイルである manifest.json V3 の定義例をもとに、その内容について解説しています。

【ブラウザ拡張機能】manifest.jsonについて② （2026-05-31）
ブラウザ拡張機能の構成定義ファイルである manifest.json V3 の定義例をもとに、その内容について解説しています。

【ブラウザ拡張機能】manifest.jsonについて① （2026-05-31）
ブラウザ拡張機能の構成定義ファイルである manifest.json V3 の定義例をもとに、その内容について解説しています。

【ブラウザ拡張機能】ブラウザ拡張機能とは（2026-05-28）
「いつものブラウザ」を、自分専用ツールに変える技術としてのブラウザ拡張機能について解説しています。

【ファイル連携について】なぜ「001」が「1」になるのか（2026-05-26）
EXCEL や CSV パーサーを使用した際に、よく問題になるデータの自動変換について解説しています。

【ファイル連携について】NULLと空白の違い（2026-05-26）
データクリーニング初心者が最初にハマりやすい、NULLと空白の違いについて、具体例を明示して解説しています。

【ファイル連携について】変換ルール表の作成（2026-05-25）
データクリーニングを効率化する実務テクニックとして、「変換ルール表（対応表）」を作成する方法について、具体的に解説しています。

【UI部品の作成】拡張tableタグの作成③ （2026-05-22）
作成した拡張table形式の Web Componetnts の全 HTML, CSS, JavaScript のコードを掲載しています。

【UI部品の作成】拡張tableタグの作成② （2026-05-22）
拡張table形式の Web Componetnts の具体的な作り方をコードを明示して、解説しています。

【UI部品の作成】拡張tableタグの作成① （2026-05-21）
テストツールやマスターメンテナス等で使えるような拡張table形式の Web Componetnts を実際に作成しています。サイト内で実際に動かして動作の確認が行えます。

【UI部品の作成】Web Componentsのslotについて（2026-05-20）
Web Components の一部を利用者が書き換え可能にできる slot 機能の実装の仕方についてコードを明示して解説しています。

【UI部品の作成】Web Componentsの属性について（2026-05-20）
Web Components の属性機能の実装の仕方について、コードを明示して解説しています。

【UI部品の作成】Web Componentsの作成方法（2026-05-20）
Web Components の実用的な作り方について、サンプルコードを使い具体的に解説しています。

【UI部品の作成】Web Componentsについて（2026-05-20）
再利用可能なオリジナルHTMLタグを自分で作れる仕組みである Web Components について解説しています。

【サイト構築について】タグ機能追加の実践（2026-05-15）
Eleventy を使用して作成中のテスト用のブログサイトに、タブ機能を追加しています。作業工程を詳しく解説しているので、以降の回を含め、ブログサイト作成の追体験が可能です。

【サイト構築について】タグ機能について④ （2026-05-15）
Eleventy の複数ページを自動生成する機能（Pagination）についてコードを交えて解説しています。

【サイト構築について】タグ機能について③ （2026-05-15）
Eleventy を使用してタグ機能を利用する際、障害となり得る日本語の問題とその解決方法について、具体的に解説しています。

【サイト構築について】タグ機能について② （2026-05-15）
Eleventy でのタグ機能の使い方について、タグ一覧の表示方法について、コードを交えながら解説しています。。

【サイト構築について】タグ機能について① （2026-05-15）
Eleventy におけるタグ機能とは何かについて解説しています。

【開発環境について】HTTPSテスト環境の構築（2026-05-13）
ローカル専用の証明書を作成している mkcert と Express サーバーで、実際に HTTPS テスト環境を構築する手順について解説しています。

【開発環境について】HTTPSテスト環境について（2026-05-13）
Webクライアント開発になぜ、HTTP 環境が必要であるかからはじまり、ローカル専用の証明書を作成している mkcert の使い方から、Node.js 下の Express サーバーを使った実際の構築方法について解説しています。

【データ保存技術】IndexedDBの動作確認③ （2026-05-11）
IndexedDB に保存されたデータを検索するサンプルプログラムを実際に作成し、動かしてみることで、API の動きなどを確認しています。

【データ保存技術】IndexedDBの動作確認② （2026-05-07）
cursor 関数を利用して IndexedDB にアクセスするサンプルプログラムを実際に作成し、動かしてみることで、API の動きなどを確認しています。

【データ保存技術】IndexedDBの動作確認① （2026-05-07）
getAll 関数を利用して IndexedDB にアクセスするサンプルプログラムを実際に作成し、動かしてみることで、API の動きなどを確認しています。

【データ保存技術】IndexedDBのAPI③ （2026-05-05）
IndexedDB を使用するにあたり、必ず知るべき API について、そのオブジェクト構成から具体的な使い方を交え、解説しています。

【データ保存技術】IndexedDBのAPI② （2026-05-05）
IndexedDB を使用するにあたり、必ず知るべき API について、そのオブジェクト構成から具体的な使い方を交え、解説しています。

【データ保存技術】IndexedDBのAPI① （2026-05-05）
IndexedDB を使用するにあたり、必ず知るべき API について、そのオブジェクト構成から具体的な使い方を交え、解説しています。

【データ保存技術】IndexedDBとは（2026-05-04）
IndexedDB とは何かからはじまり、その基本的な使い方をわかりやすく解説しています。

【ファイル連携について】Excelで行うデータスクリーニング（2026-05-01）
表計算ソフト EXCEL を使ったデータスクリーニング方法を実際に ExceL ファイルを使って解説しています。

【ファイル連携について】データスクリーニングの作業（2026-04-30）
ファイル連携を行う際の事前データスクリーニング方法について手順を追って解説しています。

【データ保存技術】SessionStorageの動作確認（2026-04-28）
SessionStorage を使ったサンプルプログラムを実際に作成し、動かしてみることで、API の動きなどを確認しています。

【データ保存技術】SessionStorageとは（2026-04-28）
SessionStorage とは何かからはじまり、その基本的な使い方をわかりやすく解説しています。

【サイト構築について】ブログサイト構築の実践③ （2026-04-27）
実際に Eleventy を使用して、テスト用のブログサイトを構築しています。作業工程を詳しく解説しているので、以降の回を含め、ブログサイト作成の追体験が可能です。

【サイト構築について】ブログサイト構築の実践② （2026-04-27）
実際に Eleventy を使用して、テスト用のブログサイトを構築しています。作業工程を詳しく解説しているので、以降の回を含め、ブログサイト作成の追体験が可能です。

【サイト構築について】ブログサイト構築の実践① （2026-04-27）
実際に Eleventy を使用して、テスト用のブログサイトを構築しています。作業工程を詳しく解説しているので、以降の回を含め、ブログサイト作成の追体験が可能です。

【サイト構築について】EleventyでのNunjucks （2026-04-23）
Eleventy で作成する記事では、Nunjucks 記法も併用可能です。ここでは、 Nunjucks 記法の具体的な書き方について、実例を交えて解説しています。

【サイト構築について】EleventyでのMarkdown （2026-04-23）
Eleventy で作成する記事の Markdown 記法での書き方について、実例を交えて解説しています。

【サイト構築について】Markdownの深堀（2026-04-23）
Eleventy での記事作成時に使用する Markdown 記法について、その基本的な書き方を具体的に解説しています。

【重要事項】運営者情報（2026-04-20）
運営者の経歴やサイト内容について、記述しています。

【データ保存技術】LocalStorageの深堀（2026-04-19）
LocalStorage の実務使用にあたり、注意すべき点などを解説しています。

【開発環境について】Node.js環境の作成（2026-04-18）
Node.js とは何かから始まり、その管理ツールである Volta を用いた Node.js 環境の構築方法を実際のコマンドを示しながら解説しています。

【ファイル連携について】データスクリーニングの必要性（2026-04-18）
ファイル連携を行う際に事前にデータスクリーニングを行うことの必要性について解説しています。

【サイト構築について】Eleventyについて（2026-04-17）
静的サイト構築ツール Eleventy の概要からインストール方法、基本的な使い方まで図を交えて解説しています。

【データ保存技術】LocalStorageの動作確認（2026-04-16）
LocalStorage を使ったサンプルプログラムを実際に作成し、動かしてみることで、API の動きなどを確認しています。

【ファイル連携について】ファイル形式に関する誤解（2026-04-15）
ファイル連携を行う際のトラブルの原因となるファイル形式に関する誤解について、図を使いわかりやすく解説しています。

【はじめに】当面の目標について（2026-04-13）
今後のブログサイトの当面の方向性について述べています。

【データ保存技術】LocalStorageとは（2026-04-11）
LocalStrorage とは何かからはじまり、その基本的な使い方をわかりやすく解説しています。

【サイト構築について】サイト公開の仕組み（2026-04-09）
作成したサイトを無料＆簡単に公開できる Cloudflare Pages＋GitHub について解説しています。

【サイト構築について】利用技術（2026-04-09）
本サイト構築にあたり利用した「静的サイトジェネレーター」、Eleventy について紹介しています。

【開発環境について】AIとの向き合い方（2026-04-09）
現在の開発では、抜きにして語れなくなったAIについて、当ブログサイト構築にあたり筆者がどのように向き合っているかについてまとめています。

【重要事項】利用規約（2026-04-08）
当サイトをご利用いただくにあたり、順守いただく規約についてまとめています。

【重要事項】著作権について（2026-04-08）
当サイトに掲載されている文章・画像・コードなどのコンテンツの著作権について記しています。

【重要事項】プライバシーポリシー（2026-04-08）
当サイト利用での、個人情報の取扱いについて説明しています。

【データ保存技術】主なデータ保存技術（2026-04-07）
WEBブラウザで利用できるデータの保存技術を整理し、その特徴、容量の目安、主な用途などを整理して解説しています。

【開発環境について】開発用コンピュータ（2026-04-06）
現在、筆者が使用している開発用のパソコンのスペックを中心に、Webクライアントアプリの開発は、以外と古いものでも、実用に耐えうることを説明しています。

【開発環境について】選定した利用技術の深堀（2026-04-06）
Webクライアントアプリの開発で必要なツールについて、それらのツールを何に使うのかについてまとめています。

【開発環境について】利用技術の選定（2026-04-06）
Webクライアントアプリを開発するにあたり、環境作成含め、筆者が選んだ技術について、その選定理由含めまとめています。

【重要事項】免責事項（2026-04-05）
当サイトに掲載されているプログラム、コードスニペット、技術情報に関する免責事項について記しています。

【はじめに】ブログ制作動機（2026-04-04）
ブログ政策の動機やきっかけとなった出来事、Webクライアント技術との出会いについて述べています。

【はじめに】はじめての投稿（2026-04-04）
ブログ作成の意図や、筆者の技術者としての経歴について、簡単に説明しています。