hifive UI Libraryの紹介（タイルコンテナ）

hifiveはJavaScriptのフレームワークの他、Webアプリケーションを開発するのに便利なUIライブラリも多数提供しています。

今回はその一つ、タイルコンテナを紹介します。タイルをドラッグ&ドロップで移動してユーザの希望に合わせた配置に自分で組み替えられるライブラリです。

利用イメージ

最初の表示は次のようになります。タイル状の表示が並んでいます。

グレーになっている部分がドラッグできる部分になっています。

タイルをドラッグして移動できます。

幅二つの場合は左右の入れ替え、一つ分の幅の部分にはドロップできません。

コード

まず、スタイルシートとJavaScriptを読み込みます。

<link rel="stylesheet" href="tileContainer.css" />
<script src="tileContainer.js"></script>

次にDOM構築完了のタイミングでタイルコンテナを実行します。

<script type="text/javascript">
$(function() {
  h5.core.controller('.columns', h5.ui.components.tileContainer.tileContainerController);
});
</script>

ここで、 .columns はタイルコンテナ表示にするクラス名です。

HTML

HTMLは次のように記述します。

<div class="columns">
  <div class="column box_content">
    <h1 class="header">カラム１</h1>
  </div>
  <div class="column box_content">
    <h1 class="header">カラム２</h1>
  </div>
  <div class="column box_content">
    <h1 class="header">カラム３</h1>
  </div>
  <div class="column column2 box_content">
    <h1 class="header">2倍幅のカラム</h1>
  </div>
  <div class="column box_content">
    <h1 class="header">カラム４</h1>
  </div>
</div>

これで準備は完了です。

使いどころ

この手のUIが便利なのは、業務システムの管理画面やダッシュボードになるのではないでしょうか。ユーザごとに好みが分かれたり、担当毎に必要な情報が異なる場合があります。そういった時にユーザの好きな形に表示が変更できるのはシステムの柔軟性を保つ上でも重要です。

クライアントサイドだけでできるので、サーバサイドの変更がいらないのも大きな利点です。表示位置をサーバサイドに保存する手もありますが、CookieやlocalStrageに保存しておくのも手だと思います。

タイルコンテナの表示はこちらのデモでご覧いただけます。

hifive – HTML5企業Webシステムのための開発プラットフォーム – hifive