続・noteを移植する!

WordPressで小説サイト

noteからエクスポートしたファイルのルビがWordPressに対応していなかったので、コパイ先生に訊きながら変換アプリをつくってみようと画策し…とりあえず道筋がついたのが前回までの話。

VSCodeのコンソール

ここで、VSCodeのコンソールについておさらいを。
VSCodeの画面です。

① エクスプローラー:左側にあるファイル一覧。プロジェクトの全体像(どんなファイルで構成されているか)が見える。デフォルトで表示されているが、④などをポチると隠れるので、その場合一番上のファイルっぽいアイコンを叩くと出てくる。
② エディタ:まんま、コードを書く場所。右クリックすると出てくるメニューでPythonの実行というコマンドもあるので便利かも。
③ ターミナル:画面下に出るコマンドライン。Python の実行もここでできるが、当然ながらファイル名を入力しないといけない。
④ 拡張機能:左側の四角アイコン。VS Codeに機能を追加する。ポチると現在インストールしている機能が表示される(下の図)し、ここから新しい機能を付加したりインストール済みの機能のアップデートもできる…らしい。

拡張機能のアイコンを叩くと出てくる画面。
残念ながらここは日本語化されないので根性で読みます

①に必要な環境を作り、コパイ先生提供のコードを②に貼り付けて編集、③で実行コマンドを打ち込むというのが主な流れになるという次第。

しかしまぁ、予想どおりというかいきなりエラーになりました。
エラーメッセージを見てもなんのことやらわからないので、そこをスクショしてコパイ先生に抛り投げてみました。

このようなエラーが出ました。対処法を教えて

コパイ先生
コパイ先生

画像の内容から、PowerShell でruby_converter_app.pyを直接実行しようとして「コマンドが見つかりません」というエラーが出ていることが分かります。これはとてもよくあるケースなので、丁寧に対処法を説明しますね。

有難いことです。以下、コパイ先生の講釈。

Pythonで実行していない

PowerShell は ruby_converter_app.py を「コマンド」として認識しようとしますが、
.py ファイルは Python によって実行されるべきものなので、
そのままファイル名だけで実行しようとするとエラーになります。

正しい実行方法(仮想環境が有効な状態で)
方法①:python コマンドで実行する

ターミナルで次のように入力してください:

python ruby_converter_app.py

これで Python がそのファイルを読み込んで実行してくれます。

方法②:ファイルのパスを明示する(補足)

もしファイルがカレントディレクトリにあるなら、次のようにしてもOKです:

.\ruby_converter_app.py

