HTML

　htmlは、ページの構造を作るタブです。次のタグでセッションを分けができます。。
ヘッダー:<header>。
ナビゲーションバー: <nav>。
メインコンテンツ: <main>。<article>、<section>、<div> 要素で表されるさまざまなコンテンツサブセクションを含みます。
サイドバー: <aside>。<main> の中に置かれることがよくあります。
フッター: <footer>。

PWA

ServiceWorker登録
if (“serviceWorker” in navigator) {
// 既定のスコープを使用して、
// サイトのルートに置かれているサービスワーカー(ws.js)を登録します。/は必要
navigator.serviceWorker.register(“/sw.js”).then(
(registration) => { console.log(“サービスワーカー登録成功:”, registration);
},
/*catch*/ (error) => {
console.error(`サービスワーカー登録失敗: ${error}`);
}, );
} else {
console.error(“サービスワーカーに対応していません。”);
}

Service worker ファイル 　参照サイト
app.js の最初のコードブロックは、以下の通りです。これは、サービスワーカーを使用するためのエントリーポイントです。
const registerServiceWorker = async () => {
if (“serviceWorker” in navigator) {
try {
　　const registration = await navigator.serviceWorker.register(“/sw.js”, {
scope: “/”,　});
if (registration.installing) {
console.log(“Service worker installing”);
} else if (registration.waiting) {
console.log(“Service worker installed”);
} else if (registration.active) {
console.log(“Service worker active”);
}
} catch (error) {
console.error(Registration failed with ${error});
}
}
};

// …

registerServiceWorker();

ServiceWorkerの書き方
const addResourcesToCache = async (resources) => {
const cache = await caches.open(“v1”);
await cache.addAll(resources);
};

self.addEventListener(“install”, (event) => {
event.waitUntil(
addResourcesToCache([
“/”,
“/index.html”,
“/style.css”,
“/app.js”,
“/image-list.js”,
“/star-wars-logo.jpg”,
“/gallery/bountyHunters.jpg”,
“/gallery/myLittleVader.jpg”,
“/gallery/snowTroopers.jpg”,
]),
);
});

PWAに関連するリンク
pwaの作成でServiceeWorkerの登録するscriptの書き方 ⇒ 参照ページ
サービスワーカーを使い始めるための情報

Offline_and_background_operation オフライン操作とバックグラウンド処理

PWA実装 #React – Qiita

【イラスト付き】Servie Worker API【利用方法】

PWA manifest.jsonに関すること。manifest.jsonでRicher PWA install UI wo’nt be avaialbe on desktop. Please add at least one screenshot for which form factors is not set or set to a value other than wide.という警告がでていた。
Enabling Richer PWA Install UI on Desktop — Amit Merchant — A blog on PHP, JavaScript, and more

サービスワーカーで PWA をオフライン動作させる

hostファイル

　2025年12月5日に、ネームサーバーを変更し、ドメイン名は変更せずに、サーバーを引っ越ししたのですが、メインに使っているWindowsが、旧サーバーにアクセスし、新サーバーにアクセスしません。キャッシュ履歴をしたり、スーパーリロードを行ったのですが、アクセスしません。２，３日程で、ユーザーは、新サーバーに切り替わっていきました。それで、googleで、AIモードで、出てきたのは、以下です。

　Windows の場合: 管理者としてメモ帳を開き、C:\Windows\System32\drivers\etc\hosts ファイルを開きます。ファイルの最後に 127.0.0.1 [旧サイトのURL]  (例: 127.0.0.1 old.mike3.net)を追加して保存します。

　それで、hostファイルを開いてみたら、次のように出てきました。

# Copyright (c) 1993-2009 Microsoft Corp.
#
# his is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a ‘#’ symbol.
#
# For example:
#
# 102.54.94.97 rhino.acme.com # source server
# 38.25.63.10 x.acme.com # x client host
#
# localhost name resolution is handled within DNS itself.
# 127.0.0.1 localhost
# ::1 localhost
　　旧サーバーのIPアドレス　○○○○.net
　　旧サーバーのIPアドレス　www.○○○○.net

