情報処理学会 インタラクション 2019
IPSJ Interaction 2019

2B-19
2019/3/6

コード編集と Web 閲覧履歴の時系列による統合とその活用
村松 啓寛1,a)

寺田 実1,b)

概要：プログラミングを行なっている際に疑問点等を解決するために Web ページを調べ, 参考にすることが多々ある. その際, 参考にした Web ページを別途記録しておくことはほとんどないがプログラミングしたコードを後から読む際に参考にした Web ページを再び閲覧したくなったり, プログラミング時に調べた疑問点を再び検索することがある. そこで, 本研究ではプログラミングのソースコードの編集履歴と Web閲覧履歴を時系列で統合し, ユーザーに参考にした Web ページの情報や対象のソースコードを提示することで再度探す手間を省いたり, プログラミング時の意図の想起や推測, コードの理解の支援をするためのシステムを提案する.

1. はじめにページを参考にした他の部分のソースコードを探すことはソースコードの量や変更量にもよるがさらに困難である.

昨今では Web サイトでのプログラミングに関わる情報

本研究で提案するシステムはプログラミングを行う際にの充実や GitHub などの Web でのソースコードなどの管発生するソースコードの編集履歴と Web ブラウザでの閲理, Stack Overflow などの Web でのプログラミングに関覧履歴を記録・保存する. 同システムではそれらのデータわる疑問点の質問ができるようになっている. そのため, プを活用し, 時系列順やファイルごとに提示を行う. それらログラミングを行なっている際に疑問点などが出た場合にによって, ユーザーが別途記録・保存しなくても, 参考にし書籍で調べたり, 知識を有している人に聞くよりも手軽なた Web ページの情報や対象のソースコードを閲覧するこため, 利用する頻度が高くなってきている.とでプログラミング時の意図の想起や推測, コード理解のWeb を使って疑問点などを解決するためには Google などの検索エンジンを利用し, Web ページを調べ, 参考にしたり, さらに Web ページを探したりといった流れである支援を行うシステムを提案することが本研究の目的である.

2. 関連研究ことが多い. その際, 参考にした Web ページやその時の検ファイルと Web 閲覧履歴を紐付ける研究として俺デス

索キーワードを別途記録・保存しておくことはほとんどな

ク [1] があげられる. PC 上であるファイルを編集していた

い. しかし, 作成したソースコードを後から読む際に参考時に閲覧していた Web ページを紐付け, 紐付けた情報を後にした Web ページを再び閲覧したくなったり, プログラから提示することでそのファイルを編集していた時の行動ミングをしている時に調べた疑問点を再び検索することがや意図を想起する支援を行っている. 参照時刻やテキストある. だが, 参考にした Web ページのタイトルや検索時の内検索などの複数のユーザーによる操作を基に関連度を算キーワードを覚えていることは少ない. また, Web ブラウ出し, 紐づけている. 本研究では対象としているファイル

ザの膨大な閲覧履歴から目的の Web ページや検索結果ををプログラミングのコードとし, また, ファイル単位ではな探すことも困難である.

くファイルの行単位の粒度で閲覧した Web ページを紐づ過去に参考にした Web ページはソースコードのある一けるという点で異なっている.

箇所だけではなく, 複数の部分で参考にしていることは珍ソースコードへ情報を紐付ける研究として, ソースコーしいことではない. そのため, 参考にした Web ページを基ドへのアノテーションによるプログラミング学習支援のシにプログラミングしたソースコードの該当箇所を全て見た

ステム Source Code Annotator[2] があげられる. このシいことは多々ある. しかし, ある部分のソースコードで参

ステムでは, アノテーションに関連する画像, 動画, 音声,考にした Web ページを見つけられたとしても, その Web

スライド, 文書などのリソース, 参照すべき Web ページを

1a)b)

電気通信大学大学院情報理工学研究科
m1731155@edu.cc.uec.ac.jp
terada.minoru@uec.ac.jp© 2019 Information Processing Society of Japan

ソースコードに付加し, 共有している. ソースコードに対し行単位で参考にした Web ページなどの情報を紐づける

538情報処理学会 インタラクション 2019
IPSJ Interaction 2019

2B-19
2019/3/6

