アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

企業向けアプリ開発に最適なチャートライブラリWijmoを試す

ハイブリッドアプリは幅広く使われていますが、特に需要が高いのが企業向けアプリです。マルチプラットフォームでの動作やWeb技術を使った素早い開発スタイルが好まれています。



そんな業務システムを作る上で欠かせないのがグラフやチャートではないでしょうか。膨大なデータも可視化することでトレンドを見いだしたり、経営判断をする上で大事な指標になることでしょう。



ということで今回は有償のチャート、UIライブラリであるWijmoをMonacaアプリ上で試したいと思います。



グラフの種類



まずは基本となる棒グラフです。グラフはSVGで描かれているので描画が高速です。





タップイベントによるドリルダウンに対応しており、インタラクティブなグラフが描けます。さらに描画はレスポンシブで縦向き、横向き両方に対応しています。





グラフをリアルタイムに切り替えることもできます。例えば円グラフに切り替えた場合。





複数の項目を並べることもできます。





別なグラフと組み合わせる表示もサポートしています。





グラフはSVGで表示されていますのでスタイルシートを使ってスタイルの変更ができます。





リアルタイムにデータを追加していくグラフも利用できます。





実際にデータが追加されている時にはこのように表示されます(画像をクリックすると再生されます)。監視系やストリーム系データを扱うときに重宝しそうです。





それ以外にも曲線グラフや、





エリアグラフもあります。





タブレットサイズにも対応



レスポンシブに対応しているということもあり、タブレットでの横型サイズでも問題ありません。SVGなのでサイズが大きくなってもグラフはぼやけることなく綺麗です。むしろ細部まで確認したい時にはタブレットサイズのが良さそうです。





曲線のエリアグラフも綺麗です。





プロットだけの描画。





このように2カラムとしてグラフとその説明を表示するのもタブレット向きです。





軸のラベルやヘッダー、フッターなどのラベルを変更するのも簡単です。





タップした時にイベントを実行できます。








多機能な分、読み込むファイルも多くなりますのでMonaca IDEでアップロードするよりもLocalKitで実行した方が良いかと思います。Wijmo自体はグラフだけでなく、UIライブラリも含んでいるのでExcelのような表計算表示であったり、日付時刻や色選択など多彩な入力コンポーネントが用意されています。Webブラウザで見られるデモが用意されていますので気になる方はチェックしてみてください。



WijmoとMonacaアプリの相性は良いように感じます。業務アプリで求められる機能が数多く提供されていますのでぜひ試してみてください。



HTML5/AngularJS/TypeScript対応JavaScriptライブラリ - Wijmo [ ウィジモ ] | グレープシティ株式会社

SVGと画像ファイルの容量の差を検証-2 〜PNG,GIF追記〜

こんにちは。和田です。
とうとう12月になりました。師走ですね。これからの年末、自分も頑張って走り抜けようと思います。

さて、今回は前回に引き続きといいますか、
PNG,GIFとSVGを比較した方がよいのでは!?」というご意見いただきましたので、そちらの比較をしてみようと思います。

同じ図をSVGPNG,GIF,JPGに出力して比較します。
画像の書き出し方法等は以下のとおりです。

SVGへの書き出しは、IllustratorCS6で作成した図を別名で保存でSVG(1.1)にしています。
SVGの保存時には「使用しているフォント」のみを埋め込みにしています。
・画像への書き出しは、IllustratorファイルをPhotoshopで開き「Web用に保存」で行っています。
・作成した図は320×320pxを原寸としています。(PC用サイトの小さいサイズの図をこの程度と想定して設定しました)
・保存形式はPNG、GIF、JPGにしています。
・書き出す画像のサイズは原寸、2倍、3倍、4倍、5倍の5種類です
・JPGの品質は「高画質」にしています。
PNGは「PNG-24」「透明部分:なし」で書き出しています。
・GIFは「特定カラー:256」「ディザ処理アルゴリズム:誤差拡散法 100%」「透明部分:なし」で書き出しています。


◆ 規則正しい簡単な図の場合(パス数:122)


