noteを移植する！

今年の半ばからnoteを始めました。
他人様に読んでもらう努力、というやつをしてみようと思ったのです。

ところが、やっぱり気になるのがバックアップ。そりゃ、なんたって天下のnoteですからセキュリティは金城鉄壁に違いありません。それでも、「もし、ある日突然このサービスが終了してしまったら？」などという不安に駆られるのが人情というモノ。
物書きにとって、一生懸命書いた原稿が吹っ飛ぶというのは耐え難い恐怖なのです。

ここはひとつ、noteにアップした原稿をWordPressに移植する道筋をつけておこうと考えた次第。
今回はその顛末についてです。
一連の作業には、コパイ先生の多大なる支援を受けました。全部理解したとは言いがたい部分もありますので、備忘録としてそのやりとりを編集して収録しています。

noteで記事をエクスポートする手順

まずは、noteから原稿を引っこ抜く手順についてまとめました。

出てくるファイルは.xml。これをWordPressに取り込むには
【ダッシュボード】⇒【ツール】⇒【インポート】から

このへんの作業については、言いたかありませんが既に飽きるほど実績（要はサイト吹っ飛ばし⇒復旧を繰り返した…）があります。気になる方はこちらもどうぞ。

サイト移転に関する後始末

「千柳亭書房」を移転するにあたり、新サーバにWordPressを突っ込む分には有難いことにボタンひとつ なのですが、そこに旧サイトから中身をインポートするのはなかなか大変でした。　サイトのバックアップ...

Wordpressで小説サイト！

2021.11.24

一旦はテストサイトを作って読み込んだりもしたのですが、上手く稼働しなかった⁵ので本館のバックアップをお馴染みSnapUpのステージング機能を使って別環境に展開して読み込ませたのでした。

ところが、noteのルビは青空文庫と同じ仕様でいわゆるRubyタグではありません。そのことに、エクスポートファイルをWordPressにインポートしてみてから気が付きました。つまり、

というくだりが

という状況。noteのタグのままになってしまうのですよ。

じゃあ、変換するか。

コトはタグがちがうというだけのことですから、エディタで修正すれば済むことでしょう。
そんなわけで、まずはお久しぶりのHyperEdit ⁶を起動してxmlファイルを読み込み、変換を試みました。ところが、HyperEditがまさかのフリーズ。それというのもエクスポートは一括なので、全てのコンテンツを一気に放り込んでくれます。…まあ、そうなるわな ⁷。

じゃあ何だ、xmlファイルをWordPressに取り込むときに、noteのルビをhtmlにしてくれる変換ツールのようなものがあればいい！

そう思った柳、昨今はコパイロット先生にお頼みすると素人でもアプリが作れるらしい、という話に乗ってみることにしました。

noteのタグをRubyタグにするアプリをつくりたい

かくて、「noteサイトから.xmlエクスポートファイルのルビをhtmlに変換するアプリ」を作ることにしました。プログラミング言語は初心者にも優しいと評判のPython。

「Python スクリプトをそのまま GUI アプリ化して、ファイルをドラッグ＆ドロップしたら自動でルビ変換して保存する」 という仕様でお願いしてみました。

言うほどラクじゃないですが！

そうは言っても…
Python、聞いたことあるけどさわったことないよという超初心者がアプリを作ろうというのです。言うほどラクじゃないのは覚悟の上。下手するとルビ全部打ち換えたほうが早かったりして。
でもまぁ、とりあえず面白そうじゃありませんか。
何事も経験。まずはやってみることにしました。

Pythonってどうやって使うんだ

そこからか！といわれそうですね。
これについては有難いことに、我が家には専属サポート ⁸がおりますので、とりあえず訊きます。

「Pythonってどーやって使うの」

「VSCodeってエディタがあるからそれ使うの。無料だから」

コードエディタといえば上記HyperEditしか知らない柳ですが、もはや.xmlの読み込みだけで固まってしまったHyperEditのお世話にはなれないことぐらい理解できます。ここは素直に導入しましょう。

Visual Studio Code – コード エディター | Microsoft Azure

Edit, debug, and deploy on Azure with Visual Studio Code, a powerful code editor that works with nea...

azure.microsoft.com

正式名称はVisual　Studio　Codeだそうで。
インストールしたはいいけど、英語の羅列にいきなりヨロケることになりました。でもここはちゃんと日本語化ツールがあるので慌てず騒がずインストールして大丈夫。

必要なもの

標準の Tkinter に加えて、ドラッグ＆ドロップを扱うために tkinterdnd2 を使います。

インストール：

pip install tkinterdnd2

VSCode（コパイ先生の説明）