　最後の２行目から、自分でこのファイルに書き込みを行っていたことを忘れていました。それで、新IPアドレスに書き換えて、再度アクセスしたら、新サイトが表示されました。
　なお、現在は、新サーバーのIPアドレスとURLは、削除してあります。

　後で調べたら、さくら internetのページに、「動作確認のためにhostsファイルを利用したい」というページがありました。⇒ 関連記事

　hostファイルmacでは、「　/private/etc/　または　/etc/　」にあるようです。

HTML Living Standard

　HTML Living Standardは、Webページを作成する仕様です。この仕様を理解するには、DOM（Document Object Model）の基礎を理解することが必要でです。Web IDL（Web Interface Definition Language）、HTTP、XML、Unicode、文字エンコーディング、JavaScript、およびCSSの理解も必要だが、必須ではない。

　詳しい説明は、次のサイトを参照して下さい。

　掲載されたページを参照し、自分で作成しながら、理解するしかない。時代遅れだなと思う。

iPhoneとipadでWeb Speech APIの英語がカタカナ読みになる

Windows PCでは、Web speech APIのtext to speechで英語がうまく発音されるのにipadやiphoneでは、safariブラウザが対応していないのでカタカナ読みになってしまう。対応策はない。
関連サイト
・iPhoneでWeb Speech APIの英語がカタカナ読みになる問題の解決法を教えてください

　それでどうするか。音声ファイルで流す。最も確実な方法だが、音声ファイル作成に手間がかかる。それで、思いついたのが、サーバー上でjava scriptが動作しないかということで、調べたら、node.jsを使うが挙った。さくらレンタルサーバーのスタンダードでは、node.js がインストールできたが、最新のlts版がインストールできなかった。ファイルのコンパイルができなかった。理由は以下、
WARNING: C++ compiler (CXX=g++, 9.4.0) too old, need g++ 10.1.0 or clang++ 8.0.0
sshシェルを使えるがroot権限がないので、g++のアップグレイドはできない。自力でのアップグレイドも難関らしい。
　いろいろ調べているとGoogle Cloud Text-to-Speechがある。料金は、毎月最初の 400 万文字が無料。これだとこちらを利用した方がよさそうだ。いずれにしろ、Google Cloud Text-to-Speechを使うのだから。

　node.jsについても概要を知ることができたが、webでの使い方が把握できなかった。Express、フレームワーク、便利なものができているんだなと思った。利用できればと思うが、なかなかだ。

　結局は音声ファイルを作成し、対応することになるのでは。いろいろと勉強になった。

Perlで半角カナを全角カナに、全角カナを半角カナに変換

Garminで位置情報を取得しようと思ったが、ファイル名が「ﾎﾟｲﾝﾄ_25-07-13.gpx」と半角カナが使われている。Perlで処理するには、半角を全角に変換する必要がある。それで、Windows版Perlの細道・けもの道を参照して、変換を行った。

  1. use Encode;
  2. use Encode::JP::H2Z;
  3. my $str_h=”ﾎﾟｲﾝﾄ”;
  4. Encode::from_to($str_h, “utf-8”, “euc-jp”);
  5. Encode::JP::H2Z::h2z(\$str_h);
  6. Encode::from_to($str_h, “euc-jp”, “utf-8”);
  7. print $str_h, “\n”;
  8. my $str_z=”アメダス”;
  9. Encode::from_to($str_z, “utf-8”, “euc-jp”);
  10. Encode::JP::H2Z::z2h(\$str_z);
  11. Encode::from_to($str_z, “euc-jp”, “utf-8”);
  12. print $str_z, “\n”;

スクリプトの説明
スクリプトは、utf-8で保存します。
２行目。Strawberry Perl (version 5.38.2)では、Encode::JP::H2Zがインストールされていなかったので、インストールしました。
４行目。Encode::JP::H2Z関数では、文字コードはeuc-jpで行われるので、euc-jpに変換する。
５行目。Encode::JP::H2Z関数では、h2zで、半角を全角にするを指定します。なお、変換する文字列を参照渡しにしているので、$str_hの前に\を付けている。⇒ 参照渡し
６行目。出力するためにutf-8に戻している。
10行目。z2hで、全角を半角にするを指定します。

参照サイト
・Windows版Perlの細道・けもの道