公立はこだて未来大学 2017 年度 システム情報科学実習
グループ報告書
Future University Hakodate 2017 System Information Science PracticeGroup Report

プロジェクト名
マンガ工学

Project Name
Manga engineering

グループ名
コミュニケーション班

Group Name
Communication
プロジェクト番号/Project No.

19

プロジェクトリーダ/Project Leader
村上聖将

1015131

Kiyomasa Murakami

グループリーダ/Group Leader
1015169

原田圭悠

Keiyu Harada

グループメンバ/Group Member
1015017

福士洸太

Kota Fukushi

1015159

川瀬周紀

Shuki Kawase

1015199

氏家涼太

Ryota Ujike

1015072

金谷駿汰

Syunta Kanaya

指導教員
角康之

寺沢憲吾

椿本弥生

迎山和司

AdvisorYasuyuki Sumi Kengo Terasawa Mio Tsubakimoto Kazushi Mukaiyama

提出日2018 年 1 月 26 日

Date of Submission
January 26, 2018

概要
私たちコミュニケーション班は、マンガ×コミュニケーションをテーマとして Manga-

Communication という名称のウェブアプリケーションの開発を進めた。既存のチャットツー
ルでは、伝えにくかった感情や表現がある。これらを吹き出しや漫符などのマンガ表現を使って、ユーザ同士のコミュニケーションを既存のチャットツールよりも豊かにする新しい形式のチャットツールが Manga-Communication である。漫画表現とは漫画の中で使用されているキャラクターの感情、状態。そしてシーンの状況などを読者にわかりやすく伝えるために用いられる表現である。これらの表現と既存のチャットツールを組み合わせることにより新しい形のチャットツールを作成することが私たちの目標である。私たちは 3 つの班に分かれそれぞれ
アプリ開発のために必要となる技術、知識の習得や課題の割り当て作業などを行なった。課題は大きく分けデザイン、機能、データベースの３つとなりそれぞれの課題に対して一人から二人が課題解決に当たった。
キーワード

Manga-Communication, 感情, 漫画表現, 吹き出し（※文責: 金谷駿汰）-i-Abstract
Our team s theme is Manga with communication. We are developing a new application
called Manga-Communication .There are aﬀection and expression which is diﬃcult
to tell by exiting chat tool. Manga-Communication make these plainly and enrichcommunication by Manga Expression . Manga Expression is expressive style on
Manga like Fukidashi . It is used to tell character s aﬀection to reader plainly.Our
purpose is to combine these expression with chat tool.We were divided into three groups
and each of us are learning skill and knowledge to develop application.Our team have
big three subject, Design, Function and Data base.One or two member dealt a subject.
KeywordManga-Communication,aﬀection,Manga expression,Fukidashi（※文責: SyuntaKanaya）- ii -

目次
第1章

はじめに

1

1.1

背景 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

1

1.2

目的 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

2

1.3

従来の例 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

2

1.4

従来の問題点 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

2

1.5

前期の課題 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

3

1.6

マンガ表現を用いる理由 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

3

1.7

マンガ的表現の効果 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

4

プロジェクト学習の概要

6

2.1

問題の設定 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

6

2.2

課題の設定 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

6

2.3

到達レベル . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

7

2.4

課題の割り当て . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

8

課題解決のプロセス

9

3.1

プロジェクト内における課題の位置付け . . . . . . . . . . . . . . . . . . . . . . .

93.2

課題解決の方法 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

9

3.3

活用した講義 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

10

第4章

プロジェクト内のインターワーキング

11

第5章

結果

13

5.1

成果物 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

13

5.2

成果物に使用した技術 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

16

5.3

中間発表会 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

17

5.4

成果発表会 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

19

5.5

成果 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

21

5.6

今後の課題 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

21

まとめ

23

6.1

プロジェクト全体の成果 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

23

6.2

プロジェクト内の各々の役割. . . . . . . . . . . . . . . . . . . . . . . . . . . .

24

6.3

今後の課題 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

26

6.4

グループ全体の反省 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

27

6.5

個人の反省 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

27

6.6

前期相互評価 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

28

6.7

後期相互評価 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

30

第2章

第3章

第6章

参考文献

31
- iii -

Manga engineering

第 1 章 はじめに
マンガ工学では、マンガを多角的な視点から分析した。具体的には、吹き出しの効果、擬音（オノマトペ）の効果などのマンガ的表現に関してや、マンガを使った遊びの前例、手塚治虫の伝説などが挙げられる。その分析の結果、私達は 3 つのグループに分かれて活動を行うことにした。以下
ではそれぞれのグループの活動概要を述べる。
コミュニケーション班では、マンガ×コミュニケーションをテーマとし、Manga-Communicationという名称のアプリケーションの開発を進めている。既存のチャットツールでは、伝えにくかった
感情や表現がある。これらを吹き出しなどのマンガ表現を使って、コミュニケーションを豊かにす
る新しい形式のスマートフォンのチャットツールが Manga-Communication である。マンガ表現とはマンガの中で使用されているキャラクターの感情を読者をわかりやすく伝えるために用いられる表現である。これらの表現と既存のチャットツールを組み合わせ新しい形のチャットツールを作成することが私たちの目標である。
マンガ体験では、その名の通りマンガの体験をテーマとし、入り込めるマンガというインタラ
クティブなコンテンツを制作している。既存のマンガ体験コンテンツでは成せなかったストーリーの制作という点に着目し、ユーザの行動によってストーリーが作られていくことを目指している。
マンガリテラシでは、「読みやすいマンガとは？」というコンセプトで研究を進めている。視線計測装置を用いて様々なタイプのマンガを資料に実験を行うことで、わずかな視線の動きを計測する。計測の結果から普段気づかない、マンガの特徴や視線が動く要素が何であるかを見つけ考察している。
以下からはコミュニケーション班の活動を報告する。
（※文責: 氏家涼太）

1.1

背景

マンガは私たちにとって日常的に触れている娯楽である。マンガには特有の表現方法や技術があり、それを活用して読んで楽しむ娯楽としての捉え方だけではなく、それ以外にも参考書や広告など様々な活用法がある。このように私たちマンガ工学では、マンガをメディア技術としてとらえて解析し、その技術を活用できる分野を探した。漫画の表現技法を活用している先行研究にコミックダイアリ [1] と Manga-style Chat System[2] などがある。これらの研究では吹き出しやコマ割りなどの漫画特有の表現方法を使うことで、カジュアルで親しみやすい情報の伝達を可能にしていた。これらの研究を参考にして私たちコミュニケーション班はマンガ的表現を取り入れたチャット
ツールを開発した。私たちが普段から使っている LINE や iMessage などのチャットツールでは短文でのやり取りが多く、また自分の感情を表現するための手段が顔文字や絵文字、スタンプなどしかないため自分の感情とは異なる印象を相手に与えてしまうことがあった。そこで先行研究の事例から、マンガ的表現を活用し文章に視覚的な情報を付与することで相互の感情の食い違いを抑えることができると考えた。
（※文責: 金谷駿汰）

Group Report of 2017 SISP

-1-Group Number 19

Manga engineering

1.2

目的

現代社会において欠かせないサブカルチャーの 1 つとなっているマンガには、読者に迫力を与えながらも読みやすく、分かりやすいようにするための表現方法である「マンガ的表現」が使われている。マンガ的表現には文字を囲う吹き出しの形やコマの背景、漫符と呼ばれるキャラクターの状態や心情を表すマークや符号、オノマトペと呼ばれる独特な字体で描かれた擬音語や擬態語などがあり、これらの表現はマンガに留まらずポスターや参考書など幅広いメディアで利用されている。実際、学習内容部分をマンガ的表現にすることで、文章のみの表現と比べて理解しやすく、長期記憶保持に効果的であるとも言われている [3] 。さらにマンガの技法を用いることで内容を分かりやすく提示するシステムも提案されている [4] 。
我々はこのマンガ的表現に着目し、キャラクターの発言、状態、心情、行動などを読者に直感的に伝えることができるのであれば、普段私たちが利用しているチャットツールに応用することで従来のものと比べてコミュニケーションがより直感的に行えるのではないかと考えた。これをもとに、いくつかのマンガ的表現による装飾機能を備えたチャットツールを作成し、従来のものよりも質の高いコミュニケーションを行うことを目的とした。
（※文責: 氏家涼太）

