実験指向プログラミングプラットフォームへのゲーミフィケーションの導入と実験的評価 神戸大学公開講座
中村匡秀：スマートホームとスマートシティ
長谷 碧

実験指向プログラミングプラットフォームへのゲーミフィケーションの導入と実験的評価〇長谷碧，陳思楠，佐伯幸郎，中村匡秀
神戸大学 システム情報学研究科

1実験指向プログラミングプラットフォームへのゲーミフィケーションの導入と実験的評価

長谷 碧

実験指向プログラミングプラットフォーム◼ 実験指向なコードとは，以下のような性質を持つ◆ 短期間のプログラミングを他人に共有する⚫ 特に昨今のデータマイニングや機械学習など，データサイエンス系の計算⚫ 実験ノートのようなインターフェースで記述される◆ 開発者が永続性を考慮しない⚫ ソリッドな設計がない⚫ 試行錯誤に基づいて頻繁にコードが変更・改良される◆ 例 : Jupyter Notebook・Lab, Google Colaboratory◼ Jupyter Notebook・Lab◆ 2種類のセルを駆使して実験レポートのようにコードを記述◆ コードセル
⚫ Python，R等でソースコードを記述◆ マークダウンセル⚫ マークダウンでコードの説明を記述
2

実験指向プログラミングプラットフォームへのゲーミフィケーションの導入と実験的評価

長谷 碧

課題
◼ 実験指向のコードは説明が記述されにくい◆ コンスタントな変更のたびにコードの説明を更新することは多大な労力◼ コードの説明が少ないことによって…
◆ 内容がわかりづらく，再利用や参考にしにくい◆ 開発者当人もコードの把握がしづらく，修正が難しい◼ コードごとに対応した説明の記述を促す仕掛けを作成◆ どの程度コードに説明が記述されているかを計るための指標が必要→評価指標 : コードセルの説明率⚫ 全コー ドセルのうち直前のマークダウンセルで説明がなされている割合

コードセルの説明率100%の例

コードセルの説明率50%の例

コードセルの説明率0%の例
3

実験指向プログラミングプラットフォームへのゲーミフィケーションの導入と実験的評価

長谷 碧

研究室での現状◼ 実験指向プログラミングプラットフォームの利用状況を調査◆ 対象 : 弊研究室のJupyterLab，466ファイル，32名

全ファイルのコードセルの説明率

研究室メ ンバー毎のコードセルの説明率の平均値

4実験指向プログラミングプラットフォームへのゲーミフィケーションの導入と実験的評価

長谷 碧

研究の目的とアプローチ◼ ゲーミフィケーションによってコードの説明の記述を促すこと◆ ゲーミフィケーションを用いたシステムを提案◼ ゲーミフィケーション◆ サービスをゲーム化し，ユーザの好奇心をひきつけ，行動を活性化◆ プログラミング教育における継続的なインタラクションを促進するためのjupyterlabのゲーミフィケーション*⚫ 目的 : プログラミング学習の継続的なモチベーションを維持
連続学習日数をカウント
JupyterLabでの累計学習時間

学習行動によって得られる経験値◼ 以下のアプローチに基づいて機能を提案◆ A1: コードセルの説明率を可視化する機能の実現◆ A2: 説明を記述するモチベーションを高められる仕組みの実現
A. Brocker, S. Judel, R. Roepke, N. Mihailovska, and U. Schroeder, ``“Gamifying jupyterlab to encourage continuous interaction inprogramming education,'' International Conference on Games and Learning AllianceSpringer, pp.316–322 2022.

5

実験指向プログラミングプラットフォームへのゲーミフィケーションの導入と実験的評価

長谷 碧

