📊

(PC閲覧推奨)Excel不要！ブラウザだけで完結するセキュアな円グラフ作成ツール「local-pie-chart-maker」を開発した話

に公開
JavaScript
業務効率化
自治体dx
ツール開発
idea

🚀 まずは触ってみてください！

この記事で紹介するツールのライブデモを用意しました。理屈はあとにして、まずはどんなものか触ってみてください！

👇 ライブデモはこちら 👇
https://hosoyayusaku.github.io/local-pie-chart-maker/

コピペ用データ

ライブデモをすぐに試せるように、サンプルデータを用意しました。以下の表をコピーして、デモ画面のテキストエリアに貼り付けてみてください。

ID	回答日時	年齢	性別	職業	勤続年数	リモートワークに満足していますか？	リモートワーク頻度	最も重要な要素	生産性の変化	今後の希望
1	2024/9/1 8:15	32	男性	プログラマー	3年	とても満足	週5日	作業環境の自由度	向上した	完全リモート希望
2	2024/9/1 8:30	28	女性	マーケター	2年	やや満足	週3日	通勤時間の削減	変わらない	ハイブリッド希望
3	2024/9/1 8:45	35	男性	営業	5年	あまり満足していない	週1日	対面コミュニケーション	低下した	出社メイン希望
4	2024/9/1 9:20	29	女性	デザイナー	1年	とても満足	週4日	集中できる環境	向上した	完全リモート希望
5	2024/9/1 9:35	42	男性	管理職	8年	やや不満	週2日	チーム管理の難しさ	低下した	出社メイン希望
6	2024/9/1 9:50	26	女性	エンジニア	2年	とても満足	週5日	ワークライフバランス	向上した	完全リモート希望
7	2024/9/1 10:25	38	男性	コンサルタント	6年	やや満足	週3日	移動時間の節約	変わらない	ハイブリッド希望
8	2024/9/1 10:40	31	女性	人事	4年	どちらでもない	週2日	社員との関係性	変わらない	ハイブリッド希望
9	2024/9/1 10:55	27	男性	データアナリスト	1年	とても満足	週5日	静かな作業環境	向上した	完全リモート希望

🎯 この記事の対象読者

  • 自治体や企業で、アンケート結果などの簡単なデータをサクッとグラフ化したいと思っている方
  • セキュリティポリシーが厳しく、外部のWebサービスにデータをアップロードできない方
  • Excelを立ち上げるまでもない「ちょっとした可視化」に、もっと手軽な方法がないか探している方
  • 外部ライブラリに依存しない、シンプルなWeb技術（Vanilla JS）でのツール開発に興味があるエンジニアの方

💡 この記事を読むと得られること

  • インストール不要で、オフラインでも安全に使える円グラフ作成ツールの存在を知れる。
  • 日常の「ちょっとした面倒」を解決するツール開発の面白さや勘所がわかる。
  • データを外部に一切送信せず、ブラウザだけで処理を完結させるフロントエンド技術の一例を学べる。
  • JavaScriptで動的に円グラフを生成し、日常を楽にする簡単な実装アイデアに触れられる。

🚀 はじめに：なぜこの記事を書いたか

「このアンケート結果、ちょっと円グラフにして報告書に貼りたいな…」

自治体の現場では、そんな場面が日常茶飯事です。しかし、そのためだけにExcelを立ち上げるのは少し大げさで面倒くさい。かといって、Web上にある便利なグラフ作成サービスに、住民情報を含みかねないデータをホイホイとアップロードするのは、セキュリティ的に絶対に許されません。

この「ほんの少しの手間」と「越えられないセキュリティの壁」。このジレンマを解決したい！ PCにインストールも不要で、ネットにも繋がず、手元のPCの中だけで安全かつ爆速でグラフが作れるツールがあれば、きっと現場はハッピーになるはず。

そんな想いから、今回ご紹介する「local-pie-chart-maker」を開発しました。この記事が、同じような課題を抱える誰かの助けになれば、そして「自分たちでも作れるんだ！」という小さな火を灯せたら、最高に嬉しいです。

😫 課題：グラフ作成のちょっとした壁

これまで、ちょっとしたグラフを作るためには、地味に面倒なプロセスを踏む必要がありました。皆さんも、一度はこんな経験があるのではないでしょうか？

業務の流れ図

この一連の流れ、決して難しい作業ではありません。でも、もっとシンプルに、もっと速く、もっと安全にできるはず。この「もっと」を形にすることこそ、現場のDXの第一歩だと信じています。

✨ 解決策：円グラフメーカー「local-pie-chart-maker」

その課題を解決するために開発したのが、ブラウザだけで完結する円グラフメーカー「local-pie-chart-maker」です！ TSV/CSV形式のデータをテキストエリアに貼り付けるだけで、瞬時に色鮮やかな円グラフを生成します。

項目 内容
ツール名 local-pie-chart-maker
概要 手元のTSV/CSVデータを貼り付けるだけで、ブラウザ上に円グラフを生成するツール。データは外部に一切送信されず、PC内で処理が完結します。
利用シーン 庁内の意識調査、住民アンケートの結果、簡単な統計データの可視化など
GitHubリポジトリ https://github.com/HosoyaYusaku/local-pie-chart-maker

