要旨:
コロナ禍で対面授業が不可能となった大学の授業では，急遽eラーニングシステムを用いた授業が主 たる授業スタイルとなった。しかし，プログラミングのような実習をともなう授業では，e ラーニング システムだけでは対応できない実習環境が存在する。筆者は既存のeラーニングシステムを補完するプ ログラミングの実習環境を急遽構築し対応した。本稿ではこの補完システムの概要について述べる。
キーワード
コロナ禍 Web オンデマンド授業 プログラミング環境 システムの補完 JavaScript アップロー ダー パスワード配信 PHPによるシステム構築 Webによる学習状況の把握
1. はじめに
今回の
Webによるオンデマンド授業は実習を伴う授業を担当する教員にも受講する学生に も多大な影響をもたらしている。もちろん，一般的な講義科目であっても影響の大きさは計り 知れない。実習科目の場合，困難であっても工夫次第で実施可能となる科目もあれば完全に実 施できない科目もある。プログラミングの場合は前者であり，工夫次第では通常授業と同等の 授業はできると考えられる。その根拠は近年広まっているインターネットを利用したプログ ラミングの通信教育がモデルとなるからだ。
しかしながら，このような通信教育を実施するには，その企画に十分な準備期間が必要であ り，今回のような事態においては個人の教員が対応するにはあまりにもハードルが高い。本稿 は，この緊急事態に対応すべく当初の授業計画および授業内容をどのように変更し，また実習 環境にどのような工夫をしたのかを整理するものである。
2. プログラミングの授業で必要なこと
2.1 対象となる授業の特徴
筆者が担当している科目は商学部の
2年生を対象とした専門科目 「プログラミング原論Ⅰ」
である。この科目はプログラミングを全く学んだことがない学生を想定した授業科目であり，
実習によってプログラミングスキルを身につけるように計画されている。一般的にプログラ
既存のEラーニングシステムを補完する環境について
－コロナ禍における応急措置としてのプログラミング環境－
A complementary environment to the existing e-learning system:
The programming environment as a quick-fix solution in the Covid-19 crisis
木下和也
†Kazuya Kinoshita†
†久留米大学 商学部
†Faculty of Commerce, Kurume Univ.
［教 材 研 究］
ミングは知識やスキルの積み上げによって学習する科目である。オムニバス式の講義科目の ように，授業を欠席したことによりその回の内容が欠落しても次の講義を聴くことができる ということはない。積み上げ式であれば，理解できないまま次のステップを踏むことはできな いわけである。そのため，そのステップを小さくし，少しずつスキルアップしていく手法をと ることになる。これをスモールステップ型の授業と呼ぶが，プログラミングの場合は練習問題 として簡単なプログラムを少しずつ発展させてより高度な処理ができるように，また部品と なるアルゴリズムを結合しながらより複雑なアルゴリズムを理解していく方式が一般的であ る。
典型的なプログラミングの学習には実習は不可欠である。手本となるプログラムを理解し たうえで，その応用となるプログラムが練習問題として出題される。その練習問題を「解く」
という行為は実習環境でコードを記述しコンピュータに処理を実行させるというスタイルが 一般的である。すなわち教科書を読むだけではスキルが身についたかどうかの確認ができな いので，実習は必須の行為であるという意味である。プログラムにタイプミスがあればディス プレイ上にエラーメッセージが表示され実行されない（文法エラー）し，アルゴリズムが間違 っていれば画面には想定された結果とは異なるものが表示される（論理エラー）。このエラー を経験しながら，いわゆる気づきを得ながらスキルアップすることがプログラミングの学習 方法といえる。その際に，教員によるアドバイスや受講生同士による相談，教え合いといった 行為が効果を上げる。しかし，それがないということが今回の
Webオンデマンド授業の問題 点といえる。もちろん，
eラーニングシステムを活用することで質疑応答はいくらでもできる のであるが，文字や画像による往復書簡のような質疑応答は即時性がなく，対面授業にはかな わない。
2.2 当初の授業計画と初学者向けのプログラミング
ここで，本来の授業計画に盛り込まれていたプログラミングの学習方略について紹介する。
テキストや練習問題によって，スモールステップで繰り返し学習を意図していたとしても，授 業時間外に自学自習ができないようなものであれば，効果は期待できない。プログラミングの 学習において学生が苦労するのは，エラーの原因を探し出しプログラムを修正する過程であ る。学生の中には，これが原因で意欲がなくなってしまうこともあると考えられる。
授業時間中であれば，教員や周囲の学生に質問したり，一緒に考えたりすることができる が，自宅での学習となると一人で黙々と実習するしかない。エラーの原因に気づきやすくし，
スモールステップで順調に課題に取り組んでいかせる環境を用意しなければならない。その ような環境として，N88BASIC のプログラミング環境を再現した「N88 互換
BASIC」を初学者向けのプログラミング言語として採用することは非常に有益であると考えている。その理 由を２つ挙げたい。
(1)フリーソフトであること
Windows
のみの対応ではあるが，フリーソフトであるため，自宅のパソコンにインストー
ルできる。自宅での自学自習環境を確保しやすいといえる。
(2)
言語特有の知識が少なくてもすぐに導入できること
例えば
C言語を扱う場合，初心者にとってアルゴリズムをそのままプログラムとして記述
するのは難しい。なぜならば，数値や文字列の扱いなどに厳密な規則があり，この規則が反映
された書式によってプログラムが記述されるからである。わかりやすい例でいえば，数値を整 数（
int型）であるか浮動小数点数（
float型）であるかを変数名とともに型として宣言してか らでなければ変数に数値を代入することができない。また宣言された型に基づいた書式で変 数を介した入出力文を記述しなければならないなどである。
それに対して
N88BASICでは，変数の宣言そのものが不要であり，型の識別もしなくてよ い。つまり，
N88BASICに関しては，言語特有の規則や知識が少なくても，すぐにアルゴリズ ムをプログラムとして記述できる点で，使いやすいといえる。初学者にとって重要なことはア ルゴリズム以外の知識を必要とせずにプログラムに記述する環境を用意してあげることであ
り，
N88BASICがそれに適していると考えている。この考え方は
Scratchなどのブロックプロ
グラミングと同様であろう。
3. 学習状況を把握するための Web プログラミング（ JavaScript ）
一見して時代錯誤のような古い言語である
N88BASICを利用することの意味は前述の説明 で伝わったかと思われるが，コロナ禍によって
Webオンデマンド授業となった状況では，大 学の授業が丸ごと
15回
Webで実施されるため，教員は学生に一度も対面で教えることがな く，実習授業に必要な参加型の授業ができない。教員側の行動としてはクラス全体の雰囲気を 知ることができず，一方的に授業を進めていくようなものである。そこで，学習状況を即座に 把握する方法として，サーバ上で学生のプログラムを共有できる
Webプログラミングを対象 としたプログラミングの授業に変更した。言語は
N88BASICの文法に関する利点をある程度 活かせるものとして
JavaScriptを採用した。同時に
HTMLの記述方法などは必要最低限にと どめ，あくまでも
JavaScriptによるアルゴリズム中心の基礎的な内容にしている。
さらに，
JavaScriptで記述したプログラムは授業用のサーバに各自がアップロードし，教員
がその状況を把握できるようにした。すなわちサーバにプログラムがアップロードされてい れば，教員側がそのプログラムにアクセスすることで正しくコードが書かれているのかどう か，あるいは授業の進度に合わせて学習できているのかどうかを把握することができるわけ である。
3.1 アップローダーの利用
学生はプログラムの動作確認を自分のパソコン上で行うことができる。
JavaScriptは
HTMLとともに記述され，
Webページとして
Webブラウザに表示される。
JavaScriptで記述されたプ ログラムが正しく動作すれば，
Web画面も想定された内容が表示される。正しく動作したプロ グラムを筆者が作成した実習環境からアップロードすれば
Webページとして他者からも確認 することができる。もちろん，そのプログラム名を含む
URLを知っている者だけがアクセス できるのだが，アップローダーはそれぞれの学生の学籍番号によってアップロードするサー バのディレクトリを判別するので，教員は学籍番号とプログラム名を知っていれば，アクセス できる。またそれを管理する仕組みも簡単に構築できる。
このアップローダーに関してはこれまでにも他の授業においてサーバサイド型のプログラ
ミングを教える授業で使用してきた。例えば
PHPのようなサーバサイド型のインタプリタが
必要なプログラミング言語であれば，サーバ上でプログラムが実行されるので，
JavaScriptの
ように学生のパソコン上で動作結果を確認することができない。したがって動作確認をする
ためにプログラムをアップロードするという作業が必要となる。このアップローダーとサー バを活用して授業の進捗状況の管理に使うこととした。
3.2 パスワード配付方式の変更
上述のように，学生がプログラムをアップロードする場所は対象サーバ内にある学生の学 籍番号のディレクトリ内である。アップロードする際には
ID（学籍番号）とパスワードを使って，自分のディレクトリにしかアクセスできないようにしている。
(1)
これまでのパスワード配付方式（対面授業用）
これまでは，対面授業が前提であったため教室内でパスワード配付を行っていた。この作業 には学生が配付用サイトから入力フォームに自分の学籍番号を入力し，さらに教員から教室 全体に伝えるワンタイムパスワードを入力すると，学生のパスワードがそれぞれの画面に表 示されるという仕組みである。このワンタイムパスワードはサーバから取得した時間をもと に自動生成される仕組みであり， 教員はそのパスワードの仕組み （計算式） を知っているため，
その瞬間の時間を用いてパスワードを学生に伝えることができる。また，学生が一度自分のパ スワードを表示すると，二度と表示されなくなる仕組みを採用している。そのため今後他者が 自分の学籍番号とワンタイムパスワードを入力してもエラーが表示される。万が一，初めて自 分のパスワードを知ろうとしてこのエラー画面が出たとしても，その段階で他者によってパ スワードが盗まれていることを知ることができるため，そういった学生には別途パスワード を設定して個別に対応することができる。
(2)新方式のパスワード配付方法（Web
オンデマンド授業対応）
Web
オンデマンド授業においては，本人を確認する手段が限定される。大学の場合，本人 にしか利用できないサービスとして大学のメールアドレスがある。多くの場合，大学のメール アドレスは学籍番号が含まれているため，これを利用することとした。入力フォームから自分 のメールアドレスを入力すると，パスワードがそのメールアドレス宛に送られてくるという 仕組みである。
メールアドレスのユーザ名は学籍番号を含む文字列で構成されている。その文字列から学 籍番号のみを抽出し，サーバにあるパスワード体系のデータから該当者を検索し，そのメール アドレス宛にパスワードを送信するという仕組みである。たとえ，他者がこの作業を行ったと してもパスワードはそのメールアドレスの所持者にしか通知されないため，安全に本人だけ にパスワードが配付される仕組みといえる。なお，この仕組みを実現するプログラムでは文字 列関数を利用して学籍番号のみを抽出している。
4. 実際の実習環境
以下では，
Webオンデマンド授業を受講する学生がパスワードを取得し，実際にアップローダーを利用するまでのマニュアルを示す。
4.1 実習用パスワード取得方法
メールアドレス入力画面にアクセスすると，図
1のような入力フォームが表示される。
(1)
メールアドレスの入力と送信
大学のメールアドレスの「ユーザ名」部分だけを入力する。この時に半角であることも注意
させている。また，入力ミスを防ぐためドメイン名（＠マーク以降）は共通であるため入力は
させないようにしている。さらにスペースやドットなど他の文字がユーザ名の前後に入ると 正しく認識されないことも伝えている。
図1 メールアドレスの入力画面
「送信する」ボタンを押すと，確認画面が表示される。正しく入力されている場合は，図2の ように表示される。
図2 確認画面
メールアドレスを間違っている場合は，図
3のように表示される。
図3 確認画面（入力ミスがあるときに表示）
(2)
パスワード配信メールの受信
入力内容に間違いがなければ「内容に間違いがないので送信」ボタンを押す。結果として図
4の画面が表示されるとともに各自にメールが送信される。
図4 送信のお知らせ画面
送られたメール（図
5参照）には，実習に必要な情報が記載されているので，その情報に従 って，実習を行うことができる。
図5 メールの内容
4.2 実習用パスワード取得方法
(1)学生への説明
学生にはサーバにプログラムをアップロードすることに関して以下のように説明している。
「この授業の実習サイトとは，自分で作ったプログラムやデータを，サーバというインターネ ット上のコンピュータにアップロードする画面です。サーバにアップロードするということ は，他の人にも見せることができるようになるということです。一般的な
Webページは，ブ ラウザに
URLを入力することで，見ることができます。みなさんが作ったプログラムも
URLとして使えるようになるわけです。」
さらに，前述の取得したパスワードについては以下のように説明している。「みなさんはメ ールを介してパスワードを取得しています。このパスワードがなければ実習サイトにアクセ スできません。また，アップロード先のサーバにはみなさんの学籍番号（実習用
ID）と同じ 名前のフォルダが準備されており，そこにアップロードされるようになっています。つまり，
本人でなければ，本人の学籍番号のフォルダにプログラムやデータをアップロードすること
はできないということです。ですから，パスワードを漏らしてはいけません。なぜなら，他人
が悪意をもって，あなたが作ったプログラムを別のプログラムに書き換え（改ざん）たり，消
去したりすることができるからです。」
(2)
実習サイトへのアクセス
実習サイトにアクセスすると，図
6のような画面が表示される。これが，実習サイトのトッ プページとなる。すでにパスワードを取得しているため，「アップローダーの画面に進む」を 選択する。なお，「自分のパスワードを取得する」のリンクは，前述したワンタイムパスワー ドによる対面授業でのパスワード配付のリンクである。
図6 実習サイト（トップページ）
次に，認証画面が表示されるので，実習用
ID（学籍番号）とパスワードを入力する（図
7参照）。このときに注意することは，学生が大学で使用している
IDおよびパスワードと混同 しないための助言を行うことである。すなわち，学籍番号の前後に
sなどの文字を入れないこ とであり，さらに，アルファベットは大文字でなければ利用できないようにしている。
図7 認証画面
ID
とパスワードが正しく入力されると，「各学生の専用画面」つまり「ポータル画面」が 表示される（図
8参照）。この画面には，「アップローダーへのリンク」があり，アップロー ドするときは，まずこのリンクをクリックすることになる。
また，この画面に表示される一覧表は，サーバにあるその学生のディレクトリの中身が表示
される。もちろん実習する前にはアップロードされたファイルは存在しないため，一覧表には
何も表示されない。アップロードすることで，その度にファイル名が追加されて表示される。
図8 実習用ポータル画面
(3)アップロード方法
ポータル画面から「アップローダーへ」をクリックすると，アップロード画面が表示され る。アップロードの画面は，最大５つまでファイルをアップロードできるようになっており，
６つ以上のファイルをアップロードする場合は複数回に分けてこの画面からアップロードす ることになる。図
9のように「ファイルを選択」ボタンをクリックすると，図
10のようにファイル選択のウインドウが表示される。
図9 アップローダーの画面
ここでは
pg01.htmlというファイルを選択して，ファイル名を確認後，開くボタンをクリックする例を示す（図
10参照）。
図10 ファイル選択ウインドウ
アップローダー画面には，選択されたファイル名が表示される（図
11参照）。さらに，ア ップロードするためには 「上書きしない」 のチェックを外さなければならないようにしている。
これは間違えてアップロードするのを防ぐための措置であり，特にパソコン上の別のフォル ダにある同じファイル名のファイルをアップロードすることによるトラブルに注意するため の措置である。チェックを外す行為によって毎回アップロードするファイルが正しいのかを 確認する機会を作っていることになる。そして「アップロード」ボタンをクリックする。
図 11 上書きしないチェックを外す
アップロードが成功していれば，図
12の画面が表示される。この画面にはアップロードの
結果として
pg01.htmlが表示されている。図12 アップロード結果画面
このあと，「メニューに戻る」をクリックすると実習ポータル画面に戻るが，必ず図
13の画面が毎回挟まれる。この画面で， 「認証画面へ」をクリックする。（認証エラーでなくても，
毎回この画面は表示される）
図13 認証画面へのリンク
再び認証画面（図
14参照）が表示されるので，再度学籍番号とパスワードを入力し，ポー タル画面を表示する。
図14 再び認証画面が表示
