日本研究センター教育研究年報 第 7 号 (2018.9)

WebKIC へのアカウント機能と音声再生機能の追加―機能の詳細と実装上の困難、そして学生による活用状況―
秋

澤

委太郎

【要旨】
アカウント機能と音声再生機能の追加を主軸とした WebKIC の大規模アップデートと、それを学生がどのように活用しているか、そして、今後どの ような点に改善が必要かについて述べる。あわせて、Web アプリケーションの独自開発においてユーザーデータの秘匿性を確保し、また音声リソースの不正使用を防止するにあたって直面した実装上の困難について報告する。

【キーワード】『Kanji in Context』、WebKIC、Web アプリケーション、セッション機構、Web Audio API

はじめに

筆者は 2014 年より、日本研究センターで行われている SKIP プログラム 1 のために、テスト作成ならびに自律学習を支援する Web アプリケーション、WebKIC の開発と運用を続けている。WebKIC は本センター作成の『Kanji in Context［改訂新版］』に準拠した補助教材として、学生と教員の要望に応えるべく細かな修正を重ねながら、2015-16 年度中に大規模アップデートを施し、レファレンス機能、確認テスト機能、フラッシュカード機能、
例文テスト機能を具えるに至った（バージョン 0.8β）。その結果、本センターの学生に広く受け入れられ、主に SKIP 統一試験 2 の準備ために活用されるようになっている。統一試
験を目前に控えているか否かに関わらず、日常的に漢字を学ぶ習慣の一つとして採用した学生も少なくない。一方で、ユーザー個人の学習履歴が記録できない、フラッシュカードのデッキを自由に構築できない、音声を出力する機能がない、漢字を手書き入力して正誤を判定できない、といった点が、学生アンケートによって要改善項目として指摘さ れた。
筆者が WebKIC 開発に着手した経緯、アプリケーションの設計方針、学生の要望に応じてどのような機能を追加してきたか、そして実際に使用した学生の反応がどのようなものであったかは、秋澤 (2015) と秋澤 (2016) で報告したので、詳しくはそれらの記事を参照されたい。
WebKIC の開発はその後も継続しており、2016-17 年度中に 2 度目の大規模アップデー
トを行った（バージョン 0.9β）。本稿はそのアップデートについて詳述するとともに、アップデート後の機能を入学時から SKIP プログラムのために利用することができた初めて- 81 -

日本研究センター教育研究年報 第 7 号 (2018.9)の年度（2017-18 年度）の学生を対象とするアンケートの結果を報告し、今後さらに改善していくべき点を探るものである。
また、専門的なネットワーク技術者でもプログラマーでもない一日本語教師が、学習者や同僚のための Web アプリケーション開発を進める中でどのような困難に見舞われたかを記録し、留めておくことも本稿の目的である。技術者やその道の専門家が見れば 「今さら何を」というような内容も多いかもしれないが、自分と同じような立場で同じような計画を温めている各位の参考になればと思い、あえて記する次第である。

アップデートで追加された機能と、実装上の困難

1

本章では、今回の大規模アップデートで追加された機能 と、それらの適切な実装を図る
にあたって特に問題となった事柄について述べる 。

1-1

ユーザーアカウント機能

図 1 ログイン画面

バージョン 0.8βについての学生アンケートで最も要望が多かったのが、個人の学習記録を残すことができる、そしてアプリケーションの動作を自分なりにカスタマイズすることができる機能である 3 。そこでバージョン 0.9βでは、アカウント作成・認証システムを PHP のセッション管理機構とブラウザーのクッキー機能を用いて構築し 4 、ユーザー一人一人が個別の情報を記録できる環境を整備した。メールアドレスをアカウント名としてアカウントを作成した上で、そのアカウント名とパスワードによって認証、ログインすれば、どのデバイス上でどのブラウザーを使ってアクセスしても、前回自分が使用していたページに前回と同じ設定で戻ることができる。このほか、ア

図2

カウント所有者には以下の機能が利用可能になる。

1. 単語に「スター」をつけることがきる。
これにより、例えばスターをつけた単語だけからフラッシュカードのデッキが作れるようになる。自分なりの理
由で「これは特に」と注目しておきたい単語を記録しておける機能である。
2. フ ラ ッ シ ュ カ ー ド や テ ス ト で 出 題 さ- 82 -

ログインした状態

日本研究センター教育研究年報 第 7 号 (2018.9)

れている単語に、「チェック」をつけることができる ようになる。チェックをつけた単語は、次にフラッシュカードのデッキを作成した時、あるいはテストを作った時に、チェックをつけなかった単語よりも後に出題されるようになる。
3. フラッシュカードやテストにおいて、まだテストしたこと のない単語、あるいは前回テ
ストしてから長い時間が経っている単語ほど 優先的に出題されるよう設定できる。
4. 単語を読み上げる音声が再生できる。詳しくは次
図3節で述べる。

達成度表示画面

5. 全 156 回のユニットそれぞれに含まれる単語のう
ち、問題の種別ごとに、自分が何パーセントに「チェック」したかを一覧することができる。問題の種別とは、1. 漢字を表示して、読み方と意味を答えさせるもの、2. よみがなを表示して、漢字と意
味を答えさせるもの、3. よみがなと英語を表示して、漢字を答えさせるもの、4. 英語を表示して、漢字とよみがなを答えさせるもの、の四種類である。みごと 100 パーセントを達成した回には、笑
顔のスタンプが表示される（右の図 3 を参照）。
6. 教員用アカウントでログインしている場合 5 、例文テスト出題内容の細かなカスタマイズと、テストの保存が可能になる。前者を具体的にいえば、1. 問題作成フォームで、出題したい単語と出題したくない単語をあらかじめ指定しておくことができる。2. テストを作成した後であっても、「やはりこれは出題した
くない」という問題があれば、それだけを個別に削除することができる。

