【PyScript】py-configタグを使ったライブラリのインポートでインデントが崩れる問題[Python]-未解決

2023年8月23日2023年9月22日

URLをコピーしました！

PyScript

前回、PyScriptで自作ライブラリをインポートする方法を紹介しました。

あわせて読みたい

【PyScript】自作ライブラリをインポートする方法[Python]-未解決【PyScript】前回、PyScriptで標準ライブラリや外部ライブラリをインポートする方法を紹介しました。今回はPyScriptで自作のライブラリをインポートする方法を紹介し…

その際、自作ライブラリをインポートするのはローカル環境（Visual Studio CodeのLive serverなど）ではうまくいくのに、サーバーではエラーとなるというお話をしました。

それはそれで原因も対策もわからないのですが、さらに自作ではない外部ライブラリをインポートした際にもおかしな現象が起こったのでまとめておこうと思います。

おかしな現象とはサーバー環境で実行する際、py-configタグを使うとインデントが崩れるという問題です。

HTMLのようにインデントがプログラムの見やすさだけに影響する場合はインデントが崩れても問題ないのですが、PyScript、またその基本となるPythonはインデントでプログラムのブロックを見分けているプログラミング言語です。

そのためインデントが崩れるとエラーとなり、プログラムを実行できません。

まだ未解決なので、もし原因と対策をご存知の方がいらっしゃいましたら、コメント欄にでもご連絡いただけますと助かります。

それでは何が起こったのかを見ていきましょう。

問題のないプログラム

まずこちらのプログラムを基本として見ていきましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
    <div id="text"></div>
    <py-script>
        Element("text").write("Hello World!")
    </py-script>
</body>
</html>

このHTMLをローカル環境で実行してみます。

特に問題なく実行することができました。

ブラウザ上でソースを見てみます。

ソースも特に問題は見られません。

このHTMLをサーバーにアップしてアクセスし、ソースを確認してみます。

特に問題は見られません。

通常はこのようにローカルで見ようが、サーバーで見ようが同じように動作するはずです。

外部ライブラリをインポートするとインデントが消える？

次に外部ライブラリをインポートした場合を見てみます。

まずはpy-configでライブラリを指定したところまでで試してみます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
    <py-config>
        packages = ["numpy"]
    </py-config>

    <div id="text"></div>
    <py-script>
        Element("text").write("Hello World!")
    </py-script>
</body>
</html>

ここまでは特に問題ありません。

次にライブラリをインポートしてみます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
    <py-config>
        packages = ["numpy"]
    </py-config>

    <div id="text"></div>
    <py-script>
        import numpy as np
        Element("text").write("Hello World!")
    </py-script>
</body>
</html>

この場合、インデントが消えてしまいました。

そしてこの状態でインデントが必要なfor文を追加してみます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
    <py-config>
        packages = ["numpy"]
    </py-config>

    <div id="text"></div>
    <py-script>
        import numpy as np
        Element("text").write("Hello World!")
        for i in range(10):
            display(i)
    </py-script>
</body>
</html>