第18回以降では家計簿アプリを題材に開発サイクルを回しながら、参照系アプリケーション開発で役立つ要素技術や、使い勝手向上のための観点について解説をしています。

実装(2):チャート表示で一覧性向上

 前回の記事ではアプリを設計するとともに、基本的な機能を一通り実装しました。現在のアプリの見た目は下記のようになっています。

図1●現状の家計簿アプリの画面
図1●現状の家計簿アプリの画面
[画像のクリックで拡大表示]

 前回までの実装では、月ごとの収支の内訳を表示する「集計ビュー」は、tableタグを使って記述していました。ユーザーが集計ビューを見て、各科目の割合を把握したいとき、この表からでは画面に表示されている項目の種類が多く、煩雑です。

 そこで、画面に表示する情報を取捨選択して、ユーザーが欲しい情報を欲しいタイミングで提示することで、アプリを分かりやすく、使いやすいものにしたいと思います。また、画面に余分な情報が表示されているとユーザーのミスを招きます。情報を絞って表示することは、このようなミスを防ぐ効果もあります。

 収支の内訳を直感的に把握できるようにするために、科目の割合を円グラフの形で提示させてみましょう。また、科目ごとの収支額の小計を、円グラフにマウスオーバーすることで表示させます。下図のようなイメージです。

図2●円グラフで表示する
図2●円グラフで表示する
[画像のクリックで拡大表示]

 円グラフや棒グラフのようなチャートの表示は、どのように実装すればよいでしょうか。HTML5で図形の描画を行うには、大きく2つの選択肢があります。

  • SVG:ベクターデータを扱うタグです。ベクターデータとはコンピュータ上での画像の表現形式の一つで、画像を図形の集合として扱います。描画した線や矩形などのオブジェクトが個別に保持、管理されるため、複数オブジェクトを描画したうち、特定のオブジェクトに対するイベントを処理したい場合に適しています。
  • canvas:ラスターデータを扱うタグです。ラスターデータはコンピュータ上での画像の表現形式の一つで、画像をピクセル(画素)の集合として扱います。タグの中の個別の描画オブジェクトの情報は保持されませんが、高速な描画が可能です。

 チャートについての詳しい解説は、連載第3回 データ可視化のための三種の神器「チャート&グリッド&図形」を確認してください。