ユーザーアカウント機能の実装には大きな困難が伴った。それは、HTTP プロトコルの上で秘匿性を確保して情報をやりとりするための道具立ての仕組みと、その具体的な使用方法を理解するのが難しかったことである。
WebKIC は文字通り Web アプリケーションであり、HTTP プロトコルを基盤として構築されている。主に Web ブラウザーと Web サーバーの間の通信のために用いられる HTTP
プロトコルは、サーバーに同じリクエストが送られてきたら、リクエストを送ってきたク
ライアントがどこの誰であっても常に同じ応答を返す。いわゆる静的なウェブサイトの挙動である 6 。これは例えば個人と個人の間で電子メールをやりとりするのに用いられる一連のプロトコルとは異なり、本来、インターネットへのアクセスさえあれば、そして情報源の URI さえ知っていれば、誰でも簡単に公開情報を閲覧できるようにするべく考案されたもので、いわば壁新聞や掲示板のような情報の開示、あるいは書き込みに適している。逆にいえば、特定の個人だけに向けた情報提供や、その人固有の情報を収集、管理する用途- 83 -

日本研究センター教育研究年報 第 7 号 (2018.9)は想定されていないのである。
ところが 1990 年代半ば以降の WWW の急速な発展に伴い、Web ブラウザー＋インター
ネットという組み合わせに、単に「壁新聞」の閲覧というレベルを超えた 様々な用途が開拓された。Web ブラウザーで電子メールの閲覧送受信ができるようになり、オンラインバ
ンキングや電子商取引などで、利用者個人に特化した、しかもその個人以外の利用者に対しては厳重に隠す必要のある情報が盛んに取り扱われるようになった。こうした用途が何によって可能になるのかという視点から同じ状況を見れば、それは、同一の URI でサーバ
ーにアクセスしてもクライアントによって異なった応答を返すシステムを、HTTP プロト
コル上に実現する方式が発展してきたということである 7 。
そもそもの目的が別のところにある HTTP プロトコルの上で、あえてこのような情報交換をするために考案されたのが、セッション管理機構である 8 。現在はユーザー認証の方法こそ様々に進化しているが 9 、そうして認証された特定の利用者との間でだけ、かつ、その利用者だけが利用可能な情報を Web サーバーがやりとりするためには、依然としてこのセッション管理機構が用いられている。むしろ、用いない例を見ないほどである。将来もこの状況は簡単には変わらないであろう。
先述の通り、WebKIC もこれを利用してユーザーアカウント機能を実装しているが、セッション管理機構がどのような背景のもとに要請され たかという事情に暗い筆者がその仕組みを正しく理解することは、当初難しかった 10 。また、悪意のある接続や情報の漏洩を防ぐ手立てを構築することも、多大な注意を要する作業であった 11 。

1-2

音声再生機能WebKIC に音声再生機能がないことは、アカウント機能の欠如と並ぶ大きな欠点であった。そこでバージョン 0.9βでは、単語の音声読み上げに対応した。
音声は、ボタンをクリックすることで再生される（先に示した図 2 にも表示されている）。また、フラッシュカードをめくった時などに、自動的にその単語の音声を再生する

図4

音声再生中のフラッシュカード

よう設定することもできる。
音 声 デ ー タ は 、 過 去 に Flash 版 Kanji inContext 12 が開発された際、本センター教員が録音したデータをそのまま流用した。しかし、これは『Kanji in Context』が改訂される前のデータであるため、改訂新版 で追加された単語については筆者が今回新たに録音を行った。録音は iPhone 6s の内蔵マイクと「ボイスメモ」アプリケーションを使って自宅で行なったが、特段の設定を行わなくとも良好な音質を確保することができた。問題は部屋の残響である。これには、椅子を 2 脚向かい合わせ- 84 -

日本研究センター教育研究年報 第 7 号 (2018.9)に設置し、iPhone 6s をいずれかの座面に置き、2 脚の椅子の背もたれを毛布で覆ってテントのような空間を作り、その中にこもって録音することで対応した。残響がなく聞き取りやすい音声が録音できたので、自宅などで予算をかけずに録音作業をしたい向きには 推奨
できる方法である。
当然、単語だけでなく例文も音声再生に対応することが望ましいが、録音作業が膨大になることが容易に予想されたため、今回は見送った。
音声再生機能を実装するにあたり懸念されたのは、 ウェブスクレイピングなどによりデータの一括ダウンロードが行われ、悪意の第三者によって不正に使用されることである。
現時点で WebKIC は日本研究センターの外部に公開していないが、仮に公開した場合を考えれば、音声データの取り扱いには慎重を期さねばならない 。これが、今回のアップデー
トにおけるもう一つの困難である。結局、データの盗用を防ぐために次の 3 点を満たす機構を実装した。

1. 音声ファイルを、URI の指定によって直接ダウンロードすることができないようにする。
2. アカウント保持者にのみ音声の再生を許可し、不正なアクセスを防ぐ。
3. 音声データを、ファイルの形で手元に保存できないようにする。

1 に関しては、JavaScript から非同期的に Web サーバーの API（PHP により作成）13 にア
クセスし、その API 経由で音声データをダウンロードすることで対応した。音声データ自体は AAC 規格のファイルだが、それらのファイルは Web サーバーの公開領域に置かず、公開の API を通じてのみアクセスを可能にしている。 API にアクセスできるのは前節で述
べたアカウント保持者のみであり、ログインしていなければ リクエストがあっても応答を拒否する仕組みになっている。さらに、もしログイン状態であっても、不自然なアクセスを検出した際は、管理者（つまり筆者）に通知するとともにそのアカウントを強制的にログアウトさせる措置を取る（上記 2）。
アクセスが許可された音声データは、いくらそこまでの敷居を高くしたところで、普通にダウンロードしてしまえば結局ファイルの形でユーザーの手元に残ることとなり、簡単に不正使用できてしまう。そこで上記 3 の対策が必要になるわけだが、 WebKIC では、
JavaScript の Web Audio API を採用した 14 。この API は、ユーザーの目に直接見えない形でブラウザーに音声データをダウンロードし、JavaScript を用いて操作するもので、音楽やゲーム効果音を再生するなどの幅広い用途が想定されている。データは ブラウザーキャッシ
ュとして残る場合があるものの、音声ファイルの形ではユーザーの手元に残らない。