1.3

従来の例

iMessage、LINE のような従来のチャットツールには、送り手の感情を細かく伝えるために言葉を絵文字や顔文字などで装飾したり、スタンプを送ったりする機能が備わっている。だが石田ら[5]によると絵文字は宗教や文化、年代によって捉え方が違うことがあるので価値観による勘違いが起きやすいとされている。これらの勘違いを防ぐために私たちはチャットツールにマンガ的表現を用いた新たな表現の方法を用意しようとしている。
（※文責: 川瀬周紀）

1.4

従来の問題点従来のチャットツールではスタンプや絵文字、顔文字には組み合わせる事によって会話が豊かにできるが絵文字等の種類が多ければ多いほどをそれらを選ぶ時間が多くかかってしまう [6] 。そのためチャットの会話の内容が単調な文章になりやすく、感情が送信相手に伝わりにくいことがある。また、「ヤバい」や「すごい」等の曖昧な言葉を送り手が一言で使ってしまうと人によって良いニュアンスとしてとらえるのか悪いニュアンスとしてとらえるのか分かりにくい。そのためこうした言葉はニュアンスの伝達による勘違いを引き起こしやすくなる問題を招きやすくなった。
（※文責: 福士洸太）

Group Report of 2017 SISP

-2-Group Number 19

Manga engineering

1.5

前期の課題

グループメンバー全員がアプリ開発の経験がなく開発に必要な知識、スキルなどが無く各々割り振られたデザイン、機能、データベースの 3 つの課題を解決するべくそれらの取得が必要であった。
さらに前期の時点ではどのような漫画表現をチャットツールに組み込むのか、既存のチャット
ツールのどのような機能をマンガ表現を用いて改善するのかが不明瞭でありはっきりと決まっておらず知識の取得と同時にチャットツールの設計も同時に進める必要があった。
（※文責: 川瀬周紀）

1.6

マンガ表現を用いる理由

私たちがマンガ的表現をチャットツールに取り入れようとしている理由はマンガ的表現が読み
手に感情、状況などを伝える手段として優秀な表現だからである。また家島 [7] によると、マンガは大切なところに力を入れて表現するから見る人の目にハッキリした印象を残す。「読者がマンガを読む」という行為は、「作者が読者にマンガ的表現を通して事柄を伝えようとしているコミュニ
ケーション」という行為とも捉えられ、この事柄の伝達手段としてのマンガ的表現を既存のチャッ
トツールにも流用することでマンガ的表現のメリットを存分にチャットツール上でも発揮し新たなコミュニケーションの形を作れるのではないかと考え後述の既存のチャットツールの問題の解決を目指し、チャットツールの開発を進めた。
（※文責: 川瀬周紀）

Group Report of 2017 SISP

-3-Group Number 19

Manga engineering

1.7

マンガ的表現の効果

私たちはマンガ的表現をどのようにチャットツールと組み合わせるかを考える前にマンガ的表
現のもたらす効果について調べた。調べたマンガ的表現は
・吹き出し
・漫符
この２点がチャットツールに組み込みやすいマンガ表現だと考え、これらの効果を調べその効果を引き出せるようなチャットツールの機能を考えた。以下よりそれぞれの効果について説明する。
・吹き出し
吹き出しはマンガのキャラクターのセリフ、考えなどを表現するために設けられる空間のことである。これらは読者にセリフなどを伝達するだけでなく、キャラクターの感情や状況によって形を変え読者にその感情や状況をわかりやすくしている。諸岡 [8] は吹き出しの中は吹き出しの中に書き込まれた文字情報をシニフィエとして物語の進展を意味するのと同時に、吹き出しそのものもシニフィアンとして機能すると述べている。そこで吹き出しの形の変化でどのような感情が表現できるのかを調べた。

図 1.1 使用した吹き出しの一覧

まず図 1.1 の風船型の吹き出しは従来のチャットツールでも用いられている吹き出しである。
マンガの中では主に日常的な会話をしている時に用いられる吹き出しである。これらの吹き出しの中で表現されているセリフは特別な感情がこもっている時は少なく使い勝手が良くマンガの中では多用されている。しかし従来のチャットツールはこの吹き出しで固定されてしまっているため送り手が発信したメッセージが受取手にどのような感情でそのメッセージを送ったかがわかりにくい。
次にマンガの中でキャラクターの感情が通常と異なる時に使われる吹き出しを調べた。破裂型
吹き出しは主にキャラクターが大声を出している時、声を荒げている時に用いられる時に使用される吹き出しである。雲形吹き出し（思考）はキャラクターの思考を読者に伝えるために用いられる吹き出しである。雲形吹き出し（発話）はキャラクターが小声で自らの思考を述べるときに使用される吹き出しである。他にも様々な形の吹き出しがあるがこの３つの吹き出しが多くのマンガで上Group Report of 2017 SISP

-4-Group Number 19

Manga engineering
記の使用方法で使われておりこれらの形を採用するのが望ましいと考えた。
・漫符
漫符とは、マンガで用いられる現実にはないものや、現実を基にしたものを表現する記号の総称である。マンガ上の登場人物の状態を表したり、シーンの状況を表したりするときに用いられる。
漫符はマンガによって様々な形があるためこちらも吹き出しと同様に同じ形でかつ使用用途が同じであるものを選出するのが好ましいと判断した。
私たちは数多ある漫符からの中から代表的なものを 4 つ選出しそれぞれが読み手に与える印象を調査し、それらをどうチャットツールに組み込むのかを考えた。

図 1.2 使用した漫符の一覧

図 1.2 の A はキャラクターが驚く際にキャラクターの体の周辺に書かれる漫符である。この漫符が驚きの表現で使われているのはキャラクターがある事柄で驚いた際の体の震えが由来とされている。
図 1.2 の B はキャラクターが笑う時や嬉しそうな時、複数のキャラクターが談笑している時に体の周りに描かれる漫符である。この漫符も由来ははっきりされていない。
図１.2 の C はキャラクターが困惑している際に頭の上に書かれる漫符である。このような形の漫符が困惑を表している理由ははっきりとはされていない。糸が絡まっているイメージから由来されているという意見もあれば、作家が執筆活動に行き詰まった時に紙に書く落書きが由来としているという意見もある。
図 1.2 の D はキャラクターが怒っている時、力を入れている時などに額や顔の上、力を入れている箇所に描かれている漫符である。この漫符が怒りを表している由来は人間が力んだ時や怒っている時に浮き出てくる血管、青筋である。
これらのマンガ的表現の持つ表現におけるメリットを自分たちで調べることで自分たちのマンガ的表現に対する理解を深めチャットツールの機能を考えた。
（※文責: 川瀬周紀）

Group Report of 2017 SISP

-5-Group Number 19

Manga engineering

第2章
2.1

プロジェクト学習の概要

問題の設定

iMassage、LINE のような既存のチャットツールでは、送り手の感情や表情を伝えづらいこと
や、ニュアンスの伝達による勘違いが起きることがある。私たちはその問題を解決するために感情の伝達に長けているマンガ的表現を用いた新しいチャットツールの制作が必要であると考えた。
（※文責: 福士洸太）

2.2

課題の設定

