Kendo UI Core を使ってみた


MacBook Air で試しました。

Kendo UI Core とは？
------

Kendo UI は、jQuery をベースとした JSライブラリです。ビジネス向けの UIパーツを豊富に持ち、商用利用向けの有償ライセンスと、GPLv3ライセンスのオープンソースのデュアルライセンスで提供されていました。

で、最近、この Kendo UI の主要なパーツが オープンソース化して、Apache ライセンスで利用出来るようになったのです。このニュースは、それなりに見かけたのですが、まだ 「Kendo UI Core を使ってみた」みたいな情報、少ないです。そもそも 日本語では、Kendo UI の情報も少ない…

そういう私自身も全然使ったことありません(^^;)

Kendo UI という名前から、jQuery UI みたいものを想像していたんですが、ちょっと調べてみたところ、下記なんかも入っているようです。

* [DataSource](http://docs.telerik.com/kendo-ui/getting-started/framework/datasource/overview)
* [MVVM](http://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/overview)
* [SPA](http://docs.telerik.com/kendo-ui/getting-started/framework/spa/overview)


[jQuery UI と Kendo UI をかなり詳細に比較したサイト](http://jqueryuivskendoui.com/)もあります。

みんな大好き jQuery UIっぽい使い方で、DataSource や MVVM なども１つのライブラリで扱えるのは　なかなか魅力的です。

ということで、オープンソース化された Kendo UI Core をちょっと使ってみる事にしました。


#### Kendo UI
* [HTML5対応のユーザーインターフェイスライブラリ「Kendo UI」登場 (Publickey)](http://www.publickey1.jp/blog/11/html5kendo_ui.html)
* http://www.telerik.com/kendo-ui

#### Kendo UI Core のニュース

* [人気のHTML5 UIライブラリKendo UIがそのほとんどをオープンソース化 (TechCrunch)](http://jp.techcrunch.com/2014/04/19/20140418telerik-open-sources-most-of-its-kendo-ui-html5-framework/)
* [Kendo UIの大部分がOSSに (@IT)](http://www.atmarkit.co.jp/ait/articles/1404/22/news120.html)

#### Kendo UI Core

* https://github.com/telerik/kendo-ui-core


Yeoman で雛形を作る
------

せっかくなので、Yeoman を使ってベースを作ってみましょう。実は Yeoman を使うのも初めてですw

Kendo UI 用の Generator があるようなのですが、こちらはもともとの Kendo UI （商用ライセンス もしくはGPLライセンス）を利用した Generator みたいです。

* https://github.com/kendo-labs/generator-kendo-ui

[最近のコミット](https://github.com/kendo-labs/generator-kendo-ui/commit/e22e1f613ab4bebb43c7d5b89d454399e1f0959a)を見ると、kendo-ui-core に書き換えている気配もありますが、generator-kendo-ui を作ってアプリを作成したところ、GPL版のものが利用されてました。

なので、素の Web App をベースにして、Kendo UI Core を取り入れてみましょう。


1. Yeoman をインストール
    * 素直に、ここに従っておけば、普通にインストール出来ると思います。 http://yeoman.io/gettingstarted.html


    ```bash:
    $ npm install -g yo
    ```

2. Web Application の Generator をインストール

    ```bash:
    $ npm install -g generator-webapp
    ```

3. Yeoman で Web アプリの雛形を作る

    ```bash:
    $ mkdir sample
    $ cd sample
    $ yo webapp
    ```

    下記のように聞かれるけど、とりあえず スペースを押してBootstrap をはずした上でリターンキーを押しました。

   ```bash:
     _-----_
    |       |
    |--(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 <space> to select)
❯⬢ Bootstrap
 ⬡ Sass
 ⬡ Modernizr
```

これで、Web アプリの雛形が生成されました。

ここで、下記を打ち込めば、grunt でサーバが起動し、ブラウザが立ち上がって、HTML5 Boilerplate を使った Webアプリが表示されます。エディタで、index.html に修正を加えると、すぐにブラウザに反映されます。便利ですね :-)

```bash:
$ grunt serve
```

Kendo UI Core を取り入れる
-------

Kendo UI Core は bower を使って管理できるので、bower を使って取り入れてみましょう。

```bash:
$ 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
```

1. kendo-ui-core をプロジェクトに取り入れる。
  * "--save-dev" をつけておくと、bower.json にも取り込んでくれます。

  ```bash:
  $ bower install kendo-ui-core --save-dev
  ```
 
2. grunt の bowerInstall タスクを実行する

  ```bash:
$ 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のドキュメント](http://yeoman.io/gettingstarted.html) にも、下記のように書いてあるので、そんなもんなんでしょう。

>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](http://docs.telerik.com/kendo-ui/getting-started/introduction) にある Date Picker を導入してみましょう。

### index.html の修正

Yeoman が作ってくれた app/index.html に下記のように Kendo UI の JSファイルを追加します。ここでは 全部入りの kendo.ui.core.min.js ではなく、[JavaScript Dependencies](http://docs.telerik.com/kendo-ui/getting-started/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](http://docs.telerik.com/kendo-ui/getting-started/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