1-3

その他のアップデート

アカウント機能と音声再生機能を追加したほか、以下の改善を施した。

- 85 -

日本研究センター教育研究年報 第 7 号 (2018.9)

1. フラッシュカードのアニメーションを簡略化・高速化で

図5

学生によるイラスト

きるようにした。
2. フラッシュカードやテストに表示されている虫眼鏡ア
イコンをクリックすると、その単語をレファレンスで検索して表示するようにした。
3. 新常用漢字で変更のあった標準字体・字形 15 に合わせ、
旧常用漢字のままであった手書き風フォント 16 の字体・字形を修正した。また、デバイスにインストールされているフォントを用いる場合も、新常用漢字に準じる 字
体・字形を採用したフォントが優先的に選ばれるようにした。
4. フラッシュカードの画面デザインが殺風景なので、絵の得意な学生に依頼してイラストを描いてもらった。新たにページを表示するか再読み込
みするたびに、ランダムに選ばれた微笑ましいイラストが現れる。 図 5 はそのうちの 2例である 17 。

学生に対するアンケート結果とその検討

2

こうしてバージョン 0.9βに更新された WebKIC を、本センターの学生はどのように受け入れたのだろうか。本章では、学生を対象に実施したアンケートの結果を検討する。調査対象は 2017-18 年度レギュラーコースの学生 63 名であり、26 件の有効回答を得た。本稿では筆者が特に注目した項目についてのみ論じるが、ここで取り上げる項目を含め、全てのアンケート調査項目を稿末の資料 1 に、そして回答者の氏名を除く全ての回答を資料
2 に掲載した。

2-1

使用頻度（質問 1-1）

前回調査と同様、主に SKIP 統一試験の準備のために使用されているという傾向が見て取れるが、日常的、習慣的に使用している者も、前回同様少なくない。バージョン 0.9βには、サインインしなければ十分に機能が発揮できないというある種制約が設けられたわけだが、そのことで学生の抵抗感を生むことはなかったようだ。

- 86 -

日本研究センター教育研究年報 第 7 号 (2018.9)

使用頻度

2-2

使ったことがない

0

１〜２回試しに使ってみただけで、やめた

0

最初はよく使っていたが、今は使わなくなった

3

SKIP 統一テストの準備をする時だけ使った

8

月に何回か使っている

4

週に何回か使っている

6

ほぼ毎日使っている

5

WebKIC が使われた環境

自宅で使う場合が最も多いのは自習用ソフトウェアとして当然であるが、移動中、ある
いは外出先と、劣らず他の環境でも WebKIC が活用されている様子が見てとれる。また、腰を落ち着けて学べる自宅では PC を、手軽さが重宝される環境ではスマートフォンを、という使い分けが明らかである。自宅でスマートフォンを使うのは、例えば食事をしながら、あるいはベッドに横になりながら、という場面が想像できるだろう。 マルチデバイス対応が成功しているようである。

使用環境（複数選択可）
センターで、PC からアクセスしたふ
スマートフォンからアクセスした

13

タブレットからアクセスした5

自宅で、PC からアクセスした22

スマートフォンからアクセスした

18

タブレットからアクセスした

7

通学などの移動中に、PC からアクセスした0

スマートフォンからアクセスした

23

タブレットからアクセスした

1

図書館や喫茶店などの外出先で、PC からアクセスした

2-3

8

8

スマートフォンからアクセスした

9

タブレットからアクセスした

4

よく使われた機能

前回の調査と同様、フラッシュカード機能が最も積極的に用いられ、確認テスト機能がそれに次いでいる。今回のアンケート結果には現れなかったが、筆者が学生から直接耳に- 87 -

日本研究センター教育研究年報 第 7 号 (2018.9)

したところによれば、SKIP 統一試験の準備の最終的な仕上げをする際、確認テストを使うことが多いらしい。
新しいアカウント機能もおおむね抵抗なく使われているようだが、自分の達成度を確認できる機能の利用率が特に低いことが気になる。アクセスのしにくさや、表示が細かく、やや分かりづらいことなどが原因かもしれない。また、チェック機能はスター機能と比べると利用率が低い。これには一つ理由が思い当たるので、後述する。

よく使っていた機能（複数選択可）

2-4

レファレンス機能

9

確認テスト機能

14

フラッシュカード機能

20

文脈クイズ機能8

単語の音声を読み上げる機能

8

単語に「チェック」をつける機能

12

単語に「スター」をつける機能

19

自分の達成度を確認する機能

5

今後改善すべき点

学生から寄せられた主な問題点、改善要望は以下の通りである。

1. フォントによって表示が違う場合がある。
2. フラッシュカードの裏面にユニット番号を表示してほしい。
3. 文字だけでなく画像も使って欲しい。
4. スターを一つの目的のために使うと、他の目的で使えなくなってしまう
5. 「戻る」ボタンを押した時、問題の並びが改めてシャッフルされてしまう。
6. 携帯アプリにしてほしい。
7. SRS 18 方式のフラッシュカード提示。

1 については、デバイスがどのような日本語フォントをインストールしているか、そしてデフォルトでどのフォントが表示されるかに依存する側面が大きいので、抜本的な対処が難しいところではあるが、最大限、問題が生じないように WebKIC 側の設定も煮詰めていかなければならない。2 は比較的容易に対応できる。3 も技術的には容易だが、どのような情報を画像として提示するかを検討する必要がある。4 については、現在水色しかない
スターの色を増やし、色ごとに異なった目的で使えるようにしたいと考えている。
大きい問題は、5 以降である。5 はブラウザーがデータキャッシュをどのように扱うかに- 88 -

