開催日時
2026年1月10日~11日
参加者
ConvivialNetメンバー2名(ネットワーク部1名、プログラミング部1名)
参加の目的
技育博に向けて成果物制作経験を積む
制作物
「BrowseTree — 閲覧履歴を樹形図表示するChrome拡張機能」
・GoogleChrome拡張機能
・ウェブ検索履歴をAPI取り込みし、検索履歴から「一本の木」を作る
・３０分以内の履歴で「枝」を作成
・３０分経ってからの検索内容は「幹」として上にのびる
・任意のウェブサイトを「実」としてマークアップ可能
・ウェブサイトに関するメモを「葉」として記録可能
仕様
BrowseTree
├── manifest.json //Chrome拡張機能に必須
├── background.js // タブ・履歴の取得
├── data/
│ └── historyProcess.js // 状態管理・保存
├── ui/
│ ├── tree.js // 木構造描画ロジック
│ ├── tree.css // 幹・枝・実の表現
│ └── tree.html //DOM、CSS読み込み
├── memo/
│ ├── leaves.js //葉→メモ帳の機能動作
│ └── leaves.css //葉→メモ帳の表現
├── url/
├── url.js //URL遷移機能動作
└── url.css //URL遷移の表現
工夫した点
・純粋なDOM構造とCSSでBrowsTreeのUIを表現
・履歴データを時間軸×階層構造として再構成
・クリックに応じて「実」「葉→メモ帳記入」「URL遷移」を実装
2日間制作の流れ
≪1/10≫
・GoogleChromeの拡張機能チュートリアルを5時までに終わらせる。
・「木」「枝」操作画面UIについてすり合わせ(画像生成)
・GitHub共有完了
・chrome拡張機能ファイルの構造理解共有
・「background.js」ファイルから派生ブランチのフォルダ分けで各自担当分野の制作を進めていく。
・UIの仮実装（html,css,js）
・chrome拡張機能の履歴取得（API）についてjsファイル記入
≪1/11≫
・CSS調整で木の形状を整える
・「実」の動作、検索履歴への遷移、枝判定などを再考する/パワポ編集（大学アカウントは外部共有できないのでGoogle個人アカウントで作成）、発表原稿作成
≪直面した大きな課題≫
1)葉っぱ機能
サイトについてメモを記載したら、ちいさな葉っぱがつく機能。
具体的には、枝の右クリックにだけ反応して「ふせん」が開いてテキスト記入できる→テキスト記入を終えて「ふせん」右上の「done」クリックしたら、その枝から葉っぱが生える機能をcssとjsに追記。
2)「BrowseTree」UIに表示される各履歴サイトのURLを、クリックして該当ページへ遷移できる機能。
1)2)を追加したら、「実に変化（色変更,もともとあった左クリック機能）」「メモ帳を表示した後、本文記入のためにカーソル合わせる左クリック」「URL左クリックでウェブサイトに遷移」の３つの当たり判定が重複し挙動不審に......
着眼点
想定ユーザー Customer Segments 1)デザイナー2)エンジニア
想定ユーザーが抱えている問題 Issue
複数のサイトをみて、情報のつながりや思考の流れがわからなくなる(過去に調べたことを効率よく振り返りたい......)
↓
解決 Solution
サイト間の関係や思考の流れを見やすく
大事な情報をすぐ振り返れるように
☆独自の提案価値 UVP
ブラウザでの「探求の軌跡」を可視化して、情報収集や学習を効率化＆作業満足度を向上
☆圧倒的優位性 Unfair Advantage
・普通の履歴やブックマークと違い、ページのつながりを樹形で整理
・重要情報には「実」マーク
→ 振り返って一目で重要項目を確認できる
いただいたフィードバック
≪good≫
・問題提起への共感
・検索した結果をTreeで表した点
・検索履歴APIを使って手作業を少なくした点
≪next≫
・「30分」→「関連度」で枝・幹分けできるとよい
・AIを用いて閲覧時間に着目した要約表示はどうか
・Treeや実のデザインをもう少し凝れるとよい
・スマホアプリへの対応展望
反省・感想
・技術不足を感じた点（Next.js使用しかけて断念など）が多くあったので今後も学びを深めていきたい。初めてChrome拡張機能を触り、自分たちでも制作できるのだという自信と感動体験につながった。今後は気軽にchrome拡張機能作りたい。
・人と一緒に一つのものを作るという経験ができたのが一番やってよかった点だ。
大変だった点は技術不足だったが故に、調べては書きという作業を繰り返した点だ。そのため動きはするが改善の余地しかない物が出来上がったが、勉強になったし自分の今後の課題も見つかったので参加してよかったと思う。今後反省を生かて学び、もう少し思うようにプログラムできるようになったらまた参加したいと思う。