私たちは、問題を解決するため、以下のような課題を設定した。
・チャット機能の作成
私たちは、チャットツールを作っているため、チャットツールとしての使用できるシステムを作ることが最低限の到達目標である。作るためには、JavaScript でプログラムを作成し、firebase を使用して機能できるように完成させる。
・ログイン機能友人とチャットを行うためには、ログイン機能を作り、利用者がアカウントを作らなければならない。作るには、JavaScriptavaScript でプログラムを作成し、firebase を使用し、作成する。アカウントは、Google アカウントを利用する。
・吹き出しの変換
会話を豊かにするための機能の一つ。特定のキーワードに反応して、吹き出しが自動変換されるプログラムを JavaScript で作成する。
・文字サイズの変換
会話を豊かにするための機能の一つ。特定のキーワードに反応して、文字の大きさが自動で小さくなったり、大きくなったりするプログラムを JavaScript で作成する。
・フォントの変更
会話を豊かにするための機能の一つ。特定のキーワードに反応して、文字フォントが変換されるプログラムを JavaScript で作成する。
・オノマトペの付加
会話を豊かにするための機能の一つ。特定のキーワードに反応して、オノマトペが出現されるプ
ログラムを JavaScript で作成する。

Group Report of 2017 SISP

-6-Group Number 19

Manga engineering
・漫符の付加
会話を豊かにするための機能の一つ。特定のキーワードに反応して、アバターに漫符が付加されるプログラムを JavaScript で作成する。
・画面デザイン
チャット画面や、タイトル画面を HTML と CSS を使って、作成する。
以上が、問題解決するための課題である。これらを、「機能」、「データベース」、「デザイン」に課題を振り分ける。
（※文責: 原田圭悠）

2.3

到達レベル

2.2 の最後で述べた、「機能」、「データベース」、「デザイン」の３つの目標の達するべきレベルを以下のようにした。

1. デザインHTML と CSS を使いこなせるようになることが到達レベルである。使いこなせないと、画
面デザインの課題を解決することができない。また、吹き出しや、漫符といったイラストを作成しなければならないため、画像編集ソフトを扱えることが目標である。到達レベルまでのプロセスは、ヒューマンインターフェースの講義と情報表現入門の講義で作成したスケジューラで学んだことを活かすことである。理由は、ユーザが使いやすい画面配置や、見やすい画面、このアプリケーションで実装される機能をいかに見やすく表現するためである。

2. 機能
JavaScript を使えるようになることが到達レベルである。吹き出しの自動変換や、漫符付加機能、フォント変更などの実装がなければ、このプロジェクトに意味がないため、とても重要である。到達レベルまでのプロセスは、今までのプログラミングの講義で学んだアルゴリ
ズムを参考にすることである。

3. データベース
チャットツール自体を作ることが到達レベルである。チャットツール自体を開発しなけ
れば、このプロジェクトに意味がないため、重要である。到達レベルまでのプロセスは、

firebase と Vue.js を使用することである。firebase とは、リアルタイム同期型データベース
である。Vue.js とは、インタラクティブな UI を構築するための JavaScript ライブラリであり、双方向バインディングによる相互更新を行う事ができ、firebase のリアルタイムデー
タベースを JavaScript だけでデータの読み書きができる特徴を持っている。これらを使用
してチャットツールの開発をした。
これらが、各課題の到達レベルである。
（※文責: 原田圭悠）

Group Report of 2017 SISP

-7-Group Number 19

Manga engineering

2.4

課題の割り当て

私たちは、課題の割り当てを分担するために、以下のように、大まかに役割分担を行った。
・デザイン：原田
・機能：金谷、福士・データベース：川瀬、氏家
この分担の理由を述べる。機能の金谷, 福士は、まだ共同開発を始めていなかったとき、

Monaca[10] を使用して、ハイブリッドアプリを開発しており、課題で有する JavaScript を使用していた。よって、JavaScript を使用する機能に、金谷と福士を割り当てることにした。また、デー
タベースは、氏家の開発力、技術力が豊富であった。また、川瀬も ICT 演習に参加しているため、難しい課題と判断されたデータベースに割り当てることにした。最後にデザインは、情報表現入門で行ったスケジューラが選ばれたこともあったため、原田に割り当てることにした。このような理由によって、分担が決定した。
次に、課題の割り当てである。割り当ては、以下の通りである。
・チャット機能：データベース
・ログイン機能：データベース
・吹き出しの変換：機能・文字サイズの変換：機能
・フォントの変更：機能・オノマトペの付加：機能・漫符の付加：デザイン
・画面デザイン：デザイン
この割り当ての理由を述べる。チャット機能をデータベースが担当する理由は、やはり難しいと判断したことと、チャットのログやは、データベースで管理していると考えたので、データベー
スに割り当てた。加えて、ログイン機能でもアカウントは、データベースで管理していると考え、割り当てた。次に、吹き出しの変換・文字サイズの変換・フォントの変更・オノマトペの付加が機能に割り当てられた理由である。機能の 2 人は、JavaScript を扱っていたため、主な機能を実装できると考えた。これが、機能が割り当てられた理由である。最後に、漫符の付加と画面デザインがデザインに割り当てられた理由である。画面デザインは、名の通り画面デザインのため、デザインが割り当てられた。次に、漫符の付加機能であるが、機能の役割が大きいと感じたことと、漫符のデザインもしなければいけないと考え、デザインに割り当てることにした。このように理由によって、課題の割り当てが決定した。
（※文責: 原田圭悠）

Group Report of 2017 SISP

-8-Group Number 19

Manga engineering

第 3 章 課題解決のプロセス
3.1

プロジェクト内における課題の位置付け

課題の位置付けについて、私たちはこのように考えた。

1. チャット機能
2. 画面デザイン
3. 吹き出しの変換
4. 漫符の付加
5. ログイン機能
6. 文字サイズの変換
7. フォントの変更
8. オノマトペの付加
この位置付けの理由を述べる。まず、チャット機能ができなければ、私たちの制作物が一切完成しないことになってしまう。また、コンセプトにあるニュアンスの違いをなくせることや、感情を豊かにするという根本的な問題を解決できない。そのため、第一にチャットができるようにしなければならないと考えた。よって、チャット機能の実装を１番目に位置付けした。次に、画面デザインである。画面デザインを考えなければ、今後に繋がる吹き出しの位置や、アバター画像の位置などに影響が出ると考えた。よって、２番目に位置付けした。次に、吹き出しの変換機能である。私たちは、吹き出しが一目見て、一番感情が分かりやすいと考えた。よって、吹き出し変換機能を、３番目に位置付けした。次に、漫符の付加機能である。アバターの画像を表示させるため、そこに漫符をつけることで、よりマンガらしく、感情をより豊かにできると私たちは考えた。よって、漫符の付加機能を４番目に位置付けした。次に、ログイン機能である。ある程度、マンガ的表現がチャットに実装できた頃には、ログイン機能をつけ、より本格的なチャットツールにしたいと考えた。よって、５番目に位置付けした。次に、文字サイズの変換である。文字の大きさが変わること
によって、強調したいことを明確にすることができ、感情の重要度が分かりやすくなると考えた。
よって、文字サイズの変換は、６番目に位置付けした。次に、フォントの変更である。フォントの変更は、マンガでは、フォントが変わることが多々あるが、文字の大きさより、効果は薄いと考えた。よって７番目に位置付けした。最後に、オノマトペの付加機能である。マンガでは、オノマト
ペは、重要な役割を担っているが、チャットでオノマトペを使用しても、感情はあまり伝わりにくいと考えた。よって、最後の位置付けとなった。これが、私たちの課題の位置付けである。
（※文責: 原田圭悠）

3.2

課題解決の方法

各自の課題解決の方法を考えた。

• デザイン（担当：原田）Group Report of 2017 SISP

-9-Group Number 19

Manga engineering
HTML と CSS の参考書や、インターネット上にある資料、私たちが開発しようとしている
画面に似たものを参考に課題解決する。また、より効果的な漫符を作成するために、インターネット上にある資料を元に作成する。

• 機能（担当：金谷, 福士）
JavaScript の参考書や、インターネット上にある資料、私たちが開発しようとしている機能に似たものを参考に課題解決する。また、機能を試しながら解決する。