日本研究センター教育研究年報 第 7 号 (2018.9)

関わる問題なのだが、アプリケーション側がこれを完全にコントロールすることは非常に難しい。しかし、テストをやっている最中に気になった言葉を虫眼鏡アイコンからレファ
レンスページに飛んで調べに行き、さてテスト画面に戻ってきた 時、先ほどとは問題の並びが変わっている、というのは非常に好ましくない状態である。 適切な対策を取らなければならない。
6 は、現在の WebKIC の大きな欠点を指摘するものである。WebKIC はブラウザーを立ち上げて所定の URI に飛ぶことで起動する。ブックマークをしておけば手軽だが、それでも、タップあるいはクリック 1 回で起動できる単体アプリの簡易さとは比べるべくもない。
もちろん、現状でも、モバイルデバイスで使用する場合は WebKIC をホーム画面に単体ア
プリのような形で置いておくことは可能である。しかし、アドレスバーや「戻る」ボタンなど、Web ブラウザー特有のインターフェイスは消すことができない。WebKIC が PWA19としての条件を満たしていないからである。 これを OS によって正しく PWA として認識されるように修正できれば、ユーザーが利用する上では単体アプリとの違いが全くなくな
るので、その方向での改善を検討している。
そして 7 は、これまでも一貫して学生から寄せられてきた最大の要望である。
WebKIC は、ユニット単位で、あるいは複数のユニットにまたがった範囲ごとに、 まだ覚えていない単語を減らしていく、という学習の進め方を想定して作られている。ユニッ
トの範囲を限定して問題を作成し、テストを繰り返して記憶を確実にし、覚えたと思える
単語にチェックをつけていく。テストは、まだチェックがつけられていない単語を優先的に表示する。すでにチェックをつけた単語でも、忘れていたらチェックを外 し、次回のテストですぐに現れるようにする。これは、SKIP 統一試験に備える時のように、ユニット単位で範囲を区切って学ぶ、あるいは復習するには適しているが、Anki のように SRS システ
ムを採用しているアプリケーションとは大きく異なる方式である。
Anki のフラッシュカードは、ユニット単位で段階的に進んでいくという考え方ではな
く、所与のデッキに含まれる全ての単語を対象に、ランダムにカードを提示していく。学
習者は、正解できた場合には Good ボタンを押し、そうでなければ Again ボタンを押して次のカードに進む。もうこの問題は簡単だと思ったら、Easy ボタンを押す。新たな単語に混じって、すでにテストした単語も現れる。すでにテストした単語が次に現れるまでの間
隔は、それまでの正解率に応じて決定される。よく間違える単語はより頻繁に、 間違いの少ない単語、あるいは Easy ボタンが押された単語は長い間隔を空けて 現れる。
このように、「覚えた単語にチェックマークをつける」という WebKIC の方式と、3 つのボタンを使い分けて記 憶の状態を入力す る Anki の方 式は異なってい る わけである。
WebKIC のチェック機能がスター機能よりも使われていないことは先述したが、背景にはこの要因があると考えられる。つまり、Anki のシステムと似ているが異なっていることへの違和感である。

- 89 -

日本研究センター教育研究年報 第 7 号 (2018.9)

SRS を使いたいという学生からの要望は根強い。SKIP 統一試験の準備のためだけでなく日常の習慣としても使いやすいように、WebKIC の方式の良い点と SRS の良い点を兼ね備えた新たな方式を考案する、あるいは好みに応じてどちらも選べるようなシステムを構築することが望まれる。
他にも、特に学生からの要望はなかったが、改善していきたい点がいくつかある。一つは、教員用アカウントの機能を拡大することである。現在、教員用アカウント独自の機能
は例文テストの細かい設定と保存に限られているが、例えば、学生全員の学習の進み具合を一覧できるような画面を表示できるようにしたい。
もう一つは、ログインパスワードを忘れてしまった時の再設定を容易にする ことである。現状では、もしパスワードを忘れたら管理者（つまり筆者）に直接問い合わせてリセット操作を依頼しなければならない。これは、管理者を通さなくともアカウント保持者自身ができるようにしたほうが望ましい。

おわりに困難が伴った今回のアップデートであるが、アンケートの結果、学生から好意的に受け入れられていることが明らかとなり、開発者として胸をなで下ろしているところである。
特に、同等の機能を持った他のアプリケーションよりも優れているというコメントを初めて、しかも複数得ることができたのは（質問 4-1 への回答参照）、望外の喜びであった。
教員や学生から直接寄せられている要望は他にもいくつかあり、また、2015 年と 2016
年のアンケートで要望されたものの、いまだに実現していない機能もある。全てを叶えることができるまでにはさらなる時間と研究が必要である。今後も、学生が 漢字を効果的に楽しく学べるアプリケーションに WebKIC を育てていきたい。また、バージョン 0.9βでアカウント機能が実装されたことにより収集できるようになった 学生の学習履歴データが十分に集まったら、そのデータの分析にも着手したいと考えている。

注

1

Special Kanji Intensive Program、以下略して SKIP と記す。SKIP については、本年報所
収の大竹弘子「2017-18 年度カリキュラム報告―アメリカ・カナダ大学連合日本研究センターの中上級日本語集中教育―」を参照。

2

SKIP 統一試験とは、学生に SKIP の完遂を促すために実施している定期試験のことである。注 1 でも示した大竹弘子「2017-18 年度カリキュラム報告―アメリカ・カナダ大学連合日本研究センターの中上級日本語集中教育―」 を参照。

3

秋澤 (2016) を参照。

- 90 -

日本研究センター教育研究年報 第 7 号 (2018.9)