🛠️ 技術スタックと選定理由

このツールの最大のこだわりは「究極の手軽さ」です。そのために、技術選定は非常にシンプルになりました。

技術 役割 選定理由
HTML/CSS/JavaScript 開発言語 これしかない！ 利用者に特別な環境構築を一切求めず「HTMLファイルをダウンロードしてブラウザで開くだけ」という最も手軽な体験を提供するため、外部ライブラリやフレームワークに一切依存しない構成（Vanilla JS）を選びました。オフライン環境でも100%動作する安心感は絶大です。

📜 コードのハイライト

このツールの開発で一番頭を悩ませ、そして面白かった部分が、グラフの項目を示す「ラベル」が重なり合わないように自動調整するロジックです。以下にその心臓部の一部を抜粋します。

// ラベルの衝突を回避し、自動で再配置するロジックの一部
function relax(side){
  const a=labels.filter(L=>side==='left'?Math.cos(L.ang)<0:Math.cos(L.ang)>=0).sort((p,q)=>p.ly-q.ly);
  const minGap=Math.max(18,Math.round(W*0.012));
  for(let i=1;i<a.length;i++){
    const prev=a[i-1], cur=a[i], over=(prev.ly+prev.bh/2+minGap)-(cur.ly-cur.bh/2);
    if(over>0) cur.ly+=over;
    if(i===a.length-1 && (cur.ly+cur.bh/2>H-SAFE)){
      const sh=(cur.ly+cur.bh/2)-(H-SAFE); for(const k of a) k.ly-=sh;
    }
  }
}
relax('left'); relax('right');

やっていることは、まずラベルをグラフの右側と左側に分け、それぞれを縦方向にソートします。そして、上から順番に見ていって、前のラベルと重なっていたら、ぐいっと下に押し下げる、というシンプルなものです。この泥臭い工夫のおかげで、データ量が多くなってもラベルがぐちゃぐちゃにならず、見やすいグラフを維持できるようになりました。とはいえ、項目数が多い場合は見にくくなりますが実用には十分耐えうると思います。

💻 使い方

① 環境構築

環境構築という言葉は、このツールには不要かもしれません。

  1. GitHubリポジトリにアクセスします。
  2. index.html というファイルを1つだけダウンロードします。
  3. 以上です！

② ツールの実行

ダウンロードした index.html ファイルをダブルクリックして、お使いのブラウザ（Chrome, Firefox, Edgeなど）で開くだけ。
あとは、テキストエリアに集計したTSVまたはCSVデータを貼り付けて「グラフ作成」ボタンを押せば、魔法のようにグラフが現れます。sampleデータを使うとイメージを早くつかめると思います。

③ 出力結果（Before / After）

Before: 無味乾燥なTSV/CSVデータ

NO	年代	好きな果実
1	10代	マンゴー
2	50代	マンゴー
3	20代	みかん
4	20代	みかん
5	40代	びわ

After: 瞬時に生成される分かりやすい円グラフ！

生成されたグラフは、右クリックから「名前を付けて画像を保存」するだけで、PNG形式の画像として簡単に報告書などに活用できます。

🧗 開発でつまづいた点と解決策

このシンプルなツールにも、開発の裏側ではいくつかの試行錯誤がありました。

  • 課題：グラフの「ラベル」が重なってぐちゃぐちゃになる！
    • 原因・解決策： データの内訳が多くなると、各項目を示すラベル同士が重なってしまい、全く読めなくなってしまう問題がありました。これを解決するために、外部のグラフ描画ライブラリを使うことも考えましたが、「依存関係ゼロ」のコンセプトを貫きたかったため、自前で解決することに。グラフの左右にラベルを分け、それぞれで重なりを検知して自動的に位置を再配置する、前述の relax 関数を作成しました。力技ですが、効果は抜群でした！（項目数が多すぎるとイマイチなところはまだ残っていますが、実用に耐えうるかと思っています）

🔭 今後の展望と野望

このツールはまだまだ発展途上です。

  • 多様なグラフへの対応: 今は円グラフだけですが、現場の需要が非常に高い「棒グラフ」や「折れ線グラフ」も同じ手軽さで作成できるように機能を追加していきたいです！
  • デザインの柔軟性: 色のカスタマイズ機能をさらに強化して、組織の報告書フォーマットに合わせたデザインが直感的に作れるようにすることも検討しています。

そして何よりの願いは、この記事を見てくれた皆さんが、このツールをフォークして、自分の職場に合わせた最強のグラフツールに育てていってくれることです。

🔚 おわりに：小さな一歩が、大きな変化を生むと信じて

今回作ったのは、本当に小さな、地味なツールです。しかし、現場の職員が日々感じている「ほんの少しの面倒」を解消することは、大きな業務改革にも匹敵する価値があると信じています。

「セキュリティが厳しいから」「前例がないから」と諦めるのではなく、手元の技術で、自分たちの手で、現場を少しでも良くしていく。そんな「小さな一歩」が、やがて組織全体の大きな変化に繋がっていくはずです。

この記事が、あなたの職場をより良くするための一歩を踏み出すきっかけになれたら、開発者としてこれ以上の喜びはありません。
最後まで読んでいただき、ありがとうございました！

Discussion