この記事はまとめです
こちらの記事が長くなったために、簡潔にまとめました。
| タイトル | 内容 |
|---|---|
| アプリ開発の背景 | アプリ開発をした理由は？ |
| アプリに使った技術 | なぜその技術を使ったのか？ |
| アプリで工夫したところ | 工夫点について |
| アプリの使い方 | どうやってアプリを使えばいいかの提案 |
| アプリの改善点 | これからの展望 |
開発経緯のまとめ
きっかけ
- 数ヶ月前、ソフトウェアの操作方法の詳細なマニュアルを制作。
- 30ページのPDFにしたが、他の人から「欲しい情報がすぐに見つけられない」と指摘された。
- 情報量が多く、探しにくいことが問題だったと感じた。
マニュアルのページ数削減では解決しなかった
- 言葉をコンパクトにしたり、画像の配置を変えてページ数を減らそうとした。
- 結果、2ページ減ったが、情報の探しやすさは変わらなかった。
課題の本質
- 「情報量が多い中で、欲しい情報を探すのが難しい」ことが問題。
- 必要な情報を得るために、「情報の取捨選択が多すぎる」
解決策の考案
- 「欲しい情報が探しやすく、情報の取捨選択を少なくする工夫」を考える必要がある。
- 文章の書き方の工夫では解決が難しいため、アプリの開発を考え始めた。
タブレット端末からのひらめき
- アプリのアイコンのように、見出しを並べて表示することで情報が探しやすくなると考えた。
- 直感的な操作で欲しい情報が取得できるアプリを作ることを目指した。
技術のまとめ
【Electron】
- 半永久的に使うことを想定し、ネイティブアプリケーションを選択。
- 先輩が個人開発で使用していたため、実際に見て興味を持った。
【Vue.js】
- Qiitaや技術ブログでの情報から、Electronと相性が良いことを確認。
- 記事や動画で「LocalStorageの使用も簡単で、ビルド時の設定が不要」と知り、希望が見えた。
【VueQuill】
- メールアプリやWordのUIに似たものを探していた。
- QiitaでQuillを発見し、Vue向けのVueQuillがあることを知って選択。
【vue-mermaid-string】
- 初めはfishbone diagramを考えたが、技術力不足で断念。
- jsライブラリでフローチャートを調査し、Mermaidを発見。
- 他のライブラリも試したが、完全無料のMermaidを選択。
- ノードをクリックする機能実装時の問題で、vue-mermaidではなくvue-mermaid-stringを選択。
工夫ポイントのまとめ
ノードの色と形の設定
- ノードの色
- 見出し1を基準に色の系統を分け、階層ごとに色を濃くする。
- 同じ色の系統でグループを直感的に識別可能に。
- 12色用意し、13個以上の見出しがある場合は色を再利用。
- ノードの形
- 階層ごとに形を変え、直感的に階層を識別できるように。
- 外枠線を同じ色にして外枠を目立たなくし、線のみのタイプで見た目をすっきりさせる。
ポップアップ表示
- クリックした見出しの内容だけを表示し、周りをスッキリさせた。
トラックパッド操作によるインタラクション
- トラックパッド操作で見出し間を移動可能にし、操作性を向上。
使い方まとめ
マニュアルの閲覧
- ノードグラフ（ダイアグラム）を自動で生成し、目次として機能。
- 縦並びでどことどこが同じ階層なのか、わからなくなる問題を解決。
- 横並びやノードの形設定で見間違い防止。
- ポップアップ表示により、特定の見出しの内容だけを表示し、情報量を制限。
タッチパネルでの利用
- タッチパネル対応パソコンで、人に何かを説明するときに使える。
- 視覚的にわかりやすく、カテゴリ分けが一目で理解できる。
改善点のまとめ
- 現在地表示:
- ポップアップに位置表示
- アニメーション:
- トラックパッド操作に動き追加
- 共有機能:
- ノートの出力・読み込み
- スケーリング対応:
- 高解像度や小型画面対応
- サイズ調整:
- ノード数に応じてグラフサイズ自動調整
- ノード編集:
- ノードから文章編集・ノードのドラッグ&ドロップ
- マークダウン対応:
- マークダウンを選べるように
- 設定充実:
- 説明画面の強化、色変更、ダークモード対応
- 色選択:
- ノードの色を好きに設定できる
改善点について、アドバイスいただけると幸いです。
以上です。
お読みいただき、ありがとうございました！
メイン記事（上記と同じもの）