4「PHP マニュアル：関数リファレンス：セッション関連」を参照
http://php.net/manual/ja/refs.basic.session.php （確認 2018.8.10）

5

現時点では、本校教職員のメールアドレスで登録したアカウントを自動的に教員用として設定し、例文テスト作成のための特別な権限を付与している。

6

サーバーが、そのシステムの内部状態に関わらず、同じ入力に対しては常に同じ応答を返すことから、このような方式は「ステートレス」と形容される。

7

例えば Gmail の Web クライアントを使う時、みな同じ URI にアクセスするが、ユーザ
ーによって異なるメールボックスが表示されるであろう。サーバーがユーザーごとに異なった情報を保持し、同じ入力（URI）でも異なった応答を返していると言えるから、
このような方式は、先述のステートレスのちょうど対極にあたる「ステートフル」という言葉で形容される。もっとも、ある URI に対して情報をリクエストする際、ブラウザーは裏でユーザー固有の情報をサーバーに送信しており、それによってサーバーは送り返すべき情報を選択している。 HTTP はあくまでもステートレスなプロトコルであって、ステートフルといっても擬似的なものに過ぎない。詳しくは注 10 を参照。

8

詳しくは以下のページなどを参照のこと。
独立行政法人情報処理推進機構 (IPA)「セキュアな Web サーバーの構築と運用 6.4.1
セッション管理」
https://www.ipa.go.jp/security/awareness/administrator/secure-web/chap6/6_session-1.html（確認 2018.8.10）

9

現在はブラウザー上のフォームにユーザー名とパスワードを入力することでサーバーが利用者を識別し認証する方法が広く用いられており、WebKIC もこの例に漏れない。
しかし、これより厳重な二段階認証方式も、その具体的仕様は様々であれ、一般化しつつある。また、Web サービスの新たなユーザー認証方法として、例えば FIDO と呼ばれるプロトコルが標準化の動きを進めている。 FIDO は、2013 年の iPhone 5s 登場を
きっ かけ に スマ ート フォ ンで 爆発 的 に普 及し た指 紋認 証な ど の高 度な 生体 認証 を、
Web アクセスにも応用しようとするものである。
https://fidoalliance.org/fido%E3%81%AE%E4%BB%95%E7%B5%84%E3%81%BF/?lang=ja（確認 2018.8.10）

10

セッション管理機構とクッキーを用いたアカウント機能がどのような仕組みで動いているか、自分がたどり着いた理解を本文中に述べるのは脱線にすぎると思われるので、参考までにここに記しておく。
まず、Web サーバーに対してパスワードなどの方法で自分の認証を済ませたクライ
アント、つまりユーザーが用いているブラウザーは、認証成功後にサーバーが発行してきた「セッション ID」と呼ばれるランダムな文字列をクッキーとして自分の手元に保存する。ブラウザーは、次にサーバーにアクセスする際にこのセッション ID をリク- 91 -

日本研究センター教育研究年報 第 7 号 (2018.9)

エストヘッダーに含めて送信する。リクエストヘッダーとは、クライアントが URI の示す先にデータを要求したり送信したりする際、あわせて相手に送信する管理情報のようなものであり、その際、クッキーのデータがリクエストヘッダーに自動的に追加される。クッキーとはそのような仕組みである。サーバーはそれによってどのユーザ
ーが自分にアクセスしてきているかを識別し、要求された情報を送信するか、あるいはク ライ ア ント から 情報 が送 られ て きた 場合 には その ユー ザ ーの もの とし て保 存する。この時、送られてきたデータは Web サーバーの背後にあるデータベースサーバーにも保存され、そこで初めてデータが恒常化する。
この段階では、もはや認証時に使われたアカウント名とパスワードは用済みであり、代わりにセッション ID がいわば鍵となり、サーバーという「情報の金庫」を解錠する役割を果たすようになっている。
ただし、この解錠はブラウザーからサーバーへの接続が発生するごとに行われる。
HTTP プロトコルでは、クライアントが発行するリクエストをきっかけとしたデータの送受信が終われば、サーバーは接続を閉じる。いちいち金庫を開けては閉じているわけである。認証を済ませたユーザーは、ブラウザー画面を開いている間、ずっとサーバーの中身が見えているかのように錯覚するものだが、見えているのはあくまでも前回のアクセスによってブラウザーにダウンロードされてきたデータであり、いわば自分の家の中が見えているに過ぎない。金庫はもう閉じている。
そして、金庫が閉じている時間が長くなったり（一般的には１週間程度）、ブラウ
ザーを終了してしまったりすると、セッション ID を保存していたクッキーの有効期限が切れる。Web サーバーは、その状態でアクセスされると、当該セッション ID と紐づけられたセッション変数と呼ばれるデータをセッション ID ごと抹消してしまう。ここでユーザーがまたサービスを使いたければ、再びアカウント認証を行ってログインし、Web サーバーは新たなセッション ID を発行、そして恒常的な保存先であるデータベースから改めてデータを取り出し、セッション変数に保存した上で、クライアントとやり取りをしなければならない。
以上である。セッション管理の仕組みは、 Web サービスの利用者が抱く直感とは大きく異なり、かなり複雑な様相を呈している。ステートレスな HTTP プロトコルの上でステートフルな通信を行うため、かなり無理な筋を通しているということが理解できるだろう。セッション管理についての技術者向けの説明としては、例えば注 7 に挙げたような情報源が詳しいが、専門的な技術者ではない筆者がこのような基本的理解にたどり着くまでには長い時間を要した。
11

セッション管理機構の活用方法と安全な Web アプリケーションの構築については、徳丸（2011）を全面的に参考にした。また、IPA による解説（下リンク）も参考になった。
https://www.ipa.go.jp/security/vuln/vuln_contents/session.html （確認 2018.8.10）- 92 -

日本研究センター教育研究年報 第 7 号 (2018.9)

