平成 28 年度 卒業論文
議事録作成支援 Web アプリケーションの開発
リアルタイム通信を用いた合意形成を目指して
近畿大学工学部 情報学科
情報物理研究室
1310990107 新川大貴
目次 1. はじめに ... 1 2. 議事録の考察 ... 1 2.1. 議事録の問題点 ... 1 2.2. 議事録のあるべき形 ... 2 2.3. 開発すべきアプリケーション ... 2 3. 既存の議事録作成支援アプリケーション ... 3 3.1. VoiceGraphy ... 3 3.2. G Suite ... 4 3.3. SIGN ... 4 4. CreateMinutes アプリの設計と使用技術... 6 4.1. 設計 ... 6 4.2. 使用技術 ... 6 4.2.1. HTML5 ... 7 4.2.2. CSS3 ... 7 4.2.3. JavaScript ... 8 4.2.4. milkcocoaAPI ... 8 5. 各機能の開発過程 ... 9 5.1. 新規議事録作成機能 ... 9 5.2. ログイン機能 ... 10 5.3. チャット型発言記録機能 ... 10 5.4. ファイル共有機能 ... 11 5.5. 音声認識機能 ... 13 5.6. 議事録編集出力機能 ... 14 6. まとめと課題 ... 15 7. 謝辞 ... 16 8. 引用 ... 16 9. 参考 ... 17
1
1. はじめに 「あるものを探求」を目的とする科学とは違い，工学は「あるべきもの」の探求をしてい かなくてはならない．そのことを念頭に置いて研究を行った．私は，現状の議事録作成現場 でおこる問題点について考察した．その問題点を解決できるアプリケーションは「あるべき もの」だと考え開発に臨んだ．2 節では，議事録の問題点と，問題解決のために開発すべき アプリケーションの種類を検討した． 2. 議事録の考察 2.1. 議事録の問題点 私の所属する情報物理研究室では，週 2 回のミーティングが行われている．そのミーティ ングでは，前回挙げた話題が正確に思い出せない，また同じ話題を繰り返しているという場 面もある．これは他のミーティングや会議，ソフトウェア開発の打ち合わせにおいても同様 の場面が発生する可能性がある．どんなに小さな会議でも議事録を録っていればこの問題は 解消されるだろう． 議事録は合意形成をした証拠の存在として十分な効果を発揮するが，作成するにあたって は，「議事録作成者の負担が大きいこと」，「議事録の内容訂正には手間と時間がかかること」， 「議事録の正確性を，参加者全員が必ずしも納得できていないこと」の三点が問題点として 挙げられる． ・問題点 1 「議事録作成者の負担が大きい」 議事録を作成する会議の規模は様々である．例えば，首相官邸の高度情報通信ネットワー ク社会推進戦略本部による会議がある．この規模での議事録の目的は，政府から国民への情 報開示という側面が大きい．よって，会議内での一言一句を漏らすことなく議事録に記載す る．しかし大部分の会議において議事録作成の目的は，会議の内容を振り返ることである． 会議の場での発言をそのまま書き出すと，振り返りをするにも時間が奪われてしまう．会議 内容の重要項目を正確にピックアップして要約することは「議事録作成者の負担」になる． ・問題点 2 「議事録の内容訂正に時間がかかる」 議事録は通常，会議終了後にまとめられ，会議参加者に配布される．まず議事録作成者が， 自身が記録した議事録（案）が，日本語としておかしいところはないか，誤字脱字はないか などの校正を行う．議事録（案）に不備がないと作成者が判断して初めて，会議参加者に議 事録（案）が配布される．会議参加者は，自らの発言の意図が誤りなく記述されているかを 確認するまでに時間を要する．ここでもし間違いを発見して，訂正することになると，議事 録訂正にさらに時間がかかることになる． ・問題点 3 「議事録の正確性を参加者全員が納得できていない」 議事録は通常，議事録作成者に作成作業がすべて任せられる．そのため，会議中の発言は 発言者の意図しない解釈で議事録に書き込まれる可能性がある．完成した議事録が配布され る際，すべての内容に目を通して訂正を要求する人がそう多く存在するとは思えない．後に なって議事録の内容が，自分の発言の意図とは違うものだとしたら，次回の会議進行にも影 響が出でしまう可能性もある．議事録作成者に議事録作成を任せきりでは，このような事態 が起きることを防げない．2
2.2. 議事録のあるべき形 問題点 1「議事録作成者の負担が大きい」と，問題点 3「議事録の正確性を参加者全員が把 握できない」を解決するためには，会議参加者全員が情報通信端末を持ち，自らの発言の要 点を書き込み，議事録作成者の負担を分散させることが必要だ．または，音声認識などを用 いて，自動で発言内容が議事録に書き込まれれば，会議参加者は会議に集中できるためより 良い． 問題点 2「議事録の内容訂正に時間がかかる」を解決するためには，会議終了時には，会 議参加者の確認が取れた議事録が出来ていなければならない． あるべき理想の議事録は，発言者の意図を正確に読み取った内容が記述され，会議終了時 には会議参加者全員の内容確認が済んでいるものが自動で作成される議事録である． 2.3. 開発すべきアプリケーション 総務省が公開している，平成 28 年度版情報通信白書によると，主な情報通信機器の保有状 率（世帯）は，2015 年度で軒並み 30％を超えている．[3]（図１）2010 年度時点では，スマ ートフォンは 9.7％，タブレット端末は 7.2％の保有率だった．しかし，2015 年度時点ではス マートフォンは 72.0％と大幅に保有率が上昇し，2015 年度のパソコンの保有率 76.8％に近付 いた． タブレット端末も着実に保有率を伸ばし，2015 年度で 33.3％の保有率となっている．それぞ れの端末は普及が進み，アプリケーションを開発する際には端末の種類ごとに対応させなけ ればならない状況だ． 図 1 各情報通信端末の保有率調査結果 アプリケーションは大きく分けて 3 種類に分類できる．一つ目は，Android アプリや iOS アプリ，Windows アプリなど，端末インストール型のアプリケーションであるネイティブア プリだ．二つ目は， JavaScript などの Web 技術を利用して構築された Web アプリだ．そし て三つ目が，ネイティブアプリと Web アプリを組み合わせたハイブリットアプリである．ネ イティブアプリは端末にインストールしなければならない．それは，多様な端末が存在して いる現状の環境では，それぞれの規格に合わせてアプリの開発を行わなければならず，効率 の良い開発方法とは言えない． 0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100%各情報通信機器の保有率（世帯）
パソコン スマートフォン 携帯電話・PHS（ス マートフォンを含 む） タブレット端末3
私は，多様な端末が存在する現状の環境ならば，端末ごとにインストールする手間を省く ことができ，端末に依存することなく動作をする，Web アプリケーションが適していると考 えた．開発者側の視点からでもメリットが様々にある．まず，端末ごとに仕様を大きく変え ることなくアプリ開発を行うことができる利点がある．そして，アプリの更新を行う際には， 開発者が Web ページの更新を行うだけで全ユーザに更新が反映されるため，ユーザにアプリ のアップデートを行ってもらわなくてよいという利点もある．このような，未完成でもとり あえずリリースして，必要に応じてアップデートしていくという特徴により，Web アプリは 「永遠のベータ版」と呼ばれている． 現在主流の Web アプリではユーザがリクエストして初めてレスポンスをする pull 型の情報 通信が基本である．反面，Web ページで情報が更新されると，ユーザによるリクエストを待 つことなく情報を送ることができる push 型通信も存在する．Push 型通信を実現するためには いくつかの方法がある． Ajax と JavaScript を利用した非同期通信処理を利用する方法，もう 一つは，HTML5 に追加された WebSocket と呼ばれる通信規格を利用する方法も挙げられる． 図 2 には WebSocket の仕組みを表している．push 型通信ならば，情報が更新するたびに自動 で情報を書き換えることが可能なため，ユーザとしてはストレスを感じることなく快適にサ ービスを利用することができる． よって，push 型通信を採用し，リアルタイムに議事録を作成できる Web アプリケーション 「CreateMinutes」の開発をすることに決定した． 図 2 WebSocket の概要図[1] 3. 既存の議事録作成支援アプリケーション インターネットの検索を利用して，導入事例が多いアプリケーション，機能とユーザーイ ンタフェースが良いアプリケーションを以下に記述する． 3.1. VoiceGraphy VoiceGraphy は北海道日本電気ソフトウェア株式会社が開発した議事録作成支援システム で，ネイティブアプリである．高度な音声認識技術を駆使して，正確でリアルタイムな音声 書きおこしを実現している．音声認識には NEC の技術を使用している．アプリケーションの デザインは 2013 年のグッドデザイン賞を受賞している．販売価格は 60 万円で日本国内の公 共団体向けである．（図 3）導入事例によると，公共団体は 9 都道府県 14 団体，民間では 6 団体の導入実績がある．4
図.3 VoiceGraphy アプリケーション画面 [2] 3.2. G Suite Google Inc.が開発提供しているクラウドサービスである．議事録作成はもちろん，ファイ ル管理やスケジュール管理などの機能が備わっている．ブラウザ上で動作する web アプリだ が，GoogleChrome でのみすべての機能がサポートされており，他のブラウザでは主要機能が サポートされていない．1 ユーザあたり月額 500 円で，GSuite で提供されているサービスが すべて利用できることはメリットである．議事録作成アプリとしての導入事例は，2 団体の 民間企業への導入実績がある．ただし，GSuite で提供されている機能は議事録作成機能では ないため，GSuite の導入事例は大量に存在する． 3.3. SIGN SIGN は株式会社スタジオアルカナの提供する議事録作成支援 Web アプリケーションであ る．登録，利用は無料．AmiVoice や VoiceGraphy とは違い Web アプリケーションのため，私 が CreateMinutes を開発する際に参考にしたアプリケーションだ．音声認識機能は備わってい ないものの，シンプルなユーザーインタフェースにより使用方法が分かりやすいことはメリ ットだと感じる．リアルタイムに議事録情報が更新されている様子がないため，push 型通信 ではないと思われる．5
6
4. CreateMinutes アプリの設計と使用技術 4.1. 設計 2.1.節で記述した議事録の問題点を，解決する機能を盛り込んだ設計にしなければならない． まず基本的な画面設計は，トップ画面からログインを経て，議事録作成画面，参照画面へペ ージ遷移する構造である．（図 6） 議事録作成画面には，LINE の画面 UI を参考に，発言者が自分の発言を識別しやすいデザ インを用いる．画面 UI を会議参加者に理解しやすいデザインにすることを検討する． CreateMinutes は議事録の作成を支援する，Web アプリケーションであるため，会議の参加 者が全員端末を使用し，CreateMinutes 上で会議の要点を発言として書き込むという利用方法 にする．また，WebSpeechAPI を使用した音声認識を用いて，リアルタイムな音声自動書きお こしも行える．会議中に議事録を編集・出力することができる機能を持たせる．出力形式は PDF と txt 形式での実装を予定する． 図 6 画面遷移図 4.2. 使用技術 CreateMinutes アプリでは，クライアントサイドの開発に HTML5，CSS3，JavaScript を用い た．サーバーサイドの開発には PHP を使用した． またクライアントサーバー間でのリアルタイムなデータの受け渡しを実現するために， HTML5 から導入された通信規格の WebSocket を使用する．CreateMinutes アプリでは milkcocoa というサービスを使用して WebSocket 通信をしている．milkcocoaAPI は JavaScript 内に記述 して用いる．7
4.2.1. HTML5
HTML（HyperText Markup Language）は，Web 上の文書をタグと呼ばれる命令でマークア ップし，文書の構造を記述するための言語だ．HTML5 とは HTML の改訂第五版のことで， 前バージョンの HTML4 に代わり 2014 年 10 月 28 日に W3C により正式に発表された．HTML 文書を書く際の DOCTYPE 宣言が<!DOCTYPE html>のみでよくなったことや，<header>や <nav>など HTML4 までには無かった意味づけされたタグを使用することが出来るようになっ たことで，読みやすく理解しやすい HTML 文書を記述することが可能になった．
また，HTML5 から新しく追加された API により，複雑なプログラムを組むことなく使用 できるようになった機能が多数存在する．私が CreateMinutes アプリを開発するにあたって， 利用した API から説明する．私が使用したのは，「Drag & Drop API」，「File API」，「The Web Socket API」だ．
Drag&DropAPI は，これまで jQueryUI などのライブラリを使用して実現していたドラッグ &ドロップを JavaScript のみで行うことができる API だ．例えば，二つある要素の順番をドラ ッグ&ドロップして入れ替えることができる．また，ローカルにある画像やテキストなどの ファイルを，ブラウザへドラッグ&ドロップすることで読み込ませることもできる．ブラウ ザに読み込ませたファイルは，Ajax を用いることでドロップした時点で即時アップロードを 行える． FileAPI は，ローカルファイルの情報を取得すること，ファイル内容を読み取ることを実現 する API だ．Drag&DropAPI がローカルファイルをブラウザに読み込ませることに続き， FileAPI はブラウザに input されてきたファイル情報を読み込むことを担当する．そのため， FileAPI と Drag&DropAPI は一緒に組み込むと，ある範囲にドラッグ&ドロップするだけでフ ァイルのアップロードが行える，即時ファイルアップローダとして機能する．
TheWebSocketAPI は，WebSocket 通信によりクライアントとサーバー間の効率的な双方向 通信を実現する API だ．
4.2.2. CSS3
CSS（Cascading Style Sheets）とは，Web 上の文書の見栄えを定義する言語だ．Web 上の文 書の構造を記述する言語である HTML とともに用いることは，Web デザインの普及した現在 ではほとんど必須だ．CSS の基本の記述方法は「セレクタ｛プロパティ：値；｝」となる．セ レクタとは，HTML で構造化された文書のどの要素を指すか，つまり装飾対象はどの要素か を指定するものだ．HTML のタグそのものをセレクタとし記述するか，HTML タグ内の id 名 または class 名としてセレクタを記述することで，要素の指定が完了する．プロパティとは， セレクタで指定した要素にどの種類の装飾を施すかを指定するものだ．例えば背景色を変え たい場合は background-color を指定し，要素の幅を変えたい場合は width を指定する．プロパ ティの値に装飾内容を指定する．背景色を赤にしたい場合は red を指定し，要素の幅を 200px にしたい場合は 200px と記述する． CSS3 とは，1998 年に確定した CSS2，2011 年に確定した CSS2.1 に続くバージョン 3 の規 格だ．以前のバージョンとは互換性があり，CSS3 で追加された仕様を追記することで新機能 を利用できる．
8
4.2.3. JavaScript JavaScript とは，軽量で，インタプリタ型の，第一級関数を備えたプログラミング言語だ． インタプリタ型言語とは，プログラムを作成したらすぐに実行することのできる言語で， プログラムを実行するたびに機械語へと変換される．対してコンパイラ型の言語はプログラ ムが完成するとプログラムをコンパイル（処理形式を変換）しなければならない．そして， 実行ファイルと呼ばれる，ソフトウェアを実行するためのファイルが作成され，このファイ ルを実行するとプログラムが動作する．プログラムを変更する度にコンパイルする必要のな いインタプリタ型の言語は，大規模開発でない限り開発効率が高い．そのため JavaScript は， すぐに試して実行したいプログラムを記述する際に利用する言語といえる． 第一級関数とは，関数を第一級オブジェクトとして扱うことのできるプログラム言語の性 質だ．第一級関数オブジェクトとは，あるプログラミング言語において生成，代入，演算， （引数・戻り値）としての受け渡しといった，基本的な操作を際限なしに使用できる対象の ことである．第一級オブジェクトは「変数に格納可能である」，「無名のリテラル（関数定義 とともに変数へ代入する形式をとることで，関数には名前を付けない）として表現可能」と いった特徴を持つ．JavaScript の関数は第一級オブジェクトである．そのため関数を変数に代 入することや，関数を配列にセットすることが可能だ．（表 1） 表 1 JavaScript での関数を変数に代入操作 4.2.4. milkcocoaAPI 株式会社ウフルによって提供されている Web サービスに milkcocoa があり，そのサービス を利用するための API だ．WebSocket 通信によりリアルタイムな双方向通信を可能にして， さらにデータストアと呼ぶ簡易データベース機能も兼ね備えている．HTTP 通信から WebSocket 通信へ切り替える操作を milkcocoa が行うため，アプリ開発者は，容易に push 型 通信を使用したアプリケーションを開発することができる．図 7、図 8 にはよく用いるメソッドの push メソッドと on メソッドについてまとめた図を記 載している．
図 7 milkcocoaAPI DataStore オブジェクト Push メソッドの仕様
9
図 8 milkcocoaAPI DataStore オブジェクト on メソッドの仕様 5. 各機能の開発過程 5.1. 新規議事録作成機能 新規に議事録を作成する機能だ．新規議事録を作成するには，入力フォームに議事録名を 入力し，作成ボタンをクリックする．すると，minutesName と名付けたデータストアに議事 録名が保存され，JavaScript に記述した location オブジェクトの href メソッドによりページ遷 移する．入力した議事録名を URL の末尾にクエリ情報として付けることで，個別議事録への アクセスを可能にしている．しかし，URL を議事録名にすることで，その URL を検索する だけで個別議事録にログインできてしまうという，セキュリティの脆弱性がある．10
5.2. ログイン機能 すでに作成された議事録にログインできる機能だ．新規議事録作成により作成した議事録 名はデータストアの minutesName に送られる．そのため minutesName のすべての議事録名を datastore オブジェクトの stream メソッドで読み込み，リストとして表示する． 読み込んだ議事録名の json データを，キーをもとに議事録名の文字データのみ抜き出す．議 事録ごとのボタン（class 名：minutesSelectButton）を document.createElementsByClassName で 議事録の数だけ生成する．minutesSelectButton に innnerHTML で議事録名を書き込み，ログイ ン可能にしている．minuetsSelectButton がクリックされると，javascript の on メソッドでクリ ックイベントを監視していたプログラムが動き，5.3.で説明する，議事録作成画面へのリンク が行われる．この時，5.1.と同じようにリンクは location.href で行われる． 図 10 ログイン画面 5.3. チャット型発言記録機能 議事録に書き込むためのコメントをチャット形式で表示する，CreateMinutes アプリのメイ ン機能だ．参加中の議事録は URL の末尾に付け加えたクエリ情報（議事録名）により判断す る．Location オブジェクトの href で指定した，URL の末尾についた議事録名を切り出したい． そこで，location.href で指定した URL には“?”を付けておいたため，その“?”より後ろのク エリ情報を location オブジェクトの search を使用し切り出す．この時点で切り出せたのは， 図 11 でいうと赤枠で囲んだ“?2017_1_30”の部分になる．さらに，不要な“?”を除くため substring()メソッドを使用し引数に（1，location.search.length）を指定する．substring メソッド は第 1 引数から，第 2 引数までの文字列を取得するという関数だ．第 1 引数に 1 を指定した のは“?”を除いた 2 文字目から切り出したいからだ．第 2 引数には location.search.length，つ まりクエリ情報の文字数を指定した． 図 11 URL のクエリ情報切り取り そして URL から抜き出した議事録名を data と名付けた変数に代入する． milkcocoa.database(data)と記述し data に格納した議事録名のデータストアを作成する（すでに 同名のデータストアが存在していれば，そのデータストアにアクセスされる）．参加している 議事録名を画面上に表示するため，議事録名を表示する div 要素を用意して innerHTML で書 き込んでいる．11
図 12 議事録作成画面 チャット型発言記録機能
5.4. ファイル共有機能
会議には議論をするために資料が必須のため，会議中の資料は扱われたかどうかを記録し なければならない．CreateMinutes アプリでは，Ajax（Asynchronous JavaScript + XML）を使用 してファイルアップロード機能を追加した．Ajax の形式に従い，別ファイルに用意した PHP ファイルの uploadform.php に POST メソッドを用いてファイルアップロードをする．（表 2） アップロードに成功した際には done メソッドが実行され，アップロードに失敗した場合には fail メソッドが実行される． 表 2 Ajax プログラムコード：メソッドチェーン $.ajax({ url: 'uploadform.php', type: 'POST', data: formData, cache : false, processData: false, contentType: false, }) .done(function(data, textStatus, jqXHR){ alert("アップロード成功！"); <---- アップロードに成功した際の処理 ---> })
.fail(function(jqXHR, textStatus, errorThrown){
alert("エラーが発生しました...エラー番号：" + jqXHR.status); });
12
13
5.5. 音声認識機能
HTML5 で追加された API の Web Speech API を用いて連続音声認識を行う機能だ．Web Speech API は 2017 年 2 月 1 日現在 Chrome のみ対応となっている．
図 13 の画面右下にある，クリックイベントを追加した音声認識開始ボタンを押すと音声認 識が自動で開始される． まず，HTML5 から追加された，Window オブジェクトの SpeechRecognition オブジェクトを 生成する．lang（言語）メソッドを’ja’（日本語）にし，連続音声認識を行うために continuous メソッドを true に設定する．onsoundstart メソッドには音声認識中の処理を，記述する．連続 音声認識でも，一回の音声認識が終了するごとに onresult メソッドが実行されるため，音声 認識の結果を，議事録作成画面に表示する処理を記述する．音声認識結果は event.results に入 っている．results は，音声認識結果から予測して導き出した言葉が格納された，配列である． また，音声認識に用いるマイクによって，音声認識結果の精度は大きく変わることも判明 した．パソコンの内蔵マイクを使用すると誤認識が多発し，文章として成立しない箇所が見 受けられた．そこで，Logicool のウェブカメラ Pro9000 を使用して音声認識を行うと，誤認 識は発生するが，文章として読める箇所が多くみられた． 図 14 音声認識機能（認識中）
14
図 15 音声認識機能(停止中) 5.6. 議事録編集出力機能 議事録の出力を行う機能だ．会議が終了したら議事録をダウンロードすることができる． txt ファイルのみの出力になっている．出力を行うには，議事録作成画面の右下にある“txt 形式でダウンロード”というボタンを押す．このボタンは，on メソッドによりクリックイベ ントの監視が行われているため，押すとイベントが発火する．まず，stream オブジェクトの next メソッドにより会議での発言（minutesData）が undefined になるまで for 文で読み込み続ける．そこで変数 a を用意し，minutesData に改行コード¥r¥n を付け加え代入し続けて，すべての発言がひとまとまりに格納された変数にする．
そして，最初の発言の書き込まれた時刻を minutesData[0].timestanp を参照することにより 取得．取得した時刻は UNIXtime の形式になっているためそのままでは使用できない．そこ で，minutesData[0].timestanp を引数とした JavaScript の Date オブジェクト作成し JST（日本 標準時）へ変換する．変換した時刻データから必要な，ミリ秒以外の時刻パラメータを getfullyear()，getMonth()，getDate()，getHours()，getMinutes()，getSecond()により取得．
さらに，変数 a を引数として Blob オブジェクトを生成する．Blob オブジェクトを引数とし た URL オブジェクトの createObjectURL() メソッドを変数 url に代入する．download 属性を 持たせた a タグを生成し，変数 url を代入する．生成した a タグを appendChild メソッド body の子要素に追加する．この a タグにクリックメソッドを記述して，議事録ファイルのダウン ロードが可能な状態にする．
15
図 16 出力した議事録の txt ファイル 6. まとめと課題 議事録の問題解決をテーマにアプリ開発を行った結果，2.1 で述べた問題点を解決できたか どうかを検討した． 問題点 1「議事録作成者の負担が大きい」は，CreateMinutes アプリに会議参加者が，自ら の発言を書き込むことで議事録作成者の負担を軽減できている．同じ画面を共有して閲覧で きるという，Web アプリケーションの特性を利用して問題解決に成功した． 問題点 2「議事録の内容訂正に時間がかかる」は議事録を会議終了時までに完成させてお くことが条件だったが，誤字脱字を認識させて訂正することは困難のため解決できていない． 問題点 3 「議事録の正確性を参加者全員が納得できていない」は問題点 1 同様，会議参 加者が，自らの発言を自らの責任の下で書き込むため，解決できている． 議事録出力形式での課題がある．実装を予定していた PDF 形式での議事録出力は，組み込 むことができなかった．JavaScript で PDF を出力できるかどうかを検討した．インターネッ トを利用し調べた結果，PDFMake という PDF 出力機能をもった JavaScript を発見したため， 利用して出力しようと検討した．デフォルトで設定済みの，英語での出力を，日本語での出 力に変更することはできた．しかし，出力する PDF に書き込むことのできる文章は，JavaScript に元から json 形式で書き込んでおかないと反映されない．議事録内容を代入した変数を，json の value に指定するなど試行錯誤したが，PDF での出力は実装できなかった．16
次に，アプリデザインの課題点を以下に述べる． CreateMinutes アプリのページ遷移は最小限に抑えて開発を行った．当初は，議事録の情報 だけを書き換えて，全くページ遷移をすることのないシングルぺージ Web アプリケーション の形で開発を行う予定だったが，milkcocoa の仕様上難しいと判断した．milkcocoa にはデー タストア(以下データストアとは milkcocoa のデータベースを指す)と呼ばれるデータベース機 能があり，CreateMinutes アプリはデータストアに議事録のデータを蓄積している．データス トアにデータを送るには DataStore オブジェクトを生成し，引数に同期すデータストア名を指 定する．そしてデータを送るメソッドの push に json 形式で送りたいデータを指定し送る．ま た，データストアに push 送られるデータを監視する on メソッドにより，WebSocket 通信が確 立した端末がデータを受信することができる． CreateMinutes アプリの場合 DataStore の引数に，ある一つの議事録を指定して議事録を作成 すると，指定した議事録を作成していくことが出来る．これをシングルぺージで行うと，他 の議事録に移る（ページ遷移をすることなく議事録の情報だけを書き換える）ことは，デー タストアオブジェクトの on メソッドで監視している対象のデータストアを変更することに なる．しかし，データストアオブジェクトの on メソッドは，一度監視対象を指定すると，変 更することができない．（図 17）HTML を再読み込みするなどをして，JavaScript ファイルも 再読み込みすれば on メソッドの監視も解除することができる．そのため，シングルぺージア プリケーションだと，監視するデータストアを変更するには，ユーザに Web ページの再読み 込みをしてもらうしかない．つまり議事録間の移動ができないということになる． 図 17 CreateMinutes がシングルぺージアプリにできない理由 7. 謝辞 本研究を行うにあたり，様々なご指摘を賜りました徐 丙鉄教授，研究へのアドバイスや 協力をしてくれた情報物理研究室の皆に心より御礼申し上げます． 8. 引用 [1]ITmediaInc. 連載：人気順に説明する初めての HTML5 開発：双方向通信を実現！ WebSocket を使いこなそう ＜http://www.atmarkit.co.jp/ait/articles/1111/11/news135.html＞（最終閲覧日：2017/1/29）[2]NEC VoiceGraphy のコンセプト＜http://jpn.nec.com/voicegraphy/＞（最終閲覧日：2017/1/30）
![図 5 SIGN の議事録作成画面[4]](https://thumb-ap.123doks.com/thumbv2/123deta/5690388.514318/7.892.111.780.98.842/図5SIGNの議事録作成画面4.webp)
