2025年12月アーカイブ

●さて、サイトを周回遅れでhttps化したものの、ブログが依然として旧石器時代のままではよろしくない。最近のモダンなブログでは、右クリックしてソースを覗いてみると、びっくりするほどメタタグ、すなわち人間ではなく検索エンジンやSNSに読ませるための情報が増えている。headタグのなかにダーッとこれらのタグが並んで、なかなかbodyタグにたどり着かない感じだ。これらはCMSが自動的に吐き出してくれるわけだが、そういったモダンなタグの誕生以前からあるウチのブログのheadタグは、まったくもって簡素。いくらなんでも、このままではよくない、かといって全面的にSEO対策（この言葉は好きじゃない）に走るのはイヤだ。なんでもいいからアクセス数を増やしたいわけじゃないんである。そこで、最低限、入れておこうと思った3つの要素を付け加えた。これも忘れっぽい未来の自分と、同じことをしようと考えているだれかのために書き記しておく。
●まずは、OGP（Open Graph Protocol）の整備。これはSNSでウェブページをシェアした際に、どのように表示されるかを制御するためのメタデータ。このブログを作った頃にはそんなものはなかった（SNS自体がなかったから）。metaタグを使って、og:site_name、og:type、og:url、og:imageの項目を各個別ページに吐き出すように、CMSのテンプレートを書き換えた。たとえば、こんなヤツだ。

<meta property="og:url" content="https://www.classicajapan.com/wn/2025/11/100938.html" />

その際、ChatGPTに手伝ってもらって、テンプレートを書き直してもらったのだが、割と平気でまちがえる。ヘンだなと思って「えっ、そんな文法、ないよね？」と誤りを指摘すると、「そうです、そのような文法はまちがってます」と平然と返答する。あんたがまちがえたんだろがー！とツッコミたくなるわけだが、これはもうAIを使う際のお約束みたいなもので慣れた。エラーが出たら、エラーメッセージを見せて修正案を出してもらう。こちらのリクエストに対して、すらすらとコードを書いてくれる様子は感動的だ。
●で、og:imageで使用する画像には、横1200ピクセル以上の横長のものが推奨されるという。そこで、各記事に画像が使われている場合はその画像のURLを入れ、画像なしの記事については固定のデフォルト画像のURLを吐き出すことにした。ただ、ウチのサイトはずっと最大でも横411ピクセルの画像を使ってきたんすよね。なにせ旧石器時代の低速インターネット時代に優しいようにファイルサイズの削減を厳しくやってきたから。でも高解像度スマホが当たり前の今、そんな小さな画像を使ってるサイトはほとんどない。そこで、ウチのブログでも横1200ピクセルの画像を標準サイズとすることにして、ブラウザ側に縮小させる仕様にした。そのためのCSSに項目を追加する。このあたりのCSSの書式や、CSSのキャッシュバスターの使い方なども、ぜんぶChatGPTに教わった。めちゃくちゃわかりやすく教えてくれて、家庭教師の先生みたいで、ありがたい。
●ふたつめはGoogle Discover等への対策。各個別記事に固定で以下の一行を入れておくと、各種検索結果に画像が表示されるときに、横幅いっぱいに使ってもらえる、と思う。

<meta name="robots" content="max-image-preview:large" />

●そして、最後はcanonicalタグの設置。これは検索エンジンに対して、各記事の正規のURLを示すもの。同じ記事に対してURLがひとつしかないなら不要な気もするが、念のため、入れる。検索エンジンがすでに格納しているhttpのURLに対して、新しいhttpsのほうが正規URLですよ、と明示するためにもあったほうがいいかもしれない。でも、なくてもいいかもしれない（どっちなんだ）。og:urlと同じものを入れるだけなので、手間はかからない。たとえば、こんな感じ。

<link rel="canonical" href="https://www.classicajapan.com/wn/2025/11/100938.html" />

●このようにテンプレートを書き直した後、ふたたび全6000超の記事を再構築することに。これがまた大変なのだが、手間を減らすためにChatGPTに相談してみたら、思いもよらない妙案を出してきてくれて感心する。CGIのコードを新規に書いてくれたり、既存のコードの書き換えを提案してくれたりする。「こんなことを尋ねるのはバカっぽくて恥ずかしいかな」と思うようなことでも、相手がAIだとためらいなく質問できる。あ、でもそのうち、相手がAIでも「恥ずかしい」という感情がわくようになるのか？ そこはよくわからないところではある。