A1: コードセルの説明率を可視化する機能の実現◼ コードセルの説明率をグラフや表で可視化◆ 開発者にどの程度コードの説明が記述されているかを認知してもらう⚫ コードの説明不足を見てその必要性について考えるきっかけを与える◆ データを可視化することもゲーミフィケーションの一種である*◼ 以下の機能を提案◆ 開発者のコードセルの説明率を表示◆ 開発者の説明が記述されているコードセルの割合をグラフで可視化◆ 直近のファイルの説明が記述されているコードセルの割合を可視化“[gamification] ゲーミフィケーションでプロジェクトを改善する には? (1/5) [デスマーチ] | oshiire*blog,” https://oshiire.to/archives/3421．visited on 2023-10-21．

6実験指向プログラミングプラットフォームへのゲーミフィケーションの導入と実験的評価

長谷 碧

A2: 説明を記述するモチベーションを高められる仕組みの実現◼ コードの説明率を参照してゲーム要素を導入◆ ゲーム要素によって説明の記述のモチベーション促進◼ 以下の機能を提案◆ コードセルの説明率によって変動する画像を表示◆ コードセルの説明率の現状に対するアドバイスを表示◆ 編集中のファイルのコードセルの説明率を可視化

7

実験指向プログラミングプラットフォームへのゲーミフィケーションの導入と実験的評価

長谷 碧

ケーススタディ : JupyterLabへのゲーミフィケーションの導入◼ アーキテクチャ◆ JupyterLabの拡張機能を開発⚫ 実験指向なコードを記述しているインターフェースと同じ場所に機能を実装◆ 使用言語・技術⚫ バックエンド : Python，Tornado⚫ フロントエンド : TypeScript，React•••

Step1: ユーザーがデータを必要とする操作を行うと，フロントエンドはバックエンドに対してデータを要求する
Step2: バックエンドは，JupyterLab内にあるファイルのデータを各ユーザーごとに計算・整形し，フロントエンドに返す
Step3: フロントエンドは，バックエンドから受け取ったデータをもとに，データをグラフ等で画面に表示する

アーキテクチャ図8

実験指向プログラミングプラットフォームへのゲーミフィケーションの導入と実験的評価

長谷 碧

ケーススタディ : JupyterLabへのゲーミフィケーションの導入◼ JSONデータ• “userName”
ユーザー名• “numAllDescribedCodeCells”
説明が記述されているコードセル数• “numAllCodeCells”
コードセル総数• “file”[] : 直近のファイル情報リスト• “fileName”
ファイル名• “numAllDescribedCodeCells”
説明が記述されているコードセル数• “numAllCodeCells”
コードセル総数

JSONデータ例9実験指向プログラミングプラットフォームへのゲーミフィケーションの導入と実験的評価

長谷 碧

ケーススタディ : JupyterLabへのゲーミフィケーションの導入◼ 提案システムの全体像◆ 2つのリーダーボードを実装し，そのコンテンツとして各種機能を実装⚫ Leader Board Entirely : ファイルの対象期間が全期間⚫ Leader Board Recently : ファイルの対象期間が可変(デフォルトで1週間)→ 直近のファイルを対象としたほうが開発者がコードの説明を足しやすい

Leader Board EntirelyLeader Board Recently

JupyterLabのトップページ
10実験指向プログラミングプラットフォームへのゲーミフィケーションの導入と実験的評価

長谷 碧

リーダーボード外観

ユーザーを選んで展開する

11

実験指向プログラミングプラットフォームへのゲーミフィケーションの導入と実験的評価

長谷 碧

あるユーザーについての展開例

12実験指向プログラミングプラットフォームへのゲーミフィケーションの導入と実験的評価

長谷 碧

A1: コードセルの説明率を可視化する機能の実現◼ コードセルの説明率をグラフや表で可視化◆ 開発者にどの程度コードの説明が記述されているかを認知してもらう⚫ コードの説明不足を見てその必要性について考えるきっかけを与える◆ データを可視化することもゲーミフィケーションの一種である*◼ 以下の機能を実装◆ 開発者のコードセルの説明率を表示◆ 開発者の説明が記述されているコードセルの割合をグラフで可視化◆ 直近のファイルの説明が記述されているコードセルの割合を可視化“[gamification] ゲーミフィケーションでプロジェクトを改善する には? (1/5) [デスマーチ] | oshiire*blog,” https://oshiire.to/archives/3421．visited on 2023-10-21．

