<?xml version="1.0" encoding="UTF-8" ?>
<rss version="2.0">
  <channel>
    <title>こんきつね🦊の技術ばなし</title>
    <link>https://blog.konkitsune.com/</link>
    <description>狐の足跡をたどるように、開発の記録を綴るブログ。</description>
    
      <item>
        <title>OPFS の動作確認（非同期操作）</title>
        <link>https://blog.konkitsune.com/posts/opfs-no-dousa-kakunin-hidouki-sousa/</link>
        <pubDate>Mon, 27 Jul 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[はじめに ここでは、実際に OPFS への非同期操作を行うサンプルプログラムを作成し、その動作の確認を行っていきたいと思います。 今回作成するサンプルプログラムは、機能限定の簡易な OPFS のファイラーを想定しています。 それでは、作成するサンプルプログラムの概要から順番に説明していきたいと思います。 サンプルプログラムの概要 OPFS 上のファイルを一覧表示する。（ただし、現状はディレクトリの]]></description>
      </item>
      <item>
        <title>Web Worker の動作確認②</title>
        <link>https://blog.konkitsune.com/posts/webworker-no-dousa-kakunin-2/</link>
        <pubDate>Fri, 24 Jul 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[前回からのつづき 前回、JSZip ライブラリを使用したサンプルプログラムをみていただきました。 今回は、このサンプルプログラムを Web Worker 化することにより、コードがどの様に変化するか、また、「キャンセル」処理のタイムラグが解消されるのかなどを中心にみていきたいと思います。 Web Worker 化の変更概要 変更は、HTML と JavaScript のみとし、現在のメインスレッド]]></description>
      </item>
      <item>
        <title>Web Worker の動作確認①</title>
        <link>https://blog.konkitsune.com/posts/webworker-no-dousa-kakunin-1/</link>
        <pubDate>Fri, 24 Jul 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[はじめに 前回まで、Web Worker の使い方について説明してきました。 今回は、実際に、 Web Worker を使ったプログラムを作成し、動作確認を行っていきたいと思います。 まずは、サンプルプログラムとして、Web Worker を使用しないプログラムを用意し、そのコードをベースに、Web Worker 化しながらすすめていきたいと思います。 題材としては、指定されたディレクトリをまるご]]></description>
      </item>
      <item>
        <title>Web Worker の深堀</title>
        <link>https://blog.konkitsune.com/posts/webworker-no-fukabori/</link>
        <pubDate>Mon, 20 Jul 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[はじめに 前回まで、5回にわたり Web Worker の使い方について、説明を行ってきました。 その中で、Web Worker が「重たい処理や同期的な API 」を担うことで、UI への影響を防ぐことができるものであるということも説明してきました。 「重たい処理や同期的な API 」といった時に、昨今、それらの処理を一から作るというよりは、圧倒的に外部ライブラリを利用することが多いと思います。]]></description>
      </item>
      <item>
        <title>Web Worker の使い方⑤</title>
        <link>https://blog.konkitsune.com/posts/webworker-no-tsukaikata-5/</link>
        <pubDate>Tue, 14 Jul 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[前回からのつづき これまで、メインスレッドと Web Worker との postMessage() による、 コピーされるデータ（構造化複製） 転送されるデータ（Transferable Objects） 共有メモリ（SharedArrayBuffer）と同期（Atomics） という 3 種類のデータの取り扱いについて見てきました。 しかし、実はこれらのデータの取り扱いとはまったく異なる第4の]]></description>
      </item>
      <item>
        <title>Web Worker の使い方④</title>
        <link>https://blog.konkitsune.com/posts/webworker-no-tsukaikata-4/</link>
        <pubDate>Tue, 14 Jul 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[前回からのつづき 前回、共有メモリを使用したデータの受け渡しを中心に説明してきました。 共有メモリを使用したアクセスでは、同時アクセスが可能である為、メインスレッドと Web Worker との間で競合が発生する可能性があり、それを防止する仕組みとして Atomics API が用意されている説明をしました。 今回は、 Atomics API について、もう少し具体的に説明を行っていきたいと思いま]]></description>
      </item>
      <item>
        <title>Web Worker の使い方③</title>
        <link>https://blog.konkitsune.com/posts/webworker-no-tsukaikata-3/</link>
        <pubDate>Tue, 14 Jul 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[前回からのつづき 前回、メインスレッドと Web Worker とのデータの受け渡し方法として、転送による受け渡しについて説明してきました。 転送での受け渡しでは、メインスレッドと Web Worker との間で共通のメモリを所有権を受け渡すことにより、排他的にアクセスできることを説明してきました。 今回は、第3の受け渡しである、共有メモリを使用したデータの受け渡しを中心に説明していきます。 共有]]></description>
      </item>
      <item>
        <title>Web Worker の使い方②</title>
        <link>https://blog.konkitsune.com/posts/webworker-no-tsukaikata-2/</link>
        <pubDate>Tue, 14 Jul 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[前回からのつづき 前回、Web Worker のライフサイクルの話に始まり、使い方として、起動/停止方法から、メインスレッドと Web Worker 間のデータの受け渡し方法について説明してきました。 データの受け渡し方法は、基本的にコピーになる旨の説明を行ってきましたが、ある種のデータに関しては、コピーではなく、データそのものを受け渡す転送という方法をとることが可能です。 今回は、その方法を中心]]></description>
      </item>
      <item>
        <title>Web Worker の使い方①</title>
        <link>https://blog.konkitsune.com/posts/webworker-no-tsukaikata-1/</link>
        <pubDate>Tue, 14 Jul 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[はじめに 前回、Web Worker の基本的な事項について、説明してきました。 今回から、Web Worker の使い方について、数回にわたり説明していきたいと思います。 まずは、Web Worker が、起動後、どのようなサイクルで動作しているのかを簡単に説明します。 Web Worker のライフサイクル 一般的なバックグラウンドスレッドの Web Worker は、大きく分けて、 生成 │]]></description>
      </item>
      <item>
        <title>Web Worker の基本</title>
        <link>https://blog.konkitsune.com/posts/webworker-no-kihon/</link>
        <pubDate>Mon, 13 Jul 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[はじめに 過去記事「モダンJavaScript入門/非同期処理のモダンな書き方」でも、記述したように、Webブラウザ上のJavaScriptコードは、「単一スレッド」によるイベントループで動作しています。 その為、1度に１つの処理しか実行できません。 同期処理や重たい処理を実行すると、ユーザーには、まるでフリーズもしくは、ハングアップしたかのように見えてしまいます。 理由は、画面の描画やユーザーの]]></description>
      </item>
      <item>
        <title>JavaScriptで扱えるデータ型まとめ③</title>
        <link>https://blog.konkitsune.com/posts/javascript-de-atsukaeru-data-type-matome-3/</link>
        <pubDate>Sun, 28 Jun 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[前回からのつづき 前回、オブジェクト型の基本である Object オブジェクトに始まり、非同期処理で使用する Promise オブジェクトについて説明してきました。今回は、引き続き、オブジェクト型のバイナリデータから説明していきたいと思います。 🧊 バイナリデータ（Binary Data） JavaScript でバイナリデータを扱うときに登場するのが ArrayBuffer / TypedAr]]></description>
      </item>
      <item>
        <title>JavaScriptで扱えるデータ型まとめ②</title>
        <link>https://blog.konkitsune.com/posts/javascript-de-atsukaeru-data-type-matome-2/</link>
        <pubDate>Sun, 28 Jun 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[前回からのつづき 前回、データ型の中で、プリミティブ型を中心に説明してきました。今回は、そのつづきとして、オブジェクト型について説明していきたいと思います。 🧊 オブジェクト型 プリミティブ以外はすべてオブジェクトです。オブジェクトは 参照渡しであり、変更可能（mutable）です。 Object オブジェクトの最も基本的なデータ構造です。 const user = { name: "Kitsu]]></description>
      </item>
      <item>
        <title>JavaScriptで扱えるデータ型まとめ①</title>
        <link>https://blog.konkitsune.com/posts/javascript-de-atsukaeru-data-type-matome-1/</link>
        <pubDate>Sun, 28 Jun 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[🧊 JavaScript のデータ型を体系的に理解する モダンな Javascript の記述には、Javascript で扱えるデータ型に対する理解が重要です。 JavaScript のデータ型というと、 Number String Boolean などを思い浮かべる方が多いと思います。 しかし実際の Web 開発では、それ以外にも様々なデータ型が利用されています。 データ型には大きく分けて ]]></description>
      </item>
      <item>
        <title>OPFS のファイル操作③</title>
        <link>https://blog.konkitsune.com/posts/opfs-no-file-sousa-3/</link>
        <pubDate>Thu, 25 Jun 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[前回からのつづき 前回、 OPFS のファイル操作について、FileSystemWritableFileStream オブジェクトについて説明を行いました。今回は、その続きとして、FileSystemSyncAccessHandle オブジェクトから説明していきたいと思います。 FileSystemSyncAccessHandle オブジェクト FileSystemSyncAccessHandle]]></description>
      </item>
      <item>
        <title>OPFS のファイル操作②</title>
        <link>https://blog.konkitsune.com/posts/opfs-no-file-sousa-2/</link>
        <pubDate>Thu, 25 Jun 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[前回からのつづき 前回、 OPFS のファイル操作について、その起点となる FileSystemFileHandle オブジェクトと、読み込みを担当する File オブジェクトについて説明を行ってきました。今回は、その続きとして、FileSystemWritableFileStream オブジェクトを中心に説明していきたいと思います。 FileSystemWritableFileStream オブ]]></description>
      </item>
      <item>
        <title>OPFS のファイル操作①</title>
        <link>https://blog.konkitsune.com/posts/opfs-no-file-sousa-1/</link>
        <pubDate>Thu, 25 Jun 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[はじめに 前回は、OPFS のディレクトリ操作を担当する FileSystemDirectoryHandle オブジェクトについて解説しました。 今回は、実際にファイルを操作するための FileSystemFileHandle オブジェクトについて解説します。 ファイルへの読み込みや書き込みは、FileSystemFileHandle オブジェクトを起点として行います。 また、実際の読み書きには、]]></description>
      </item>
      <item>
        <title>OPFS のディレクトリ操作</title>
        <link>https://blog.konkitsune.com/posts/opfs-no-directory-sousa/</link>
        <pubDate>Mon, 22 Jun 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[はじめに 前回、 OPFS の API として、 File System Access API の概説を行ってきました。今回は、その中のディレクトリ操作に焦点を当てて、解説していきたいと思います。 OPFS のルートディレクトリ取得 OPFS のルートディレクトリの Handle は、StorageManager オブジェクトの getDirectory() メソッドを呼び出すことで取得できます。]]></description>
      </item>
      <item>
        <title>OPFS の API 概説</title>
        <link>https://blog.konkitsune.com/posts/opfs-no-api-gaisetsu/</link>
        <pubDate>Sun, 21 Jun 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[はじめに OPFS は独自の仕組みのように見えますが、実際には File System Access API の考え方を利用しています。 File System Access API は、JavaScript からファイルやディレクトリを扱うための API 群です。 そのため、後ほど登場する FileSystemDirectoryHandle や FileSystemFileHandle といった]]></description>
      </item>
      <item>
        <title>OPFSとは②</title>
        <link>https://blog.konkitsune.com/posts/opfs-towa-2/</link>
        <pubDate>Sun, 21 Jun 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[前回からのつづき 前回、 OPFS について、IndexedDB との比較を交え、基本的な使い方まで説明を行ってきました。今回は、その続きとして、OPFS に対する誤解や、セキュリティについてまとめていきたいと思います。 よくある勘違い（ CORS との関係） CORS（Cross-Origin Resource Sharing）は、「この Web API は、どのサイトからのアクセスを許可するか]]></description>
      </item>
      <item>
        <title>OPFSとは①</title>
        <link>https://blog.konkitsune.com/posts/opfs-towa-1/</link>
        <pubDate>Sun, 21 Jun 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[はじめに ブラウザでデータを保存する方法として、LocalStorage や IndexedDB をご存じの方は多いと思います。 当カテゴリーでも、それらについて詳しく取り上げ、実際の動きを確認してきました。 特に IndexedDB は、JavaScript から利用できる高機能なデータベースとして広く利用されています。 キー検索やインデックス機能を備えており、構造化データを効率的に管理できるか]]></description>
      </item>
      <item>
        <title>idb ライブラリの動作確認②</title>
        <link>https://blog.konkitsune.com/posts/idb-library-no-dousa-kakunin-2/</link>
        <pubDate>Sat, 20 Jun 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[前回からのつづき 前回、IndexedDB の標準 API を使用したプログラムの idb ライブラリへの変更内容について説明しました。 以降では、実際に編集したプログラムの全コードを掲載します。 尚、今回の変更で実際に編集を行っているのは、下記の 2 つのファイルのみです。 index.html script.js 「拡張tableタグ」のJavaScript ※ 今回は、編集していません。 /]]></description>
      </item>
      <item>
        <title>idb ライブラリの動作確認①</title>
        <link>https://blog.konkitsune.com/posts/idb-library-no-dousa-kakunin-1/</link>
        <pubDate>Sat, 20 Jun 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[はじめに 前回まで、モダンな JavaScript の書き方と、その延長として idb ライブラリを利用した IndexedDB の使い方について説明してきました。 今回は、実際に、 idb ライブラリを使ったプログラムを作成し、動作確認を行っていきたいと思います。 できるだけ、IndexedDB の標準 API を利用した古いコードと、idb ライブラリを利用したモダンな JavaScript ]]></description>
      </item>
      <item>
        <title>パソコンを取り巻く環境について</title>
        <link>https://blog.konkitsune.com/posts/pc-wo-torimaku-kankyou-ni-tsuite/</link>
        <pubDate>Fri, 19 Jun 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[Windows 10 のサポートが、2025年10月14日に終了し、その延命である、拡張セキュリティ更新プログラム（ESU）が 2026年10月13日 2027年10月12日で完全終了します。 Windows を日常的に使用されている方（ほとんどの方があてはまると思いますが…）には、由々しき問題だと思います。 これを機会に、Windows 11 への移行を真剣に考えないといけなくなるからです。 パ]]></description>
      </item>
      <item>
        <title>実践 Eleventy v3 対応</title>
        <link>https://blog.konkitsune.com/posts/jissen-eleventy-v3-taiou/</link>
        <pubDate>Thu, 18 Jun 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[はじめに 今回は、前回の Eleventy v3 への変更点を踏まえ、実際に現在構築中のブログサイトの変更を行っていきたいと思います。 現状、タグ機能の追加までしか、完了していない為、それほど多くの修正が必要ないというのが、現実です。 対照となるのは、下記の 3 つの定義です。 Node.js 定義 Eleventy 定義 タグ読み替え定義 Node.js 定義の変更点 &quot;type&qu]]></description>
      </item>
      <item>
        <title>Eleventy v3 への対応</title>
        <link>https://blog.konkitsune.com/posts/eleventy-v3-heno-taiou/</link>
        <pubDate>Wed, 17 Jun 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[はじめに Eleventy は、日々メンテナンスされ、更新が行われています。v1に始まり、v2, v3とバージョンの更新が行われてきました。 Eleventy v3 では、従来の Node.js のモジュールシステム require（CommonJS）に加え、import / export（ESM）にも、対応するようになりました。 この記事では、Eleventy v3 への対応として、requir]]></description>
      </item>
      <item>
        <title>idb ライブラリの深堀</title>
        <link>https://blog.konkitsune.com/posts/idb-library-no-fukabori/</link>
        <pubDate>Tue, 16 Jun 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[はじめに 前回、IndexedDB をモダンに記述する為のライブラリとして、 idb の基本的な記述方法の説明を行いました。 今回は、その応用編として、 idb ライブラリで提供される下記の機能についての深堀を行いたいと思います。 wrap / unwrap トランザクション処理での注意点 非同期イテレーター IDBKeyRange の使い方 wrap / unwrap idb ライブラリの op]]></description>
      </item>
      <item>
        <title>IndexedDBの深堀</title>
        <link>https://blog.konkitsune.com/posts/indexeddb-no-fukabori/</link>
        <pubDate>Mon, 15 Jun 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[IndexedDB のバージョンアップと複数タブ問題 IndexedDB には、標準でバージョン管理機能が組み込まれています。 そのため、データベースの構造に変更を加える際には、「バージョンアップ」という特別な処理が発生します。 この記事では、標準 IndexedDB API を使ううえで必ず理解しておきたい バージョンアップとは何か バージョンアップで発生する問題 onblocked イベント ]]></description>
      </item>
      <item>
        <title>IndexedDB を “モダンに” 使う（idb ライブラリ）</title>
        <link>https://blog.konkitsune.com/posts/indexeddb-wo-modern-ni-tsukau-idb/</link>
        <pubDate>Sat, 13 Jun 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[はじめに IndexedDB は、ブラウザにデータを保存するための強力な仕組みです。IndexedDBの詳細については、過去記事「データ保存技術/IndexedDBとは」を参照してください。 IndexedDB は、非常に便利ではありますが、標準 API は、イベント駆動で扱いにくく、次のような問題があります。 トランザクションの寿命が短い 非同期処理が複雑（Promise ではなくイベント） カ]]></description>
      </item>
      <item>
        <title>クラス構文（class）のモダンな使い方②</title>
        <link>https://blog.konkitsune.com/posts/class-koubun-no-modern-na-tsukaikata-2/</link>
        <pubDate>Fri, 12 Jun 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[前回からのつづき 前回、class の基本的な定義の仕方について説明してきました。今回もその続きから説明していきたいと思います。 インスタンス生成 JavaScript のクラスは関数オブジェクトなので、そのまま利用することもできます。ただし、通常は static メソッドを使う場合に限られ、インスタンスを生成せずにクラスを直接使うケースは多くありません。 基本的には、クラスをもとに個別のオブジェ]]></description>
      </item>
      <item>
        <title>クラス構文（class）のモダンな使い方①</title>
        <link>https://blog.konkitsune.com/posts/class-koubun-no-modern-na-tsukaikata-1/</link>
        <pubDate>Fri, 12 Jun 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[はじめに JavaScript のクラス構文（ class ）は ES2015 で導入されましたが、その後も改良が続き、現在では private フィールド や static フィールド など、「本物のクラスらしい機能」が揃っています。 本章では、次のポイントを中心に、モダンなクラスの使い方 を整理します。 constructor（初期化処理） メソッド（プロトタイプに登録される） private]]></description>
      </item>
      <item>
        <title>fetch API（XHR からの進化）</title>
        <link>https://blog.konkitsune.com/posts/fetch-api-xhr-karano-shinka/</link>
        <pubDate>Fri, 12 Jun 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[はじめに fetch は「Web API と通信するための標準手段」です。 現代の Web アプリケーションは、サーバーやクラウド上の Web API と通信してデータを取得・送信する ことが前提になっています。 ユーザー情報を取得する 投稿一覧を読み込む ログイン処理を行う 商品データを検索する サーバーにデータを保存する こうした処理はすべて Web API へのアクセス です。 そして We]]></description>
      </item>
      <item>
        <title>非同期処理のモダンな書き方</title>
        <link>https://blog.konkitsune.com/posts/async-syori-no-modern-na-kakikata/</link>
        <pubDate>Tue, 09 Jun 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[はじめに JavaScript では、ネットワーク通信やファイル読み込みなど、時間のかかる処理を「非同期」で扱う必要があります。 もしこれらを同期的に実行してしまうと、UI が固まったり、アプリ全体が停止したように見えてしまいます。 この章では、非同期処理の基本である Promise と、現代的な書き方である async / await を、実例を交えながら丁寧に解説します。 非同期処理が必要な理]]></description>
      </item>
      <item>
        <title>モジュール間のデータ共有の方法</title>
        <link>https://blog.konkitsune.com/posts/module-kan-no-data-kyouyuu-no-houhou/</link>
        <pubDate>Tue, 09 Jun 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[はじめに ES Modules を使うと、JavaScript のコードはファイルごとに独立した “モジュールスコープ” を持つようになります。 これは安全で扱いやすい仕組みですが、同時に 「別ファイルの変数が見えない」 という新しい問題も生まれます。 この章では、モジュール間でデータを共有するための実践的な方法を、実際のコード例を交えながら解説します。 モジュールスコープとは何か スコープとは、]]></description>
      </item>
      <item>
        <title>importとexportの基本</title>
        <link>https://blog.konkitsune.com/posts/import-to-export-no-kihon/</link>
        <pubDate>Mon, 08 Jun 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[import / export の基本 ES6（2015）で導入された ES Modules は、JavaScript の “モダンな書き方” を支える中心的な仕組みです。 その中核となるのが import / export です。 ファイルを分割して整理したい 必要な機能だけを読み込みたい グローバル汚染を避けたい 再利用しやすいコードを書きたい こうした目的のために、ES Modules は生]]></description>
      </item>
      <item>
        <title>モジュールスクリプトの基本</title>
        <link>https://blog.konkitsune.com/posts/module-script-no-kihon/</link>
        <pubDate>Mon, 08 Jun 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[&lt;script type=&quot;module&quot;&gt; とは？ 一般的に、 HTML 上で、 JavaScript のコードを記述する際は、 &lt;script&gt; タグを利用すると思います。 コードが長く複雑になると、別ファイルとして指定することが可能です。 ES6（ECMAScript 2015）は、 この方法に加え、新たにモジュール（ &lt;script typ]]></description>
      </item>
      <item>
        <title>カテゴリー新設に思うところ</title>
        <link>https://blog.konkitsune.com/posts/category-shinsetsu-ni-omou-tokoro/</link>
        <pubDate>Sun, 07 Jun 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[当初の目標に従い、ブログ記事の投稿に勤しんでおりますが、最近少し、カテゴリーが増えすぎてきているような気がしてきました。 というのも、各カテゴリー毎の進捗が、落ちてきているからです。 原因は、はっきりしているのです。 私個人の性格によるところが大きく、作業を進めるにつれ、あれもこれもと気になってしまうのです。 一度、気になると、その件を納得がいくまで、つきつめたくなってしまい、どんどん手を広げてい]]></description>
      </item>
      <item>
        <title>JavaScriptの進化と“モダン”の意味</title>
        <link>https://blog.konkitsune.com/posts/javascript-no-shinka-to-modern-no-imi/</link>
        <pubDate>Sun, 07 Jun 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[はじめに JavaScript は、1995 年に Netscape 社のエンジニアであるブレンダン・アイクさんによって開発されました。 1997 年に、 ECMAScript として標準化（ES1）され、現在の JavaScript へとつながっています。 この言語の存在がなければ、このサイトそのものが、成り立ちませんでした。 開発者の方、関係者の方には、この場をお借りして、深くお礼を申し上げた]]></description>
      </item>
      <item>
        <title>popup画面の動作確認</title>
        <link>https://blog.konkitsune.com/posts/popup-screen-no-dousa-kakunin/</link>
        <pubDate>Tue, 02 Jun 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[popup画面の実装 ここで、前回までの説明にあった「popup画面を実装したブラウザ拡張」を実際に作成して登録し、その動きを確認していきたいと思います。 必要なコードは、「ブラウザ拡張機能/popup.htmlとpopup.jsとは②」の「実際によくある使い方」に記載したものを使用します。 記事に従い、実際にフォルダとファイルを作成していただくことが可能です。 尚、下記のボタン押下で、あらかじめ]]></description>
      </item>
      <item>
        <title>popup.htmlとpopup.jsとは②</title>
        <link>https://blog.konkitsune.com/posts/popup-html-to-popup-js-towa-2/</link>
        <pubDate>Mon, 01 Jun 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[前回からの続き 前回から引き続き、 popup画面 の説明を行います。 実際によくある使い方 現在のURLを表示 popup.html &lt;!DOCTYPE html> &lt;html> &lt;head> &lt;meta charset="UTF-8"> &lt;/head> &lt;body> &lt;button id="showUrl"> URL取得 &lt;/button> &l]]></description>
      </item>
      <item>
        <title>popup.htmlとpopup.jsとは①</title>
        <link>https://blog.konkitsune.com/posts/popup-html-to-popup-js-towa-1/</link>
        <pubDate>Mon, 01 Jun 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[はじめに ブラウザ拡張を作り始めると、最初に目にするのが manifest.json です。 しかし、manifest.json だけでは画面は表示されません。 実際にユーザーが操作する画面を作るために、 popup.html popup.js が利用できます。 ブラウザのツールバーに表示されている拡張機能のアイコンをクリックすると、小さな画面が表示されることがあります。 例えば、 パスワード管理]]></description>
      </item>
      <item>
        <title>manifest.jsonについて③</title>
        <link>https://blog.konkitsune.com/posts/manifest-json-ni-tsuite-3/</link>
        <pubDate>Sun, 31 May 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[前回からの続き 前回から引き続き、 manifest.json の項目の説明を行います。 host_permissions とは？ 拡張機能が、アクセス可能なWebサイト範囲を定義します。 "host_permissions": [ "https://example.com/*" ] 上記の例では、&quot;https://example.com/*&quot;のサイトの場合のみ、拡張機能の対象]]></description>
      </item>
      <item>
        <title>manifest.jsonについて②</title>
        <link>https://blog.konkitsune.com/posts/manifest-json-ni-tsuite-2/</link>
        <pubDate>Sun, 31 May 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[前回からのつづき 前回から引き続き、 manifest.json の項目の説明を行います。 permissions とは？ 拡張機能で利用したい、 Chrome API権限 を定義します。 "permissions": [ "storage", "tabs", "activeTab" ] ブラウザ拡張は強力です。 例えば： タブ監視 ダウンロード 通知 ページ操作 などができます。 👉 そのため]]></description>
      </item>
      <item>
        <title>manifest.jsonについて①</title>
        <link>https://blog.konkitsune.com/posts/manifest-json-ni-tsuite-1/</link>
        <pubDate>Sun, 31 May 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[manifest.json とは？ ブラウザ拡張機能を作ると、最初に必ず作成するのが manifest.json です。 manifest.json は、単なる設定ファイルではありません。 ブラウザは、拡張機能を読み込む時、まず manifest.json を解析し、 この拡張機能は何か どんな機能を使うのか どのページで動くのか どのJavaScriptを実行するのか popup 画面や bac]]></description>
      </item>
      <item>
        <title>ブラウザ拡張機能とは</title>
        <link>https://blog.konkitsune.com/posts/browser-kakuchou-kinou-towa/</link>
        <pubDate>Thu, 28 May 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[ブラウザ拡張機能とは？ 「いつものブラウザ」を、自分専用ツールに変える技術です。 Webサイトを見ていて、 この操作、毎回面倒だな… このページ、もっと見やすくしたい この情報だけ自動抽出したい と思ったことはありませんか？ 実は、ブラウザ拡張機能を使うと、普段使っているブラウザそのものを、自分専用ツールへ進化させることができます。 しかも、主に使う技術は： HTML CSS JavaScript]]></description>
      </item>
      <item>
        <title>なぜ「001」が「1」になるのか</title>
        <link>https://blog.konkitsune.com/posts/naze-001-ga-1-ni-naruka/</link>
        <pubDate>Tue, 26 May 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[Excelだけではない「CSVとパーサー問題」の正体 データ連携をしていると、 001 → 1 になったり、 2025-01-01 が勝手に日付になったり、 TRUE が真偽値扱いされたりします。 この問題、よく 「Excelが悪い」 と言われます。 ですが、実は本質はそこではありません。 根本原因は、 CSVが型情報を持たない ことにあります。そして、パーサー（読み込み側）が推測するしかないこと]]></description>
      </item>
      <item>
        <title>NULLと空白の違い</title>
        <link>https://blog.konkitsune.com/posts/null-to-space-no-chigai/</link>
        <pubDate>Tue, 26 May 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[NULLと空白の違いとは？ データクリーニング初心者が最初にハマるポイントです。 データクリーニングを始めると、初心者がかなり高い確率で混乱するのが、 NULL 空白 空文字 0 の違いです。 見た目では「何も入っていない」ように見えても、システム側ではまったく別物として扱われることがあります。 そしてこの違いを理解しないと、 集計がおかしい 検索できない XLOOKUPが一致しない CSV連携で]]></description>
      </item>
      <item>
        <title>変換ルール表の作成</title>
        <link>https://blog.konkitsune.com/posts/henkan-rule-table-no-sakusei/</link>
        <pubDate>Mon, 25 May 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[td { height: 1.5rem; } Excelで「変換ルール表」を作る方法 データクリーニングを効率化する実務テクニックとして、「変換ルール表（対応表）」を作成することは、重要です。 これにより、データクリーニングで、必ず遭遇する「表記ゆれ」の対応も万全です。 例えば、同じ会社名なのに、 顧客名 株式会社ABC (株)ABC ABC株式会社 abc ABC のように、複数の書き方が混在し]]></description>
      </item>
      <item>
        <title>拡張tableタグの作成③</title>
        <link>https://blog.konkitsune.com/posts/kakuchou-table-tag-no-sakusei-3/</link>
        <pubDate>Fri, 22 May 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[前回からのつづき 前回、Web Conponents 「拡張tableタグ」の作り方を説明しました。 以降では、実際に作成した「拡張tableタグ」のJavaScript、テストプログラムの HTML, CSS, JavaScript の全コードを掲載します。 「拡張tableタグ」のJavaScript // // テーブル拡張クラス用JavaScriptコード // class ExpandT]]></description>
      </item>
      <item>
        <title>拡張tableタグの作成②</title>
        <link>https://blog.konkitsune.com/posts/kakuchou-table-tag-no-sakusei-2/</link>
        <pubDate>Fri, 22 May 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[前回からのつづき 前回、新しく作成する Web Conponents 「拡張tableタグ」に盛り込みたい機能や、それを使ったテストプログラムの説明を行いました。 今回から、Web Components 「拡張tableタグ」の構築を実際に進めていきたいと思います。 Web Componentsとしての大枠の作成 まず、Web Components としての大枠部分を作成します。タグ名は、「kon]]></description>
      </item>
      <item>
        <title>拡張tableタグの作成①</title>
        <link>https://blog.konkitsune.com/posts/kakuchou-table-tag-no-sakusei-1/</link>
        <pubDate>Thu, 21 May 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[tableタグとは？ tableタグは、データを表形式に表示できるものです。 データの見通しがよく、ＷＥＢクライアントのＵＩ（ユーザーインターフェース）部品としても、非常に便利です。 例： 日付 項目 個数 2026/05/01 りんご 1 2026/05/02 ばなな 2 2026/05/03 みかん 3 合計 6 HTML &lt;table> &lt;thead> &lt;tr> &lt;t]]></description>
      </item>
      <item>
        <title>Web Componentsのslotについて</title>
        <link>https://blog.konkitsune.com/posts/web-components-no-slot-ni-tsuite/</link>
        <pubDate>Wed, 20 May 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[Web Componentsのslotとは？ slotは👇 👉 「コンポーネントの中身を外から差し込む」ものです。 基本：デフォルトslotの使い方 コンポーネント側 &lt;slot>&lt;/slot> 使用側 &lt;my-box> &lt;p>中身&lt;/p> &lt;/my-box> 👉 コンポーネント側に定義された &lt;slot&gt; の位置に、使用側の&lt;p&gt;]]></description>
      </item>
      <item>
        <title>Web Componentsの属性について</title>
        <link>https://blog.konkitsune.com/posts/web-components-no-zokusei-ni-tsuite/</link>
        <pubDate>Wed, 20 May 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[Web Componentsの属性（attributes）とは？ 属性は 👉 「外のHTMLからコンポーネントに値を渡す仕組み」です。 Web Components 内で HTML から渡された属性（attributes）を取得する。 コポーネント側 class UserName extends HTMLElement { connectedCallback() { const name = t]]></description>
      </item>
      <item>
        <title>Web Componentsの作成方法</title>
        <link>https://blog.konkitsune.com/posts/web-components-no-sakusei-houhou/</link>
        <pubDate>Wed, 20 May 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[Web Componentsの作り方 Web Componentsは次の3つの技術を組み合わせることで作れます。👇 Custom Elements → タグを作る Shadow DOM → 見た目を守る HTML Templates → 中身を使い回す 👉 この3つを理解すれば、実用的なコンポーネントが作れるようになります。 Custom Elements（カスタムタグ） 役割 👉 独自のH]]></description>
      </item>
      <item>
        <title>Web Componentsについて</title>
        <link>https://blog.konkitsune.com/posts/web-components-ni-tsuite/</link>
        <pubDate>Wed, 20 May 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[Web Componentsとは? 「再利用可能なオリジナルHTMLタグを自分で作れる仕組み」です。 フレームワーク不要 ブラウザ標準機能だけで動く カプセル化（CSSやJSが外に漏れない） 👉 つまり、“自作UIパーツをネイティブで作る技術”です。 通常のHTMLはこうですよね： &lt;button>送信&lt;/button> Web Componentsを使うと、こんなことができます： ]]></description>
      </item>
      <item>
        <title>タグ機能追加の実践</title>
        <link>https://blog.konkitsune.com/posts/tag-kinou-tsuika-no-jissen/</link>
        <pubDate>Fri, 15 May 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[今回の追加内容 以前作成したブログサイトをカスタマイズし、タグ機能を追加していきます。 全タグの一覧ページ表示 全タグの一覧ページからタグ毎の投稿記事一覧ページへの遷移 タグ毎の投稿記事一覧ページ表示 タグ毎の投稿記事一覧ページから各投稿ページへの遷移 を行えるようにします。 今回追加するタグ機能の動きの確認 まずは、今回追加するタグ機能の実行イメージを下記のボタンを押して確認してください。 bl]]></description>
      </item>
      <item>
        <title>タグ機能について④</title>
        <link>https://blog.konkitsune.com/posts/tag-kinou-ni-tsuite-4/</link>
        <pubDate>Fri, 15 May 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[タグ追加ごとに、タグ一覧ページの作成が必要 新規タグ追加毎にタグ一覧ページを作成しないといけないのは、管理が煩雑となり、ミスも多くなります。 タグ毎に異なる内容のページを用意する必要がないのであれば、ひな形から自動作成するのが便利です。 👉 Eleventyには、１つのテンプレートにより、複数ページを自動生成するページング機能が標準で存在します。 Eleventyのページング（Paginatio]]></description>
      </item>
      <item>
        <title>タグ機能について③</title>
        <link>https://blog.konkitsune.com/posts/tag-kinou-ni-tsuite-3/</link>
        <pubDate>Fri, 15 May 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[タグ一覧のページのファイル名が日本語 Eleventyでは、タグに日本語を利用できる柔軟さの反面、標準のまま使用すると、タグ一覧ページのURLに日本語のタグ名がそのまま入ってしまいます。 日本語のURLは、BASE64エンコードされる為、昨今のシステム的には問題になる機会は減りましたが、可読性にかけ、一部の検索エンジンでは、省かれる可能性もあります。その為、英語やローマ字での表記が推奨されています]]></description>
      </item>
      <item>
        <title>タグ機能について②</title>
        <link>https://blog.konkitsune.com/posts/tag-kinou-ni-tsuite-2/</link>
        <pubDate>Fri, 15 May 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[全てのタグ一覧の表示 前回の説明のとおり、Eleventyには、標準のままでは、登録されている全てのタグ一覧を表示する方法がありません。 これを実現する為には、若干のカスタマイズが必要です。 👉 カスタマイズには、以下の３つの方式をとることが可能です。 前提（３つの方式） key方式 collections のキーをそのまま使う Set方式 記事データ（item.data.tags）からタグを収]]></description>
      </item>
      <item>
        <title>タグ機能について①</title>
        <link>https://blog.konkitsune.com/posts/tag-kinou-ni-tsuite-1/</link>
        <pubDate>Fri, 15 May 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[タグとは？ タグとは、投稿記事に付ける「目印（ラベル）」のことです。 記事を分類して、あとからまとめて表示するために使います。 👉 イメージとしては、本に貼る「付箋」や「見出しシール」に近いです。 ブログを整理するうえで、とても重要な機能です。 タグの役割 タグを使うことで、同じテーマの記事をひとまとめにできます。 例えば、こんなふうにタグを付けたとします。 投稿記事A → 「タグ：はじめて」 ]]></description>
      </item>
      <item>
        <title>HTTPSテスト環境の構築</title>
        <link>https://blog.konkitsune.com/posts/https-test-kankyou-no-kouchiku/</link>
        <pubDate>Wed, 13 May 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[HTTPSテスト環境の選定 前回、HTTPSテスト環境について説明してきました。証明書の作成には、mkcert を用いるとして、HTTPSサーバーには、下記のようなものがあり、複数の選択肢があることがわかりました。 Node.jsサーバー http-server Express Vite 👉 この中で、今回は、以下の組み合わせで環境構築していくことにします。 HTTPS証明書 → mkcert ]]></description>
      </item>
      <item>
        <title>HTTPSテスト環境について</title>
        <link>https://blog.konkitsune.com/posts/https-test-kankyou-ni-tsuite/</link>
        <pubDate>Wed, 13 May 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[フロントエンド開発者のためのHTTPS環境構築入門 〜ローカル環境でも安全な通信を実現する方法〜 結論（まずここだけ読めばOK） 今のWeb開発では HTTPSは必須 ローカル開発でもHTTPSが必要なケースが増えている 簡単に環境を作るなら mkcert + Node.jsサーバー 👉 サーバーごとに設定方法が違うので、自分に合ったものを選ぶのが大事 HTTPSとは？ HTTPS（HyperT]]></description>
      </item>
      <item>
        <title>IndexedDBの動作確認③</title>
        <link>https://blog.konkitsune.com/posts/indexeddb-no-dousa-kakunin-3/</link>
        <pubDate>Mon, 11 May 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[前回からのつづき 前回、IndexedDBの基本動作の確認について説明を行ってきました。今回は、その続きとなります。 今回は、データ検索テストプログラムを中心に説明したいと思います。 データ検索テストプログラムによる検索動作の確認 下記のボタンを押下することで、テストプログラムの起動が可能です。 .popup-content { height: 92%; } .popup-body { heigh]]></description>
      </item>
      <item>
        <title>IndexedDBの動作確認②</title>
        <link>https://blog.konkitsune.com/posts/indexeddb-no-dousa-kakunin-2/</link>
        <pubDate>Thu, 07 May 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[前回からのつづき 前回、IndexedDBの基本動作の確認について説明を行ってきました。今回は、その続きとなります。 今回は、マスターメンテナンス風テストプログラム(cursor版)を中心に説明したいと思います。 getAll版とcursor版の違い 「マスターメンテナンス風テストプログラム(getAll版)」と「マスターメンテナンス風テストプログラム(cursor版)」の違いは、データベースの読]]></description>
      </item>
      <item>
        <title>IndexedDBの動作確認①</title>
        <link>https://blog.konkitsune.com/posts/indexeddb-no-dousa-kakunin-1/</link>
        <pubDate>Thu, 07 May 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[IndexedDBの動きを確認する IndexedDBはLocalStorageやSessionStorageと異なり、データベースである為、アクセスには、手順が必要です。検索機能も持ち合わせており、多機能ですが、基本通り使えば、とても簡単に扱えます。 ここでは、下記の３つのテストプログラムを使って、実際の挙動を確認していきたいと思います。 マスターメンテナンス風テストプログラム(getAll版)]]></description>
      </item>
      <item>
        <title>IndexedDBのAPI③</title>
        <link>https://blog.konkitsune.com/posts/indexeddb-no-api-3/</link>
        <pubDate>Tue, 05 May 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[前回からのつづき 前回、検索の要となる IDBKeyRangeオブジェクトの使い方を説明しましたが、今回は、その続きとなります。 データの取得において、判断に迷う getAll()とcursorについて、その判断基準と注意点について説明します。 【実務で迷わない】IndexedDBの getAll() vs cursor 徹底比較 結論 少量データ → getAll() でOK（シンプル） 大量デ]]></description>
      </item>
      <item>
        <title>IndexedDBのAPI②</title>
        <link>https://blog.konkitsune.com/posts/indexeddb-no-api-2/</link>
        <pubDate>Tue, 05 May 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[前回からのつづき 前回、IndexedDBのオブジェクトを中心にAPIの説明を行ってきましたが、今回は、その続きとなります。 検索の要となる IDBKeyRangeオブジェクトの使い方を中心に、検索方法ついて説明します。 IDBKeyRangeとは？ IndexedDBの検索を支える超重要API ■ 結論（最初にここだけ読めばOK） IDBKeyRange は 👉 **「どのデータを取得するかを]]></description>
      </item>
      <item>
        <title>IndexedDBのAPI①</title>
        <link>https://blog.konkitsune.com/posts/indexeddb-no-api-1/</link>
        <pubDate>Tue, 05 May 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[【完全版】IndexedDB API一覧と本質（初心者〜実務まで） ■ 結論（最初にここだけ読めばOK） IndexedDBは 👉 「イベント駆動の非同期データベースAPI」＋「structured cloneで何でも保存できる仕組み」です。 そして重要なのは： 戻り値ではなく request.result で結果を受け取る すべてが 非同期＋イベントベース データは オブジェクト・配列・Map]]></description>
      </item>
      <item>
        <title>IndexedDBとは</title>
        <link>https://blog.konkitsune.com/posts/indexeddb-towa/</link>
        <pubDate>Mon, 04 May 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[IndexedDBとは？ IndexedDBは、ブラウザに組み込まれた非同期のキー・バリュー型データベースです。 LocalStorageやSessionStorageが「文字列のみ」しか扱えないのに対し、IndexedDBは構造化されたデータをそのまま保存できます。 また、 オブジェクトストア（Object Store）という単位でデータを管理 インデックスによる高速検索が可能 といった特徴があ]]></description>
      </item>
      <item>
        <title>Excelで行うデータスクリーニング</title>
        <link>https://blog.konkitsune.com/posts/excel-de-okonau-data-screening/</link>
        <pubDate>Fri, 01 May 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[結論：Excelの自動スクリーニングは「関数＋ルール表」で誰でもできる Microsoft Excel（以下、Excel）は、ご存じの通り表計算ソフトです。表計算から文書作成まで、幅広く活用されています。 このExcelですが、データスクリーニングのツールとしても非常に優秀です。 データを表形式で見渡せる点や、マクロ機能による自動化は、データスクリーニングにおいて、強い味方となります。 Excel]]></description>
      </item>
      <item>
        <title>データスクリーニングの作業</title>
        <link>https://blog.konkitsune.com/posts/data-screening-no-sagyou/</link>
        <pubDate>Thu, 30 Apr 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[結論：データスクリーニングは「事前準備が9割」 データスクリーニングで一番大切なのは、 👉 最初の「データ調査」と「作業方針の決定」です。 ここをしっかりやらないと、 何度もやり直しになる エラーが出続ける 集計結果が違う といった問題が必ず発生します。 👉 逆にここを丁寧にやれば、後の作業はスムーズに進みます。 全体の流れ（まずはこれを理解） データスクリーニングは、次の順番で進めます。 入]]></description>
      </item>
      <item>
        <title>SessionStorageの動作確認</title>
        <link>https://blog.konkitsune.com/posts/sessionstorage-no-dousa-kakunin/</link>
        <pubDate>Tue, 28 Apr 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[SessionStorageの動きを確認する SessionStorageはLocalStorage同様、「保存・取得・削除」をとても簡単に扱えますが、ここでは、テストプログラムを使って、実際の挙動（上書き・永続化・削除の影響）を確認していきたいと思います。 下記のボタンを押下することで、テストプログラムの起動が可能です。 テストプログラム起動 👉 本記事のテストプログラムを動かすことで、「Se]]></description>
      </item>
      <item>
        <title>SessionStorageとは</title>
        <link>https://blog.konkitsune.com/posts/sessionstorage-towa/</link>
        <pubDate>Tue, 28 Apr 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[SessionStorageとは？ ✅ 結論（まずここだけ読めばOK） SessionStorageは「タブを開いている間だけデータを保存できる仕組み」です。 ページを再読み込みしても消えない でもタブを閉じると全部消える LocalStorageと使い方はほぼ同じ 👉 「一時的なメモ」に最適です。 SessionStorageのイメージ（超かんたん） SessionStorageは、ブラウザの]]></description>
      </item>
      <item>
        <title>ブログサイト構築の実践③</title>
        <link>https://blog.konkitsune.com/posts/blog-site-kouchiku-no-jissen-3/</link>
        <pubDate>Mon, 27 Apr 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[前回からのつづき 前回までの作業で、投稿記事ページの作成が完了しました。 今回は、そのつづきからになります。 11. レイアウト用テンプレートの作成 11-1. レイアウト用テンプレート格納フォルダーの作成 ”src”フォルダーに戻り、名前は、”_includes”で作成します。 以下を入力： cd .. mkdir _includes 作成したフォルダーに移動します。 以下を入力： cd _in]]></description>
      </item>
      <item>
        <title>ブログサイト構築の実践②</title>
        <link>https://blog.konkitsune.com/posts/blog-site-kouchiku-no-jissen-2/</link>
        <pubDate>Mon, 27 Apr 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[前回からのつづき 前回までの作業で、サイト構築の準備が整いました。 今回は、そのつづきからになります。 7. 先頭ページの作成 サイトの先頭ページを作成します。名前、”index.njk”で作成します。 作成したファイルは、Eleventyにより解析され、HTML変換後、出力用フォルダー直下の”_site/index.html”として出力されます。 👉 ここでは、Windows標準の「メモ帳」ア]]></description>
      </item>
      <item>
        <title>ブログサイト構築の実践①</title>
        <link>https://blog.konkitsune.com/posts/blog-site-kouchiku-no-jissen-1/</link>
        <pubDate>Mon, 27 Apr 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[どのようなサイトを構築するか？ ここからは、Eleventyにより実際にサイトを構築していきます。 最終的には、 👉 テーマによってデザイン切り替えが可能な、ブログサイトを目指していきたいと思っています。 基本部分を作成し、少しずつ、機能追加を図っていくつもりです。 今回作成部分の動きの確認 まずは、今回作成する分イメージを下記のボタンを押して確認してください。 blog-devサイト実行イメー]]></description>
      </item>
      <item>
        <title>EleventyでのNunjucks</title>
        <link>https://blog.konkitsune.com/posts/eleventy-deno-nunjucks/</link>
        <pubDate>Thu, 23 Apr 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[Nunjucksとは？ Nunjucksは2014年ごろ、MozillaのエンジニアであるJames Long氏によって開発された、JavaScript向けテンプレートエンジンです。Jinja2の影響を受けています。 👉 HTMLを「効率よく・使い回して」作るための仕組み（テンプレートエンジン）です。 特にEleventyでは、 レイアウト用のテンプレート（共通デザイン） データの差し込み パー]]></description>
      </item>
      <item>
        <title>EleventyでのMarkdown</title>
        <link>https://blog.konkitsune.com/posts/eleventy-deno-markdown/</link>
        <pubDate>Thu, 23 Apr 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[EleventyでのMarkdownの書き方 👉 Eleventy では**「Markdown + 設定（フロントマター）+ レイアウト用テンプレート」**でページを作ります つまり 設定（フロントマター） → ページ情報を書く Markdown → 本文を書く レイアウト用テンプレート → 見た目を決める この3つがセットです。 設定（フロントマター）（最重要） Eleventyでは、Mark]]></description>
      </item>
      <item>
        <title>Markdownの深堀</title>
        <link>https://blog.konkitsune.com/posts/markdown-no-fukabori/</link>
        <pubDate>Thu, 23 Apr 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[あらためてMarkdownとは？ Markdown は 2004 年に John Gruber さんにより作られた言語です。 👉 Markdownは 「記号を使って、簡単に文章構造を作れる書き方」 です。 しかも、書いた内容は最終的にHTMLに変換されるため、Webサイトの記事作成にとても向いています。 Markdown は、HTMLのようなタグを使わずに、 見出し 箇条書き リンク 画像 など]]></description>
      </item>
      <item>
        <title>運営者情報</title>
        <link>https://blog.konkitsune.com/posts/uneisya-jyouhou/</link>
        <pubDate>Mon, 20 Apr 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[当サイトをご覧いただき、ありがとうございます。 本サイトでは、現役を退いた運営者が、趣味として取り組んでいるプログラミングについて、日々の学びや試行錯誤、開発の記録を中心に発信しています。内容は、思いついたことや実際に試したことをベースに、できるだけ分かりやすくまとめることを心がけています。 ただし、独学での検証や理解をもとにしているため、内容には不十分な点や誤りが含まれる可能性があります。お気づ]]></description>
      </item>
      <item>
        <title>LocalStorageの深堀</title>
        <link>https://blog.konkitsune.com/posts/localstorage-no-fukabori/</link>
        <pubDate>Sun, 19 Apr 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[結論から LocalStorageは「ちょっとした設定や小さなデータ保存」には便利ですが、大量データや本格的なアプリの保存には向いていないようです。 1MBを超えるような用途では、別の仕組み（IndexedDBやOPFS+Sqliteなど）を使う方が安全だと思われます。 LocalStorageについてのおさらい LocalStorageは、ブラウザにデータを保存できる仕組みです。 特徴はとてもシ]]></description>
      </item>
      <item>
        <title>Node.js環境の作成</title>
        <link>https://blog.konkitsune.com/posts/node-js-kankyou-no-sakusei/</link>
        <pubDate>Sat, 18 Apr 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[Node.jsって何？ Node.js（公式サイト）は、フリーでオープンソースなJavaScript実行環境ツールです。 ブラウザなしでJavaScriptが動く 開発ツール（npmなど）が使える Web開発ではほぼ必須 よくある例 ローカルサーバーを立てる パッケージ（ライブラリ）を入れる ビルドや自動処理をする 👉 **「開発の裏方を全部やってくれる存在」**と思うと分かりやすいです。 また]]></description>
      </item>
      <item>
        <title>データスクリーニングの必要性</title>
        <link>https://blog.konkitsune.com/posts/data-screening-no-hitsuyousei/</link>
        <pubDate>Sat, 18 Apr 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[CSV連携がうまくいかない本当の原因と解決策 データ連携において、ファイル形式だけを合わせても、連携に支障がでる可能性をお話してきました。 では、その点に注意すれば、問題はなくなるのでしょうか？ 👉 事はそう簡単に進みません。 確かに、ファイル形式に加え、各項目の属性などにも注意して、揃えていけば、かなりの確率でファイル連携の成功の可能性は高まります。 ただ、そこにも、落とし穴が存在するのです。]]></description>
      </item>
      <item>
        <title>Eleventyについて</title>
        <link>https://blog.konkitsune.com/posts/eleventy-ni-tsuite/</link>
        <pubDate>Fri, 17 Apr 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[あらためてEleventyとは？ Eleventy（公式サイト）は、Zach Leatherman（ザック・レザーマン）さんが中心になって開発された静的サイトジェネレーターです。2018年にリリースされました。 特徴を一言でいうと、 👉 「MarkdownやHTMLから、そのままWebページを作るツール」 です。 アクセシビリティやパフォーマンスを大事にする開発者たちに支持されています。 Nod]]></description>
      </item>
      <item>
        <title>LocalStorageの動作確認</title>
        <link>https://blog.konkitsune.com/posts/localstorage-no-dousa-kakunin/</link>
        <pubDate>Thu, 16 Apr 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[LocalStorageの動きを確認する LocalStorageは「保存・取得・削除」をとても簡単に扱えますが、ここでは、テストプログラムを使って、実際の挙動（上書き・永続化・削除の影響）を確認していきたいと思います。 下記のボタンを押下することで、テストプログラムの起動が可能です。 テストプログラム起動 👉 本記事のテストプログラムを動かすことで、「LocalStorageの本当の動き」が体]]></description>
      </item>
      <item>
        <title>ファイル形式に関する誤解</title>
        <link>https://blog.konkitsune.com/posts/file-keishiki-ni-kansuru-gokai/</link>
        <pubDate>Wed, 15 Apr 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[ファイル連携がうまくいかない 最近、「システムやプログラム」とのファイル連携がうまくいかないという話をよく耳にします。「ファイルでの読み込みだとズレてしまうので、その手直しに大変な時間がかかる。」といった声もあります。 ほとんどの「システムやプログラム」がCSV/XML/JSONファイルでの外部入出力に対応しています。 👉 大量のデータを効率よく入出力できる便利な機能 人と「システムやプログラム]]></description>
      </item>
      <item>
        <title>当面の目標について</title>
        <link>https://blog.konkitsune.com/posts/toumen-no-mokuhyou-ni-tsuite/</link>
        <pubDate>Mon, 13 Apr 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[本サイトの当面の目標について 当面、WEBクライアントアプリの開発に焦点をあて、関係する技術解説を行うことを目標に、進めていきたいと思っています。 WEBクライアントアプリとは？ WEBクライアントアプリとは「ブラウザだけで動くアプリ」です。 サーバーに頼らず、 データ保存 処理 画面表示 👉 すべてをブラウザの中で完結できます。 そのため、 サーバー構築不要 運用コストほぼゼロ インストール不]]></description>
      </item>
      <item>
        <title>LocalStorageとは</title>
        <link>https://blog.konkitsune.com/posts/localstorage-towa/</link>
        <pubDate>Sat, 11 Apr 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[まず仕組みから理解する LocalStorageは、「ブラウザにデータを保存して、次回もそのまま使える仕組み」です。 👉 サーバーを使わずに、手軽にデータを残せるのが最大の特徴です。 LocalStorageとは何か？（まずここを理解） LocalStorageは、ブラウザの中にある「保存領域」です。 イメージとしては👇 ブラウザの中に小さなメモ帳がある JavaScriptで自由に書いたり読]]></description>
      </item>
      <item>
        <title>サイト公開の仕組み</title>
        <link>https://blog.konkitsune.com/posts/site-koukai-no-shikumi/</link>
        <pubDate>Thu, 09 Apr 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[Eleventyサイトは「Cloudflare Pages＋GitHub」で無料＆簡単に公開できる Eleventyで作ったサイトは、Cloudflare の「Cloudflare Pages」＋ GitHubを使うのが、一番シンプルでおすすめです。 サーバー契約不要 HTMLのアップロード作業ほぼ不要 無料でHTTPS対応 GitHubに「保存」するだけで公開される 👉 結論としては「コードを]]></description>
      </item>
      <item>
        <title>利用技術</title>
        <link>https://blog.konkitsune.com/posts/riyou-gijyutsu/</link>
        <pubDate>Thu, 09 Apr 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[サイトを構築に利用した技術 今回初めてサイトを構築するにあたり、私が利用した技術についてお話します。 Webサイトを作る方法はいくつかありますが、 手軽さ・シンプルさ コストの安さ 管理のしやすさ を重視し、Eleventy（公式サイト）のような「静的サイトジェネレーター」を使うことにしました。 👉 初心者でも「Eleventy＋静的サイト」の方がシンプルで始めやすいので、おすすめです。特に「初]]></description>
      </item>
      <item>
        <title>AIとの向き合い方</title>
        <link>https://blog.konkitsune.com/posts/ai-tono-mukiaikata/</link>
        <pubDate>Thu, 09 Apr 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[プログラミングは「AIに任せるもの」ではなく、「AIと一緒に楽しむ思考ゲーム」です。 生成AIの時代でも、プログラミングは十分に趣味として成立します。 むしろ今は、AIという強力な相棒がいることで、以前よりも「気軽に・深く」楽しめるようになっています。 そもそも何が変わったのか? 最近は、ChatGPT や GitHub Copilot、Google Gemini といったAIによって、 プログラ]]></description>
      </item>
      <item>
        <title>利用規約</title>
        <link>https://blog.konkitsune.com/posts/riyou-kiyaku/</link>
        <pubDate>Wed, 08 Apr 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[当ブログ（以下、「当サイト」といいます）は、個人開発で得た技術情報を発信することを目的として運営されています。以下の内容をご確認のうえ、当サイトをご利用ください。 第1条（適用範囲） 本利用規約は、当サイトのすべてのコンテンツおよびサービスに適用されます。利用者は、本規約に同意したものとみなされます。 第2条（著作権について） 当サイトに掲載されている文章、画像、ソースコード、その他のコンテンツの]]></description>
      </item>
      <item>
        <title>著作権について</title>
        <link>https://blog.konkitsune.com/posts/chosaku-ken-ni-tsuite/</link>
        <pubDate>Wed, 08 Apr 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[当サイトに掲載されている文章・画像・コードなどのコンテンツは、特に記載のない限り、すべて当サイト運営者に著作権があります。 無断転載・複製・再配布はご遠慮ください。引用される場合は、出典元として当サイトのURLを明記し、引用部分が明確になるようにしてください。 また、当サイトでは他者の著作物を引用する場合、著作権法に基づき適切な範囲で行っております。万が一、掲載内容に問題がある場合は、お手数ですが]]></description>
      </item>
      <item>
        <title>プライバシーポリシー</title>
        <link>https://blog.konkitsune.com/posts/privacy-policy/</link>
        <pubDate>Wed, 08 Apr 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[当ブログ（以下、「当サイト」といいます）は、個人開発で得た技術情報を発信することを目的として運営されています。以下に、当サイトにおける個人情報の取扱いについてご説明いたします。 1. 基本方針 当サイトは、ユーザーのプライバシーを尊重し、個人情報の保護に努めます。取得した情報は、適切に管理し、利用目的の範囲内でのみ使用します。 2. 収集する情報と利用目的 当サイトでは、以下の情報を自動的に取得す]]></description>
      </item>
      <item>
        <title>主なデータ保存技術</title>
        <link>https://blog.konkitsune.com/posts/omona-data-hozon-gjyutsu/</link>
        <pubDate>Tue, 07 Apr 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[WEBアプリのデータ保存技術の種類 WEBブラウザのデータ保存技術には、たくさんの種類がありますが、特徴、容量、主な用途に違いが存在します。 名前 特徴 容量の目安 主な用途 LocalStorage キー・バリュー形式（文字列のみ）、同期API、永続保存 約5〜10MB（ブラウザ依存） ユーザー設定、テーマ、簡単なキャッシュ SessionStorage LocalStorageと同様だが、タブ]]></description>
      </item>
      <item>
        <title>開発用コンピュータ</title>
        <link>https://blog.konkitsune.com/posts/kaihatsuyou-computer/</link>
        <pubDate>Mon, 06 Apr 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[開発に使っているパソコン 👉 WEBクライアントアプリ開発は「古いパソコン」でも十分できます 最新スペックは不要 メモリとSSDを強化すればOK 実際の開発は軽い 👉 まずは「今あるPC」で始めるのが正解です 実際に使っているパソコン 私がメインで使っている環境はこちらです👇 項目 内容 メーカー FUJITSU 型番 LIFEBOOK SH54/G CPU Intel Core i5-24]]></description>
      </item>
      <item>
        <title>選定した利用技術の深堀</title>
        <link>https://blog.konkitsune.com/posts/sentei-shita-riyou-gijyutsu-no-fukabori/</link>
        <pubDate>Mon, 06 Apr 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[採用技術の深掘り WEBクライアントアプリ開発で重要なのは「OS」ではなく「ブラウザ」と「開発ツール」です。 つまり👇 OS → 何でもOK ブラウザ → 重要（実行環境） ツール → 開発効率を左右 👉 この3つの役割を理解するだけで、迷わなくなります。 なぜOSは何でも良いのか？ 理由はシンプル 👉 プログラムは「ブラウザの中」で動くからです。 イメージで理解 従来のアプリ → OSの上]]></description>
      </item>
      <item>
        <title>利用技術の選定</title>
        <link>https://blog.konkitsune.com/posts/riyou-gijyutsu-no-sentei/</link>
        <pubDate>Mon, 06 Apr 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[WEBクライアントアプリの開発環境 WEBクライアントアプリの開発は、実は「パソコンとブラウザだけ」で始められます。 ただし、実際に快適に開発するなら👇 VS Code（エディタ） Node.js（開発補助） Git（バージョン管理） 👉 この3つを入れるだけで、ほぼ十分な環境が整います。 ※ WEBクライアントアプリについては、過去の投稿「はじめに/当面の目標について」を参照してください。 ]]></description>
      </item>
      <item>
        <title>免責事項</title>
        <link>https://blog.konkitsune.com/posts/menseki-jikou/</link>
        <pubDate>Sun, 05 Apr 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[当サイトに掲載されているプログラム、コードスニペット、技術情報は、無償で提供されているものであり、その正確性や安全性を保証するものではありません。内容の利用により生じたいかなる損害についても、当方は一切の責任を負いかねます。 プログラムの使用や技術的な実装は、各自の責任において行ってください。特に、業務システムや重要なデータを扱う環境での利用に際しては、十分な検証とバックアップを行った上でご利用い]]></description>
      </item>
      <item>
        <title>ブログ制作動機</title>
        <link>https://blog.konkitsune.com/posts/blog-seisaku-douki/</link>
        <pubDate>Sat, 04 Apr 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[今回は、このブログ作成のきっかけからお話したいと思います。 それは、友人からのスタンドアローンの帳簿アプリを開発して欲しいとの依頼からでした。 かねてから、JavaScriptに興味をもっていた為、深く考えず、node、electonを使った開発をすすめることとしました。はじめてのelectronにとまどいつつも、フリーでここまでできてしまうことに感慨をおぼえながら、作業をすすめました。 そして、]]></description>
      </item>
      <item>
        <title>はじめての投稿</title>
        <link>https://blog.konkitsune.com/posts/hajimeteno-toukou/</link>
        <pubDate>Sat, 04 Apr 2026 00:00:00 GMT</pubDate>
        <description><![CDATA[このサイトでは、現役から退いた私が、趣味で始めたプログラミングについて、思いつくまま、その開発にかかわる記録について記していきたいと思います。 何分、勉強不足や理解不足のため、多々誤った記述や考察も多いと思いますが、長い目でみていただければ幸いです。 私自身の経歴ですが、過去に３０年ほど、金融系システムの構築を中心に、主にインフラ系のシステムエンジニアとして業務に携わってまいりました。 当初は、大]]></description>
      </item>
  </channel>
</rss>