上の動画では、実装したサイトの使用方法について説明しています。サイトを利用してみたいと思っている方は、視聴してみてください。
下の「競技サイト」からPython競技プログラミングサイトにアクセスできます。
興味のある方は是非挑戦してください。
(↑Google chromeを推奨しています)
はじめに
研究概要
本研究の目標は Pythonに特化した競技プログラミングサイトの設計、構築を行うことです。全ての学習において、教科書と問題集を使用し学習を行い、テストによって自身の学習状況を測るというプロセスが存在します。本研究ではテストにあたる競技プログラミングサイトに焦点をおいています。
また、本研究においては競技プログラミングサイトの設計、構築するにあたってPyScriptをWebアプリケーションに取り入れました。
そのため本研究で制作したWebアプリケーションでは、HTML、CSS、Python、PyScriptの4つのプログラミング言語を用い制作を行ないました。
PyScriptについて
みなさんはPyScriptとは何か知っているでしょうか？
PyScriptとはPythonをフロントエンドも使えるようにする仕組みで、2022年5月にAnaconda社から公開されたものです。PyScriptはHTMLにPythonを直接記述し、実行できるためブラウザ上にて環境構築不要でPythonが実行できます。
現在はアルファ版なので今後アップデートを重ねればJavaScriptの代わりになるかもしれません。
HTML内<head>に下記の太文字を入力するだけで環境構築不要でPythonが使えるようになります。
<head>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head><head>内に入力後<main>内にて<py-script>とし、この中にPythonを記述することで実行することができます。
<main>
<py-script>
print("これはPyScriptで出力されています")
</py-script>
</main>
また、上記と同様<main>内に<py-repl>とすることでインタプリンタを出力できます。
<main>
<py-repl>
</py-repl>
<py-repl>
これは対話型インタプリンタです。
print(対話型インタプリンタを使用する方法です。)
</py-repl>
</main>
これらを組み合わせ競技プログラミングサイトを開発しました。
設計、デザイン
本研究ではシステム設計，ビジュアルデザイン設計ともに1人で行いまいした。
競技をする上で、操作方法などユーザーのプログラミング能力以外の差がつかないよう分りやすいシステムを実装できるよう心がけました。
Webサイトの実装にはDjangoを使用しました。
Webデザインにおいては、HTML、CSSを用いて使いやすく分りやすいデザインを心がけました。競技中は焦りなどストレスを感じる可能性があるためリラックス効果のある青系の色を背景色に用い、ボタンの形の統一などに注意しながらデザインを行いました。
Djangoによる実装
本研究の競技プログラミングサイトではDjangoを用いて実装を行いました。
Djangoとは、Pythonで実装されたWebアプリケーションフレームワークです。Webシステム開発に必要な機能がほとんど用意されている利点があります。
その他のPythonで実装されているフレームワークはFraskやBottleなど存在しますがDjangoは前述した2つのフレームワークに比べ機能が豊富であるという特徴があり本研究ではDjangoを選択しました。
ユーザー機能
本競技プログラミングではグラフをリアルタイムで表示することでゲーミフィケーションを取り入れました。
また、PyScriptにてエディタの表示、正誤判定、経過時間の計測を行いました。
問題選択ページ
問題選択ページでは、ユーザー自身で問題を選択することができます。
クリア済みの問題にはclearと表示することでユーザーがどの問題を正解したか分りやすくしました。
問題ページ
競技プログラミングの問題ページでは、ユーザーは用意されている問題をコードを記述して解答していきます。
問題ページでは、サイト上にプログラムを書くためのエディタと、Python実行機能をPyScriptを利用して実装しました。競技プログラミングサイト内でPythonを実行することが可能なため、ユーザー個人のデバイスでの環境構築が必要なく初学者にとっても学習しやすい設計を目指しました。
正誤判定
正誤判定に関してもPyScriptを使用しています。
正解の場合は以下のように出力されデータベースにユーザーの解答状況が保存されます。
不正解の場合は以下のように出力されます。
グラフ機能
Pythonのmatplotlibを使い競技中、常に画面下部にグラフをリアルタイムに表示させました。
今回実装したのはクリア数によるランキング、各問題の正解数、そして各問題のクリアタイムランキングを実装しました。
ユーザーはこのランキングを見ながら問題1の正解数が多ければ比較的簡単な問題だと判断できるため解く順番を考える材料になるなどゲーミフィケーションを取り入れました。
競技終了後のまとめページ
競技終了後はまとめページにユーザーによって遷移します。今回JavaScriptやPHPを用いて無いため、時間経過によるページ遷移を実装することができませんでした。そのためユーザーにボタンを押してもらいまとめページに遷移してもらいます。
まとめページではユーザーのランキングや正解した数、グラフを表示し自分の成績を確認することができます。
現段階で実装できていないものとしてユーザーが正解したコードを競技終了後に一覧で表示する機能です。PyScriptのエディタは独立しており入力した内容をデータベースで取り扱うことができませんでした。競技終了後、他者のコードを見ることで自分では思いつかなかった解き方を知ることができるため、競技によるアウトプットだけで無く競技を通してインプットもできるようにすることが今後の課題です。
開発環境
フロントエンド
HTML/CSS/PyScript(Python)
バックエンド
Python/Django/SQLite3
公開サーバー
Heroku
その他のツール
Github/VisualStudioCode
コメント