目次 1. はじめに議事録の考察議事録の問題点議事録のあるべき形開発すべきアプリケーション既存の議事録作成支援アプリケーション VoiceGraphy G S

Size: px

Start display at page:

Download "目次 1. はじめに議事録の考察議事録の問題点議事録のあるべき形開発すべきアプリケーション既存の議事録作成支援アプリケーション VoiceGraphy G S"

なつきさだい
5 years ago
Views:

1 平成 28 年度卒業論文議事録作成支援 Web アプリケーションの開発リアルタイム通信を用いた合意形成を目指して近畿大学工学部情報学科情報物理研究室新川大貴

2 目次 1. はじめに議事録の考察議事録の問題点議事録のあるべき形開発すべきアプリケーション既存の議事録作成支援アプリケーション VoiceGraphy G Suite SIGN CreateMinutes アプリの設計と使用技術設計使用技術 HTML CSS JavaScript milkcocoaapi 各機能の開発過程新規議事録作成機能ログイン機能チャット型発言記録機能ファイル共有機能音声認識機能議事録編集出力機能まとめと課題謝辞引用参考... 17

3 1. はじめにあるものを探求を目的とする科学とは違い, 工学はあるべきものの探求をしていかなくてはならない. そのことを念頭に置いて研究を行った. 私は, 現状の議事録作成現場でおこる問題点について考察した. その問題点を解決できるアプリケーションはあるべきものだと考え開発に臨んだ.2 節では, 議事録の問題点と, 問題解決のために開発すべきアプリケーションの種類を検討した. 2. 議事録の考察 2.1. 議事録の問題点私の所属する情報物理研究室では, 週 2 回のミーティングが行われている. そのミーティングでは, 前回挙げた話題が正確に思い出せない, また同じ話題を繰り返しているという場面もある. これは他のミーティングや会議, ソフトウェア開発の打ち合わせにおいても同様の場面が発生する可能性がある. どんなに小さな会議でも議事録を録っていればこの問題は解消されるだろう. 議事録は合意形成をした証拠の存在として十分な効果を発揮するが, 作成するにあたっては, 議事録作成者の負担が大きいこと, 議事録の内容訂正には手間と時間がかかること, 議事録の正確性を, 参加者全員が必ずしも納得できていないことの三点が問題点として挙げられる. 問題点 1 議事録作成者の負担が大きい議事録を作成する会議の規模は様々である. 例えば, 首相官邸の高度情報通信ネットワーク社会推進戦略本部による会議がある. この規模での議事録の目的は, 政府から国民への情報開示という側面が大きい. よって, 会議内での一言一句を漏らすことなく議事録に記載する. しかし大部分の会議において議事録作成の目的は, 会議の内容を振り返ることである. 会議の場での発言をそのまま書き出すと, 振り返りをするにも時間が奪われてしまう. 会議内容の重要項目を正確にピックアップして要約することは議事録作成者の負担になる. 問題点 2 議事録の内容訂正に時間がかかる議事録は通常, 会議終了後にまとめられ, 会議参加者に配布される. まず議事録作成者が, 自身が記録した議事録 ( 案 ) が, 日本語としておかしいところはないか, 誤字脱字はないかなどの校正を行う. 議事録 ( 案 ) に不備がないと作成者が判断して初めて, 会議参加者に議事録 ( 案 ) が配布される. 会議参加者は, 自らの発言の意図が誤りなく記述されているかを確認するまでに時間を要する. ここでもし間違いを発見して, 訂正することになると, 議事録訂正にさらに時間がかかることになる. 問題点 3 議事録の正確性を参加者全員が納得できていない議事録は通常, 議事録作成者に作成作業がすべて任せられる. そのため, 会議中の発言は発言者の意図しない解釈で議事録に書き込まれる可能性がある. 完成した議事録が配布される際, すべての内容に目を通して訂正を要求する人がそう多く存在するとは思えない. 後になって議事録の内容が, 自分の発言の意図とは違うものだとしたら, 次回の会議進行にも影響が出でしまう可能性もある. 議事録作成者に議事録作成を任せきりでは, このような事態が起きることを防げない. 1