VS Code（Visual Studio Code）は、Python や Tkinter を扱うときに最も快適なエディタのひとつです。

検索結果の情報を踏まえつつ、本質がつかめるように、構造・特徴・使い方をわかりやすく整理してお伝えしますね。

VS Code は Microsoft が提供する無料のオープンソースのコードエディタです。

• Windows / macOS / Linux で動く
• 軽量なのに高機能
• 拡張機能でどんどん強くなる
• Python や Tkinter の開発に最適

世界中の開発者が使っている、いま最も人気のあるエディタのひとつです。

VS Code の特徴（Python・Tkinterに強い理由）

1. 軽いのに高機能

VS Code は「IDE（統合開発環境）」ほど重くなく、メモ帳のようにサッと開けます。

それでいて、コード補完・デバッグ・Git 管理など、必要な機能は全部そろっています。

2. Python 拡張機能が強力

Microsoft 公式の Python 拡張機能を入れるだけで：

• コード補完
• エラー表示
• 仮想環境の管理
• デバッグ
• フォーマット（整形）

が一気に整います。

3. Tkinter の GUI アプリも快適に開発できる

Tkinter のコードを書いて、

「▶ 実行」ボタンでそのまま GUI を起動できます。

VS Code は Tkinter のような小さな GUI ツールを作るのにちょうどいい軽さです。

4. 拡張機能が豊富

VS Code のマーケットプレイスには数千の拡張機能があり：

• GitHub Copilot（AI コード補完）
• Prettier（コード整形）
• Python
• GitLens
• Docker
• Markdown Preview

など、必要なものだけ追加できます。

5. 完全無料

VS Code は完全無料で使えます。

VS Code の構造

VS Code は次の 4 つで構成されています：

① エクスプローラー

左側にあるファイル一覧。

プロジェクトの全体像が見える。

② エディタ

中央のコードを書く場所。

③ ターミナル

画面下に出るコマンドライン。

Python の実行もここでできる。

④ 拡張機能

左側の四角アイコン。

VS Code を自分好みに育てる場所。

VS Code を日本語化

ここまでは問題なし。
しかし、画面中央に長々とチュートリアルがあって無言の圧力を加えてくるのです。しかもこれが、チュートリアルと言いながらえらく難解。まあ、もともとアプリ使うときにきちんとチュートリアルから見ることはしないクチなので、一応これも訊いてみました。

チュートリアルを見ることは必須ですか？

コパイ先生

いいえ、VS Code のチュートリアルは必須ではありません。
スキップしてもまったく問題なく使い始められます。

はあ、然様で。
では先に進めることにして…次に引っ掛かったのが

VSCode

ワークスペースを信頼しますか？

はい？ワークスペースというと作業環境？知らない言葉が出てきたので、ここはまたご託宣を頂くことにしました。

ワークスペースを信頼しますか、というダイアログの意味を教えて

コパイ先生

VS Code の「ワークスペースを信頼しますか？」ダイアログは、あなたが開いたフォルダ（ワークスペース）内のコードを VS Code が“自動で実行しても安全かどうか”を確認するためのセキュリティ機能です。

「ワークスペースを信頼しますか？」とは

VS Code には Workspace Trust（ワークスペースの信頼） という仕組みがあります。
これは、不審なコードが勝手に実行されるのを防ぐための安全装置です。

選択肢の意味

✔️ 「はい、作成者を信頼します」

→ このフォルダの中身は安全だと判断する
→ VS Code が以下を“自由に実行できる”ようになる

• 拡張機能のコード実行
• デバッグ
• タスク（スクリプト）
• ワークスペース設定の反映
• 自動補完や解析のフル機能

つまり、通常モードで使えるようになります。

✔️ 「いいえ、信頼しません」

→ VS Code は Restricted Mode（制限モード） に入る
→ 以下のような機能が制限される

• タスクの実行
• デバッグ
• 一部の拡張機能
• ワークスペース設定の読み込み
• 自動実行される可能性のあるコード

これは、知らない人が作ったフォルダを開いたときに安全を守るためです。

その必要性

公開リポジトリや他人からもらったフォルダには、

• 悪意のあるスクリプト
• 自動実行される設定
• 危険なタスク

が紛れ込んでいる可能性があります。VS Code はそれを防ぐために、「このフォルダの作者を信頼していい？」と確認してくれているわけです。

さしあたって自分が作るモノについては信頼しとかないと何もできないということがよくわかりましたので、ここは信頼して新しいワークスペース…この場合フォルダと読み替えて良いらしいので、作ることにしました。

ワークスペースをどこに作るのが妥当ですか？

コパイ先生