今回も規則正しい図(カラーチャートのような図)から比較してみました。以下のような2つの図です。

図−1

図−2




以下がSVG,JPEG,PNG,GIFの比較です。

サイズ(保存形式)図ー1図ー2
SVGJPEGPNGGIFSVGJPEGPNGGIF
原寸
(320×320px)
12KB25KB4KB12KB8KB49KB29KB25KB
2倍
(640×640px)
37KB5KB29KB115KB70KB45KB
3倍
(960×960px)
94KB8KB45KB188KB102KB66KB
4倍
(1280×1280px)
37KB12KB53KB225KB139KB94KB
5倍
(1600×1600px)
168KB16KB78KB332KB180KB119KB

※ グレー背景はSVGデータの以上の容量になったものです。

図−1については、PNGの容量が3倍の大きさまでSVGよりも小さくなりました。256色以下になるため、PNGの圧縮率が高くなったのかなと思います。

図−2ですと、今度は円の曲線部分のグラデーションが出てくるのでPNGの容量も大きくなってしまいました。代わりに画像の中ではGIFが一番小さくなりましたがSVG程の軽さまでは行きませんでした。
単純な曲線が入った図はSVGにあっているかもしれませんね。



◆ 会社案内の地図の場合(パス数:186)


次は、会社案内の図です。こちらも前回同様です。

図−3


SVGJPEG比較図
サイズ(保存形式)図ー3
SVGJPEGPNGGIF
原寸
(320×320px)
98KB33KB33KB20KB
2倍
(640×640px)
82KB74KB41KB
3倍
(960×960px)
143KB119KB66KB
4倍
(1280×1280px)
217KB164KB90KB
5倍
(1600×1600px)
291KB217KB115KB

※ グレー背景はSVGデータの以上の容量になったものです。

図−3ですと、GIFが一番軽くなり、PNGJPEGと大して変わらない値になりました。
色数が少ないということと、横方向に同じ色が続いている事がGIFを軽くさせたのではないかと思います。


◆ Webサイトにありそうな!?簡単な図の場合(パス数:529)


最後は簡単な図です。こちらも前回同様です。
320×220pxで作成しています。

図−4


SVG、画像比較図
サイズ(保存形式)図ー4
SVGJPEGPNGGIF
原寸
(320×220px)
156KB29KB33KB16KB
2倍
(640×440px)
61KB74KB37KB
3倍
(960×660px)
106KB123KB61KB
4倍
(1280×880px)
156KB168KB90KB
5倍
(1600×1100px)
213KB221KB119KB

※ グレー背景はSVGデータの以上の容量になったものです。

図−4ですと5倍の大きさにしてもGIFが一番軽くなりました。色数が少ないからだと思います。色数が増えた場合はディザの表現の限界も出てくると思いますので、そうした場合は他の画像と見比べてベストなのを選ぶのがいいかもしれません。
PNGJPEGより少し大きくなりました。



さて、前回の追記と言う形でPNGとGIFについても比較してみましたが、今回の検証で使った図だけで言えば、Webで使われるような簡単な図ではGIFが一番軽いようです。
ただ、もっといろいろな図で検証すると他の結果もでてくるかもしれません。
ですので、サイトの環境に応じてベストなものを選ぶのがいいかもしれません。
個人的には、他の媒体(印刷物など)にも利用しやすいSVGが広まってほしい気がします。そう考えるのは僕だけですかね?

次回はフォントの埋込を検証してみたいと思います。
それでは、また次回です。

SVGと画像ファイルの容量の差を検証

こんにちは。和田です。
最近、寒いですが皆様いかがお過ごしでしょうか?
自分はちょっと喉の調子が良くないです。皆様も体調にはお気をつけ下さい。

さて、今後数回に分けて、デザイナー視点でSVGファイルについて書いてみようと思います。
(あくまでデザイナー視点ですのでIllustratorで作成した図をSVG保存して、どうなるか…みたいな事を書いていきたいと思います。)

