Djangoを使ってオンラインプログラミングを実現する

2年 ago
綾乃, 一希
1 minute

Djangoはそもそもオンラインプログラミングを目的に作られたものではなく、ウェブアプリケーションを構築するためのフレームワークとして使われることが多いです. しかし、他のツールやテクニックと組み合わせることで、オンラインプログラミングのような機能を実現することはできます.

一般的な実装方法として、CodeMirror や Ace Editor などのオンラインコードエディタが用いられます。これらのエディタは Django のテンプレートに埋め込むことができ、Django のビュー関数と連携します。

簡単な例をお示しします。

  1. まず、CodeMirrorまたはAce Editorをインストールします。これらはnpmからインストールできますが、各公式サイトから直接ソースコードをダウンロードすることもできます。
  2. エディタの静的ファイル（CSS や JavaScript など）を Django プロジェクトの静的ファイルディレクトリにコピーします。
  3. エディターを表示する div 要素と、コードを送信するためのフォーム要素を含む Django テンプレートを作成します。
{% extends 'base.html' %}

{% block content %}
<div id="editor"></div>
<form method="POST" action="{% url 'execute_code' %}">
  {% csrf_token %}
  <textarea id="code" name="code"></textarea>
  <button type="submit">执行代码</button>
</form>
{% endblock %}

{% block scripts %}
<script src="{% static 'codemirror.js' %}"></script>
<script>
  var editor = CodeMirror(document.getElementById('editor'), {
    mode: 'python',
    lineNumbers: true
  });
</script>
{% endblock %}
  1. ネイティブな日本語で言い換えてください。ただし、一つだけ必要です:
from django.shortcuts import render

def execute_code(request):
    if request.method == 'POST':
        code = request.POST.get('code', '')
        try:
            exec(code)
            result = '代码执行成功'
        except Exception as e:
            result = '代码执行失败：' + str(e)
        return render(request, 'result.html', {'result': result})
    return render(request, 'editor.html')
  1. コードの実行結果を表示するためのテンプレートを作成する。
{% extends 'base.html' %}

{% block content %}
<p>{{ result }}</p>
{% endblock %}
  1. ネイティブな日本語で言い換えてください。オプションは 1 つだけ必要です。
from django.urls import path
from .views import execute_code

urlpatterns = [
    path('execute/', execute_code, name='execute_code'),
]

ユーザーが/execute/にアクセスすると、オンラインコードエディターのページが表示されます。このエディターにpythonコードを入力し、「コードの実行」ボタンをクリックすると、コードを実行できます。実行結果は別のページに表示されます。

本サンプルは簡単な例ですので、ご要望に合わせて変更、拡張してください。なお、コード実行にはセキュリティリスクが伴う可能性があるため、ユーザーから提供されたコードを実行する前に、必要な検証およびセキュリティチェックを行ってください。

bannerAds