結論から言うと、「自分が管理しやすい場所」ならどこでもOKですが、実務的には いくつか“定番の置き場所” があります。構造的に整理しておくと後々とても楽になります。用途ごとにフォルダを作ると美しく管理できますよ。

ワークスペースを作る場所のおすすめ

1. ホームディレクトリ直下に「projects」フォルダを作る（最も一般的）

例：

C:\Users\<ユーザー名>\projects\

その中にプロジェクトごとのフォルダを作る：

C:\Users\<ユーザー名>\projects\python-test\
C:\Users\<ユーザー名>\projects\my-app\

メリット

• どこに何があるか一目で分かる
• バックアップしやすい
• VS Code で開くときも迷わない
• 仮想環境（.venv）も一緒に置きやすい

2. ドキュメント内に「VSCode」や「Python」フォルダを作る

例：

C:\Users\<ユーザー名>\Documents\VSCode\

メリット

• Windows の標準的な整理方法
• OneDrive と連携している場合は自動バックアップされる

3. Dドライブなど別ドライブに「dev」フォルダを作る（開発者に多い）

例：

D:\dev\
D:\workspace\

メリット

• Cドライブを汚さない
• 大規模プロジェクトでも安心
• SSD/HDD を分けている場合に便利

避けたほうがいい場所

以下は VS Code や Python が不安定になりやすいので非推奨です。

• デスクトップ直下
  → ファイルが散らかりやすい
• ダウンロードフォルダ
  → 一時ファイルが混ざる
• OneDrive / iCloud / Dropbox 直下
  → 仮想環境や大量のファイルが同期されてトラブルの原因に
• Program Files や Windows フォルダ
  → 権限の問題で動作が不安定になる

ホーム（ユーザディレクトリ）直下に「projects」フォルダを作る方式が良いという結論のようです。更には作るアプリごとにフォルダを分けておくほうがよさげ。
Program Files や Windows フォルダが権限の問題で動作が不安定になるというのは盲点でした。プログラムだからProgram Filesだろうというのは紛うことなき素人考えだということですね。

ここらで用語が増えてきて若干混乱気味なので、説明のつかない用語は片っ端から訊いていきます。
まず仮想環境。

仮想環境とはなんですか

コパイ先生

仮想環境（virtual environment）は「プロジェクトごとに独立した“ミニPython環境”を作る仕組み」と捉えると、とても分かりやすいと思います。

仮想環境とは

Aプロジェクト用のPython
Bプロジェクト用のPython

python -m venv .venv

成程、Pythonでアプリを作るには、まずは仮想環境というやつを作ってその中にコードファイル（.py）を置かなければならないらしい。では順を追ってお願いしてみましょう。

仮想環境をつくってそこに新しい.pyファイルを作りたいです 手順を教えて

コパイ先生

「仮想環境を作る → その中で新しい .py ファイルを作る」という流れを、VS Code を使った最も分かりやすい手順でまとめますね。この手順を一度覚えればずっと迷わず進められます。

基本手順といえそうなので、これもまとめました。

Pythonでプログラムを作って走らせるまでのフロー

① プロジェクト用のフォルダを作る

まずは作業場所（ワークスペース）を作ります。

例：

C:\Users\ユーザ名\projects\myapp\

Windows のエクスプローラーで作っても、VS Code から作ってもOK。

② VS Code でそのフォルダを開く

VS Code を開いて：

• ファイル → フォルダーを開く
• さっき作った myapp フォルダを選ぶ

これで VS Code がそのフォルダをワークスペースとして扱います。

③ VS Code のターミナルを開く

上部メニューから：

• ターミナル → 新しいターミナル

すると、画面下にターミナルが開き、
カレントディレクトリが myapp になっているはずです。

④ 仮想環境を作る（最重要）

ターミナルで次を実行：

python -m venv .venv

すると、myapp フォルダの中に .venv というフォルダができます。
これが 仮想環境そのものです。

⑤ VS Code に仮想環境を選ばせる

VS Code は自動で .venv を検出しますが、念のため手動で選ぶ方法も書いておきます。

1. Ctrl + Shift + P（コマンドパレット）
2. 「Python: Select Interpreter」と入力
3. .venv と書かれた Python を選ぶ

左下に

.venv (Python 3.x)

と表示されれば成功。

⑥ 新しい .py ファイル（プログラム本体）を作る

エクスプローラー（左側のファイル一覧）で：

• 新しいファイル をクリック
• 名前を main.py などにする

これで .py ファイル（プログラム本体）が作成されます。

⑦ 仮想環境で .py を実行する

ターミナルで：

python main.py

これで .venv の Python が使われて実行されます。

補足