図 1システムの概要という点が本研究と共通している. 本研究では編集履歴に• ある部分のプログラムの説明基づいてソースコードに対し参考にした Web ページを自• プログラミング時にコメントを追加していなかった部動的に紐付けている点で異なっている.
統合開発環境からソースコードの編集履歴を取得する研究として OperationRecorder[3] があげられる. このシス
テムは 統合開発環境である Eclipse のプラグインとして,分でのコメント追加• バグが発見され, ある部分の修正• ある部分のソースコードを参考に新たなプログラムの作成

Java 言語を対象に Eclipse 上で編集した Java ファイルのこのような作業が発生した場合にソースコードを見て, す編集履歴をテキスト単位で記録を行う. 記録した編集履歴

ぐにコードを理解できればいいが, 理解ができず再び Webは XML ファイルとして保存される. 本研究での編集履歴検索を行うことがある. 本システムでは再び Web 検索を行取得には OperationRecorder を利用している.

3. 提案システム
3.1 概要

わなくても, また, その部分をいつ編集したか覚えていなくても, 現在のソースコードの調べたい部分のコードを選択することで, その部分の過去の Web 閲覧履歴一覧を表示でき, そこから参考にした Web ページを得ることができる.

図 1 に提案システムの概要を示す. 本システムは Eclipse

また, その部分の編集した時期を覚えていれば, 統合開発プラグインとして実装している. 統合開発環境 (IDE) は環境のプロジェクトビューから対象のファイルを選択する

Eclipse, 編集履歴取得には Eclipse プラグインである Op-

ことで編集履歴一覧を表示し, そこから対象の編集履歴をerationRecorder[3], Web ブラウザには Google Chrome ま選択することでその部分の過去の Web 閲覧履歴一覧を表

たは FireFox を利用している. また, 対象とするプログラ

示でき, 参考にした Web ページを得ることができる.

ミング言語は Java とする.

ユーザーは Web ページと同時にその時のソースコードの差分も得ることができる. そのため, 参考にした Web

3.2 ユースケース

ページとソースコードの編集の差分を同時に見ることで,本システムのユースケースの一例を以下で述べる. ユー

プログラミング時の意図の想起や推測, コード理解ができ,ザーは本システムがインストールされた統合開発環境でプ

上記で述べた要求を解決できる. それぞれの機能の詳細なログラミングを行う. プログラミング中には様々な疑問点

説明は次節以降で行う.

が生じ, Web ブラウザを利用して, Web 検索を行う. 検索を行い, 参考になる Web ページを発見し, そのページを参考にしながらプログラミングを続ける. これらを繰り返し,プログラムを作成していく.
プログラムを作成して, ある程度の時間が経過した後に3.3 ソースコードの編集履歴
プログラミングは OperationRecorder および提案シス
テムのプラグインがインストールされている統合開発環
境の Eclipse で行う. ソースコードの編集履歴は Oper-

以下のようなユーザーの作業が発生することがある.

© 2019 Information Processing Society of Japan539

情報処理学会 インタラクション 2019
IPSJ Interaction 2019

図 22B-19
2019/3/6

図 3 Web 閲覧履歴の一覧表示

ソースコード編集履歴の時系列による一覧表示

ationRecorder が自動で取得し, ユーザーが開いているエディタのタブを閉じる際に XML ファイルとして保存される. そのため, ユーザーは適宜エディタのタブを閉じる操作が必要になる. しかし, 閉じる操作以外には特別な操作は必要ないため, ユーザーはプログラミングをいつも通り行うことができる.
図 4 Web 閲覧履歴の詳細情報表示

3.4 Web 閲覧履歴
Web ブ ラ ウ ジ ン グ は Web ブ ラ ウ ザ で あ る Google
Chrome または FireFox で行う. どちらのブラウザを利用するかはユーザーに選択してもらう. ブラウザによって取得できる Web 閲覧履歴に多少の差異はあるが本システムでの利用には特に影響はない. 本システムでは Webブラウザが PC のローカルにある Web 閲覧履歴を記録しているデータベースを利用するため, ユーザーには特別な操作を要求はしない. そのため, ユーザーは普段通りのブラウジングを行うことができる.

3.5 データの時系列による統合
本システムはソースコードの編集履歴と Web 閲覧履歴は時系列による統合を行い, それらの統合された情報をデータベースに登録する. データの時系列による統合とデータベースへの登録はソースコードの編集履歴ファイルが保存されるタイミングで自動的に行う. そのため, 過去のデータに関してデータの時系列による統合およびデータベースへの登録はすでに完了しているため, ユーザーは本システ
ムに問い合わせる操作のみで過去のソースコードや Web閲覧履歴を見ることができる.
また, ユーザーが現在編集している部分に関する Web 閲
覧履歴などの情報を閲覧したい場合には対象の Java ファイルを開いているエディタのタブを閉じることで情報を反映する必要がある.