• データベース（担当：川瀬, 氏家）
JavaScript の参考書や、インターネット上にある資料、私たちが開発しようとしている機能に似たものを参考に課題解決する。チャットツールを作るために使用する firebase や Vue.js
を主に勉強し、課題解決を行う。
以上が、私たちの課題解決方法である。
（※文責: 原田圭悠）

3.3

活用した講義課題の解決に向けて、活用した講義を以下のように示す。
・情報表現入門
スマホ向けのデザインを設計するため、自分用スケジューラを活用する。自分用スケジューラ
は、スマホを想定して作成した。よって、スマホ向けのチャットツールを作成するため、情報表現入門で学んだことは、活用できると考えた。
・ヒューマンインターフェース
ユーザが使いやすい工夫をするために活用する。画面デザインによって制作物の使いやすさが変わってくると考えた。よって、ヒューマンインターフェースで学んだことを活用する。
・データベース工学
チャットログやユーザ管理などをするために活用する。データベース工学では、SQL の使い方を学んだこともあり、ユーザ管理をするため必要となってくる知識である。よって、データベース
工学は、活用できると考えた。
・情報機器概論

HTML と CSS の基本的な使うため、活用する。情報機器概論では、HTML と CSS を使った課題があった。WEB アプリケーションを作成している私たちにとって、HTML と CSS は、必須である。そのため、情報機器概論は、活用できると考えた。
以上が、私たちが活用した講義である。
（※文責: 原田圭悠）

Group Report of 2017 SISP

- 10 -

Group Number 19

Manga engineering

第4章

プロジェクト内のインターワーキング

3 章で述べた課題解決に向けて私たちは以下のように活動していた。
• 5月
始めにマンガについて様々な観点から分析した。その例としてオノマトペや吹き出し等、マンガで使われている表現についての観点からや漫画家についての観点からであった。次にこの分析をもとにマンガを使ってどんなことに活用出来るかを調査した。そして調査をもとにマンガを使ったチャットツールの開発を提案した。
次に制作するアプリの方向性を決めるために先行事例の調査と開発環境の調査を行った。
先行事例では漫画を使ったチャットツールがあるかを探し、その問題点について考えた。また開発環境では対象ユーザと対象 OS の二つについて検討していった。まず対象ユーザは学生に定めた。次に使用する OS について議論したが全員使用している OS が違っていたた
め、どの OS でも対応できる WEB アプリケーションに決定し、開発を進めた。

• 6 月から 7 月
デザイン担当は、HTML と CSS を勉強し、サンプルとなるアプリの画面を作成した。またデモンストレーションを作成し完成図のイメージを共有した。
機能担当は、JavaScript を扱ってアプリケーションの機能を実装するための方法について練習した。サンプルの作成には Monaca を使い、実機でプログラムが動作するか確認した。
データベース担当は、PHP と SQL の基礎を参考書を使い勉強し、サンプルプログラムを作成していた。
また 7 月には中間発表会と中間報告書の作成があったため、7 月までの活動を振り返りそれをもとに中間発表会ではポスターや原稿を作成し、発表会に向けての準備を行った。中間報
告書でも同様にこれまでの活動及び今後の課題について記述した。

• 8月
夏季休業の期間を利用して開発に必要な技術や、先行研究についての調査を各々のメンバーが行った。

• 9 月から 10 月
デザイン、データベース担当は前期から夏季休業にかけて調査したことから、核となるチャット機能およびロゴを完成させた。機能担当は吹き出しの自動変更機能、漫符を自動付与するプログラムを JavaScript で完成させた。また 10 月に高校生が訪問した際、チャット
ツールの現状、吹き出し変更機能や漫符機能の説明、今後の展望についてデモやスライドを使い、説明を行った。

• 11 月から 12 月
各々が作成した機能を統合して、ブラウザ上で動作する web アプリケーションを完成させた。そして迎山准教授から pix2pix で領域分割をするために学習画像作成を依頼された。学
習画像の作成には班員一人につき 80 枚担当し、Adobe Illustrator や CLIP STUDIO 等の画像を編集できるソフトウェアを使って各自作業を行った。学習画像について説明すると 3
種類に分けられ、その種類とは登場人物、吹き出し、背景であった。この作業は 11 月の終
わりまで行い、チャットツールの開発と同時進行で行われた。12 月には成果発表会が開かGroup Report of 2017 SISP

- 11 -

Group Number 19

Manga engineering
れるためそれに向けてのスライドやポスターの作成、発表練習、チャットツールの最終調整等を行い発表に向けての準備をした。
（※文責: 金谷駿汰）

Group Report of 2017 SISP

- 12 -

Group Number 19

Manga engineering

第 5 章 結果
5.1

成果物

コミュニケーション班で作成した Manga-Communication のアプリケーションのロゴを図 5.1に示す。チャットツールのため、吹き出しをイメージとした。また、プロジェクトのテーマが、マンガ工学であったため、機械的なイメージを取り入れた。

図 5.1 作成したアプリケーションののロゴ

Group Report of 2017 SISP

- 13 -

Group Number 19

Manga engineering
Manga-Communication の送信者側と受信者側それぞれの チャット画面については図 5.2 及び図 5.3 に示した。

図 5.2 送信者側の Manga-Communication の画面と機能説明

図 5.3 受信者側の Manga-Communication の画面と機能説明

Group Report of 2017 SISP

- 14 -

Group Number 19

Manga engineering
備わっている機能について図 5.2 と図 5.3 に 1 から 6 の合計 6 個の機能を示し、以下に大まかな機能の説明を記した。

1-メッセージ入力欄
2-送信ボタン3-吹き出し変更機能
4-吹き出し変更機能のオン/オフボタン
5-漫符機能6-漫符選択機能
1 はメッセージを入力する欄を設けた。メッセージを入力した後、2 の送信ボタンを押すとメッセージを送ることができるように設定した。3 の機能は吹き出し変更機能を作成した。これは 1 で特定の文字を最後に入力すると吹き出しが変更するように設定した。例えば「？」を入力すると 3の様な雲形の吹き出しに変わり「！」を入力すると破裂したような吹き出しの形に変わり、1 で入力した内容を () でくくると図 5.2 の下から 2 番目の吹き出しの形に変換するように設計した。そしてこれらの文字が入力されていない場合は下から 3 番目の吹き出しの形に設定した。よって吹き出しの形の種類は通常の吹き出しの形を含めて 4 種類であった。ちなみに上記の文字を入力しても吹き出しの形を変えたくない場合は 4 を押すことによって吹き出し変更機能のオン・オフを切り替えることができ、通常の吹き出しのまま送信することができた。5 の機能は漫符付加機能を作成した。これも 3 と同じく 1 内で文章の最後に () を入力し、その括弧の中に特定の文字を入力するとユーザ画像に漫符が付加されるように設計した。自分の画面では漫符が表示されているかどうかはわからないがメッセージを受け取ったユーザにはメッセージを送信したユーザの画像に漫符がついているかどうかが分かった。ユーザ画像に付加される漫符は 4 種類であり、それらの画像について
図 5.4 に示した。

図 5.4 ユーザ画像に付加する 4 種類の漫符

始めに 1 で「ｗ」や「笑」を（）の中に入力すると図 5.3 の 1 番左にある画像がユーザー画像の左上に付加されるように設計した。次に「怒」を（）の中に入力すると左から 2 番目にある画像がユーザー画像の左上に付加されるように設計した。さらに「！？」を（）の中に入力すると左から3 番目にある画像がユーザー画像の左上に付加されるように設計した。最後に「」を（）の中に入力すると一番右にある画像がユーザー画像の左上に付加されるように設計した。手動で漫符をつけたい場合は 6 を押すと上記の 4 つから選ぶことができた。なおこれらの特定の文字はすべて半角又は全角の時に変化するようになっていた。以上が 6 つの主な機能について説明であった。
（※文責: 福士洸太）

