【Chromebookを用いたPython実行】Web VSCode編

以前までの記事(Python環境構築実行例)を参照していただけると、ChromebookでもPythonが実行可能であることを示した。しかし、環境構築方法は、使用している機器に依存して変わる。また、Chromebookでは十分な計算リソースが確保できない場合が多いので、Chromebookのローカル上での実行を避けたい場合は多いと思われる。本問題を解決する方法の1つとして、Web上でのPythonの実行方法を提示する。

Web版のVisual Studio Codeの起動

このVS Codeを用いるにはGithubのアカウントが必要となるので、まずは、こちらからGithubアカウントを取得されたい。

アカウント取得後、以下のように適当なPrivateリポジトリを作成する。まずは、ホーム画面の右上にあるアイコンをクリックし、リポジトリ一覧を選択する。

リポジトリ一覧の選択

遷移後の画面の右上に存在するリポジトリ新規作成ボタンをクリックして、リポジトリの作成を開始する。

リポジトリの新規作成

その後、適宜、リポジトリの基本情報を入力する。

リポジトリの基本設定

上記が終了したら、以下のURLにおいて、githubユーザ名と上述で作成したリポジトリ名を代入し、使用しているブラウザのURL欄に入力する。

https://insiders.vscode.dev/github/{githubのユーザ名}/{作成したリポジトリ名}?vscode-coi=

そうすると、Webブラウザ上にてVS Codeのような画面に切り替わる。VS Codeと基本的な使い方は同じであるので、適宜、ソースコード用のファイル等を作成されたい。

Web版のVisual Studio CodeでPythonコード実行

Web版のVS Codeでは、まだPIPなどが使用できないため様々なパッケージがインストールできない。つまり、numpyなどのパッケージが使用できないことを意味する。このようは条件から、複雑な処理を実装するのは難しくなるが、単純なファイル操作や計算などは可能なはずである。以下では、その一例を示す。

実行の前準備

実行するまえに、以下のようにしてweb版のVS Code上のextensionであるPython for the webをインストールする。

Python for the webのインストール

上記のインストールが終わると、web版のVS CodeでPythonが実行可能となる。実際に、画面右上に再生ボタンが付加され、実行が可能な状態となる。

osパッケージを用いたパスの取得

ここで作成したコードは以下である。

import os

cwd = os.path.abspath(__file__)
print(cwd)

以下のように実行可能である。

Web VSCodeの実行

上記のように、/workspace/test.pyというパスを取得できた。Github上で指定したリポジトリはworkspaceというディレクトリがホームディレクトリになるようである。

globとosを用いたファイル名の取得

実行するPython以外のファイルが、上記のworkspaceディレクトリに参照が可能かを確かめようと思う。以下のように、test.pyと同じディレクトリ上にテキストファイルを構築する。

テキストファイルの作成

その後、test.pyを以下のように変更する。

import os
import glob

cwd = os.path.dirname(os.path.abspath(__file__))
print(cwd)

paths = glob.glob(os.path.join(cwd, '*'))
print(paths)

そうすると、以下のように実行結果が得られる。

実行結果例

上記のように、Github上で同じディレクトリに作成されたファイルは参照可能である。

簡単な計算の実行

今回はmathパッケージが使用可能かを確認した。以下のようにコードを作成した。

import math

sin = math.sin(math.pi / 2)
print(sin)

上記の実行結果は以下のようになった。

実験結果例

結果は正しく得られたように思う。

Web版のVisual Studio Codeでデバッグ実行

今回はコードの実行だけでなく、デバッグ実行もできるようになっていた。以下のように実行されたい。

デバッグモードの起動

上記のようにすると、以下のように実行される。

デバッグモード起動中

本デバッグモードは、上図のように赤ポチの部分まで一気に実行するのではなく、一行目から止まってスタートした。あとはいつも通り、1行ずつ実行されたい。そして、デバッグコンソールも使えるようになっていた。

デバッグコンソールの例

これで、変数内に何が格納されているかを確認することが可能である。

Web版のVisual Studio CodeでGithub上に変更を保存

変更後のコードは、VS CodeのGithub機能を使用すれば可能である。 本機能は以下のように実行可能である。

Github機能の使用(Add)

上記では、ファイルのaddを実行している。その後、コメントを記載してcommit & pushを実行する。

Githubへファイルをpush

上記のようにすると、以下のようにGithubにファイルが保存されていることが確認できる。

Github上でファイルの保存の確認

上記のようにすることで、コードの作成・編集・実行・保存が全てWeb上で行えることが確認できた。まだ、PIPなどが使用できないので複雑なコードは実行できないが、これならばChromebookでも十分に実行可能である。何より、複雑な環境設定の必要がないので初心者向きであると思う。是非、お試しあれ

この記事が気に入ったらサポートをしてみませんか?