12https://www.iucjapan.org/html/call_j.html を参照。

13

API とは言っても実態は URI に HTTP リクエストを送っているに過ぎないが、Web サ
イトが単にページを表示するだけでなく実質的にアプリケーションとして機能するよ
うになって以来、そのような Web サイトが HTTP プロトコル上で JavaScript などを用いたプログラム的な指示をクライアントから受け付けるために設置しているインターフェイスを Web API と呼びならわしている。特に、そのように作られた個々の URI のことは API エンドポイントと呼ばれる。

14

Web Audio API の概要は、「MDN Web docs: Web Audio API」を参照。
https://developer.mozilla.org/ja/docs/Web/API/Web_Audio_API （確認 2018.8.10）
具体的な実装方法は、Boris Smus（ 翻訳者不詳）「Web Audio API の基礎」(HTML5 Rocks)
を参考にした。
https://www.html5rocks.com/ja/tutorials/webaudio/intro/ （確認 2018.8.10）15

変更された字は、謎、箸、賭、捗、餌、牙、遜、溺、詮、僅、餅、煎、喩、嘲、葛、蔽、蔑、捗、遡、茨、淫、頰、剝、叱、塡。

16

手書き風フォントとしては、霧風隼氏が開発し、フリーで配布されていた「隼文字」
を使わせていただいた。残念ながら 2018 年 8 月 10 日現在、氏のサイトは削除されている。(http://hayatotin.web.fc2.com/font.html)

17

2016-2017 年度レギュラーコースの学生、Ajjana Thairungroj（ 図 5 上）と Karin Tompkins（図 5 下）が描いてくれたイラストである。アンケート調査の回答（質問 3-3）から分
かる通り、利用者からの評価はとても好意的である。両名にはこの場を借りて深く感謝を申し上げる。

18

Anki などのフラッシュカード作成アプリケーションがこの方式を採用しており、人気が高い。https://apps.ankiweb.net/（確認 2018.8.10）

19Progressive Web App の略称である。Pete LePage（Yoichiro Tanaka 訳）「はじめてのプ
ログレッシブ ウェブアプリ」(Google Developers) などを参照のこと。
https://developers.google.com/web/fundamentals/codelabs/your -first-pwapp/?hl=ja（確認 2018.8.10）

参考文献

秋澤委太郎 (2015)「『Kanji in Context』を Web から使う ―長期的な使用に耐える多目的
教育リソースの構築とその活用例―」『日本研究センター教育研究年報』第 4 号、
pp.38-58
秋澤委太郎 (2016)「WebKIC の改良とそれに対する学生の反応」『日本研究センター教育
研究年報』第 5 号、pp.35-58- 93 -

日本研究センター教育研究年報 第 7 号 (2018.9)

徳丸浩 (2011)『体系的に学ぶ

安全な Web アプリケーションの作り方

脆弱性が生まれる原理と対策の実践』SB クリエイティブ（2018 年 6 月に第 2 版が出版された）

資料１：アンケート調査項目1

使用状況
1) どのくらい使っていますか。（使ったことがない／１〜２回試しに使ってみただけで、やめた／最初はよく使っていたが、今は使わなくなった／ SKIP 統一テストの準備をする時だけ使った／月に何回か使っている／週に何回か使って いる／ほぼ毎日使っている）
2) どこで、どんなデバイスからアクセスしましたか（センターで、PC からアクセスした／センターで、スマートフォンからアクセスした／センターで、タブレットからアクセスした／自宅で、PC からアクセスした／自宅で、スマートフォンからアクセス
した／自宅で、タブレットからアクセスした／通学などの移動中に、PC からアクセ
スした／通学などの移動中に、スマートフォンからアクセスした／通学などの移動
中に、タブレットからアクセスした／図書館や喫茶店などの外出先で、PC からアクセスした／図書館や喫茶店などの 外出先で、スマートフォンからアクセスした／図書館や喫茶店などの外出先で、タブレットからアクセスした（複数選択可））

2

使わなかった・使うのをやめた理由※「１使用状況」の質問１で、「使ったことがない」「１〜２回試しに使ってみただけで、やめた」「最初はよく使っていたが、今は使わなくなった」のいずれかを選んだ回答者にのみ、以下の質問が表示された。

1) 「WebKIC」を使わなかった・使うのをやめた理由を教えてください。（画面が見にくかったから／操作がしにくかったから／楽しくなかったから／モニターでなく紙で勉強したいから／他のソフト（iKIC、Anki など）を使っていたから／その他）
2) 「もしこれがあれば WebKIC を使った」という機能などがあれば、教えてください。
（自由記述）

3

WebKIC を使用した感想※「１使用状況」の質問１で、「SKIP 統一テストの準備をする時だけ使った」「月に何回か使っている」「週に何回か使っている」「ほぼ毎日使っている」のいずれかを選んだ回答者にのみ、以下の質問が表示された。

1)

具体的に、どのような点が役に立ちましたか、あるいは役に立ちませんでしたか。
（自由記述）

2)「WebKIC」の画面表示・デザインは良かったですか。（「とても悪かった」を１、「とても良かった」を５として、５段階のいずれかを回答）- 94 -

日本研究センター教育研究年報 第 7 号 (2018.9)

3)

画面表示・デザインについて特に良かった点があれば教えてください。（自由記述）

4)

画面表示・デザインについて特に悪かった点があれば教えてください。（自由記述）

5)「WebKIC」は操作しやすかったですか。（「とても操作しにくかった」を１、「とても操作しやすかった」を５として、５段階のいずれかを回答）

6)

操作方法について、特に良かった点があれば教えてください。（自由記述）

7)

操作方法について、特に悪かった点があれば教えてください。（自由記述）

8)