Group Report of 2017 SISP

- 15 -

Group Number 19

Manga engineering

5.2

成果物に使用した技術

私たちの成果物であるチャットツールを制作するにあたって、私たちは既存の二つの技術を利用した。一つは Vue.js でもう一つが Firebase である。ここではこれらの概要を説明する。
・Vue.js

Vue.js は MVVM を採用しているフレームワークであり、チャットアプリを作成するにあたって技術的問題となっていた双方向データバインディングを容易に行うことができるため導入した。
双方向データバインディングとは定義されたデータの値が変更されると同時に UI に表示される値も変更され、また表示されている値が変更されるとデータの値も自動的に変わるという仕組みのことであり、本来ならば複雑なプログラムを記述しなくてはならない [11] 。しかし Vue.js を導入すると、双方向データバインディングを使用する箇所全体を ViewModel として宣言するだけでそれ以外の細かな設定は不要になる。
さらに Vue.js はそのシンプルさから他のライブラリやワークフレームと組み合わせることも容易である。今回の開発のもう 1 つの技術的問題であったデータベースへの値の受け渡しについてもFirebase を組み合わせることで解決することができた。
・FirebaseFirebase とは Google が運営しているサービスであり、リアルタイムデータベースや FirebaseAuth と呼ばれるログイン認証機能などを提供している [12] 。
チャットアプリでは相手が送信した内容がリアルタイムで、かつ自動で反映されなくてはならず、同じように自分が送信した内容も自動的に相手の画面に反映されなくてはならない。これを実装するのに Firebase のリアルタイムデータベースを用いることで、チャットアプリ内で送信された情報が一度ローカルに保存され、すみやかに中央サーバ (クラウド) と同期、中央サーバに接続している別のユーザと整合を取り、リアルタイムでデータベース内の値を互いに更新することができる。これによりクライアントが能動的にデータを取得する必要はなく、Vue.js によりバインドされた要素がデータベースから取得した値によって変化することでリアルタイムチャットを実現させることができる。
このような宣言的な記述のみでデータと UI の同期を取ることができる MVVM フレームワーク
である Vue.js、すみやかに中央データベースとローカルコピーの整合を取ることができる Firebaseのリアルタイムデータベースを用いることで、以降に実装するマンガ的表現の機能やユーザ情報の管理、細かな UI の変更をする際に複雑にならず、開発をスムーズに進めることができた。
（※文責: 氏家涼太）

Group Report of 2017 SISP

- 16 -

Group Number 19

Manga engineering

5.3

中間発表会

平成 29 年 7 月 14 日金曜日に、公立はこだて未来大学の３階のエレクトロニクス工房の前で中間発表を行なった。ポスターセッションを中心に、将来の成果物の画像を示しながら発表を行なった。図 5.5 は使用したポスターである。

図 5.5 中間発表会で使用したポスター

Group Report of 2017 SISP

- 17 -

Group Number 19

Manga engineering
発表の評価をしてもらうため、発表を見に来て頂いた方に学校指定の評価シートに発表技術と発表内容について評価してもらった。評価の集計は図 5.6 に示す。

図 5.6 中間発表会の評価集計

点数は上図のようにまずまずの評価をもらえた。発表技術に関してのコメントは「概要から説明し、次に詳細を説明するのが分かりやすかった。」や「今後の流れなどわかりやすい」などのポジ
ティブなコメントの他に、「活用分野を極めるという作業は、絞る作業のように思えない。
」などのネガティブな意見も多かった。成果物の評価については、「LINE や slack とかでのコミュニケー
ションが豊かになるだけで嬉しい」のような評価された意見があった。逆に、「吹き出しを形を変えるというメリットがあまり感じられない。」、「現状の絵文字スタンプではダメなのか等調べてますか？」といった意見もあった。
（※文責: 金谷駿汰）

Group Report of 2017 SISP

- 18 -

Group Number 19

Manga engineering

5.4

成果発表会

平成 29 年 12 月８日金曜日に、私たちは公立はこだて未来大学３階のエレクトロニクス
工房の前で成果物の発表を行なった。成果物のデモンストレーションに重点を置き、Manga-

Communication の使い方などの補助的な説明にポスターを使用した。図 5.7 は使用したポスターである。

図 5.7 成果発表会で使用したポスター

Group Report of 2017 SISP

- 19 -

Group Number 19

Manga engineering
成果物の評価をしてもらうため、発表を見に来て頂いた方に学校指定の評価シートに発表技術と発表内容について評価してもらった。評価の集計は図 5.8 に示す。

図 5.8 成果発表会の評価集計

点数は上図のように良い評価をもらえ発表技術に関してのコメントも「デモンストレーションをメインにした発表はマンガ工学ならではの方法でよいと思った。」などのポジティブなコメントを多くいただいた。しかし成果物の評価については、「あまり新しい技術は見られない。
」といった意見もあった。
（※文責: 金谷駿汰）

Group Report of 2017 SISP

- 20 -

Group Number 19

Manga engineering

5.5

成果

Manga-Communication を最終発表で使ってもらいこのツールに対してアンケートを行ったと
ころ、吹き出しのバリエーションが増えるともっと面白くなりそうと答えた方や非常に面白いと答えている人がいた。その一方で既存のチャットツールと比べて新しい技術が見当たらないと答えた方やそのチャットツールを使ってもあまり変わらないと答えた方もいた。また本ツールを試した
後、文字の色も変えてみたらよりコミュニケーションが豊かになり面白くなるのではないかという意見をもらった。これらの意見をもとに本ツールを改良していくために今後の課題として扱っていきたいと考えてた。
（※文責: 福士洸太）

5.6

今後の課題

Manga-Communication では 7 つの今後の課題を設定した。
• 1. 本ツールの効果の検証• 2. ログインの実装• 3. 漫符と吹き出し機能の拡張• 4. 画像機能の実装• 5. 文字の変更機能の実装• 6. オノマトペ機能の実装• 7. 漫符と吹き出し機能の改善
1 つ目の課題は本ツールに対してコミュニケーションを豊かにできたかどうかの効果があったかどうか分からないということであった。その理由が本ツールが完成したのは最終発表前にある程度完成したため、多くの人たちに本ツールを利用してもらう時間がなかったため既存のチャットツー
ルと比較するとどのような効果があったかが分からなかった。この課題に対してより多くのユーザに本ツールを使ってもらい既存のチャットツールと比べて効果的なコミュニケーションがとれたかどうかを調べる必要があると考えた。

2 つ目の課題はログイン面の問題であった。本ツールは現在、URL を共有してトークルームを作っているが、本ツールだけで、ユーザ同士とチャットをできるようにしたいと考えた。本ツール
だけでやり取りができるようにするメリットはユーザーが誰とやり取りをしているかが分かりやす
くなり、別のユーザと話をしたいというときの移動が便利になり、管理もしやすくなると考えたからであった。よって共通のＵＲＬから本ツールだけでやり取りできるように移行する必要があると考えた。

3 つ目の課題は漫符と吹き出しの種類が足りないという問題であった。現在実装されている漫符と判別できる単語が 4 種類、吹き出しのパターンが 4 種類しかないため、漫符に対してより多くの単語に対応して感情の表現を多様にし、吹き出しに対して表現の幅を増やすためにより多くの吹
き出しのパターンを増やして行く必要があると考えた。

4 つ目の課題としてユーザの写真に対する課題であった。本ツールでは既存のチャットツールの様に写真を登録することが現状ではできていないため写真を登録できるように実装して行く必要

Group Report of 2017 SISP

- 21 -

Group Number 19

Manga engineeringがあると考えた。そして複数のユーザ画像と漫符を組み合わせることを目標とした。例えば 5.1 節の例で説明すると (笑) と入力した時ではユーザ画像は笑っている画像を表示し図 5.3 の一番右の漫符がその画像に付加され、(怒) と入力した時ではユーザ画像は怒っている画像を表示し図 5.3 の右から 2 番目の漫符がそのその画像に付加されるという仕組みを考えた。この機能が実装されることによって感情の表現がより分かりやすくなり、コミュニケーションも取りやすくなるのではないかと考えた。