13実験指向プログラミングプラットフォームへのゲーミフィケーションの導入と実験的評価

長谷 碧

開発者のコードセルの説明率を表示降順にすることで実質的にランキング形式に

14

実験指向プログラミングプラットフォームへのゲーミフィケーションの導入と実験的評価

長谷 碧

開発者の説明が記述されているコードセルの割合をグラフで可視化説明が記述されているコードの数を緑色
記述されていないコードの数を警告色の赤色で表示

警告色で表示することで改善が必要であることを直観的に認知してもらう

15実験指向プログラミングプラットフォームへのゲーミフィケーションの導入と実験的評価

長谷 碧

直近のファイルの説明が記述されているコードセルの割合を可視化

コードセルの説明率が100%に近づくほど緑色遠ざかるほど赤色で表示
直近で作成された3ファイルについてコードセルの説明率を表とゲージで表示

直近で作成したファイルであるため開発者が直ちにコードセルの説明率を改善しやすいと考えられる

16

実験指向プログラミングプラットフォームへのゲーミフィケーションの導入と実験的評価

長谷 碧

A2: 説明を記述するモチベーションを高められる仕組みの実現◼ コードの説明率を参照してゲーム要素を導入◆ ゲーム要素によって説明の記述のモチベーション促進◼ 以下の機能を実装◆ コードセルの説明率によって変動する画像を表示◆ コードセルの説明率の現状に対するアドバイスを表示◆ 編集中のファイルのコードセルの説明率を可視化

17実験指向プログラミングプラットフォームへのゲーミフィケーションの導入と実験的評価

長谷 碧

コードセルの説明率によって変動する画像・アドバイスを表示

コードセルの説明率によって画像の表情・セリフ(アドバイス)が変動する
コードセルの説明率が高いとき

18実験指向プログラミングプラットフォームへのゲーミフィケーションの導入と実験的評価

長谷 碧

コードセルの説明率によって変動する画像・アドバイスを表示

表情・アドバイスのパターンを0~25%，25~50%，50~75%，75~100%の4段階設定
表情画像については3種類の人物を用意
コードセルの説明率によって画像の表情・セリフ(アドバイス)が変動する
コードセルの説明率が低いとき

19実験指向プログラミングプラットフォームへのゲーミフィケーションの導入と実験的評価

長谷 碧

コードセルの説明率によって変動する画像・アドバイスを表示

Stable Diffusionによるランダム画像生成コードセルの説明率によってモチーフが変動する

20

実験指向プログラミングプラットフォームへのゲーミフィケーションの導入と実験的評価

長谷 碧

コードセルの説明率によって変動する画像・アドバイスを表示

コードセルの説明率が高いとき

コードセルの説明率が低いとき

4段階のモチーフは開発者の好みによって設定できることを想定

21

実験指向プログラミングプラットフォームへのゲーミフィケーションの導入と実験的評価

長谷 碧

編集中のファイルのコードセルの説明率を可視化

編集中のファイルのコードセルの説明率をアイコンの移動によってリアルタイムに可視化
コードセルの説明率が高いとき

コードセルの説明率が低いとき

22実験指向プログラミングプラットフォームへのゲーミフィケーションの導入と実験的評価

長谷 碧

評価実験
◼ 主な目的 : ゲーミフィケーション導入の効果を評価◼ 実験方法◆ 提案システムを被験者のJupyterLab環境に導入し開発を行ってもらう⚫ 実験期間 : 2023/12/5 ~ 2024/1/17，被験者 : 7人

◼ 評価項目◆ RQ1 : 被験者は説明が不足していることによる問題を感じているか？
◆ RQ2 : コードセルの説明率は改善されたか？
◆ RQ3 : 被験者はゲーミフィケーションの効果をどう知覚したか？
◆ RQ4 : 被験者はどの機能が説明記述に効果的と知覚したか？

