Webixを使ってみよう

Webixとは、JavaScriptで記述するUIフレームワークです。

Webix

東欧のベラルーシ共和国で開発されたもののようで、日本では今一つ認知度が低いのですが、Webixのサイトでは多くの有名企業での利用実績があるように紹介されています。
非常に使いやすく、個人的にはかなり気に入っています。

Webixの特徴

ざっくり長所をあげると

  • 他のライブラリとの依存性や競合がない
    Webixのライブラリをダウンロードして自分のサイトに追加するだけで使えます。
    必要であれば例えばjQueryなどと共存することもできます。
  • 学習コストが低い
    UIの構築に特化したライブラリ(Ajaxなどの付随的なユーティリティもあります)なのでJavaScript/HTML/CSSができる人であればすぐに使い始めることができます。
    これまでjQueryくらいしか使ったことがない、というような人(私もそうでした…)には特にオススメです。
  • ドキュメントが非常に充実している
    私がWebixを好んで使っている最大の理由はこれです。実際にWebixのサイトを見て頂ければわかりますが、全てのコンポーネントについて使い方や提供されるメソッド、イベントの解説、サンプルプログラムなどがこれでもかというくらい親切丁寧に用意されています。私は最初にこれを見たときにすっかり感動してしまいました。
    更にフォーラムも用意されており、ドキュメントに記載されていないような情報もここから拾い上げることができます。開発スタッフ自らも質問に丁寧に答えており、同社のやる気を感じます。
    もちろんすべて英語ですが、英語を読むことに抵抗がなければ素晴らしい環境が用意されていると言えるでしょう。

どんな用途に向いているか?

Webixが向いているアプリケーションは、ずばり「デザインが二の次で良い業務系アプリ」だと思います。
業務系で必要となるようなコンポーネント(グリッドやプロパティビューなど)が非常に使いやすい形で提供されているので、こういった用途にはおすすめです。
逆に、デザインを重視するようなWebサイトには向かないと思います。レイアウトや各コンポーネントの外観をCSSを使って細かく調整することも可能ですが、そのような所に手を出すと逆に工数が増えてしまいます。
デザインには手間をかけず極力Webixの標準のままで、とにかく素早くサイトを構築したい、という向きにはうってつけだと思います。
また、モバイル向けのサイトも、あまり得意とはいえません。一応レスポンシブの機能が提供されていますが、柔軟さに欠ける印象です。どちらかといえばPC向けのサイト用でしょう。

使ってみる

Webixのサイトからダウンロードできます。

注意しなければならないのは、Webixには有償の「商用版」と無償の「オープンソース版」の2つがあります。
商用版は「Pro」と称して、利用できる機能が増えますし、メーカーの正式なサポートも受けられます。通常は無償バージョンで問題ありませんが、この無償版は「GPLライセンス」となります。
GPLライセンスで問題となるような使い方(例えば、アプリに組み込んで配布したいが、自身のソースコードは開示したくない・あるいはできない)を想定する場合は注意が必要です。
ちなみに、GPLバージョンはWebixのサイトとは別にこちらから入手するのが良いようです。

ダウンロードしたら、codebaseという名前のディレクトリにある「webix.js」「webix.css」の2つをindex.htmlなどに取り込みます。さらにその下のi18nディレクトリにある「ja.js」も取り込みます。

index.htmlの例を以下に示します。

<!DOCTYPE html>
<html lang="ja">
     <head>
          <meta charset="utf-8">
          <title>Webix Demo</title>
          <link rel="stylesheet" href="webix/codebase/webix.css">
     </head>
     <body>
          <script src="webix/codebase/webix.js"></script>
          <script src="webix/codebase/i18n/ja.js"></script>
          <script src="main.js"></script>
     </body>
</html>

ここでのポイントは「<body>タグの中には<script>以外は何も置かない」ということです。
Webixは基本的に<body>要素全体を使って各パーツをレイアウトし、それらはすべてJavaScriptのコードから生成します(これはいわゆるSPAを作る時に使われる作法ですね)。
<div>などの親要素をあらかじめ<body>内に用意しておき、親要素内にWebixのコンポーネントを生成する、といった使い方もできますが、ここではそのやり方は説明しませんのでWebixのサイトで確認ください。

では早速画面を作ってみましょう。main.js というファイルを作ります。

webix.ready(function(){
     webix.i18n.setLocale("ja-JP");
     webix.ui({
          type: 'space',
          rows:[
               {
                    type: 'header',
                    template: 'Webixサンプル'
               },
               {
                    type: 'wide',
                    cols: [
                         {
                              view: 'list',
                              width: 300,
                              data: [
                                   {value: 'item1'},
                                   {value: 'item2'},
                                   {value: 'item3'}
                              ]
                         },
                         {
                              view: 'resizer'
                         },
                         {
                              template: 'hello',
                              css: {
                                   background:'yellow'
                              }
                         }
                    ]
               }
          ]
     });
});

Webix には、window.onload のような「コンテンツの読み込みを待ってから開始される処理」を記述する方法が用意されています。
上のコードでwebix.ready(function(){ … }) がそれに当たります。
(ただし、厳密には jQuery の $(function(){ … }) と同等のタイミングらしく、window.onload より前に実行されます)
この中に、webixのコンテンツのレンダリング処理を記述します。
やっていることは、まずロケールの設定を行っています(2行目)。これは日付が絡む処理やコンポーネント(カレンダーなど)を扱う場合に、日本語が正しく表示されるために必要です。
次に webix.ui({…}) で、実際にWebixのコンポーネントを生成してレンダリングします。
単にコンポーネントを表示させるだけならこれで終わりです。実に簡単ですね。

実際の画面はこんな感じです。

20190508_002

上の例について特に詳しく説明はしませんが、実際に表示されたブラウザの画面と見比べるとなんとなく何をやっているのか想像がつくのではないかと思います。
たったこれだけのコードで、ヘッダがあって2カラムのレイアウトで、更に画像ではわかりにくいですが、カラムの幅をマウスドラッグで変えるためのスプリッタ(WebixではResizerと呼びます)も実装されています。
もちろんスタイルシートは一切書く必要はありません。すごいですね!

Code Snippetを使う

webix.ui({…}) の中身を実際に作っていくとき、是非とも活用したいのがWebixの本家サイトで提供されている「Code Snippet」です。
Code Snippetを使えば、ブラウザ上でコードを記述し、その結果を即座に画面上で確認できます。結果は保存することができ、URLを割り振ってくれるので後から見直したりコードを公開するのにも便利に使えます。
上でやったのと同じものを、Code Snippet にも置いておきましたので参考にしてください。

https://snippet.webix.com/okdd0kry

UIデザインのカスタマイズ

「デザインは二の次」と書きましたが、カスタマイズすることは可能です。それには「Skin Builder」を使います。

20190508_001

予め用意されているテーマ(スキン)を選び、さらにそのテーマのデフォルトのスタイルを基にしてコンポーネントの色やフォント、サイズなどをある程度自由に変更できます。
作ったカスタムテーマはダウンロードして自身のサイトで使うことができます。興味のある方はやってみてください。

次は…

まずはここまでです。
今後Webixに関する様々なトピックをこのブログで紹介しようと思います。
Webixは日本語の情報が少ないので、少しでもお役に立てれば幸いです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>