ただしこの方法は、.py ファイルに「実行可能な shebang(#!)」が書かれていて、
かつ .py ファイルが Python に関連付けられている場合に限ります。
Windows では通常、方法①の python ファイル名.py が確実です

仮想環境が有効か確認するには?

ターミナルの先頭に

(.venv)

のような表示があれば、仮想環境が有効です。

もし表示されていなければ、次のようにアクティベートしてください:

.venv\Scripts\Activate

その後に:

python ruby_converter_app.py

を実行すればOKです。


今後は .py ファイルを実行するときは、必ず python ファイル名.py の形式で実行すると覚えておくと安心です。


これでひとつ解決しましたが、今度は上記のような実行コマンドを入力したのに何も起きないという事態が発生しました。何も起きずにプロンプトだけがぺかぺか、という状況。

このように対処(python ファイル名.py の形式で実行)しましたが反応がありません。どう解釈すべきですか

コパイ先生
コパイ先生

仮想環境をアクティベートしてruby_converter_app.pyを実行したのに「何も表示されない」という状況ですね。これはエラーではなく、スクリプトが“何も出力しないまま終了した”可能性が高いです。

コードを拝見すると、GUI アプリとして正常に構成されており、ドラッグ&ドロップで XML ファイルを受け取ってルビ変換する設計になっています。
ただ「実行しても反応がない」という場合、以下の点を確認すると原因が絞り込めます。

反応がないときのチェックポイント

1. ウィンドウは表示されているか?
  • root.mainloop() があるので、GUI ウィンドウは表示されるはずです
  • もし表示されない場合は、TkinterDnD の初期化が失敗している可能性があります

tkinterdnd2 の注意点

  • tkinterdnd2 は pip でインストールできますが、環境によっては GUI が表示されてもドロップが反応しないことがあります
  • 特に Python 3.11 以降や仮想環境によっては DLL の読み込みに失敗することも

既にここで躓いたらしいことはわかりましたが
後日のためを考えて、ここで提示された他の可能性についても併記しておきます。
時間のある方のみどうぞ

他の可能性について+

2. ドラッグ&ドロップは機能しているか?
  • label.drop_target_register(DND_FILES)label.dnd_bind("<<Drop>>", handle_drop) は正しい構文です
  • ただし tkinterdnd2Windows でのみ安定動作し、Python 3.11 以降では不安定なこともあります
3. ドロップしたときに handle_drop() が呼ばれているか?
  • ドロップしても status_label に「変換完了: …」が表示されない場合、handle_drop() が呼ばれていない可能性があります
  • print() を追加して確認すると良いです:
def handle_drop(event):
    print(f"ドロップされた: {event.data}")  # ← 追加
    ...

デバッグのための追加ポイント

1. ドロップイベントの確認
def handle_drop(event):
    print(f"event.data = {event.data}")
2. ファイルが存在するかの確認
if not os.path.isfile(file_path):
    print("ファイルが存在しません")
    return
3. 変換結果の確認
print("変換結果:", converted[:100])  # 最初の100文字だけ表示

このコードは「構造は正しいが、イベントが発火していない」可能性が高いと考えられます。


とどのつまり、コードそのものは正しいがGUIを作っているTkinterDnD2とやらが上手く動いていない。では、そのTkinterDnD2とやらがインストールされているかどうかから始めたほうがよさそう(してなかったんかい、というツッコミはご勘弁)。

TkinterDnD2 のインストール方法

TkinterDnD2 は Tkinter にドラッグ&ドロップ機能を追加する拡張で、pip で簡単にインストールできます。

1. インストールコマンド

以下をターミナル(PowerShell / CMD / Terminal)で実行します:

pip install tkinterdnd2

2. インストール確認(最小サンプル)

インストール後、次のコードが動けば成功です:

from tkinterdnd2 import TkinterDnD root = TkinterDnD.Tk() root.mainloop()

3. よくある注意点

● 「ModuleNotFoundError: tkinterdnd2」が出る場合

  • pip が別の Python にインストールされている
  • 仮想環境を使っているのに pip がグローバルを指している
  • Windows の場合、Microsoft Store 版 Python だとうまく動かないことがある

ブログ記事でも、pip で入れ直すことで解決した例が紹介されています。

やっぱり入れ直しは基本らしいので、とりあえずもういっぺん。

条件は満たしている筈なんですが、これでも反応が芳しくない。

コパイ先生
コパイ先生

もし VS Code が出している 具体的な警告メッセージ を貼ってくれたら、ピンポイントで「これです」と断定できますよ。

VS Code が出している 具体的な警告メッセージ を知る方法はありますか

コパイ先生
コパイ先生

もちろんありますよ。VS Code は「どこに何の警告が出ているか」を確認するための仕組みがいくつか用意されています。慣れると一瞬で原因にたどり着けるようになります。

それを早く言え。

VS Code で “具体的な警告メッセージ” を確認する方法

1. エディタ右上の「電球マーク」をクリック

コードの左側に黄色い波線(警告)が出ている行にカーソルを置くと、右側に電球アイコン が出ます。クリックすると「この警告の内容」+「修正候補」 が表示されます。

2. 波線の上にマウスを乗せる

最も手軽な方法です。黄色い波線の上にカーソルを置く → 警告メッセージがポップアップで表示されます。

3. 画面下の「問題(Problems)」タブを見る
  1. VS Code の左下あたりにある 「Problems(問題)」 タブを開く
  2. すべての警告・エラーが一覧表示される
  3. クリックすると該当行にジャンプするメッセージ全文が読める

これは複数の警告があるときに便利です。

4. コマンドパレットで確認する方法

Ctrl + Shift + P

を押して:

View: Toggle Problems

と入力すると「問題」タブを開けます。

コパイ先生
コパイ先生

VS Code が出している警告メッセージをここに貼ってくれれば、「どの行の何が問題か」を一緒に正確に特定できます。スクショでも、テキストでも大丈夫です。

だからそれ、早く言って。
そんなわけで、警告文をスクショしてアップロードしました

コパイ先生
コパイ先生
  • .venv 仮想環境はアクティブ ✅
  • tkinterdnd2バージョン 0.4.3 でインストール済み✅
  • python ruby_converter_app.py はエラーなく実行されている✅
  • VS Code 上でコードは保存されている

つまり、実行環境としては完全に整っている状態です。
一方で

  • test.py を実行しても エラーは出ないが GUI が表示されない
  • PowerShell に何も出力されない(=クラッシュではない)

VS Code の Pylance が「tkinterdnd2 が見つからない」と言っているのは、補完・型チェック用の環境が.venv を見ていないからです。

解決策
1. Python interpreter を .venv に切り替える
  1. Ctrl + Shift + P を押す
  2. 「Python: Interpreter を選択」
  3. project/python/.venv/Scripts/python.exe を選択

2. .vscode/settings.json を明示的に設定(必要なら)

ファイルが存在しない場合はsettings.jsonというファイルを作成して、以下を追加:

{
  "python.defaultInterpreterPath": ".venv\\\\Scripts\\\\python.exe"
}

これで VS Code が .venv を確実に使うようになります。


3. VS Code を再起動 or ファイルを保存し直す

これで Pylance のキャッシュが更新され、警告が消えるはずです。

もはやどれが効いたのかは判らないくらいトライを繰り返しましたが、ようやくGUIは動いてファイルを放り込むことが出来るようになりました。ところが今度は、変換されないまま出力されるという状況が発生。

物書きのはしくれとして、「金銭かねをかけずに自分の本を出す方法」を探究中。

というくだりが

物書きのはしくれとして、「|金銭《かね》をかけずに自分の本を出す方法」を探究中。

という状況。noteのタグのまま、変換スクリプトは反応していないのです。これも、上記をそのままスクショして当該部分のコードも貼り付けて送ってみました。

コパイ先生
コパイ先生

なるほど。ご提示のテキストは青空文庫形式でルビが記述されていますが、変換スクリプトがうまく反応していないようですね。

解説

今のスクリプトでは、次のような正規表現でルビを変換しています:

pattern = r’|(.*?)《(.*?)》’

​これは「|(縦棒)」がある語に対してのみルビを変換する設計です。🔍 しかし、実際のテキストには…

 「|金銭《かね》をかけずに

​と、縦棒が|(半角)になっているため、正規表現|(全角)ではマッチしません。

解決法

方法1:半角・全角どちらにも対応するように修正

pattern = r'[||](.*?)《(.*?)》’

これで、全角|と半角|の両方にマッチします。

方法2:事前に全角に統一する(安全策)

text = text.replace(‘|’, ‘|’) # 半角を全角に変換

​その後、元の正規表現を使えば OK:

pattern = r’|(.*?)《(.*?)》’

🔧 まとめ
問題対処法
半角 | が使われている[||] で両方対応 or replace(‘|’, ‘|’) で統一
正規表現がマッチしないパターンを修正する必要あり

この修正でルビ変換が機能するはずです。

成程、全角/半角の違いとは、なんともベタな間違いをやらかしたものです。
方法①はコードのエラーを指摘されたので、方法②をとることにしました。
VSCodeでxmlを読み込んで、置換コマンドで[|]を[|]に置き換えたところ、今度こそ変換されました。

できました! 次は、このアプリをデスクトップから実施できるようにしたいです

コパイ先生
コパイ先生

GUIが動作した今、次は「デスクトップから直接起動できるアプリ」にするステップですね。以下に、Windows環境での実現方法をわかりやすく整理します。

Python GUIアプリをデスクトップから起動する方法

✅ 方法1:バッチファイル(.bat)を作成する


プロジェクトフォルダに run_app.bat というファイルを作成
中身を以下のように記述:
@echo off
call .venv\Scripts\activate
python ruby_converter_app.py

この .bat ファイルを デスクトップにショートカットとして置けば、ダブルクリックで起動できます。

✅ 方法2:Pythonファイルにアイコンをつけて実行形式にする(pyinstaller)


仮想環境をアクティブにした状態で次をインストール:
pip install pyinstaller

​実行ファイルを作成:
pyinstaller –onefile –windowed ruby_converter_app.py

​-windowed をつけることで、黒いコンソール画面が出ないようになります
dist フォルダの中に ruby_converter_app.exe が生成されます

ruby_converter_app.exe をデスクトップにコピーすれば、ダブルクリックで起動できます

✅ 方法3:Windowsショートカットから直接起動(Pythonファイルのまま)
デスクトップで右クリック → 新規作成 → ショートカット

「項目の場所」に以下を入力:
C:\Users\<ユーザ名>\project\python.venv\Scripts\python.exe ruby_converter_app.py

​「次へ」→ 名前をつけて完了

※ .py ファイルの場所が正しいことを確認してください


✨補足:アイコンや見た目を整えるには

pyinstaller のオプションでアイコンを指定できます:
pyinstaller –onefile –windowed –icon=icon.ico ruby_converter_app.py

かくて、無事にデスクトップに「ルビ変換」ツールのアイコンが座りました。

ここまでやって、はたと気づいたのですよ。
xmlはエクスポート形式で、読ませようと思えばWordPressに読ませることができます。
しかし、htmlにしてしまうと…直接貼り付け(コピペ)するしかなくなる。

うわ、莫迦やった~~~~~!

VSCode + 正規表現での検索・置換

noteのアイキャッチ用にコパイ先生にお願いした没カット

結局、VSCodeでnoteのルビタグを正規表現 2で検索し、

|(.*?)《(.*?)》

|が全角でも半角でも反応するようにするなら

[||](.*?)《(.*?)》

これも正規表現で置換しまして…

<ruby>$1<rt>$2</rt></ruby>

.xmlをそのままWordPressに読ませたのでした。
出ましたよルビ。ただし、読み込ませたxmlは全てひとつながりの投稿で出てきてしまいますけどね。

半日費やしてなにやってたんでしょう…
まあ、今回は正規表現を使用できるエディタ「VSCode」のお勉強ができたことと、Pythonでアプリを作る流れというやつを体験できた(理解できたとは言うまい…)というところが、唯一の収穫ですかね。

ちなみに、アイキャッチのもふもふ猫は近所の野良猫の写真をコパイ先生に手伝って貰ってイイ感じに編集したものです。賛否両論あるでしょうが、文句言うにしても使いこなしてからというのがスジというものでしょう。

とりあえず触ってみようと思うのですよ。

  1. 正規表現【Regular Expression】文字列のパターン(規則)を表すためのミニ言語(コパイ先生表現)。」文章の中から「特定の形をした文字列だけを見つける」「置き換える」ために使います。
  2. 正規表現【Regular Expression】文字列のパターン(規則)を表すためのミニ言語(コパイ先生表現)。」文章の中から「特定の形をした文字列だけを見つける」「置き換える」ために使います。

コメント