◼ 収集するデータ◆ 実験期間前，実験期間中に被験者が作成・更新した.ipynbファイル◆ 実験期間前後に行ったアンケート23実験指向プログラミングプラットフォームへのゲーミフィケーションの導入と実験的評価

長谷 碧

RQ1 : 被験者は説明が不足していることによる問題を感じているか？

◼ 実験前に行ったアンケート項目の回答を分析◆ Q4a. JupyterLabでコードを読む際， 説明がなくてわかりにくいと思ったことはありますか？
◆ Q5a. JupyterLabでコードを読む際， 自分が参考にしたいと思っている部分を探すのに時間がかかって困ったことはありますか？

Q4aの回答

Q5aの回答◆ 被験者はコードを読む際，説明がなくてわかりにくいと感じている◆ 自分が参考にしたいと思っている部分を探すのに時間がかかる場合
24

実験指向プログラミングプラットフォームへのゲーミフィケーションの導入と実験的評価

長谷 碧

RQ2 : コードセルの説明率は改善されたか？
◼ 全体のコードセルの説明率の向上◼ 7人中5人のユーザーでコードセルの説明率の平均値の向上

各期間における全ファイルのコードセルの説明率の箱ひげ図

両期間において被験者毎に各ファイルのコードセルの説明率の平均値を比較

25

実験指向プログラミングプラットフォームへのゲーミフィケーションの導入と実験的評価

長谷 碧

RQ4 : 被験者はどの機能が説明記述に効果的と知覚したか？

◼ 実験後に行ったアンケート項目の回答を分析◆ 導入したゲーミフィケーション機能の中で，コードの説明記述のモチベーションを高める効果があったと感じた機能を選択してください
機能

投票数

編集中のファイルのコードセルの説明率を可視化する機能

6

コードセルの説明率を表示する機能

4

直近のファイルの説明が記述されているコードセルの割合を可視化する機能

2

Stable Diffusionによる画像生成機能

2

説明が記述されているコードセルの割合をグラフで可視化する機能

1

コードセルの説明率によって変動する画像を表示する機能

1コードセルの説明率の現状に対するアドバイスを表示する機能

0◆ 得票率が高かったゲーミフィケーション機能⚫ 編集中のファイルのコードセルの説明率を可視化する機能⚫ コードセルの説明率を表示する機能→どちらもユーザーの目に触れやすい場所にある◆ 得票率が低かったゲーミフィケーション機能⚫ ランダム性や情報量が少ない
26

実験指向プログラミングプラットフォームへのゲーミフィケーションの導入と実験的評価

長谷 碧考察◼ 提案システムの利点◆ 目に触れやすい場所にゲーミフィケーション機能が存在すること◆ ゲーミフィケーションの効果を最大限に発揮するには以下の点が重要⚫ ゲーミフィケーション機能がユーザーの目に触れやすいところにあること⚫ ゲーミフィケーション機能を有することをユーザーが知っていること◆ 外部サービスではなく対象システム内に組み込んだ◆ 利用してもらう際にはゲーミフィケーション機能の詳細な説明が必要◼ 提案システムの限界◆ コードの説明内容についての質的評価を行っていないこと◆ コードセルの説明率の定義⚫ 全コー ドセルのうち直前のマークダウンセルで説明がなされている割合◆ 説明がコードの内容を正しく説明しているかどうかは評価していない◆ 提案システムはコードの説明内容の質を向上させることはできない
27

実験指向プログラミングプラットフォームへのゲーミフィケーションの導入と実験的評価

長谷 碧