myapp/
    ├─ .venv/      ← 仮想環境
    ├─ main.py     ← Pythonコード
    └─ requirements.txt（必要なら）

という構造にしておくと、後から見てもとても分かりやすくなります。

Pythonでドラッグ＆ドロップ対応の GUI アプリを作るコード

以下のコードは：

• ウィンドウにファイルをドロップすると
• XML を読み込み
• 「｜親文字《ふりがな》」を <ruby> タグに変換し
• 同じフォルダに converted_ファイル名.html として保存する

というアプリです。

import tkinter as tk
from tkinterdnd2 import DND_FILES, TkinterDnD
import re
import os

def convert_aozora_ruby(text):
    pattern = r'｜(.*?)《(.*?)》'
    return re.sub(pattern, r'<ruby>\\1<rt>\\2</rt></ruby>', text)

def handle_drop(event):
    file_path = event.data.strip("{}")  # パスの {} を除去
    if not os.path.isfile(file_path):
        return

    with open(file_path, "r", encoding="utf-8") as f:
        xml_text = f.read()

    converted = convert_aozora_ruby(xml_text)

    out_path = os.path.join(
        os.path.dirname(file_path),
        "converted_" + os.path.basename(file_path).replace(".xml", ".html")
    )

    with open(out_path, "w", encoding="utf-8") as f:
        f.write(converted)

    status_label.config(text=f"変換完了: {out_path}")

# --- GUI ---
root = TkinterDnD.Tk()
root.title("ルビ変換ツール（ドラッグ＆ドロップ対応）")
root.geometry("500x200")

label = tk.Label(root, text="ここに XML ファイルをドロップしてください", width=50, height=10, bg="#f0f0f0")
label.pack(pady=20)

label.drop_target_register(DND_FILES)
label.dnd_bind("<<Drop>>", handle_drop)

status_label = tk.Label(root, text="")
status_label.pack()

root.mainloop()

コードの使い方

1. 上記コードを ruby_converter_app.py などの名前で保存
2. pip install tkinterdnd2 を実行
3. python ruby_converter_app.py を実行
4. 表示されたウィンドウに XML ファイルをドラッグ＆ドロップ

すると、同じフォルダに：

converted_元ファイル名.html

が生成されます。

Python + Tkinter を VS Code で動かす流れまとめ

1. VS Code をインストール（公式サイトから無料でダウンロード可能）
2. Python 拡張機能を入れる
3. Python をインストール（未インストールの場合）
4. .py ファイルを作る
5. コードを書く
6. 画面右上の「▶」で実行

これだけで Tkinter の GUI が立ち上がります。

ここまでできれば、動作するプログラムができそうです。しかし、予想通りと言いますか…一筋縄ではいきませんでした。
この続きは、次の投稿で。

1. 途中からパスワードが違うといわれてログインできなくなったのです。configあけてパスワード確認、そこからパスワードコピペしてみたんだけどこれもだめ。諦めてテストサイトそのものを削除した次第。この現象についてもいずれ究明してやろうと思っているのですが、今回はお預け。
2. DicreのHTML記述支援エディタ。柳が初めてお金を払ったシェアウエア。これがなければ千柳亭書房は誕生しませんでした。ちょっと吃驚したのですが公式ページがいまだにhttpサイトなのでブラウザによっては弾かれる可能性アリ？http://www.dicre.com/soft/heditsw.htm
3. ファイルサイズとしては148kbくらいのもんで、それほど巨大というわけではないのですが。
4. ウチの旦那。何でも屋ですが大学は情報科学専攻。じゃあアプリそのものを頼んじまえという話もあるのですが、Webコンテンツ作成については完璧と言っていいほど話が噛み合わないのでそこは自前でやります。
5. 途中からパスワードが違うといわれてログインできなくなったのです。configあけてパスワード確認、そこからパスワードコピペしてみたんだけどこれもだめ。諦めてテストサイトそのものを削除した次第。この現象についてもいずれ究明してやろうと思っているのですが、今回はお預け。
6. DicreのHTML記述支援エディタ。柳が初めてお金を払ったシェアウエア。これがなければ千柳亭書房は誕生しませんでした。ちょっと吃驚したのですが公式ページがいまだにhttpサイトなのでブラウザによっては弾かれる可能性アリ？http://www.dicre.com/soft/heditsw.htm
7. ファイルサイズとしては148kbくらいのもんで、それほど巨大というわけではないのですが。
8. ウチの旦那。何でも屋ですが大学は情報科学専攻。じゃあアプリそのものを頼んじまえという話もあるのですが、Webコンテンツ作成については完璧と言っていいほど話が噛み合わないのでそこは自前でやります。