5 つ目の課題はフォントや色を変更できる機能をつけるという課題であった。例えば使っている文字のフォント自体を変更できるように実装し、文字の一部を太字や斜体にできるような機能を実装し、文字の大きさを変更できるようにし、色を変更できる機能を実装する事によってユーザ同士の会話のコミュニケーションを豊かにさせることが出来るのではないかと考えた。

6 つ目の課題はオノマトペ機能の実装であった。吹き出しや漫符と同じように特定の文字が入力されているとオノマトペが付き、よりコミュニケ―ションが豊かになると考えた。これらの課題を解決していくとともにユーザにとって感情や表情を伝えやすくなっているか、またニュアンスの勘違いが起こりにくくなっているかを検証し、コミュニケーションを豊かにできているかの効果について調査していく必要があると考えた。

7 つ目の課題は吹き出しの変更機能と漫符の機能が干渉しあうという問題であった。私たちが望んでいたのは吹き出しの形と漫符が特定の文字を入力した際に別々に表示できるように設計した
かったが図 5.2 を見ると「！」だけに反応してしまい「(怒)」には反応せず漫符がつかない問題が発生した。これは一番最後の文字を判別しているため干渉しあう原因となってしまった。そのための解決策として漫符は漫符のみ、吹き出しは吹き出しのみを判別するように修正が必要であると考えた。
以上が本ツールが抱える課題であった。そして課題を解決し本ツールを改良していくとともに運営化に向けて開発を続けていく必要があると考えた。
（※文責: 福士洸太）

Group Report of 2017 SISP

- 22 -

Group Number 19

Manga engineering

第 6 章 まとめ
6.1

プロジェクト全体の成果

ここでは、マンガ工学プロジェクト全体の成果を報告する。

• コミュニケーション
最終的な成果物として、まず、チャット機能を開発することができた。それに、
「！」
、
「？」
、
「（）」に反応して、吹き出しが自動変換される機能を実装した。また、「（笑）」、「（困）」、「（怒）」、「！？」に反応して、アバター画像に漫符が付加される機能を加えることができた。
当初考えていたログインや文字の大きさの変更などの目標には届かなかったが、ある程度、形にすることができた。

• マンガ体験
中間発表までの成果は、コンテンツの機能や今後の方針を明確に定めるために制作したプ
ロトタイプができただけである。このプロトタイプはユーザの動きに合わせて 1 つのマンガ的表現を表示するだけの機能である。しかし、これだけの機能でも、中間発表でこのプロトタイプを体験した人は「楽しかった」「小さい子が喜びそう」といったコメントを書いている。プロトタイプであるが、この段階では良い成果であったと考える。最終成果では、ユー
ザ自らがストーリーを展開させられる事により、新しい表現、新しい遊び、新しいコミュニ
ケーションが生まれるようになる予定である。最終成果では、中間発表時点と比べて大幅に機能が追加された。まず、ユーザの動きに合わせて表示されるマンガ的表現が 1 個から 12個に増えた。また、同じ動作でも複数のユーザの動きが組み合わされることによって表示される表現も実装した。さらに、中間発表では一切実装されていなかった、実行画面のスクリーンキャプチャーしたものをマンガのように並べて出力する機能を実装した。その画像をネットワーク上にアップロードし、その URL を QR コードとして表示することで、ユーザが行った体験を持ち帰って頂く機能も実装した。これらにより、当初予定していた三つの機能が実現した。成果発表会でのデモンストレーションを体験した人の意見として、中間発表の際と同様に「楽しかった」「新しい体験ができた」などのコメントが書かれている。マンガ体験は当初の目的を達成できたと考えられる。

• マンガリテラシ
言語、ページ送りの形式、読者による印象、コマやフキダシの配置が工夫されてるマンガなど様々なマンガで視線計測を行った。それらの実験から、視線誘導の要素は様々あり、言語の読む向き、フキダシの位置と人物の位置、流線、コマの配置などであること、これらの要素が適切に配置されない場合は再読が発生することが判明した。また、視線の動きは見開き
形式か、スクロール型式など 1 ページごとに読むものかでも変わり、同じマンガでも形式によって視線の動きが変わることがあることが判明した。また、これらの要素を再現し配置す
ることである程度読者の視線の動きをコントロールすることが可能であることも判明した。
（※文責: 氏家涼太）

Group Report of 2017 SISP

- 23 -

Group Number 19

Manga engineering

6.2

プロジェクト内の各々の役割• コミュニケーション
・氏家
前期はデータベース担当として、PHP、MySQL を使用したチャットデータの受け渡し、
ユーザ情報の管理を実装した。後期は新しく Firebase を導入し、アプリケーションのデー
タベース周りを担当した。ユーザの名前や ID、発言内容、時間などの情報を Firebase のリ
アルタイムデータベースを使うことで管理した。また、JavaScript のフレームワークである

Vue.js を導入し、アプリケーションの機能面のコーディングに貢献した。
・金谷
機能を担当した。
「!」や「;;」といった文字、記号が入力された際、それに対応したマンガ的表現でテキストを装飾する機能を実装するため、JavaScript のサンプルプログラムでの練習をした。後期では前期で作成したテキストの装飾機能を発展させて、吹き出し変更機能の雛型を作成した。それを最終発表用のアプリに実装するため Java Script フレームワークの勉強をした。また、プロジェクトの期末提出物で使う TeX ファイルの作成、編集を行った。
・川瀬
データベースを担当した。アプリケーションに必要なデータベースを MySQL を使用し作成して運用、PHP を使用し作成したデータベースに接続、必要なデータの受け渡しを行う機能を実装するために、勉強した。さらに PHP でのログインフォームを完成させた。後期
では firebase での環境で作業するために JavaScript および fierbase コンソールの使い方を
勉強した。
・原田
原田デザインを担当した。画面の UI やレイアウトを作成するために、HTML、CSS（bootstrap) を勉強し、タイトル画面や、ホーム画面等の画面デザインを制作した。中間発
表や成果発表会用のポスター、プレゼン資料の作成を行った。また、発表会等では、自ら進んで発表を行なった。グループリーダーとして、タスクの管理や進捗状況の把握、提出物やグループ制作物の管理を行った。
・福士機能を担当した。前期では「!」や「;;」といった文字、記号が入力された際、それに対応したマンガ的表現でテキストを装飾する機能を実装するため、JavaScript のサンプルプログ
ラムでの練習をした。後期では前述に述べた文字の変換のプロトタイプや色や文字の大きさ
やフォントの変換を完成させ、Vue.js の仕組みについて学習し、それらの機能を Vue.js に変換するようプログラムを書き換えた。

• マンガ体験・村上
前期では、プロジェクトリー兼グループリーダーとして中間発表からプロジェクトをまとめた。マンガ体験の方針を決定したほか、制作物のプログラミングを行った。後期では、引き続きプロジェクトリーダーとしてプロジェクトをまとめつつ、マンガ体験グループ制作物の一部であるマンガ生成部分を全面的に実装した。また、数回あった発表の機会では発表
資料の作成と発表を行った。グループ報告書の執筆に加え、プロジェクト報告書の執筆を行った。

Group Report of 2017 SISP

- 24 -

Group Number 19

