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

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

• keyboard_arrow_down 研究背景
• keyboard_arrow_down 研究内容
• keyboard_arrow_down 研究結果

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

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

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

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

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

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

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

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

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

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

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

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).