4 2.2. 議事録のあるべき形問題点 1 議事録作成者の負担が大きいと, 問題点 3 議事録の正確性を参加者全員が把握できないを解決するためには, 会議参加者全員が情報通信端末を持ち, 自らの発言の要点を書き込み, 議事録作成者の負担を分散させることが必要だ. または, 音声認識などを用いて, 自動で発言内容が議事録に書き込まれれば, 会議参加者は会議に集中できるためより良い. 問題点 2 議事録の内容訂正に時間がかかるを解決するためには, 会議終了時には, 会議参加者の確認が取れた議事録が出来ていなければならない. あるべき理想の議事録は, 発言者の意図を正確に読み取った内容が記述され, 会議終了時には会議参加者全員の内容確認が済んでいるものが自動で作成される議事録である開発すべきアプリケーション総務省が公開している, 平成 28 年度版情報通信白書によると, 主な情報通信機器の保有状率 ( 世帯 ) は,2015 年度で軒並み 30% を超えている.[3]( 図 1)2010 年度時点では, スマートフォンは 9.7%, タブレット端末は 7.2% の保有率だった. しかし,2015 年度時点ではスマートフォンは 72.0% と大幅に保有率が上昇し,2015 年度のパソコンの保有率 76.8% に近付いた. タブレット端末も着実に保有率を伸ばし,2015 年度で 33.3% の保有率となっている. それぞれの端末は普及が進み, アプリケーションを開発する際には端末の種類ごとに対応させなければならない状況だ. 100% 各情報通信機器の保有率 ( 世帯 ) 90% 80% パソコン 70% 60% 50% 40% 30% 20% 10% スマートフォン携帯電話 PHS( スマートフォンを含む ) タブレット端末 0% 図 1 各情報通信端末の保有率調査結果アプリケーションは大きく分けて 3 種類に分類できる. 一つ目は,Android アプリや ios アプリ,Windows アプリなど, 端末インストール型のアプリケーションであるネイティブアプリだ. 二つ目は, JavaScript などの Web 技術を利用して構築された Web アプリだ. そして三つ目が, ネイティブアプリと Web アプリを組み合わせたハイブリットアプリである. ネイティブアプリは端末にインストールしなければならない. それは, 多様な端末が存在している現状の環境では, それぞれの規格に合わせてアプリの開発を行わなければならず, 効率の良い開発方法とは言えない. 2

私は, 多様な端末が存在する現状の環境ならば, 端末ごとにインストールする手間を省くことができ, 端末に依存することなく動作をする,Web アプリケーションが適していると考えた. 開発者側の視点からでもメリットが様々にある. まず, 端末ごとに仕様を大きく変えることなくアプリ開発を行うことができる利点がある.

5 私は, 多様な端末が存在する現状の環境ならば, 端末ごとにインストールする手間を省くことができ, 端末に依存することなく動作をする,Web アプリケーションが適していると考えた. 開発者側の視点からでもメリットが様々にある. まず, 端末ごとに仕様を大きく変えることなくアプリ開発を行うことができる利点がある. そして, アプリの更新を行う際には, 開発者が Web ページの更新を行うだけで全ユーザに更新が反映されるため, ユーザにアプリのアップデートを行ってもらわなくてよいという利点もある. このような, 未完成でもとりあえずリリースして, 必要に応じてアップデートしていくという特徴により,Web アプリは永遠のベータ版と呼ばれている. 現在主流の Web アプリではユーザがリクエストして初めてレスポンスをする pull 型の情報通信が基本である. 反面,Web ページで情報が更新されると, ユーザによるリクエストを待つことなく情報を送ることができる push 型通信も存在する.Push 型通信を実現するためにはいくつかの方法がある. Ajax と JavaScript を利用した非同期通信処理を利用する方法, もう一つは,HTML5 に追加された WebSocket と呼ばれる通信規格を利用する方法も挙げられる. 図 2 には WebSocket の仕組みを表している.push 型通信ならば, 情報が更新するたびに自動で情報を書き換えることが可能なため, ユーザとしてはストレスを感じることなく快適にサービスを利用することができる. よって,push 型通信を採用し, リアルタイムに議事録を作成できる Web アプリケーション CreateMinutes の開発をすることに決定した. 図 2 WebSocket の概要図 [1] 3. 既存の議事録作成支援アプリケーションインターネットの検索を利用して, 導入事例が多いアプリケーション, 機能とユーザーインタフェースが良いアプリケーションを以下に記述する VoiceGraphy VoiceGraphy は北海道日本電気ソフトウェア株式会社が開発した議事録作成支援システムで, ネイティブアプリである. 高度な音声認識技術を駆使して, 正確でリアルタイムな音声書きおこしを実現している. 音声認識には NEC の技術を使用している. アプリケーションのデザインは 2013 年のグッドデザイン賞を受賞している. 販売価格は 60 万円で日本国内の公共団体向けである.( 図 3) 導入事例によると, 公共団体は 9 都道府県 14 団体, 民間では 6 団体の導入実績がある. 3

