「コード」から「漫画」を自動作成するツール「CodeToon」。カナダの研究者らが開発【研究紹介】

2022年9月15日

山下 裕毅

先端テクノロジーの研究を論文ベースで記事にするWebメディア「Seamless/シームレス」(https://shiropen.com/)を運営。

カナダのUniversity of Waterlooの研究チームが開発した「CodeToon: Story Ideation, Auto Comic Generation, and Structure Mapping for Code-Driven Storytelling」は、テキストベースのプログラミングコードから漫画を自動生成するコミック・オーサリングツールだ。入力したコードから物語文を作成し、漫画に自動生成することで直感的にプログラミングが理解できる視覚的な教材を容易に作成することができる。

▲コードからストーリーを生成し、漫画に仕上げる

研究背景

テキストベースのプログラミング言語による学習は、初心者の学習者にとって障壁となる。なぜならテキストベースのプログラミング言語は、一見任意に見えるルールと抽象表現のセットを使用した記号表現に依存しているからだ。コンパクトな構文と表記法は、正確な操作を指定するのには便利だが、学習者が計算の概念を理解するのに役立つ実生活のシナリオを活用できる絵や視覚表現とは異なり、基礎となる計算の考え方を直感的に学習者に伝えるのには適していない。

そのため、初心者の学習者は、構文や意味論の背後にある直感を理解することなく、ルールやコード式を暗記することを余儀なくされるケースが多い。そのため、コンピュータ・プログラミングは抽象的なアイデアやルールの集合体であり、コンピュータ・サイエンスは難解でとっつきにくく、特に抽象的な推論が苦手な人にとっては面白味のない学問であるというイメージが定着している可能性がある。

これに対処するため、多くの研究が具現化アプローチに注目し、現実の物体、状況、視覚的表現などの身近な抽象概念を用いて、コンピュータ・プログラミングをより具体的で身近なものにする方法を模索している。

例えばコードと漫画の組み合わせは、初学者にとって直感的に学べ、コードのみのアプローチよりも高く評価されている。残念ながら、この組み合わせの有用性は実証されているにもかかわらず、作成は依然として手作業で行う。クリエイターがアイデアを出してコードに沿ったストーリーを構築し、漫画を描かなければならない。手間がかかるため自動化が求められている。今回は、コードから漫画を作成するタスクを自動で行ってくれるシステムを提案し、その手間を大幅に軽減することを目指す。

▲左からコード、テンプレート、出力サンプル

研究内容

具体的には、コードをストーリーに、そしてストーリーをコミックに効率的に変換できるWebブラウザベースのツールとなる。ユーザーインタフェースは、コードを入力するパネル、テキストによるストーリーを構築するパネル、コミックのプレビューが表示されるパネルの3つのエリアで構成される。

▲コードから漫画を作成するCodeToonのユーザーインタフェース

ストーリーパネルでは、漫画に変換する前段階としてコードを文章に変換する作業を行う。その際、変数を別の何かに置き換える作業を行う。「飛行機」や「バナナ」、「目覚まし時計」のような候補がプルダウンで表示され、変数を何にするかを選択する。

仮に、目覚まし時計を選んだ場合、「X = 10」というコードが「alarm clcok says 10o’clock」(目覚まし時計が10時を示している)という文章に変換され、「if x == 10」というコードが「If alarm clcok says 10o’clock」(もし、目覚まし時計が10時を示している場合…)という文章に変わり、「print (“Wake up”)」というコードが「Wake up」(…起きる)、というような一連のストーリーが構築される。

▲ コードとそれに対応するストーリーの一例

ストーリーが構築されると、クリック一つで漫画のコマにそれぞれ割り当てられコミックが生成される。例えば、下の図では変数が帽子をかぶった髭の生えた人で、中にはバッテリー数が入れられており、for文においてバッテリーが減っていくという物語が構築される。

▲コミックテンプレートの一例

ストーリーからコミックへの変換は、予めこの関数ならこのテンプレート(コマ数や吹き出しの位置関係や大きさなど)がある程度決められている。そのため自動生成だけではうまく行かない場合もあり、出力後に手動で出直しができるようになっている。

▲上の(A)は自動生成された漫画、下の(B)は手直しした漫画

研究結果

このように比較的簡単にコードから漫画を構築でき、プログラミング教材を容易に作成できる。

コードを漫画に変換するという今回の手法は、やや強引な視覚化ではあるものの、様々なプログラミング言語で応用できる可能性を秘めている。例えばオブジェクト指向プログラミングは、その概念とコードがしばしば実生活に相当するものとして提示される分野であるため、今回の手法が応用しやすいと考えられるだろう。

Source and Image Credits: Suh, Sangho, Jian Zhao, and Edith Law. “CodeToon: Story Ideation, Auto Comic Generation, and Structure Mapping for Code-Driven Storytelling.” arXiv preprint arXiv:2208.12981 (2022).

関連記事

人気記事

公式SNSで
最新おすすめ記事を配信中!

キャリアと技術の可能性が見つかるメディア レバテックメディアLAB

  • コピーしました

RSS
RSS