MacBook Air で試しました。
Kendo UI Core とは？
Kendo UI は、jQuery をベースとした JSライブラリです。ビジネス向けの UIパーツを豊富に持ち、商用利用向けの有償ライセンスと、GPLv3ライセンスのオープンソースのデュアルライセンスで提供されていました。
で、最近、この Kendo UI の主要なパーツが オープンソース化して、Apache ライセンスで利用出来るようになったのです。このニュースは、それなりに見かけたのですが、まだ 「Kendo UI Core を使ってみた」みたいな情報、少ないです。そもそも 日本語では、Kendo UI の情報も少ない…
そういう私自身も全然使ったことありません(^^;)
Kendo UI という名前から、jQuery UI みたいものを想像していたんですが、ちょっと調べてみたところ、下記なんかも入っているようです。
jQuery UI と Kendo UI をかなり詳細に比較したサイトもあります。
みんな大好き jQuery UIっぽい使い方で、DataSource や MVVM なども１つのライブラリで扱えるのは なかなか魅力的です。
ということで、オープンソース化された Kendo UI Core をちょっと使ってみる事にしました。
Kendo UI
Kendo UI Core のニュース
Kendo UI Core
Yeoman で雛形を作る
せっかくなので、Yeoman を使ってベースを作ってみましょう。実は Yeoman を使うのも初めてですw
Kendo UI 用の Generator があるようなのですが、こちらはもともとの Kendo UI （商用ライセンス もしくはGPLライセンス）を利用した Generator みたいです。
最近のコミットを見ると、kendo-ui-core に書き換えている気配もありますが、generator-kendo-ui を作ってアプリを作成したところ、GPL版のものが利用されてました。
なので、素の Web App をベースにして、Kendo UI Core を取り入れてみましょう。
-
Yeoman をインストール
- 素直に、ここに従っておけば、普通にインストール出来ると思います。 http://yeoman.io/gettingstarted.html
$ npm install -g yo -
Web Application の Generator をインストール
$ npm install -g generator-webapp -
Yeoman で Web アプリの雛形を作る
$ mkdir sample $ cd sample $ yo webapp下記のように聞かれるけど、とりあえず スペースを押してBootstrap をはずした上でリターンキーを押しました。
_-----_ | | |--(o)--| .--------------------------. `---------´ | Welcome to Yeoman, | ( _´U`_ ) | ladies and gentlemen! | /___A___\ '__________________________' | ~ | __'.___.'__
´ |° ´ Y
Out of the box I include HTML5 Boilerplate, jQuery, and a Gruntfile.js to build your app.
[?] What more would you like? (Press to select)
❯⬢ Bootstrap
⬡ Sass
⬡ Modernizr
これで、Web アプリの雛形が生成されました。
ここで、下記を打ち込めば、grunt でサーバが起動し、ブラウザが立ち上がって、HTML5 Boilerplate を使った Webアプリが表示されます。エディタで、index.html に修正を加えると、すぐにブラウザに反映されます。便利ですね :-)
```bash:
$ grunt serve
Kendo UI Core を取り入れる
Kendo UI Core は bower を使って管理できるので、bower を使って取り入れてみましょう。
$ bower search kendo-ui
Search results:
kendo-ui git://github.com/kendo-labs/bower-kendo-ui.git
angular-kendo-ui git://github.com/kendo-labs/angular-kendo.git
kendo-ui-core git://github.com/kendo-labs/bower-kendo-ui.git
- kendo-ui-core をプロジェクトに取り入れる。
- "--save-dev" をつけておくと、bower.json にも取り込んでくれます。
$ bower install kendo-ui-core --save-dev
- grunt の bowerInstall タスクを実行する
$ grunt bowerInstall
あれ？ でも、index.html には JSファイルを取り込んでくれたりしないようです。実際のところ、bowerInstall による diff は、下記だけでした。
diff --git a/app/index.html b/app/index.html
index 5c5cd43..9603680 100644
--- a/app/index.html
+++ b/app/index.html
@@ -9,7 +9,6 @@
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css styles/vendor.css -->
<!-- bower:css -->
-
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
Yeomanのドキュメント にも、下記のように書いてあるので、そんなもんなんでしょう。
Your chosen generator may not include the grunt tasks "bower" and "bowerInstall". You can read more about how to install and use these at grunt-bower-requirejs and grunt-bower-install.
Kendo UI Core を使ってみる
Kendo UI の Introduction にある Date Picker を導入してみましょう。
index.html の修正
Yeoman が作ってくれた app/index.html に下記のように Kendo UI の JSファイルを追加します。ここでは 全部入りの kendo.ui.core.min.js ではなく、JavaScript Dependencies を参考にして、個別に入れてみました。
<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/kendo-ui-core/js/kendo.core.min.js"></script>
<script src="../bower_components/kendo-ui-core/js/kendo.calendar.min.js"></script>
<script src="../bower_components/kendo-ui-core/js/kendo.popup.min.js"></script>
<script src="../bower_components/kendo-ui-core/js/kendo.datepicker.min.js"></script>
<!-- endbower -->
CSSもあわせて追加しておきましょう。
<!-- bower:css -->
<link href="../bower_components/kendo-ui-core/styles/web/kendo.common.core.min.css" rel="stylesheet" />
<link href="../bower_components/kendo-ui-core/styles/web/kendo.default.min.css" rel="stylesheet" />
<!-- endbower -->
ついでに、もともとあった下記の部分を置き換えちゃいましょう。
<div class="hero-unit">
<h1>'Allo, 'Allo!</h1>
<p>You now have</p>
<ul>
<li>HTML5 Boilerplate</li>
</ul>
</div>
何の変哲もない input タグです。
<div class="hero-unit">
<h1>Kendo UI</h1>
<input id="datepicker" />
</div>
grunt serve してブラウザで確認すると、何の変哲も無い input エリアが出来てますね。
main.js の修正
Kendo UI の Introduction に従って、app/scripts/main.js を下記のように書き換えます。
$(function() {
$("#datepicker").kendoDatePicker();
});
おっと、grunt serve していたコンソールで何か怒られました。
app/scripts/main.js
line 2 col 5 Missing "use strict" statement.
line 2 col 20 Strings must use singlequote.
✖ 2 problems
Warning: Task "jshint:all" failed. Use --force to continue.
Aborted due to warnings.
ということで、改めて下記のように書き換えると無事、完成です。
'use strict';
$(function() {
$('#datepicker').kendoDatePicker();
});
まとめ
「Kendo UI Core を使ってみた」という題だったけど、実質的には 「Yeoman を使ってみた」 に近い内容でしたw