3.6 ソースコード編集履歴の時系列表示
本システムは図 2 のようにユーザーにプロジェクト単位またはファイル単位でソースコードの編集履歴を時系列で一覧表示をする. Eclipse のビューで時系列表示を行う. 一
覧表示では左から編集履歴の時刻, 対象ファイル名, 一つ前の編集履歴から今回の編集履歴までの間に閲覧した Web閲覧履歴数を表示する. また, 一覧表示からある編集履歴をダブルクリックすることでその時に見ていた Web 閲覧履歴の一覧およびその時のソースコードを表示する. これ© 2019 Information Processing Society of Japanによりユーザーはどのファイルのどの部分を編集していた
時に多くの Web を見ていたかまたは探していたかを確認することができる.

3.6.1 Web 閲覧履歴の一覧表示
Web 閲覧履歴の一覧表示は図 3 に示す. 編集履歴の時系
列表示と同様に Eclipse のビューで Web 閲覧履歴の一覧表示を行う. 表示されている内容はその時に閲覧した Webページのタイトルである. Web の一覧表示の左側 (図 3A)は一つ前の編集履歴から今回の編集履歴までに見た Webの閲覧履歴である.
図 3B は今回の編集履歴より前 10 分に見た Web の閲覧履歴である. 図 3B は一つ前の編集履歴との時間間隔が短いなどの理由で図 3A に該当する Web 閲覧履歴がないがそれよりも前に今回の編集履歴に関係する Web 閲覧履歴が存在する場合があるため表示している. 現在の仕様では表示可能な時間は 10 分前までであり, 表示内容は図 3A と重複する可能性がある.
図 3C は今回の編集履歴より後 10 分に見た Web 閲覧履歴である. 図 3C は今回の編集履歴に該当するソースコードを編集していた際にさらに疑問点が発生して, Web 検索を行って, 別の Web ページを見ている可能性があるため表示をしている. 図 3B と同様に現在の仕様では表示可能な時間は 10 分後までである.
図 3A, B, C の Web ページタイトルの項目はダブルクリックを行うことでその Web 閲覧履歴の詳細情報を表示することができる. Eclipse のダイアログで Web 閲覧履歴の詳細表示を行う. 詳細情報の表示は図 4 に示す. 詳細情報表示ではその Web ページを見た時刻, ページタイトル,URL を表示している. また, OK ボタンを押すことで PCのデフォルトブラウザにて該当のページを開くことが出来る.

3.6.2 過去のソースコード表示対象となっているファイルの選択された編集履歴におけ540

情報処理学会 インタラクション 2019
IPSJ Interaction 2019

2B-19
2019/3/6への機能が存在しない. 具体的には Web 閲覧履歴やソースコードを取得した後, 表示粒度が細かすぎるので粗くする, さらにその Web ページを見ていた時に編集していた他のソースコードを検索, その Web ページに関して現在のソースコードへコメントアウトの形で残したいと思うのではないかと推測する. そのため, 情報を取得した後のユーザーへの機能の作成を検討している.
記録された Web 編集履歴は Web ブラウザで見た全てのページを取得しているため, ソースコードと関係ない履歴が含まれていることがある. しかし, 現在はそれらの履歴も表示するようになっているため, ユーザーにはノイズを含んだ情報を提示している. そのため, ユーザーがこのWeb 閲覧履歴はソースコードとは関係ない履歴だと判断した場合にはこの履歴を非表示にするといったことができ
図 5選択された編集履歴におけるソースコード表示る機能の作成を検討している.
本システムで取得している Web 閲覧履歴は Web ブラ

るソースコード表示は図 5 に示す. Eclipse のエディタにウザのローカルに保存している情報を取得している. その読み取り専用として過去のソースコード表示を行う. ソー

情報はその Web ページにアクセスした時刻が記録されてスコードは選択された編集履歴後の内容を表示する. また,いる. その Web ページをタブに開いておいて, 再び見る場