Manga engineering
・定塚
前期では、分析からマンガ体験の方針を決め、その方針をもとにコンテンツの制作を行った。プレゼンで利用するプロジェクト全体のポスターおよび各グループポスターのデザイ
ンテンプレートの制作を行った。また、チームロゴの制作を行った。後期では、Unity とKinect を用いてコンテンツの作成を行った。主に、Kinect から取得した骨格データを利用することで様々なエフェクトの表示する部分と表示するエフェクトの作成を中心に開発を行った。また、前期に引き続きプレゼンで利用するプロジェクト全体のポスターおよび各グ
ループポスターのデザインテンプレートの制作を行った。
・大山
前期の活動においてマンガ体験やコミュニケーションのプロジェクト案を検討した。主には、マンガ体験のプログラムの開発と調整を行った。後期の活動では、開発環境を Unity に移行して、引き続きプログラムの開発を行った。Kinect の取得した骨格情報に連動して動く 3D キャラクターモデルの調達など、主にプログラムの基礎となる部分を担当した。

• マンガリテラシ
・橋本
マンガリテラシのグループリーダーとして他のグループと連携をとった。他のグループのメンバーの意見も聞き実験、分析の参考にして活動を行った。前期では主に視線計測用の資料作成と視線計測で得られた結果の分析を行った。また、ポスターや発表用の資料の作成、グループ報告書の執筆を行った。後期には実験の参考にするための文献資料、既存の実験の調査や視線計測用の資料の作成、発表の際のスライドやポスターなどの資料作成を主に行った。
・小野
前期では、資料とするマンガの提案をしたり、視線計測装置の操作方法を学んだのち実験資料の作成・被験を行った。また、中間発表の原稿作成を行った。後期では、今後の方針について意見し、実験資料の作成や被験者の補助、成果発表のポスターとスライドの文章を推敲し、聴衆が分かりやすいように修正を行った。
（※文責: 氏家涼太）

Group Report of 2017 SISP

- 25 -

Group Number 19

Manga engineering

6.3

今後の課題

• コミュニケーション
今後は、現状ある吹き出し自動変換機能と漫符付加機能の種類を増やし、より感情表現を豊かにしたいと考えている。また、ログイン機能を実装していない。よって、このツールだ
けでは、友人とチャットできないため、ログイン機能を実装したいと考えている。それに伴い、各ユーザーのアバター写真も登録できない。そのため、ぱっと見で誰とチャットしているのか分からないため、登録できるようのしたいと考えている。

• マンガ体験
中間発表までの成果物は、コンテンツの機能の設定やその評価の目的として制作したプロトタイプである。最終成果物はこのプロトタイプを発展させていく。複数人同時認識や前の動作と関連したマンガ的表現の表示などストーリーを体験する機能と、体験中の行動がマンガとして出力される機能の実装を行う予定である。最終成果物は、予定通り複数人同時認識
や、複数動作の組み合わせにより表示が異なるなどの複数人インタラクションを実現した。
また、マンガとして出力される機能も限定的に実装した。しかし、認識する動作は 7 種類であり、ある程度ランダム性はあるものの決まった表示しかされないので、ストーリーを体験する機能としては未だ能力不足である。また、現在は Kinect を 1 台だけ使用しているので、人物の骨格検出の精度が甘く、ユーザはしっかりとポーズをとっているにもかかわらず、画
面上ではなにも起こらないなどということが多発している。さらに、マンガとして出力する
機能は、手動で 4 つ適当に選ぶ方法で、単純に画像を 4 つ順番に並べるだけなので、あまりにも単調に感じてしまう。さらに、成果物の機能は Kinect と Kinect SDK に強く依存している。なので、Kinect 頼りではなく、スマートフォンのカメラなどで同様のことを行えるよ
うになれば、より手軽にマンガの世界を体験することができるようになると考えられる。解決策として、ストーリーを体験する機能については、更に動作と表示を増やしたり、ストー
リー自体の調査を進める必要がある。骨格検出精度に関しては、Kinect を複数台使用することで解決できそうである。マンガとして出力する機能に関しては、写っている動作が何を意味しているのかを解釈し、適切なコマ割りと切り抜きができるようにすると、現在よりもよりマンガらしくなると考えられる。Kinect 依存については、OpenPose などの骨格検出機能を使えば、一般的な Web カメラなどでもマンガを体験できるようになると考えられる。

• マンガリテラシ
今回の実験で視線誘導の要素とどのように影響するかということと、それらの要素を再現することで視線の動きをほとんどコントロールできることが判明した。よって、これらの分
析結果をもとにして新規アプリケーションの開発などができればと考えている。具体的には、マンガの画像を読み込んでそのマンガの読みやすさを判定したり、視線移動を予測することができるアプリケーションを作ることも可能だと思われる。
（※文責: 氏家涼太）

Group Report of 2017 SISP

- 26 -

Group Number 19

Manga engineering

6.4

グループ全体の反省

反省点として、以下の３つがあった。

• スケジュール管理• 作業効率• 作業配分・スケジュール管理
毎回、今日やったことと、次の課題を報告し共有していたが、次の作業にどの程度の時間をかけるべきかを考えていなかった。また、制作物を作成するに当たって、事前に細かいスケジュール管理をしていなかったため、発表直前まで作業をしてしまった。一度でも、全体でスケジュールについて話し合いをすべきだったと感じた。
・作業効率
作業効率については、スケジュール管理ができていなかったため、起きた問題であると感じた。
また、後期に入ってからは、集中力が途切れることが多く、あまり良い作業をしていなかったと感
じた。
・作業配分
作業配分は、チャットツールの作成に当たって、1 人に大きなタスクを任せてしまったことが反省点であった。タスクの重要度や、比較的簡単な作業を考えて、タスクの配分をするべきだったと考えた。
（※文責: 金谷駿汰）

6.5

個人の反省

• 金谷駿汰
前期と後期において機能の開発を行っていたが、想定していた機能をすべて開発することができなかった。主な原因として自身のスケジュール管理の甘さがあったと考えた。前期の活動を基礎的な技術と知識の習得に使ってしまい、後期の活動でしか本格的な開発に取り組むことができなかった。この反省を活かして、自分の技術力を考えて設定する目標とスケジュールを綿密に組んでから作業を行うことが必要だと考えた。

• 福士洸太
前期と後期において機能の作成を担当した。しかし、機能を作成するうえで必要な技術の習得にかかる時間が多くなってしまったり、作った機能を Vue.js を使用するために変換する際にも時間がかかってしまい、結果として満足のできる機能を作成し実装することが出来なかった。その原因として自身のスケジュール管理と技術を応用することがうまくできていなかったことであると考えた。この反省を元に機能を作成する際には前もっていつまで技術を習得するか計画を立て、効率よく実装できるように考えていく必要があると考えた。

• 川瀬周紀Group Report of 2017 SISP

- 27 -

Group Number 19

Manga engineering
php 上での開発では大まかなスケジューリングはできていたものの日頃のタスク管理が出来ていなかったため前期中に完成させる予定であったログイン機能が後期中盤まで完成しなかった。firebase 上での開発では vue.js ならびに firebase の利用方法に対する学習ペースを
スケジューリング出来ず満足いく機能を製作することが出来なかった。スケジューリングとタスク管理の必要性が本プロジェクトを通して学ぶことが出来た。

• 原田圭悠グループリーダーとして、前期と後期、活動した。しかし、6.4 で述べたように、スケジュー
ル管理とタスク配分をしっかり行えなかったことは、リーダーとして、力不足だったと感じた。また、制作物で担当したデザインは、新しいことを学びつつ画面設計をできたので、身になったと感じた。しかし、最終的には、他の言語や技術的な問題もあり、あまり自分が作ったものが生かされていないことがあったので、そのようなことも考えながら作らなければいけないということを知ることができた。

• 氏家涼太データベース担当としてチャットアプリのサーバやデータを格納するデータベースまわりの実装を行った。計画の段階で必要な知識、タスクの配分、開発環境の決定などをうまく行うことができなかったため、各々が実装した機能を統合する際に様々な技術的問題や不具合などが生じてしまった。最初の段階で開発に使う言語、環境、進め方、進捗の共有方法などの確立を徹底することの必要性を学んだ。
（※文責: 氏家涼太）

6.6

