2025年5月の活動まとめ：GitHub連携 × Pyodide 実行環境の構築とZenn記事への自動反映

<details><summary>【活動履歴】原文時系列</summary>

◆2025年5月18日までにやったこと
①githubのリポジトリをまたいでファイルを読み込む方法
・exportとimport
＊クロスアサインの心配はしたが問題なし
②pydoidの実装
・画面反映に数分かかる場合があるが問題なし
③①と②の技術を掛け合わせて別リポジトリでのpydoidによるPythonファイル実行を試す
・他のリポジトリからpydoid実装の実現完了
・元のリポジトリからpydoid実装リポのindex.htmlを実行
・元のリポジトリから他リポへのファイル名受け渡し完了
・元ファイルからそのファイル名と位置を渡しpydoidを実行
④pydoidで挨拶Pythonファイル実行による入出力を実装する
まずは挨拶ファイルで以下が適用できるか試す
・pydoidの実体のmain.jsの設定と調整およびhtmlや［入力，測定，出力］のファイルへの分割
・入力関数 js部分の実現完了
・測定関数 py部分の実現完了
・出力関数 js部分の実現完了

◆2025年5月19日までにやったこと
・cssによる出力画面調整
・・codeの左揃え
・・初期改行設定
・pyコードをjsでひろって全て表示させる機能の実装
・outputファイルはpyファイル名に紐付いていたが、なしにして統合した
・出力はjsになるので出力形式の整形もJSで行うこととした
・・関連してmeasure.pyの不要記述を整理した
・ダイアログを実装しブラウザ依存しない形とした

◆2025年5月23日までにやったこと
・pythonですべて処理する場合に備えてコードをまとめてgithubへの整理を想定
＊初心者向けに置いておいた方がよく、持ってくると重複する
・・github連携することでリポジトリのpyファイルの内容を記事のコードブロックに反映できるようになった
・＊actionsを使って自動更新
・＊具体的にはpyファイルのpushで発火し、挿入pyを使って変更内容を記事に即日反映させる仕組み
・pyファイルの管理方法や使用の流れを想定し扱いやすい構成に調整
・記事内に複数のコードブロックがあっても対応できる形に変更

◆2025年5月24日までにやったこと
・inject_snipet内でsnipetの構文エラーを検出しようとしたが断念
・スクラップのコードのgist対応
・・gistのコピペで末尾のhostedを除く方法を検討したが断念
・・standaloneを処分

◆2025年5月26日までにやったこと
・実行結果を自動反映できるようにする
・・inject_resultで実行結果をmdの末尾に追加できるようになった
・・inject_resultで実行結果をmdの所定のコードブロックに追加できるようになった
・入力を自動反映できるようにする
・・inject_resultで実行結果同様の処理で可能にする
・・重さを改善するために正規表現を使った辞書機能re.subでの一括処理機能とする

◆実装注意点
・Inputファイルは都度作る必要があり関連してエラーファイルも必要である
・github pagesでのhtml表示にはデプロイとキャッシュ更新の関係から時間がかかる
＊場合によってはキャッシュを強制削除する
＊もしくはタイムスタンプの活用
↑未挑戦
</details>

---
# 🎯 概要
5月は、GitHub Pages上で動くPyodide環境を作りました。
リポジトリに置いたpyファイルを読み込み、実行結果ごとZenn記事に自動で反映する仕組みです。
pyodide‑runner.html?ui=<対象.pyの語幹>にアクセスすれば、コード確認と動作確認を同時に実行できます。
変更が必要になったらリポジトリ側のコードだけ直せば対応可能。
記事内のコードブロック（コード本体・入力・出力）は自動更新されます。
さらに、再利用用のテンプレートにあたるGitHub Actionsの呼び出し用YAMLもREADMEに用意しています。

# 🔧 技術スタック
- Pyodide（WebAssemblyによるPython実行環境）
- JavaScript（入出力処理、動的HTML反映）
- GitHub Actions（記事の自動更新）
- Markdown + 正規表現（コードスニペットと結果の挿入）
- GitHub Pages（HTMLデプロイ）

# 📌 活動履歴詳細
1. GitHubリポジトリをまたぐファイル読込
   - export / import により、リポジトリ間の連携を実現
   - クロスアサインによる制約もなく、問題なし
2. Pyodideの基本実装
   - 実行環境により、数分の遅延あり（問題なし）
   - JavaScript・HTML・CSSでUI構築を開始
3. 複数リポジトリにまたがるPython実行の実現
   - 別リポジトリの pydoid を元リポジトリから呼び出し
   - ファイル名とそのパス情報の動的受け渡しを実装
   - 実行は元リポジトリから index.html を呼び出して完了
4. 入出力処理の3ファイル構成実装
   - input.js, measure.py, output.js の分割と実装
   - CSSでhtml表示整形（左揃え、初期改行など）
   - Pythonコード全文表示機能も実装
   - 出力形式はJavaScriptで整形統一
5. GitHub連携による更新自動化
   - Actionsを用いて .py ファイルの push トリガーで記事を即時更新
   - 記事内に複数コードブロックがある場合でも対応できる構造
   - inject_snipet, inject_result による反映処理を追加
6. 実行結果・入力の自動反映
   - 実行結果をMarkdownの末尾に自動挿入
   - 実行結果をMarkdownの特定ブロックに自動挿入へ変更
   - 入力も同様に処理可能とし、正規表現 + re.sub による一括辞書変換で高速化
   - コード軽量化・構文チェック機能の検討

# 🚧 実装上の注意点
- Input ファイルは動的生成の必要があり、エラーファイルの準備も必須
- GitHub Pagesでの反映にはキャッシュとデプロイ反映の遅延がある
  ＊対処法：キャッシュ強制削除 or タイムスタンプによる更新

# 📁 成果物
- [Pyodide実行環境リポジトリ](https://github.com/zoldof/pyodide)	
- [Pyodideサンプルページ](https://zoldof.github.io/pyodide/pyodide-runner.html?ui=hello_01)
- [Github Actionsテンプレ](https://github.com/zoldof/zenn-content#readme)	

# 🧩 今後の展望
- 挨拶ファイル以外への応用（テンプレート形式の公開）
- inject_snipet 構文エラーの静的解析
- GitHub Pagesのキャッシュ処理改善（タイムスタンプ方式の実装検討）

# 📝 おわりに
初心者がGitHub + Python + Web実行環境を一気に試せるよう、できるだけシンプルで使いやすい構成を意識しています。
興味ある方はぜひ試してみてください！