最初は、同じ図をSVGファイルと画像ファイルに書き出した際、容量にどれくらいの差がでるか試してみました。
比較の際は、以下の要領で行っています。
SVGへの書き出しは、IllustratorCS6で作成した図を別名で保存でSVG(1.1)にしています。
SVGの保存時には「使用しているフォント」のみを埋め込みにしています。
・画像への書き出しは、IllustratorファイルをPhotoshopで開き「Web用に保存」で行っています。
・作成した図は320×320pxを原寸としています。(PC用サイトの小さいサイズの図をこの程度と想定して設定しました)
・保存形式はJPG「高画質」にしています。
・書き出す画像のサイズは原寸、2倍、3倍、4倍、5倍の5種類です


◆ 規則正しい簡単な図の場合(パス数:122)


まずは、規則正しい図、今回はカラーチャートのような図で比較してみました。以下のような2つの図です。描いてみて思ったんですがなんだかユ◯クロのHEATTECHみたいになってしまいました。(汗)

図−1

図−2




以下がSVGJPEGにした場合の比較です。

サイズ保存形式図ー1図ー2
原寸
(320×320px)
SVG12KB8KB
原寸
(320×320px)
JPEG25KB49KB
2倍
(640×640px)
JPEG37KB115KB
3倍
(960×960px)
JPEG94KB188KB
4倍
(1280×1280px)
JPEG37KB225KB
5倍
(1600×1600px)
JPEG168KB332KB

※ グレー背景はSVGデータの以上の容量になったものです。

これくらい簡単な図だと、画像にするよりSVGの方が容量が軽くなるのですね。
結構オドロキです。
あと、なぜかJPEGの4倍画像(1280×1280px)の容量が小さくなります。う〜ん。なんでだろう…。こっちもオドロキです。



◆ 会社案内の地図の場合(パス数:186)


実際は、会社案内の図などはGoogleMapsを使う事が多いとは思うのですが、とりあえず試しにやってみました。

図−3


SVGJPEG比較図
サイズ保存形式地図
原寸
(320×320px)
SVG98KB
原寸
(320×320px)
JPEG33KB
2倍
(640×640px)
JPEG82KB
3倍
(960×960px)
JPEG143KB
4倍
(1280×1280px)
JPEG217KB
5倍
(1600×1600px)
JPEG291KB

※ グレー背景はSVGデータの以上の容量になったものです。

こちらは、2倍(640×640px)サイズまでは画像が軽かったです。
思ったより、SVGが軽く出来上がっていました。


◆ Webサイトにありそうな!?簡単な図の場合(パス数:529)


次は、以前に作成した図(といっても、素材を使ってチャチャッとですが)を比較してみたいと思います。Webにありそうな感じ…。微妙ですかね(汗)
この図は、320×220pxで作成しています。

図−4


SVG、画像比較図
サイズ保存形式図−4
原寸
(320×220px)
SVG98KB
原寸
(320×220px)
JPEG29KB
2倍
(640×440px)
JPEG61KB
3倍
(960×660px)
JPEG106KB
4倍
(1280×880px)
JPEG156KB
5倍
(1600×1100px)
JPEG213KB

※ グレー背景はSVGデータの以上の容量になったものです。

これくらいの図だと3倍(960×660px)くらいまでは画像の方が軽くなるのですね。ただ、今回は文字を少なめなので、フォントを埋め込みにするともっと容量の差がでるかもしれません。



と、ここまで3つの簡単な図で比較してみましたが、
ここで見る限りでは、Webで使う簡単な図は、同じサイズであれば画像の方が軽くなるようです。2〜3倍大きくても画像の方が軽いようです。
ただ、レスポンシブデザインのようにワンソースで高解像度のモバイルデバイスもターゲットにする場合、画像ですと高解像度デバイス用に3倍程度大きい画像も用意しなくてはならなくなるので、合計するとSVGファイルと同じくらいの容量になりそうです。

あと、SVGのファイルサイズはパスの数とフォントの有無で大分変わりそうですので、この辺りは次回、検証してみたいと思います。

それでは、また次回です。