はじめに
Cosense（旧 ScrapBox）、Evernote、Google Docs、Notion、Obsidianなど、今やデジタルノートアプリの候補を挙げるとキリがありません。
どれも素晴らしいサービス（ありがたや〜
）ですが、特定の範囲では今回開発した『Puppet（パペット）』が、もっとも使い勝手の良いアプリとなることを願っています。
GitHub
GitHubにVue.js部分のコードがあります。
ChatGPTを使った、この記事の全体の要約
- Puppetは、ノートの見出しからノードを生成し、ノート全体を可視化するネイティブアプリです。
- 主な機能はローカル保存、ノードグラフの生成、ノードクリックでのポップアップ表示、トラックパッドを使ったインタラクションです。
- ElectronやVue3などを使用し、情報量が多いマニュアルから欲しい情報を迅速に見つけるために開発しました。
- 使用場面としては、マニュアルの閲覧やプレゼンテーションでの利用を想定しています。
- 改善点として、ポップアップ時の現在地表示、アニメーションの追加、ノートの共有・読み込み機能、グラフの大きさ自動調整、ノード編集機能の追加を計画しています。
簡潔なまとめ （別の記事にまとめました）
別の記事に、この記事全体のことをまとめました。
こちらに、その一覧を示します。
| タイトル | 内容 |
|---|---|
| アプリ開発の背景 | アプリ開発をした理由は？ |
| アプリに使った技術 | なぜその技術を使ったのか？ |
| アプリで工夫したところ | 工夫点について |
| アプリの使い方 | どうやってアプリを使えばいいかの提案 |
| アプリの改善点 | これからの展望 |
ざっくりとした紹介
アプリの概要
| アプリの名前 | Puppet（パペット） |
|---|---|
| アプリの概要 | ワンクリックでノートに書いた見出しからノードを生成し、ノートの全体像を可視化するネイティブアプリケーション |
| アプリの機能 ❶ | ローカルにノートを保存する |
| ❷ | ノートの内容からノードグラフ（ダイアグラム）を生成し、 |
| ❸ | ノードをクリックすると、見出しの内容がポップアップ表示される |
| ❹ | トラックパッドを使ったインタラクション |
| アプリの用途 | ノートにメモすることはもちろん、マニュアルの閲覧など |
スクリーンショット
２枚のスライドでざっくり紹介します。
このアプリのインタラクションについて
主な使用技術
保存先 ⇒ ローカルストレージ
アプリ開発の背景
開発経緯 まとめ
きっかけ
数ヶ月前に内に向けて、とあるソフトウェアの操作方法のマニュアルを制作する機会がありました。
「マニュアルを読めば誰でも再現できる」、そんなマニュアルを作ろうと意気込んでいたので、かなり詳細に作り込みました。その結果、図や写真などもあわせて30ページほどになったわけです。
そのpdfを他の人に確認してもらったところ、
「欲しい情報がすぐに見つけられない」、というご指摘をいただきました。
こちらとしては丁寧にマニュアルを記述すべきという思いがあったため、かなり細かく書いてしまったわけです。どこのボタンを押して、次どこのボタンを押すとか。
それゆえに情報量が多くなり、探すのが大変になったのだと感じています。
縦に無限に続く（そんな気分がする）ようなマニュアルから、欲しい情報を探すというのは確かに大変ですよねー
もっと早く気がつくべきでした。
マニュアルのページ数削減では解決しなかった
とりあえず最初は、言葉をコンパクトにしてみたり画像の配置を変えてみたりして、マニュアル自体のページ数を少しでも減らすことを試みました。
しかし結果は2ページ減。情報量はさほど変わらず……、探しやすくなったということは期待できませんでした。
これは、意味が無いな～ということで止めましたね。（ま、わかっていたことなんですが）
改めて、課題は「情報の取捨選択が多すぎること」である
本質的な問題は「情報量が多い中で、欲しい情報を探すのが難しい。必要な情報を得るために情報の取捨選択が多すぎること」と考えました。
つまり、欲しい情報に辿り着くまでに、「これはいらない・これは必要」を繰り返す作業が延々と続いてしまうということです。
そのように仮定すると自分がやるべきことは、
「欲しい情報が探しやすく、情報の取捨選択を少なくする工夫をすること」です。
文章の書き方の工夫でどうにかする、のは無理かなと感じ、それを解決するアプリを作ってみようかなと考え始めました。
タブレット端末からのひらめき
ある日。
タブレットでマップアプリを探していました。
あれ〜、どこにアプリ置いたっけ？ ああ、あったあった………
これだ！！
アプリのアイコンのように、見出しだけあんな感じで並べたりしたら、情報量を制限しながら探すのも億劫にならず、欲しい情報が発見しやすくなるんじゃないか………、
というのがこの開発の始まりでした。
ぱっと欲しい情報の記載先が分かって、直感的な操作で情報を取得できたらいいんじゃないか！
では、どんな技術を使えばできるのでしょうか。
技術について
技術 まとめ
使用技術
先に述べたように、使用している技術は以下のとおりです。
- Electron
- Vue3
- VueQuill
- vue-mermaid-string
技術選定理由
Electronに決めたワケ
半永久的に使いたいという思いから、まずクラウドなどのお金のかかる環境は却下しました。
そうなると、ネイティブアプリケーションだ！！ということで、それを可能にする技術を探しました。
有名アプリケーションもElectronで作られていることから、自分もElectronを使ってみようとなったわけです。
あと、先輩に個人開発で使ってる人がいて、どんなものか見ていたのでそれも使おうと思ったきっかけです。
Vueを使用したワケ
Electronについて、Qiitaや技術ブログを調査していると下記の記事や動画を見つけました。
こちらの記事や動画からVueを選択すれば、アプリができそう！という希望が見えました。LocalStorageを選択したのもこちらからです。ビルドする際にも設定が不要みたいで、楽ですし〜。
感謝申し上げます。
Quill
jsライブラリにリッチテキストエディタがないか調査していました。というのも、普段メールアプリやWordなどでよくあの形（UとかBとか）を見るため、自然とあのUIが頭に浮かんだのです。
こちらでQuillというものを発見しました。
また調査している内に、VueにはVueQuillがあると知り、こちらを使うことに決めました。
Mermaid
実は最初はfishbone diagram、特性要因図のようなデザイン(例えば、こんなかんじ)にしたいなと思っていたのですが、技術力不足により断念しました。（今思えば、完成しても見やすいのかどうかわかりませんが…面白い見た目になるかもという期待はありました）
次に、「jsライブラリ フローチャート」で検索したところ、
を発見しました。
もちろん、すぐにこれを使おうとしたわけではなく、
こちらを試したりしましたが、完全無料ではない？という感じがしたので、完全無料のMermaidを選択しました。
Vueには、
- vue-mermaid-string
- vue-mermaid
という2種類があるのですが、vue-mermaid-stringを選択しました。
ノードをクリックする機能を実装していたときにうまくいかなかったため、vue-mermaidはやめました。（もしかすると、こちらのミスでできなかっただけかもしれません）
工夫したポイント
このアプリの工夫点を３つご紹介します。
工夫 まとめ
ノードの色と形の設定
ノードの色
図のように、見出し1を基準に色の系統を分けています。
例えば見出し1が青色なら、見出し2、見出し3に進むにつれて青色を濃くしています。
見出し1を含め配下の見出し2と3を同じ青色で統一してしまと単調で見にくくなってしまう気がしたため、アクセントをつけるために色を少し変えています。
とはいえ同じ色の系統なので、どことどこが同じグループなのかは直感的にわかるようになったはずです。
アプリでは12色用意しており、13個以上になると先頭の色と同じ色を使っています。
12色用意したのは、既存のサービスで色を選択するときに用意されている配色がそれくらいだからです。
参照サイト↓
ノードの形
| 階層 | ノードの形 |
|---|---|
| 見出し1 | 角丸四角形（角が少し丸い） |
| 見出し2 | 角丸四角形（角がかなり丸い） |
| 見出し3 | 左端が三角にくり抜かれた長方形 |
見出しごとに形を変えています。
（同じ形の）このノードとこのノードは同じ階層にあるということを直感的に理解させたかったからです。
形選びにもこだわりました。
mermaidにはそもそも用意されている形が限られているのですが、その中から上記の3つを選択しました。
理由としては、
【わかりやすさ・視認性】と【デザイン】です。
長方形も用意されており見やすいのですが、元々のアイデアの発端がアプリアイコンだったため、角が丸いものを想定してました。（そっちの方が、自分がデザイン的に好きということもあります）
- 見出し1
- 一番上に来るため、どっしりと構えるような感じがしたものを選択しました。
- 見出し2
- 「見出し1の子」というイメージから丸みが強くなったデザインを設定しました。
- 見出し3
- 階層的にこれが最後であると直感的に示すため、少し異質なものを選択しました。
mermaidは通常、外枠線が表示されるんですが、塗りつぶしと線の色を同じ色にすることで、外枠線がないようなデザインにしました。
また、ノードとノードをつなげる線には矢印がついたものもありましたが、見た目がすっきりする線のみのタイプにしました。
ポップアップ表示
クリックした見出しの内容だけが表示されるため、周りがスッキリします。
縦に続いていると、上や下の見出しの内容も一瞬同じ見出しの内容かなと勘違いする時もあったのですが、これで防げます。
トラックパッド操作によるインタラクション
アプリは「使っていて楽しいか」が大事だと考えていて、他に何か実装できないかと考えていました。
そんなある日、友人に見せてもらったのが「THE ZOOMQUILT Ⅱ」というものです。
不思議ですよね。ずっと絵が続いている。
友人と話していて思いついたのが、
「ポップアップ表示時における階層構造を意識したトラックパッド操作インタラクションシステム」です。（長くなりました）
どういうことか、下の表に端的にまとめます。
| トラックパッドで行う操作 | 操作後、どうなるか | 例 |
|---|---|---|
| 1. ピンチアウト | 一つ下の階層にある内容を表示する | 見出し1→見出し2 |
| 2. ピンチイン | 一つ上の階層にある内容を表示する | 見出し2→見出し1 |
| 3. 右から左に横スワイプ | 同じ階層の右の内容を表示する | 見出し3-1→見出し3-2 |
| 4. 左から右に横スワイプ | 同じ階層の左の内容を表示する | 見出し3-2→見出し3-1 |
下図参照（再掲）
トラックパッド操作説明スライド
トラックパッドにおけるジェスチャにより見出し間を移動できます。
ポップアップ表示をするため、ノードをクリックしてポップアップを開いて消してを繰り返すのは面倒ですから。
もう一点。
こちら(後述の図)を例に説明させていただくと、RubyからPythonに行くことはできますが、SinatraからFlaskには行くことができません。（仕様です）
グループという意識を大切にしたかったためです。
工夫点は以上になります。
このアプリの使い方
これまでアプリの説明をさせていただきました。
では、このアプリの使用場面、使用方法、使い方をお伝えしたいと思います。
使い方 まとめ
マニュアルの閲覧
これは言わずもがな、なような気がしますが今一度。そのために作ったわけですから。
ボタンをワンクリックするだけで、ノードグラフ（ダイアグラム）が生成されるわけですが、これは言わば目次を自動で作るような機能というとイメージしやすいでしょうか。
はじめに
背景
目的
概要
スクリーンショット
説明
・
・
・
・
終わりに
このように永遠に縦並びが続くと、どことどこが同じ階層かわからなくなることがあります。（特に離れた位置にある場合はわかりづらい）
横並び、またノードの形を設定したことで、見間違えることは無くなったはずです。
また、ポップアップ表示により特定の見出しの内容を表示させることで、目に入る情報量を制限できます。こうすることで、気分的に楽に読めるのではないでしょうか。（文字量が多いと辛いですから）
あとは、きっかけでも述べさせていただいたような感じです。
P.S.
いつかは読み込み機能や共有機能をつけたいと考えていますが、今はそれができないので、例えば別のアプリで書いたノートをこちらにコピペして、閲覧するなどもアリかもしれません。
タッチパネル最高！ 人への説明に使える！
これは、タッチパネル対応のパソコンに限るのですが、何かのテーマについて人に説明したいとします。
たとえば、フレームワークについて軽く説明したいという場面。
mermaidの図
とりあえず、こんな感じのものがあったとします。(※ここではクリックできません)
これを用いて、人に説明してみましょう。
具体例を以下に記します。
例1）
フレームワークはこんな感じでたくさんあります。
まずは、Rubyを見てみましょうか。
Rubyには、Ruby on RailsやSinatraがあるんですね。
ここで、Ruby on Railsに焦点を当ててみましょう。
RailsにはMVCモデルというものがあって…………
では、Railsで作られたサイトを確認してみましょう。（ポン（ここで「使用サイトの例」のノードをタップする → ポップアップ表示に切り替わる））
例2）
Pythonのフレームワークをご紹介します。
今回ご紹介するのは、FlaskとDjangoです。
では、Djangoについてご説明いたします。（ポン（ここで「Django」のノードをタップする））
こんな感じでしょうか。
友人にざっくりと軽く説明するときに使用でき、どんなグループカテゴリがあるのか一目でわかるはずですし、また深掘りをするときにも役立つはずです！
ここまでは実装済みのPuppetの機能の紹介と説明でした。
次が最後の項目です。
これからの改善点、こうすればもっと良くなるはず！というところを自分なりの視点で述べさせていただこうと思います。
これからの改善点
改善点 まとめ
改善点はそこまで必要ではない細かいところから、重要度が高いようなものまで書きます。
| 改善点一覧 | |||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| どんな機能？ | 機能の詳細 | なぜ、その機能が必要か？ | それを実現するための手法や構想 | 重要度 （大・中・小） |
|||||||||
| ポップアップ表示時における現在地の表示 | ポップアップしてどこを押したのか忘れないように、ポップアップ画面にノードグラフの位置を表示する。 | 常にポップアップの背後にノードグラフは表示されているものの、クリックした位置はユーザーの記憶力に委ねられる。 | ポップアップ画面の上部にドットで表示させる。 | 大 | |||||||||
| アニメーションの追加 | トラックパッド操作インタラクションにおいて、アニメーションを追加することで動きをつけ、トラックパッド操作を視覚的にわかりやすくする。 | トラックパッド操作で画面は変化するものの、アニメーションがないため、動作したのかわかりにくい。 | CSS Animation | 大 | |||||||||
| ノートを共有・読み込むことができる機能 | 文章をデータとして出力し、ファイルを生成できる。また、データを読み込み表示できる。 | 自分の人以外が作ったノートの場合、手動でコピペする方法しかなく、面倒なため。 | リッチテキストが保持できる状態で出力する。拡張子は未定。 | 大 | |||||||||
| Electronのスケーリングサイズへの最適化 | 4Kモニターの使用時や13型のノートPCのスケーリングサイズにも対応させる。 | スケーリングサイズを100%以外に設定すると、ノードから見出しがはみ出るため。 | 未定（横道に逸れるが、ネイティブではなく、Webアプリにすれば解決すると思われる） | 大 | |||||||||
| グラフ全体の大きさを調整する | ノードが多すぎるとノードの数に応じて、グラフ全体の大きさを調整する。 | 現状では+や-ボタンで調整はできるが自動化することでユーザーの負担を減らす。 | ノードの数からサイズ調整。 | 大 | |||||||||
| ノードの編集 | ノードから文章を編集できたり、ドラッグ&ドロップでノードの位置を変更できるように実装したい。 | ノードグラフでノートの全体像が見たり、ポップアップ表示で内容を見て、文章にミスがあればそのまま編集できるのが望ましい。 | mermaidはsvgで出力されるため、ノードグラフは別の方法で実装する必要があると思われる。 | 大 | |||||||||
| マークダウン選択可能にする | 現在はGUIによる操作。マークダウンにより、キーボード一つで文字を装飾できる。 | ボタンをポチポチ押すよりも、マークダウンが好きな人に向けて。 | mavon-editorを使用する。 | 中 | |||||||||
| 設定・説明画面の充実 | サイドバーのAboutというページにPuppetの使い方を書いているが、説明を文字やイラストだけでなく、ノードグラフを使って説明する。また、色を変更できたり、ダークモードなどの機能をつける。 | ノードグラフを使って説明することで、アプリの使い方をイメージさせることができる。また、アプリ、背景の色などを変えることで気分転換できる。（Obsidianを見習いたい） | ノードグラフ作成プログラムを使う。色については、CSSとJavaScriptを組み合わせる。 | 中 | |||||||||
| 色を選べるようにする | ノードの色を設定できるようにする。ただし、下に行くにつれ、濃くなる色の設定はそのまま。 | 友人からの依頼。ユーザーの使う場面によっては使い勝手が良くなる。 | JavaScriptによる実装。色は予め決めておき、その中から選んでもらう形にする。 | 小 | |||||||||
| $\hspace{88em}$ | |||||||||||||
改善点について、こういう技術が使えるよ、こうしたらいいんじゃない？ のようなコメントをいただけると幸いです。
最後に
今回はネイティブアプリケーションとして作りました。
半永久的に使いたいということでElectronを使いましたが、Webサービス開発の練習も兼ねて、現在はRailsを使って作成し直しています。
人に作品を見せることで色々な意見をいただき、新たなアイデアが生まれました。いい経験になったと思います。
具体的な実装については、これから加筆していこうと思います。
（な、長くならない程度に……💦）
今回、開発にあたり、参考にさせていただいた記事、動画、プログラムの作成者の方々には感謝申し上げます。ありがとうございました。
以上で、今回の開発についてのお話を終えさせていただきます。
最後までお読みいただき、ありがとうございました！
余談：『Puppet』という名前の由来
Puppetには日本語で「傀儡」、「操り人形」という意味があります。
上記グラフのように、ノードグラフが上から下に流れ、ノードが線でつながれています。
この形がまるで上から糸でつるしているように見えたことと、操り人形をあやつるように自由自在にノートを操れるようなアプリにしたいという思いを込めて、『Puppet』にしました。