図.3 VoiceGraphy アプリケーション画面 [2] 3.2. G Suite Google Inc. が開発提供しているクラウドサービスである. 議事録作成はもちろん, ファイル管理やスケジュール管理などの機能が備わっている. ブラウザ上で動作する web アプリだが,GoogleChrome でのみすべての機能がサポートされており, 他のブラウザでは主要機能がサポートされていない.

6 図.3 VoiceGraphy アプリケーション画面 [2] 3.2. G Suite Google Inc. が開発提供しているクラウドサービスである. 議事録作成はもちろん, ファイル管理やスケジュール管理などの機能が備わっている. ブラウザ上で動作する web アプリだが,GoogleChrome でのみすべての機能がサポートされており, 他のブラウザでは主要機能がサポートされていない.1 ユーザあたり月額 500 円で,GSuite で提供されているサービスがすべて利用できることはメリットである. 議事録作成アプリとしての導入事例は,2 団体の民間企業への導入実績がある. ただし,GSuite で提供されている機能は議事録作成機能ではないため,GSuite の導入事例は大量に存在する SIGN SIGN は株式会社スタジオアルカナの提供する議事録作成支援 Web アプリケーションである. 登録, 利用は無料.AmiVoice や VoiceGraphy とは違い Web アプリケーションのため, 私が CreateMinutes を開発する際に参考にしたアプリケーションだ. 音声認識機能は備わっていないものの, シンプルなユーザーインタフェースにより使用方法が分かりやすいことはメリットだと感じる. リアルタイムに議事録情報が更新されている様子がないため,push 型通信ではないと思われる. 4

7 図 5 SIGN の議事録作成画面 [4] 5

8 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 内に記述して用いる. 6

9 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 だ 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 で追加された仕様を追記することで新機能を利用できる. 7

4.2.3. JavaScript JavaScript とは, 軽量で, インタプリタ型の, 第一級関数を備えたプログラミング言語だ. インタプリタ型言語とは, プログラムを作成したらすぐに実行することのできる言語で, プログラムを実行するたびに機械語へと変換される. 対してコンパイラ型の言語はプログラムが完成するとプログラムをコンパイル ( 処理形式を変換 ) しなければならない.

10 JavaScript JavaScript とは, 軽量で, インタプリタ型の, 第一級関数を備えたプログラミング言語だ. インタプリタ型言語とは, プログラムを作成したらすぐに実行することのできる言語で, プログラムを実行するたびに機械語へと変換される. 対してコンパイラ型の言語はプログラムが完成するとプログラムをコンパイル ( 処理形式を変換 ) しなければならない. そして, 実行ファイルと呼ばれる, ソフトウェアを実行するためのファイルが作成され, このファイルを実行するとプログラムが動作する. プログラムを変更する度にコンパイルする必要のないインタプリタ型の言語は, 大規模開発でない限り開発効率が高い. そのため JavaScript は, すぐに試して実行したいプログラムを記述する際に利用する言語といえる. 第一級関数とは, 関数を第一級オブジェクトとして扱うことのできるプログラム言語の性質だ. 第一級関数オブジェクトとは, あるプログラミング言語において生成, 代入, 演算, ( 引数戻り値 ) としての受け渡しといった, 基本的な操作を際限なしに使用できる対象のことである. 第一級オブジェクトは変数に格納可能である, 無名のリテラル ( 関数定義とともに変数へ代入する形式をとることで, 関数には名前を付けない ) として表現可能といった特徴を持つ.JavaScript の関数は第一級オブジェクトである. そのため関数を変数に代入することや, 関数を配列にセットすることが可能だ.( 表 1) var infunction = function(){ console.log( JavaScript は第一級関数を持っています ) }; 表 1 JavaScript での関数を変数に代入操作 milkcocoaapi 株式会社ウフルによって提供されている Web サービスに milkcocoa があり, そのサービスを利用するための API だ.WebSocket 通信によりリアルタイムな双方向通信を可能にして, さらにデータストアと呼ぶ簡易データベース機能も兼ね備えている.HTTP 通信から WebSocket 通信へ切り替える操作を milkcocoa が行うため, アプリ開発者は, 容易に push 型通信を使用したアプリケーションを開発することができる. 図 7 図 8 にはよく用いるメソッドの push メソッドと on メソッドについてまとめた図を記載している. 図 7 milkcocoaapi DataStore オブジェクト Push メソッドの仕様 8

