More than 5 years have passed since last update.

Kendo UI Core を使ってみた

Posted at 2014-04-29

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

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

最近のコミットを見ると、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 <space> to select)
❯⬢ Bootstrap
 ⬡ Sass
 ⬡ Modernizr

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

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

$ 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

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up