まとめ
◼ 実験指向なコード◆ 頻繁な更新を行う性質上，コードの説明が記述されにくい◼ ゲーミフィケーションによってコードの説明の記述を促すこと◆ ゲーミフィケーションを用いたシステムを提案⚫ A1: コードセルの説明率を可視化する機能の実現⚫ A2: 説明を記述するモチベーションを高められる仕組みの実現◼ ケーススタディ◆ 提案システムを拡張機能としてJupyterLabに導入した◼ 実験◆ 実際に被験者に実験環境で開発を行ってもらった◆ 結果 : ゲーミフィケーションによってコードセルの説明率を向上させた
28

実験指向プログラミングプラットフォームへのゲーミフィケーションの導入と実験的評価

長谷 碧

コードセルの説明率の定義について◼ 直前のマークダウンセルで説明がなされている割合◆ 直後に説明がある場合もあるのでは？

◼ ある環境のJupyterLabを対象に定義を変えて比較◆ 振る舞いはあまり変わらない
29

実験指向プログラミングプラットフォームへのゲーミフィケーションの導入と実験的評価

長谷 碧

RQ3 : 被験者はゲーミフィケーションの効果をどう知覚したか？

◼ 有効性，実用性，快適性，快感性を尋ねるアンケートを実施◆ どの要因によってゲーミフィケーションの効果が表れたかを分析◆ 有効性 : 実験前後のアンケート項目の回答結果を比較⚫ JupyterLabで開発を行う際，コードセルごとにマークダウンセルによる説明を記述しますか？

◆ 実用性 :実験前後のアンケート項目の回答結果を比較⚫ コードセルごとにマークダウンセルによる説明を記述することは重要だと思いますか？

◆ 快適性 : 実験前後のアンケート項目の回答結果を比較⚫ マークダウンセルによるコードの説明を記述することは労力がかかりますか？

◆ 快感性 : 実験後のアンケート項目の回答結果を観察⚫ 導入したゲーミフィケーション機能によってコードの説明付加が楽しいと思えましたか？

30

実験指向プログラミングプラットフォームへのゲーミフィケーションの導入と実験的評価

長谷 碧

RQ3 : 被験者はゲーミフィケーションの効果をどう知覚したか？

◼ システムの評価指標SQuaREの中から以下の指標を利用◼ 有効性◆ 設定された目標や要件をどれだけ効果的に達成できるか◼ 実用性◆ ユーザーにとって実用的であり，役立つか◼ 快適性◆ ユーザーに快適な体験をもたらすか◼ 快感性◆ ユーザーに楽しさや満足感をもたらすか31

実験指向プログラミングプラットフォームへのゲーミフィケーションの導入と実験的評価

長谷 碧

有効性
◼ JupyterLabで開発を行う際，コードセルごとにマークダウンセルによる説明を記述しますか？
◼ コードセルに対して説明を記述する頻度が向上

実験前◆ 被験者がコード毎に説明を記述する有効性を感じた◆ 有効性はゲーミフィケーションの効果の要因の1つとして考えられる

実験後
32

実験指向プログラミングプラットフォームへのゲーミフィケーションの導入と実験的評価

長谷 碧

実用性
◼ コードセルごとにマークダウンセルによる説明を記述することは重要だと思いますか？

◆ 両側t検定の結果p値 : 0.69 → 有意差なし◆ 実験前後で違いがない◆ 実用性がゲーミフィケーションの効果の要因の1つとは言えない33

実験指向プログラミングプラットフォームへのゲーミフィケーションの導入と実験的評価

長谷 碧快適性◼ マークダウンセルによるコードの説明を記述することは労力がかかりますか？

◆ 両側t検定の結果p値 : 0.28 → 有意差なし◆ 実験前後で違いがない◆ 快適性がゲーミフィケーションの効果の要因の1つとは言えない34

実験指向プログラミングプラットフォームへのゲーミフィケーションの導入と実験的評価

長谷 碧

快感性
◼ 導入したゲーミフィケーション機能によってコードの説明付加が楽しいと思えましたか？

◆ 平均値は4.00◆ 全体的に高い評価点を得ている◆ 快感性がゲーミフィケーションの効果の要因の1つと言える

35