よく使っていた機能を教えてください。（「レファレンス」機能 (URL) ／「確認テスト」機能 (URL) ／「フラッシュカード」機能 (URL) ／「文脈クイズ」機能 (URL)）／単語の音声を読み上げる機能／単語に「チェック」をつける機能／単語に「スター」をつける機能／自分の達成度（何パーセントの単語を覚えたか）を確認する機能（複数選択可））9)

使わなかった機能を教えてください。（「レファレンス」機能 (URL) ／「確認テスト」機能 (URL) ／「フラッシュカード」機能 (URL) ／「文脈クイズ」機能 (URL)）／単語の音声を読み上げる機能／単語に「チェック」をつける機能／単語に「スター」をつける機能／自分の達成度（何パーセントの単語を覚えたか）を確認する機能（複数選択可））

10) WebKIC を使うときにサインインしましたか。（はい、サインインしました／いいえい、サインインしませんでした／その他）
11) WebKIC を使うときにサインインしなかった方にお尋ねします。サインインしなかった理由を教えてください。（自由記述）
12) WebKIC のマニュアル (URL) に問題があれば、教えてください。
13) WebKIC に追加したらいいと思う機能があれば教えて下さい。（自由記述）

4

その他の感想※「１使用状況」の質問１で、「SKIP 統一テストの準備をする時だけ使った」「月に何回か使っている」「週に何回か使っている」「ほぼ毎日使っている」のいずれかを選んだ回答者にのみ、以下の質問が表示された。

1) これまでの質問に当てはまらない感想や、他のアプリケーションと比較しての印象、あるいはアプリケーション改善のアイディアなどがあれば、ぜひ自由に書いて下さい。（自由記述）
2) もしよければお名前を教えて下さい。（オプション）- 95 -

日本研究センター教育研究年報 第 7 号 (2018.9)

資料２：アンケート全回答（回答者の氏名は除く）

質問 1-1

質問 1-2

使用頻度

使ったことがない

0

１〜２回試しに使ってみただけで、やめた

0

最初はよく使っていたが、今は使わなくなった

3

SKIP 統一テストの準備をする時だけ使った

8

月に何回か使っている

4

週に何回か使っている

6

ほぼ毎日使っている5

使用環境（複数選択可）

センターで、PC からアクセスした

8

スマートフォンからアクセスした

13

タブレットからアクセスした5

自宅で、PC からアクセスした22

スマートフォンからアクセスした

18

タブレットからアクセスした

7

通学などの移動中に、PC からアクセスした0

スマートフォンからアクセスした

23

タブレットからアクセスした

1

図書館や喫茶店などの外出先で、PC からアクセスした

8

スマートフォンからアクセスした

9

タブレットからアクセスした4- 96 -

日本研究センター教育研究年報 第 7 号 (2018.9)

質問 2-1

使わなかった・使うのをやめた理由

画面が見にくかったから

0操作がしにくかったから0

楽しくなかったから

0

モニターではなく紙で勉強したいから。

0

他のソフト（iKIC、Anki など）を使っていたから

2

その他

1

「その他」の自由回答：･ スマートフォンのが画面に合わない

質問 2-2「もしこれがあれば WebKIC を使った」･ このアプリようなＳＲＳがあれば、必ず使う（https://itunes.apple.com/us/app/japanese/id290664053?mt=8 ）。つまり、もう何回正しく答えたを見えないで、出来ない漢字だけ練習を練習することである。ＡＮＫＩもそういうシステムを使っている。特に、６００字のテストのため勉強する時便利だと思っている。だが、ＫＩＣもとてもいいソフトだと思った。ＩＵＣを始めた時、他の学生に「ＩＵＣはそういう素晴らしいスフを作った、すごいね」も何回言った。作って頂いてありがとうございます！
･ Anki との連携（実はドライブにある KIC ver.3 のデータを使い、Anki カードを作った
けど、今の KIC バージョンと違ってそうであるので、自分の手で入力したことがあります）、あるいは Anki のような、自分のラーニングカーブを記録する機能を搭載してほしいと思います。
今のデザインは、試験を準備するのに完璧であると思いますが、試験がないと KICを開くと何をすべきかためらっています。例えば、毎日 L1 から L150 まで練習するのは無理です。前にチェックしたカードを外して練習するのはいいですが、チェックしいても何週間後忘れかねませんので、チェックしたカードも復習したい。もし「チェック」は一括的な「チェック」でなく、一週間後自動的に消えたり、 Anki のように、チェックした回数に応じて消える時点を先送りしてもらえばと思います。（初めてチェック：一週間後、第二：二週間後など）
あえて色々な点をあげさせていただきましたけれど、実はとても素晴らしいアプリ
だと思います。何も変わらなくても、学生に対して不可欠なソフトです。開発していただいて、誠にありがとうございました！
･ 携帯アプリで使いたい- 97 -

日本研究センター教育研究年報 第 7 号 (2018.9)

質問 3-1役に立った、あるいは立たなかった点･ 残念ながら年のせいで様ざまな機能の使い方が分からなかった【説明署を見なかった】。私にとって一番役に立つの機能はフラシュカードでした。例文と語彙の翻訳が一番でした･ 役に立つ点：１）自分でフラッシュカードを作らなくてもいい、２）許可書と同じ内
容、３）両方の順番（許可書の順番とランダムな順番）ができる、４）覚えにくい単語にスターをつける機能、５）一つの単語からその単語の例文を探すこと、６）音声！！！
あまり役に立たない点：１）サインインする場合は、時々「許可書の順番で」とクリックしても違う順番になちゃった、２）最後の KIC の試験は、毎日の試験に出た単語だけに限られていたので、私は出るはずの単語にスターをつけました。でも、それだったら、覚えにくい単語にスターをつけるのができなくなりました。そのため、最後の試験に自分でフラッシュカードを作りました。３）スマートフォンで「ログインを保持」とクリックしても保持してくれないので、毎回ログインしないといけなかったです。
･ The ability to put stars on flashcards in order to mark ones that need review was helpful. One
flaw I noticed was that the font between handwritten and printed forms shows differences insome characters (for example, 箸 or 遜), so maybe if there were a mark on these cards toindicate that there is a difference, that would be helpful.
･ 復習する時に、選択した範囲の中の言葉を早く見ることは役に立ちました。
･ 赤い字しか勉強できないし、どんなデバイスを使っても、同じ回から始められる。
･ Flashcards は本当に役に立ちました。