前期相互評価・金谷駿汰• 福士洸太：Tex の評価シートの作成作業は助かりました。後期もよろしくお願いします。
• 川瀬周紀：Tex での作業を請け負ってもらって助かりました。なるべく後期は積極的に話し合いに参加してもらいたいです。

• 原田圭悠：Tex を使った評価シートは助かったが、たまにやる気がないように見えるので、お互い頑張りましょう。

• 氏家涼太：アプリ作成のスキル不足は僕を含めて皆さん抱えてる問題だと思いますが、金谷
君の自分で学ぶ姿勢を生かして取り組んでくれるとグループの助けになるのでお互い頑張っていきましょう。

・福士洸太• 金谷駿汰：作業時の行動が速く助かりました。後期の本格的な開発も互いに頑張っていきま
しょう。

• 川瀬周紀：発表原稿の大部分の作成を担当してもらい助かりました。思い出しながら発表するのではなく自分の言葉で補いながら話すといい発表になると思います。

• 原田圭悠：ポスターの原稿やポスター内の文章や英語を書いてくれて助かりました。話す
時、もう少しスラスラ言えたら、もっと発表が良くなると思います。

Group Report of 2017 SISP

- 28 -

Group Number 19

Manga engineering• 氏家涼太：割り振られたタスクを素早くこなしてくれて、非常に助かっています。これから忙しくなると思いますが持ち前の行動力でお互い頑張りましょう。
・川瀬周紀• 金谷駿汰：話し合い時の発言が多いので円滑に活動できました。自分も見習って頑張っていきます。

• 福士洸太：中間発表の原稿の意見やプレゼンのアドバイスが参考になりました。後期もよろしくお願いします。

• 原田圭悠：グループ内で話し合いする時、よく反応してくれて、とても助かりました。後期も協力して頑張りましょう。

• 発言の多さ、タスクの積極性はグループをかなり助けています。これからは僕も頑張ります
のでよろしくお願いします。
・原田圭悠• 金谷駿汰：グループ内での活動の指針となってくれて助かりました。後期からは自分も積極的に頑張るので今後もよろしくお願いします。

• 福士洸太：グループの中心となりメンバーの意見をまとめてくれていたため活動内容が明確で分かりやすかったため助かりました。後期もよろしくお願いします。

• 川瀬周紀：グループのまとめ役となり連絡も率先して行ってもらってすごく助かりました。
後期からも協力して開発を進めていきましょう。

• 氏家涼太：グループに分かれる前から、話が進まなかったときや意見を出し合うとき、率先して先頭を切って活動を進めてきてくれました。頼ってばかりで申し訳ないですが、これからはもっとアシストできるように頑張ります。
・氏家涼太• 金谷駿汰：自分の分担以外にも技術についての意見を提供してくれて助かりました。後期からの開発でも協力お願いします。

• 福士洸太：プロジェクトで何が問題なのかを分析し、今後の問題についてどう解決していくかが参考になりました。後期もよろしくお願いします。

• 川瀬周紀：技術面での知識提供はすごく助かりました。後期からアプリ開発に着手するときもお願いします。

• 原田圭悠：プロジェクトの在り方や、技術面の意見、タスクの割り振りが、とても参考になり、助かりました。開発、頼りにしています。
（※文責: 川瀬周紀）

Group Report of 2017 SISP

- 29 -

Group Number 19

Manga engineering

6.7

後期相互評価・金谷駿汰• 福士洸太：機能の開発、TeX での作業を担当し、プロジェクトを支えてくれた。
• 川瀬周紀：TeX での作業、助かりました。ありがとうございます。
• 原田圭悠：約１年間お疲れ様でした。A グループ唯一 Tex が使えるので、助かりました。ありがとうございました。

• 氏家涼太：TeX での作業を率先して行い、プロジェクト全体の助けになっていた。
・福士洸太• 金谷駿汰：機能の開発を共同してスムーズにできました。１年間ありがとうございました。
• 川瀬周紀：機能面の強化ありがとうございました。
• 原田圭悠：約１年間お疲れ様でした。機能面では、色々作ってくれました。ありがとうございました。

• 氏家涼太：アプリの機能面作成に必要な知識を身につけ、完成に貢献した。
・川瀬周紀• 金谷駿汰：難しいユーザー管理の開発を担当してくれてありがとうございました。
• 福士洸太：データベースを担当し、ログインやユーザ関連の処理を取り組んでいた。
• 原田圭悠：約１年間お疲れ様でした。ログイン等の機能を取り組んでくれてありがとうございました。

• アプリのユーザ認証まわりのプログラム作成に励んでいた。
・原田圭悠• 金谷駿汰：リーダーとして発表会から飲み会まで、あらゆる段取りを整えてくれたので、活動がスムーズに行えました。１年間ありがとうございました。

• 福士洸太：グループリーダーとしてメンバーをまとめあげ、チャットのデザイン、高校生訪問や最終発表のスライドや発表の計画を担当し貢献していた。

• 川瀬周紀：グループのスケジュール建て、意見の総括などを請け負ってくれた。
• 氏家涼太：リーダーとしてグループをまとめ、最終発表会までの計画や発表会当日のプレゼ
ン用スライドの作成や準備を徹底していた。
・氏家涼太• 金谷駿汰：豊富な技術面の知識が全てのメンバーの助けになりました。１年間ありがとうご
ざいました。

• 福士洸太：アプリの機能、デザイン、データベースそれぞれの成果を統合し、まとめ上げた。
• 川瀬周紀：主なアプリの実装、サーバーの準備などでグループを支えてくれた。
• 原田圭悠：約１年間お疲れ様でした。氏家くんがいなければ完成しなかったです。ありがとうございました。
（※文責: 川瀬周紀）

Group Report of 2017 SISP

- 30 -

Group Number 19

参考文献[1] 坂本竜基, 角康之, 中尾恵子, 間瀬健二, 國藤進. コミックダイアリ:漫画表現を利用した経験や興味の伝達支援. 情報処理学会論文誌.43(12).pp3582-3595.2002[2] Junko Itou,Yuichi Motojin,Jun Munemori.”Development of Manga-style Chat System
Aiming to Communicate Nonverbal Expression”.The 17th International Conference on
Knowledge-based Intelligent Information & Engineering Systems.pp745-752.2013[3] 向後智子, 向後千春. マンガによる表現が学習内容の理解と保持に及ぼす効果. 日本教育工学雑誌 22(2).pp.87-94.1998.

[4] 小関悠, 角康之, 西田豊明, 間瀬健二. ぱらぱらマトリクス: 漫画技法を用いた映像を要約するシステム, インタラクション. 2005 論文集. pp177-178.2005.

[5] Cho Heeryon, 石田亨, 山下直美, 稲葉利江子, 高崎俊之. 絵文字解釈における人間の文化差判
定. ヒューマンインターフェース学会論文誌 10(4)pp.427-434.2008.

[6] 宗森純, 大野純佳, 吉野孝. 絵文字チャットによるコミュニケーションの提案と評価. 情報処理学会論文誌 47(7).pp2071-2080.2006.

[7] 家島明彦. 心理学におけるマンガに関する研究の概観と展望 京都大学大学院教育学研究科紀要.53 号 .pp166-180.2007.
[8] 諸岡知徳. マンガのことば:マンガ表現論. 甲南女子大学研究紀要 文学・文化編 46.pp2940.2009.
[9] 笠尾 敦司, べ・ジンソク. マンガの定形的表現 (マングル) のコミュニケーション能力に関する研究. 日本デザイン学会, 第 53 回研究発表大会セッション ID: A19[10] Monaca : Home, 入手先,<https://ja.monaca.io>(参照 2017/06/07)[11] CodeGrid:Vue.js を 使 い こ な す, 入 手 先<https://app.codegrid.net/entry/vue-1>(参 照2018/01/24)[12] Qiita:Firebase の始め方, 入手先<https://qiita.com/kohashi/items/43ea22f61ade45972881>(参照 2018/01/24)- 31 -