- 追加された行はこの色です。
- 削除された行はこの色です。
*JavaScript：jQuery＋Bootstrap＋GoogleCharts＋Spine＋RequireJSのサンプル [#t77e8890]
jQueryとBootstrapとGoogleChartsとSpineとRequireJSを組み合わせたサンプルです。
JavaVMのヒープメモリ計算を題材として取り扱います。
JavaVMのヒープサイズの内訳を計算し、グラフ化する題材で、各種JavaScriptのライブラリを組み合わせて実装します。以下のライブラリを組み合わせて実装します。
具体的には、GoogleChartsを使用して、棒グラフを使ってNew/Old、Eden/Survivor等をわかりやすく可視化する、といった題材です。※単純な計算ですが、実機で起動した場合いに実際に確保されるサイズとは若干ずれます。
こんな感じのページです。
#ref(javaHeapCalc.png);
使用しているライブラリ
-jQuery&br;
言わずと知れたJavaScriptの有名どころですw&br;
http://jquery.com/
-Bootstrap&br;
BootStrapですw&br;
http://getbootstrap.com/
-Google Charts&br;
Google謹製のJavaScriptのグラフ作成ライブラリです。&br;
https://developers.google.com/chart/interactive/docs/gallery/barchart#Labels
-Spine&br;
JavaScriptでクライアントサイドMVCを実現するためのフレームワークです。&br;
http://spinejs.com/
-RequireJS&br;
JavaScriptのMoludeローダー。非同期読み込み、依存関係の定義、コード分割等に使えます。&br;
http://requirejs.org/
***サンプル [#l4cc4db5]
どのサンプルも見た目、動作ともに全く同じですが、中身が違います。
|#|説明|JQuery|Bootstrap|GoogleCharts|Spine|RequireJS|
|1|jQuery,Bootstrap,Google Chartをただ組み合わせてグラフを表示|使用|使用|使用|-|-|
|2|Spineを使用して、１のコードをクライアントサイドMVCでリファクタリング|使用|使用|使用|使用|-|
|3|2のコードを使用して、とりあえずRequireJSをそのまま導入（コードの分割無し）|使用|使用|使用|使用|使用|
|4|3のコードを、RequireJSを使ってモジュール分割|使用|使用|使用|使用|使用|
|1|[[jQuery,Bootstrap,Google Chartをただ組み合わせてグラフを表示:http://www.hiihah.info/jsShowCase/JavaHeapCalc/index.html]]|使用|使用|使用|-|-|
|2|[[Spineを使用して、１のコードをクライアントサイドMVCでリファクタリング:http://www.hiihah.info/jsShowCase/JavaHeapCalcWithMVC/index.html]]|使用|使用|使用|使用|-|
|3|[[2のコードを使用して、とりあえずRequireJSをそのまま導入（コードの分割無し）:http://www.hiihah.info/jsShowCase/JavaHeapCalcWithMVCAndRequireJs1/index.html]]|使用|使用|使用|使用|使用|
|4|[[3のコードを、RequireJSを使ってモジュール分割:http://www.hiihah.info/jsShowCase/JavaHeapCalcWithMVCAndRequireJs2/index.html]]|使用|使用|使用|使用|使用|