すると,minutesName と名付けたデータストアに議事録名が保存され,JavaScript に記述した location オブジェクトの href メソッドによりページ遷移する.

11 図 8 milkcocoaapi DataStore オブジェクト on メソッドの仕様 5. 各機能の開発過程 5.1. 新規議事録作成機能新規に議事録を作成する機能だ. 新規議事録を作成するには, 入力フォームに議事録名を入力し, 作成ボタンをクリックする. すると,minutesName と名付けたデータストアに議事録名が保存され,JavaScript に記述した location オブジェクトの href メソッドによりページ遷移する. 入力した議事録名を URL の末尾にクエリ情報として付けることで, 個別議事録へのアクセスを可能にしている. しかし,URL を議事録名にすることで, その URL を検索するだけで個別議事録にログインできてしまうという, セキュリティの脆弱性がある. 図 9 新規議事録作成画面 9

5.2. ログイン機能すでに作成された議事録にログインできる機能だ. 新規議事録作成により作成した議事録名はデータストアの minutesname に送られる. そのため minutesname のすべての議事録名を datastore オブジェクトの stream メソッドで読み込み, リストとして表示する.

12 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 で書き込んでいる. 10

図 12 議事録作成画面チャット型発言記録機能 5.4. ファイル共有機能会議には議論をするために資料が必須のため, 会議中の資料は扱われたかどうかを記録しなければならない.CreateMinutes アプリでは,Ajax(Asynchronous JavaScript + XML) を使用してファイルアップロード機能を追加した.

13 図 12 議事録作成画面チャット型発言記録機能 5.4. ファイル共有機能会議には議論をするために資料が必須のため, 会議中の資料は扱われたかどうかを記録しなければならない.CreateMinutes アプリでは,Ajax(Asynchronous JavaScript + XML) を使用してファイルアップロード機能を追加した.Ajax の形式に従い, 別ファイルに用意した PHP ファイルの uploadform.php に POST メソッドを用いてファイルアップロードをする.( 表 2) アップロードに成功した際には done メソッドが実行され, アップロードに失敗した場合には fail メソッドが実行される. $.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); }); 表 2 Ajax プログラムコード : メソッドチェーン 11

14 図 13 ファイル共有機能 12

5.5. 音声認識機能 HTML5 で追加された API の Web Speech API を用いて連続音声認識を行う機能だ.Web Speech API は 2017 年 2 月 1 日現在 Chrome のみ対応となっている. 図 13 の画面右下にある, クリックイベントを追加した音声認識開始ボタンを押すと音声認識が自動で開始される.

15 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 音声認識機能 ( 認識中 ) 13

16 図 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 タグにクリックメソッドを記述して, 議事録ファイルのダウンロードが可能な状態にする. 14

図 16 出力した議事録の txt ファイル 6. まとめと課題議事録の問題解決をテーマにアプリ開発を行った結果,2.1 で述べた問題点を解決できたかどうかを検討した. 問題点 1 議事録作成者の負担が大きいは,CreateMinutes アプリに会議参加者が, 自らの発言を書き込むことで議事録作成者の負担を軽減できている.

