【活動履歴】原文時系列
◆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表示にはデプロイとキャッシュ更新の関係から時間がかかる
＊場合によってはキャッシュを強制削除する
＊もしくはタイムスタンプの活用
↑未挑戦
🎯 概要
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デプロイ）
📌 活動履歴詳細
- GitHubリポジトリをまたぐファイル読込
- export / import により、リポジトリ間の連携を実現
- クロスアサインによる制約もなく、問題なし
- Pyodideの基本実装
- 実行環境により、数分の遅延あり（問題なし）
- JavaScript・HTML・CSSでUI構築を開始
- 複数リポジトリにまたがるPython実行の実現
- 別リポジトリの pydoid を元リポジトリから呼び出し
- ファイル名とそのパス情報の動的受け渡しを実装
- 実行は元リポジトリから index.html を呼び出して完了
- 入出力処理の3ファイル構成実装
- input.js, measure.py, output.js の分割と実装
- CSSでhtml表示整形（左揃え、初期改行など）
- Pythonコード全文表示機能も実装
- 出力形式はJavaScriptで整形統一
- GitHub連携による更新自動化
- Actionsを用いて .py ファイルの push トリガーで記事を即時更新
- 記事内に複数コードブロックがある場合でも対応できる構造
- inject_snipet, inject_result による反映処理を追加
- 実行結果・入力の自動反映
- 実行結果をMarkdownの末尾に自動挿入
- 実行結果をMarkdownの特定ブロックに自動挿入へ変更
- 入力も同様に処理可能とし、正規表現 + re.sub による一括辞書変換で高速化
- コード軽量化・構文チェック機能の検討
🚧 実装上の注意点
- Input ファイルは動的生成の必要があり、エラーファイルの準備も必須
- GitHub Pagesでの反映にはキャッシュとデプロイ反映の遅延がある
＊対処法：キャッシュ強制削除 or タイムスタンプによる更新
📁 成果物
🧩 今後の展望
- 挨拶ファイル以外への応用（テンプレート形式の公開）
- inject_snipet 構文エラーの静的解析
- GitHub Pagesのキャッシュ処理改善（タイムスタンプ方式の実装検討）
📝 おわりに
初心者がGitHub + Python + Web実行環境を一気に試せるよう、できるだけシンプルで使いやすい構成を意識しています。
興味ある方はぜひ試してみてください！