質問 3-2

質問 3-3

画面表示・デザインは良かったか（５段階評価）

1 とても悪かった

0

2

0

3

0

4

7

5 とても良かった

16

画面表示・デザインの特に良かった点･ 使いやすくて役にたす。
･ 漢字を覚えてやすいです。音声のあることも役に立ちました。
･ 簡単で使いやすかったです。それにイラストも楽しかったです。

- 98 -

日本研究センター教育研究年報 第 7 号 (2018.9)･ It did its job, was easy to read, and was pleasant to look at. I liked the ダジャレ illustrations
too.
･ 図が可愛い。
･ わかりやすいです。
･ シンプルなデザインがとても良かったです

質問 3-4

画面表示・デザインの特に悪かった点･ 感じの詳細にとって、もう少しが欲しかったんですけどね。。。
･ 完璧です。
･ ありません･ Iphone 5 で使った時、画面と iphone 5 のスクリーンが合わなかった。
･ テストの日、皆さんは、同時に使っているはずで、時々アクセスできませんでした。
直せるかどうかは、分かりませんが、そうした問題が時々ありました。
･ 時々フラシカードは遅く動きました。

質問 3-5

質問 3-6

操作しやすかったか（５段階評価）

1 とても使いにくかった

0

2

0

3

0

4

6

5 とても使いやすかった

16

操作方法について特に良かった点･ 選びの選択が多いので良かったです。
･ 速かったです。
･ I only used the flashcard portion (not the reference or any part), but the flashcard worked wellon both phone and PC.
･ フラッシュカードは単語の暗記することに助かりました。
･ 初めて使う時はちょっと混乱でしたが、何回使ったらすぐ慣れました。

質問 3-7

操作方法について特に悪かった点･ ありません･ スマホで使う時、ランダムの確認テストのページをリフレッシュしたら、覧が再び作られ、順番が変わって、クイズの最初から始めないといくつかの単語をスキップしか- 99 -

日本研究センター教育研究年報 第 7 号 (2018.9)

けないということがありました。
･ フォントによって字が間違っている場合がある

質問 3-8

質問 3-9質問 3-10

よく使っていた機能（複数選択可）

レファレンス機能

9

確認テスト機能

14

フラッシュカード機能

20

文脈クイズ機能8

単語の音声を読み上げる機能

8

単語に「チェック」をつける機能

12

単語に「スター」をつける機能

19

自分の達成度を確認する機能

5

使わなかった機能（複数選択可）

レファレンス機能

6

確認テスト機能

6

フラッシュカード機能

1

文脈クイズ機能10

単語の音声を読み上げる機能

7

単語に「チェック」をつける機能

5

単語に「スター」をつける機能2

自分の達成度を確認する機能

15

使う時にサインインしたか

はい、サインインしました21

いいえ、サインインしませんでした

0

その他

2

「その他」の自由回答：･ 場合によりました･

半分ぐらいサインインしました- 100 -

日本研究センター教育研究年報 第 7 号 (2018.9)

質問 3-11

サインインしなかった理由（前問で「しかなった」と回答した場合）･ サインインに時間を使いたくないとき、また基本単語の全部を勉強したいとき（スターをつける単語と関係ない時）でした。
･ サインインしない場合はほとんど PC や携帯になんとなくサインアウトされ、pw を覚えていない時でした。
･ パースワード忘れてしまいました。
･ 時間の問題だった。サインインしない方がもっと早かった（特に移動中の場合）。

質問 3-12

オンラインマニュアルに問題はあったか･ あまりないです。
･ 残念ながらマニュアルがあることは忘れました！。これからマニュアルを読んでWebKic をもっと積極的にに使います。
･ 完璧です･ なし

質問 3-13

追加したら良いと思う機能･ 例文の翻訳があればようかった。
･ 満足です･ 品詞などに関する機能（例：する動詞、漢語、な形容詞、訓読み）･ ない･ フラッシュカードの後ろに、ユニットの番号があればよかったかもしれない。復習の試験の準備に役に立つと思います。
･ 「WebKIC」はこのままでとても役に立ちますが、画像があればもっと使いやすいかもしれません

質問 4-1

その他の感想や意見･ いつまで使えますかを知りたいですが。。。特に夏に復習練習したいですので。
･ 電車でも使えることはとても便利です。中国の出身ですが、音声で漢字の読み方がわかることはよっかたと思います。
･ Quizlet、Japanese というアプリでフラシュッカードをたまに使いましたが気に入りませんでした。
･ 他のアプリケーションと比べると、ＫＩＣの方が時間的によかったと思います。quizletというアプリとかは自分のフラッシュカードを自分で作らなければなりませんので、結構時間かかります。KIC ではフラッシュカードも付けてるので時間を無駄に使いな
いと気がします。

- 101 -

日本研究センター教育研究年報 第 7 号 (2018.9)･ 毎週や毎テストのオプショナル SKIP 授業があれば、とても役にたつと思います。
･ WebKIC は日本語の授業を取らなくてもアプリを使いたいくらい、とても貴重な漢字勉強の道具です･ WebKIC は本当にいいソフトだと思いますが、サイトだけじゃなくてアプリもあれば幸いです。そして、WebKIC はセンターの学生向けのプログラムだというこよくわか
りますが、卒業生にも役に立ち、ダウンロードができる黒い言葉の試験とか卒業生向
けのプログラムがあれば、もっとよくなると思います。
･ 携帯アプリを作ったら、いいと思います。

- 102 -