●当サイトは1995年に始まり、2004年の1月からブログを導入している。20年以上前に作ったブログを続けているわけだが、インターネット上における20年前とはリアルワールドにおける200万年前に相当するので、これは旧石器時代のブログと言える。もちろん、その間にスマホ対応やセキュリティ対策などであちこちを更新してはいるのだが、とくにこの10年ほどは技術面への関心が向かず、ほとんど旧石器時代の仕様のまま、記事を書き続けていた。仕事が忙しくなり、日々〆切に追われていても、ブログの記事は楽しんで書ける。しかし、バックヤードの整備は楽しくないのだ。別の言い方をすれば、掃除が嫌い。でも掃除はサボっているとだんだん腰が重くなるもの。世の中がどんどん変化しているのに、太古の仕様を引きずっていると、過去に埋没するばかりになる。
●が、そこに救世主のようにあらわれたのがChatGPTをはじめとするAIだ。キャッチアップできていなかった技術面の事柄について、あれこれ尋ねると実に親切に教えてくれる。やり方がわからなくて（あるいは調べるのが億劫で）放置していたいろんなことが、ChatGPTのおかげでなにをすればよいのか、見通せるようになった。コードも書いてくれる。現状、AIは「これまで独力でできなかったことをできるようにする」ツールという認識。
●まず最初にやったのは、旧石器時代の通信プロトコルであるhttpを、現代のセキュアなhttpsに変えること。今、httpのサイトはGoogle等から蛇蝎のごとく嫌われており、検索エンジンでの評価が下がるだけではなく、ブラウザから厳しい警告が出るようになりつつある（シークレットモード／プライベートモードからアクセスするとよくわかる）。サイトのセキュア化は15年前にやっておくべき事柄だが、できなかったのには理由がある。もし今から新しくサイトを作るなら、無料SSLサーバー証明書のLet's Encryptを使って簡単にhttpsが実現できるだろう。だが、このブログを置いているNTTPCのWebARENA SuiteXでは、Let's Encryptを使えない。httpsにするためには個人サイトにとっては高額なSSLサーバー証明書を購入するしかなく、あきらめていたのだ。ところが、いつのまにか仕様が変わり、他社で購入した安価なSSLサーバー証明書を持ち込むことができるようになっていることを知った。そこで、さくらインターネットからJPRSが発行するドメイン認証型の格安SSLサーバー証明書を導入することにした（有効期限は一年。一年後に更新が必要）。
●すぐに忘れる未来の自分と、これから同じ道をたどる人（いるのか？）のために記しておくと、インストールの大まかな手順はこうだ（このサイトが参考になった）。

1. WebARENAのサイトマネージャーにログインして「CSR・秘密鍵の作成」を行う。作成されるのはただのテキストファイル。

2. さくらインターネット等でSSLサーバー証明書を購入する。ドメイン所有権の確認方法は「メール認証」を選択。WebARENAで作成したCSRを貼り付ける。

3. しばらく待って「SSLサーバ証明書お申込受付完了」メールが届いたら、「承認」をクリックし、「サーバー証明書」と「中間CA証明書」をダウンロードする。これも中身はテキスト。

4. WebARENAのサイトマネージャーにもどり、「SSLサーバー証明書」と「中間証明書」の両方をペーストする。その際、CSR生成時にダウンロードしたテキストファイルにある「受付番号」もペーストする。