該当の編集履歴によって変更される部分の変更前のコード合もある. しかし, その場合には Web ページのリロードはコメントアウトの形式で該当部分に追加し, 表示する. 表は行われないことが多く, その時刻は記録されないことが示するソースコードと該当する Web 閲覧履歴一覧を見比多々ある. 結果, 本システムで提示される Web 閲覧履歴はべることで一覧の中でもこの Web ページを参考にしたと必ずしも, そのソースコードを編集していた時に見ていたいった確認を行うことが出来る. また, 表示されたソースWeb ページではないことが発生する. そのため, Web ブラ

コードはある編集履歴後の状態を閲覧するために復元してウザでどのページをどのくらい見ていたか記録する機構のいるため, その状態がプログラムとして構文的に正しいと作成を検討している. また, 現在のソースコードの編集履は限らない.

歴取得する機構は他者が作成したものであるため, 取得できる情報はその機構が提供しているものに限られる. その

3.7 現在のソースコードから過去の情報表示
現在のソースコードから過去の Web 閲覧履歴やソースコードにアクセス出来るようになる機能を現在実装中であため, 本システムにより合った情報を取得するためにソースコードの編集履歴を取得する機構を自前で作成することも検討している.

る. この機能は図 5 のような現在のソースコードを編集し提案システムでは履歴に関するデータは PC のローカているエディタ上でソースコードのある部分を過去に編集ルで保存しているため, 利用方法は個人開発を想定していしていた時に閲覧していた Web ページやその時のソースる. そのため, 複数人での開発では利用できない. しかし,コードの編集履歴を確認できる機能である. ユーザーは過現在のソースコードから過去の情報へのアクセス機能およ

去の情報を確認したい部分のソースコード上で右クリック

び履歴情報の共有の機能を作成することで複数人での提案でコンテキストメニュー (ホップアップメニュー) を表示すシステムの利用が可能となる. 複数人での履歴の共有が可る. その中から本システムのメニューである「過去の情報能になることでソースコードとその Web 閲覧履歴から他を参照する」を選択する. 本システムは自動的にユーザー者のプログラミング時の意図の想起や推測, 他者が書いたが選択したソースコード付近の過去の編集履歴に基づいて,コードの理解の支援に繋がるのではないかと予想推測する.

過去の Web 閲覧履歴一覧を表示する. また, 過去の Web

そのため, 複数人での履歴の共有に関する機能を検討して閲覧履歴一覧からユーザーがある Web 閲覧履歴を選択すいく.

ることで, 本システムはその時の過去のソースコードを図5 と同様に表示する.

4. 今後の課題

5. おわりに
本稿では ソースコードの編集履歴と Web 閲覧履歴の時系列による統合を行い, ユーザーに提示し, ユーザーのプロ提案システムではユーザーは過去の Web 閲覧履歴やグラミング時の意図の想起や推測, コードの理解の支援のソースコードを取得した後にその情報を利用したユーザーためのシステムの提案をした. 本システムを利用すること© 2019 Information Processing Society of Japan541

情報処理学会 インタラクション 2019
IPSJ Interaction 2019

2B-19
2019/3/6

で自動的にソースコードの編集履歴と Web 閲覧履歴を記録・保存し, それらの情報をユーザーが活用しやすい形で提示することで再度探す手間を省いたり, プログラミング時の意図の想起や推測, コードの理解の支援が可能だと考える.
今後の課題はユーザーが本システムで記録・保存された情報を活用する手段が少ないため増やすことである. 具体
的には情報の表示粒度の変更機能, 得られた情報からさらなる検索が出来る機能や参考にした Web ページに関する情報をコメントとしてソースコードに追加する機能, 記録・保存されたデータの編集機能である. 加えて, 取得する情報量を増やすために情報取得の自前のシステムの実装を検討していく. また, 複数人での利用が可能になると活用の範囲がより広くなると考えられるため, 履歴情報の共有の仕組みに関しても検討していく.
参考文献
[1]

[2]

[3]

大澤亮, 高汐一紀, 徳田英幸. 俺デスク：ユーザ操作履歴に基づく情報想起支援ツール . 情報処理学会 第 47 回 プ
ログラミング・シンポジウム, 2006.
伊藤瑠哉, 竹島亮, 長尾確. バージョン管理システムと連携したソースコードへのアノテーションによるプログラミング学習システム . 情報処理学会 第 78 回全国大会講演
論文集, pp. 309-310, 2016.
Omori, T. and Maruyama, K.: A Change-aware Development Environment by Recording Editing Operations ofSource Code, in Proceedings of the 2008 InternationalWorking Conference on Mining Software Repositories,
2008, pp. 31–34.

© 2019 Information Processing Society of Japan542