17 図 16 出力した議事録の txt ファイル 6. まとめと課題議事録の問題解決をテーマにアプリ開発を行った結果,2.1 で述べた問題点を解決できたかどうかを検討した. 問題点 1 議事録作成者の負担が大きいは,CreateMinutes アプリに会議参加者が, 自らの発言を書き込むことで議事録作成者の負担を軽減できている. 同じ画面を共有して閲覧できるという,Web アプリケーションの特性を利用して問題解決に成功した. 問題点 2 議事録の内容訂正に時間がかかるは議事録を会議終了時までに完成させておくことが条件だったが, 誤字脱字を認識させて訂正することは困難のため解決できていない. 問題点 3 議事録の正確性を参加者全員が納得できていないは問題点 1 同様, 会議参加者が, 自らの発言を自らの責任の下で書き込むため, 解決できている. 議事録出力形式での課題がある. 実装を予定していた PDF 形式での議事録出力は, 組み込むことができなかった.JavaScript で PDF を出力できるかどうかを検討した. インターネットを利用し調べた結果,PDFMake という PDF 出力機能をもった JavaScript を発見したため, 利用して出力しようと検討した. デフォルトで設定済みの, 英語での出力を, 日本語での出力に変更することはできた. しかし, 出力する PDF に書き込むことのできる文章は,JavaScript に元から json 形式で書き込んでおかないと反映されない. 議事録内容を代入した変数を,json の value に指定するなど試行錯誤したが,PDF での出力は実装できなかった. 15

次に, アプリデザインの課題点を以下に述べる. CreateMinutes アプリのページ遷移は最小限に抑えて開発を行った. 当初は, 議事録の情報だけを書き換えて, 全くページ遷移をすることのないシングルぺージ Web アプリケーションの形で開発を行う予定だったが,milkcocoa の仕様上難しいと判断した.

18 次に, アプリデザインの課題点を以下に述べる. 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 を使いこなそう < 最終閲覧日 :2017/1/29) [2]NEC VoiceGraphy のコンセプト < 最終閲覧日 :2017/1/30) 16

19 9. 参考 [3] 総務省平成 28 年版情報通信白書 ( 最終閲覧日 :2017/2/2) < [4] 株式会社スタジオアルカナ SIGN( 最終閲覧日 :2017/2/5) < MDN WebAPI インターフェイス ( 最終閲覧日 :2017/1/31) < ビジネス +IT ビジネスを加速する UX 時代の企業 Web システム ( 最終閲覧日 :2016/8/3 ) < The PHP Group 言語リファレンス < 最終閲覧日 :2016/8/4) 株式会社ウフル MilkcocoaAPI リファレンス (Javascript,NodeJS) < 最終閲覧日 :2017/1/30) ( 河原達也 2012) 議会の会議録作成のための音声認識 - 衆議院のシステムの概要 - ( 最終閲覧日 :2017/2/2) < ( 松村知子他 2011) ソフトウェア開発の要件定義工程におけるユーザベンダ間のコミュニケーション分析と活用方法 ( 最終閲覧日 :2017/2/5) < no=&ppv_type=0&lang_sw=&no= &cp=> 西沢夢路基礎からの PHP SB クリエイティブ株式会社 (2015) 17

目次 1. 研究の背景と目的 1.1. 背景 1.2. 目的 2. 研究計画 3. 現状報告 3.1. 制作中の Web アプリケーション使用する技術概要機能課題参考にしたサイト書籍 3.2. その他の取り組み 4.

平成 28 年度卒業研究中間レポート Web アプリケーション制作リアルタイム通信を用いたファイルアップロードアプリ近畿大学工学部情報学科学籍番号 1310990107 新川大貴 1 目次 1. 研究の背景と目的 1.1. 背景 1.2. 目的 2. 研究計画 3. 現状報告 3.1. 制作中の Web アプリケーション 3.1.1. 使用する技術 3.1.2. 概要 3.1.3. 機能 3.1.4.

目次 1. はじめに 議事録の考察 議事録の問題点 議事録のあるべき形 開発すべきアプリケーション 既存の議事録作成支援アプリケーション VoiceGraphy G S

目次 1. はじめに議事録の考察議事録の問題点議事録のあるべき形開発すべきアプリケーション既存の議事録作成支援アプリケーション VoiceGraphy G S