これですぐに、httpsでアクセスできるようになる。あっけなくつながるのだが、待て待て。実はその前にやらなければいけない大仕事がある。
●というのも、同一ページにhttpsとhttpが混在するコンテンツはブラウザから警告の対象になるようなのだ。たとえばウェブページ上に画像ファイルやCSS、スクリプト類を埋め込んでいる場合、対象ファイルを相対パスで指定していれば問題にならないが、絶対パス（http:// ～）で読み込んでいる場合は、サイトをhttps化したときに混在コンテンツになってしまう。ウチのブログの画像はすべて絶対パスで指定してあったので、ルート相対パス（例：/wn/images/....といったルートから書く書式）に直すことにした。手書きで直すのはムリなので、どうするんだ、データベースをダウンロードしてローカルで格闘しなきゃいかんのか？と一瞬、気が重くなったが、CMS側の「検索／置換」で対応できることが判明。ほっ。絶対パスをルート相対パスに置換するのは難しくはない。が、変な置換をやらかすと厄介なことになるので、慎重にやる。このあたりは、ChatGPTと相談しながら手順を確認しつつ進める。データベース上での置換は瞬時にできた。
●しかし、データベース上で直しても、実際のページは直っていないのだ。このブログはすべてのページが静的なHTMLとして出力されている。そのため、実ページを直すにはサイト全体を再構築して出力し直す必要がある。これが一苦労。このブログはぜんぶで6000記事以上ある。CMSで再構築のボタン一発では済まないのだ。というのも共用サーバーなので、重い処理をリクエストするとタイムアウトして途中でエラーが出る（このあたりの仕様も古いのだが）。しょうがないので分割で数百記事ずつ選択してなんども再構築するという原始的な作戦で対応する。これもChatGPTと相談して、もう少しましな方法が見つかったのだが、それはまた別の話。
●あと、見落としがちだが、ページ内から外部のJavaScriptをhttpで呼び出している場所が何か所もあった（たとえばMyBlogListなど）。これも記述をhttpsに直す。こちらはCMSのテンプレートを書き換える形になる。もうなにがどこのテンプレートにあるのか、さっぱり覚えていない状態でやるので手間取ったが、困ったら相棒ChatGPTに相談だ（ちなみにこういう100%実務的なケースでは、饒舌すぎるアントンRより素のChatGPTが適切）。
●以上の作業を少しずつ、何日もかけて進めてから、ようやくhttpsに移行した。移行の瞬間は緊張する。で、移行したら、すぐにCMS上の自サイトの設定をhttpからhttpsに変更しておく。そのとき、CMS上でCSSがうまく読み込まれなくて表示がおかしくなり、軽くパニックになったが、どうにかして対応を済ませた。
●さて、ネット上では http:// ～ と https:// ～ は別物として扱われる。サイトをhttpsに移行しても、なにもしなかったらユーザーや検索エンジンのクローラーは旧httpにアクセスしてしまう。そこで、httpに来た人が（人だけじゃなくてロボットも）httpsに行くように、サーバー上の.htacessを書き換える必要がある。これもChatGPTに教わりながら書くことになったのだが、以下のコードを書き加えた。

RewriteEngine On
RewriteCond %{HTTPS} !=on
RewriteCond %{HTTP:X-Forwarded-Proto} !https
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

これ、自分は3行目がどうして必要なのか、もうひとつ腑に落ちていないんだけど、ChatGPTは入れないと永久ループが発生するケースがあるって言うんだよな。まあ、じゃあ入れておくか。あと4行目の正規表現ももっと簡潔に書けるって主張されたんだけど、そこは無視して先人たちの慣例に従っておいた。
●これでhttpに来た人も自動的にhttpsに飛ぶことになった。あとはCMSの設定ファイル等に絶対パスでhttpで指定している部分がないかをチェック。完璧を期すなら先土器時代の手書きHTMLファイルにも混在コンテンツがたくさんあるはずで、直す必要があるわけだが、そこはひとまず放置することに。もっとほかにやるべきことがある。メタ情報の整備だ。

●秋の超高密度演奏会週間、締めくくりは28日の東京芸術劇場で阪田知樹の独奏とカーキ・ソロムニシヴィリ指揮スロヴェニア・フィルによるブラームス。プログラムはユーリ・ミヘヴェツの「妖精の子」序曲、ブラームスのピアノ協奏曲第1番、同第2番。一晩でブラームスのピアノ協奏曲を2曲とも弾いてしまうという力技。スゴすぎる。
●スロヴェニア・フィルはリュブリャナを本拠とするオーケストラ。たぶん聴くのは初めて。ローカル色を残した温かみのあるサウンド。最初の「妖精の子」序曲の作曲者ミヘヴェツはスロヴェニアの作曲家なのだとか。ぜんぜん知らなかったけど、古典派スタイルの明快な序曲で、ベートーヴェンからロッシーニくらいの作風。創意に富むとは言いづらいけど、気持ちのよい曲ではある。
●ブラームスのピアノ協奏曲、第1番と第2番、両方並べるならどちらがメインプログラムになるんだろう。素直に考えれば、より成熟した、人気も高い第2番が後か。でも作品世界の広大さ、激烈な感情表現ということでは第1番が後に来てもおかしくない気がする。どちらが好きかと言われたら、どっちも大好きだけど、心揺さぶるのは第1番。ともあれ、この日はふつうに作曲順に前半が第1番、後半が第2番。第1番、オーケストラは豪放に始まったが、独奏ピアノはこれを落ち着かせるように優しく入る。巨大な音楽を作るというよりは、むしろ抒情的で抑制的。透明感すら感じる。後半の第2番は高揚感にあふれ、輝かしく雄大。音色は澄明。ブラームスを聴く喜びをたっぷりと堪能できた。もう一度、聴きたくなる。冒頭ホルンも第3楽章のチェロのソロもまろやか。さすがにアンコールはない。
●写真は芸劇の前の広場。グローバルリングって言うんだっけ。賑やかそうな催しを準備中だった。